ltcai 2.2.7 → 3.1.0

package/static/v3/js/views/pipeline.js

@@ -0,0 +1,157 @@
+/* ============================================================================
+ * View: Pipeline — ingest / embed / graph-build flows.
+ * Renders each workspace workflow as a horizontal stage flow (integration-ready
+ * against /workspace/workflows and the index APIs). Pipelines execute on the
+ * local runtime; this surface visualizes their stages and run state.
+ * ========================================================================== */
+
+import { timeAgo } from "../core/dom.js";
+
+export async function render(ctx) {
+  const { h, icon, api, c, toast } = ctx;
+
+  const unavailable = (label) => () => toast(`${label} is not available from this read-only pipeline view.`, "warn");
+
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const srcSlot = h("span", c.sourceBadge("pending"));
+  const flowsHost = h("div.lt3-stack-6", c.loading({ lines: 3, block: true }));
+
+  const rebuildBtn = h("button.lt3-btn.lt3-btn--primary", { on: { click: () => rebuild() } }, icon("refresh"), "Rebuild index");
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Data",
+      title: "Pipeline",
+      sub: "Ingest, embed, and graph-build flows that turn your sources into the retrieval lattice — chunk, embed, extract entities, and link the graph.",
+      actions: [rebuildBtn],
+    }),
+    c.banner(
+      "Pipelines execute on this machine's local runtime. Use Rebuild index to re-embed every chunk and relink the knowledge graph from your current sources.",
+      "info",
+      "server-bolt",
+    ),
+    statHost,
+    h("section",
+      c.sectionHead("Flows", srcSlot),
+      flowsHost,
+    ),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const res = await api.get("/workspace/workflows", { workflows: [] });
+    const pipelines = normalize(res.data);
+    srcSlot.replaceChildren(c.sourceBadge(res.source));
+    renderStats(pipelines);
+    renderFlows(pipelines);
+  }
+
+  // Real pipeline run: rebuild the vector index (re-embed chunks, relink graph).
+  async function rebuild() {
+    rebuildBtn.disabled = true;
+    rebuildBtn.replaceChildren(icon("loader"), "Rebuilding…");
+    const res = await api.rebuildIndex();
+    rebuildBtn.disabled = false;
+    rebuildBtn.replaceChildren(icon("refresh"), "Rebuild index");
+    if (res && res.ok && res.data && res.data.status === "completed") {
+      const d = res.data;
+      toast(`Index rebuilt — ${d.items_indexed} indexed, ${d.items_skipped} unchanged (${d.embedding_model}).`, "ok");
+      load();
+    } else {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || "the knowledge graph is unavailable";
+      toast(`Could not rebuild the index — ${detail}.`, "warn");
+    }
+  }
+
+  function renderStats(pipelines) {
+    const active = pipelines.filter((p) => isActive(p.state)).length;
+    const stages = pipelines.reduce((sum, p) => sum + p.stages.length, 0);
+    const throughput = pipelines.find((p) => p.throughput)?.throughput || "—";
+    const lastRun = pipelines
+      .map((p) => p.last_run)
+      .filter(Boolean)
+      .sort((a, b) => new Date(b) - new Date(a))[0];
+    statHost.replaceChildren(
+      c.stat({ label: "Active pipelines", value: c.fmtNum(active), icon: "player-play" }),
+      c.stat({ label: "Total stages", value: c.fmtNum(stages), icon: "stack-2" }),
+      c.stat({ label: "Throughput", value: throughput, icon: "gauge" }),
+      c.stat({ label: "Last run", value: lastRun ? timeAgo(lastRun) : "—", icon: "history" }),
+    );
+  }
+
+  function renderFlows(pipelines) {
+    if (!pipelines.length) {
+      flowsHost.replaceChildren(
+        c.emptyState({
+          icon: "git-branch-deleted",
+          title: "No pipelines yet",
+          body: "Connect a source and create a pipeline to ingest, embed, and build the graph.",
+          action: h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => rebuild() } }, icon("refresh"), "Rebuild index"),
+        }),
+      );
+      return;
+    }
+    flowsHost.replaceChildren(...pipelines.map((p) => pipelinePanel(p)));
+  }
+
+  function pipelinePanel(p) {
+    return c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", "flex-wrap": "wrap", gap: "var(--lt3-space-3)" } },
+        h("div.lt3-row-2",
+          h("div.lt3-eyebrow", icon("git-branch"), "Pipeline"),
+        ),
+        c.statePill(p.state),
+      ),
+      children: h("div.lt3-stack-4",
+        h("h3.lt3-panel__title", { style: { "margin-top": "calc(-1 * var(--lt3-space-2))" } }, p.name),
+        flowDiagram(p.stages),
+        pipelineFooter(p),
+      ),
+    });
+  }
+
+  function flowDiagram(stages) {
+    const cells = [];
+    stages.forEach((stage, i) => {
+      if (i > 0) cells.push(h("div.lt3-flow__arrow", { "aria-hidden": "true" }, icon("chevron-right")));
+      cells.push(
+        h("div.lt3-stage",
+          h("div.lt3-stage__num", String(i + 1).padStart(2, "0")),
+          h("div.lt3-stage__name", stage),
+        ),
+      );
+    });
+    return h("div.lt3-flow", { role: "list", "aria-label": "Pipeline stages" }, cells);
+  }
+
+  function pipelineFooter(p) {
+    return h("div.lt3-row", { style: { "justify-content": "space-between", "flex-wrap": "wrap", gap: "var(--lt3-space-3)" } },
+      h("div.lt3-cluster",
+        h("span.lt3-faint.lt3-row-2", { style: { "font-size": "var(--lt3-text-xs)" } }, icon("history"), p.last_run ? timeAgo(p.last_run) : "—"),
+        h("span.lt3-faint.lt3-row-2", { style: { "font-size": "var(--lt3-text-xs)" } }, icon("gauge"), p.throughput || "—"),
+      ),
+      h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: unavailable(`Running "${p.name}"`) } }, icon("player-play"), "Run"),
+    );
+  }
+}
+
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+function normalize(data) {
+  const list = Array.isArray(data) ? data : (data && data.workflows) || [];
+  return list.map((p, i) => ({
+    id: p.id || `pl-${i}`,
+    name: p.name || p.label || "Untitled pipeline",
+    state: p.state || "idle",
+    stages: Array.isArray(p.stages) ? p.stages.map((s) => String(s))
+      : Array.isArray(p.steps) ? p.steps.map((s) => (s && (s.action || s.name)) || String(s))
+      : [],
+    last_run: p.last_run || p.created_at || null,
+    throughput: p.throughput || "",
+  }));
+}
+
+function isActive(state) {
+  return ["active", "running", "indexing", "building"].includes(String(state).toLowerCase());
+}

package/static/v3/js/views/settings.4f777210.js

@@ -0,0 +1,250 @@
+/* ============================================================================
+ * View: Settings — appearance, workspace, and integration readiness.
+ * This view WIRES real store state (theme + mode persist immediately) and
+ * probes the documented endpoints so the v3 shell visibly reports whether it
+ * is talking to a live backend or an unavailable surface.
+ * ========================================================================== */
+
+const MODE_DEFS = [
+  { key: "basic", label: "Basic", desc: "Chat, search, and files — the essentials, nothing else." },
+  { key: "advanced", label: "Advanced", desc: "Adds the pipeline, agents, and model runtime surfaces." },
+  { key: "admin", label: "Admin", desc: "Reveals users, permissions, audit, security, and policies." },
+];
+
+// Endpoints the views light up against once the backend exposes them.
+const PROBES = [
+  { path: "/api/index/status", method: "GET", call: (api) => api.indexStatus() },
+  { path: "/api/graph", method: "GET", call: (api) => api.graph() },
+  { path: "/api/search/hybrid", method: "POST", call: (api) => api.hybridSearch("ping") },
+];
+
+export async function render(ctx) {
+  const { h, icon, api, store, c, navigate, toast } = ctx;
+
+  const probesHost = h("div", c.loading({ lines: 3 }));
+
+  const embedHost = h("div", c.loading({ lines: 2 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "System",
+      title: "Settings",
+      sub: "Appearance, workspace, and integrations.",
+    }),
+
+    appearancePanel(ctx),
+    workspacePanel(ctx),
+
+    c.panel({
+      eyebrow: "Models",
+      title: "Embeddings",
+      sub: "The vector signal behind retrieval. Configure the provider with LATTICEAI_EMBEDDING_PROVIDER (hash · mlx · ollama · openai · custom).",
+      children: embedHost,
+    }),
+
+    c.panel({
+      eyebrow: "Status",
+      title: "Integration readiness",
+      sub: "Each view probes its endpoint and reports unavailable state until the backend answers.",
+      children: h("div.lt3-stack-3",
+        probesHost,
+        h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
+          "Views automatically switch to live data once these endpoints respond; unreachable endpoints are labeled unavailable."),
+      ),
+    }),
+
+    aboutPanel(ctx),
+  );
+
+  probeEndpoints(ctx, probesHost);
+  renderEmbeddings(ctx, embedHost);
+  return root;
+}
+
+/* ── Embeddings (Settings → Models → Embeddings) ────────────────────────── */
+export function embeddingStatePill({ h, c }, st) {
+  const state = String(st.state || st.grade || "fallback").toLowerCase();
+  if (state === "production") return c.pill("Production", "ok");
+  if (state === "unavailable") return c.pill("Unavailable", "err");
+  return c.pill("Fallback", "warn");
+}
+
+async function renderEmbeddings(ctx, host) {
+  const { h, c } = ctx;
+  const res = await ctx.api.embeddingsStatus();
+  const d = res.data || {};
+  const lastIndexed = d.last_indexed_at ? new Date(d.last_indexed_at).toLocaleString() : "Never";
+  host.replaceChildren(
+    h("div.lt3-stack-4",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "center", "flex-wrap": "wrap", gap: "var(--lt3-space-3)" } },
+        h("div.lt3-row-2",
+          h("span", { style: { color: "var(--lt3-pillar-vector, var(--accent))", display: "inline-flex" } }, ctx.icon("grid-dots")),
+          h("b", { style: { "font-size": "var(--lt3-text-md)" } }, providerLabel(d.active_provider || d.provider)),
+        ),
+        h("div.lt3-row-2", embeddingStatePill(ctx, d), c.sourceBadge(res.source)),
+      ),
+      d.fell_back
+        ? c.banner(`Requested “${d.requested_provider}” is unavailable (${(d.health && d.health.detail) || "no detail"}); using the local hash fallback. Retrieval still works, but vectors are non-semantic until the provider is reachable.`, "warn", "alert-triangle")
+        : null,
+      h("dl.lt3-keyval",
+        h("dt", "Provider"), h("dd", providerLabel(d.active_provider || d.provider)),
+        h("dt", "Model"), h("dd", h("span.lt3-mono", d.model || d.model_id || "—")),
+        h("dt", "Dimensions"), h("dd", h("span.lt3-mono", String(d.dimensions || "—"))),
+        h("dt", "Status"), h("dd", embeddingStatePill(ctx, d)),
+        h("dt", "Last index"), h("dd", lastIndexed),
+      ),
+    ),
+  );
+}
+
+function providerLabel(p) {
+  return ({ hash: "Local hash (fallback)", mlx: "MLX (Apple Silicon)", ollama: "Ollama",
+    openai: "OpenAI-compatible", custom: "Custom" }[String(p || "hash")]) || String(p || "—");
+}
+
+/* ── Appearance ─────────────────────────────────────────────────────────── */
+function appearancePanel({ h, icon, store, c }) {
+  const themeKey = () => {
+    const t = store.get().theme;
+    return t === "light" || t === "dark" ? t : "";
+  };
+
+  const themeSlot = h("div");
+  const buildTheme = () => c.segmented(
+    [{ key: "light", label: "Light" }, { key: "dark", label: "Dark" }, { key: "", label: "System" }],
+    themeKey(),
+    (k) => { store.setTheme(k); themeSlot.replaceChildren(buildTheme()); },
+  );
+  themeSlot.append(buildTheme());
+
+  const modeSeg = c.segmented(
+    MODE_DEFS.map((m) => ({ key: m.key, label: m.label })),
+    store.get().mode,
+    (k) => { store.setMode(k); modeNote.replaceChildren(noteFor(k)); },
+  );
+  const noteFor = (k) => h("span", (MODE_DEFS.find((m) => m.key === k) || MODE_DEFS[0]).desc);
+  const modeNote = h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, noteFor(store.get().mode));
+
+  return c.panel({
+    eyebrow: "Appearance",
+    title: "Look and density",
+    sub: "Theme and surface mode persist on this machine and apply across every view.",
+    children: h("div.lt3-stack-6",
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("palette"), "Theme"),
+        themeSlot,
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "System follows your OS appearance preference."),
+      ),
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("adjustments"), "Mode"),
+        h("div", modeSeg),
+        modeNote,
+      ),
+    ),
+  });
+}
+
+/* ── Workspace ──────────────────────────────────────────────────────────── */
+function workspacePanel({ h, icon, store, c, toast, api }) {
+  const ws = store.activeWorkspace();
+
+  const orgInput = h("input.lt3-input", {
+    type: "text", placeholder: "Organization name…", "aria-label": "New organization name",
+    style: { "flex": "1 1 220px" },
+  });
+  const createBtn = h("button.lt3-btn.lt3-btn--primary", { type: "button" }, icon("plus"), "Create organization");
+  const createOrg = async () => {
+    const name = (orgInput.value || "").trim();
+    if (!name) { toast("Enter an organization name first.", "info"); return; }
+    createBtn.disabled = true;
+    const res = await api.createOrg(name);
+    createBtn.disabled = false;
+    if (res && res.ok && res.data && !res.data.detail && !res.data.error) {
+      toast(`Organization “${name}” created.`, "ok");
+      orgInput.value = "";
+    } else {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || "the runtime is unavailable";
+      toast(`Could not create organization — ${detail}.`, "warn");
+    }
+  };
+  createBtn.addEventListener("click", createOrg);
+
+  let savedLang = "en";
+  try { savedLang = localStorage.getItem("lt3-lang") || "en"; } catch {}
+  const langSelect = h("select.lt3-select", {
+    "aria-label": "Interface language", value: savedLang,
+    on: { change: (e) => {
+      try { localStorage.setItem("lt3-lang", e.target.value); } catch {}
+      toast(`Interface language set to ${e.target.selectedOptions[0].text} (saved on this device).`, "ok");
+    } },
+  },
+    h("option", { value: "en" }, "English"),
+    h("option", { value: "ko" }, "한국어"),
+  );
+
+  return c.panel({
+    eyebrow: "Workspace",
+    title: "Active workspace",
+    sub: "Where your indexed knowledge, agents, and policies live.",
+    children: h("div.lt3-stack-6",
+      h("dl.lt3-keyval",
+        h("dt", "Name"), h("dd", ws.name),
+        h("dt", "Type"), h("dd", h("span.lt3-row-2", icon(ws.type === "personal" ? "user" : "building"), titleCase(ws.type || "personal"))),
+        h("dt", "Your role"), h("dd", c.pill(titleCase(ws.your_role || "owner"), "info")),
+      ),
+      h("hr.lt3-divider"),
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("building-community"), "Create organization"),
+        h("div.lt3-cluster",
+          orgInput,
+          createBtn,
+        ),
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Creates a shared organization workspace on this server."),
+      ),
+      h("div.lt3-field",
+        h("label.lt3-label", { for: "lt3-set-lang", style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("language"), "Language"),
+        h("div", { style: { "max-width": "260px" } }, langSelect),
+      ),
+    ),
+  });
+}
+
+/* ── Integration readiness ──────────────────────────────────────────────── */
+async function probeEndpoints({ h, icon, api, c }, host) {
+  const results = await Promise.all(PROBES.map((p) => p.call(api)));
+  const rows = PROBES.map((p, i) => {
+    const res = results[i] || {};
+    return h("div.lt3-card.lt3-card--flat",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "gap": "var(--lt3-space-3)", "flex-wrap": "wrap" } },
+        h("div.lt3-row-2",
+          h("span.lt3-pill", { style: { "font-weight": "var(--lt3-weight-medium)" } }, p.method),
+          h("code.lt3-mono", p.path),
+        ),
+        c.sourceBadge(res.source === "live" ? "live" : "unavailable"),
+      ),
+    );
+  });
+  host.replaceChildren(h("div.lt3-stack-2", rows));
+}
+
+/* ── About ──────────────────────────────────────────────────────────────── */
+function aboutPanel({ h, icon, c }) {
+  return c.panel({
+    eyebrow: "About",
+    title: "Lattice AI",
+    sub: "Local-first AI workspace.",
+    children: h("div.lt3-stack-4",
+      h("dl.lt3-keyval",
+        h("dt", "Application"), h("dd", "Lattice AI"),
+        h("dt", "Version"), h("dd", h("span.lt3-mono", "v3.1.0")),
+        h("dt", "Edition"), h("dd", "Local-first AI workspace"),
+      ),
+    ),
+  });
+}
+
+/* ── helpers ────────────────────────────────────────────────────────────── */
+function titleCase(s) {
+  s = String(s || "");
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}

package/static/v3/js/views/settings.js

@@ -0,0 +1,250 @@
+/* ============================================================================
+ * View: Settings — appearance, workspace, and integration readiness.
+ * This view WIRES real store state (theme + mode persist immediately) and
+ * probes the documented endpoints so the v3 shell visibly reports whether it
+ * is talking to a live backend or an unavailable surface.
+ * ========================================================================== */
+
+const MODE_DEFS = [
+  { key: "basic", label: "Basic", desc: "Chat, search, and files — the essentials, nothing else." },
+  { key: "advanced", label: "Advanced", desc: "Adds the pipeline, agents, and model runtime surfaces." },
+  { key: "admin", label: "Admin", desc: "Reveals users, permissions, audit, security, and policies." },
+];
+
+// Endpoints the views light up against once the backend exposes them.
+const PROBES = [
+  { path: "/api/index/status", method: "GET", call: (api) => api.indexStatus() },
+  { path: "/api/graph", method: "GET", call: (api) => api.graph() },
+  { path: "/api/search/hybrid", method: "POST", call: (api) => api.hybridSearch("ping") },
+];
+
+export async function render(ctx) {
+  const { h, icon, api, store, c, navigate, toast } = ctx;
+
+  const probesHost = h("div", c.loading({ lines: 3 }));
+
+  const embedHost = h("div", c.loading({ lines: 2 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "System",
+      title: "Settings",
+      sub: "Appearance, workspace, and integrations.",
+    }),
+
+    appearancePanel(ctx),
+    workspacePanel(ctx),
+
+    c.panel({
+      eyebrow: "Models",
+      title: "Embeddings",
+      sub: "The vector signal behind retrieval. Configure the provider with LATTICEAI_EMBEDDING_PROVIDER (hash · mlx · ollama · openai · custom).",
+      children: embedHost,
+    }),
+
+    c.panel({
+      eyebrow: "Status",
+      title: "Integration readiness",
+      sub: "Each view probes its endpoint and reports unavailable state until the backend answers.",
+      children: h("div.lt3-stack-3",
+        probesHost,
+        h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
+          "Views automatically switch to live data once these endpoints respond; unreachable endpoints are labeled unavailable."),
+      ),
+    }),
+
+    aboutPanel(ctx),
+  );
+
+  probeEndpoints(ctx, probesHost);
+  renderEmbeddings(ctx, embedHost);
+  return root;
+}
+
+/* ── Embeddings (Settings → Models → Embeddings) ────────────────────────── */
+export function embeddingStatePill({ h, c }, st) {
+  const state = String(st.state || st.grade || "fallback").toLowerCase();
+  if (state === "production") return c.pill("Production", "ok");
+  if (state === "unavailable") return c.pill("Unavailable", "err");
+  return c.pill("Fallback", "warn");
+}
+
+async function renderEmbeddings(ctx, host) {
+  const { h, c } = ctx;
+  const res = await ctx.api.embeddingsStatus();
+  const d = res.data || {};
+  const lastIndexed = d.last_indexed_at ? new Date(d.last_indexed_at).toLocaleString() : "Never";
+  host.replaceChildren(
+    h("div.lt3-stack-4",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "center", "flex-wrap": "wrap", gap: "var(--lt3-space-3)" } },
+        h("div.lt3-row-2",
+          h("span", { style: { color: "var(--lt3-pillar-vector, var(--accent))", display: "inline-flex" } }, ctx.icon("grid-dots")),
+          h("b", { style: { "font-size": "var(--lt3-text-md)" } }, providerLabel(d.active_provider || d.provider)),
+        ),
+        h("div.lt3-row-2", embeddingStatePill(ctx, d), c.sourceBadge(res.source)),
+      ),
+      d.fell_back
+        ? c.banner(`Requested “${d.requested_provider}” is unavailable (${(d.health && d.health.detail) || "no detail"}); using the local hash fallback. Retrieval still works, but vectors are non-semantic until the provider is reachable.`, "warn", "alert-triangle")
+        : null,
+      h("dl.lt3-keyval",
+        h("dt", "Provider"), h("dd", providerLabel(d.active_provider || d.provider)),
+        h("dt", "Model"), h("dd", h("span.lt3-mono", d.model || d.model_id || "—")),
+        h("dt", "Dimensions"), h("dd", h("span.lt3-mono", String(d.dimensions || "—"))),
+        h("dt", "Status"), h("dd", embeddingStatePill(ctx, d)),
+        h("dt", "Last index"), h("dd", lastIndexed),
+      ),
+    ),
+  );
+}
+
+function providerLabel(p) {
+  return ({ hash: "Local hash (fallback)", mlx: "MLX (Apple Silicon)", ollama: "Ollama",
+    openai: "OpenAI-compatible", custom: "Custom" }[String(p || "hash")]) || String(p || "—");
+}
+
+/* ── Appearance ─────────────────────────────────────────────────────────── */
+function appearancePanel({ h, icon, store, c }) {
+  const themeKey = () => {
+    const t = store.get().theme;
+    return t === "light" || t === "dark" ? t : "";
+  };
+
+  const themeSlot = h("div");
+  const buildTheme = () => c.segmented(
+    [{ key: "light", label: "Light" }, { key: "dark", label: "Dark" }, { key: "", label: "System" }],
+    themeKey(),
+    (k) => { store.setTheme(k); themeSlot.replaceChildren(buildTheme()); },
+  );
+  themeSlot.append(buildTheme());
+
+  const modeSeg = c.segmented(
+    MODE_DEFS.map((m) => ({ key: m.key, label: m.label })),
+    store.get().mode,
+    (k) => { store.setMode(k); modeNote.replaceChildren(noteFor(k)); },
+  );
+  const noteFor = (k) => h("span", (MODE_DEFS.find((m) => m.key === k) || MODE_DEFS[0]).desc);
+  const modeNote = h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, noteFor(store.get().mode));
+
+  return c.panel({
+    eyebrow: "Appearance",
+    title: "Look and density",
+    sub: "Theme and surface mode persist on this machine and apply across every view.",
+    children: h("div.lt3-stack-6",
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("palette"), "Theme"),
+        themeSlot,
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "System follows your OS appearance preference."),
+      ),
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("adjustments"), "Mode"),
+        h("div", modeSeg),
+        modeNote,
+      ),
+    ),
+  });
+}
+
+/* ── Workspace ──────────────────────────────────────────────────────────── */
+function workspacePanel({ h, icon, store, c, toast, api }) {
+  const ws = store.activeWorkspace();
+
+  const orgInput = h("input.lt3-input", {
+    type: "text", placeholder: "Organization name…", "aria-label": "New organization name",
+    style: { "flex": "1 1 220px" },
+  });
+  const createBtn = h("button.lt3-btn.lt3-btn--primary", { type: "button" }, icon("plus"), "Create organization");
+  const createOrg = async () => {
+    const name = (orgInput.value || "").trim();
+    if (!name) { toast("Enter an organization name first.", "info"); return; }
+    createBtn.disabled = true;
+    const res = await api.createOrg(name);
+    createBtn.disabled = false;
+    if (res && res.ok && res.data && !res.data.detail && !res.data.error) {
+      toast(`Organization “${name}” created.`, "ok");
+      orgInput.value = "";
+    } else {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || "the runtime is unavailable";
+      toast(`Could not create organization — ${detail}.`, "warn");
+    }
+  };
+  createBtn.addEventListener("click", createOrg);
+
+  let savedLang = "en";
+  try { savedLang = localStorage.getItem("lt3-lang") || "en"; } catch {}
+  const langSelect = h("select.lt3-select", {
+    "aria-label": "Interface language", value: savedLang,
+    on: { change: (e) => {
+      try { localStorage.setItem("lt3-lang", e.target.value); } catch {}
+      toast(`Interface language set to ${e.target.selectedOptions[0].text} (saved on this device).`, "ok");
+    } },
+  },
+    h("option", { value: "en" }, "English"),
+    h("option", { value: "ko" }, "한국어"),
+  );
+
+  return c.panel({
+    eyebrow: "Workspace",
+    title: "Active workspace",
+    sub: "Where your indexed knowledge, agents, and policies live.",
+    children: h("div.lt3-stack-6",
+      h("dl.lt3-keyval",
+        h("dt", "Name"), h("dd", ws.name),
+        h("dt", "Type"), h("dd", h("span.lt3-row-2", icon(ws.type === "personal" ? "user" : "building"), titleCase(ws.type || "personal"))),
+        h("dt", "Your role"), h("dd", c.pill(titleCase(ws.your_role || "owner"), "info")),
+      ),
+      h("hr.lt3-divider"),
+      h("div.lt3-field",
+        h("label.lt3-label", { style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("building-community"), "Create organization"),
+        h("div.lt3-cluster",
+          orgInput,
+          createBtn,
+        ),
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Creates a shared organization workspace on this server."),
+      ),
+      h("div.lt3-field",
+        h("label.lt3-label", { for: "lt3-set-lang", style: { "display": "flex", "gap": "var(--lt3-space-2)", "align-items": "center" } }, icon("language"), "Language"),
+        h("div", { style: { "max-width": "260px" } }, langSelect),
+      ),
+    ),
+  });
+}
+
+/* ── Integration readiness ──────────────────────────────────────────────── */
+async function probeEndpoints({ h, icon, api, c }, host) {
+  const results = await Promise.all(PROBES.map((p) => p.call(api)));
+  const rows = PROBES.map((p, i) => {
+    const res = results[i] || {};
+    return h("div.lt3-card.lt3-card--flat",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "gap": "var(--lt3-space-3)", "flex-wrap": "wrap" } },
+        h("div.lt3-row-2",
+          h("span.lt3-pill", { style: { "font-weight": "var(--lt3-weight-medium)" } }, p.method),
+          h("code.lt3-mono", p.path),
+        ),
+        c.sourceBadge(res.source === "live" ? "live" : "unavailable"),
+      ),
+    );
+  });
+  host.replaceChildren(h("div.lt3-stack-2", rows));
+}
+
+/* ── About ──────────────────────────────────────────────────────────────── */
+function aboutPanel({ h, icon, c }) {
+  return c.panel({
+    eyebrow: "About",
+    title: "Lattice AI",
+    sub: "Local-first AI workspace.",
+    children: h("div.lt3-stack-4",
+      h("dl.lt3-keyval",
+        h("dt", "Application"), h("dd", "Lattice AI"),
+        h("dt", "Version"), h("dd", h("span.lt3-mono", "v3.1.0")),
+        h("dt", "Edition"), h("dd", "Local-first AI workspace"),
+      ),
+    ),
+  });
+}
+
+/* ── helpers ────────────────────────────────────────────────────────────── */
+function titleCase(s) {
+  s = String(s || "");
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}

package/static/workflows.html

@@ -4,10 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Workflow Designer — Lattice AI</title>
-  <script src="/static/scripts/ux.js?v=2.2.7"></script>
-  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.7" />
-  <link rel="stylesheet" href="/static/platform.css?v=2.2.7" />
-  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.7" />
+  <script src="/static/scripts/ux.js"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css" />
+  <link rel="stylesheet" href="/static/platform.css" />
+  <link rel="stylesheet" href="/static/css/responsive.css" />
 </head>
 <body>
   <main>