mulmoclaude 0.5.2 → 0.6.0

package/src/plugins/server.ts

@@ -0,0 +1,32 @@
+// Vue-free server-facing barrel for every built-in plugin's MCP
+// binding (ToolDefinition + REST endpoint). Sibling barrels:
+//
+//   - `src/plugins/index.ts`  — REGISTRATIONS with Vue View / Preview
+//                                (frontend uses this; server can't —
+//                                Vue dependency)
+//   - `src/plugins/metas.ts`   — per-plugin META (toolName, apiRoutes,
+//                                workspaceDirs, staticChannels). Both
+//                                server and frontend safe.
+//   - `src/plugins/server.ts`  — THIS FILE: server-only binding table
+//                                (definition + MCP dispatch endpoint).
+//                                Imports each plugin's `definition.ts`
+//                                directly (no Vue, server-safe).
+//
+// **Auto-generated**. Standard plugins (one dir, one META declaring
+// `apiNamespace` + `mcpDispatch`) flow through
+// `_generated/server-bindings.ts`; cross-namespace bindings (image
+// plugins reaching the host's `/api/image/*` routes) and external
+// npm plugins (mindmap / quiz / present3d) live in `_extras.ts`.
+// Adding a standard plugin requires no edit here.
+
+import { ServerPluginBinding } from "./server-bindings-types";
+import { GENERATED_SERVER_BINDINGS } from "./_generated/server-bindings";
+import { EXTRA_SERVER_BINDINGS } from "./_extras";
+
+export type { ServerPluginBinding };
+
+/** All built-in plugin MCP bindings. The two scheduler defs share
+ *  one dispatch URL (the server splits calendar vs task actions via
+ *  the action enum), so the codegen emits both rows pointing at the
+ *  calendar META — see `_generated/server-bindings.ts`. */
+export const BUILT_IN_SERVER_BINDINGS: readonly ServerPluginBinding[] = [...GENERATED_SERVER_BINDINGS, ...EXTRA_SERVER_BINDINGS];

package/src/plugins/skill/Preview.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- Sidebar / chat-history thumbnail for a skill envelope.
+       Single line: extension icon + skill name. The full body and
+       description live behind the canvas's expand toggle. -->
+  <div class="flex items-center gap-1.5 text-sm text-gray-700">
+    <span class="material-icons text-purple-500 text-sm shrink-0">extension</span>
+    <span class="truncate font-medium">{{ skillName }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { SkillData } from "./types";
+
+// Sidebar previews are rendered with `:result="result"` (see
+// SessionSidebar.vue), not `:selected-result`. Codex iter-2 review
+// on PR #1220 — the previous prop name left `props.result`
+// undefined and broke skill rendering in the chat-history sidebar.
+const props = defineProps<{
+  result: ToolResultComplete<SkillData>;
+}>();
+
+const skillName = computed(() => props.result.data?.skillName ?? "skill");
+</script>

package/src/plugins/skill/View.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- The canvas reserves the full pane height for the selected
+       result regardless of how much vertical space it actually
+       needs. Without explicit centering, a short collapsed skill
+       card sits top-anchored with a tall empty void below. Outer
+       is `h-full flex flex-col` so the inner can use `my-auto` to
+       vertically centre when the card is short, while still
+       falling back to natural top-alignment + scrolling when the
+       user expands the markdown body and content overflows
+       (auto-margins collapse to 0 in the overflow case, unlike
+       `justify-content: center` which would clip the top of tall
+       content out of reach). #1218 follow-up. -->
+  <div class="h-full flex flex-col overflow-y-auto p-6">
+    <div class="my-auto max-w-3xl mx-auto w-full">
+      <div class="rounded-lg border border-purple-200 bg-purple-50 shadow-sm">
+        <!-- Collapsed header — clickable. The whole card collapses by
+             default; clicking expands the skill body. The use of
+             `<details>` keeps keyboard / a11y semantics correct. -->
+        <details class="group">
+          <summary class="cursor-pointer list-none p-4 flex items-start gap-3 hover:bg-purple-100/40 rounded-lg" :data-testid="'skill-summary-' + skillName">
+            <span class="material-icons text-purple-600 text-base mt-0.5 shrink-0">extension</span>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-baseline gap-2 flex-wrap">
+                <span class="font-medium text-purple-900">{{ skillName }}</span>
+                <span v-if="skillScope !== 'unknown'" class="text-[10px] uppercase tracking-wide text-purple-500 px-1.5 py-0.5 rounded-full bg-purple-100">
+                  {{ skillScope }}
+                </span>
+              </div>
+              <div v-if="skillDescription" class="text-sm text-gray-700 mt-1">{{ skillDescription }}</div>
+              <div v-else class="text-sm text-gray-500 italic mt-1">{{ t("pluginSkill.noDescription") }}</div>
+            </div>
+            <span class="material-icons text-gray-400 text-base shrink-0 group-open:rotate-180 transition-transform">expand_more</span>
+          </summary>
+
+          <!-- Expanded body — markdown-rendered. -->
+          <div class="border-t border-purple-200 p-4 bg-white rounded-b-lg">
+            <div v-if="skillPath" class="text-[11px] font-mono text-gray-400 mb-3 break-all">{{ skillPath }}</div>
+            <!-- eslint-disable-next-line vue/no-v-html -- DOMPurify-sanitized markdown of the SKILL.md body Claude CLI synthesised. The body comes from the user's local skill file, surfaced verbatim here. -->
+            <div class="markdown-content prose prose-slate max-w-none" v-html="renderedHtml"></div>
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { marked } from "marked";
+import DOMPurify from "dompurify";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { SkillData } from "./types";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  selectedResult: ToolResultComplete<SkillData>;
+}>();
+
+const skillName = computed(() => props.selectedResult.data?.skillName ?? "");
+const skillScope = computed(() => props.selectedResult.data?.skillScope ?? "unknown");
+const skillPath = computed(() => props.selectedResult.data?.skillPath ?? null);
+const skillDescription = computed(() => props.selectedResult.data?.skillDescription ?? null);
+const body = computed(() => props.selectedResult.data?.body ?? "");
+
+const renderedHtml = computed(() => DOMPurify.sanitize(marked(body.value, { breaks: true, gfm: true }) as string));
+</script>
+
+<style scoped>
+.markdown-content :deep(h1) {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+.markdown-content :deep(h2) {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+.markdown-content :deep(h3) {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
+}
+.markdown-content :deep(p) {
+  margin-bottom: 0.75em;
+}
+.markdown-content :deep(ul),
+.markdown-content :deep(ol) {
+  margin-left: 1.5em;
+  margin-bottom: 0.75em;
+}
+.markdown-content :deep(code) {
+  background-color: #f5f5f5;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+.markdown-content :deep(pre) {
+  background-color: #f5f5f5;
+  padding: 0.75em;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin-bottom: 0.75em;
+}
+.markdown-content :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+}
+.markdown-content :deep(blockquote) {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1em;
+  color: #4b5563;
+  margin: 0.75em 0;
+}
+.markdown-content :deep(a) {
+  color: #2563eb;
+  text-decoration: underline;
+}
+</style>

package/src/plugins/skill/definition.ts

@@ -0,0 +1,23 @@
+// Skill plugin — pseudo-tool used only by the client to render
+// `type: "skill"` jsonl entries (#1218). The LLM never invokes this
+// tool directly — it sees the real `Skill` tool defined by Claude
+// CLI; this plugin's job is purely to claim a `toolName` slot in
+// `getPlugin()` so the canvas routes skill envelopes through
+// `View.vue` instead of the default text-response renderer.
+
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "skill";
+
+export const TOOL_DEFINITION: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description: "Internal: collapsed view of a SKILL.md body Claude CLI synthesised after a `Skill` tool invocation.",
+  parameters: {
+    type: "object",
+    properties: {},
+    required: [],
+  },
+};
+
+export const SYSTEM_PROMPT = "";

package/src/plugins/skill/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Skill plugin (#1218) — internal-only, claims `toolName: "skill"` so
+ * the canvas routes synthetic envelopes built by `makeSkillResult`
+ * through `View.vue` instead of the default text-response renderer.
+ *
+ * Discovered automatically by `yarn plugins:codegen` (which scans
+ * `src/plugins/<name>/index.ts` for an exported `REGISTRATION`).
+ */
+
+import type { ToolPlugin } from "gui-chat-protocol/vue";
+import type { PluginRegistration } from "../../tools/types";
+import type { SkillData, SkillArgs } from "./types";
+import { pluginCore, TOOL_NAME } from "./plugin";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+
+export const plugin: ToolPlugin<SkillData, unknown, SkillArgs> = {
+  ...pluginCore,
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export type { SkillData, SkillArgs } from "./types";
+
+export { TOOL_DEFINITION, SYSTEM_PROMPT, executeSkill, pluginCore } from "./plugin";
+export { TOOL_NAME };
+
+export { View, Preview };
+
+const skillPlugin = { plugin };
+export default skillPlugin;
+
+export const REGISTRATION: PluginRegistration = {
+  toolName: TOOL_NAME,
+  entry: plugin,
+};

package/src/plugins/skill/plugin.ts

@@ -0,0 +1,31 @@
+// Skill plugin core — pseudo-tool, never advertised to the LLM.
+// `isEnabled: () => false` keeps it out of the agent's tool list;
+// the plugin only exists so the canvas's `getPlugin("skill")`
+// returns a registration that points the renderer at this View.
+
+import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
+import type { SkillData, SkillArgs } from "./types";
+import { TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+
+export const executeSkill = async (_context: ToolContext, args: SkillArgs): Promise<ToolResult<SkillData, unknown>> => ({
+  data: {
+    skillName: args.skillName,
+    skillScope: args.skillScope,
+    skillPath: args.skillPath,
+    skillDescription: args.skillDescription,
+    body: args.body,
+  },
+  message: args.skillDescription ?? args.skillName,
+});
+
+export const pluginCore: ToolPluginCore<SkillData, unknown, SkillArgs> = {
+  toolDefinition: TOOL_DEFINITION,
+  execute: executeSkill,
+  generatingMessage: "Loading skill...",
+  // Pseudo-tool — only the client builds these envelopes when
+  // parsing `type: "skill"` jsonl entries / `SseSkill` events.
+  isEnabled: () => false,
+  systemPrompt: SYSTEM_PROMPT,
+};

package/src/plugins/skill/types.ts

@@ -0,0 +1,21 @@
+// Wire shape of a `toolName: "skill"` ToolResultComplete envelope —
+// produced by `makeSkillResult` in `src/utils/tools/result.ts` from
+// either a `type: "skill"` jsonl entry on session reload, or a
+// `SseSkill` event broadcast at flush time during a live run.
+
+import type { SkillScope } from "../../types/session";
+
+export interface SkillData {
+  skillName: string;
+  skillScope: SkillScope;
+  skillPath: string | null;
+  skillDescription: string | null;
+  /** Full SKILL.md body as Claude CLI synthesised it. Frontmatter is
+   *  already stripped (Claude CLI does that before injection); the
+   *  body starts with `Base directory for this skill: <path>` and
+   *  ends with `ARGUMENTS: <user message>`. The View renders this
+   *  with markdown when the user expands the collapsed card. */
+  body: string;
+}
+
+export type SkillArgs = SkillData;

package/src/plugins/spreadsheet/Preview.vue

@@ -21,9 +21,7 @@ const props = defineProps<{
   result: ToolResult<SpreadsheetToolData>;
 }>();
 
-const displayTitle = computed(() => {
-  return props.result.title || t("pluginSpreadsheet.previewUntitled");
-});
+const displayTitle = computed(() => props.result.title || t("pluginSpreadsheet.previewUntitled"));
 
 const sheetCount = computed(() => {
   const sheets = props.result.data?.sheets;

package/src/plugins/spreadsheet/View.vue

@@ -41,6 +41,7 @@
           </div>
 
           <!-- Spreadsheet table -->
+          <!-- eslint-disable-next-line vue/no-v-html -- XLSX.utils.sheet_to_html output of app-owned sheet data; trusted in-process render -->
           <div ref="tableContainer" class="table-container" @click="handleTableClick" v-html="renderedHtml"></div>
         </div>
       </div>
@@ -110,7 +111,7 @@ import { computed, ref, watch, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import * as XLSX from "xlsx";
 import type { ToolResult } from "gui-chat-protocol";
-import type { SpreadsheetToolData, SpreadsheetSheet } from "./definition";
+import type { SpreadsheetToolData, SpreadsheetSheet, SpreadsheetEndpoints } from "./definition";
 import {
   SpreadsheetEngine,
   indexToColumn,
@@ -122,15 +123,19 @@ import {
   type CellValue,
 } from "./engine";
 import { applyCellHighlights, clearCellHighlights } from "./cellHighlights";
+import { getArrowKeyOffset, isWithinSheetBounds } from "./keyboardNav";
 import { errorMessage as formatErrorMessage } from "../../utils/errors";
 
 // Import all spreadsheet functions to populate the function registry
 import "./engine/functions";
 import { apiGet, apiPut } from "../../utils/api";
-import { API_ROUTES } from "../../config/apiRoutes";
+import { pluginEndpoints } from "../api";
 import type { FilesContentResponseLike } from "./engine/responseDecoder";
 import { isObj, isRecord } from "../../utils/types";
 
+const endpoints = pluginEndpoints<SpreadsheetEndpoints>("spreadsheet");
+const filesEndpoints = pluginEndpoints<{ content: string }>("files");
+
 const { t } = useI18n();
 
 /**
@@ -202,6 +207,11 @@ function isFilePath(value: unknown): value is string {
   return typeof value === "string" && value.startsWith("artifacts/spreadsheets/") && value.endsWith(".json");
 }
 
+// Editor textarea backing ref. Declared up here (rather than next to
+// the other view-state refs further down) so the `fetchSheets().then`
+// initializer below can assign to it without TDZ.
+const editableData = ref(JSON.stringify(resolvedSheets.value || [], null, 2));
+
 async function fetchSheets(): Promise<void> {
   const raw = props.selectedResult.data?.sheets;
   // Clear any stale error from a previous result BEFORE the early
@@ -218,7 +228,7 @@ async function fetchSheets(): Promise<void> {
     return;
   }
   loading.value = true;
-  const response = await apiGet<FilesContentResponseLike>(API_ROUTES.files.content, { path: raw });
+  const response = await apiGet<FilesContentResponseLike>(filesEndpoints.content, { path: raw });
   if (!response.ok) {
     errorMessage.value = t("pluginSpreadsheet.loadFailed", { error: response.error });
     resolvedSheets.value = [];
@@ -250,7 +260,7 @@ async function persistSheets(sheets: SpreadsheetSheet[]): Promise<void> {
     // Send the full workspace-relative path so the route doesn't have
     // to reconstruct one from a basename — paths under
     // `artifacts/spreadsheets/` are now sharded by YYYY/MM (#764).
-    const result = await apiPut<unknown>(API_ROUTES.plugins.updateSpreadsheet, {
+    const result = await apiPut<unknown>(endpoints.update.url, {
       relativePath: raw,
       sheets,
     });
@@ -273,7 +283,9 @@ async function persistSheets(sheets: SpreadsheetSheet[]): Promise<void> {
 }
 
 const activeSheetIndex = ref(0);
-const editableData = ref(JSON.stringify(resolvedSheets.value || [], null, 2));
+// Editor state declared together with the other refs above. Seeded
+// in the on-mount `fetchSheets().then(...)` block above (the `.value`
+// assignment is in scope by the time that .then callback fires).
 const editorTextarea = ref<HTMLTextAreaElement | null>(null);
 const editorDetails = ref<HTMLDetailsElement | null>(null);
 const tableContainer = ref<HTMLDivElement | null>(null);
@@ -288,7 +300,7 @@ const miniEditorFormula = ref("");
 const miniEditorFormat = ref("");
 
 // Referenced cells state (for formula highlighting)
-const referencedCells = ref<Array<{ row: number; col: number }>>([]);
+const referencedCells = ref<{ row: number; col: number }[]>([]);
 
 // Check if spreadsheet data has been modified
 const hasChanges = computed(() => {
@@ -527,7 +539,7 @@ function handleTableClick(event: MouseEvent) {
   const row = cell.parentElement as HTMLTableRowElement;
 
   const colIndex = cell.cellIndex;
-  const rowIndex = row.rowIndex;
+  const { rowIndex } = row;
 
   // Check if the main editor details is open
   const isEditorOpen = editorDetails.value?.open ?? false;
@@ -620,56 +632,24 @@ watch(
   { flush: "post" },
 );
 
-// Keyboard navigation handler
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+}
+
 function handleKeyboardNavigation(event: KeyboardEvent) {
-  // Only handle arrow keys when mini editor is open and not focused on input
   if (!miniEditorOpen.value || !miniEditorCell.value) return;
-
-  // Don't interfere if user is typing in an input field
-  const target = event.target as HTMLElement;
-  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
-    return;
-  }
+  if (isEditableTarget(event.target)) return;
 
   const { row, col } = miniEditorCell.value;
-  let newRow = row;
-  let newCol = col;
-
-  // Determine new position based on arrow key
-  switch (event.key) {
-    case "ArrowUp":
-      newRow = Math.max(0, row - 1);
-      break;
-    case "ArrowDown":
-      newRow = row + 1;
-      break;
-    case "ArrowLeft":
-      newCol = Math.max(0, col - 1);
-      break;
-    case "ArrowRight":
-      newCol = col + 1;
-      break;
-    default:
-      return; // Not an arrow key, ignore
-  }
+  const next = getArrowKeyOffset(event.key, row, col);
+  if (!next) return;
 
-  // Get current sheet data to validate bounds
   try {
     const sheets = JSON.parse(editableData.value);
-    const currentSheet = sheets[activeSheetIndex.value];
-
-    if (!currentSheet || !currentSheet.data) return;
-
-    // Validate new position is within bounds
-    if (newRow < 0 || newRow >= currentSheet.data.length || newCol < 0 || !currentSheet.data[newRow] || newCol >= currentSheet.data[newRow].length) {
-      return; // Out of bounds, ignore
-    }
-
-    // Prevent default scrolling behavior
+    if (!isWithinSheetBounds(sheets[activeSheetIndex.value], next.row, next.col)) return;
     event.preventDefault();
-
-    // Move to new cell
-    openMiniEditor(newRow, newCol);
+    openMiniEditor(next.row, next.col);
   } catch (error) {
     console.error("Failed to navigate cells:", error);
   }

package/src/plugins/spreadsheet/cellHighlights.ts

@@ -28,9 +28,8 @@ export interface HighlightableContainer {
   // Overload: the spreadsheet root container is known to return a
   // table when asked for the table id, so callers can keep the
   // result strongly typed without casting.
-  querySelector(selector: "#spreadsheet-table"): HighlightableTable | null;
-  querySelector(selector: string): HighlightableElement | null;
-  querySelectorAll(selector: string): ArrayLike<HighlightableElement> & Iterable<HighlightableElement>;
+  querySelector: ((selector: "#spreadsheet-table") => HighlightableTable | null) & ((selector: string) => HighlightableElement | null);
+  querySelectorAll: (selector: string) => ArrayLike<HighlightableElement> & Iterable<HighlightableElement>;
 }
 
 export interface CellCoord {

package/src/plugins/spreadsheet/definition.ts

@@ -1,6 +1,9 @@
 import type { ToolDefinition } from "gui-chat-protocol";
+import { META } from "./meta";
+import type { ResolvedRoute } from "../meta-types";
 
-export const TOOL_NAME = "presentSpreadsheet";
+export const TOOL_NAME = META.toolName;
+export type SpreadsheetEndpoints = { readonly [K in keyof typeof META.apiRoutes]: ResolvedRoute };
 
 export interface SpreadsheetCell {
   v: string | number;
@@ -9,7 +12,7 @@ export interface SpreadsheetCell {
 
 export interface SpreadsheetSheet {
   name: string;
-  data: Array<Array<SpreadsheetCell>>;
+  data: SpreadsheetCell[][];
 }
 
 export interface SpreadsheetToolData {

package/src/plugins/spreadsheet/index.ts

@@ -1,18 +1,20 @@
-import type { ToolPlugin } from "../../tools/types";
+import type { PluginRegistration, ToolPlugin } from "../../tools/types";
 import type { ToolResult } from "gui-chat-protocol";
-import toolDefinition, { TOOL_NAME } from "./definition";
-import type { SpreadsheetToolData } from "./definition";
+import toolDefinition, { TOOL_NAME, type SpreadsheetEndpoints, type SpreadsheetToolData } from "./definition";
+import { pluginEndpoints } from "../api";
+import { wrapWithScope } from "../scope";
 import View from "./View.vue";
 import Preview from "./Preview.vue";
-import { apiPost } from "../../utils/api";
-import { API_ROUTES } from "../../config/apiRoutes";
+import { apiCall } from "../../utils/api";
 import { makeUuid } from "../../utils/id";
 
 const spreadsheetPlugin: ToolPlugin<SpreadsheetToolData> = {
   toolDefinition,
 
   async execute(_context, args) {
-    const result = await apiPost<ToolResult<SpreadsheetToolData>>(API_ROUTES.plugins.presentSpreadsheet, args);
+    const endpoints = pluginEndpoints<SpreadsheetEndpoints>("spreadsheet");
+    const { method, url } = endpoints.create;
+    const result = await apiCall<ToolResult<SpreadsheetToolData>>(url, { method, body: args });
     if (!result.ok) {
       return {
         toolName: TOOL_NAME,
@@ -29,9 +31,14 @@ const spreadsheetPlugin: ToolPlugin<SpreadsheetToolData> = {
 
   isEnabled: () => true,
   generatingMessage: "Creating spreadsheet...",
-  viewComponent: View,
-  previewComponent: Preview,
+  viewComponent: wrapWithScope("spreadsheet", View),
+  previewComponent: wrapWithScope("spreadsheet", Preview),
 };
 
 export default spreadsheetPlugin;
 export { TOOL_NAME };
+
+export const REGISTRATION: PluginRegistration = {
+  toolName: TOOL_NAME,
+  entry: spreadsheetPlugin,
+};

package/src/plugins/spreadsheet/keyboardNav.ts

@@ -0,0 +1,38 @@
+// Pure helpers behind the spreadsheet mini-editor's arrow-key
+// navigation. Lifted out of View.vue so each rule can be unit-tested
+// without spinning up Vue or a DOM.
+
+export interface CellPosition {
+  row: number;
+  col: number;
+}
+
+// Sheet shape we actually rely on — the mini-editor only reads
+// `data` as a 2D array, so the type is intentionally loose to match
+// what arrives from `JSON.parse(editableData.value)`.
+export interface SheetLike {
+  data?: unknown[][];
+}
+
+export function getArrowKeyOffset(key: string, row: number, col: number): CellPosition | null {
+  switch (key) {
+    case "ArrowUp":
+      return { row: Math.max(0, row - 1), col };
+    case "ArrowDown":
+      return { row: row + 1, col };
+    case "ArrowLeft":
+      return { row, col: Math.max(0, col - 1) };
+    case "ArrowRight":
+      return { row, col: col + 1 };
+    default:
+      return null;
+  }
+}
+
+export function isWithinSheetBounds(sheet: SheetLike | null | undefined, row: number, col: number): boolean {
+  if (!sheet?.data) return false;
+  if (row < 0 || row >= sheet.data.length) return false;
+  const rowData = sheet.data[row];
+  if (!rowData) return false;
+  return col >= 0 && col < rowData.length;
+}

package/src/plugins/spreadsheet/meta.ts

@@ -0,0 +1,14 @@
+import { definePluginMeta } from "../meta-types";
+
+export const META = definePluginMeta({
+  toolName: "presentSpreadsheet",
+  apiNamespace: "spreadsheet",
+  apiRoutes: {
+    /** POST /api/spreadsheet — create a new spreadsheet. */
+    create: { method: "POST", path: "" },
+    /** PUT /api/spreadsheet/update — overwrite an existing
+     *  spreadsheet. Body carries the workspace-relative path. */
+    update: { method: "PUT", path: "/update" },
+  },
+  mcpDispatch: "create",
+});

package/src/plugins/textResponse/Preview.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="preview-text p-2 text-sm leading-snug" :class="textColorClass">{{ previewText }}</div>
+  <div class="p-2">
+    <div class="preview-text text-sm leading-snug" :class="textColorClass">{{ previewText }}</div>
+    <div v-if="attachments.length > 0" class="flex flex-wrap gap-1 mt-1.5" data-testid="text-response-preview-attachments">
+      <SentAttachmentChip v-for="path in attachments" :key="path" :path="path" variant="thumb" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -7,6 +12,7 @@ import { computed } from "vue";
 import { marked } from "marked";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TextResponseData } from "./types";
+import SentAttachmentChip from "../../components/SentAttachmentChip.vue";
 
 const props = defineProps<{
   result: ToolResultComplete<TextResponseData>;
@@ -27,6 +33,8 @@ const textColorClass = computed(() => {
 
 const previewText = computed(() => markdownToPlainText(props.result.data?.text ?? ""));
 
+const attachments = computed<string[]>(() => props.result.data?.attachments ?? []);
+
 function markdownToPlainText(markdown: string): string {
   const html = marked(markdown, { breaks: true, gfm: true }) as string;
   const spaced = html