diff --git a/README.md b/README.md index 43fddcf..47bd553 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,43 @@ JIC is a self-contained, LLM-powered conversational search engine that runs enti ## Interface -A single-page, fully-offline UI on the [Companion Intelligence design system](https://github.com/companionintelligence/CI-Common/tree/main/style) — CI teal accent, self-hosted fonts (no CDN), light + dark themes. +A single-page, fully-offline UI on the [Companion Intelligence design system](https://github.com/companionintelligence/CI-Common/tree/main/style) — CI teal accent (`--primary` `#0f717a` / `#abd4d8`), self-hosted fonts (no CDN), and a light + dark theme toggle persisted to `localStorage`. The whole front end is dependency-free vanilla JS in [`public/`](public/) (`index.html`, `app.js`, `style.css`); it talks to the C++ server over three endpoints — `GET /status`, `GET /api/library`, `POST /query`. + +Every screen below is a real headless render of `public/index.html` captured in **both themes**. Screens marked _(needs backend)_ are driven by the native `jic-server` responses (`/status`, `/api/library`, `/query`); their captures use representative response payloads so the genuine client render path is exercised — the layout, tokens, and formatting are real, the document counts and answer text are illustrative. + +### Welcome · empty state + +First load, no conversation yet: the brand hero, suggested-question chips, and the system/library panels. This is exactly what renders before any backend responds — the status pill reads "Server unreachable" until `jic-server` is up. + +| Dark | Light | +| --- | --- | +| ![Welcome screen, dark theme](docs/ui/justincase-dark.png) | ![Welcome screen, light theme](docs/ui/justincase-light.png) | + +### Conversation · grounded answer with citations _(needs backend)_ + +A question answered from the field library: the user bubble, the markdown-formatted grounded answer, the expandable **Sources** accordion with per-document match scores, and the sidebar showing live system status (engine online, index size, model, uptime) and the category-grouped document library. + +| Dark | Light | +| --- | --- | +| ![Grounded answer with sources, dark theme](docs/ui/justincase-conversation-dark.png) | ![Grounded answer with sources, light theme](docs/ui/justincase-conversation-light.png) | + +### Degraded · language model missing _(needs backend)_ + +Graceful degradation when the GGUF models aren't present. The warning banner explains how to fix it, the status pill reads "LLM missing", and the engine shows "degraded" — but the library stays browsable and `/query` answers `503` rather than erroring. This is the `llm_loaded: false` branch of `/status`. | Dark | Light | | --- | --- | -| ![Just In Case — dark theme](docs/ui/justincase-dark.png) | ![Just In Case — light theme](docs/ui/justincase-light.png) | +| ![LLM-missing degraded state, dark theme](docs/ui/justincase-degraded-dark.png) | ![LLM-missing degraded state, light theme](docs/ui/justincase-degraded-light.png) | + +### Mobile · library drawer _(needs backend)_ + +Narrow-viewport layout (≤ 920 px): the field library collapses into an off-canvas drawer toggled from the top bar, sliding in over a dimmed backdrop. + +| Dark | Light | +| --- | --- | +| ![Mobile library drawer, dark theme](docs/ui/justincase-mobile-dark.png) | ![Mobile library drawer, light theme](docs/ui/justincase-mobile-light.png) | + +> The theme toggle, suggested-question chips, sidebar drawer, and welcome/empty state render with no backend — they are pure client-side UI. The populated system status, indexed document library, grounded answers, and citations require the native `jic-server` (C++ + llama.cpp); the captures above exercise the real render path with representative server payloads. Token/theme conformance is enforced in CI by [`scripts/lint-canon.mjs`](scripts/lint-canon.mjs) (the canon lint gate), so the teal `--primary` and dark/light contracts stay honest. ## Why @@ -173,20 +205,6 @@ CI runs all of the above plus a Playwright screenshot gate before publishing the --- -## Screenshots - -UI theme matches the [ci.computer](https://ci.computer) brand — teal-black base, mint accent, Abel + Source Code Pro (bundled, offline). - -| Dark (default) | Light | -|---|---| -| ![Dark welcome screen with field library](docs/images/ui-dark.png) | ![Light theme](docs/images/ui-light.png) | - -| Grounded answer with citations | Mobile · library drawer | -|---|---| -| ![Answer with sources accordion](docs/images/ui-answer.png) | ![Mobile drawer](docs/images/ui-mobile.png) | - ---- - ## Contributing Work in progress — contributions welcome. See the [Discord](https://discord.gg/companion) for discussion. Content additions to [sources.yaml](sources.yaml) must be public-domain or explicitly redistributable, with the license recorded — see [docs/1400-sources.md](docs/1400-sources.md) for the research backlog (Project NOMAD, PrepperDisk, Kiwix and friends). diff --git a/docs/images/ui-answer.png b/docs/images/ui-answer.png deleted file mode 100644 index 9a7dd17..0000000 Binary files a/docs/images/ui-answer.png and /dev/null differ diff --git a/docs/images/ui-dark.png b/docs/images/ui-dark.png deleted file mode 100644 index ce5c06f..0000000 Binary files a/docs/images/ui-dark.png and /dev/null differ diff --git a/docs/images/ui-light.png b/docs/images/ui-light.png deleted file mode 100644 index 071c06f..0000000 Binary files a/docs/images/ui-light.png and /dev/null differ diff --git a/docs/images/ui-mobile.png b/docs/images/ui-mobile.png deleted file mode 100644 index a360935..0000000 Binary files a/docs/images/ui-mobile.png and /dev/null differ diff --git a/docs/ui/justincase-conversation-dark.png b/docs/ui/justincase-conversation-dark.png new file mode 100644 index 0000000..1dbb9aa Binary files /dev/null and b/docs/ui/justincase-conversation-dark.png differ diff --git a/docs/ui/justincase-conversation-light.png b/docs/ui/justincase-conversation-light.png new file mode 100644 index 0000000..008cf7d Binary files /dev/null and b/docs/ui/justincase-conversation-light.png differ diff --git a/docs/ui/justincase-dark.png b/docs/ui/justincase-dark.png index e86968b..547f8e9 100644 Binary files a/docs/ui/justincase-dark.png and b/docs/ui/justincase-dark.png differ diff --git a/docs/ui/justincase-degraded-dark.png b/docs/ui/justincase-degraded-dark.png new file mode 100644 index 0000000..645c5e6 Binary files /dev/null and b/docs/ui/justincase-degraded-dark.png differ diff --git a/docs/ui/justincase-degraded-light.png b/docs/ui/justincase-degraded-light.png new file mode 100644 index 0000000..af092ca Binary files /dev/null and b/docs/ui/justincase-degraded-light.png differ diff --git a/docs/ui/justincase-light.png b/docs/ui/justincase-light.png index 927fd79..c0837dd 100644 Binary files a/docs/ui/justincase-light.png and b/docs/ui/justincase-light.png differ diff --git a/docs/ui/justincase-mobile-dark.png b/docs/ui/justincase-mobile-dark.png new file mode 100644 index 0000000..42bd26a Binary files /dev/null and b/docs/ui/justincase-mobile-dark.png differ diff --git a/docs/ui/justincase-mobile-light.png b/docs/ui/justincase-mobile-light.png new file mode 100644 index 0000000..4f4c321 Binary files /dev/null and b/docs/ui/justincase-mobile-light.png differ diff --git a/public/style.css b/public/style.css index 3336e45..700b308 100644 --- a/public/style.css +++ b/public/style.css @@ -46,6 +46,40 @@ --radius-lg: 14px; --mono: 'Source Code Pro', ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: 'Abel', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + + /* CI enriched palette v0.2.0 — brand teal ramp + accent hues + radius scale (mode-independent) */ + --teal-50: #eef7f8; + --teal-100: #d3e9ec; + --teal-200: #abd4d8; + --teal-300: #7fbcc2; + --teal-400: #4c9aa3; + --teal-500: #1c8791; + --teal-600: #0f717a; + --teal-700: #0d5f67; + --teal-800: #0e4a52; + --teal-900: #0a222e; + --teal-950: #041620; + --aqua: #00a9a7; + --aqua-light: #72ddd4; + --mint: #58ebbf; + --teal-accent: #2c676d; + --teal-mid: #409b9b; + --radius-sm: calc(var(--radius, 0.625rem) - 4px); + --radius-md: calc(var(--radius, 0.625rem) - 2px); + --radius-xl: calc(var(--radius, 0.625rem) + 4px); + --radius-2xl: calc(var(--radius, 0.625rem) + 10px); + + /* CI enriched palette v0.2.0 — semantic status + gradients + elevation (dark) */ + --success: #4ade80; + --success-foreground: #052e16; + --warning: #fbbf24; + --warning-foreground: #422006; + --info: #38bdf8; + --info-foreground: #082f49; + --gradient-aurora: radial-gradient(120% 90% at 50% -10%, rgba(64, 155, 155, 0.28), transparent 60%); + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.45); } [data-theme="light"] { @@ -65,6 +99,20 @@ --err: #c93c40; --user-bubble: #dcebe8; --shadow: 0 8px 24px rgba(4, 24, 26, 0.10); + + /* CI enriched palette v0.2.0 — semantic status + gradients + elevation (light) */ + --success: #16a34a; + --success-foreground: #ffffff; + --warning: #d97706; + --warning-foreground: #ffffff; + --info: #0284c7; + --info-foreground: #ffffff; + --gradient-brand: linear-gradient(135deg, #0f717a, #00a9a7); + --gradient-hero: linear-gradient(135deg, #e8f9f8, #abd4d8); + --gradient-aurora: radial-gradient(120% 90% at 50% -10%, rgba(80, 150, 150, 0.10), transparent 60%); + --shadow-sm: 0 1px 2px rgba(15, 113, 122, 0.08); + --shadow-md: 0 4px 12px rgba(15, 113, 122, 0.10); + --shadow-lg: 0 12px 30px rgba(15, 113, 122, 0.14); } * { box-sizing: border-box; }