ltcai 3.3.0 → 3.4.0

package/static/v3/js/views/agents.js

@@ -3,11 +3,18 @@
  * Reads the AgentRuntime boundary (/agents/api/runtime/status): the canonical
  * role roster enriched with real run counts, the live recent-runs ledger, and
  * runtime health. Reports unavailable state when the runtime is unreachable.
+ * Also drives runs directly: a goal + role selection → POST /agents/api/run →
+ * a real timeline (logs), final status/output, queue/status, and stop.
  * ========================================================================== */
 
+import { timeAgo } from "../core/dom.js";
+
+const DEFAULT_ROLES = ["planner", "executor", "reviewer"];
+
 export async function render(ctx) {
   const { h, icon, c } = ctx;
 
+  const runHost = h("div", c.loading({ lines: 3, block: true }));
   const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
   const registryHost = h("div", c.loading({ lines: 3, block: true }));
   const rosterHost = h("div", c.loading({ lines: 2, block: true }));
@@ -15,6 +22,7 @@ export async function render(ctx) {
   const registrySrc = h("span", c.sourceBadge("pending"));
   const rosterSrc = h("span", c.sourceBadge("pending"));
   const runsSrc = h("span", c.sourceBadge("pending"));
+  const runSrc = h("span", c.sourceBadge("pending"));
   const healthSlot = h("span", c.sourceBadge("pending"));
 
   const root = h("div.lt3-stack-6",
@@ -24,6 +32,17 @@ export async function render(ctx) {
       sub: "The multi-agent runtime: who plans, who builds, who reviews — and how work hands off between them. Every run stays local to this workspace.",
       actions: [healthSlot],
     }),
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div",
+          h("div.lt3-eyebrow", "Run"),
+          h("h3.lt3-panel__title", "Run agents"),
+          h("p.lt3-panel__sub", "Give the pipeline a goal. Planner → executor → reviewer run synchronously and locally — no model required."),
+        ),
+        runSrc,
+      ),
+      children: runHost,
+    }),
     statHost,
     h("section",
       c.sectionHead("Agent Registry", registrySrc),
@@ -45,75 +64,298 @@ export async function render(ctx) {
     }),
   );
 
-  hydrate(ctx, { statHost, rosterHost, runsHost, rosterSrc, runsSrc, healthSlot });
+  // Shared run-console handles refresh + recent-runs + queue so a run can
+  // re-hydrate counts and click-through to a run's logs.
+  const runConsole = makeRunConsole(ctx, { runHost, runSrc, statHost, runsHost, runsSrc, healthSlot, rosterHost, rosterSrc });
+  runConsole.hydrate();
   loadRegistry(ctx, { registryHost, registrySrc });
   return root;
 }
 
-async function hydrate(ctx, hosts) {
+/* ── Run console ─────────────────────────────────────────────────────────────
+ * Owns the Run panel (goal + role chips + Run button + logs), the stat/queue
+ * row, the recent-runs ledger, and the cross-links between them. A single
+ * refresh() re-reads the runtime so counts and recent runs stay honest.
+ * ========================================================================== */
+function makeRunConsole(ctx, hosts) {
   const { h, icon, c } = ctx;
-  const { statHost, rosterHost, runsHost, rosterSrc, runsSrc, healthSlot } = hosts;
-
-  const res = await ctx.api.agentRuntime();
-  const data = res.data || {};
-  const agents = normalize(data.agents);
-  const runtime = data.runtime || {};
-  const health = data.health || { status: "unknown" };
-  const runs = Array.isArray(data.runs) ? data.runs : [];
-  const byId = new Map(agents.map((a) => [a.id, a.name]));
-
-  rosterSrc.replaceChildren(c.sourceBadge(res.source));
-  runsSrc.replaceChildren(c.sourceBadge(res.source));
-  healthSlot.replaceChildren(
-    c.statePill(health.status === "ok" ? "ready" : health.status === "degraded" ? "warn" : "idle"),
-  );
+  const { runHost, runSrc, statHost, runsHost, runsSrc, healthSlot, rosterHost, rosterSrc } = hosts;
 
-  // ── Stat row (real runtime counts) ────────────────────────────────────
-  const available = agents.filter((a) => isAvailable(a.state)).length;
-  const totalRuns = Number(runtime.total_runs) || runs.length;
-  const handoffs = agents.reduce((sum, a) => sum + a.handoffs.length, 0);
-  statHost.replaceChildren(
-    c.stat({ label: "Agents", value: c.fmtNum(agents.length), icon: "robot" }),
-    c.stat({ label: "Available", value: c.fmtNum(available), icon: "circle-check" }),
-    c.stat({ label: "Total runs", value: c.fmtNum(totalRuns), icon: "player-play" }),
-    c.stat({ label: "Handoffs", value: c.fmtNum(handoffs), icon: "arrows-exchange" }),
-  );
+  // Run-panel controls (built once; logs region replaced per run).
+  const goalInput = h("textarea.lt3-textarea", {
+    placeholder: "What should the agents accomplish?",
+    "aria-label": "Agent goal",
+    rows: 3,
+  });
+  const logsHost = h("div");
+  const runBtn = h("button.lt3-btn.lt3-btn--primary", { on: { click: () => trigger() } }, c.icon("player-play"), "Run agents");
+
+  // Role chips — defaults seeded; replaced once runtime defaults arrive.
+  let roleState = DEFAULT_ROLES.map((r) => ({ role: r, on: true }));
+  const rolesHost = h("div.lt3-cluster");
+  renderRoleChips();
 
-  // ── Roster grid ───────────────────────────────────────────────────────
-  if (!agents.length) {
-    rosterHost.replaceChildren(c.emptyState({
-      icon: "robot-off",
-      title: "Runtime unavailable",
-      body: "The agent runtime did not respond. Start the local server to see the roster.",
-    }));
-  } else {
-    rosterHost.replaceChildren(
-      h("div.lt3-grid-auto", agents.map((a) => agentCard(ctx, a, byId))),
+  function renderRoleChips() {
+    rolesHost.replaceChildren(
+      ...roleState.map((entry, i) => h("button.lt3-chip", {
+        type: "button",
+        dataset: { active: String(entry.on) },
+        "aria-pressed": String(entry.on),
+        on: { click: () => { roleState[i].on = !roleState[i].on; renderRoleChips(); } },
+      }, c.icon(entry.on ? "check" : "circle"), entry.role)),
     );
   }
 
-  // ── Recent runs ledger (REAL runs from the runtime) ───────────────────
-  const rows = runs.map((r) => ({
-    agent: byId.get(r.agent_id) || shortId(r.agent_id),
-    status: mapStatus(r.status),
-    time: fmtTime(r.created_at || r.completed_at),
-    note: runNote(r),
-  }));
-  runsHost.replaceChildren(
-    c.table(
-      [
-        { key: "agent", label: "Agent", render: (r) => h("div.lt3-row-2",
-          h("span.lt3-avatar", { style: { width: "26px", height: "26px" } }, icon("robot")),
-          h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, r.agent),
-        ) },
-        { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(r.status) },
-        { key: "time", label: "Started", width: "1%", render: (r) => h("span.lt3-faint", { style: { "white-space": "nowrap", "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-2xs)" } }, r.time) },
-        { key: "note", label: "Note", render: (r) => h("span.lt3-muted", r.note) },
-      ],
-      rows,
-      { empty: c.emptyState({ icon: "history-off", title: "No runs yet", body: "Agent runs recorded by the runtime will appear here." }) },
+  function selectedRoles() {
+    return roleState.filter((e) => e.on).map((e) => e.role);
+  }
+
+  runHost.replaceChildren(
+    h("div.lt3-stack-4",
+      h("div.lt3-field",
+        h("label", "Goal"),
+        goalInput,
+      ),
+      h("div.lt3-field",
+        h("label", "Roles"),
+        rolesHost,
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Toggle which roles take part. Leave all on for the full pipeline."),
+      ),
+      h("div.lt3-row-2", runBtn),
+      logsHost,
     ),
   );
+
+  /* ── Trigger a run ─────────────────────────────────────────────────────── */
+  async function trigger() {
+    const goal = goalInput.value.trim();
+    if (!goal) { ctx.toast("Enter a goal for the agents", "info"); return; }
+    const roles = selectedRoles();
+    if (!roles.length) { ctx.toast("Select at least one role", "info"); return; }
+
+    runBtn.disabled = true;
+    runBtn.replaceChildren(c.icon("loader-2"), "Running…");
+    runSrc.replaceChildren(c.sourceBadge("pending"));
+    logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.loading({ lines: 4 })));
+
+    const res = await ctx.api.runAgent(goal, roles);
+    runBtn.disabled = false;
+    runBtn.replaceChildren(c.icon("player-play"), "Run agents");
+
+    const data = (res && res.data) || {};
+    if (!res || !res.ok) {
+      const msg = data.detail || data.error || (res && res.error) || "Agent run unavailable";
+      runSrc.replaceChildren(c.sourceBadge("unavailable"));
+      logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } },
+        c.banner(String(msg), "err"),
+      ));
+      ctx.toast("Run failed", "err");
+      return;
+    }
+
+    runSrc.replaceChildren(c.sourceBadge("live"));
+    const run = data.run || {};
+    const result = data.result || {};
+    logsHost.replaceChildren(renderRunResult(run, result));
+    ctx.toast(`Run ${mapStatus(result.status) === "failed" ? "completed with failure" : "complete"}`, mapStatus(result.status) === "failed" ? "warn" : "ok");
+
+    // Refresh runtime so queue/total/recent-runs reflect this run.
+    hydrate();
+  }
+
+  /* ── Render a run's result as logs + summary ───────────────────────────── */
+  function renderRunResult(run, result) {
+    const runId = run.id || run.run_id || result.run_id || result.id;
+    const status = mapStatus(result.status || run.status);
+    const timeline = Array.isArray(result.timeline) ? result.timeline : [];
+    const output = result.output != null ? String(result.output) : "";
+    const retries = Number(result.retries) || 0;
+    const active = isActiveStatus(result.status || run.status);
+
+    return h("div.lt3-stack-4", { style: { "margin-top": "var(--lt3-space-3)" } },
+      h("hr.lt3-divider"),
+      h("div.lt3-row", { style: { "justify-content": "space-between", "flex-wrap": "wrap", gap: "var(--lt3-space-2)" } },
+        h("div.lt3-row-2",
+          h("span.lt3-eyebrow", "Result"),
+          c.statePill(status),
+          retries ? c.pill(`${retries} ${retries === 1 ? "retry" : "retries"}`, "warn") : null,
+          runId ? h("span.lt3-faint", { style: { "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-2xs)" } }, shortId(runId)) : null,
+        ),
+        runId
+          ? h("button.lt3-btn.lt3-btn--danger.lt3-btn--sm", {
+              // The synchronous runtime finishes inline; Stop is offered but
+              // reports honestly (stopped:false + reason) when there's nothing
+              // left to interrupt.
+              title: active ? "Stop this run" : "This run has already finished",
+              on: { click: (e) => stopRun(runId, e.currentTarget) },
+            }, c.icon("player-stop"), "Stop")
+          : null,
+      ),
+      timeline.length
+        ? renderTimeline(timeline)
+        : h("p.lt3-faint", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, "No timeline entries were recorded for this run."),
+      output
+        ? h("div.lt3-stack-2",
+            h("div.lt3-eyebrow", icon("file-text"), "Output"),
+            h("pre.lt3-code", output),
+          )
+        : null,
+    );
+  }
+
+  /* ── Timeline → readable log list ──────────────────────────────────────── */
+  function renderTimeline(timeline) {
+    return h("div.lt3-stack-2",
+      h("div.lt3-eyebrow", icon("list-details"), "Logs"),
+      h("div.lt3-timeline",
+        timeline.map((entry) => {
+          const label = entry.event || entry.message || entry.step || "event";
+          const role = entry.role || entry.agent_id;
+          const status = entry.status;
+          const ts = entry.timestamp || entry.created_at || entry.time;
+          return h("div.lt3-timeline__item",
+            ts ? h("div.lt3-timeline__time", fmtTime(ts)) : null,
+            h("div.lt3-timeline__body",
+              h("div.lt3-row-2", { style: { "flex-wrap": "wrap" } },
+                role ? h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, shortId(role)) : null,
+                h("span", String(label).replace(/_/g, " ")),
+                status ? c.statePill(mapStatus(status)) : null,
+              ),
+              entry.detail || entry.note
+                ? h("div.lt3-muted", { style: { "font-size": "var(--lt3-text-xs)", "margin-top": "var(--lt3-space-1)" } }, String(entry.detail || entry.note))
+                : null,
+            ),
+          );
+        }),
+      ),
+    );
+  }
+
+  /* ── Stop an (active) run — honest about synchronous no-op ─────────────── */
+  async function stopRun(runId, btn) {
+    if (btn) { btn.disabled = true; btn.replaceChildren(c.icon("loader-2"), "Stopping…"); }
+    const res = await ctx.api.stopAgentRun(runId);
+    if (btn) { btn.disabled = false; btn.replaceChildren(c.icon("player-stop"), "Stop"); }
+    const data = (res && res.data) || {};
+    if (!res || !res.ok) {
+      ctx.toast(String(data.detail || data.error || "Stop unavailable"), "err");
+      return;
+    }
+    if (data.stopped === false || data.stopped == null) {
+      // The synchronous runtime cannot interrupt an already-finished run.
+      ctx.toast(String(data.reason || "Run already finished — nothing to stop"), "warn");
+    } else {
+      ctx.toast("Run stopped", "ok");
+    }
+    hydrate();
+  }
+
+  /* ── Load a recorded run's detail as logs ──────────────────────────────── */
+  async function openRun(runId) {
+    if (!runId) return;
+    logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.loading({ lines: 3 })));
+    const res = await ctx.api.agentRunDetail(runId);
+    const data = (res && res.data) || {};
+    if (!res || !res.ok) {
+      runSrc.replaceChildren(c.sourceBadge("unavailable"));
+      logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } },
+        c.banner(String(data.detail || data.error || "Run detail unavailable"), "err"),
+      ));
+      return;
+    }
+    runSrc.replaceChildren(c.sourceBadge("live"));
+    const run = data.run || data || {};
+    const result = data.result || data || {};
+    logsHost.replaceChildren(renderRunResult(run, result));
+  }
+
+  /* ── Refresh runtime → stats, queue, recent runs, roster, health ───────── */
+  async function hydrate() {
+    const res = await ctx.api.agentRuntime();
+    const data = res.data || {};
+    const agents = normalize(data.agents);
+    const runtime = data.runtime || {};
+    const health = data.health || { status: "unknown" };
+    const runs = Array.isArray(data.runs) ? data.runs : [];
+    const byId = new Map(agents.map((a) => [a.id, a.name]));
+
+    // Seed role chips from the runtime's real default pipeline / roles (once).
+    if (!roleState.__seeded) {
+      const fromRuntime = Array.isArray(runtime.default_pipeline) && runtime.default_pipeline.length
+        ? runtime.default_pipeline
+        : (Array.isArray(data.roles) ? data.roles.map((r) => r.role).filter(Boolean) : []);
+      if (fromRuntime.length) {
+        roleState = fromRuntime.map((r) => ({ role: String(r), on: true }));
+        roleState.__seeded = true;
+        renderRoleChips();
+      }
+    }
+
+    rosterSrc.replaceChildren(c.sourceBadge(res.source));
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    healthSlot.replaceChildren(
+      c.statePill(health.status === "ok" ? "ready" : health.status === "degraded" ? "warn" : "idle"),
+    );
+
+    // ── Stat row + queue/status (real runtime counts) ───────────────────
+    const available = agents.filter((a) => isAvailable(a.state)).length;
+    const totalRuns = Number(runtime.total_runs) || runs.length;
+    const activeRuns = Number(runtime.active_runs) || 0;
+    statHost.replaceChildren(
+      c.stat({ label: "Agents", value: c.fmtNum(agents.length), icon: "robot" }),
+      c.stat({ label: "Available", value: c.fmtNum(available), icon: "circle-check" }),
+      c.stat({ label: "Total runs", value: c.fmtNum(totalRuns), icon: "player-play" }),
+      c.stat({
+        label: "Queue", value: c.fmtNum(activeRuns), icon: "clock-play",
+        delta: activeRuns ? "active" : "idle", deltaDir: activeRuns ? "up" : undefined,
+      }),
+    );
+
+    // ── Roster grid ─────────────────────────────────────────────────────
+    if (!agents.length) {
+      rosterHost.replaceChildren(c.emptyState({
+        icon: "robot-off",
+        title: "Runtime unavailable",
+        body: "The agent runtime did not respond. Start the local server to see the roster.",
+      }));
+    } else {
+      rosterHost.replaceChildren(
+        h("div.lt3-grid-auto", agents.map((a) => agentCard(ctx, a, byId))),
+      );
+    }
+
+    // ── Recent runs ledger (REAL runs; click → load logs) ───────────────
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({ icon: "history-off", title: "No runs yet", body: "Trigger a run above — recorded runs appear here." }));
+    } else {
+      runsHost.replaceChildren(
+        c.table(
+          [
+            { key: "agent", label: "Agent", render: (r) => h("div.lt3-row-2",
+              h("span.lt3-avatar", { style: { width: "26px", height: "26px" } }, icon("robot")),
+              h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, r.agent),
+            ) },
+            { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(r.status) },
+            { key: "time", label: "Started", width: "1%", render: (r) => h("span.lt3-faint", { style: { "white-space": "nowrap", "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-2xs)" } }, r.time) },
+            { key: "note", label: "Note", render: (r) => h("span.lt3-muted", r.note) },
+            { key: "open", label: "", width: "1%", render: (r) => r.id
+              ? h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => openRun(r.id) } }, icon("list-search"), "Logs")
+              : null },
+          ],
+          runs.map((r) => ({
+            id: r.id || r.run_id,
+            agent: byId.get(r.agent_id) || shortId(r.agent_id),
+            status: mapStatus(r.status),
+            time: timeAgo(r.created_at || r.completed_at) || fmtTime(r.created_at || r.completed_at),
+            note: runNote(r),
+          })),
+          { empty: c.emptyState({ icon: "history-off", title: "No runs yet", body: "Agent runs recorded by the runtime will appear here." }) },
+        ),
+      );
+    }
+  }
+
+  return { hydrate, openRun };
 }
 
 async function loadRegistry(ctx, hosts) {
@@ -272,6 +514,12 @@ function mapStatus(status) {
   return s || "idle";
 }
 
+// An active run is one that could (in principle) still be stopped.
+const ACTIVE_STATES = new Set(["running", "in_progress", "queued", "pending", "active"]);
+function isActiveStatus(status) {
+  return ACTIVE_STATES.has(String(status || "").toLowerCase());
+}
+
 function runNote(r) {
   const out = String(r.output || r.input || "").trim();
   if (out) return out.length > 96 ? out.slice(0, 96) + "…" : out;

package/static/v3/js/views/{chat.c48fd9e2.js → chat.e6dd7dd0.js}

@@ -27,6 +27,10 @@ export async function render(ctx) {
     model: "", modelSource: "pending",
     lastQuery: "", lastTrace: null,
     graphCache: null,
+    // VLM image input (per-message). state.image holds raw base64 with NO
+    // "data:image/...;base64," prefix (what /chat expects); state.imagePreview
+    // keeps the full data URL for the <img> thumbnail.
+    image: null, imagePreview: null, visionEnabled: false,
   };
 
   /* ── element hosts ───────────────────────────────────────────────────── */
@@ -46,9 +50,29 @@ export async function render(ctx) {
     on: {
       input: autogrow,
       keydown: (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } },
+      paste: onPaste,
     },
   });
-  const sendBtn = h("button.lt3-btn.lt3-btn--primary", { "aria-label": "Send", on: { click: send } }, icon("arrow-up"));
+  const sendBtn = h("button.lt3-btn.lt3-btn--primary", { "aria-label": "Send", on: { click: () => state.streaming ? stopStreaming() : send() } }, icon("arrow-up"));
+
+  /* ── VLM image input (upload · drop · paste) ─────────────────────────── */
+  // Vision-capability badge — reflects whether the loaded model can read
+  // images. Honest by default ("Vision Disabled") until /models confirms.
+  const visionPill = h("span", {
+    title: "Load a vision-capable model to interpret images",
+  }, c.pill("Vision Disabled", "warn", { dot: true }));
+  // Hidden native picker, triggered by the "Attach image" button.
+  const fileInput = h("input", {
+    type: "file", accept: "image/*", style: { display: "none" },
+    "aria-hidden": "true", tabindex: "-1",
+    on: { change: (e) => { const f = e.target.files && e.target.files[0]; if (f) loadImageFile(f); e.target.value = ""; } },
+  });
+  const attachBtn = h("button.lt3-chip", {
+    type: "button", title: "Attach an image for a vision-capable model to read",
+    "aria-label": "Attach image", on: { click: () => fileInput.click() },
+  }, icon("photo"), "Image");
+  // Preview host, populated above the textarea inside .lt3-composer__inner.
+  const imagePreviewHost = h("div", { style: { display: "none" } });
 
   const groundChip = (key, label, icn) => h("button.lt3-chip", {
     type: "button", dataset: { active: String(state.grounding[key]) }, "aria-pressed": String(state.grounding[key]),
@@ -87,10 +111,16 @@ export async function render(ctx) {
       thread,
       h("div.lt3-composer",
         h("div.lt3-composer__inner",
-          h("div.lt3-composer__box", textarea, sendBtn),
+          imagePreviewHost,
+          h("div.lt3-composer__box", {
+            on: { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop },
+          }, textarea, sendBtn),
           h("div.lt3-composer__tools",
             groundChip("graph", "Knowledge Graph", "chart-dots-3"),
             groundChip("vector", "Vector", "grid-dots"),
+            attachBtn,
+            visionPill,
+            fileInput,
             h("span.lt3-spacer"),
             h("span.lt3-kbd", "↵"),
           ),
@@ -152,6 +182,7 @@ export async function render(ctx) {
   async function selectConversation(id) {
     if (state.streaming) stopStreaming();
     closePanes();
+    clearImage();
     state.activeId = id;
     const conv = state.conversations.find((x) => x.id === id);
     state.title = conv ? conv.title : "Conversation";
@@ -174,6 +205,7 @@ export async function render(ctx) {
   function startNew(userInitiated) {
     if (state.streaming) stopStreaming();
     closePanes();
+    clearImage();
     state.activeId = null;
     state.title = "New chat";
     state.messages = [];
@@ -218,7 +250,13 @@ export async function render(ctx) {
   function messageNode(m) {
     const isUser = m.role === "user";
     const body = h("div.lt3-msg__body",
-      h("div.lt3-msg__bubble", m.content),
+      h("div.lt3-msg__bubble",
+        m.image && h("img", {
+          src: m.image, alt: "Attached image",
+          style: { display: "block", "max-height": "220px", "max-width": "100%", "border-radius": "var(--lt3-radius-2, 8px)", border: "1px solid var(--border)", "margin-bottom": m.content ? "var(--lt3-space-2)" : "0" },
+        }),
+        m.content,
+      ),
       m.role === "ai" && m.source && h("div.lt3-row-2", c.sourceBadge(m.source)),
     );
     return h(`div.lt3-msg.lt3-msg--${isUser ? "user" : "ai"}`,
@@ -234,18 +272,122 @@ export async function render(ctx) {
     textarea.style.height = Math.min(200, textarea.scrollHeight) + "px";
   }
 
+  /* ── image: read · preview · clear ───────────────────────────────────── */
+  // Read an image File as a data URL, then split off the raw base64 payload
+  // (/chat wants the bytes without the "data:...;base64," prefix).
+  function loadImageFile(file) {
+    if (!file || !/^image\//.test(file.type || "")) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = String(reader.result || "");
+      const comma = dataUrl.indexOf(",");
+      if (comma < 0) return;
+      state.imagePreview = dataUrl;
+      state.image = dataUrl.slice(comma + 1);   // strip the data: prefix
+      renderImagePreview();
+    };
+    reader.onerror = () => toast("Couldn't read that image", "err");
+    reader.readAsDataURL(file);
+  }
+
+  function clearImage() {
+    state.image = null;
+    state.imagePreview = null;
+    renderImagePreview();
+  }
+
+  function renderImagePreview() {
+    if (!state.imagePreview) {
+      imagePreviewHost.replaceChildren();
+      imagePreviewHost.style.display = "none";
+      return;
+    }
+    imagePreviewHost.style.display = "flex";
+    imagePreviewHost.style.setProperty("align-items", "center");
+    imagePreviewHost.style.setProperty("gap", "var(--lt3-space-2)");
+    imagePreviewHost.style.setProperty("margin-bottom", "var(--lt3-space-2)");
+    imagePreviewHost.replaceChildren(
+      h("div", { style: { position: "relative", display: "inline-flex" } },
+        h("img", {
+          src: state.imagePreview, alt: "Attached image preview",
+          style: { height: "64px", "border-radius": "var(--lt3-radius-2, 8px)", border: "1px solid var(--border)" },
+        }),
+        h("button.lt3-iconbtn.lt3-iconbtn--sm", {
+          type: "button", "aria-label": "Remove image",
+          title: "Remove image",
+          style: {
+            position: "absolute", top: "-8px", right: "-8px",
+            background: "var(--surface-2)", border: "1px solid var(--border)",
+            "border-radius": "var(--lt3-radius-pill, 999px)",
+          },
+          on: { click: clearImage },
+        }, icon("x")),
+      ),
+      h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } },
+        state.visionEnabled ? "Image attached" : "Image attached · load a vision-capable model to interpret it"),
+    );
+  }
+
+  /* ── drag & drop ─────────────────────────────────────────────────────── */
+  function hasImageDrag(e) {
+    const dt = e.dataTransfer;
+    return !!dt && Array.from(dt.types || []).includes("Files");
+  }
+  function onDragOver(e) {
+    if (!hasImageDrag(e)) return;
+    e.preventDefault();
+    e.currentTarget.style.setProperty("outline", "2px dashed var(--accent)");
+    e.currentTarget.style.setProperty("outline-offset", "2px");
+  }
+  function onDragLeave(e) {
+    e.currentTarget.style.removeProperty("outline");
+    e.currentTarget.style.removeProperty("outline-offset");
+  }
+  function onDrop(e) {
+    e.currentTarget.style.removeProperty("outline");
+    e.currentTarget.style.removeProperty("outline-offset");
+    const dt = e.dataTransfer;
+    if (!dt || !dt.files || !dt.files.length) return;
+    const file = Array.from(dt.files).find((f) => /^image\//.test(f.type || ""));
+    if (!file) return;
+    e.preventDefault();
+    loadImageFile(file);
+  }
+
+  /* ── paste ───────────────────────────────────────────────────────────── */
+  function onPaste(e) {
+    const items = e.clipboardData && e.clipboardData.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.kind === "file" && /^image\//.test(item.type || "")) {
+        const file = item.getAsFile();
+        if (file) { e.preventDefault(); loadImageFile(file); }
+        return;
+      }
+    }
+  }
+
   /* ── send + stream ───────────────────────────────────────────────────── */
   async function send() {
     const text = textarea.value.trim();
-    if (!text || state.streaming) return;
+    // An image alone is a valid message — only bail when there's nothing at all.
+    if ((!text && !state.image) || state.streaming) return;
     textarea.value = ""; autogrow();
 
+    // Snapshot the image for this message, then clear the composer (per-message).
+    const imageData = state.image || null;
+    const imagePreview = state.imagePreview || null;
+    clearImage();
+
     if (!state.messages.length) threadInner.replaceChildren();
-    const userMsg = { role: "user", content: text };
+    const userMsg = { role: "user", content: text, image: imagePreview };
     state.messages.push(userMsg);
     threadInner.append(messageNode(userMsg));
     state.lastQuery = text;
-    if (!state.activeId) { state.title = text.slice(0, 48); titleEl.textContent = state.title; }
+    if (!state.activeId) {
+      const seed = text || "Image";
+      state.title = seed.slice(0, 48); titleEl.textContent = state.title;
+    }
 
     // streaming AI bubble
     const bubble = h("div.lt3-msg__bubble");
@@ -264,7 +406,7 @@ export async function render(ctx) {
     let started = false;
 
     const result = await api.streamChat(
-      { message: text, conversation_id: state.activeId, grounding: state.grounding },
+      { message: text, conversation_id: state.activeId, grounding: state.grounding, image_data: imageData || undefined },
       {
         signal: state.abort.signal,
         onChunk: (_delta, full) => {
@@ -326,11 +468,9 @@ export async function render(ctx) {
     if (on) {
       sendBtn.replaceChildren(icon("player-stop"));
       sendBtn.setAttribute("aria-label", "Stop");
-      sendBtn.onclick = stopStreaming;
     } else {
       sendBtn.replaceChildren(icon("arrow-up"));
       sendBtn.setAttribute("aria-label", "Send");
-      sendBtn.onclick = send;
     }
   }
 
@@ -413,6 +553,18 @@ export async function render(ctx) {
     state.modelSource = res.source;
     modelPill.replaceChildren(c.pill(state.model ? shortModel(state.model) : "No model", state.model ? "info" : "warn", { dot: true }));
     barSrc.replaceChildren(c.sourceBadge(res.source));
+
+    // Vision capability — driven by the real /models.vision contract; stays
+    // honestly "Disabled" when the field is absent or the call is unavailable.
+    state.visionEnabled = !!(res.data && res.data.vision && res.data.vision.enabled);
+    visionPill.title = state.visionEnabled
+      ? "The loaded model can interpret attached images"
+      : "Load a vision-capable model to interpret images";
+    visionPill.replaceChildren(
+      c.pill(state.visionEnabled ? "Vision Enabled" : "Vision Disabled", state.visionEnabled ? "ok" : "warn", { dot: true }),
+    );
+    // Keep any open preview's helper text in sync with capability.
+    if (state.imagePreview) renderImagePreview();
   }
 
   function loadInitial() {