Add settings and usage breadcrumbs

apps/web/src/components/WorkspaceBreadcrumb.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+interface WorkspaceBreadcrumbProps {
+  readonly ariaLabel: string;
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+export function WorkspaceBreadcrumb({ ariaLabel, children, className }: WorkspaceBreadcrumbProps) {
+  return (
+    <nav aria-label={ariaLabel} className={cn("min-w-0", className)}>
+      {/* Keep the flexible container draggable in Electron. Interactive
+          descendants are excluded by the shared .drag-region CSS rules. */}
+      <ol className="m-0 flex min-w-0 list-none items-center gap-2 p-0 text-sm sm:gap-3">
+        {children}
+      </ol>
+    </nav>
+  );
+}
+
+interface WorkspaceBreadcrumbItemProps {
+  readonly children: ReactNode;
+  readonly className?: string;
+  readonly current?: boolean;
+}
+
+export function WorkspaceBreadcrumbItem({
+  children,
+  className,
+  current = false,
+}: WorkspaceBreadcrumbItemProps) {
+  return (
+    <li
+      aria-current={current ? "page" : undefined}
+      className={cn(
+        "flex min-w-0 items-center font-medium",
+        current ? "text-foreground" : "shrink-0 text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </li>
+  );
+}
+
+export function WorkspaceBreadcrumbSeparator() {
+  return (
+    <li aria-hidden="true" className="flex shrink-0 items-center text-icon-muted">
+      /
+    </li>
+  );
+}

apps/web/src/components/chat/ChatHeader.tsx

@@ -36,6 +36,11 @@ import { useThreadActionMenu } from "~/hooks/useThreadActionMenu";
 import { threadEnvironment } from "../../state/threads";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { ProjectFavicon } from "../ProjectFavicon";
+import {
+  WorkspaceBreadcrumb,
+  WorkspaceBreadcrumbItem,
+  WorkspaceBreadcrumbSeparator,
+} from "../WorkspaceBreadcrumb";
 import { cn } from "~/lib/utils";
 
 interface ChatHeaderProps {
@@ -211,91 +216,88 @@ export const ChatHeader = memo(function ChatHeader({
       className="@container/header-actions flex min-w-0 flex-1 items-center gap-2 sm:gap-3"
       onContextMenu={handleHeaderContextMenu}
     >
-      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
+      <WorkspaceBreadcrumb ariaLabel="Thread breadcrumb" className="flex-1">
         {/* The project always leads the header: knowing which project a
             thread lives in is priority zero, and the thread title alone
             doesn't answer it. */}
         {activeProjectName ? (
-          <span className="inline-flex shrink-0 items-center gap-2">
+          <>
+            <WorkspaceBreadcrumbItem>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      type="button"
+                      aria-label={`New thread in ${activeProjectName}`}
+                      onClick={onNewThreadInProject}
+                      className="inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+                    />
+                  }
+                >
+                  <ProjectFavicon
+                    environmentId={activeThreadEnvironmentId}
+                    cwd={activeProjectCwd ?? ""}
+                    faviconPath={activeProjectFaviconPath}
+                    className="size-3.5"
+                  />
+                  <span className="max-w-40 truncate">{activeProjectName}</span>
+                </TooltipTrigger>
+                <TooltipPopup side="top">New thread in {activeProjectName}</TooltipPopup>
+              </Tooltip>
+            </WorkspaceBreadcrumbItem>
+            <WorkspaceBreadcrumbSeparator />
+          </>
+        ) : null}
+        <WorkspaceBreadcrumbItem current className="flex-1">
+          {renamingTitle !== null ? (
+            <input
+              autoFocus
+              aria-label="Thread title"
+              className="min-w-0 flex-1 rounded-sm bg-transparent text-sm font-medium text-foreground outline-none ring-1 ring-ring/50 focus:ring-ring"
+              defaultValue={renamingTitle}
+              onBlur={(event) => {
+                if (renameCommittedRef.current) return;
+                commitRename(event.currentTarget.value);
+              }}
+              onFocus={(event) => event.currentTarget.select()}
+              onKeyDown={handleRenameKeyDown}
+            />
+          ) : isServerThread ? (
             <Tooltip>
               <TooltipTrigger
                 render={
                   <button
+                    ref={titleButtonRef}
                     type="button"
-                    aria-label={`New thread in ${activeProjectName}`}
-                    onClick={onNewThreadInProject}
-                    className="inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+                    aria-label={`Thread actions for ${activeThreadTitle}`}
+                    aria-haspopup="menu"
+                    onClick={openMenuFromTitle}
+                    className="group/thread-title inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded-sm text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
                   />
                 }
               >
-                <ProjectFavicon
-                  environmentId={activeThreadEnvironmentId}
-                  cwd={activeProjectCwd ?? ""}
-                  faviconPath={activeProjectFaviconPath}
-                  className="size-3.5"
+                <h2 className="min-w-0 truncate">{activeThreadTitle}</h2>
+                <ChevronDownIcon
+                  aria-hidden
+                  className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/thread-title:opacity-100 group-focus-visible/thread-title:opacity-100"
                 />
-                <span className="max-w-40 truncate text-sm font-medium">{activeProjectName}</span>
               </TooltipTrigger>
-              <TooltipPopup side="top">New thread in {activeProjectName}</TooltipPopup>
+              <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
             </Tooltip>
-            <span aria-hidden className="text-icon-muted">
-              /
-            </span>
-          </span>
-        ) : null}
-        {renamingTitle !== null ? (
-          <input
-            autoFocus
-            aria-label="Thread title"
-            className="min-w-0 flex-1 rounded-sm bg-transparent text-sm font-medium text-foreground outline-none ring-1 ring-ring/50 focus:ring-ring"
-            defaultValue={renamingTitle}
-            onBlur={(event) => {
-              if (renameCommittedRef.current) return;
-              commitRename(event.currentTarget.value);
-            }}
-            onFocus={(event) => event.currentTarget.select()}
-            onKeyDown={handleRenameKeyDown}
-          />
-        ) : isServerThread ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <button
-                  ref={titleButtonRef}
-                  type="button"
-                  aria-label={`Thread actions for ${activeThreadTitle}`}
-                  aria-haspopup="menu"
-                  onClick={openMenuFromTitle}
-                  className="group/thread-title inline-flex min-w-0 cursor-pointer items-center gap-1 rounded-sm text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-                />
-              }
-            >
-              <h2 className="min-w-0 truncate text-sm font-medium text-foreground">
-                {activeThreadTitle}
-              </h2>
-              <ChevronDownIcon
-                aria-hidden
-                className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/thread-title:opacity-100 group-focus-visible/thread-title:opacity-100"
+          ) : (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <h2 aria-label={activeThreadTitle} className="min-w-0 flex-1 truncate">
+                    {activeThreadTitle}
+                  </h2>
+                }
               />
-            </TooltipTrigger>
-            <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
-          </Tooltip>
-        ) : (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <h2
-                  aria-label={activeThreadTitle}
-                  className="min-w-0 flex-1 truncate text-sm font-medium text-foreground"
-                >
-                  {activeThreadTitle}
-                </h2>
-              }
-            />
-            <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
-          </Tooltip>
-        )}
-      </div>
+              <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
+            </Tooltip>
+          )}
+        </WorkspaceBreadcrumbItem>
+      </WorkspaceBreadcrumb>
       <div
         data-chat-header-actions
         className={cn(

apps/web/src/components/settings/ProjectSettingsPanel.tsx

@@ -13,6 +13,7 @@ import {
   selectProjectGroupingSettings,
 } from "../../logicalProject";
 import type {
+  ContextMenuItem,
   ModelSelection,
   ProviderDriverKind,
   SidebarProjectGroupingMode,
@@ -25,7 +26,14 @@ import { DEFAULT_RESOLVED_KEYBINDINGS } from "@t3tools/shared/keybindings";
 import { useCanGoBack, useNavigate } from "@tanstack/react-router";
 import * as Cause from "effect/Cause";
 import { ChevronDownIcon, CopyIcon, PlusIcon, SettingsIcon, Trash2Icon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
 
 import { useComposerDraftStore } from "../../composerDraftStore";
 import { isElectron } from "../../env";
@@ -89,6 +97,11 @@ import {
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { SidebarInset } from "../ui/sidebar";
 import { stackedThreadToast, toastManager } from "../ui/toast";
+import {
+  WorkspaceBreadcrumb,
+  WorkspaceBreadcrumbItem,
+  WorkspaceBreadcrumbSeparator,
+} from "../WorkspaceBreadcrumb";
 import {
   SettingResetButton,
   SettingsPageContainer,
@@ -191,48 +204,52 @@ function ProjectSettingsBreadcrumb({ projectKey }: { projectKey: string }) {
   const groups = useSettingsProjectGroups();
   const navigate = useNavigate();
   const selected = groups.find((group) => group.projectKey === projectKey) ?? null;
+  const openProjectMenu = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    const api = readLocalApi();
+    if (!api) return;
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    const items: ContextMenuItem<string>[] = groups.map((group) => ({
+      id: group.projectKey,
+      label: group.displayName,
+    }));
+    void settlePromise(() =>
+      api.contextMenu.show(items, { x: rect.left, y: rect.bottom + 4 }),
+    ).then((clicked) => {
+      if (clicked._tag === "Failure" || clicked.value === null) return;
+      void navigate({
+        to: "/projects/$projectKey",
+        params: { projectKey: clicked.value },
+        replace: true,
+        hashScrollIntoView: false,
+      });
+    });
+  };
 
   return (
-    <nav
-      aria-label="Project settings breadcrumb"
-      className="flex min-w-0 items-center gap-2 overflow-hidden [-webkit-app-region:no-drag] sm:gap-3"
-    >
-      <span className="shrink-0 text-sm font-medium text-muted-foreground">Projects</span>
-      <span aria-hidden="true" className="shrink-0 text-icon-muted">
-        /
-      </span>
-      {selected ? (
-        <Select
-          value={selected.projectKey}
-          onValueChange={(value) =>
-            void navigate({
-              to: "/projects/$projectKey",
-              params: { projectKey: String(value) },
-              replace: true,
-              hashScrollIntoView: false,
-            })
-          }
-        >
-          <SelectTrigger
+    <WorkspaceBreadcrumb ariaLabel="Project settings breadcrumb">
+      <WorkspaceBreadcrumbItem>Projects</WorkspaceBreadcrumbItem>
+      <WorkspaceBreadcrumbSeparator />
+      <WorkspaceBreadcrumbItem current>
+        {selected ? (
+          <button
+            type="button"
+            aria-haspopup="menu"
             aria-label="Switch project"
-            className="h-auto min-h-0 min-w-0 max-w-64 gap-1 border-0 px-0 py-0 text-sm font-medium text-foreground sm:h-auto sm:min-h-0 sm:text-sm"
-            size="xs"
-            variant="ghost"
+            onClick={openProjectMenu}
+            className="group/project-title inline-flex min-w-0 max-w-64 cursor-pointer items-center gap-1 rounded-sm text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <SelectValue>{selected.displayName}</SelectValue>
-          </SelectTrigger>
-          <SelectPopup align="start" alignItemWithTrigger={false}>
-            {groups.map((candidate) => (
-              <SelectItem key={candidate.projectKey} hideIndicator value={candidate.projectKey}>
-                {candidate.displayName}
-              </SelectItem>
-            ))}
-          </SelectPopup>
-        </Select>
-      ) : (
-        <span className="truncate text-sm text-muted-foreground">Unavailable project</span>
-      )}
-    </nav>
+            <span className="min-w-0 truncate">{selected.displayName}</span>
+            <ChevronDownIcon
+              aria-hidden
+              className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/project-title:opacity-100 group-focus-visible/project-title:opacity-100"
+            />
+          </button>
+        ) : (
+          <span className="truncate text-muted-foreground">Unavailable project</span>
+        )}
+      </WorkspaceBreadcrumbItem>
+    </WorkspaceBreadcrumb>
   );
 }
 

apps/web/src/components/settings/SettingsBreadcrumb.tsx

@@ -0,0 +1,34 @@
+import {
+  WorkspaceBreadcrumb,
+  WorkspaceBreadcrumbItem,
+  WorkspaceBreadcrumbSeparator,
+} from "../WorkspaceBreadcrumb";
+import { SETTINGS_SECTION_LABELS } from "./settingsSearch";
+
+const SETTINGS_BREADCRUMB_LABELS: Readonly<Record<string, string>> = {
+  ...SETTINGS_SECTION_LABELS,
+  "/settings/diagnostics": "Diagnostics",
+};
+
+function settingsBreadcrumbLabel(pathname: string): string | null {
+  const normalizedPathname = pathname.replace(/\/+$/, "") || "/";
+  return SETTINGS_BREADCRUMB_LABELS[normalizedPathname] ?? null;
+}
+
+export function SettingsBreadcrumb({ pathname }: { pathname: string }) {
+  const sectionLabel = settingsBreadcrumbLabel(pathname);
+
+  return (
+    <WorkspaceBreadcrumb ariaLabel="Settings breadcrumb">
+      {sectionLabel ? (
+        <>
+          <WorkspaceBreadcrumbItem>Settings</WorkspaceBreadcrumbItem>
+          <WorkspaceBreadcrumbSeparator />
+        </>
+      ) : null}
+      <WorkspaceBreadcrumbItem current className="truncate">
+        {sectionLabel ?? "Settings"}
+      </WorkspaceBreadcrumbItem>
+    </WorkspaceBreadcrumb>
+  );
+}