# Daemon HUD UI Overhaul Work Order

## Objective

Overhaul the daemon web interface using `/home/roko/Desktop/hud-ui-style-kit(6)/hud-ui-style-kit` as the source of truth. Preserve current daemon behavior while replacing the OpenWebUI-like rounded dashboard styling with the cold tactical HUD visual system.

## Ground Truth

- Style kit files:
  - `README.md`
  - `styles.css`
  - `tokens.json`
  - `index.html`
  - `assets/reference-hud-map.png`
- Required component contract:
  - `hud-panel`, `hud-panel--cut`, `hud-panel--slant`
  - required child: `hud-panel__chrome`
  - `hud-btn` with `hud-btn__chrome` and `hud-btn__label`
  - `hud-tab` with `hud-tab__chrome` and `hud-tab__label`
- Visual grammar:
  - cold blue-gray/black base
  - dense grid overlays
  - frosted panels with thin steel borders
  - clipped/slanted panel geometry
  - amber active/warning states
  - pale cyan focus/glow
  - condensed uppercase display headings
  - monospace operational logs

## Anchors

- Main daemon UI template: `packages/cli/src/api/web-ui.ts`
- Existing Generate page: `packages/cli/src/api/web-ui.ts` around `#generate-panel`
- Server-side SPA route allowlist: `packages/cli/src/api/serve.ts` around `guiRoutes`
- Existing Generate JS: `genSelectKind`, `generateMedia`, `loadGenerateTab`
- Existing AV REST analysis endpoint: `POST /v1/media/av/analyze`
- Existing media endpoint tests: `packages/cli/tests/routes-media.test.ts`
- Existing inline script parse test: `packages/cli/tests/web-ui-script.test.ts`

## Work Items

- [x] Update file header and UI foundation away from OpenWebUI naming toward HUD.
- [x] Add HUD design tokens and component classes from the style kit.
- [x] Apply global shell/sidebar/topbar/page-panel HUD styling while preserving IDs.
- [x] Replace Generate page markup with a HUD workbench.
- [x] Add Generate left nested menu with Image, Video, Audio, Music, Audio Analysis, Video Analysis, and Live AV Analysis.
- [x] Wire Generate media controls to existing `/v1/media/<kind>` behavior.
- [x] Add AV analysis controls backed by `POST /v1/media/av/analyze`.
- [x] Render analysis results with source metadata, adapter status, answer, entities, events, relations, and shots.
- [x] Add tests for HUD classes, Generate analysis panels, and AV endpoint discoverability.
- [x] Run targeted tests and typecheck.

## Evidence Log

- The daemon UI is a single self-contained HTML/CSS/JS template in `web-ui.ts`.
- The current Generate page already supports generation for image/video/audio/music and gallery browsing.
- `POST /v1/media/av/analyze` already performs multimodal analysis over local media paths/URIs with roles: `video_temporal`, `grounding`, `tracking`, `audio_event`, `audio_lalm`, `asr`, and `cross_modal`.
- Direct `/v1/tools/{name}/call` is intentionally restricted to bookkeeping tools right now, so the UI should use the AV REST route first rather than trying to call agent tools directly.
- Added HUD token bridge and component classes directly inside `web-ui.ts` to preserve the no-build static daemon UI.
- Replaced the Generate tab with a three-column HUD workbench: left operation rail, center synthesis/analysis panels, and right evidence output.
- Added route support for `/generate`.
- Added server-side `/generate` HTML route support so the Generate page can be opened directly.
- Added `genSelectMode`, `analyzeAvMedia`, and `renderAvAnalysis`.
- Updated the Generate button label handling so nested HUD chrome is not destroyed by `textContent` writes.
- Added regression coverage in `web-ui-script.test.ts` and `routes-media.test.ts`.
- Verification passed:
  - `pnpm --filter omnius test -- web-ui-script.test.ts routes-media.test.ts`
  - `pnpm --filter omnius test -- web-ui-script.test.ts web-ui-routes.test.ts routes-media.test.ts`
  - `pnpm --filter omnius typecheck`
  - `pnpm --filter omnius build`
- Live daemon check on `http://127.0.0.1:11635/generate` returned `200 text/html` and contained the HUD Generate/analysis controls.
- Live browser-cookie AV validation check reached `/v1/media/av/analyze` and returned expected `400 Missing media path`.

## Acceptance Criteria

- The page uses the HUD tokens, clipped panel chrome, nested button/tab chrome, and tactical grid styling from the style kit.
- Existing tabs still switch correctly.
- Existing Generate media generation still works.
- Audio Analysis and Video Analysis are visible under the Generate tab's left nested menu.
- Analysis submissions call `/v1/media/av/analyze`.
- Inline script still parses under the current Vitest guard.
- Media route tests still pass.