clawmates/docs/CONSOLIDATED-computer-panel-handoff.md

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=; 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_/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.