refactor(desktop): pin tab — drop accent left border, swap leading icon to Pin (MUL-2449)

Jiayuan reported that the accent left border on pinned tabs reads as a
heavy black edge in light mode and looks unrefined. Replace it with a
quieter identifier: pinned tabs swap their route icon for a Pin glyph
in the leading slot (same size, no extra horizontal space). The hidden
X close button stays as the secondary cue. RFC §3 D1v moves from
iii FINAL to iv FINAL; iii is demoted to v2 FINAL → v3 REMOVED.

Co-authored-by: multica-agent <github@multica.ai>

apps/desktop/src/renderer/src/components/tab-bar.test.tsx

@@ -0,0 +1,151 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, fireEvent, within } from "@testing-library/react";
+
+type MockTab = {
+  id: string;
+  path: string;
+  title: string;
+  icon: string;
+  pinned: boolean;
+};
+
+const state = vi.hoisted(() => ({
+  activeWorkspaceSlug: "acme" as string | null,
+  byWorkspace: {
+    acme: {
+      activeTabId: "tA",
+      tabs: [
+        { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: false },
+        { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+      ] as MockTab[],
+    },
+  } as Record<string, { activeTabId: string; tabs: MockTab[] }>,
+  togglePin: vi.fn<(tabId: string) => void>(),
+  closeTab: vi.fn<(tabId: string) => void>(),
+  setActiveTab: vi.fn<(tabId: string) => void>(),
+  moveTab: vi.fn<(from: number, to: number) => void>(),
+  addTab: vi.fn<(path: string, title: string, icon: string) => string>(),
+}));
+
+vi.mock("@/stores/tab-store", () => {
+  const store = {
+    get activeWorkspaceSlug() {
+      return state.activeWorkspaceSlug;
+    },
+    get byWorkspace() {
+      return state.byWorkspace;
+    },
+    togglePin: state.togglePin,
+    closeTab: state.closeTab,
+    setActiveTab: state.setActiveTab,
+    moveTab: state.moveTab,
+    addTab: state.addTab,
+  };
+  const useTabStore = Object.assign(
+    (selector?: (s: typeof store) => unknown) =>
+      selector ? selector(store) : store,
+    { getState: () => store },
+  );
+  const useActiveGroup = () =>
+    state.activeWorkspaceSlug
+      ? (state.byWorkspace[state.activeWorkspaceSlug] ?? null)
+      : null;
+  const resolveRouteIcon = () => "ListTodo";
+  return { useTabStore, useActiveGroup, resolveRouteIcon };
+});
+
+vi.mock("@multica/core/paths", () => ({
+  paths: {
+    workspace: (slug: string) => ({
+      issues: () => `/${slug}/issues`,
+    }),
+  },
+}));
+
+import { TabBar } from "./tab-bar";
+
+function reset() {
+  state.activeWorkspaceSlug = "acme";
+  state.byWorkspace = {
+    acme: {
+      activeTabId: "tA",
+      tabs: [
+        { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: false },
+        { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+      ],
+    },
+  };
+  state.togglePin.mockReset();
+  state.closeTab.mockReset();
+  state.setActiveTab.mockReset();
+  state.moveTab.mockReset();
+  state.addTab.mockReset();
+}
+
+beforeEach(reset);
+
+describe("TabBar hover action buttons", () => {
+  it("renders a Pin button on every unpinned tab and an Unpin button on every pinned tab", () => {
+    state.byWorkspace.acme.tabs = [
+      { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: true },
+      { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+    ];
+    const { getAllByLabelText } = render(<TabBar />);
+    expect(getAllByLabelText("Unpin tab")).toHaveLength(1);
+    expect(getAllByLabelText("Pin tab")).toHaveLength(1);
+  });
+
+  it("clicking the Pin button calls togglePin for the tab", () => {
+    const { getAllByLabelText } = render(<TabBar />);
+    const pinButtons = getAllByLabelText("Pin tab");
+    fireEvent.click(pinButtons[1]); // click Pin on tB (Projects)
+    expect(state.togglePin).toHaveBeenCalledWith("tB");
+  });
+
+  it("clicking the Unpin button on a pinned tab calls togglePin", () => {
+    state.byWorkspace.acme.tabs = [
+      { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: true },
+      { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+    ];
+    const { getByLabelText } = render(<TabBar />);
+    fireEvent.click(getByLabelText("Unpin tab"));
+    expect(state.togglePin).toHaveBeenCalledWith("tA");
+  });
+
+  it("hides the X close button on a pinned tab but keeps it on an unpinned tab", () => {
+    state.byWorkspace.acme.tabs = [
+      { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: true },
+      { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+    ];
+    const { queryAllByLabelText } = render(<TabBar />);
+    // Only the unpinned tab exposes a Close affordance — pinned tab requires
+    // explicit Unpin first (RFC §3 D3c FINAL).
+    expect(queryAllByLabelText("Close tab")).toHaveLength(1);
+  });
+
+  it("keeps the full title visible on a pinned tab (no icon-only collapse)", () => {
+    state.byWorkspace.acme.tabs = [
+      { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: true },
+    ];
+    const { getByLabelText } = render(<TabBar />);
+    const pinnedTab = getByLabelText("Issues (pinned)");
+    expect(within(pinnedTab).getByText("Issues")).toBeTruthy();
+  });
+
+  it("renders the Pin glyph as the leading icon on a pinned tab and the route icon on an unpinned tab", () => {
+    state.byWorkspace.acme.tabs = [
+      { id: "tA", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: true },
+      { id: "tB", path: "/acme/projects", title: "Projects", icon: "ListTodo", pinned: false },
+    ];
+    const { getByLabelText } = render(<TabBar />);
+    const pinnedTab = getByLabelText("Issues (pinned)");
+    const unpinnedTab = getByLabelText("Projects");
+    // lucide-react renders the icon name into the class list. The leading
+    // slot icon is size-3.5; the hover Pin/Unpin action button is size-2.5,
+    // so we qualify on size to avoid matching the action glyph.
+    expect(pinnedTab.querySelector(".lucide-pin.size-3\\.5")).toBeTruthy();
+    expect(pinnedTab.querySelector(".lucide-list-todo")).toBeNull();
+    expect(unpinnedTab.querySelector(".lucide-list-todo.size-3\\.5")).toBeTruthy();
+    expect(unpinnedTab.querySelector(".lucide-pin.size-3\\.5")).toBeNull();
+  });
+});

apps/desktop/src/renderer/src/components/tab-bar.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import {
   Inbox,
   CircleUser,
@@ -8,6 +9,8 @@ import {
   Settings,
   X,
   Plus,
+  Pin,
+  PinOff,
   type LucideIcon,
 } from "lucide-react";
 import {
@@ -28,8 +31,20 @@ import {
   restrictToParentElement,
 } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@multica/ui/components/ui/context-menu";
 import { cn } from "@multica/ui/lib/utils";
-import { useTabStore, useActiveGroup, resolveRouteIcon, type Tab } from "@/stores/tab-store";
+import {
+  useTabStore,
+  useActiveGroup,
+  resolveRouteIcon,
+  type Tab,
+} from "@/stores/tab-store";
 import { paths } from "@multica/core/paths";
 
 const TAB_ICONS: Record<string, LucideIcon> = {
@@ -42,9 +57,23 @@ const TAB_ICONS: Record<string, LucideIcon> = {
   Settings,
 };
 
-function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolean; isOnly: boolean }) {
+function SortableTabItem({
+  tab,
+  isActive,
+  isOnly,
+}: {
+  tab: Tab;
+  isActive: boolean;
+  /**
+   * True iff this is the only tab in the workspace. Hiding X on the last
+   * tab matches existing behavior and avoids the surprise of the store's
+   * last-tab reseed kicking in. Pinned tabs always hide X (RFC §3 D3c).
+   */
+  isOnly: boolean;
+}) {
   const setActiveTab = useTabStore((s) => s.setActiveTab);
   const closeTab = useTabStore((s) => s.closeTab);
+  const togglePin = useTabStore((s) => s.togglePin);
 
   const {
     attributes,
@@ -55,7 +84,11 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
     isDragging,
   } = useSortable({ id: tab.id });
 
-  const Icon = TAB_ICONS[tab.icon];
+  // Pinned tabs swap the route icon for a Pin glyph as the static "I am
+  // pinned" indicator (RFC §3 D1v-iv FINAL). The route information is still
+  // present in the title, and this avoids a hard left accent border that read
+  // as visually heavy in light mode.
+  const LeadingIcon = tab.pinned ? Pin : TAB_ICONS[tab.icon];
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -74,17 +107,30 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
     closeTab(tab.id);
   };
 
-  const stopDragOnClose = (e: React.PointerEvent) => {
+  const handleTogglePin = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    togglePin(tab.id);
+  };
+
+  const stopDragOnAction = (e: React.PointerEvent) => {
     e.stopPropagation();
   };
 
-  return (
+  // Pinned tabs keep their full title (RFC §3 D1v-ii FINAL). The only visual
+  // differences vs. unpinned tabs are the leading Pin icon (swapped in above)
+  // and the suppressed X (closing requires explicit Unpin). Pin/Unpin is
+  // reachable via the hover action button below and the right-click menu.
+  const showCloseButton = !tab.pinned && !isOnly;
+
+  const tabButton = (
     <button
       ref={setNodeRef}
       style={style}
       {...attributes}
       {...listeners}
       onClick={handleClick}
+      aria-label={tab.pinned ? `${tab.title} (pinned)` : tab.title}
+      title={tab.pinned ? `${tab.title} (pinned)` : undefined}
       className={cn(
         "group flex h-7 w-40 items-center gap-1.5 rounded-md px-2 text-xs transition-colors",
         "select-none cursor-default",
@@ -94,7 +140,7 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
         isDragging && "opacity-60",
       )}
     >
-      {Icon && <Icon className="size-3.5 shrink-0" />}
+      {LeadingIcon && <LeadingIcon className="size-3.5 shrink-0" />}
       <span
         className="min-w-0 flex-1 overflow-hidden whitespace-nowrap text-left"
         style={{
@@ -104,10 +150,22 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
       >
         {tab.title}
       </span>
-      {!isOnly && (
+      <span
+        onClick={handleTogglePin}
+        onPointerDown={stopDragOnAction}
+        role="button"
+        aria-label={tab.pinned ? "Unpin tab" : "Pin tab"}
+        title={tab.pinned ? "Unpin tab" : "Pin tab"}
+        className="hidden size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors group-hover:flex hover:bg-muted-foreground/20 hover:text-foreground"
+      >
+        {tab.pinned ? <PinOff className="size-2.5" /> : <Pin className="size-2.5" />}
+      </span>
+      {showCloseButton && (
         <span
           onClick={handleClose}
-          onPointerDown={stopDragOnClose}
+          onPointerDown={stopDragOnAction}
+          role="button"
+          aria-label="Close tab"
           className="hidden size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors group-hover:flex hover:bg-muted-foreground/20 hover:text-foreground"
         >
           <X className="size-2.5" />
@@ -115,6 +173,36 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
       )}
     </button>
   );
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger render={tabButton} />
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => togglePin(tab.id)}>
+          {tab.pinned ? (
+            <>
+              <PinOff />
+              Unpin tab
+            </>
+          ) : (
+            <>
+              <Pin />
+              Pin tab
+            </>
+          )}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          variant="destructive"
+          disabled={tab.pinned || isOnly}
+          onClick={() => closeTab(tab.id)}
+        >
+          <X />
+          Close tab
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
 }
 
 function NewTabButton() {
@@ -155,12 +243,17 @@ export function TabBar() {
   const tabs = group?.tabs ?? [];
   const activeTabId = group?.activeTabId ?? "";
   const tabIds = tabs.map((t) => t.id);
+  const pinnedCount = tabs.filter((t) => t.pinned).length;
+  const unpinnedCount = tabs.length - pinnedCount;
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
     const from = tabs.findIndex((t) => t.id === active.id);
     const to = tabs.findIndex((t) => t.id === over.id);
+    // The store clamps the destination to within the source tab's zone
+    // (pinned vs unpinned), so this call is safe even when the user tries
+    // to drag across the boundary — the tab will land at the boundary.
     if (from !== -1 && to !== -1) moveTab(from, to);
   };
 
@@ -173,13 +266,22 @@ export function TabBar() {
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
-          {tabs.map((tab) => (
-            <SortableTabItem
-              key={tab.id}
-              tab={tab}
-              isActive={tab.id === activeTabId}
-              isOnly={tabs.length === 1}
-            />
+          {tabs.map((tab, index) => (
+            <Fragment key={tab.id}>
+              <SortableTabItem
+                tab={tab}
+                isActive={tab.id === activeTabId}
+                isOnly={tabs.length === 1}
+              />
+              {tab.pinned &&
+                index === pinnedCount - 1 &&
+                unpinnedCount > 0 && (
+                  <div
+                    aria-hidden
+                    className="mx-1 h-4 w-px bg-border"
+                  />
+                )}
+            </Fragment>
           ))}
         </SortableContext>
       </DndContext>

apps/desktop/src/renderer/src/platform/navigation.test.tsx

@@ -5,17 +5,40 @@ import { useEffect } from "react";
 // Shared in-memory state that the mocked tab store reads / mutates. The test
 // records every method call so we can assert openInNewTab does NOT activate
 // the new tab (i.e. setActiveTab is never invoked on the same-workspace path).
+type MockRouter = {
+  state: { location: { pathname: string } };
+  navigate: ReturnType<typeof vi.fn>;
+};
+
+type MockTab = {
+  id: string;
+  path: string;
+  pinned: boolean;
+  router: MockRouter;
+};
+
+function makeMockRouter(pathname: string): MockRouter {
+  return {
+    state: { location: { pathname } },
+    navigate: vi.fn(),
+  };
+}
+
 const state = vi.hoisted(() => ({
   activeWorkspaceSlug: "acme" as string | null,
   byWorkspace: {
     acme: {
       activeTabId: "tA",
-      tabs: [{ id: "tA", path: "/acme/issues" }],
+      tabs: [
+        {
+          id: "tA",
+          path: "/acme/issues",
+          pinned: false,
+          router: makeMockRouter("/acme/issues"),
+        },
+      ] as MockTab[],
     },
-  } as Record<
-    string,
-    { activeTabId: string; tabs: { id: string; path: string }[] }
-  >,
+  } as Record<string, { activeTabId: string; tabs: MockTab[] }>,
   openTab: vi.fn<(path: string, title?: string, icon?: string) => string>(),
   setActiveTab: vi.fn<(tabId: string) => void>(),
   switchWorkspace: vi.fn<(slug: string, openPath?: string) => void>(),
@@ -91,7 +114,14 @@ beforeEach(() => {
   state.byWorkspace = {
     acme: {
       activeTabId: "tA",
-      tabs: [{ id: "tA", path: "/acme/issues" }],
+      tabs: [
+        {
+          id: "tA",
+          path: "/acme/issues",
+          pinned: false,
+          router: makeMockRouter("/acme/issues"),
+        },
+      ],
     },
   };
   Object.defineProperty(window, "desktopAPI", {
@@ -170,6 +200,69 @@ describe("DesktopNavigationProvider.openInNewTab", () => {
   });
 });
 
+describe("DesktopNavigationProvider.push with pinned active tab", () => {
+  function pinActive(pathname: string) {
+    state.byWorkspace.acme.tabs[0] = {
+      id: "tA",
+      path: pathname,
+      pinned: true,
+      router: makeMockRouter(pathname),
+    };
+  }
+
+  it("redirects push to a new foreground tab when pathname differs", () => {
+    pinActive("/acme/issues");
+    let adapter: ReturnType<typeof useNavigation> | null = null;
+    const Probe = captureAdapter((a) => {
+      adapter = a;
+    });
+    render(
+      <DesktopNavigationProvider>
+        <Probe />
+      </DesktopNavigationProvider>,
+    );
+    adapter!.push("/acme/projects");
+    expect(state.openTab).toHaveBeenCalledWith("/acme/projects", "/acme/projects", "File");
+    expect(state.setActiveTab).toHaveBeenCalledWith("tNew");
+  });
+
+  it("allows in-tab navigation when only search/hash changes", () => {
+    pinActive("/acme/issues");
+    let adapter: ReturnType<typeof useNavigation> | null = null;
+    const Probe = captureAdapter((a) => {
+      adapter = a;
+    });
+    render(
+      <DesktopNavigationProvider>
+        <Probe />
+      </DesktopNavigationProvider>,
+    );
+    adapter!.push("/acme/issues?filter=open");
+    // Pathname unchanged → pinned interception declines and falls through to
+    // the router's own navigate — openTab / setActiveTab must not fire.
+    expect(state.openTab).not.toHaveBeenCalled();
+    expect(state.setActiveTab).not.toHaveBeenCalled();
+  });
+
+  it("leaves cross-workspace push to the workspace switcher (not pin)", () => {
+    pinActive("/acme/issues");
+    let adapter: ReturnType<typeof useNavigation> | null = null;
+    const Probe = captureAdapter((a) => {
+      adapter = a;
+    });
+    render(
+      <DesktopNavigationProvider>
+        <Probe />
+      </DesktopNavigationProvider>,
+    );
+    adapter!.push("/butter/inbox");
+    // Cross-workspace push runs through tryRouteToOtherWorkspace before
+    // tryRouteToPinnedNewTab, so switchWorkspace wins.
+    expect(state.switchWorkspace).toHaveBeenCalledWith("butter", "/butter/inbox");
+    expect(state.openTab).not.toHaveBeenCalled();
+  });
+});
+
 describe("TabNavigationProvider.openInNewTab", () => {
   function renderTabProvider() {
     let adapter: ReturnType<typeof useNavigation> | null = null;
@@ -205,3 +298,58 @@ describe("TabNavigationProvider.openInNewTab", () => {
     expect(state.switchWorkspace).not.toHaveBeenCalled();
   });
 });
+
+describe("TabNavigationProvider.push with pinned active tab", () => {
+  type ProviderRouter = Parameters<typeof TabNavigationProvider>[0]["router"];
+
+  function renderPinnedTabProvider(pathname: string) {
+    // The active tab and the per-tab router must share the same pathname:
+    // tryRouteToPinnedNewTab reads the *active tab's* router for the current
+    // pathname (so query-only pushes routed via React Router still compare
+    // correctly), while the TabNavigationProvider falls back to *its own*
+    // router.navigate when no interception fires. In real desktop usage they
+    // are the same router instance; this helper mirrors that invariant.
+    const fakeRouter = {
+      state: { location: { pathname, search: "" } },
+      subscribe: () => () => {},
+      navigate: vi.fn(),
+    } as unknown as ProviderRouter;
+    state.byWorkspace.acme.tabs[0] = {
+      id: "tA",
+      path: pathname,
+      pinned: true,
+      router: fakeRouter as unknown as MockRouter,
+    };
+
+    let adapter: ReturnType<typeof useNavigation> | null = null;
+    const Probe = captureAdapter((a) => {
+      adapter = a;
+    });
+    render(
+      <TabNavigationProvider router={fakeRouter}>
+        <Probe />
+      </TabNavigationProvider>,
+    );
+    return { getAdapter: () => adapter!, fakeRouter };
+  }
+
+  it("redirects push to a new foreground tab when pathname differs", () => {
+    const { getAdapter, fakeRouter } = renderPinnedTabProvider("/acme/issues");
+    getAdapter().push("/acme/projects");
+    expect(state.openTab).toHaveBeenCalledWith("/acme/projects", "/acme/projects", "File");
+    expect(state.setActiveTab).toHaveBeenCalledWith("tNew");
+    // Pinned interception short-circuits — the per-tab router must NOT
+    // navigate, otherwise the pinned tab itself would move off its path.
+    expect(fakeRouter.navigate).not.toHaveBeenCalled();
+  });
+
+  it("allows in-tab navigation when only search/hash changes", () => {
+    const { getAdapter, fakeRouter } = renderPinnedTabProvider("/acme/issues");
+    getAdapter().push("/acme/issues?filter=open");
+    // Same pathname → pinned interception declines, push falls through to
+    // the tab's own router.navigate, and no new tab is opened.
+    expect(state.openTab).not.toHaveBeenCalled();
+    expect(state.setActiveTab).not.toHaveBeenCalled();
+    expect(fakeRouter.navigate).toHaveBeenCalledWith("/acme/issues?filter=open");
+  });
+});

apps/desktop/src/renderer/src/platform/navigation.tsx

@@ -108,6 +108,37 @@ function tryRouteToOtherWorkspace(path: string): boolean {
   return true;
 }
 
+/**
+ * Intercept pushes originating in a pinned tab and force them into a new
+ * tab. Returns `true` if the navigation was redirected (caller should NOT
+ * proceed). Pathname-only changes (search / hash / same-page state) are
+ * allowed through so pinned filter / drawer / form-state interactions
+ * still work — see RFC §3 D2a (FINAL: any pathname change → new tab) and
+ * D2b (FINAL: same pathname → allowed in pinned tab).
+ *
+ * Dedupe is preserved (D4a): `openTab` activates an existing same-path tab
+ * if one exists, otherwise creates a new one. The newly-focused tab is
+ * activated foreground — a pinned-tab push is an explicit user action, not
+ * a background cmd+click, so the focus follows.
+ */
+function tryRouteToPinnedNewTab(path: string): boolean {
+  const store = useTabStore.getState();
+  const active = getActiveTab(store);
+  if (!active?.pinned) return false;
+
+  // Use the live router pathname rather than `active.path` so query-only
+  // navigations performed via React Router (which only sync pathname back
+  // to the store) still compare correctly.
+  const currentPathname = active.router.state.location.pathname;
+  const newPathname = path.split("?")[0].split("#")[0];
+  if (currentPathname === newPathname) return false;
+
+  const icon = resolveRouteIcon(path);
+  const newId = store.openTab(path, path, icon);
+  if (newId) store.setActiveTab(newId);
+  return true;
+}
+
 /**
  * Root-level navigation provider for components outside the per-tab
  * RouterProviders (sidebar, search dialog, modals, WindowOverlay contents).
@@ -165,6 +196,7 @@ export function DesktopNavigationProvider({
         const active = currentActiveTab();
         if (tryRouteToOverlay(path, active?.router)) return;
         if (tryRouteToOtherWorkspace(path)) return;
+        if (tryRouteToPinnedNewTab(path)) return;
         active?.router.navigate(path);
       },
       replace: (path: string) => {
@@ -240,6 +272,7 @@ export function TabNavigationProvider({
       push: (path: string) => {
         if (tryRouteToOverlay(path, router)) return;
         if (tryRouteToOtherWorkspace(path)) return;
+        if (tryRouteToPinnedNewTab(path)) return;
         router.navigate(path);
       },
       replace: (path: string) => {

apps/desktop/src/renderer/src/stores/tab-store.test.ts

@@ -17,6 +17,7 @@ vi.mock("../routes", () => ({
 import {
   sanitizeTabPath,
   migrateV1ToV2,
+  migrateV2ToV3,
   useTabStore,
 } from "./tab-store";
 
@@ -277,3 +278,155 @@ describe("useTabStore actions", () => {
     expect(useTabStore.getState().activeWorkspaceSlug).toBe("acme");
   });
 });
+
+describe("togglePin", () => {
+  it("flips a tab's pinned state", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    const tabId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+    expect(useTabStore.getState().byWorkspace.acme.tabs[0].pinned).toBe(false);
+
+    store.togglePin(tabId);
+    expect(useTabStore.getState().byWorkspace.acme.tabs[0].pinned).toBe(true);
+
+    store.togglePin(tabId);
+    expect(useTabStore.getState().byWorkspace.acme.tabs[0].pinned).toBe(false);
+  });
+
+  it("moves a newly-pinned tab to the start of the pinned zone", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme"); // creates default unpinned tab at index 0
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    store.addTab("/acme/agents", "Agents", "Bot");
+    const agentsId = useTabStore.getState().byWorkspace.acme.tabs[2].id;
+
+    store.togglePin(agentsId);
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    expect(tabs[0].id).toBe(agentsId);
+    expect(tabs[0].pinned).toBe(true);
+    expect(tabs[1].pinned).toBe(false);
+    expect(tabs[2].pinned).toBe(false);
+  });
+
+  it("appends a second pinned tab after the first pinned tab", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    store.addTab("/acme/agents", "Agents", "Bot");
+    const projectsId = useTabStore.getState().byWorkspace.acme.tabs[1].id;
+    const agentsId = useTabStore.getState().byWorkspace.acme.tabs[2].id;
+
+    store.togglePin(agentsId);
+    store.togglePin(projectsId);
+
+    // Both pinned, in the order they were pinned (agents first, projects
+    // second), then the unpinned default tab.
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    expect(tabs.map((t) => t.id)).toEqual([
+      agentsId,
+      projectsId,
+      tabs[2].id,
+    ]);
+    expect(tabs.map((t) => t.pinned)).toEqual([true, true, false]);
+  });
+
+  it("returns an unpinned tab to the start of the unpinned zone", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    const issuesId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+    const projectsId = useTabStore.getState().byWorkspace.acme.tabs[1].id;
+
+    // Pin both, then unpin one.
+    store.togglePin(issuesId);
+    store.togglePin(projectsId);
+    store.togglePin(issuesId);
+
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    expect(tabs.map((t) => t.id)).toEqual([projectsId, issuesId]);
+    expect(tabs.map((t) => t.pinned)).toEqual([true, false]);
+  });
+});
+
+describe("moveTab boundary clamp", () => {
+  it("clamps a pinned-tab move so it never crosses into the unpinned zone", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    store.addTab("/acme/agents", "Agents", "Bot");
+    const issuesId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+
+    store.togglePin(issuesId); // [issues(pinned), projects, agents]
+
+    // User tries to drag the pinned tab to index 2 (unpinned zone end).
+    store.moveTab(0, 2);
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    // It should be clamped to index 0 — the only pinned slot — i.e. unchanged.
+    expect(tabs[0].id).toBe(issuesId);
+    expect(tabs.map((t) => t.pinned)).toEqual([true, false, false]);
+  });
+
+  it("clamps an unpinned-tab move so it never crosses into the pinned zone", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    store.addTab("/acme/agents", "Agents", "Bot");
+    const issuesId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+    const agentsId = useTabStore.getState().byWorkspace.acme.tabs[2].id;
+
+    store.togglePin(issuesId); // [issues(pinned), projects, agents]
+
+    // User tries to drag agents (index 2) to index 0 (pinned zone).
+    store.moveTab(2, 0);
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    // Clamped to index 1 — start of the unpinned zone.
+    expect(tabs[0].id).toBe(issuesId);
+    expect(tabs[1].id).toBe(agentsId);
+    expect(tabs.map((t) => t.pinned)).toEqual([true, false, false]);
+  });
+
+  it("reorders freely within the same zone", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    store.addTab("/acme/agents", "Agents", "Bot");
+
+    // All unpinned; move agents (2) to position 0.
+    store.moveTab(2, 0);
+    const tabs = useTabStore.getState().byWorkspace.acme.tabs;
+    expect(tabs.map((t) => t.path)).toEqual([
+      "/acme/agents",
+      "/acme/issues",
+      "/acme/projects",
+    ]);
+  });
+});
+
+describe("migrateV2ToV3", () => {
+  it("adds pinned=false to every persisted tab", () => {
+    const v2 = {
+      activeWorkspaceSlug: "acme",
+      byWorkspace: {
+        acme: {
+          activeTabId: "t1",
+          tabs: [
+            { id: "t1", path: "/acme/issues", title: "Issues", icon: "ListTodo" },
+            { id: "t2", path: "/acme/projects", title: "Projects", icon: "FolderKanban" },
+          ],
+        },
+      },
+    };
+    const v3 = migrateV2ToV3(v2);
+    expect(v3.activeWorkspaceSlug).toBe("acme");
+    expect(v3.byWorkspace.acme.tabs).toEqual([
+      { id: "t1", path: "/acme/issues", title: "Issues", icon: "ListTodo", pinned: false },
+      { id: "t2", path: "/acme/projects", title: "Projects", icon: "FolderKanban", pinned: false },
+    ]);
+  });
+
+  it("handles missing byWorkspace gracefully", () => {
+    const v3 = migrateV2ToV3({ activeWorkspaceSlug: null } as Parameters<typeof migrateV2ToV3>[0]);
+    expect(v3.byWorkspace).toEqual({});
+    expect(v3.activeWorkspaceSlug).toBeNull();
+  });
+});

apps/desktop/src/renderer/src/stores/tab-store.ts

@@ -20,6 +20,14 @@ export interface Tab {
   router: DataRouter;
   historyIndex: number;
   historyLength: number;
+  /**
+   * Pinned tabs render at the left of the tab bar as icon-only, suppress the
+   * X close button, and turn any `navigation.push()` originating in them into
+   * an `openInNewTab()` so they stay parked on their original path. Pinning
+   * is invariant-preserving: pinned tabs always come before unpinned tabs in
+   * a workspace's `tabs` array; `togglePin` / `moveTab` enforce this.
+   */
+  pinned: boolean;
 }
 
 export interface WorkspaceTabGroup {
@@ -78,8 +86,20 @@ interface TabStore {
   updateTab: (tabId: string, patch: Partial<Pick<Tab, "path" | "title" | "icon">>) => void;
   /** Patch history tracking of a tab. Finds across groups. */
   updateTabHistory: (tabId: string, historyIndex: number, historyLength: number) => void;
-  /** Reorder within the active workspace's group only. */
+  /**
+   * Reorder within the active workspace's group only. Clamped so a tab can
+   * never cross the pinned / unpinned boundary — a drag that would move a
+   * pinned tab into the unpinned zone (or vice versa) is dropped at the
+   * boundary instead. This keeps the "pinned tabs first" invariant without
+   * requiring callers to know about it.
+   */
   moveTab: (fromIndex: number, toIndex: number) => void;
+  /**
+   * Flip a tab's pinned state. Pinning moves it to the end of the pinned
+   * zone; unpinning moves it to the start of the unpinned zone. Both
+   * preserve the "pinned tabs before unpinned tabs" invariant.
+   */
+  togglePin: (tabId: string) => void;
   /**
    * After the workspace list arrives/changes (login, realtime delete), drop
    * any tab group whose slug is no longer in `validSlugs`, and repoint
@@ -190,9 +210,17 @@ function makeTab(path: string, title: string, icon: string): Tab {
     router: createTabRouter(path),
     historyIndex: 0,
     historyLength: 1,
+    pinned: false,
   };
 }
 
+/** Index of the first unpinned tab in a group (== pinned count). */
+function pinnedBoundary(tabs: Tab[]): number {
+  let i = 0;
+  while (i < tabs.length && tabs[i].pinned) i++;
+  return i;
+}
+
 /** Default entry point for a workspace — its issues list. */
 function defaultPathFor(slug: string): string {
   return `/${slug}/issues`;
@@ -453,17 +481,63 @@ export const useTabStore = create<TabStore>()(
         if (!activeWorkspaceSlug) return;
         const group = byWorkspace[activeWorkspaceSlug];
         if (!group) return;
+        if (fromIndex < 0 || fromIndex >= group.tabs.length) return;
+
+        // Clamp the drop position to within the source tab's group (pinned vs
+        // unpinned) so the "pinned tabs first" invariant survives drag-reorder.
+        // Pinned zone is [0, boundary); unpinned zone is [boundary, length).
+        const boundary = pinnedBoundary(group.tabs);
+        const source = group.tabs[fromIndex];
+        let clampedTo: number;
+        if (source.pinned) {
+          // boundary is exclusive upper bound for pinned-zone indices.
+          clampedTo = Math.max(0, Math.min(toIndex, boundary - 1));
+        } else {
+          clampedTo = Math.max(boundary, Math.min(toIndex, group.tabs.length - 1));
+        }
+        if (clampedTo === fromIndex) return;
         set({
           byWorkspace: {
             ...byWorkspace,
             [activeWorkspaceSlug]: {
               ...group,
-              tabs: arrayMove(group.tabs, fromIndex, toIndex),
+              tabs: arrayMove(group.tabs, fromIndex, clampedTo),
             },
           },
         });
       },
 
+      togglePin(tabId) {
+        const { byWorkspace } = get();
+        const hit = findTabLocation(byWorkspace, tabId);
+        if (!hit) return;
+        const { slug, group, index } = hit;
+        const current = group.tabs[index];
+        const nextTab: Tab = { ...current, pinned: !current.pinned };
+
+        // Remove from current position, then insert at the new zone boundary:
+        //   pinning   → end of pinned zone (just before first unpinned tab)
+        //   unpinning → start of unpinned zone (right after last pinned tab)
+        const withoutCurrent = [
+          ...group.tabs.slice(0, index),
+          ...group.tabs.slice(index + 1),
+        ];
+        const newBoundary = pinnedBoundary(withoutCurrent);
+        const insertAt = newBoundary;
+        const nextTabs = [
+          ...withoutCurrent.slice(0, insertAt),
+          nextTab,
+          ...withoutCurrent.slice(insertAt),
+        ];
+
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [slug]: { ...group, tabs: nextTabs },
+          },
+        });
+      },
+
       validateWorkspaceSlugs(validSlugs) {
         const { activeWorkspaceSlug, byWorkspace } = get();
         let changed = false;
@@ -497,17 +571,23 @@ export const useTabStore = create<TabStore>()(
     }),
     {
       name: "multica_tabs",
-      version: 2,
+      version: 3,
       storage: createJSONStorage(() => createPersistStorage(defaultStorage)),
       migrate: (persistedState, version) => {
         // v1 → v2: flat `tabs` array → per-workspace grouping.
         // Tabs whose path isn't workspace-scoped (root `/`, login, etc.)
         // are dropped — they have no workspace to belong to, and the new
         // model's invariant is "every tab lives in a workspace group".
-        if (version < 2 && persistedState && typeof persistedState === "object") {
-          return migrateV1ToV2(persistedState as Partial<V1Persisted>);
+        let state = persistedState;
+        if (version < 2 && state && typeof state === "object") {
+          state = migrateV1ToV2(state as Partial<V1Persisted>);
         }
-        return persistedState as V2Persisted;
+        // v2 → v3: introduce `Tab.pinned`. Existing tabs default to
+        // unpinned; pin ordering invariant trivially holds (no pinned tabs).
+        if (version < 3 && state && typeof state === "object") {
+          state = migrateV2ToV3(state as V2Persisted);
+        }
+        return state as V3Persisted;
       },
       partialize: (state) => ({
         activeWorkspaceSlug: state.activeWorkspaceSlug,
@@ -517,15 +597,19 @@ export const useTabStore = create<TabStore>()(
             {
               activeTabId: group.activeTabId,
               tabs: group.tabs.map(
-                ({ router: _router, historyIndex: _hi, historyLength: _hl, ...rest }) =>
-                  rest,
+                ({
+                  router: _router,
+                  historyIndex: _hi,
+                  historyLength: _hl,
+                  ...rest
+                }) => rest,
               ),
             },
           ]),
         ),
       }),
       merge: (persistedState, currentState) => {
-        const persisted = persistedState as Partial<V2Persisted> | undefined;
+        const persisted = persistedState as Partial<V3Persisted> | undefined;
         if (!persisted?.byWorkspace) return currentState;
 
         const byWorkspace: Record<string, WorkspaceTabGroup> = {};
@@ -552,9 +636,14 @@ export const useTabStore = create<TabStore>()(
               router: createTabRouter(clean),
               historyIndex: 0,
               historyLength: 1,
+              pinned: pTab.pinned === true,
             });
           }
           if (tabs.length === 0) continue;
+          // Enforce the "pinned first" invariant on rehydration in case a
+          // user (or a buggy older write) persisted the pinned tabs out of
+          // order. Stable sort preserves intra-group order.
+          tabs.sort((a, b) => (a.pinned === b.pinned ? 0 : a.pinned ? -1 : 1));
           const activeTabId = tabs.some((t) => t.id === pGroup.activeTabId)
             ? pGroup.activeTabId
             : tabs[0].id;
@@ -605,6 +694,38 @@ interface V2Persisted {
   byWorkspace: Record<string, V2PersistedGroup>;
 }
 
+interface V3PersistedTab {
+  id: string;
+  path: string;
+  title: string;
+  icon: string;
+  pinned: boolean;
+}
+
+interface V3PersistedGroup {
+  tabs: V3PersistedTab[];
+  activeTabId: string;
+}
+
+interface V3Persisted {
+  activeWorkspaceSlug: string | null;
+  byWorkspace: Record<string, V3PersistedGroup>;
+}
+
+export function migrateV2ToV3(v2: V2Persisted): V3Persisted {
+  const byWorkspace: Record<string, V3PersistedGroup> = {};
+  for (const [slug, group] of Object.entries(v2.byWorkspace ?? {})) {
+    byWorkspace[slug] = {
+      activeTabId: group.activeTabId,
+      tabs: group.tabs.map((t) => ({ ...t, pinned: false })),
+    };
+  }
+  return {
+    activeWorkspaceSlug: v2.activeWorkspaceSlug ?? null,
+    byWorkspace,
+  };
+}
+
 export function migrateV1ToV2(v1: Partial<V1Persisted>): V2Persisted {
   const byWorkspace: Record<string, V2PersistedGroup> = {};
   const oldTabs = v1.tabs ?? [];