From ab77d929cf0a00fdfaa7d53913f66922998690c3 Mon Sep 17 00:00:00 2001
From: Saagar Patel <saagar210@gmail.com>
Date: Wed, 22 Apr 2026 17:24:24 +0200
Subject: [PATCH] feat(ui): apply Claude Design Workspace shell polish

Implement the targeted visual deltas from the Claude Design handoff
bundle (assistsupport/project/AssistSupport Workspace.html) against the
existing revamp shell. Functional code and DraftTab layout unchanged;
this is a scoped visual pass.

Changes:
- Add [data-accent] + [data-density] token variants (teal/violet/amber)
  and --as-glow-1 / --as-glow-2 so the shell background glows swap
  with the accent tweak.
- Wire the shell main background gradient in theme.css through the new
  glow tokens so accent swaps propagate to radial highlights.
- Brand mark: teal gradient fill with inner-shadow + drop-shadow,
  replacing the flat accent-surface-1 swatch.
- Active nav item: add the 2px accent indicator bar matching the
  handoff bundle ::before treatment.
- Topbar page title: breadcrumb pattern (AssistSupport / <Tab>)
  replacing the plain title, preserving the existing subtitle.
- RevampShell root emits data-accent=teal data-density=cozy as the
  default, giving future tweaks a hook without structural changes.

Verified: pnpm ui:typecheck clean; pnpm test passes (262/262).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/features/revamp/shell/RevampShell.tsx | 10 ++-
 src/features/revamp/shell/revampShell.css | 43 ++++++++++--
 src/styles/revamp/theme.css               |  8 +--
 src/styles/revamp/tokens.css              | 79 +++++++++++++++++++++--
 4 files changed, 124 insertions(+), 16 deletions(-)

diff --git a/src/features/revamp/shell/RevampShell.tsx b/src/features/revamp/shell/RevampShell.tsx
index 4633e3c..ef7174b 100644
--- a/src/features/revamp/shell/RevampShell.tsx
+++ b/src/features/revamp/shell/RevampShell.tsx
@@ -131,7 +131,7 @@ export function RevampShell({
   }, [statusOpen]);
 
   return (
-    <div className="as-shell">
+    <div className="as-shell" data-accent="teal" data-density="cozy">
       <aside className="as-shell__nav" aria-label="Primary navigation">
         <div className="as-shell__brand">
           <div className="as-shell__brandMark" aria-hidden="true">
@@ -179,7 +179,13 @@ export function RevampShell({
       <div className="as-shell__main">
         <header className="as-shell__topbar">
           <div className="as-shell__topbarLeft">
-            <div className="as-shell__pageTitle">{tabTitle(activeTab)}</div>
+            <div className="as-shell__pageTitle">
+              <span className="crumb">AssistSupport</span>
+              <span className="crumb-sep" aria-hidden="true">
+                /
+              </span>
+              <span>{tabTitle(activeTab)}</span>
+            </div>
             <div className="as-shell__pageSub">
               Cmd+K for commands · Cmd+0 for settings
             </div>
diff --git a/src/features/revamp/shell/revampShell.css b/src/features/revamp/shell/revampShell.css
index f8e131c..ae3c33b 100644
--- a/src/features/revamp/shell/revampShell.css
+++ b/src/features/revamp/shell/revampShell.css
@@ -32,10 +32,16 @@
   border-radius: var(--as-radius-1);
   display: grid;
   place-items: center;
-  background: var(--as-accent-surface-1);
-  border: 1px solid var(--as-accent-border-1);
-  color: var(--as-accent-1);
+  background: linear-gradient(
+    135deg,
+    var(--as-accent-1) 0%,
+    var(--as-accent-2) 100%
+  );
+  color: var(--as-accent-ink);
   font-weight: 700;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 6px 18px -6px rgba(0, 0, 0, 0.5);
 }
 
 .as-shell__brandName {
@@ -70,6 +76,7 @@
 }
 
 .as-shell__navItem {
+  position: relative;
   width: 100%;
   display: flex;
   gap: var(--as-space-2);
@@ -97,6 +104,18 @@
   color: var(--as-text-1);
 }
 
+/* Accent indicator bar on the active nav item — Claude Design polish */
+.as-shell__navItem.is-active::before {
+  content: "";
+  position: absolute;
+  left: -6px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--as-accent-1);
+  border-radius: 2px;
+}
+
 .as-shell__main {
   min-width: 0;
   min-height: 0;
@@ -125,8 +144,24 @@
 }
 
 .as-shell__pageTitle {
-  font-size: var(--as-font-size-4);
+  font-size: var(--as-font-size-3);
+  font-weight: 600;
   line-height: var(--as-line-compact);
+  letter-spacing: 0.1px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--as-text-1);
+}
+
+.as-shell__pageTitle .crumb {
+  color: var(--as-text-3);
+  font-weight: 500;
+}
+
+.as-shell__pageTitle .crumb-sep {
+  color: var(--as-text-3);
+  font-weight: 400;
 }
 
 .as-shell__pageSub {
diff --git a/src/styles/revamp/theme.css b/src/styles/revamp/theme.css
index 33cf781..09dce84 100644
--- a/src/styles/revamp/theme.css
+++ b/src/styles/revamp/theme.css
@@ -6,12 +6,12 @@
   background:
     radial-gradient(
       1200px 800px at 15% -10%,
-      rgba(79, 209, 197, 0.16),
+      var(--as-glow-1, rgba(79, 209, 197, 0.16)),
       transparent 55%
     ),
     radial-gradient(
       900px 600px at 85% 0%,
-      rgba(96, 165, 250, 0.12),
+      var(--as-glow-2, rgba(96, 165, 250, 0.12)),
       transparent 50%
     ),
     linear-gradient(180deg, var(--as-surface-0), var(--as-surface-1));
@@ -101,12 +101,12 @@
   --as-shell-main-bg:
     radial-gradient(
       1200px 800px at 15% -10%,
-      rgba(79, 209, 197, 0.16),
+      var(--as-glow-1, rgba(79, 209, 197, 0.16)),
       transparent 55%
     ),
     radial-gradient(
       900px 600px at 85% 0%,
-      rgba(96, 165, 250, 0.12),
+      var(--as-glow-2, rgba(96, 165, 250, 0.12)),
       transparent 50%
     ),
     linear-gradient(180deg, var(--as-surface-0), var(--as-surface-1));
diff --git a/src/styles/revamp/tokens.css b/src/styles/revamp/tokens.css
index ffddd49..5f494dd 100644
--- a/src/styles/revamp/tokens.css
+++ b/src/styles/revamp/tokens.css
@@ -1,7 +1,11 @@
 :root {
   /* Typography */
-  --as-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --as-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --as-font-sans:
+    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --as-font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", monospace;
 
   /* Density + rhythm */
   --as-font-size-0: 12px;
@@ -70,14 +74,14 @@
   /* Accent button surfaces (revamp primitives) */
   --as-accent-btn-bg: rgba(79, 209, 197, 0.16);
   --as-accent-btn-bg-hover: rgba(79, 209, 197, 0.22);
-  --as-accent-btn-border: rgba(79, 209, 197, 0.30);
-  --as-accent-btn-border-hover: rgba(79, 209, 197, 0.40);
+  --as-accent-btn-border: rgba(79, 209, 197, 0.3);
+  --as-accent-btn-border-hover: rgba(79, 209, 197, 0.4);
   --as-accent-btn-text: rgba(225, 255, 252, 0.96);
 
   /* Danger button surfaces (revamp primitives) */
   --as-danger-btn-bg: rgba(251, 113, 133, 0.14);
-  --as-danger-btn-bg-hover: rgba(251, 113, 133, 0.20);
-  --as-danger-btn-border: rgba(251, 113, 133, 0.30);
+  --as-danger-btn-bg-hover: rgba(251, 113, 133, 0.2);
+  --as-danger-btn-border: rgba(251, 113, 133, 0.3);
   --as-danger-btn-border-hover: rgba(251, 113, 133, 0.38);
   --as-danger-btn-text: rgba(255, 229, 233, 0.98);
 
@@ -100,4 +104,67 @@
 
   /* Panel surfaces (revamp primitives) */
   --as-panel-header-bg: rgba(0, 0, 0, 0.18);
+
+  /* Shell background glows — swapped by [data-accent] below */
+  --as-glow-1: rgba(79, 209, 197, 0.16);
+  --as-glow-2: rgba(96, 165, 250, 0.12);
+}
+
+/*
+ * Accent swap — Claude Design handoff (feat/claude-design-reskin)
+ * Applying [data-accent="..."] to the revamp shell rewrites the 4 accent
+ * tokens plus the radial-glow tokens used by the shell background.
+ * Default (no attribute) is teal, matching the base palette above.
+ */
+[data-accent="teal"] {
+  --as-accent-1: #4fd1c5;
+  --as-accent-2: #2aa198;
+  --as-accent-surface-1: rgba(79, 209, 197, 0.07);
+  --as-accent-border-1: rgba(79, 209, 197, 0.35);
+  --as-accent-btn-bg: rgba(79, 209, 197, 0.16);
+  --as-accent-btn-bg-hover: rgba(79, 209, 197, 0.22);
+  --as-accent-btn-border: rgba(79, 209, 197, 0.3);
+  --as-accent-btn-border-hover: rgba(79, 209, 197, 0.4);
+  --as-focus: rgba(79, 209, 197, 0.55);
+  --as-glow-1: rgba(79, 209, 197, 0.16);
+  --as-glow-2: rgba(96, 165, 250, 0.12);
+}
+
+[data-accent="violet"] {
+  --as-accent-1: #a78bfa;
+  --as-accent-2: #7c3aed;
+  --as-accent-surface-1: rgba(167, 139, 250, 0.07);
+  --as-accent-border-1: rgba(167, 139, 250, 0.35);
+  --as-accent-btn-bg: rgba(167, 139, 250, 0.16);
+  --as-accent-btn-bg-hover: rgba(167, 139, 250, 0.22);
+  --as-accent-btn-border: rgba(167, 139, 250, 0.3);
+  --as-accent-btn-border-hover: rgba(167, 139, 250, 0.4);
+  --as-focus: rgba(167, 139, 250, 0.55);
+  --as-glow-1: rgba(167, 139, 250, 0.18);
+  --as-glow-2: rgba(244, 114, 182, 0.12);
+}
+
+[data-accent="amber"] {
+  --as-accent-1: #fbbf24;
+  --as-accent-2: #d97706;
+  --as-accent-surface-1: rgba(251, 191, 36, 0.07);
+  --as-accent-border-1: rgba(251, 191, 36, 0.35);
+  --as-accent-btn-bg: rgba(251, 191, 36, 0.14);
+  --as-accent-btn-bg-hover: rgba(251, 191, 36, 0.2);
+  --as-accent-btn-border: rgba(251, 191, 36, 0.3);
+  --as-accent-btn-border-hover: rgba(251, 191, 36, 0.4);
+  --as-focus: rgba(251, 191, 36, 0.55);
+  --as-glow-1: rgba(251, 191, 36, 0.14);
+  --as-glow-2: rgba(251, 113, 133, 0.1);
+}
+
+/* Density multipliers — consumed by components that honor it */
+[data-density="compact"] {
+  --as-density: 0.82;
+}
+[data-density="cozy"] {
+  --as-density: 1;
+}
+[data-density="comfy"] {
+  --as-density: 1.18;
 }