# 2. Dashboard Overview

The 3F dashboard is a **Vue 3** single-page workbench — not a thin viewer: it owns sessions, steers the harness, and exposes everything the server can do.

- **Stack:** Vue 3 (Composition API, `<script setup>`), Vite 8, Pinia, TanStack Query, Tailwind CSS v4, VueUse, Headless UI, socket.io-client, vue3-toastify, vue-router, vue-i18n, D3 (axis/scale/selection/shape/time-format/zoom) for stock-market charts
- **Entry:** `dashboard/src/main.ts` → `App.vue` (Pinia + VueQuery + router + i18n plugins). Routing is handled by **vue-router** (`src/router/router.ts`): `/chat`, `/dlq`, `/debug`, `/sysctl`, with `/` redirecting to `/chat`.
- **Dev URL:** `http://localhost:5173/dashboard/` · proxies API to the server (`VITE_PROXY_TARGET`)

## The areas

| Area          | Path (`src/components/`) | What it is                                                                                                                                                                  |
| ------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Chat**      | `chat/`                  | The main stage: conversation header (rename / delete / pin), exchange list, prompt action bar, right panel (incl. playlist), floating player, toolbar. See **2.2**.                                    |
| **SysCtl**    | `sysctl/`                | System control: provider configuration, preprocessing settings, search-engines (per-provider sections for Serper, Bright Data, EODHD + YouTube tools), layouts, interface visibility, chat navigation (scroll mode, media priority), system health, tab visibility, widgets, per-session model/config management, memory (system tab: the memory partition id + the memory cognition space id — empty cognition = lives in the partition — plus the cognition limit system variable and a sources-style cognition read-out panel (structured profile + probed insights) with refresh and armed two-click wipe). |
| **DLQ**       | `dlq/`                   | Dead-letter management: list of failed envelopes (polled every 30 s), detail view with payload editing, reinstatable back into the queue.                                   |
| **PProc**     | `pproc/`                 | Image preprocessing workbench: tools panel with file preview pipeline to inspect what variants the server will generate.                                                    |
| **App shell** | `app/`                   | Header (nav menu, tabs), footer, theme selector, language selector, main content switch.                                                                                       |
| **Widgets**   | `widgets/`               | Reusable floating UI: popout preview, floating playlist, toast system.                                                                                                         |

## What makes it a workbench

- **Session identity everywhere** — a session scopes conversations, config, and storage; the whole UI behaves as one continuous workspace per session.
- **Model awareness** — the dashboard fetches the live model catalogue (`GET /api/v1/harness/models`) and renders model-specific capabilities (context sizes, thinking modes).
- **Config push model** — on boot the dashboard pushes persisted preprocessing settings to the server (`preprocessingStore.pushSettingsToServer()`), so server-side effective config always matches what the UI shows.
- **Everything is inspectable** — the debug store records API/socket events; toasts surface operational outcomes; DLQ and health are first-class UI, not afterthoughts.

## Boot wiring (`App.vue`)

1. Theme initialised (`themeStore.initTheme()`), model catalogue fetched.
2. Preprocessing overrides pushed to the server.
3. Socket connection ensured (`socketStore.ensureSocketConnection()`) with callbacks wired to the debug + messages stores via `createSocketProvider`.
4. DLQ counter polled every 30 s.
5. Global UI mounted: `ToastContainer`, `PopoutPreview`.

## Internationalisation

UI copy is translated via **vue-i18n** (`src/i18n/`): typed message catalogs per locale (`src/i18n/locales/`), a `use-locale` composable, and a `LanguageSelector` in the app header. Locale choice is persisted and applied at runtime without a reload.

## Environment

| Variable            | Meaning                                                           |
| ------------------- | ----------------------------------------------------------------- |
| `VITE_API_URL`      | REST base (default dev proxy `/api`)                              |
| `VITE_SOCKET_URL`   | Socket.IO endpoint (`http://localhost:3000`)                      |
| `VITE_PROXY_TARGET` | Vite dev-server proxy target (`http://server:3000` in containers) |

## Related pages

- **2.1** — component/store architecture and conventions
- **2.2** — the chat experience in depth
- **2.3** — theming and color identity