# Argus — Open Design (OD) Reference Guide
**Version 0.13.2 · Samsung Galaxy Tab S11 Ultra · Landscape 2960×1848 / Portrait 1392×868**

This document is the complete visual and functional reference for the Argus Android app so that OD (Open Design) can propose and implement a redesigned visual language. It describes every screen, every element, its location, its purpose, its current styling, and what interactions it drives.

---

## The App In One Paragraph

Argus is a personal "always-on dashboard" app that Jonathan runs on a Samsung Galaxy tablet mounted as a workstation panel. It shows one or more **panes** — each pane is a WebView loading a URL (typically a code-server VS Code instance, a terminal, or a browser target). A **control panel** of floating action buttons lives at the bottom-right corner of the screen. A **navigation drawer** slides in from the left. The app is used in landscape orientation at all times (except the Settings screen, which is portrait). The entire UI uses a dark theme with a single accent color: **orange (#F36B21)**.

---

## Design Language (Current)

| Token | Current Value | Notes |
|---|---|---|
| Background | `#1A1A1A` (near-black) | `bg_dark` drawable |
| Surface / card | `#252525` | Used in drawer, dialogs, chips |
| Border / divider | `#333333` | Separator lines |
| Accent (primary) | `#F36B21` (orange) | All active states, FABs, section headers |
| Text primary | `#E0E0E0` (light gray) | Labels, body copy |
| Text muted | `#888888` (medium gray) | Subtitles, placeholders, hints |
| Text on accent | `#FFFFFF` | Buttons on orange |
| Danger / warning | `#E53935` (red) | The screenshot-build banner |
| Mic active tint | `#F44336` → `#FF7043` (red-orange) | Mic FAB and halo when active |
| Font | System default (Roboto) | All text in Argus UI |
| Pane header height | 70 dp | Fixed across all pane counts |
| FAB size | 98×98 dp (large) | quickActionToggle, micFab, addPaneFab |
| FAB gap | 14 dp | Vertical gap between stacked FABs |
| Drawer width | 560 dp | Fixed left drawer |
| Corner radius (card) | 12 dp | `bg_edit` drawable |

---

## Screen Index

| # | Filename | Screen State | Orientation |
|---|---|---|---|
| 00 | `argus_00_minimal_ui.png` | App loaded, no WebView content yet | Landscape |
| 01 | `argus_01_main_2pane.png` | Main view — 2 panes loaded (code-server) | Landscape |
| 02 | `argus_02_drawer_open.png` | Drawer open | Landscape |
| 03 | `argus_03_add_pane_dialog.png` | Add Pane dialog | Landscape |
| 04 | `argus_04_quick_actions_expanded.png` | Control panel expanded | Landscape |
| 05 | `argus_05_caffeine_active.png` | Caffeine (keep-awake) active | Landscape |
| 06 | `argus_06_brightness_slider.png` | Control panel expanded (same layout) | Landscape |
| 07 | `argus_07_settings.png` | Settings — top (General) | Portrait |
| 07b | `argus_07b_settings_scroll1.png` | Settings — mid (tokens + Security top) | Portrait |
| 07c | `argus_07c_settings_scroll2.png` | Settings — Security + Debug Mode + Voice | Portrait |
| 07d | `argus_07d_settings_scroll3.png` | Settings — Voice Dictation detail | Portrait |
| 07e | `argus_07e_settings_bottom.png` | Settings — Voice + S-Pen | Portrait |
| 08 | `argus_08_biometric_gate.png` | Locked state (biometric not yet passed) | Portrait |
| 09 | `argus_09_mic_permission_dialog.png` | System permission dialog for mic | Landscape |
| 10 | `argus_10_voice_active.png` | Voice dictation active (mic FAB glowing) | Landscape |
| 11 | `argus_11_empty_state.png` | **PROPOSED REDESIGN TARGET** — Empty state (no panes) | Landscape |

---

## Screen 00 — Minimal UI (no WebView content)

The foundational chrome of Argus. All WebView content has not loaded yet. Shows only the structural overlay elements that sit above the pane layer at all times.

### Elements visible
- **Screenshot banner** (top-left): A red pill/badge `⚠ SCREENSHOT BUILD — FLAG_SECURE OFF`. In the production build this is invisible. OD should style it as an obvious debug warning.
- **Clock pill** (`clockPill`, center-top): Floating text widget showing `HH:mm:ss` format. Draggable anywhere on screen. Tapping changes format. Currently: no background card — raw text in `#F36B21` orange over whatever is beneath. Default resting position: vertically centered at top, horizontally centered. **OD should consider a subtle pill/card background.**
- **"A" badge** (`expanderAutoBadge`, top-right of expander): Small orange circle with white "A" indicating Auto Mode is active. Positioned as an overlay badge on the quickActionToggle button.
- **quickActionToggle** (`quickActionToggle`, bottom-right): Square FAB with a stack-of-chips icon (three horizontal bars). This is the expander for the quick-action bar. When the action bar is collapsed, this is the only action visible. The "A" auto-mode badge overlays its top-right corner. Size: 98×98 dp.
- **micFab** (center-right, just above addPaneFab): Circular FAB with microphone icon. Tap = start voice dictation. Hold = dictate while held. Size: 98×98 dp.
- **addPaneFab** (bottom-right, lowest): Orange circular FAB with `+` icon. Opens the Add Pane dialog. Size: 98×98 dp.

### Layout coordinates (actual device, landscape 2960×1848)
```
clockPill:          x=1400–1560, y=72–129  (center: 1480,100)
quickActionToggle:  x=2827–2925, y=1477–1575  (center: 2876,1526)
expanderAutoBadge:  x=2914–2939, y=1487–1512  (tiny badge, top-right of toggle)
micFab:             x=2827–2925, y=1589–1687  (center: 2876,1638)
addPaneFab:         x=2827–2925, y=1701–1799  (center: 2876,1750)
```

---

## Screen 01 — Main View (2 Panes Loaded)

The primary working state. Two side-by-side WebViews fill the screen. Each pane has a header tab at the very top.

### Pane Container
The pane container is a horizontal LinearLayout filling the entire screen. When 2 panes are open, each gets roughly half the width (each ~1474 dp wide). A thin vertical divider (1 dp, `#444444`) separates panes. The divider is draggable to resize panes.

### Pane Header (per pane)
Height: 70 dp. Background: `#1E1E1E` (slightly lighter than body). Contains left-to-right:
- **Pane index badge** (`paneIndex`): Small number in a colored circle (orange outline). Shows "1", "2", etc.
- **Pane URL label** (`paneUrl`): Truncated URL/path string, e.g. `code.domian.network · kpmg`. Tappable — opens the URL editor.
- **Reload button** (`paneReload`): Circular arrow icon (64×64 dp). Reloads the WebView.
- **Close button** (`paneClose`): X icon (64×64 dp). Closes this pane.

**When a pane is the ACTIVE pane** (focus), the header has a subtle bottom accent line in orange. The inactive pane headers are slightly dimmer.

### Pane Content
Fills remaining height (70 dp to bottom). The WebView renders code-server (VS Code) which has its own dark theme. Argus does not style the WebView content.

### Control Panel (right edge, always visible over panes)
Three stacked FABs at bottom-right. See Screen 00 for coordinates. Over loaded panes they render with a semi-transparent background scrim behind them.

### Pane Navigation Bar (bottom strip per pane)
Each pane has a bottom status bar inherited from code-server itself (not Argus UI). Shows branch name, errors/warnings, language, etc. Dark gray, not styled by Argus.

---

## Screen 02 — Navigation Drawer

Slides in from the left edge. Width: 560 dp (approximately 19% of landscape screen width). Background: `#1C1C1C`. Sections:

### Drawer Sections (top to bottom)

**App title**
- "Argus" wordmark at top, large bold white text.

**QUICK ACTIONS** (orange section header)
- `Add pane` button: Full-width orange button with `+` icon. Primary CTA. Rounded rectangle, orange fill, white text.
- `Reload all panes`: Ghost button (outline), white text. Reloads all open WebViews.
- `Duplicate active pane`: Ghost button, copies the active pane config.

**PANES** (section header + help text)
- Help text: "Long-press a recent pane to pin it here." in muted gray.

**ACTIVE PANES** (section header)
- Each active pane shown as a row: colored index badge + label text + `×` close button (icon button, right-aligned). The active pane row has a subtle left-side orange bar indicator.
- Example: `① kpmg  ×` and `② argus  ×`

**RECENT PANES** (section header)
- Recent panes shown as rows with a pin/favorite icon. Tapping re-opens the pane.

**CLAUDE SESSIONS** (section header)
- "Sessions API requires a token. Paste it in Settings → Sessions API token." — muted help text. When token is configured, this section lists active Claude Code sessions with colored dots and session names.

**WORKSPACES** (section header)
- `Save current setup` — full-width ghost button. Saves the current pane configuration as a named workspace preset.
- Workspace list (if any saved).

**TOOLS** (section header)
- External tools registered by the user. Currently: `Grafana` and `OD`. Tap opens the URL in a pane.
- `+ Add tool` — small outline button at bottom of section.

**SETTINGS** (section header)
- `All settings` — row item with gear icon. Navigates to Settings Activity.

---

## Screen 03 — Add Pane Dialog

Modal bottom-sheet style dialog with rounded top corners. Appears centered on screen. Background: `#252525`. Drop shadow.

### Components
- **Title**: "Add pane" — bold white, 18sp.
- **Tabs**: Four pill-style segment buttons: `Folder`, `URL`, `Terminal`, `Browser`. The active tab uses orange fill + white text; inactive is dark with gray text.
- **Input field** (folder mode): Rounded rect input, dark fill, placeholder text e.g. `~/code-custom`. Monospace font.
- **RECENT section**: Below input. Shows previously used paths/URLs in a scrollable chip list. Each chip is a rounded rect with the URL text.
- **Buttons**: Two at bottom — `Cancel` (ghost, gray text) and `Open` (orange fill, white text).

---

## Screen 04 — Control Panel Expanded

Tapping `quickActionToggle` expands the control panel, revealing additional FABs in a horizontal row and the quick-action chip scroll in a vertical column.

### Horizontal FAB Row (bottom-right, y=1526 in landscape)
All FABs are 98×98 dp, same height. Left-to-right order:
1. **lockFab** (shield icon, x≈2316): Locks the screen — triggers biometric gate. Icon: padlock.
2. **brightnessFab** (sun icon, x≈2428): Brightness control. Tap: toggle 100%↔dim. Press-hold: activates drag slider. Icon: sun/brightness.
3. **settingsFab** (gear icon, x≈2540): Navigates to Settings. Icon: gear cog.
4. **kbToggleFab** (keyboard icon, x≈2652): Shows/hides software keyboard. Has a ghost "persistent" badge when KB is pinned open. Icon: keyboard.
5. **caffeineFab** (coffee cup icon, x≈2764): Toggles screen keep-awake. When active, shows a countdown badge (minutes remaining). Icon: coffee cup.
6. **quickActionToggle** (X/close icon, x≈2876): Now shows X because panel is open. Tapping closes the panel.

### Quick Action Chip Scroll (rightmost vertical column, y=424–1470)
A vertical scrollable list of user-configurable quick-action chips. Each chip is a rounded rect button (~84×84 dp) with:
- An icon (configurable)
- Optional label text below

Chips can be reordered by long-press drag. An `+` chip at the bottom of the list adds a new chip. A lock/pin chip at the top pins the row open (chip-lock mode — disables auto-collapse).

---

## Screen 05 — Caffeine Active

Same layout as Screen 04. When caffeine is active:
- **caffeineFab** changes tint to orange (active state)
- **caffeineCountdown** badge appears overlaying the top-right of caffeineFab — shows remaining minutes (e.g., "29")
- The badge uses orange background with white text, 11sp

---

## Screen 07–07e — Settings Activity (Portrait)

The Settings screen opens in portrait orientation (1392×868). It is a standard Android Activity with a back arrow at top-left. Long scrollable single-column layout.

### GENERAL Section (orange section header)

| Field | Type | Current Default | Notes |
|---|---|---|---|
| BASE URL | Text input | `https://code.domian.network` | The base for all pane URLs |
| TOP-LEVEL PROJECT DIRECTORY | Text input | `/home/claude` | Used by folder quick-open |
| MAX PANES | Slider | 4 | Range 1–8 |
| BACKSPACE CHIP REPEAT SPEED (MS) | Slider | 80 | For physical keyboard backspace chip |
| DRAG ACTIVATION DELAY (MS) | Slider | 500 | Long-press-to-drag threshold |
| CONTROL PANEL BRIGHTNESS (%) | Slider | 100% | Opacity of the FAB control panel |
| CONTROL PANEL SCROLL-FADE TARGET (%) | Slider | 100% | Opacity during pane scrolling |
| SESSIONS ENDPOINT | Text input | `https://code.domian.network/argus-api/sessions` | |
| SESSIONS API TOKEN | Text input (password) | (blank placeholder) | Bearer token for Claude sessions |
| CF ACCESS CLIENT ID | Text input | (blank placeholder) | Cloudflare Access service token |
| CF ACCESS CLIENT SECRET | Text input (password) | (blank placeholder) | Paired with client ID |

### SECURITY Section (orange section header)

| Field | Type | Default | Notes |
|---|---|---|---|
| Biometric unlock | Toggle | OFF (for debug build) | Requires fingerprint/face before showing UI |
| Biometric Grace Window | Selector | 5 minutes | Re-prompt window after leaving app |
| Trust device unlock | Toggle | OFF | Skips grace window on trusted devices |
| **Debug mode** | **Toggle** | **OFF** | **Keeps screen on + bypasses biometric gate. Orange when ON. "Turn off when done."** |

**Debug mode is the key development toggle.** When ON, the toggle renders with bright orange/purple Material switch. The description text: "Keeps screen on and bypasses biometric gate. Turn off when done." This is in the Security section, last item before VOICE DICTATION.

### VOICE DICTATION Section (orange section header)

| Field | Type | Current |
|---|---|---|
| Activation | Segmented button | Tap to start / Hold to talk |
| Punctuation | Segmented button 3-way | Auto (selected) / Off / Spoken |
| Force Google recognizer | Toggle | OFF (Samsung needs this) |
| Silence Timeout (MS) | Slider | 1800 |
| Locale | Dropdown | Device default |
| Continuous mode | Toggle | OFF |
| Send on done | Toggle | OFF |
| Auto-capitalize first word | Toggle | ON |
| Haptic feedback on mic start/stop | Toggle | ON |
| Train Google voice | Link button | Opens system settings |

### KEYBOARD SHORTCUT Section
Single text input: `Ctrl + Shift + M` — the global keyboard shortcut to toggle mic without tapping the FAB.

### S PEN Section
Three sub-sections for S Pen gestures:
- **HOLD**: Off / Hold to dictate
- **SINGLE TAP**: Off / Quick Actions / Mic / New Pane
- **DOUBLE TAP**: Off / Quick Actions / Mic / New Pane

### Settings Visual Style
- Background: `#111111` (slightly darker than main)
- Section headers: All-caps orange text, 12sp, `#F36B21`
- Field labels: All-caps, 11sp, muted gray `#888888`
- Input fields: Rounded rect `#1E1E1E` background, white text, orange left border when focused
- Toggles: Material `MaterialSwitch` — off state gray, on state orange/purple (Material default)
- Sliders: Orange track, orange thumb
- Segmented buttons: Pill shape, orange selected fill

---

## Screen 08 — Biometric Gate

When the app launches with biometric enabled and no active session, the UI shows a **fully black screen** (all app content hidden by `FLAG_SECURE` on the authentication activity) with the system biometric prompt overlaid by the OS. The biometric prompt dialog is a system UI element and cannot be styled by Argus. Argus controls only the black background.

**OD opportunity**: Design a branded "locked" state shown just before biometric triggers — e.g., the Argus logo centered on the dark background with a "Tap to unlock" label.

---

## Screen 09 — Microphone Permission Dialog

First time the mic FAB is tapped, Android shows a system permission dialog: "Allow Argus to record audio?" with three buttons. This is a system dialog and cannot be styled by Argus. Shown for completeness.

---

## Screen 10 — Voice Dictation Active

When the mic FAB is tapped (Tap-to-Start mode):
- **micFab background** changes from `#252525` (dark) to `#E53935` (bright red) — active recording indicator
- **micHalo** — a large circular view that tracks micFab's position — pulses with a red/orange glow. It is rendered BEHIND the micFab. The halo is ~200 dp diameter vs 98 dp FAB, creating a visible glow ring. The halo pulsates in/out while listening.
- Voice recognition results appear as committed text in whatever WebView input has focus.
- Tapping the micFab again stops recording.

**OD opportunity**: The mic active state is a key moment — design a more prominent listening indicator (waveform animation, transcript preview area at bottom of screen, or pill-shaped status chip above the mic button showing "Listening...").

---

## Screen 11 — Empty State (No Panes) ← KEY DESIGN TARGET

Currently: when no panes are open, Argus shows a black void — just the clock pill, the expander toggle, mic FAB, and + FAB are visible.

**NEW FEATURE REQUEST (Jonathan, 2026-05-14)**: Replace this empty state with a meaningful home/dashboard screen. When there are no open panes (or the last pane is closed), show a rich "server stats" display instead of a black void.

### Proposed content for the empty state
OD should design a full-screen layout that includes some or all of:

**Header / Branding area**
- Argus wordmark or logo, centered
- Current time (large, styled) — already shown by clockPill, but could be more prominent here
- Date and day of week

**Live Server Stats Grid** (pulled from argus-sessions-api)
- Active Claude Code sessions count + colored dots per session
- CPU usage % (server)
- Memory usage % (server)
- Disk usage % (server)
- Network (in/out kbps)
- Uptime

**Recent Activity Feed** (if sessions API provides data)
- Last N Claude session updates with project name + elapsed time
- "3 active sessions" prominent badge

**Quick-launch buttons** (shortcut to open panes)
- Recent pane chips (same as drawer) but bigger/bolder for empty state use
- Primary CTA: `Open a pane` button

**Design direction suggestions**
- Think: a beautiful ambient display / Apple Watch complications aesthetic
- Stats in card grid with subtle borders
- Use the existing orange accent for live/active indicators
- Dark glass-morphism cards work well on the near-black background
- Animated: numbers counting up when fresh, subtle pulse on "active" indicators
- Optional full-screen clock mode (like a screensaver) that dims further when idle

---

## Interaction Map

### Gesture Reference (landscape mode)

| Gesture | Target area | Effect |
|---|---|---|
| Swipe right from left edge | Anywhere in pane area | Opens navigation drawer |
| Tap | quickActionToggle | Toggles quick-action row expand/collapse |
| Long press | quickActionToggle | Toggles Auto Mode (A badge) on/off |
| Tap | micFab | Start/stop voice dictation |
| Hold | micFab | Dictate while held (hold-to-talk mode) |
| Tap | addPaneFab (+) | Opens Add Pane dialog |
| Tap | caffeineFab | Toggle keep-awake on/off |
| Press + hold | brightnessFab | Activate brightness drag slider |
| Tap | brightnessFab | Toggle 100%↔dim |
| Tap | lockFab | Lock screen (triggers biometric gate) |
| Tap | settingsFab | Open Settings |
| Tap | kbToggleFab | Show/hide software keyboard |
| Tap | Pane header | Activate/focus that pane |
| Tap | Pane URL label | Open URL editor inline |
| Drag | Pane divider | Resize pane widths |
| Long press | Drawer recent pane | Pin it to the top |
| Drag chip in quick-action row | Quick action chips | Reorder chips |
| Tap | clockPill | Cycle clock format (time / time+seconds / time+date) |
| Drag | clockPill | Move clock to any position on screen |

---

## Color Palette Summary

```
Background:    #1A1A1A  — app background
Surface:       #1C1C1C  — drawer, cards
Card:          #252525  — dialogs, chip backgrounds
Border:        #333333  — dividers, input borders
Accent:        #F36B21  — orange: active states, FABs, section labels
Text:          #E0E0E0  — primary content
Muted:         #888888  — labels, placeholders
Danger:        #E53935  — mic active, locked, warnings
Success:       (none defined currently)
Info:          (none defined currently)
```

---

## Typography

All text is system Roboto. No custom font is currently used.

| Role | Size | Weight | Color |
|---|---|---|---|
| Section header | 12sp | SemiBold | #F36B21 |
| Field label | 11sp | Regular | #888888 |
| Body / input | 14sp | Regular | #E0E0E0 |
| Button | 14sp | Medium | #FFFFFF or #F36B21 |
| Clock pill | 13sp | Regular | #F36B21 |
| Pane URL | 13sp | Regular | #CCCCCC |
| Dialog title | 18sp | Bold | #FFFFFF |
| Drawer section | 11sp | SemiBold | #888888 |
| Caffeine badge | 11sp | Bold | #FFFFFF on orange bg |

---

## What OD Should Focus On

Priority redesign areas in order:

1. **Empty State / Home Screen** (Screen 11) — brand new design, maximum impact. Server stats dashboard. Design brief above.
2. **Control Panel FABs** (Screens 00, 04) — currently plain Material FABs. Could use more custom styling — consider pill shapes, icon+label combos, or a more integrated panel card rather than floating dots.
3. **Pane Headers** (Screen 01) — the tab strip at the top of each pane. Currently bare minimum. Could benefit from visual hierarchy, active indicator styling, favicon support.
4. **Navigation Drawer** (Screen 02) — functional but plain. Quick Actions section could be more visually prominent. Claude Sessions list in particular would benefit from richer session cards.
5. **Voice Active State** (Screen 10) — the mic halo animation. The current red circle is functional but the listening state could be more visually communicative (waveform, transcript preview).
6. **Settings Screen** (Screens 07–07e) — functional but dense. Better section grouping, icons per field, visual hierarchy. Already on the dev roadmap.
7. **Biometric Gate** (Screen 08) — needs a branded locked-state screen instead of pure black.
8. **Clock Pill** (visible in all screens) — currently raw text floating over content. Could use a glassmorphism pill background.

---

## Files In This Package

```
argus_00_minimal_ui.png         — Minimal UI: control panel only, no pane content
argus_01_main_2pane.png         — Main: two code-server panes loaded side by side
argus_02_drawer_open.png        — Navigation drawer fully open
argus_03_add_pane_dialog.png    — Add Pane modal dialog
argus_04_quick_actions_expanded.png — Control panel with all FABs visible
argus_05_caffeine_active.png    — Caffeine toggle state
argus_06_brightness_slider.png  — Control panel (brightness context)
argus_07_settings.png           — Settings: General section top
argus_07b_settings_scroll1.png  — Settings: General bottom + Security top
argus_07c_settings_scroll2.png  — Settings: Security section + Debug Mode + Voice top
argus_07d_settings_scroll3.png  — Settings: Voice Dictation full
argus_07e_settings_bottom.png   — Settings: Voice + S-Pen section
argus_08_biometric_gate.png     — Locked/biometric state (black screen)
argus_09_mic_permission_dialog.png — System mic permission dialog
argus_10_voice_active.png       — Mic FAB with active halo glow
argus_11_empty_state.png        — Empty state (no panes) — KEY REDESIGN TARGET
ARGUS-OD-GUIDE.md              — This document
```
