From 6e1f6478fb8ad8ea1605521c4a6ec497252c87d8 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 08:52:28 -0500
Subject: [PATCH 1/2] Consolidate header panel controls into overflow menu

- Move terminal, preview, diff, and code viewer toggles into a single menu
- Reduce header crowding on smaller screens and keep project context readable
---
 apps/web/src/components/chat/ChatHeader.tsx   | 168 +++++-------------
 .../src/components/chat/HeaderPanelsMenu.tsx  | 124 +++++++++++++
 2 files changed, 169 insertions(+), 123 deletions(-)
 create mode 100644 apps/web/src/components/chat/HeaderPanelsMenu.tsx

diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index fc1aac541..bedb3995a 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -6,25 +6,15 @@ import {
 import { memo, useEffect } from "react";
 import type { ProjectScriptDraft } from "~/projectScriptDefaults";
 import GitActionsControl from "../GitActionsControl";
-import {
-  ArrowLeftRightIcon,
-  ArrowUpDownIcon,
-  DiffIcon,
-  MonitorIcon,
-  TerminalSquareIcon,
-} from "lucide-react";
 import { EditableThreadTitle } from "../EditableThreadTitle";
 import { Badge } from "../ui/badge";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
-import { Toggle } from "../ui/toggle";
 import { SidebarTrigger } from "../ui/sidebar";
 import { useThreadTitleEditor } from "~/hooks/useThreadTitleEditor";
-import { OpenInPicker } from "./OpenInPicker";
 import { useCodeViewerStore } from "~/codeViewerStore";
 import type { ClientMode } from "~/lib/clientMode";
-
 import type { PreviewDock } from "~/previewStateStore";
+import { HeaderPanelsMenu } from "./HeaderPanelsMenu";
 
 interface ChatHeaderProps {
   activeThreadId: ThreadId;
@@ -77,7 +67,7 @@ export const ChatHeader = memo(function ChatHeader({
   diffToggleShortcutLabel,
   previewAvailable,
   previewOpen,
-  previewDock,
+  previewDock: _previewDock,
   gitCwd,
   diffOpen,
   clientMode,
@@ -90,7 +80,7 @@ export const ChatHeader = memo(function ChatHeader({
   onToggleTerminal,
   onToggleDiff,
   onTogglePreview,
-  onTogglePreviewLayout,
+  onTogglePreviewLayout: _onTogglePreviewLayout,
   onToggleCodeViewer,
 }: ChatHeaderProps) {
   const isMobileCompanion = clientMode === "mobile";
@@ -117,6 +107,7 @@ export const ChatHeader = memo(function ChatHeader({
 
   return (
     <div className="flex min-w-0 flex-1 items-center gap-2">
+      {/* Left: Identity — thread title + project context */}
       <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
         <SidebarTrigger className="size-7 shrink-0 md:hidden" />
         <EditableThreadTitle
@@ -141,17 +132,14 @@ export const ChatHeader = memo(function ChatHeader({
           onCancel={cancelEditing}
         />
         {activeProjectName && (
-          <Badge variant="outline" className="min-w-0 shrink truncate">
+          <Badge variant="outline" className="hidden min-w-0 shrink truncate sm:inline-flex">
             {activeProjectName}
           </Badge>
         )}
-        {activeProjectName && !isGitRepo && (
-          <Badge variant="outline" className="shrink-0 text-[10px] text-amber-700">
-            No Git
-          </Badge>
-        )}
       </div>
-      <div className="@container/header-actions flex min-w-0 flex-1 items-center justify-end gap-2 @sm/header-actions:gap-3">
+
+      {/* Right: Actions — only primary actions visible, panels in overflow */}
+      <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
         {!isMobileCompanion && activeProjectScripts && (
           <ProjectScriptsControl
             projectCwd={activeProjectCwd ?? ""}
@@ -165,115 +153,49 @@ export const ChatHeader = memo(function ChatHeader({
             onImportScripts={onImportProjectScripts}
           />
         )}
-        {activeProjectName && hasCodeViewerTabs && (
-          <OpenInPicker codeViewerOpen={codeViewerOpen} onToggleCodeViewer={onToggleCodeViewer} />
-        )}
         {!isMobileCompanion && activeProjectName && (
           <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />
         )}
+        {/* Overflow menu: all panel toggles consolidated */}
         {!isMobileCompanion && (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Toggle
-                  className="shrink-0"
-                  pressed={terminalOpen}
-                  onPressedChange={onToggleTerminal}
-                  aria-label="Toggle terminal drawer"
-                  variant="outline"
-                  size="xs"
-                  disabled={!terminalAvailable}
-                >
-                  <TerminalSquareIcon className="size-3" />
-                </Toggle>
-              }
-            />
-            <TooltipPopup side="bottom">
-              {!terminalAvailable
-                ? "Terminal is unavailable until this thread has an active project."
-                : terminalToggleShortcutLabel
-                  ? `Toggle terminal drawer (${terminalToggleShortcutLabel})`
-                  : "Toggle terminal drawer"}
-            </TooltipPopup>
-          </Tooltip>
-        )}
-        {!isMobileCompanion && previewOpen && previewAvailable ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Toggle
-                  className="shrink-0"
-                  pressed={previewDock === "top" || previewDock === "bottom"}
-                  onPressedChange={onTogglePreviewLayout}
-                  aria-label="Toggle preview split orientation"
-                  variant="outline"
-                  size="xs"
-                >
-                  {previewDock === "top" || previewDock === "bottom" ? (
-                    <ArrowUpDownIcon className="size-3" />
-                  ) : (
-                    <ArrowLeftRightIcon className="size-3" />
-                  )}
-                </Toggle>
-              }
-            />
-            <TooltipPopup side="bottom">
-              {previewDock === "top" || previewDock === "bottom"
-                ? "Switch to side-by-side preview"
-                : "Switch to stacked preview"}
-            </TooltipPopup>
-          </Tooltip>
-        ) : null}
-        {!isMobileCompanion && (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Toggle
-                  className="shrink-0"
-                  pressed={previewOpen}
-                  onPressedChange={onTogglePreview}
-                  aria-label="Toggle preview panel"
-                  variant="outline"
-                  size="xs"
-                  disabled={!previewAvailable}
-                >
-                  <MonitorIcon className="size-3" />
-                </Toggle>
-              }
-            />
-            <TooltipPopup side="bottom">
-              {!previewAvailable
-                ? "Preview is available in the desktop app when this thread has an active project."
-                : previewOpen
-                  ? "Hide preview panel"
-                  : "Show preview panel"}
-            </TooltipPopup>
-          </Tooltip>
+          <HeaderPanelsMenu
+            terminalAvailable={terminalAvailable}
+            terminalOpen={terminalOpen}
+            terminalToggleShortcutLabel={terminalToggleShortcutLabel}
+            previewAvailable={previewAvailable}
+            previewOpen={previewOpen}
+            diffOpen={diffOpen}
+            diffToggleShortcutLabel={diffToggleShortcutLabel}
+            isGitRepo={isGitRepo}
+            codeViewerOpen={codeViewerOpen}
+            hasCodeViewerTabs={hasCodeViewerTabs}
+            hasProject={activeProjectName !== undefined}
+            onToggleTerminal={onToggleTerminal}
+            onTogglePreview={onTogglePreview}
+            onToggleDiff={onToggleDiff}
+            onToggleCodeViewer={onToggleCodeViewer}
+          />
         )}
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Toggle
-                className="shrink-0"
-                pressed={diffOpen}
-                onPressedChange={onToggleDiff}
-                aria-label="Toggle diff panel"
-                variant="outline"
-                size="xs"
-                disabled={!isGitRepo}
-              >
-                <DiffIcon className="size-3" />
-              </Toggle>
-            }
+        {/* Mobile: only diff toggle */}
+        {isMobileCompanion && (
+          <HeaderPanelsMenu
+            terminalAvailable={false}
+            terminalOpen={false}
+            terminalToggleShortcutLabel={null}
+            previewAvailable={false}
+            previewOpen={false}
+            diffOpen={diffOpen}
+            diffToggleShortcutLabel={diffToggleShortcutLabel}
+            isGitRepo={isGitRepo}
+            codeViewerOpen={false}
+            hasCodeViewerTabs={false}
+            hasProject={false}
+            onToggleTerminal={() => {}}
+            onTogglePreview={() => {}}
+            onToggleDiff={onToggleDiff}
+            onToggleCodeViewer={() => {}}
           />
-          <TooltipPopup side="bottom">
-            {!isGitRepo
-              ? "Diff panel is unavailable because this project is not a git repository."
-              : diffToggleShortcutLabel
-                ? `Toggle diff panel (${diffToggleShortcutLabel})`
-                : "Toggle diff panel"}
-          </TooltipPopup>
-        </Tooltip>
+        )}
       </div>
     </div>
   );
diff --git a/apps/web/src/components/chat/HeaderPanelsMenu.tsx b/apps/web/src/components/chat/HeaderPanelsMenu.tsx
new file mode 100644
index 000000000..5b0ffc35b
--- /dev/null
+++ b/apps/web/src/components/chat/HeaderPanelsMenu.tsx
@@ -0,0 +1,124 @@
+import { memo } from "react";
+import {
+  DiffIcon,
+  EllipsisIcon,
+  FileCodeIcon,
+  MonitorIcon,
+  TerminalSquareIcon,
+} from "lucide-react";
+import { Button } from "../ui/button";
+import { Menu, MenuCheckboxItem, MenuPopup, MenuSeparator, MenuTrigger } from "../ui/menu";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+interface HeaderPanelsMenuProps {
+  terminalAvailable: boolean;
+  terminalOpen: boolean;
+  terminalToggleShortcutLabel: string | null;
+  previewAvailable: boolean;
+  previewOpen: boolean;
+  diffOpen: boolean;
+  diffToggleShortcutLabel: string | null;
+  isGitRepo: boolean;
+  codeViewerOpen: boolean;
+  hasCodeViewerTabs: boolean;
+  hasProject: boolean;
+  onToggleTerminal: () => void;
+  onTogglePreview: () => void;
+  onToggleDiff: () => void;
+  onToggleCodeViewer: () => void;
+}
+
+export const HeaderPanelsMenu = memo(function HeaderPanelsMenu({
+  terminalAvailable,
+  terminalOpen,
+  terminalToggleShortcutLabel,
+  previewAvailable,
+  previewOpen,
+  diffOpen,
+  diffToggleShortcutLabel,
+  isGitRepo,
+  codeViewerOpen,
+  hasCodeViewerTabs,
+  hasProject,
+  onToggleTerminal,
+  onTogglePreview,
+  onToggleDiff,
+  onToggleCodeViewer,
+}: HeaderPanelsMenuProps) {
+  return (
+    <Menu>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <MenuTrigger
+              render={
+                <Button variant="outline" size="xs" className="shrink-0" aria-label="Toggle panels">
+                  <EllipsisIcon className="size-3.5" />
+                </Button>
+              }
+            />
+          }
+        />
+        <TooltipPopup side="bottom">Panels</TooltipPopup>
+      </Tooltip>
+      <MenuPopup side="bottom" align="end" sideOffset={6}>
+        <MenuCheckboxItem
+          checked={terminalOpen}
+          onCheckedChange={onToggleTerminal}
+          disabled={!terminalAvailable}
+          variant="switch"
+        >
+          <span className="inline-flex items-center gap-2">
+            <TerminalSquareIcon className="size-3.5 opacity-80" />
+            Terminal
+            {terminalToggleShortcutLabel ? (
+              <kbd className="ml-auto text-[10px] text-muted-foreground">
+                {terminalToggleShortcutLabel}
+              </kbd>
+            ) : null}
+          </span>
+        </MenuCheckboxItem>
+        <MenuCheckboxItem
+          checked={previewOpen}
+          onCheckedChange={onTogglePreview}
+          disabled={!previewAvailable}
+          variant="switch"
+        >
+          <span className="inline-flex items-center gap-2">
+            <MonitorIcon className="size-3.5 opacity-80" />
+            Preview
+          </span>
+        </MenuCheckboxItem>
+        <MenuSeparator />
+        <MenuCheckboxItem
+          checked={diffOpen}
+          onCheckedChange={onToggleDiff}
+          disabled={!isGitRepo}
+          variant="switch"
+        >
+          <span className="inline-flex items-center gap-2">
+            <DiffIcon className="size-3.5 opacity-80" />
+            Diff
+            {diffToggleShortcutLabel ? (
+              <kbd className="ml-auto text-[10px] text-muted-foreground">
+                {diffToggleShortcutLabel}
+              </kbd>
+            ) : null}
+          </span>
+        </MenuCheckboxItem>
+        {hasProject && hasCodeViewerTabs ? (
+          <MenuCheckboxItem
+            checked={codeViewerOpen}
+            onCheckedChange={onToggleCodeViewer}
+            variant="switch"
+          >
+            <span className="inline-flex items-center gap-2">
+              <FileCodeIcon className="size-3.5 opacity-80" />
+              Code viewer
+            </span>
+          </MenuCheckboxItem>
+        ) : null}
+      </MenuPopup>
+    </Menu>
+  );
+});

From f4a34370bab3fa8aa1e9e0c2dc75107de003320b Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 09:00:36 -0500
Subject: [PATCH 2/2] Add project color accents to sidebar and chat header

- Tint project headers, thread accents, and chat badges with deterministic colors
- Reduce header crowding by leaning on color instead of extra chrome
---
 apps/web/src/components/ChatView.tsx        |   1 +
 apps/web/src/components/Sidebar.tsx         |  65 +++++---
 apps/web/src/components/chat/ChatHeader.tsx |  21 ++-
 apps/web/src/projectColors.ts               | 162 ++++++++++++++++++++
 4 files changed, 227 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/projectColors.ts

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 8272abe33..25c34a911 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -4588,6 +4588,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
         <ChatHeader
           activeThreadId={activeThread.id}
           activeThreadTitle={activeThread.title}
+          activeProjectId={activeProject?.id}
           activeProjectName={activeProject?.name}
           activeProjectCwd={activeProject?.cwd}
           isGitRepo={isGitRepo}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index bcb84319c..171b04a58 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -118,6 +118,7 @@ import {
   resolvePackageManagerResolution,
 } from "~/projectScriptDefaults";
 import { useClientMode } from "~/hooks/useClientMode";
+import { getProjectColor } from "~/projectColors";
 import type { Thread } from "../types";
 
 const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];
@@ -1192,7 +1193,16 @@ export default function Sidebar() {
       );
 
       return (
-        <SidebarMenuSubItem key={thread.id} className="w-full" data-thread-item>
+        <SidebarMenuSubItem key={thread.id} className="relative w-full" data-thread-item>
+          {/* Project color accent bar */}
+          <span
+            aria-hidden="true"
+            className="absolute bottom-1.5 left-0 top-1.5 w-[3px] rounded-full transition-opacity"
+            style={{
+              backgroundColor: pColor.dot,
+              opacity: isActive ? 1 : 0.35,
+            }}
+          />
           <SidebarMenuSubButton
             render={<div role="button" tabIndex={0} />}
             size="sm"
@@ -1315,31 +1325,39 @@ export default function Sidebar() {
       );
     };
 
+    const pColor = getProjectColor(project.id);
+    const isDark = resolvedTheme === "dark";
+
     return (
       <Collapsible className="group/collapsible" open={shouldShowThreadPanel}>
         <div className="group/project-header relative flex items-center gap-1.5">
           <SidebarMenuButton
             ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
             size="sm"
-            className={`min-w-0 flex-1 gap-2 rounded-lg border border-transparent px-2.5 py-2.5 text-left ${appSettings.sidebarAccentBgColorOverride ? "" : "bg-accent/40 hover:bg-accent/70 group-hover/project-header:bg-accent/70 dark:bg-accent/30 dark:hover:bg-accent/50 dark:group-hover/project-header:bg-accent/50"} group-hover/project-header:text-sidebar-accent-foreground ${
+            className={`min-w-0 flex-1 gap-2 rounded-lg border border-transparent px-2.5 py-2.5 text-left ${appSettings.sidebarAccentBgColorOverride ? "" : ""} group-hover/project-header:text-sidebar-accent-foreground ${
               isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
             }`}
-            style={
-              appSettings.sidebarAccentBgColorOverride
-                ? {
-                    backgroundColor: `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`,
-                  }
-                : undefined
-            }
+            style={{
+              backgroundColor: appSettings.sidebarAccentBgColorOverride
+                ? `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`
+                : isDark
+                  ? pColor.bgDark
+                  : pColor.bg,
+            }}
             onMouseEnter={(e) => {
-              if (appSettings.sidebarAccentBgColorOverride) {
-                e.currentTarget.style.backgroundColor = `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 25%, transparent)`;
-              }
+              const hoverBg = appSettings.sidebarAccentBgColorOverride
+                ? `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 25%, transparent)`
+                : isDark
+                  ? pColor.bgDark.replace("0.12)", "0.20)")
+                  : pColor.bg.replace("0.08)", "0.14)");
+              e.currentTarget.style.backgroundColor = hoverBg;
             }}
             onMouseLeave={(e) => {
-              if (appSettings.sidebarAccentBgColorOverride) {
-                e.currentTarget.style.backgroundColor = `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`;
-              }
+              e.currentTarget.style.backgroundColor = appSettings.sidebarAccentBgColorOverride
+                ? `color-mix(in srgb, ${appSettings.sidebarAccentBgColorOverride} 15%, transparent)`
+                : isDark
+                  ? pColor.bgDark
+                  : pColor.bg;
             }}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.listeners : {})}
@@ -1378,12 +1396,17 @@ export default function Sidebar() {
             )}
             <ProjectFavicon cwd={project.cwd} />
             <span
-              className={`flex-1 truncate text-[13px] font-semibold tracking-[0.01em] ${appSettings.sidebarAccentProjectNames ? "text-accent-foreground" : "text-foreground"}`}
-              style={
-                appSettings.sidebarAccentProjectNames && appSettings.sidebarAccentColorOverride
-                  ? { color: appSettings.sidebarAccentColorOverride }
-                  : undefined
-              }
+              className="flex-1 truncate text-[13px] font-semibold tracking-[0.01em]"
+              style={{
+                color:
+                  appSettings.sidebarAccentProjectNames && appSettings.sidebarAccentColorOverride
+                    ? appSettings.sidebarAccentColorOverride
+                    : appSettings.sidebarAccentProjectNames
+                      ? isDark
+                        ? pColor.textDark
+                        : pColor.text
+                      : undefined,
+              }}
             >
               {project.name}
             </span>
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index bedb3995a..e8d637b7f 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -1,4 +1,5 @@
 import {
+  type ProjectId,
   type ProjectScript,
   type ThreadId,
   type ResolvedKeybindingsConfig,
@@ -12,6 +13,8 @@ import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScr
 import { SidebarTrigger } from "../ui/sidebar";
 import { useThreadTitleEditor } from "~/hooks/useThreadTitleEditor";
 import { useCodeViewerStore } from "~/codeViewerStore";
+import { useProjectColor } from "~/projectColors";
+import { useTheme } from "~/hooks/useTheme";
 import type { ClientMode } from "~/lib/clientMode";
 import type { PreviewDock } from "~/previewStateStore";
 import { HeaderPanelsMenu } from "./HeaderPanelsMenu";
@@ -19,6 +22,7 @@ import { HeaderPanelsMenu } from "./HeaderPanelsMenu";
 interface ChatHeaderProps {
   activeThreadId: ThreadId;
   activeThreadTitle: string;
+  activeProjectId: ProjectId | undefined;
   activeProjectName: string | undefined;
   activeProjectCwd: string | undefined;
   isGitRepo: boolean;
@@ -53,6 +57,7 @@ interface ChatHeaderProps {
 export const ChatHeader = memo(function ChatHeader({
   activeThreadId,
   activeThreadTitle,
+  activeProjectId,
   activeProjectName,
   activeProjectCwd,
   isGitRepo,
@@ -86,6 +91,9 @@ export const ChatHeader = memo(function ChatHeader({
   const isMobileCompanion = clientMode === "mobile";
   const codeViewerOpen = useCodeViewerStore((state) => state.isOpen);
   const hasCodeViewerTabs = useCodeViewerStore((state) => state.tabs.length > 0);
+  const projectColor = useProjectColor(activeProjectId);
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
   const {
     editingThreadId,
     draftTitle,
@@ -132,7 +140,18 @@ export const ChatHeader = memo(function ChatHeader({
           onCancel={cancelEditing}
         />
         {activeProjectName && (
-          <Badge variant="outline" className="hidden min-w-0 shrink truncate sm:inline-flex">
+          <Badge
+            variant="outline"
+            className="hidden min-w-0 shrink truncate border-transparent sm:inline-flex"
+            style={
+              projectColor
+                ? {
+                    color: isDark ? projectColor.textDark : projectColor.text,
+                    backgroundColor: isDark ? projectColor.bgDark : projectColor.bg,
+                  }
+                : undefined
+            }
+          >
             {activeProjectName}
           </Badge>
         )}
diff --git a/apps/web/src/projectColors.ts b/apps/web/src/projectColors.ts
new file mode 100644
index 000000000..a388f7057
--- /dev/null
+++ b/apps/web/src/projectColors.ts
@@ -0,0 +1,162 @@
+/**
+ * Per-project color system.
+ *
+ * Each project is deterministically assigned a color from a curated palette
+ * based on a simple hash of its `id`. The palette is designed to be visually
+ * distinct, accessible in both light and dark modes, and subtle enough to not
+ * overwhelm the UI — inspired by Notion's database tag colors and Apple's
+ * system tints.
+ *
+ * Colors are used for:
+ * - Sidebar project header tint
+ * - Sidebar thread left-accent bar
+ * - ChatHeader project badge
+ */
+
+import { useMemo } from "react";
+import type { ProjectId } from "@okcode/contracts";
+
+// ── Palette ─────────────────────────────────────────────────────────────
+// Each entry contains a hue used to derive contextual CSS colors via
+// `oklch()`. Using a single hue per slot keeps things cohesive while
+// allowing the rendering site to pick lightness/chroma for the context
+// (e.g. subtle bg tint vs. badge text).
+
+export interface ProjectColor {
+  /** Human-readable label (for potential settings UI). */
+  label: string;
+  /** Base hue in oklch color space (0-360). */
+  hue: number;
+  /** Light-mode text color (oklch string). */
+  text: string;
+  /** Dark-mode text color (oklch string). */
+  textDark: string;
+  /** Light-mode subtle background (oklch with alpha). */
+  bg: string;
+  /** Dark-mode subtle background (oklch with alpha). */
+  bgDark: string;
+  /** Solid accent for dots / left-bar indicators. */
+  dot: string;
+}
+
+export const PROJECT_COLOR_PALETTE: readonly ProjectColor[] = [
+  {
+    label: "Blue",
+    hue: 250,
+    text: "oklch(0.55 0.16 250)",
+    textDark: "oklch(0.78 0.12 250)",
+    bg: "oklch(0.55 0.16 250 / 0.08)",
+    bgDark: "oklch(0.55 0.16 250 / 0.12)",
+    dot: "oklch(0.62 0.18 250)",
+  },
+  {
+    label: "Violet",
+    hue: 290,
+    text: "oklch(0.52 0.17 290)",
+    textDark: "oklch(0.76 0.13 290)",
+    bg: "oklch(0.52 0.17 290 / 0.08)",
+    bgDark: "oklch(0.52 0.17 290 / 0.12)",
+    dot: "oklch(0.60 0.19 290)",
+  },
+  {
+    label: "Rose",
+    hue: 355,
+    text: "oklch(0.55 0.17 355)",
+    textDark: "oklch(0.78 0.12 355)",
+    bg: "oklch(0.55 0.17 355 / 0.08)",
+    bgDark: "oklch(0.55 0.17 355 / 0.12)",
+    dot: "oklch(0.62 0.18 355)",
+  },
+  {
+    label: "Orange",
+    hue: 50,
+    text: "oklch(0.55 0.14 50)",
+    textDark: "oklch(0.78 0.11 50)",
+    bg: "oklch(0.55 0.14 50 / 0.08)",
+    bgDark: "oklch(0.55 0.14 50 / 0.12)",
+    dot: "oklch(0.65 0.16 50)",
+  },
+  {
+    label: "Teal",
+    hue: 180,
+    text: "oklch(0.50 0.10 180)",
+    textDark: "oklch(0.76 0.08 180)",
+    bg: "oklch(0.50 0.10 180 / 0.08)",
+    bgDark: "oklch(0.50 0.10 180 / 0.12)",
+    dot: "oklch(0.58 0.12 180)",
+  },
+  {
+    label: "Green",
+    hue: 150,
+    text: "oklch(0.50 0.12 150)",
+    textDark: "oklch(0.76 0.10 150)",
+    bg: "oklch(0.50 0.12 150 / 0.08)",
+    bgDark: "oklch(0.50 0.12 150 / 0.12)",
+    dot: "oklch(0.58 0.14 150)",
+  },
+  {
+    label: "Amber",
+    hue: 75,
+    text: "oklch(0.52 0.12 75)",
+    textDark: "oklch(0.78 0.10 75)",
+    bg: "oklch(0.52 0.12 75 / 0.08)",
+    bgDark: "oklch(0.52 0.12 75 / 0.12)",
+    dot: "oklch(0.62 0.14 75)",
+  },
+  {
+    label: "Indigo",
+    hue: 270,
+    text: "oklch(0.50 0.18 270)",
+    textDark: "oklch(0.75 0.14 270)",
+    bg: "oklch(0.50 0.18 270 / 0.08)",
+    bgDark: "oklch(0.50 0.18 270 / 0.12)",
+    dot: "oklch(0.58 0.20 270)",
+  },
+  {
+    label: "Pink",
+    hue: 330,
+    text: "oklch(0.55 0.16 330)",
+    textDark: "oklch(0.78 0.12 330)",
+    bg: "oklch(0.55 0.16 330 / 0.08)",
+    bgDark: "oklch(0.55 0.16 330 / 0.12)",
+    dot: "oklch(0.62 0.17 330)",
+  },
+  {
+    label: "Cyan",
+    hue: 210,
+    text: "oklch(0.52 0.12 210)",
+    textDark: "oklch(0.78 0.10 210)",
+    bg: "oklch(0.52 0.12 210 / 0.08)",
+    bgDark: "oklch(0.52 0.12 210 / 0.12)",
+    dot: "oklch(0.60 0.14 210)",
+  },
+] as const;
+
+// ── Hash ────────────────────────────────────────────────────────────────
+// Simple djb2-style hash to deterministically map a project ID to a
+// palette index. Stable across sessions.
+
+function hashProjectId(id: string): number {
+  let hash = 5381;
+  for (let i = 0; i < id.length; i++) {
+    hash = ((hash << 5) + hash + id.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+export function getProjectColorIndex(projectId: ProjectId): number {
+  return hashProjectId(projectId) % PROJECT_COLOR_PALETTE.length;
+}
+
+export function getProjectColor(projectId: ProjectId): ProjectColor {
+  return PROJECT_COLOR_PALETTE[getProjectColorIndex(projectId)]!;
+}
+
+// ── React hook ──────────────────────────────────────────────────────────
+
+export function useProjectColor(projectId: ProjectId | null | undefined): ProjectColor | null {
+  return useMemo(() => {
+    if (!projectId) return null;
+    return getProjectColor(projectId);
+  }, [projectId]);
+}