feat(ui): Linear dark shell — palette + density pass (re-traced from #302)

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) |
 
 ---
 

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)

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">

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}
         >

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>

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} />

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

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>