llm-tuner 0.1.0

package/src/web/public/index.html

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>LLM Tuner</title>
+<link rel="icon" type="image/png" href="icon.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="shell">
+  <aside class="rail">
+    <div class="brand">
+      <img src="icon.png" class="brand-mark" alt="LLM Tuner">
+      <div>
+        <strong>LLM Tuner</strong>
+        <small data-i18n="web.tagline">load your model with the fastest configuration</small>
+      </div>
+    </div>
+    <button id="settings-open" class="settings-trigger" type="button" aria-haspopup="dialog" aria-expanded="false">
+      <span class="settings-trigger-icon">⚙</span>
+      <span data-i18n="web.settings">Settings</span>
+    </button>
+    <ol class="steps" id="steps">
+      <li data-step="engine" class="active" data-i18n="web.stepEngine">Engine</li>
+      <li data-step="model" data-i18n="web.modelAndContext">Model and context</li>
+      <li data-step="load" data-i18n="web.stepLoad">Load</li>
+    </ol>
+    <div class="hw-mini" id="hw-mini" data-i18n="web.detectingHw">Detecting hardware…</div>
+    <p class="rail-note" data-i18n="web.railNote">The configuration is decided from your hardware, the model metadata and real measurements. The result is saved as a preset: it is only measured again if you change the context or the load profile.</p>
+  </aside>
+
+  <main>
+    <section id="sec-engine" class="panel">
+      <header><h2 data-i18n="web.whichEngine">Which engine do you want to use?</h2></header>
+      <div id="engines" class="engines"></div>
+      <p class="muted small" id="engine-reason"></p>
+      <div id="install" hidden>
+        <label for="install-plan" data-i18n="web.installMethod">Install method</label>
+        <div class="row wrap">
+          <select id="install-plan"></select>
+          <button id="install-btn" class="btn primary" type="button" data-i18n="web.install">Install</button>
+        </div>
+        <pre id="install-log" class="log" hidden></pre>
+      </div>
+    </section>
+
+    <section id="sec-model" class="panel" hidden>
+      <header><h2 data-i18n="web.modelAndContext">Model and context</h2><span class="pill" id="preset-pill" hidden></span></header>
+      <div class="row wrap">
+        <div class="field grow">
+          <label for="model" data-i18n="web.model">Model</label>
+          <select id="model"></select>
+        </div>
+        <div class="field">
+          <label for="ctx" data-i18n="web.context">Context (tokens)</label>
+          <input id="ctx" type="number" min="512" step="1024" value="16384">
+        </div>
+      </div>
+      <div id="ctx-chips" class="chips"></div>
+      <div class="field profile-field">
+        <span id="profile-label" class="field-label" data-i18n="web.profile">Load profile</span>
+        <div id="profile-options" class="profile-options" role="radiogroup" aria-labelledby="profile-label" aria-describedby="profile-detail"></div>
+        <div id="profile-detail" class="profile-detail small" aria-live="polite"></div>
+      </div>
+      <div id="model-meta" class="meta muted small"></div>
+      <div id="gpus" class="gpus"></div>
+      <div class="row wrap actions">
+        <label class="check"><input type="checkbox" id="force"> <span data-i18n="web.force">Measure again even if a preset exists</span></label>
+        <button id="load-btn" class="btn primary" type="button" disabled data-i18n="web.loadButton">Load</button>
+      </div>
+    </section>
+
+    <section id="sec-load" class="panel" hidden>
+      <header><h2 id="load-title" data-i18n="web.loading">Loading</h2><span class="pill" id="load-status" data-i18n="web.inProgress">in progress</span></header>
+      <div id="bench" hidden>
+        <p class="muted small" data-i18n="web.benchIntro">There is no preset for this context and profile: several configurations are tested on your hardware. It takes a few minutes and only happens once.</p>
+        <div class="table-wrap">
+          <table id="results">
+            <thead><tr><th data-i18n="web.colConfig">Configuration</th><th data-i18n="web.colGpuLayers">GPU layers</th><th class="num" data-i18n="web.colEstimated">Estimated</th><th class="num" data-i18n="web.colShort">Short</th><th class="num" data-i18n="web.colDeep">With context</th><th class="num">CPU</th><th data-i18n="web.colVram">Peak VRAM</th></tr></thead>
+            <tbody></tbody>
+          </table>
+        </div>
+      </div>
+      <pre id="load-log" class="log"></pre>
+      <div id="load-result" class="result"></div>
+      <div id="chat-box" class="chat-box" hidden>
+        <div class="chat-header">
+          <div>
+            <strong data-i18n="web.chatTitle">Test connection</strong>
+            <small class="muted" data-i18n="web.chatSubtitle">Send a prompt to test model response</small>
+          </div>
+        </div>
+        <div id="chat-messages" class="chat-messages"></div>
+        <form id="chat-form" class="chat-form">
+          <input id="chat-input" type="text" autocomplete="off" data-i18n-placeholder="web.chatPlaceholder" placeholder="Type a prompt to test…">
+          <button id="chat-send" class="btn primary" type="submit" data-i18n="web.chatSend">Send</button>
+        </form>
+      </div>
+    </section>
+  </main>
+</div>
+<div id="settings-backdrop" class="drawer-backdrop" hidden></div>
+<aside id="settings-drawer" class="drawer" role="dialog" aria-modal="true" aria-labelledby="settings-title" hidden>
+  <div class="drawer-header">
+    <h3 id="settings-title" data-i18n="web.settings">Settings</h3>
+    <button id="settings-close" class="drawer-close" type="button" aria-label="Close">✕</button>
+  </div>
+  <div class="drawer-body">
+    <div class="drawer-field lang-switch">
+      <label for="lang" data-i18n="web.language">Language</label>
+      <select id="lang">
+        <option value="en">English</option>
+        <option value="es">Español</option>
+      </select>
+    </div>
+    <div class="drawer-field theme-switch">
+      <label for="theme" data-i18n="web.theme">Theme</label>
+      <select id="theme">
+        <option value="system" data-i18n="web.themeSystem">System</option>
+        <option value="light" data-i18n="web.themeLight">Light</option>
+        <option value="dark" data-i18n="web.themeDark">Dark</option>
+      </select>
+    </div>
+  </div>
+</aside>
+<script src="app.js" type="module"></script>
+</body>
+</html>

package/src/web/public/profile.js

@@ -0,0 +1,100 @@
+// View-model of the load profile selector. Pure: no DOM and no imports, so the browser and the Node tests load the same file.
+// `plan` is the `profiles` object of POST /api/plan (a `Tuner.profilePlan()` result), or null while there is none;
+// `t(key, params)` translates a catalog key.
+
+export const PROFILE_IDS = Object.freeze(['speed', 'balanced', 'quality']);
+export const DEFAULT_PROFILE = 'balanced';
+
+// Reasons of a `variant-picked` event that mean the profile could not be honoured: the core flags them with a `profile-fallback` event right after.
+const FALLBACK_REASONS = new Set(['profile.variant.noFullGpu']);
+
+/** Profile to preselect: the one stored in the settings, else the recommended one, else balanced. */
+export function initialProfile(settingsProfile, plan) {
+  return settingsProfile ?? plan?.recommended?.profile ?? DEFAULT_PROFILE;
+}
+
+/** The options of the selector as `{ id, name, description, recommended }`; none is recommended without a plan. */
+export function profileOptions(plan, t, ids = PROFILE_IDS) {
+  return ids.map((id) => ({
+    id,
+    name: t(`profile.name.${id}`),
+    description: t(`profile.desc.${id}`),
+    recommended: id === plan?.recommended?.profile,
+  }));
+}
+
+/**
+ * Lines under the selector for the chosen profile, as `{ kind, level, text }`: what will load and why (`detail`),
+ * why a profile is recommended (`recommend`), a warning that the preview is conservative while VRAM is in use (`busy`),
+ * one estimate per heavier variant that would fit (`hint`) and the advice to select another variant in the engine (`switch`).
+ * Empty without a plan.
+ */
+export function profileDetailLines(plan, profile, t, { engineName, formatBytes }) {
+  const info = plan?.profiles?.[profile];
+  if (!info) return [];
+  // What the engine will load: the selected variant when it cannot switch to the profile's pick.
+  const loaded = plan.variants.find((v) => v.key === info.loads);
+  const detail = t('web.profileDetail', { quant: loaded?.quant ?? info.loads, kv: info.kvTypes.join(', ') });
+  const reason = t(info.reasonCode, { quant: info.quant ?? '?', key: info.variant });
+  const lines = [{ kind: 'detail', level: info.fallback ? 'warn' : 'note', text: `${detail} ${reason}` }];
+
+  if (plan.recommended?.reasonCode) {
+    lines.push({ kind: 'recommend', level: 'note', text: t(plan.recommended.reasonCode) });
+  }
+  // The plan was made with the VRAM that is free now; a real load frees it first.
+  if (plan.vramBusy) {
+    lines.push({ kind: 'busy', level: 'warn', text: t('profile.preview.vramBusy') });
+  }
+  for (const hint of plan.hints ?? []) {
+    lines.push({ kind: 'hint', level: 'note', text: t('web.profileHint', { quant: hint.quant, size: formatBytes(hint.estimatedBytes) }) });
+  }
+  if (info.recommendSwitch) {
+    lines.push({ kind: 'switch', level: 'note', text: t('web.profileSwitch', { quant: info.quant ?? info.variant, engine: engineName }) });
+  }
+  return lines;
+}
+
+/**
+ * Lines to log for a `variant-picked` or `profile-fallback` progress event, as `{ text, level }` with level `note` or `warn`.
+ * `previous` is the progress event before it; without `engineName` the switch advice is left out.
+ */
+export function profileEventLines(event, t, { engineName = null, previous = null } = {}) {
+  const { variant } = event;
+  // Nothing to say without the variant; throwing here would break the progress handler of a running load.
+  if (!variant) return [];
+  const isFallback = event.type === 'profile-fallback';
+  const lines = [];
+
+  // A fallback that repeats the reason of the line before it is not logged again.
+  if (!(isFallback && event.reasonCode === previous?.reasonCode)) {
+    const level = isFallback || FALLBACK_REASONS.has(event.reasonCode) ? 'warn' : 'note';
+    lines.push({ text: t(event.reasonCode, { quant: variant.quant ?? '?', key: variant.key }), level });
+  }
+
+  // The engine cannot load the pick itself: tell the user which variant to select there.
+  if (event.type === 'variant-picked' && event.recommendSwitch && engineName) {
+    lines.push({ text: t('web.profileSwitch', { quant: variant.quant ?? variant.key, engine: engineName }), level: 'note' });
+  }
+
+  return lines;
+}
+
+/** Presets measured with a profile; an entry saved before profiles existed has none and counts as balanced. */
+export function presetsFor(presets, profile) {
+  return presets.filter((p) => (p.profile || DEFAULT_PROFILE) === profile);
+}
+
+/** The preset of a context and profile, or null. */
+export function presetFor(presets, ctx, profile) {
+  return presetsFor(presets, profile).find((p) => p.ctx === ctx) ?? null;
+}
+
+/** True when an answer requested for an engine and model still belongs to the selection; the context is ignored. */
+export function isCurrentModel(requested, current) {
+  return requested.engine === current.engine && requested.model === current.model;
+}
+
+/** True when a plan requested for an engine, model and context is still the plan of the selection. */
+export function isCurrentPlan(requested, current) {
+  return isCurrentModel(requested, current) && requested.ctx === current.ctx;
+}

package/src/web/public/style.css

@@ -0,0 +1,330 @@
+:root {
+  --bg: #f1f5f9;
+  --surface: #ffffff;
+  --ink: #0f172a;
+  --muted: #475569;
+  --line: #cbd5e1;
+  --accent: #0284c7;
+  --accent-ink: #ffffff;
+  --gpu: #0891b2;
+  --cpu: #94a3b8;
+  --ok: #16a34a;
+  --warn: #d97706;
+  --bad: #dc2626;
+  --code-bg: #f8fafc;
+  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #090e15;
+    --surface: #0f1722;
+    --ink: #e2e8f0;
+    --muted: #8b9bb0;
+    --line: #1e2c3d;
+    --accent: #00e5ff; /* electric cyan from logo */
+    --accent-ink: #05131d;
+    --gpu: #00e5ff;
+    --cpu: #3d4f63;
+    --ok: #34d399;
+    --warn: #fbbf24;
+    --bad: #f87171;
+    --code-bg: #0b121b;
+    color-scheme: dark;
+  }
+}
+:root[data-theme="dark"] {
+  --bg: #090e15;
+  --surface: #0f1722;
+  --ink: #e2e8f0;
+  --muted: #8b9bb0;
+  --line: #1e2c3d;
+  --accent: #00e5ff; /* electric cyan from logo */
+  --accent-ink: #05131d;
+  --gpu: #00e5ff;
+  --cpu: #3d4f63;
+  --ok: #34d399;
+  --warn: #fbbf24;
+  --bad: #f87171;
+  --code-bg: #0b121b;
+  color-scheme: dark;
+}
+:root[data-theme="light"] {
+  --bg: #f1f5f9;
+  --surface: #ffffff;
+  --ink: #0f172a;
+  --muted: #475569;
+  --line: #cbd5e1;
+  --accent: #0284c7;
+  --accent-ink: #ffffff;
+  --gpu: #0891b2;
+  --cpu: #94a3b8;
+  --ok: #16a34a;
+  --warn: #d97706;
+  --bad: #dc2626;
+  --code-bg: #f8fafc;
+  color-scheme: light;
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
+h2 { margin: 0; font-size: 1.05rem; font-weight: 600; text-wrap: balance; }
+.muted { color: var(--muted); }
+.small { font-size: .85rem; }
+
+.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
+.rail { padding: 24px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
+.brand { display: flex; gap: 12px; align-items: center; }
+.brand strong { display: block; font-size: 1.05rem; }
+.brand small { color: var(--muted); font-size: .78rem; }
+.brand-mark { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex-shrink: 0; display: block; }
+.steps li { counter-increment: s; display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; color: var(--muted); font-size: .92rem; }
+.steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 500 .75rem var(--mono); border: 1px solid var(--line); }
+.steps li.done::before { background: var(--gpu); border-color: var(--gpu); color: var(--surface); content: '✓'; }
+.steps li.active { color: var(--ink); background: var(--surface); }
+.steps li.active::before { border-color: var(--accent); color: var(--accent); }
+.rail-note { margin-top: auto; font-size: .8rem; color: var(--muted); }
+
+main { padding: 24px clamp(16px, 3vw, 40px); display: grid; gap: 18px; align-content: start; max-width: 1100px; }
+.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: grid; gap: 16px; }
+.panel > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+.pill { font: 500 .75rem var(--mono); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
+.pill.ok { color: var(--ok); border-color: currentColor; }
+.pill.warn { color: var(--warn); border-color: currentColor; }
+.pill.bad { color: var(--bad); border-color: currentColor; }
+
+.hw-grid { display: flex; flex-wrap: wrap; gap: 12px 40px; }
+.kv span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
+.kv b { font-weight: 500; }
+.gpus { display: grid; gap: 12px; }
+.gpu { display: grid; gap: 6px; }
+.gpu-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: .9rem; }
+.gpu-head .tags { display: flex; gap: 6px; flex-wrap: wrap; }
+.tag { font: .72rem var(--mono); padding: 1px 7px; border-radius: 4px; background: var(--code-bg); color: var(--muted); }
+.tag.prio { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
+.meter { height: 12px; border-radius: 3px; background: var(--code-bg); border: 1px solid var(--line); overflow: hidden; display: flex; }
+.meter i { display: block; height: 100%; }
+.meter .used { background: var(--cpu); }
+.meter .model { background: var(--gpu); }
+.meter .kv { background: color-mix(in srgb, var(--gpu) 55%, var(--accent)); }
+.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
+.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
+
+.engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+.engine { text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 14px; display: grid; gap: 4px; cursor: pointer; color: var(--ink); font: inherit; }
+.engine:hover { border-color: var(--muted); }
+.engine.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.engine b { font-size: 1rem; }
+.engine small { color: var(--muted); }
+
+.row { display: flex; gap: 12px; align-items: end; }
+.row.wrap { flex-wrap: wrap; }
+.field { display: grid; gap: 4px; }
+.field.grow { flex: 1 1 280px; }
+label { font-size: .78rem; color: var(--muted); }
+select, input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0; max-width: 100%; }
+input[type=number] { width: 150px; font-family: var(--mono); }
+select:focus-visible, input:focus-visible, .btn:focus-visible, .engine:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.btn { font: 500 .92rem var(--font); padding: 9px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
+.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+
+.meta { font-size: .88rem; }
+.maxctx { display: flex; gap: 10px; flex-wrap: wrap; }
+.maxctx div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; min-width: 150px; }
+.maxctx span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.maxctx b { font: 500 1.1rem var(--mono); font-variant-numeric: tabular-nums; }
+.placement { display: grid; gap: 10px; }
+
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: .88rem; }
+th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+th { font-weight: 500; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
+td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
+tr.best td { background: color-mix(in srgb, var(--gpu) 10%, transparent); }
+tr.fail td { color: var(--muted); }
+td .err { color: var(--bad); white-space: normal; }
+
+.log { margin: 0; max-height: 180px; overflow: auto; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: .78rem/1.5 var(--mono); color: var(--muted); white-space: pre-wrap; }
+.best { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; }
+.best .big { font: 500 2rem var(--mono); color: var(--gpu); font-variant-numeric: tabular-nums; }
+.preview { font-size: .88rem; display: grid; gap: 6px; }
+.preview code, .preview pre { font-family: var(--mono); font-size: .8rem; background: var(--code-bg); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
+.preview pre { padding: 10px; margin: 0; white-space: pre-wrap; }
+.notice { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); font-size: .88rem; }
+.notice.warn { border-color: var(--warn); }
+.notice.ok { border-color: var(--ok); }
+
+@media (max-width: 760px) {
+  .shell { grid-template-columns: 1fr; }
+  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); gap: 14px; padding: 16px; }
+  .steps { grid-auto-flow: column; overflow-x: auto; }
+  .steps li { font-size: 0; gap: 0; }
+  .steps li.active { font-size: .85rem; gap: 8px; }
+  .rail-note { display: none; }
+  main { padding: 16px; }
+}
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
+
+
+/* Load flow additions */
+.hw-mini { display: grid; gap: 2px; font: .76rem/1.45 var(--mono); color: var(--muted); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip { font: 500 .8rem var(--mono); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
+.chip.fits { color: var(--ink); }
+.chip.saved { color: var(--gpu); border-color: var(--gpu); }
+.chip.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.check { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); }
+.result { display: grid; gap: 10px; }
+.result code { font: .8rem var(--mono); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
+.notice pre { margin: 8px 0 0; font: .8rem var(--mono); white-space: pre-wrap; }
+@media (max-width: 760px) { .hw-mini { display: none; } }
+
+/* Load profile selector: a radio group of three cards, in the visual language of the engine cards */
+.field-label { font-size: .78rem; color: var(--muted); }
+.profile-field { gap: 6px; }
+.profile-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
+.profile-option { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: .92rem; cursor: pointer; }
+.profile-option:hover { border-color: var(--muted); }
+/* Selected: the checked radio plus a thicker border, so the state does not rely on colour alone. */
+.profile-option.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.profile-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
+.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.profile-head input { margin: 0; accent-color: var(--accent); cursor: pointer; }
+.profile-head b { font-weight: 600; }
+.profile-option small { color: var(--muted); font-size: .8rem; }
+.profile-detail { display: grid; gap: 2px; color: var(--muted); }
+.profile-detail .warn, .log .warn { color: var(--warn); }
+.profile-detail .warn::before, .log .warn::before { content: '⚠ '; }
+.actions { justify-content: space-between; align-items: center; }
+/* Settings trigger & drawer */
+.settings-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--ink);
+  font: 500 .88rem var(--font);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: border-color .15s ease, background-color .15s ease;
+}
+.settings-trigger:hover {
+  border-color: var(--accent);
+  background: var(--code-bg);
+}
+.settings-trigger-icon {
+  font-size: 1.05rem;
+  line-height: 1;
+}
+
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s ease;
+  z-index: 900;
+}
+.drawer-backdrop.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.drawer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  max-width: 85vw;
+  background: var(--surface);
+  border-right: 1px solid var(--line);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(-100%);
+  transition: transform .25s ease;
+}
+.drawer.open {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.drawer-header h3 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+.drawer-close {
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  font-size: 1.1rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 1;
+}
+.drawer-close:hover {
+  color: var(--ink);
+  background: var(--code-bg);
+}
+.drawer-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow-y: auto;
+}
+.drawer-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.drawer-field label {
+  font-size: .82rem;
+  font-weight: 500;
+  color: var(--muted);
+}
+.drawer-field select {
+  width: 100%;
+}
+.lang-switch, .theme-switch {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Test chat box */
+.chat-box { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
+.chat-header { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); display: flex; justify-content: space-between; align-items: center; }
+.chat-header strong { display: block; font-size: .92rem; }
+.chat-header small { font-size: .78rem; }
+.chat-messages { padding: 12px 14px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
+.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 8px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
+.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 2px; }
+.chat-msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 2px; }
+.chat-msg.error { align-self: flex-start; background: color-mix(in srgb, var(--bad) 15%, transparent); border: 1px solid var(--bad); color: var(--bad); }
+.chat-msg.loading { align-self: flex-start; color: var(--muted); font-style: italic; background: transparent; padding: 4px 8px; }
+.chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
+.chat-form input { flex: 1; min-width: 0; }
+.chat-form button { flex-shrink: 0; }
+