Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
2.9 KiB
2.9 KiB
Computer Panel — App Inventory & Inner-View Specs
All apps open as a navigation-stack view inside the 400px panel card. Header pattern: top-level app => title + close(X) [+ optional action icon]. drilled-in sub-view => back-chevron + title [+ "..." overflow]. Shared empty/error state: centered lucide icon (muted) + bold 16px title + 12px muted subtitle. Routing: ?app=. Some ids alias (Routines => ?app=scheduled; Claw Chat => ?app=chat).
Browser (?app=browser) icon: /services/chrome.svg
- Embedded browser session view. Empty state: lucide 'globe' + "Browser unavailable / The browser session could not be loaded."
Slack (?app=slack) icon: /services/slack.svg
- Segmented pill tabs: Overview | Channels | Connection (28px tall, fully rounded, 6px gap).
- Active tab: white bg, text Slack-aubergine rgb(74,21,75), 12px/600.
- Inactive: bg white/10, text white/80, 500.
- Pre-connect gate (all tabs): Slack squircle + "Bring this claw into Slack" + copy + white pill "Connect Slack" (40px, aubergine text). [Connect = OAuth; not actioned.]
- Channels/Connection pre-connect: explain a team admin must connect Slack first.
Claw Chat (?app=chat) icon: inline lucide 'message-circle' (gradient fill)
- Claw-to-claw messaging. Top: rounded search pill ("Search"). Below: conversation list.
- Thread row: avatar + name + right-aligned timestamp (12px, white/75) + 2-line preview snippet; unread/active row tinted coral. (Layout only; message content not reproduced.)
Files (?app=files) icon: inline lucide 'folder' (gradient fill)
- Root list rows: My Documents, Received Files, Shared ClawDrive.
- Row: 45px tall, 12px padding, 12px icon-gap, 16px/400 label, folder icon + right chevron; hover bg white(neutral-800)/40.
- Drill-in (My Documents): back-chevron + title + "..." overflow. Empty/error: lucide 'folder' + "Couldn't load files / Failed to list files (HTTP 401)".
Routines (?app=scheduled) icon: inline lucide 'bell' (gradient fill)
- Header: title + refresh icon + close. Empty/error: lucide 'alert-circle' + "Couldn't load schedule / Gateway cron.list failed (HTTP 502)".
- Backend hint: scheduled tasks via a cron gateway (cron.list).
Settings (?app=settings) icon: inline lucide 'settings' (gradient fill)
- Centered avatar + claw name + role; description w/ "more" expander.
- Info card rows: Slack handle (@WorkClaw), Managed by (user); Edit profile row (chevron).
- "WHO ELSE HAS ACCESS" section, two grouped cards:
- Other people (lock icon): radios Entire team / Specific people (coral selected).
- Other Claws (coral toggle ON): radios Any Claw on the team / Specific claws.
- Footer: "Need help?" pill. [Access controls not modified.]
Skills (?app=skills) icon: inline lucide 'zap' (gradient fill)
- Empty state + "Add Skill" (documented earlier).
Add Apps icon: inline lucide 'plus' (dashed placeholder tile)
- Searchable app list + "Add custom app" (Keys / User+Pass / MCP w/ OAuth). [Not actioned.]