@volter-ai-dev/supercode-ui 0.1.0

package/conversation.mjs

@@ -0,0 +1,375 @@
+// src/components.jsx
+import MarkdownIt from "markdown-it";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+
+// core.mjs
+var HARNESS_NAMES = Object.freeze({
+  "claude-code": "Claude Code",
+  codex: "Codex",
+  opencode: "OpenCode",
+  pi: "Pi",
+  grok: "Grok"
+});
+var DEFAULT_LABELS = Object.freeze({
+  chats: "Chats",
+  newChat: "New chat",
+  searchChats: "Search chats",
+  askAgent: "Ask your agent\u2026",
+  continueHere: "Continue here",
+  joinLive: "Join live",
+  forkHere: "Fork here"
+});
+var EMPTY_UI_STATE = Object.freeze({
+  pill: Object.freeze({ tone: "off", label: "connecting\u2026" }),
+  startup: "connecting",
+  transcript: Object.freeze([]),
+  busy: false,
+  operation: null,
+  needsInput: false,
+  harness: "",
+  mode: "none",
+  strategy: null,
+  canSend: false,
+  canResume: false,
+  canBranch: false,
+  canAttach: false,
+  canDetach: false,
+  canOpenTerminal: false,
+  canExport: false,
+  canReduce: false,
+  canInterrupt: false,
+  canRespond: false,
+  messaging: null,
+  workspace: "",
+  taskPlan: Object.freeze({ source: "none", items: Object.freeze([]), residueCount: 0, observedAt: null }),
+  semantics: Object.freeze({ fidelity: null, residue: Object.freeze([]), residueCount: 0, parseErrors: 0, rawRecords: 0, subagents: Object.freeze([]) }),
+  terminalHandoff: null,
+  exportBackTarget: null,
+  exportReceipt: null,
+  reductionReceipt: null,
+  error: null,
+  recoverable: false,
+  harnesses: Object.freeze([]),
+  history: Object.freeze({ sessionLimit: 0, hasMoreSessions: false, transcriptLimit: 120, hasEarlier: false }),
+  savedDraft: "",
+  attention: Object.freeze([]),
+  sessions: Object.freeze([]),
+  attached: null,
+  owned: null,
+  attachError: null
+});
+function harnessDisplayName(id) {
+  return HARNESS_NAMES[id] ?? id;
+}
+function groupConversation(entries) {
+  const blocks = [];
+  for (const entry of entries) {
+    if (entry.role !== "tool") {
+      blocks.push({ kind: "entry", id: entry.id, entry });
+      continue;
+    }
+    const previous = blocks.at(-1);
+    if (previous?.kind === "activity") previous.entries.push(entry);
+    else blocks.push({ kind: "activity", id: `activity:${entry.id}`, entries: [entry] });
+  }
+  return blocks;
+}
+function toolCategory(entry) {
+  const name = entry.label?.toLocaleLowerCase() ?? "";
+  if (/read|view|open_file|list_dir/.test(name)) return "read";
+  if (/search|find|grep|glob/.test(name)) return "search";
+  if (/edit|write|patch|replace|create_file/.test(name)) return "edit";
+  if (/test|typecheck|lint|build/.test(name)) return "test";
+  if (/terminal|bash|shell|command|exec/.test(name)) return /\b(test|typecheck|lint|build)\b/i.test(entry.arguments ?? "") ? "test" : "command";
+  if (/browser|web|fetch|url/.test(name)) return "web";
+  if (/subagent|spawn|task/.test(name)) return "agent";
+  return "other";
+}
+function toolTarget(argumentsText) {
+  if (!argumentsText) return "";
+  try {
+    const args = JSON.parse(argumentsText);
+    for (const key of ["file_path", "target_file", "path", "command", "cmd", "query", "pattern", "url"]) {
+      if (typeof args?.[key] === "string") return args[key];
+    }
+  } catch {
+    return argumentsText.length > 120 ? `${argumentsText.slice(0, 117)}\u2026` : argumentsText;
+  }
+  return "";
+}
+function compactToolTarget(target, workspace) {
+  const prefix = workspace && !workspace.endsWith("/") ? `${workspace}/` : workspace;
+  return prefix && target.startsWith(prefix) ? target.slice(prefix.length) : target;
+}
+function activitySummary(entries) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const entry of entries) counts.set(toolCategory(entry), (counts.get(toolCategory(entry)) ?? 0) + 1);
+  if ([...counts.keys()].every((key) => key === "read" || key === "search")) return `Explored ${entries.length} ${entries.length === 1 ? "item" : "items"}`;
+  const labels = { edit: "changed", test: "tests/builds", command: "commands", read: "reads", search: "searches", web: "web", agent: "agents", other: "other" };
+  return `Activity \xB7 ${Object.entries(labels).flatMap(([key, label]) => counts.has(key) ? [`${counts.get(key)} ${label}`] : []).join(" \xB7 ")}`;
+}
+
+// src/components.jsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var markdown = new MarkdownIt({ html: false, linkify: true, breaks: false });
+var defaultLinkOpen = markdown.renderer.rules.link_open;
+markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
+  tokens[index]?.attrSet("target", "_blank");
+  tokens[index]?.attrSet("rel", "noreferrer noopener");
+  return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options);
+};
+function Markdown({ value }) {
+  const html = useMemo(() => markdown.render(value), [value]);
+  return /* @__PURE__ */ jsx("div", { class: "scui-markdown", dangerouslySetInnerHTML: { __html: html } });
+}
+function LoadingStatus({ state, compact = false }) {
+  const copy = {
+    connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
+    starting: [`Starting ${harnessDisplayName(state.harness) || "coding agent"}`, "Opening a controlled session in this workspace.", 1],
+    discovering: ["Loading recent sessions", "Scanning native session stores without loading full transcripts.", 2],
+    ready: ["Ready", "Coding sessions are up to date.", 3]
+  }[state.startup];
+  return /* @__PURE__ */ jsxs("div", { class: `scui-loading${compact ? " scui-loading-compact" : ""}`, role: "status", "aria-busy": state.startup !== "ready", children: [
+    /* @__PURE__ */ jsx("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", {}) }),
+    /* @__PURE__ */ jsxs("span", { class: "scui-loading-copy", children: [
+      /* @__PURE__ */ jsx("strong", { children: copy[0] }),
+      /* @__PURE__ */ jsx("small", { children: copy[1] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
+  ] });
+}
+function RequestCard({ entry, adapter, canRespond }) {
+  const request = entry.request;
+  if (!request) return null;
+  if (request.status === "responded") {
+    return /* @__PURE__ */ jsxs("div", { class: "scui-request-done", children: [
+      "\u2713 Request answered \xB7 ",
+      request.resolution?.name ?? request.requestKind
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { class: "scui-request", "aria-label": `${request.requestKind} needs input`, children: [
+    /* @__PURE__ */ jsx("strong", { children: "Agent needs input" }),
+    /* @__PURE__ */ jsx(Markdown, { value: request.payloadText || entry.text }),
+    /* @__PURE__ */ jsxs("div", { class: "scui-request-actions", children: [
+      request.options.map((option) => /* @__PURE__ */ jsx("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: option.optionId }), children: option.name }, option.optionId)),
+      request.cancellable ? /* @__PURE__ */ jsx("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: null }), children: "Cancel" }) : null
+    ] })
+  ] });
+}
+function ContextDisclosure({ context }) {
+  if (!context?.length) return null;
+  return /* @__PURE__ */ jsxs("details", { class: "scui-context", children: [
+    /* @__PURE__ */ jsxs("summary", { children: [
+      "Context \xB7 ",
+      context.length
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: context.map((item, index) => /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("strong", { children: item.label }),
+      /* @__PURE__ */ jsx("span", { children: item.detail })
+    ] }, item.id ?? index)) })
+  ] });
+}
+function TranscriptEntry({ entry, state, adapter }) {
+  if (entry.role === "request") return /* @__PURE__ */ jsx(RequestCard, { entry, adapter, canRespond: state.canRespond });
+  if (entry.role === "reasoning") {
+    return /* @__PURE__ */ jsxs("details", { class: "scui-reasoning", open: entry.streaming, children: [
+      /* @__PURE__ */ jsx("summary", { children: entry.streaming ? "Reasoning\u2026" : "Reasoning" }),
+      /* @__PURE__ */ jsx(Markdown, { value: entry.text })
+    ] });
+  }
+  if (entry.role === "notice" || entry.role === "system") return /* @__PURE__ */ jsx("div", { class: "scui-notice", "data-code": entry.code, children: entry.text });
+  return /* @__PURE__ */ jsxs("article", { class: "scui-message", "data-role": entry.role, children: [
+    /* @__PURE__ */ jsx(Markdown, { value: entry.text }),
+    /* @__PURE__ */ jsx(ContextDisclosure, { context: entry.context }),
+    entry.truncated ? /* @__PURE__ */ jsx("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null
+  ] });
+}
+function ToolRow({ entry, workspace }) {
+  const [open, setOpen] = useState(entry.status === "pending");
+  const detailId = useId();
+  const target = compactToolTarget(toolTarget(entry.arguments), workspace);
+  const hasDetail = Boolean(entry.arguments || entry.resultText);
+  const category = toolCategory(entry);
+  return /* @__PURE__ */ jsxs("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", class: "scui-tool-head", disabled: !hasDetail, "aria-expanded": hasDetail ? open : void 0, "aria-controls": hasDetail ? detailId : void 0, onClick: () => hasDetail && setOpen((value) => !value), children: [
+      /* @__PURE__ */ jsx("span", { class: "scui-tool-glyph", "aria-hidden": "true", children: { read: "\u25A4", search: "\u2315", edit: "\u270E", command: ">_", test: "\u25C7", web: "\u25CE", agent: "\u2659", other: "\u25C6" }[category] }),
+      /* @__PURE__ */ jsx("strong", { children: entry.label?.split(/__|\//).at(-1)?.replaceAll("_", " ") || "Tool" }),
+      target ? /* @__PURE__ */ jsx("span", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+      /* @__PURE__ */ jsx("span", { class: "scui-spacer" }),
+      /* @__PURE__ */ jsx("span", { "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? "\u25CC" : entry.status === "error" ? "\xD7" : "\u2713" })
+    ] }),
+    hasDetail && open ? /* @__PURE__ */ jsxs("div", { id: detailId, class: "scui-tool-detail", children: [
+      entry.arguments ? /* @__PURE__ */ jsxs("pre", { children: [
+        /* @__PURE__ */ jsx("b", { children: "Input" }),
+        "\n",
+        entry.arguments
+      ] }) : null,
+      entry.resultText ? /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
+        /* @__PURE__ */ jsx("b", { children: "Output" }),
+        "\n",
+        entry.resultText,
+        entry.truncated ? "\n[truncated]" : ""
+      ] }) : null
+    ] }) : null
+  ] });
+}
+function ActivityGroup({ entries, state }) {
+  const active = entries.some((entry) => entry.status === "pending");
+  const [open, setOpen] = useState(active);
+  const id = useId();
+  useEffect(() => {
+    if (active) setOpen(true);
+  }, [active]);
+  return /* @__PURE__ */ jsxs("section", { class: "scui-activity", children: [
+    /* @__PURE__ */ jsxs("button", { class: "scui-activity-head", type: "button", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), children: [
+      /* @__PURE__ */ jsx("span", { class: "scui-fold", "data-open": open, children: "\u203A" }),
+      /* @__PURE__ */ jsx("strong", { children: activitySummary(entries) }),
+      /* @__PURE__ */ jsx("span", { class: "scui-spacer" }),
+      /* @__PURE__ */ jsxs("small", { children: [
+        entries.filter((entry) => entry.status === "completed").length,
+        "/",
+        entries.length
+      ] })
+    ] }),
+    open ? /* @__PURE__ */ jsx("div", { id, children: entries.map((entry) => /* @__PURE__ */ jsx(ToolRow, { entry, workspace: state.workspace }, entry.id)) }) : null
+  ] });
+}
+function TaskPlan({ plan }) {
+  if (!plan.items.length) return null;
+  const complete = plan.items.filter((item) => item.status === "completed" || item.status === "cancelled").length;
+  return /* @__PURE__ */ jsxs("details", { class: "scui-plan", children: [
+    /* @__PURE__ */ jsxs("summary", { children: [
+      /* @__PURE__ */ jsx("span", { children: "Plan" }),
+      /* @__PURE__ */ jsxs("small", { children: [
+        complete,
+        "/",
+        plan.items.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { children: plan.items.map((item) => /* @__PURE__ */ jsxs("li", { "data-status": item.status, children: [
+      /* @__PURE__ */ jsx("i", { "aria-hidden": "true" }),
+      " ",
+      /* @__PURE__ */ jsx("span", { children: item.title })
+    ] }, item.id)) })
+  ] });
+}
+function SessionDetails({ semantics }) {
+  if (!semantics.fidelity && !semantics.residueCount && !semantics.parseErrors && !semantics.subagents.length) return null;
+  return /* @__PURE__ */ jsxs("details", { class: "scui-details", children: [
+    /* @__PURE__ */ jsx("summary", { children: "Session details" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      semantics.fidelity ? /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Fidelity" }),
+        /* @__PURE__ */ jsx("span", { children: semantics.fidelity.replaceAll("_", " ") })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Native records" }),
+        /* @__PURE__ */ jsx("span", { children: semantics.rawRecords })
+      ] }),
+      semantics.residueCount ? /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Residue" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          semantics.residueCount,
+          " retained"
+        ] })
+      ] }) : null,
+      semantics.parseErrors ? /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Parse diagnostics" }),
+        /* @__PURE__ */ jsx("span", { children: semantics.parseErrors })
+      ] }) : null,
+      semantics.subagents.map((agent) => /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          agent.source,
+          " subagent"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          agent.messages,
+          " messages \xB7 ",
+          agent.fidelity.replaceAll("_", " ")
+        ] })
+      ] }, agent.id))
+    ] })
+  ] });
+}
+var conversationMemory = /* @__PURE__ */ new Map();
+function Conversation({ state, adapter, components = {}, slots = {}, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pending = null }) {
+  const scroller = useRef(null);
+  const remembered = conversationMemory.get(memoryKey) ?? { top: null, atBottom: true };
+  const [atBottom, setAtBottom] = useState(remembered.atBottom);
+  const earlierAnchor = useRef(null);
+  const restored = useRef(false);
+  const blocks = groupConversation(state.transcript);
+  const Entry = components.TranscriptEntry ?? TranscriptEntry;
+  const Group = components.ActivityGroup ?? ActivityGroup;
+  const Before = slots.beforeConversation;
+  const After = slots.afterConversation;
+  const Empty = slots.emptyConversation;
+  const pin = () => {
+    if (!scroller.current) return;
+    scroller.current.scrollTop = scroller.current.scrollHeight;
+    setAtBottom(true);
+    conversationMemory.set(memoryKey, { top: scroller.current.scrollTop, atBottom: true });
+  };
+  useLayoutEffect(() => {
+    const element = scroller.current;
+    if (!element) return;
+    const anchor = earlierAnchor.current;
+    if (anchor && state.transcript.length > anchor.entries) {
+      element.scrollTop = anchor.top + (element.scrollHeight - anchor.height);
+      earlierAnchor.current = null;
+      conversationMemory.set(memoryKey, { top: element.scrollTop, atBottom: false });
+      return;
+    }
+    if (!restored.current) {
+      restored.current = true;
+      if (remembered.top !== null && !remembered.atBottom) element.scrollTop = remembered.top;
+      else pin();
+    } else if (atBottom) pin();
+  }, [memoryKey, state.transcript.length, state.busy]);
+  return /* @__PURE__ */ jsxs("div", { class: "scui-conversation-wrap", children: [
+    /* @__PURE__ */ jsx("div", { class: "scui-conversation", ref: scroller, tabIndex: 0, "aria-label": "Conversation", onScroll: (event) => {
+      const element = event.currentTarget;
+      const bottom = element.scrollHeight - element.scrollTop - element.clientHeight <= 64;
+      setAtBottom(bottom);
+      conversationMemory.set(memoryKey, { top: element.scrollTop, atBottom: bottom });
+    }, children: /* @__PURE__ */ jsxs("div", { children: [
+      Before ? /* @__PURE__ */ jsx(Before, { state, adapter, value: null }) : null,
+      /* @__PURE__ */ jsx(TaskPlan, { plan: state.taskPlan }),
+      /* @__PURE__ */ jsx(SessionDetails, { semantics: state.semantics }),
+      state.history.hasEarlier ? /* @__PURE__ */ jsx("button", { class: "scui-load", type: "button", disabled: Boolean(state.operation), onClick: () => {
+        const element = scroller.current;
+        if (element) earlierAnchor.current = { height: element.scrollHeight, top: element.scrollTop, entries: state.transcript.length };
+        setAtBottom(false);
+        adapter.onIntent({ action: "loadEarlier" });
+      }, children: "Load earlier messages" }) : null,
+      !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx(LoadingStatus, { state }) : null,
+      !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
+      blocks.map((block) => block.kind === "activity" ? /* @__PURE__ */ jsx(Group, { value: block.entries, entries: block.entries, state, adapter }, block.id) : /* @__PURE__ */ jsx(Entry, { value: block.entry, entry: block.entry, state, adapter }, block.id)),
+      pending ? /* @__PURE__ */ jsxs("article", { class: "scui-message scui-pending", "data-role": "user", children: [
+        /* @__PURE__ */ jsx(Markdown, { value: pending }),
+        /* @__PURE__ */ jsx("small", { children: state.error && !state.busy ? "Not sent" : "Sending\u2026" })
+      ] }) : null,
+      state.busy ? /* @__PURE__ */ jsxs("div", { class: "scui-working", role: "status", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2726" }),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsxs("small", { children: [
+          harnessDisplayName(state.harness),
+          " is working"
+        ] })
+      ] }) : null,
+      After ? /* @__PURE__ */ jsx(After, { state, adapter, value: null }) : null
+    ] }) }),
+    !atBottom ? /* @__PURE__ */ jsx("button", { class: "scui-latest", type: "button", onClick: pin, children: "\u2193 Latest" }) : null
+  ] });
+}
+export {
+  ActivityGroup,
+  Conversation,
+  LoadingStatus,
+  RequestCard,
+  SessionDetails,
+  TaskPlan,
+  TranscriptEntry
+};