From bc5854e131f1403fbb5e2004d4f65ba3a3ac6887 Mon Sep 17 00:00:00 2001
From: angelkawai <123734885+luokerenx4@users.noreply.github.com>
Date: Tue, 16 Jun 2026 11:45:44 +0000
Subject: [PATCH 1/3] =?UTF-8?q?feat(ui):=20Linear=20dark=20palette=20?=
 =?UTF-8?q?=E2=80=94=20re-traced=20from=20#302,=20glare-softened?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the GitHub-dark theme for a Linear-style dark palette (teal accent,
near-black lifted off pure black to kill halation, slightly softened
body text), plus a quiet body gradient and teal selection highlight.

Re-traced by hand rather than merging #302 (62 commits stale; its
behavioral changes — landing-route rewrite, mock composer, demo-banner
gating — collide with / regress functional master). This commit is the
isolated, zero-logic visual layer only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ui/src/index.css | 46 +++++++++++++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 084dbb5f..1bb1c179 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,23 +1,23 @@
 @import "tailwindcss";
 
-/* GitHub Dark theme palette */
+/* Linear dark Alice shell palette */
 @theme {
-  --color-bg: #0d1117;
-  --color-bg-secondary: #161b22;
-  --color-bg-tertiary: #21262d;
-  --color-border: #30363d;
-  --color-text: #e6edf3;
-  --color-text-muted: #8b949e;
-  --color-accent: #58a6ff;
-  --color-accent-dim: rgba(31, 111, 235, 0.2);
-  --color-user-bubble: #1f6feb;
-  --color-assistant-bubble: #161b22;
-  --color-notification-bg: #2d1f00;
-  --color-notification-border: #d29922;
-  --color-green: #3fb950;
-  --color-red: #f85149;
-  --color-purple: #a78bfa;
-  --color-purple-dim: rgba(139, 92, 246, 0.2);
+  --color-bg: #0b0c0e;
+  --color-bg-secondary: #0e0f12;
+  --color-bg-tertiary: #1a1b21;
+  --color-border: #24262c;
+  --color-text: #dfe1e6;
+  --color-text-muted: #8f929b;
+  --color-accent: #23b99a;
+  --color-accent-dim: rgba(35, 185, 154, 0.16);
+  --color-user-bubble: #1f2026;
+  --color-assistant-bubble: #141519;
+  --color-notification-bg: #1d1610;
+  --color-notification-border: #8a5b2f;
+  --color-green: #23b99a;
+  --color-red: #e5484d;
+  --color-purple: #8f72ff;
+  --color-purple-dim: rgba(143, 114, 255, 0.16);
 
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
     "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
@@ -51,6 +51,18 @@ body,
   height: 100%;
 }
 
+body {
+  background:
+    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.022), transparent 34rem),
+    linear-gradient(180deg, #0e0f12 0%, #0b0c0e 46%, #090a0c 100%);
+  color: var(--color-text);
+}
+
+::selection {
+  background: rgba(35, 185, 154, 0.28);
+  color: var(--color-text);
+}
+
 /* ==================== Typography scale ====================
    Five semantic sizes covering the entire app. New code should
    prefer these over arbitrary `text-[Npx]` so size choices stay

From 7425e94984a68b46cecfbbe58f2f4300976437c6 Mon Sep 17 00:00:00 2001
From: angelkawai <123734885+luokerenx4@users.noreply.github.com>
Date: Tue, 16 Jun 2026 12:13:23 +0000
Subject: [PATCH 2/3] feat(ui): Linear shell density pass + responsive Ask
 Alice backdrop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-trace the worthwhile visual layer of #302 onto current master (the PR
itself is 62 commits stale and its behavioral changes regress functional
master — see the palette commit for the full rationale):

- ActivityBar: 216px rail (down from the PR's 276 — info density doesn't
  justify the width), round logo w/ teal glow, tighter row rhythm, inset
  active highlight, quieter hover. Unread badge stays red (no downgrade).
- Sidebar / TabStrip / App: border opacity + hover tints tuned for the
  dark palette. TabStrip keeps the Linear-style active chip (the product
  is deliberately Linear-left / VS-Code-right); the PR's rounded floating
  card around the editor was dropped — VS Code editor panes are flush.
- ChatLandingPage: full-bleed, responsive-only backdrop (gradient wash +
  faint grid) behind the real composer. The #302 mock's %-positioned
  circle / diagonal bars were dropped — they drift on portrait. The
  pixel-art image in the PR screenshots was never committed to the PR.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ui/src/App.tsx                    |  4 ++--
 ui/src/components/ActivityBar.tsx | 20 ++++++++++----------
 ui/src/components/Sidebar.tsx     |  4 ++--
 ui/src/components/TabStrip.tsx    | 10 +++++-----
 ui/src/pages/ChatLandingPage.tsx  | 16 +++++++++++++---
 5 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index ef32fd5f..460ddbd5 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -104,7 +104,7 @@ function AppShell() {
   const mainContent = (
     <main className="flex flex-col min-w-0 min-h-0 bg-bg h-full">
       {/* Mobile header — visible only below md */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-bg-secondary shrink-0 md:hidden">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border/80 bg-bg-secondary shrink-0 md:hidden">
         <button
           onClick={() => setSidebarOpen(true)}
           className="text-text-muted hover:text-text p-1 -ml-1"
@@ -163,7 +163,7 @@ function AppShell() {
                   <section.Secondary />
                 </Sidebar>
               </Panel>
-              <Separator className="w-px bg-border hover:bg-accent/40 active:bg-accent/60 transition-colors" />
+              <Separator className="w-px bg-border/80 hover:bg-accent/40 active:bg-accent/60 transition-colors" />
             </>
           )}
           <Panel id="main">
diff --git a/ui/src/components/ActivityBar.tsx b/ui/src/components/ActivityBar.tsx
index 0e0316c0..eba47251 100644
--- a/ui/src/components/ActivityBar.tsx
+++ b/ui/src/components/ActivityBar.tsx
@@ -180,13 +180,13 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
         onClick={onClose}
       />
 
-      {/* ActivityBar — 200px on all viewports. Mobile: slide-in over
+      {/* ActivityBar — Linear-style workspace rail. Mobile: slide-in over
        *  page with backdrop. Desktop: static column flush left. */}
       <aside
         className={`
-          w-[200px] h-full flex flex-col shrink-0
+          w-[216px] h-full flex flex-col shrink-0
           bg-bg-secondary
-          border-r border-border
+          border-r border-border/80
           fixed z-50 top-0 left-0 transition-transform duration-200
           ${open ? 'translate-x-0' : '-translate-x-full'}
           md:static md:translate-x-0 md:z-auto md:transition-none
@@ -197,14 +197,14 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
           <img
             src="/alice.ico"
             alt="Alice"
-            className="w-7 h-7 rounded-lg ring-1 ring-accent/25 shadow-[0_0_8px_rgba(88,166,255,0.15)]"
+            className="w-7 h-7 rounded-full ring-1 ring-white/10 shadow-[0_0_14px_rgba(35,185,154,0.12)]"
             draggable={false}
           />
-          <h1 className="text-[15px] font-semibold text-text">OpenAlice</h1>
+          <h1 className="min-w-0 flex-1 truncate text-[15px] font-semibold text-text">OpenAlice</h1>
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 flex flex-col px-2 overflow-y-auto pb-3">
+        <nav className="flex-1 flex flex-col px-3 overflow-y-auto pb-3">
           {NAV_SECTIONS.map((section, si) => {
             const labeled = section.sectionLabel.length > 0
             // User toggle wins over default. The collapse store stores
@@ -233,7 +233,7 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
                   />
                 )}
                 {showItems && (
-                  <div className="flex flex-col gap-0.5" id={`activity-section-${si}`}>
+                  <div className="flex flex-col gap-1" id={`activity-section-${si}`}>
                     {section.items.map((item) => {
                       const sec = activitySectionFor(item.page)
                       const isActive = selectedSidebar === sec
@@ -274,8 +274,8 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
                           title={t(item.labelKey)}
                           className={`relative flex items-center gap-3 px-3 py-1.5 rounded-md text-[13px] transition-colors text-left ${
                             isActive
-                              ? 'bg-bg-tertiary text-text'
-                              : 'text-text-muted hover:text-text hover:bg-bg-tertiary/50'
+                              ? 'bg-bg-tertiary text-text shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]'
+                              : 'text-text-muted hover:text-text hover:bg-white/[0.035]'
                           }`}
                         >
                           {/* Active indicator — left vertical bar */}
@@ -359,7 +359,7 @@ function SectionHeader({
         <button
           type="button"
           onClick={onToggleCollapse}
-          className="flex-1 flex items-center gap-1.5 py-1 text-[11px] font-medium text-text-muted/60 hover:text-text-muted uppercase tracking-wider transition-colors text-left"
+          className="flex-1 flex items-center gap-1.5 py-1 text-[12px] font-semibold text-text-muted/75 hover:text-text-muted transition-colors text-left"
           aria-expanded={!isCollapsed}
           aria-controls={controlsId}
         >
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 8d7fc2f3..69dbc498 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -23,10 +23,10 @@ interface SidebarProps {
 export function Sidebar({ title, actions, children, leading }: SidebarProps) {
   return (
     <aside className="flex h-full w-full flex-col bg-bg-secondary">
-      <div className="flex items-center justify-between px-3 h-10 shrink-0 gap-2">
+      <div className="flex items-center justify-between px-4 h-10 shrink-0 gap-2 border-b border-border/60">
         <div className="flex items-center gap-1.5 min-w-0">
           {leading}
-          <h2 className="text-[13px] font-medium text-text truncate">{title}</h2>
+          <h2 className="text-[13px] font-semibold text-text truncate">{title}</h2>
         </div>
         {actions && <div className="flex items-center gap-0.5 shrink-0">{actions}</div>}
       </div>
diff --git a/ui/src/components/TabStrip.tsx b/ui/src/components/TabStrip.tsx
index 8c900923..b97c9026 100644
--- a/ui/src/components/TabStrip.tsx
+++ b/ui/src/components/TabStrip.tsx
@@ -95,7 +95,7 @@ export function TabStrip() {
     <>
       <div
         onWheel={handleWheel}
-        className="scrollbar-hide hidden md:flex shrink-0 h-9 bg-bg-secondary border-b border-border overflow-x-auto"
+        className="scrollbar-hide hidden md:flex shrink-0 h-10 bg-bg-secondary/95 border-b border-border/80 overflow-x-auto"
       >
         {tabIds.map((id) => {
           const tab = tabsMap[id]
@@ -150,10 +150,10 @@ function TabButton({ title, active, onSelect, onClose, onContextMenu }: TabButto
         }
       }}
       onContextMenu={onContextMenu}
-      className={`group flex items-center gap-2 pl-3 pr-2 h-full text-[13px] cursor-pointer border-r border-border transition-colors ${
+      className={`group flex items-center gap-2 pl-3 pr-2 h-full text-[13px] cursor-pointer border-r border-border/80 transition-colors ${
         active
-          ? 'bg-bg text-text'
-          : 'text-text-muted hover:text-text hover:bg-bg-tertiary/40'
+          ? 'bg-bg-tertiary text-text'
+          : 'text-text-muted hover:text-text hover:bg-white/[0.035]'
       }`}
     >
       <span className="truncate max-w-[200px]">{title}</span>
@@ -163,7 +163,7 @@ function TabButton({ title, active, onSelect, onClose, onContextMenu }: TabButto
           e.stopPropagation()
           onClose()
         }}
-        className="w-4 h-4 rounded flex items-center justify-center text-text-muted/60 hover:text-text hover:bg-bg-tertiary"
+        className="w-4 h-4 rounded flex items-center justify-center text-text-muted/60 hover:text-text hover:bg-white/[0.06]"
         aria-label={`Close ${title}`}
       >
         <X size={11} strokeWidth={2.5} />
diff --git a/ui/src/pages/ChatLandingPage.tsx b/ui/src/pages/ChatLandingPage.tsx
index 8030535c..2dbc9cc4 100644
--- a/ui/src/pages/ChatLandingPage.tsx
+++ b/ui/src/pages/ChatLandingPage.tsx
@@ -100,10 +100,20 @@ export function ChatLandingPage() {
   }
 
   return (
-    <div className="h-full w-full overflow-auto bg-bg flex flex-col items-center justify-center px-6 py-10">
-      <div className="w-full max-w-2xl flex flex-col gap-5">
+    <div className="relative h-full w-full overflow-auto bg-bg flex flex-col items-center justify-center px-4 py-8 md:px-6 md:py-10">
+      {/* Ask-Alice backdrop — full-bleed, responsive-only layers (gradient wash
+          + faint grid). The #302 mock's %-positioned circle / diagonal bars were
+          dropped: they drift on portrait and read as pixel-placed art, not a
+          responsive surface. pointer-events-none so it never intercepts clicks. */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white/[0.035] to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 h-[38%] bg-gradient-to-t from-black/35 to-transparent" />
+        <div className="absolute inset-0 opacity-[0.06] [background-image:linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] [background-size:96px_96px]" />
+      </div>
+
+      <div className="relative z-10 w-full max-w-2xl flex flex-col gap-5">
         <div className="text-center space-y-1.5">
-          <h1 className="text-2xl font-semibold text-text">{t('chatLanding.heading')}</h1>
+          <h1 className="text-xl md:text-2xl font-semibold text-text">{t('chatLanding.heading')}</h1>
           <p className="text-sm text-text-muted">{t('chatLanding.subheading')}</p>
         </div>
 

From bfc35028fcfcefc9a86fc23ea77b54f8346a1dcb Mon Sep 17 00:00:00 2001
From: angelkawai <123734885+luokerenx4@users.noreply.github.com>
Date: Tue, 16 Jun 2026 12:13:23 +0000
Subject: [PATCH 3/3] docs(contributors): credit @2233admin for the Linear
 shell design pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Design influence (#302) — palette + navigation density re-traced into the
app. Code not merged per the in-house-only policy; recognized per the
CONTRIBUTORS convention.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CONTRIBUTORS.md | 2 +-
 README.md       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index f76dd52c..c7d63058 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -39,7 +39,7 @@ This page is the record of those people, and of what each one helped move.
 
 | | Contributor | Credits | Shaped |
 |:--:|---|:--:|---|
-| | _Be the first — open an issue with an idea or report._ [Issues →](https://github.com/TraderAlice/OpenAlice/issues) | | |
+| | <a href="https://github.com/2233admin"><img src="https://github.com/2233admin.png" width="40" height="40" alt="@2233admin" /></a><br>[@2233admin](https://github.com/2233admin) | 🎨 | [Linear dark-shell design pass — palette & navigation density re-traced into the app](https://github.com/TraderAlice/OpenAlice/pull/302) |
 
 ---
 
diff --git a/README.md b/README.md
index ba590c39..e92278ee 100644
--- a/README.md
+++ b/README.md
@@ -521,7 +521,7 @@ one. The people who've left a mark:
 <!-- Standouts (⭐) first. Avatars come free from https://github.com/<handle>.png :
      <a href="https://github.com/HANDLE"><img src="https://github.com/HANDLE.png" width="56" height="56" alt="@HANDLE" /></a> -->
 <p>
-  <em>No one on the wall yet — <a href="https://github.com/TraderAlice/OpenAlice/issues">be the first</a>.</em>
+  <a href="https://github.com/2233admin"><img src="https://github.com/2233admin.png" width="56" height="56" alt="@2233admin" /></a>
 </p>
 
 **See the full list and what each person shaped** → [CONTRIBUTORS.md](./CONTRIBUTORS.md)