# WorkClaw "Computer" Panel — Consolidated Handoff Spec

> Reverse-engineered from live computed styles (dark theme, 1440 viewport). Design SYSTEM only.
> Brand assets (logos, avatars, marketing copy) = "replace with ours / use official". UI glyphs = lucide (free, ISC).

================================================================
## 1. PANEL CHROME (the "computer")
================================================================
### Outer wrapper (ASIDE)
- position: absolute, pinned right of chat column; width 448px; full height; padding 88px 24px 24px.
- will-change: transform, width  => OPEN/CLOSE animates WIDTH (docked rail), not a translate slide.

### Visual "screen" card
- 400 x 652px; border-radius 32px; clips children.
- Ambient white-tinted lift shadow:
  0 4px 12px rgba(255,255,255,.024), 0 24px 60px -8px rgba(255,255,255,.03), 0 40px 80px -20px rgba(255,255,255,.02)

### Wallpaper stack (back->front), all absolute inset-0, radius 32px
1. Base gradient (-z-20) INLINE, AGENT-THEMED:
   WorkClaw = linear-gradient(135deg,#0f172a,#1e293b); Morpheus = coral variant. (per-claw prop)
2. Vignette (-z-10): solid #000 @ opacity .40.
3. Frosted glass overlay: bg-white/5, backdrop-filter blur(40px), layer opacity ~.36.

### Header row
- Title SPAN 12px/500, near-white; preceded by 8px rose-500 (rgb(244,63,94)) status dot.

### Bottom dock
- Frosted capsule: rounded-3xl (24px), gap 20px, padding 16/24/12.
- bg-white/[0.07]; backdrop-filter blur(40px) saturate(1.5); inset ring white/[0.04];
- shadow: inset 0 1px 0 rgba(255,255,255,.06) + 0 10px 30px -6px rgba(0,0,0,.35).
- Dock tiles ~48px, black, 16px radius, inset white hairline ring.

### App-grid tiles (home)
- 56x56; icon container 16px radius (iOS squircle); 11px muted label.
- Press: active:scale-[0.92], transition transform 0.1s cubic-bezier(0.16,1,0.3,1).
- "Add Apps": dashed-border squircle + plus glyph.

================================================================
## 2. WINDOW ANIMATIONS (signature ease cubic-bezier(.32,.72,0,1))
================================================================
LAUNCH  app-shell-zoom-in  (~0.28s, forwards): scale(var(--app-origin-scale,.7))+radius32 -> scale(1)+rest radius, opacity 0->1 by 40%. transform-origin set to tapped icon center (grow-from-icon).
CLOSE   app-shell-zoom-out (reverse, shrinks into icon) + app-shell-fade-out.
PUSH    app-shell-slide-in-right (.28s): translate(30%)+op.5 -> 0. via .app-shell-anim-push-in.
POP     app-shell-slide-in-left: translate(-30%)+op.5 -> 0.
TAB/SWAP app-shell-cross-fade-in: scale(.985)->1 + fade.
PANEL   animates docked rail WIDTH (448px) open/close.

================================================================
## 3. APPS (route ?app=<id>; aliases noted)
================================================================
Header pattern: top-level => title + close X [+ action icon]; sub-view => back-chevron + title [+ "..." overflow].
Shared empty/error: muted lucide icon + 16px/600 title + 12px muted subtitle.

- Browser (?app=browser) icon /services/chrome.svg — embedded session; empty: globe + "Browser unavailable".
- Slack (?app=slack) icon /services/slack.svg — pill tabs Overview/Channels/Connection (active=white/aubergine #4a154b); connect-gate w/ white "Connect Slack" pill. [OAuth not actioned]
- Claw Chat (?app=chat) icon lucide message-circle — search pill + thread rows (avatar+name+timestamp+2-line preview; unread=coral). [layout only]
- Files (?app=files) icon lucide folder — list rows (My Documents/Received Files/Shared ClawDrive); 45px rows; drill-in => empty/error state.
- Routines (?app=scheduled) icon lucide bell — refresh action; empty/error via cron gateway (cron.list).
- Settings (?app=settings) icon lucide settings — avatar+name+role, description w/ "more", info rows, Edit profile; "WHO ELSE HAS ACCESS" (Other people radios + Other Claws coral toggle). [not modified]
- Skills (?app=skills) icon lucide zap — empty state + bottom "Add Skill" pill (370x48, near-white).
- Add Apps (?app=apps) icon lucide plus — category pills (All/Productivity/Communication/Dev tools/Design/Finance), search, integration rows w/ "+", bottom "Add custom app" pill.
  - Add Custom App wizard: Auth type (Keys / Username+Password / MCP+OAuth) -> Access (Only Me / Anyone in team) -> [credential form, not entered].

================================================================
## 4. ICONS & LOGOS
================================================================
- UI glyphs = lucide (24x24, gradient stroke+fill via url(#mvp4-glyph-gradient-*)). Free (ISC). Use directly.
- Browser/Slack tiles = /services/chrome.svg, /services/slack.svg (official brand marks).
- Integration tiles (Add Apps): /services/{slack,chrome,notion,linear,figma}.* and /s.v0/app_<id>/logo/orig (Gmail, GCal, Drive, GitHub, Zoom, Stripe, HubSpot…). Third-party brand logos — use official assets, don't recolor.

================================================================
## 5. SHARED COMPONENT TOKENS
================================================================
- Primary pill button: fully rounded, near-white (#f5f5f5) fill, near-black text, 14px/600, 48px tall.
- Section label: uppercase ~11px, letter-spaced, muted.
- Grouped card: 12px radius, neutral-900/800 fill, no border.
- List row: ~45px, 12px padding, 12px gap, 16px/400 label, hover bg neutral-800/40.
- Coral accent #f96565; selected radios + toggles use coral.