Deliverables
10 / NEW · v0.8 KEY DELIVERABLE
Empty State Dashboard
Server-stats home screen replacing the black void. Glassmorphism cards — active Claude sessions, CPU/memory arcs, activity feed, uptime. Full animated entry.
glassmorphism animated sessions API
01 / PRIORITY 1
Soft-Keyboard Helper Bar
Flatter, denser keybar redesign. v0.8 bottom-anchored + v0.9 floating-above-IME variant. CTRL/ALT sticky modifier states. Optional second row.
terminal panes 28dp height slide-in anim
02 / PRIORITY 2
Per-Pane Status Pill
4 states: live · idle · disconnected · stale. Status embedded into the index badge — no new location conflict with the orange active-pane border.
all pane types pulsing green 900ms anim
03 / PRIORITY 3
Voice Input Mode
Mic button placement (3 options evaluated). Live transcript floating chip. 3 visual states: idle · listening · transcribing. Permission denial fallback.
global mic floating chip pulse ring
04 / PRIORITY 4
Updated Drawer — All 8 Sections
Full drawer mock with realistic data. Section hierarchy resolved: 3 full orange labels, 3 thin-rule collapsibles, 2 inline. Collapse-by-default proposal answered.
8 sections collapse states live sessions
05 / PRIORITY 5
Sessions API Token Field UX
Clipboard-paste-with-test-connection (recommended) vs QR code pairing. Show/hide toggle. Test inline ✓/✗. Compact masked display once set.
settings 43-char token test connection
06 / PRIORITY 6
Quick Settings Tile
Tile icon confirmation (3-pane glyph). Android 14+ dynamic pane count in badge. Label: "Argus" (confirmed). Active/inactive tile states.
system QS Android 14+ dynamic label
07 / PRIORITY 7
MediaStyle Notification
Adopt recommended: YES. Actions: Focus pane → Reload all → Close. Lock screen vs shade variants. Foreground service persistent notification redesign.
foreground service 3 actions lock screen
08 / PRIORITY 8
Theme Architecture — 4 Themes
Claude Default · Solarized Dark · Dracula · Catppuccin Mocha. Same drawer rendered in each. Token export for Material 3 themes.xml mapping.
token system 4 themes JSON export
09 / PRIORITY 9
Animation Specs
Live animated demos. Pulsing green dot (900ms). Drawer slide curve. Keybar slide-in. Property + easing + duration for every named animation.
live demos cubic-bezier Android Interpolator
11 / NEW · SETTINGS REDESIGN
Settings Screen — Reorganized
Full settings screen redesign. GENERAL split into 3 sub-groups (Connection, Behavior, Interface). Card-grouped rows, inline chip selectors, interactive sliders, token field with Show/Clear/Test.
sub-grouped interactive portrait
12 / NEW · TABLET LAYOUT
Settings Screen — Tablet / Foldable
Master–detail two-pane layout. Responsive across Pixel 9 Pro Fold inner (800dp), Tab S11 Ultra portrait (924dp), and landscape (1480dp). Section nav rail, 2-col grids for toggles and connection fields, inline sliders, JS-driven section switching.
master–detail responsive Fold + Tab
13 / NEW · TERMINAL PANE
Terminal Pane Design Spec
xterm.js "Argus Dark" theme — 21-key JSON, overlay bar CSS (exact IDs), page-level CSS, morph icon SVG. Live preview with interactive dot states. Copy-paste ready for Kotlin integration.
xterm.js copy-paste overlay CSS
10 Open Product Questions — Proposed Answers
Q1 — v0.7
Always-on drawer toggle button in addition to edge-swipe?
YES — 28dp circular pill floating at left edge, 50% down the screen. Orange chevron icon `›`. Edge-swipe stays primary; button adds discoverability without occupying pane real estate.
Users on foldable covers and newcomers can't reliably edge-swipe at the correct 6dp zone. One small affordance eliminates the support question entirely.
Q2 — v0.7
Terminal panes: CRT/scanline aesthetic or match code-server panes?
SUBTLE DIFFERENTIATION — 3dp green left edge stripe (not orange), a `[TERMINAL]` label badge replacing the URL chip, and a very faint scanline CSS overlay (4% opacity). No novelty-store vibe.
Categorical differentiation helps Jonathan know at a glance which pane is a shell. Green edge ≠ orange edge = "different kind of thing." The scanline stays tasteful at 4%.
Q3 — v0.7
Active pane indicator: orange border, or dim inactive panes, or both?
BOTH — Keep the 3dp orange border (up from 2dp) AND apply a 10% dark overlay to inactive pane headers. The content itself is not dimmed — only the 32dp header strip.
On the Fold/Tab inner display, a 2dp border gets lost. 3dp + subtle header dim gives two distinct signals without losing content readability in inactive panes.
Q4 — v0.7
Should FAB be bigger/more prominent when pane count = 1?
YES — FAB scales from 56dp to 64dp when pane count = 1, plus a one-time 3-bounce animation on first launch (played once to localStorage flag). At count = max, FAB disappears entirely (no disabled state).
Single-pane users are most likely to forget the multi-pane capability. The bounce animation says "tap me" once and never again.
Q5 — v0.7
Header density for 3+ panes on the Fold inner display?
YES, define DENSE mode — At 3+ panes: header shrinks to 28dp (from 32dp), badge to 18dp, icons to 20dp, URL chip shows folder name only (no full path). Defined as a `PaneCountMode` enum: NORMAL (1–2) / DENSE (3–5).
At 4 panes on 2208px inner display, each pane gets ~530px. A 32dp header is 6% of visible height per pane. Dropping to 28dp recovers ~16dp of content space per pane = 64dp total reclaimed.
Q6 — v0.7
"Workspaces" naming — rename?
Rename to "Layouts" — "Workspaces" is VS Code vocabulary (conflicts with the code-server panes Jonathan is already using). "Layouts" is neutral, immediately understood, and doesn't imply project scope.
Jonathan's mental model: a Layout is a saved arrangement of panes. It says nothing about which projects are open — just how many panes and where they're split.
Q7 — v0.7
Theme picker: live preview (left rail) or gallery (cards)?
Left rail + live re-skin — Settings is already proposed as master-detail. The left rail becomes the theme list; the right pane re-renders in the selected theme's colors in real time. No separate gallery needed.
Live preview eliminates the mental-load of "will this look right?" The master-detail layout we're already building provides the shell for free.
Q8 — v0.8
Drawer collapse-by-default: which sections?
Collapse: RECENT · LAYOUTS · TOOLS. Always expanded: QUICK ACTIONS · PINNED · ACTIVE PANES · SESSIONS · SETTINGS row. The live-state sections (SESSIONS, ACTIVE) stay open; historical/utility sections collapse.
Collapsed sections reduce drawer scroll from ~3× screen height to ~1.4×. The three collapsed sections are all "I know where to find this when I need it" content, not "I need to see this now" content.
Q9 — v0.8
Terminal panes: categorically different visual identity or trust the badge?
Categorically different — Green left edge (not orange), `[TERMINAL]` type badge, no URL chip, keybar always visible at bottom. The visual coding signals "scoped tool" which also primes the v0.9 git-API narrowing.
When the terminal is eventually narrowed from full bash to a scoped git API (v0.9 security plan), the existing visual treatment of "this is different/limited" pre-conditions the user instead of surprising them.
Q10 — v0.8
Status pill location collides with active-pane orange border. Resolve.
Status lives IN the badge, not beside it. The index badge background communicates session state: pulsing green ring = live; solid dim fill = idle; red outline = disconnected; yellow = stale. Orange border = focused pane (different concept, no conflict).
Status (what the session is doing) and focus (which pane has input) are orthogonal. Merging status into an existing element (the badge) eliminates the location collision entirely. One badge, two things, no new real estate.
Brand Tokens — Claude Default Theme
Token Value Role
argus_bg#141414App background, main surface
argus_panel#1C1C1CDrawer bg, dialog surface, pane header
argus_panel2#242424Keybar bg, secondary surfaces
argus_border#272727Dividers, drag handle, keybar button borders
argus_text#D0D0D0Primary text
argus_muted#7A7A7ASecondary text, section divider labels
argus_dim#4E4E4ETertiary, placeholder, version string
argus_orange#C15F3CBrand identity, active pane border, FAB, section labels (use sparingly)
argus_orange_hover#D06B45Press state for orange elements
argus_orange_tintrgba(193,95,60,0.10)Pinned item row bg, CTRL sticky modifier bg
argus_green#3FB950Live session dot, terminal edge stripe
argus_yellow#D29922Stale/recent session indicator
argus_blue#4D9EDASecondary accent — session indicators, info states
argus_red#C0392BError, disconnected state, mic listening