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]>
45 lines
2.9 KiB
Markdown
45 lines
2.9 KiB
Markdown
# 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=<id>. 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.]
|