@braincrew-lab/langchain-canvas 0.2.0 → 0.4.9

package/dist/langgraph/index.d.ts

@@ -0,0 +1,68 @@
+import { C as CanvasTransport, E as ElementSelection, S as StreamEvent } from '../types-BfGP9R2I.js';
+
+/**
+ * `langgraphTransport` — speak to a LangGraph server without a translator
+ * in between.
+ *
+ * Built on the official `@langchain/langgraph-sdk` (the server's wire format
+ * belongs to LangGraph and evolves with it — we ride the official client
+ * rather than hand-parse it). Verified against `langgraph dev` (local);
+ * hosted LangGraph Platform is untested — open an issue if you need it.
+ *
+ * Per user turn it: maps the canvas thread id to the UUID LangGraph requires,
+ * makes sure the thread exists, frames any element selections into the
+ * message (targeted edits), then streams the run with
+ * `streamMode: ["messages-tuple", "custom"]` through the translation in
+ * `translate.ts`.
+ */
+
+interface LangGraphTransportOptions {
+    /** LangGraph server URL, e.g. `http://127.0.0.1:2024` (`langgraph dev`). */
+    url: string;
+    /** Graph/assistant to run, e.g. `"canvas_agent"`. */
+    assistantId: string;
+    /** Extra headers (e.g. auth) passed to the SDK client. */
+    headers?: Record<string, string>;
+}
+/** Frame a targeted edit so the agent changes only the selected element(s). */
+declare function withSelections(message: string, selections: ElementSelection[]): string;
+/**
+ * LangGraph requires UUID thread ids; the canvas allows any string. Non-UUID
+ * ids map deterministically (RFC 4122 v5 over `canvas-thread:<id>`), matching
+ * the mapping the Python bridge example uses — same id in, same UUID out.
+ */
+declare function threadUuid(threadId: string): Promise<string>;
+declare function langgraphTransport(options: LangGraphTransportOptions): CanvasTransport;
+
+/**
+ * Translate a LangGraph run stream into Canvas Wire Protocol events.
+ *
+ * Input: the `{event, data}` chunks the LangGraph SDK yields for a run
+ * streamed with `streamMode: ["messages-tuple", "custom"]`. Output: the
+ * `StreamEvent`s the canvas applies. The mapping:
+ *
+ * - `messages` AIMessageChunk text        → `message.delta`
+ * - `messages` AIMessageChunk tool chunks → `tool.start` (once per call id)
+ * - `messages` tool result                → `tool.end`
+ * - `custom` `canvas.*`                   → passed through untouched
+ * - `error`                               → `error`
+ * - stream end                            → `message.end` + `done`
+ *
+ * The chunk shapes are pinned by a captured fixture from a real
+ * `langgraph dev` run (`__fixtures__/langgraph-run.json`) — notably, model
+ * content arrives as block arrays (`{type: "text" | "tool_use"}`), not plain
+ * strings.
+ */
+
+/** One chunk from `client.runs.stream(...)` — the SDK's `{event, data}` pair. */
+interface LangGraphStreamChunk {
+    event: string;
+    data: unknown;
+}
+/** Text of a message chunk — models may stream content as block lists. */
+declare function chunkText(content: unknown): string;
+declare function translateLangGraphStream(chunks: AsyncIterable<LangGraphStreamChunk> | Iterable<LangGraphStreamChunk>, options?: {
+    messageId?: string;
+}): AsyncGenerator<StreamEvent>;
+
+export { type LangGraphStreamChunk, type LangGraphTransportOptions, chunkText, langgraphTransport, threadUuid, translateLangGraphStream, withSelections };

package/dist/langgraph/index.js

@@ -0,0 +1,111 @@
+import { Client } from '@langchain/langgraph-sdk';
+
+// src/langgraph/transport.ts
+
+// src/langgraph/translate.ts
+function chunkText(content) {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content.filter(
+      (block) => typeof block === "object" && block !== null && block.type === "text" && typeof block.text === "string"
+    ).map((block) => block.text).join("");
+  }
+  return "";
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function* translateLangGraphStream(chunks, options = {}) {
+  const messageId = options.messageId ?? `msg_${Math.random().toString(36).slice(2, 14)}`;
+  const startedTools = /* @__PURE__ */ new Set();
+  for await (const chunk of chunks) {
+    if (chunk.event === "error") {
+      const detail = typeof chunk.data === "string" ? chunk.data : JSON.stringify(chunk.data);
+      yield { type: "error", message: `agent run failed: ${detail}` };
+      continue;
+    }
+    if (chunk.event === "custom") {
+      if (isRecord(chunk.data) && String(chunk.data.type ?? "").startsWith("canvas.")) {
+        yield chunk.data;
+      }
+      continue;
+    }
+    if (chunk.event !== "messages" || !Array.isArray(chunk.data) || chunk.data.length === 0) {
+      continue;
+    }
+    const msg = chunk.data[0];
+    if (!isRecord(msg)) continue;
+    const meta = chunk.data.length > 1 && isRecord(chunk.data[1]) ? chunk.data[1] : {};
+    const fromToolsNode = meta.langgraph_node === "tools";
+    if (msg.type === "AIMessageChunk") {
+      const calls = Array.isArray(msg.tool_call_chunks) ? msg.tool_call_chunks : [];
+      for (const call of calls) {
+        if (!isRecord(call)) continue;
+        const id = typeof call.id === "string" ? call.id : null;
+        const name = typeof call.name === "string" ? call.name : null;
+        if (id && name && !startedTools.has(id)) {
+          startedTools.add(id);
+          yield { type: "tool.start", toolCallId: id, name };
+        }
+      }
+      const text = chunkText(msg.content);
+      if (text && !fromToolsNode) yield { type: "message.delta", messageId, text };
+    } else if (msg.type === "tool") {
+      const id = typeof msg.tool_call_id === "string" ? msg.tool_call_id : null;
+      if (id) yield { type: "tool.end", toolCallId: id, ok: msg.status !== "error" };
+    }
+  }
+  yield { type: "message.end", messageId };
+  yield { type: "done" };
+}
+
+// src/langgraph/transport.ts
+function withSelections(message, selections) {
+  if (selections.length === 0) return message;
+  const listed = selections.map((s) => `- \`${s.selector}\` (data-cid=${s.cid})`).join("\n");
+  const artifactId = selections[0].artifactId;
+  return `${message}
+
+[Targeted edit] Apply the change to these selected element(s) in file \`${artifactId}\`:
+${listed}
+First call read_canvas on the file to get its current content and revision, then call edit_canvas with the element's exact current outer HTML as \`old\` and your replacement as \`new\` (keep the data-cid attribute).`;
+}
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var NAMESPACE_URL = "6ba7b811-9dad-11d1-80b4-00c04fd430c8";
+async function threadUuid(threadId) {
+  if (UUID_RE.test(threadId)) return threadId.toLowerCase();
+  const name = new TextEncoder().encode(`canvas-thread:${threadId}`);
+  const namespace = NAMESPACE_URL.replace(/-/g, "");
+  const namespaceBytes = new Uint8Array(16);
+  for (let i = 0; i < 16; i++) namespaceBytes[i] = parseInt(namespace.slice(i * 2, i * 2 + 2), 16);
+  const payload = new Uint8Array(namespaceBytes.length + name.length);
+  payload.set(namespaceBytes);
+  payload.set(name, namespaceBytes.length);
+  const digest = new Uint8Array(await crypto.subtle.digest("SHA-1", payload)).slice(0, 16);
+  digest[6] = digest[6] & 15 | 80;
+  digest[8] = digest[8] & 63 | 128;
+  const hex = [...digest].map((b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function langgraphTransport(options) {
+  const client = new Client({ apiUrl: options.url, defaultHeaders: options.headers });
+  const knownThreads = /* @__PURE__ */ new Set();
+  return {
+    async *stream(request) {
+      const threadId = await threadUuid(request.threadId);
+      if (!knownThreads.has(threadId)) {
+        await client.threads.create({ threadId, ifExists: "do_nothing" });
+        knownThreads.add(threadId);
+      }
+      const message = withSelections(request.message, request.selections ?? []);
+      const chunks = client.runs.stream(threadId, options.assistantId, {
+        input: { messages: [{ role: "user", content: message }] },
+        streamMode: ["messages-tuple", "custom"],
+        signal: request.signal
+      });
+      yield* translateLangGraphStream(chunks);
+    }
+  };
+}
+
+export { chunkText, langgraphTransport, threadUuid, translateLangGraphStream, withSelections };

package/dist/styles.css

@@ -143,8 +143,74 @@
 .cv-undo button:hover:not(:disabled) { background: var(--cv-surface); }
 .cv-undo button:disabled { opacity: 0.35; cursor: default; }
 
-.cv-versions { display: flex; align-items: center; gap: 6px; }
-.cv-versions__label { font-size: 12px; color: var(--cv-muted); font-variant-numeric: tabular-nums; }
+.cv-versions { position: relative; display: flex; align-items: center; gap: 6px; }
+.cv-versions__label {
+  font-size: 12px;
+  color: var(--cv-muted);
+  font-variant-numeric: tabular-nums;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 6px;
+}
+.cv-versions__label:hover { background: var(--cv-surface); color: var(--cv-text); }
+.cv-versions__list {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 220px;
+  max-height: 260px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  border: 1px solid var(--cv-border);
+  border-radius: 10px;
+  background: var(--cv-surface);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.cv-versions__list button {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--cv-text);
+  text-align: left;
+  font-size: 12px;
+  cursor: pointer;
+}
+.cv-versions__list button:hover { background: var(--cv-bg); }
+.cv-versions__list button.is-current { background: var(--cv-bg); font-weight: 600; }
+.cv-versions__v { color: var(--cv-muted); font-variant-numeric: tabular-nums; flex: none; }
+.cv-versions__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Historical snapshot view: content is visible and scrollable but not editable
+   (children lose hit-testing; the scroll container itself still gets the wheel). */
+.cv-history-banner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 14px;
+  font-size: 12px;
+  color: var(--cv-muted);
+  background: var(--cv-surface);
+  border-bottom: 1px solid var(--cv-border);
+}
+.cv-history-banner button {
+  border: none;
+  background: none;
+  color: var(--cv-accent, #4f46e5);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+.cv-body--history > * { pointer-events: none; }
 .cv-versions__nav {
   width: 24px;
   height: 24px;
@@ -212,16 +278,6 @@
 .cv-body--flush { padding: 0; overflow: hidden; }
 .cv-fallback { color: var(--cv-muted); font-size: 14px; }
 
-/* Browsing an old version: a preview, not an editing surface. Interaction is
-   blocked wholesale — renderers patch by artifact id, so edits made "in the
-   past" would silently overwrite the live version. */
-.cv-body--history > :not(.cv-history-note) { pointer-events: none; user-select: none; }
-.cv-history-note {
-  position: sticky; top: 0; z-index: 5; margin-bottom: 12px;
-  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
-  color: var(--cv-muted); background: var(--cv-surface); border: 1px solid var(--cv-border);
-}
-
 /* --- inline editing (document / table / slides) ------------------------------- */
 
 .cv-edit-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@@ -414,23 +470,6 @@
 .cv-sheet-tools__filter { min-width: 96px; max-width: 160px; }
 .cv-sheet-tools__sort:focus, .cv-sheet-tools__filter:focus { outline: none; border-color: var(--cv-accent); }
 .cv-sheet-tools__hint { margin-left: auto; font-size: 11px; color: var(--cv-muted); }
-
-/* selection formatting cluster — reads as one tight group between separators */
-.cv-sheet-tools__fmt { display: inline-flex; align-items: center; gap: 3px; }
-.cv-sheet-tools__fmt button:disabled,
-.cv-sheet-tools button:disabled { opacity: 0.4; cursor: default; }
-.cv-sheet-tools button:disabled:hover { border-color: var(--cv-border); color: var(--cv-text); }
-.cv-sheet-tools__bold, .cv-sheet-tools__align { width: 28px; padding: 4px 0 !important; text-align: center; }
-.cv-sheet-tools__bold--on,
-.cv-sheet-tools__freeze--on {
-  background: var(--cv-accent-weak) !important; border-color: var(--cv-accent) !important;
-  color: var(--cv-accent) !important;
-}
-.cv-sheet-tools__color {
-  width: 28px; height: 26px; padding: 2px; border: 1px solid var(--cv-border);
-  border-radius: 6px; background: var(--cv-bg); cursor: pointer;
-}
-.cv-sheet-tools__color:disabled { opacity: 0.4; cursor: default; }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
 .cv-sheet .fortune-container { height: 100% !important; width: 100% !important; }
 .cv-sheet--empty { display: grid; place-items: center; height: 200px; color: var(--cv-muted); font-size: 14px; }
@@ -640,31 +679,6 @@
 .cv-free__fmt input[type="number"] { width: 46px; height: 24px; border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text); font-size: 12px; padding: 0 4px; }
 .cv-free__fmt input[type="color"] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--cv-border); border-radius: 5px; background: none; cursor: pointer; }
 
-/* multi-select: marquee, selection state, floating action bar */
-.cv-free { outline: none; } /* the canvas is focusable for keyboard nudge/shortcuts */
-.cv-free:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; border-radius: 4px; }
-.cv-free__marquee {
-  position: absolute; z-index: 7; pointer-events: none;
-  border: 1px solid var(--cv-accent);
-  background: color-mix(in srgb, var(--cv-accent) 10%, transparent);
-  border-radius: 2px;
-}
-.cv-free__el--selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
-.cv-free__multibar {
-  position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 8px));
-  display: flex; align-items: center; gap: 2px;
-  padding: 3px; background: var(--cv-bg); border: 1px solid var(--cv-border);
-  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); cursor: default;
-}
-.cv-free__multibar--below { transform: translate(-50%, 8px); }
-.cv-free__multibar button {
-  min-width: 24px; height: 24px; padding: 0 6px; border: none; border-radius: 5px;
-  background: transparent; color: var(--cv-text); cursor: pointer; font-size: 12px; white-space: nowrap;
-}
-.cv-free__multibar button:hover { background: var(--cv-surface); }
-.cv-free__multibar button:disabled { opacity: 0.4; cursor: default; background: transparent; }
-.cv-free__multibar-del:hover { background: #fee2e2 !important; color: #dc2626; }
-
 /* toolbar: background swatch + present button */
 .cv-deck__bg input[type="color"] {
   width: 30px; height: 30px; padding: 0;
@@ -708,22 +722,6 @@
   background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px; padding: 12px 16px; cursor: default; white-space: pre-wrap;
 }
-/* Deck progress: a hairline track pinned to the bottom edge, plus a counter chip. */
-.cv-present__progress {
-  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
-  background: rgba(255, 255, 255, 0.08);
-}
-.cv-present__progress-fill {
-  height: 100%; background: var(--cv-accent);
-  transition: width 0.28s ease;
-}
-@media (prefers-reduced-motion: reduce) { .cv-present__progress-fill { transition: none; } }
-.cv-present__count {
-  position: absolute; top: 16px; right: 20px;
-  color: #9aa4b2; font-size: 13px; font-variant-numeric: tabular-nums;
-  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 999px; padding: 3px 10px; cursor: default;
-}
 
 /* in-place editing cues */
 .cv-word .cv-doc { cursor: text; }
@@ -1154,36 +1152,6 @@
   color: var(--cv-muted);
 }
 
-/* --- PDF viewer ---------------------------------------------------------------- */
-
-/* Fills the flush body outright — `flex: 1` alone collapsed the iframe to its
-   content height (a thin strip of page) because `.cv-body` is a block, not a
-   flex container. */
-.cv-pdf-panel { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
-.cv-pdf-tools {
-  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
-  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
-}
-.cv-pdf-tools button {
-  font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--cv-border);
-  border-radius: 6px; background: var(--cv-bg); color: var(--cv-text); cursor: pointer;
-}
-.cv-pdf-tools button:hover { border-color: var(--cv-accent); color: var(--cv-accent); }
-.cv-pdf-tools__name {
-  font-size: 12px; font-weight: 600; color: var(--cv-muted);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
-}
-.cv-pdf-tools__spacer { flex: 1; }
-.cv-pdf-tools__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 2px; }
-.cv-pdf-tools__zoom { display: inline-flex; align-items: center; gap: 3px; }
-.cv-pdf-tools__zoom button { min-width: 26px; }
-.cv-pdf-tools__zoom-label {
-  min-width: 52px; font-variant-numeric: tabular-nums; color: var(--cv-muted);
-}
-.cv-pdf { position: relative; flex: 1; min-height: 0; background: var(--cv-surface); }
-.cv-pdf__frame { display: block; width: 100%; height: 100%; border: 0; }
-.cv-pdf--empty { display: grid; place-items: center; min-height: 200px; color: var(--cv-muted); }
-
 /* --- inline artifact card (for the transcript) -------------------------------- */
 
 .cv-card {
@@ -1243,6 +1211,63 @@
 
 /* --- responsive --------------------------------------------------------------- */
 
+/* --- file artifact (uploads shown as themselves) ------------------------------ */
+
+.cv-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+.cv-file__image,
+.cv-file__cover {
+  max-width: 100%;
+  max-height: 60vh;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: #fff;
+}
+.cv-file__excerpt {
+  width: 100%;
+  max-height: 40vh;
+  overflow: auto;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: var(--cv-bg);
+  font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--cv-text);
+}
+.cv-file__card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: var(--cv-bg);
+}
+.cv-file__icon { font-size: 24px; line-height: 1; }
+.cv-file__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.cv-file__meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cv-file__facts { font-size: 11px; color: var(--cv-muted); }
+.cv-file__download {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--cv-text);
+  text-decoration: none;
+}
+.cv-file__download:hover { border-color: var(--cv-accent); }
+
 /* Tablet / narrow desktop: tighten paddings, let toolbars wrap. */
 @media (max-width: 900px) {
   .cv-body { padding: 16px; }