@volter-ai-dev/supercode-ui 0.1.18 → 0.1.21

package/composer.mjs

@@ -82,6 +82,7 @@ function boundedSet(map, key, value) {
 // src/icon.jsx
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var ICONS = {
+  attach: () => /* @__PURE__ */ jsx("path", { d: "M6.25 9.75 10.6 5.4a2.1 2.1 0 0 1 2.97 2.97l-5.4 5.4a3.3 3.3 0 0 1-4.67-4.66l5.52-5.52" }),
   back: () => /* @__PURE__ */ jsx("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
   check: () => /* @__PURE__ */ jsx("path", { d: "m4 9 3.25 3.25L14 5.5" }),
   chevron: () => /* @__PURE__ */ jsx("path", { d: "m7 4.5 4.5 4.5L7 13.5" }),
@@ -97,6 +98,11 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "M9 3.5v10" }),
     /* @__PURE__ */ jsx("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
   ] }),
+  image: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3.5", width: "12", height: "11", rx: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.5", cy: "7", r: "1.25" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.5 13 3.25-3 2.1 1.85 1.65-1.5L14 13" })
+  ] }),
   menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
     /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
@@ -122,6 +128,107 @@ function UiIcon({ name, size = 16, class: className = "" }) {
   return /* @__PURE__ */ jsx("svg", { class: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Glyph, {}) });
 }
 
+// src/context.jsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var MAX_CONTEXT_ITEMS = 32;
+var MAX_IMAGE_ITEMS = 4;
+var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+function normalizeContext(value) {
+  return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
+    if (!item || typeof item.label !== "string" || typeof item.detail !== "string") return [];
+    const label = item.label.trim().slice(0, 200);
+    const detail = item.detail.slice(0, 2e4);
+    if (!label || !detail) return [];
+    return [{
+      ...typeof item.id === "string" && item.id ? { id: item.id.slice(0, 2e3) } : {},
+      ...typeof item.kind === "string" && item.kind ? { kind: item.kind.slice(0, 100) } : {},
+      label,
+      detail
+    }];
+  }).slice(0, MAX_CONTEXT_ITEMS);
+}
+function mergeContext(current, picked) {
+  const next = [...current];
+  const seen = new Set(current.map((item) => item.id ? `id:${item.id}` : `value:${item.kind ?? ""}\0${item.label}\0${item.detail}`));
+  for (const item of normalizeContext(picked)) {
+    const key = item.id ? `id:${item.id}` : `value:${item.kind ?? ""}\0${item.label}\0${item.detail}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    next.push(item);
+    if (next.length === MAX_CONTEXT_ITEMS) break;
+  }
+  return next;
+}
+function normalizeImages(value) {
+  const seen = /* @__PURE__ */ new Set();
+  return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
+    if (!item || typeof item.label !== "string" || typeof item.url !== "string") return [];
+    const label = item.label.trim().slice(0, 200);
+    const url = item.url;
+    if (!label || seen.has(url) || !(url.startsWith("data:image/") || url.startsWith("https://") || url.startsWith("http://"))) return [];
+    seen.add(url);
+    return [{
+      ...typeof item.id === "string" && item.id ? { id: item.id.slice(0, 2e3) } : {},
+      label,
+      url
+    }];
+  }).slice(0, MAX_IMAGE_ITEMS);
+}
+function mergeImages(current, picked) {
+  const next = [...current];
+  const seen = new Set(current.map((item) => item.url));
+  for (const item of normalizeImages(picked)) {
+    if (seen.has(item.url)) continue;
+    seen.add(item.url);
+    next.push(item);
+    if (next.length === MAX_IMAGE_ITEMS) break;
+  }
+  return next;
+}
+function partitionAttachments(value) {
+  const values = Array.isArray(value) ? value : value ? [value] : [];
+  const context = [];
+  const images = [];
+  for (const item of values) {
+    if (item && typeof item.label === "string" && item.label.trim() && typeof item.detail === "string" && item.detail) context.push(item);
+    else if (item && typeof item.label === "string" && item.label.trim() && typeof item.url === "string" && (item.url.startsWith("data:image/") || item.url.startsWith("https://") || item.url.startsWith("http://"))) images.push(item);
+    else throw new Error("The attachment picker returned an invalid item.");
+  }
+  return { context, images };
+}
+async function imageAttachmentsFromFiles(value) {
+  const files = Array.from(value ?? []).filter((file) => file?.type?.startsWith("image/"));
+  if (files.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images at a time.`);
+  return Promise.all(files.map(async (file) => {
+    if (!IMAGE_TYPES.has(file.type)) throw new Error(`${file.name || "That image"} is not PNG, JPEG, GIF, or WebP.`);
+    if (file.size > MAX_IMAGE_BYTES) throw new Error(`${file.name || "That image"} is larger than 5 MB.`);
+    const url = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error ?? new Error(`Could not read ${file.name || "image"}.`));
+      reader.readAsDataURL(file);
+    });
+    return { id: `${file.name}:${file.size}:${file.lastModified}`, label: file.name || "Pasted image", url };
+  }));
+}
+function ContextTray({ items, onRemove }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx2("div", { class: "scui-compose-context", "aria-label": "Attached context", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
+    /* @__PURE__ */ jsx2(UiIcon, { name: "attach", size: 12 }),
+    /* @__PURE__ */ jsx2("strong", { children: item.label }),
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove context ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) })
+  ] }, item.id ?? `${item.label}:${index}`)) });
+}
+function ImageTray({ items, onRemove }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx2("div", { class: "scui-compose-images", "aria-label": "Attached images", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
+    /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }),
+    /* @__PURE__ */ jsx2("strong", { children: item.label }),
+    onRemove ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove image ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) }) : null
+  ] }, item.id ?? `${item.label}:${index}`)) });
+}
+
 // src/textarea.js
 import { useLayoutEffect } from "preact/hooks";
 function useAutosizeTextarea(ref, value) {
@@ -137,7 +244,7 @@ function useAutosizeTextarea(ref, value) {
 }
 
 // src/composer.jsx
-import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
 var composerMemory = /* @__PURE__ */ new Map();
 function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   if (state.mode !== "mirror" || state.canSend) return null;
@@ -147,29 +254,36 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   const resume = canContinueHere(state);
   const join = state.canAttach;
   const branch = state.canBranch;
-  if (!resume && !join && !branch) return /* @__PURE__ */ jsx2("div", { class: "scui-continuation", children: /* @__PURE__ */ jsxs2("span", { children: [
-    /* @__PURE__ */ jsx2("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
-    /* @__PURE__ */ jsx2("small", { children: "This session cannot be continued by an available harness." })
+  if (!resume && !join && !branch) return /* @__PURE__ */ jsx3("div", { class: "scui-continuation", children: /* @__PURE__ */ jsxs3("span", { children: [
+    /* @__PURE__ */ jsx3("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+    /* @__PURE__ */ jsx3("small", { children: "This session cannot be continued by an available harness." })
   ] }) });
-  return /* @__PURE__ */ jsxs2("div", { class: "scui-continuation", children: [
-    /* @__PURE__ */ jsxs2("span", { children: [
-      /* @__PURE__ */ jsx2("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
-      /* @__PURE__ */ jsx2("small", { children: join ? "Join the proven live runtime without taking it over." : resume ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
+  return /* @__PURE__ */ jsxs3("div", { class: "scui-continuation", children: [
+    /* @__PURE__ */ jsxs3("span", { children: [
+      /* @__PURE__ */ jsx3("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+      /* @__PURE__ */ jsx3("small", { children: join ? "Join the proven live runtime without taking it over." : resume ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
     ] }),
-    /* @__PURE__ */ jsx2("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere })
+    /* @__PURE__ */ jsx3("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere })
   ] });
 }
 function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, onPending, onDraftRestored }) {
-  const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, queue: [] };
+  const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, context: [], images: [], queue: [] };
   const [draft, setDraft] = useState(remembered.draft);
-  const [queue, setQueue] = useState(remembered.queue);
+  const [context, setContext] = useState(remembered.context ?? []);
+  const [images, setImages] = useState(remembered.images ?? []);
+  const [queue, setQueue] = useState((remembered.queue ?? []).map((item) => ({ ...item, context: item.context ?? [], images: item.images ?? [] })));
   const [dispatching, setDispatching] = useState(false);
+  const [picking, setPicking] = useState(false);
+  const [pickerError, setPickerError] = useState(null);
   const textarea = useRef(null);
   useAutosizeTextarea(textarea, draft);
-  const remember = (nextDraft, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, queue: nextQueue });
+  const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
+  useEffect(() => {
+    remember(draft, context, images, queue);
+  }, [draft, context, images, memoryKey, queue]);
   const updateQueue = (update) => setQueue((items) => {
     const next = update(items);
-    remember(draft, next);
+    remember(draft, context, images, next);
     return next;
   });
   const queueBlocked = state.busy || pendingStatus !== null || dispatching;
@@ -179,9 +293,9 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       const [next, ...rest] = queue;
       setDispatching(true);
       setQueue(rest);
-      remember(draft, rest);
-      onPending?.(next);
-      adapter.onIntent({ action: "send", text: next });
+      remember(draft, context, images, rest);
+      onPending?.(next.text, next.context, next.images);
+      adapter.onIntent({ action: "send", text: next.text, ...next.context.length ? { context: next.context } : {}, ...next.images.length ? { images: next.images } : {} });
     }
   }, [adapter, draft, memoryKey, onPending, queue, queueBlocked, state.canSend]);
   useEffect(() => {
@@ -193,7 +307,11 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   useEffect(() => {
     if (!restoreDraft) return;
     setDraft(restoreDraft.text);
-    remember(restoreDraft.text, queue);
+    const restoredContext = normalizeContext(restoreDraft.context);
+    const restoredImages = normalizeImages(restoreDraft.images);
+    setContext(restoredContext);
+    setImages(restoredImages);
+    remember(restoreDraft.text, restoredContext, restoredImages, queue);
     textarea.current?.focus({ preventScroll: true });
     onDraftRestored?.(restoreDraft.id);
   }, [onDraftRestored, restoreDraft?.id]);
@@ -201,43 +319,100 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
     return () => clearTimeout(timer);
   }, [adapter, draft]);
+  const pickContext = () => {
+    if (!adapter.pickContext || state.mode !== "control" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
+    setPicking(true);
+    setPickerError(null);
+    Promise.resolve().then(() => adapter.pickContext()).then((picked) => {
+      const attachments = partitionAttachments(picked);
+      if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+      if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      setContext((current) => {
+        const next = mergeContext(current, attachments.context);
+        remember(draft, next, images, queue);
+        return next;
+      });
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        remember(draft, context, next, queue);
+        return next;
+      });
+    }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+  };
+  const pasteImages = (event) => {
+    const files = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith("image/"));
+    if (!files.length) return;
+    event.preventDefault();
+    if (images.length + files.length > MAX_IMAGE_ITEMS) {
+      setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      return;
+    }
+    setPicking(true);
+    setPickerError(null);
+    imageAttachmentsFromFiles(files).then((picked) => setImages((current) => {
+      const next = mergeImages(current, picked);
+      remember(draft, context, next, queue);
+      return next;
+    }), (error) => setPickerError(error instanceof Error ? error.message : "Could not paste image.")).finally(() => setPicking(false));
+  };
   const send = () => {
     const text = draft.trim();
     if (!text) return;
-    if (queuesNewMessage) updateQueue((items) => [...items, text]);
+    const message = { text, context, images };
+    if (queuesNewMessage) updateQueue((items) => [...items, message]);
     else if (state.canSend) {
       if (onPending) setDispatching(true);
-      onPending?.(text);
-      adapter.onIntent({ action: "send", text });
+      onPending?.(text, context, images);
+      adapter.onIntent({ action: "send", text, ...context.length ? { context } : {}, ...images.length ? { images } : {} });
     } else return;
     setDraft("");
-    remember("", queuesNewMessage ? [...queue, text] : queue);
+    setContext([]);
+    setImages([]);
+    remember("", [], [], queuesNewMessage ? [...queue, message] : queue);
   };
-  return /* @__PURE__ */ jsxs2("div", { class: "scui-compose", children: [
-    queue.length ? /* @__PURE__ */ jsxs2("div", { class: "scui-queue", children: [
-      /* @__PURE__ */ jsxs2("strong", { children: [
+  return /* @__PURE__ */ jsxs3("div", { class: "scui-compose", children: [
+    queue.length ? /* @__PURE__ */ jsxs3("div", { class: "scui-queue", children: [
+      /* @__PURE__ */ jsxs3("strong", { children: [
         queue.length,
         " queued"
       ] }),
-      queue.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
-        item,
-        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 13 }) })
-      ] }, `${index}:${item}`))
+      queue.map((item, index) => /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsxs3("span", { children: [
+          item.text,
+          item.context.length + item.images.length ? /* @__PURE__ */ jsxs3("small", { children: [
+            item.context.length + item.images.length,
+            " attached"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx3(UiIcon, { name: "close", size: 13 }) })
+      ] }, `${index}:${item.text}`))
     ] }) : null,
-    /* @__PURE__ */ jsxs2("div", { class: "scui-envelope", children: [
-      /* @__PURE__ */ jsx2("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onInput: (event) => {
+    /* @__PURE__ */ jsx3(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
+      const next = items.filter((_, itemIndex) => itemIndex !== index);
+      remember(draft, context, next, queue);
+      return next;
+    }) }),
+    /* @__PURE__ */ jsx3(ContextTray, { items: context, onRemove: (index) => setContext((items) => {
+      const next = items.filter((_, itemIndex) => itemIndex !== index);
+      remember(draft, next, images, queue);
+      return next;
+    }) }),
+    pickerError ? /* @__PURE__ */ jsx3("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
+    /* @__PURE__ */ jsxs3("div", { class: "scui-envelope", children: [
+      adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx3("button", { class: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS, onClick: pickContext, children: picking ? /* @__PURE__ */ jsx3("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx3(UiIcon, { name: "attach", size: 17 }) }) : null,
+      /* @__PURE__ */ jsx3("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onPaste: pasteImages, onInput: (event) => {
         const value = event.currentTarget.value;
         setDraft(value);
-        remember(value, queue);
+        remember(value, context, images, queue);
       }, onKeyDown: (event) => {
         if (isSendKey(event)) {
           event.preventDefault();
           send();
         }
       } }),
-      /* @__PURE__ */ jsxs2("span", { children: [
-        state.busy ? /* @__PURE__ */ jsx2("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx2(UiIcon, { name: "stop", size: 15 }) }) : null,
-        /* @__PURE__ */ jsx2("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx2(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
+      /* @__PURE__ */ jsxs3("span", { children: [
+        state.busy ? /* @__PURE__ */ jsx3("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx3(UiIcon, { name: "stop", size: 15 }) }) : null,
+        /* @__PURE__ */ jsx3("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx3(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
       ] })
     ] })
   ] });

package/controller.mjs

@@ -99,6 +99,23 @@ function projectContext(context) {
   return projected.length ? projected : undefined;
 }
 
+function projectImages(images) {
+  if (!Array.isArray(images)) return undefined;
+  const projected = images.flatMap((item) => {
+    if (!item || typeof item !== 'object' || typeof item.label !== 'string') return [];
+    const url = typeof item.url === 'string' && !item.url.endsWith('\n…')
+      && (!item.url.startsWith('data:image/') || item.url.length <= 256_000)
+      ? item.url
+      : null;
+    return [{
+      ...(typeof item.id === 'string' ? { id: item.id } : {}),
+      label: item.label,
+      ...(url ? { url } : {}),
+    }];
+  }).slice(0, 4);
+  return projected.length ? projected : undefined;
+}
+
 function requestSummary(entry) {
   const options = Array.isArray(entry.options)
     ? entry.options.map((option) => option?.name).filter(Boolean).join(' / ')
@@ -113,6 +130,7 @@ function projectConversationEntry(entry, maxEntryChars) {
     if (entry.visibility === 'context') return null;
     const body = truncate(entry.text, maxEntryChars);
     const context = projectContext(entry.context);
+    const images = projectImages(entry.images);
     return {
       id: entry.id,
       role: entry.role,
@@ -121,6 +139,7 @@ function projectConversationEntry(entry, maxEntryChars) {
       ts: timestampFromMetadata(entry.metadata),
       truncated: body.truncated,
       ...(context ? { context } : {}),
+      ...(images ? { images } : {}),
     };
   }
   if (entry.kind === 'tool') {
@@ -376,10 +395,10 @@ async function dispatchStandard(controller, intent, options) {
   const active = snapshot.activeSessionKey;
   if (intent.action === 'mounted') return;
   if (intent.action === 'attach') return controller.dispatch({ type: 'observe', sessionKey: intent.key });
-  if (intent.action === 'send') return controller.dispatch({ type: 'send', text: intent.text });
+  if (intent.action === 'send') return controller.dispatch({ type: 'send', text: intent.text, ...(intent.context?.length ? { context: intent.context } : {}), ...(intent.images?.length ? { images: intent.images } : {}) });
   if (intent.action === 'new') {
     await controller.dispatch({ type: 'start', harness: intent.harness });
-    return controller.dispatch({ type: 'send', text: intent.text });
+    return controller.dispatch({ type: 'send', text: intent.text, ...(intent.context?.length ? { context: intent.context } : {}), ...(intent.images?.length ? { images: intent.images } : {}) });
   }
   if (intent.action === 'resume' && active) return controller.dispatch({ type: 'resume', sessionKey: active });
   if (intent.action === 'join' && active) return controller.dispatch({ type: 'attach', sessionKey: active });