mulmoclaude 0.1.0

package/src/components/CanvasViewToggle.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    class="flex items-center justify-center w-8 h-8 rounded transition-colors hover:bg-gray-100"
+    :class="isStack ? 'text-blue-500' : 'text-gray-400 hover:text-gray-700'"
+    :title="isStack ? 'Stack view · click to switch to Single (⌘1)' : 'Single view · click to switch to Stack (⌘2)'"
+    :aria-label="isStack ? 'Switch to Single view' : 'Switch to Stack view'"
+    :data-testid="`canvas-view-toggle-${modelValue}`"
+    @click="emit('update:modelValue', isStack ? CANVAS_VIEW.single : CANVAS_VIEW.stack)"
+  >
+    <span class="material-icons text-lg">view_agenda</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { CANVAS_VIEW, type CanvasViewMode } from "../utils/canvas/viewMode";
+
+const props = defineProps<{
+  modelValue: CanvasViewMode;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [mode: CanvasViewMode];
+}>();
+
+const isStack = computed(() => props.modelValue === CANVAS_VIEW.stack);
+</script>

package/src/components/ChatAttachmentPreview.vue

@@ -0,0 +1,45 @@
+<template>
+  <div data-testid="chat-attachment-preview" class="relative inline-flex items-center gap-2 border border-gray-300 rounded overflow-hidden px-2 py-1">
+    <img v-if="isImage" :src="dataUrl" alt="Attached image" class="max-h-20 max-w-40 object-contain" />
+    <div v-else class="flex items-center gap-1.5 text-xs text-gray-700">
+      <span class="material-icons text-base" :class="iconColor">{{ icon }}</span>
+      <span class="max-w-40 truncate">{{ filename || "attachment" }}</span>
+    </div>
+    <button
+      data-testid="chat-attachment-remove"
+      class="absolute top-0 right-0 bg-black/60 text-white rounded-bl px-1 text-xs leading-tight hover:bg-black/80"
+      @click="emit('remove')"
+    >
+      ✕
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  dataUrl: string;
+  filename: string;
+  mime: string;
+}>();
+const emit = defineEmits<{ remove: [] }>();
+
+const isImage = computed(() => props.mime.startsWith("image/"));
+
+const icon = computed(() => {
+  if (props.mime === "application/pdf") return "picture_as_pdf";
+  if (props.mime.includes("wordprocessingml")) return "description";
+  if (props.mime.includes("spreadsheetml")) return "table_chart";
+  if (props.mime.includes("presentationml")) return "slideshow";
+  return "insert_drive_file";
+});
+
+const iconColor = computed(() => {
+  if (props.mime === "application/pdf") return "text-red-500";
+  if (props.mime.includes("wordprocessingml")) return "text-blue-500";
+  if (props.mime.includes("spreadsheetml")) return "text-green-600";
+  if (props.mime.includes("presentationml")) return "text-orange-500";
+  return "text-gray-500";
+});
+</script>

package/src/components/ChatImagePreview.vue

@@ -0,0 +1,17 @@
+<template>
+  <div data-testid="chat-image-preview" class="relative inline-block border border-gray-300 rounded overflow-hidden">
+    <img :src="src" alt="Attached image" class="max-h-20 max-w-40 object-contain" />
+    <button
+      data-testid="chat-image-remove"
+      class="absolute top-0 right-0 bg-black/60 text-white rounded-bl px-1 text-xs leading-tight hover:bg-black/80"
+      @click="emit('remove')"
+    >
+      ✕
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ src: string }>();
+const emit = defineEmits<{ remove: [] }>();
+</script>

package/src/components/ChatInput.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="p-4 border-t border-gray-200" @dragover.prevent @drop="onDropFile">
+    <div v-if="fileError" class="mb-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-1.5" data-testid="file-error">
+      {{ fileError }}
+    </div>
+    <ChatAttachmentPreview
+      v-if="pastedFile"
+      :data-url="pastedFile.dataUrl"
+      :filename="pastedFile.name"
+      :mime="pastedFile.mime"
+      @remove="emit('update:pastedFile', null)"
+    />
+    <div class="flex gap-2" :class="{ 'mt-2': pastedFile }">
+      <textarea
+        ref="textarea"
+        :value="modelValue"
+        data-testid="user-input"
+        placeholder="Type a task..."
+        :rows="inputFocused ? 8 : 2"
+        class="flex-1 bg-white border border-gray-300 rounded px-3 py-2 text-sm text-gray-900 placeholder-gray-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none transition-all duration-200"
+        :class="inputFocused ? 'ring-2 ring-blue-300' : ''"
+        :disabled="isRunning"
+        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        @focus="inputFocused = true"
+        @compositionstart="imeEnter.onCompositionStart"
+        @compositionend="imeEnter.onCompositionEnd"
+        @keydown="imeEnter.onKeydown"
+        @blur="onInputBlur"
+        @paste="onPasteFile"
+      />
+      <div class="flex flex-col gap-1">
+        <button
+          data-testid="send-btn"
+          class="bg-blue-600 hover:bg-blue-700 text-white rounded px-3 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="isRunning"
+          @click="emit('send')"
+        >
+          <span class="material-icons text-base">send</span>
+        </button>
+        <button
+          data-testid="expand-input-btn"
+          class="text-gray-400 hover:text-gray-600 rounded px-3 py-1 text-sm"
+          title="Expand editor"
+          @click="openExpandedEditor"
+        >
+          <span class="material-icons text-base">open_in_full</span>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="expandedEditorOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeExpandedEditor">
+      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 flex flex-col" style="max-height: 80vh">
+        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+          <h3 class="text-sm font-semibold text-gray-700">Compose message</h3>
+          <button class="text-gray-400 hover:text-gray-600" @click="closeExpandedEditor">
+            <span class="material-icons text-base">close</span>
+          </button>
+        </div>
+        <textarea
+          ref="expandedTextarea"
+          :value="modelValue"
+          data-testid="expanded-input"
+          placeholder="Type a task..."
+          class="flex-1 px-4 py-3 text-sm text-gray-900 placeholder-gray-400 resize-none focus:outline-none"
+          style="min-height: 300px"
+          @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+          @keydown.meta.enter="sendFromExpanded"
+          @keydown.ctrl.enter="sendFromExpanded"
+        ></textarea>
+        <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200">
+          <p class="text-xs text-gray-400">Cmd+Enter to send</p>
+          <div class="flex gap-2">
+            <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="closeExpandedEditor">Cancel</button>
+            <button
+              class="px-3 py-1.5 text-sm rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40"
+              :disabled="isRunning"
+              data-testid="expanded-send-btn"
+              @click="sendFromExpanded"
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+import ChatAttachmentPreview from "./ChatAttachmentPreview.vue";
+import { useImeAwareEnter } from "../composables/useImeAwareEnter";
+
+export interface PastedFile {
+  dataUrl: string;
+  name: string;
+  mime: string;
+}
+
+const props = defineProps<{
+  modelValue: string;
+  pastedFile: PastedFile | null;
+  isRunning: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  "update:pastedFile": [file: PastedFile | null];
+  send: [];
+}>();
+
+const textarea = ref<HTMLTextAreaElement | null>(null);
+const expandedTextarea = ref<HTMLTextAreaElement | null>(null);
+const inputFocused = ref(false);
+const expandedEditorOpen = ref(false);
+const fileError = ref<string | null>(null);
+
+const MAX_ATTACH_BYTES = 30 * 1024 * 1024;
+
+const ACCEPTED_MIME_PREFIXES = ["image/", "text/"];
+const ACCEPTED_MIME_EXACT = new Set([
+  "application/pdf",
+  "application/json",
+  "application/xml",
+  "application/x-yaml",
+  "application/toml",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+]);
+
+function isAcceptedType(mime: string): boolean {
+  return ACCEPTED_MIME_PREFIXES.some((p) => mime.startsWith(p)) || ACCEPTED_MIME_EXACT.has(mime);
+}
+
+function readAttachmentFile(file: File): void {
+  fileError.value = null;
+  if (!isAcceptedType(file.type)) return;
+  if (file.size > MAX_ATTACH_BYTES) {
+    const sizeMB = (file.size / 1024 / 1024).toFixed(1);
+    fileError.value = `File too large (${sizeMB} MB). Maximum is 30 MB.`;
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = () => {
+    if (typeof reader.result === "string") {
+      emit("update:pastedFile", {
+        dataUrl: reader.result,
+        name: file.name,
+        mime: file.type,
+      });
+    }
+  };
+  reader.readAsDataURL(file);
+}
+
+function onPasteFile(e: ClipboardEvent): void {
+  const items = e.clipboardData?.items;
+  if (!items) return;
+  for (const item of items) {
+    if (isAcceptedType(item.type)) {
+      const file = item.getAsFile();
+      if (file) {
+        e.preventDefault();
+        readAttachmentFile(file);
+        return;
+      }
+    }
+  }
+}
+
+function onDropFile(e: DragEvent): void {
+  e.preventDefault();
+  const file = e.dataTransfer?.files[0];
+  if (file) readAttachmentFile(file);
+}
+
+const imeEnter = useImeAwareEnter(() => emit("send"));
+
+function onInputBlur(): void {
+  imeEnter.onBlur();
+  setTimeout(() => {
+    inputFocused.value = false;
+  }, 150);
+}
+
+function openExpandedEditor(): void {
+  expandedEditorOpen.value = true;
+  nextTick(() => expandedTextarea.value?.focus());
+}
+
+function closeExpandedEditor(): void {
+  expandedEditorOpen.value = false;
+  nextTick(() => textarea.value?.focus());
+}
+
+function sendFromExpanded(): void {
+  if (props.isRunning) return;
+  closeExpandedEditor();
+  emit("send");
+}
+
+function focus(): void {
+  textarea.value?.focus();
+}
+
+defineExpose({ focus });
+</script>

package/src/components/FileContentHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="selectedPath" class="px-4 py-2 border-b border-gray-200 text-xs text-gray-500 font-mono shrink-0 flex items-center gap-2">
+    <span class="truncate min-w-0">{{ selectedPath }}</span>
+    <span v-if="size !== null" class="text-gray-400 shrink-0">· {{ formatBytes(size) }}</span>
+    <span v-if="modifiedMs !== null" class="text-gray-400 shrink-0">· {{ formatDateTime(modifiedMs) }}</span>
+    <button
+      v-if="isMarkdown"
+      class="ml-auto shrink-0 px-2 py-0.5 rounded border border-gray-200 text-gray-600 hover:bg-gray-100 font-sans"
+      :title="mdRawMode ? 'Show rendered Markdown' : 'Show raw source'"
+      @click="emit('toggleMdRaw')"
+    >
+      {{ mdRawMode ? "Rendered" : "Raw" }}
+    </button>
+    <button
+      type="button"
+      class="shrink-0 px-1 py-0.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100"
+      :class="{ 'ml-auto': !isMarkdown }"
+      title="Close file"
+      aria-label="Close file"
+      data-testid="close-file-btn"
+      @click="emit('deselect')"
+    >
+      <span class="material-icons text-base" aria-hidden="true">close</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatDateTime } from "../utils/format/date";
+
+defineProps<{
+  selectedPath: string | null;
+  size: number | null;
+  modifiedMs: number | null;
+  isMarkdown: boolean;
+  mdRawMode: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggleMdRaw: [];
+  deselect: [];
+}>();
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+</script>

package/src/components/FileContentRenderer.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="flex-1 overflow-auto min-h-0">
+    <div v-if="!selectedPath" class="h-full flex items-center justify-center text-gray-400 text-sm">Select a file</div>
+    <div v-else-if="contentError" class="p-4 text-sm text-red-600">
+      {{ contentError }}
+    </div>
+    <div v-else-if="contentLoading" class="p-4 text-sm text-gray-400">Loading...</div>
+    <template v-else-if="content">
+      <template v-if="content.kind === 'text'">
+        <!-- Scheduler items.json: render with the scheduler plugin's
+             calendar/list view by synthesizing a fake tool result. -->
+        <div v-if="schedulerResult" class="h-full">
+          <SchedulerView :selected-result="schedulerResult" />
+        </div>
+        <!-- Todos todos.json: full kanban / table / list explorer. -->
+        <div v-else-if="todoExplorerResult" class="h-full">
+          <TodoExplorer :selected-result="todoExplorerResult" />
+        </div>
+        <!-- Markdown rendered: frontmatter panel + body -->
+        <div v-else-if="isMarkdown && !mdRawMode" class="h-full flex flex-col overflow-auto">
+          <div v-if="mdFrontmatter && mdFrontmatter.fields.length > 0" class="shrink-0 m-4 mb-0 rounded border border-gray-200 bg-gray-50 p-3 text-xs">
+            <div v-for="field in mdFrontmatter.fields" :key="field.key" class="flex items-baseline gap-2 py-0.5">
+              <span class="font-semibold text-gray-600 shrink-0">{{ field.key }}:</span>
+              <template v-if="Array.isArray(field.value)">
+                <span class="flex flex-wrap gap-1">
+                  <span v-for="item in field.value" :key="item" class="rounded-full bg-white border border-gray-300 px-2 py-0.5 text-gray-700">
+                    {{ item }}
+                  </span>
+                </span>
+              </template>
+              <span v-else class="text-gray-800 break-words">{{ field.value }}</span>
+            </div>
+          </div>
+          <div class="flex-1 min-h-0" @click.capture="(e: MouseEvent) => emit('markdownLinkClick', e)">
+            <TextResponseView
+              :selected-result="markdownResult(mdFrontmatter ? mdFrontmatter.body : content.content)"
+              :editable-source="content.content"
+              @update-source="(src: string) => emit('updateSource', src)"
+            />
+          </div>
+          <div v-if="rawSaveError" class="shrink-0 m-4 mt-0 rounded border border-red-300 bg-red-50 p-2 text-xs text-red-700" role="alert">
+            ⚠ {{ rawSaveError }}
+          </div>
+        </div>
+        <!-- Markdown raw source (includes frontmatter) -->
+        <pre v-else-if="isMarkdown && mdRawMode" class="p-4 text-xs whitespace-pre-wrap font-mono text-gray-800">{{ content.content }}</pre>
+        <!-- HTML: sandboxed iframe preview.
+             `allow-scripts` lets Chart.js / canvas drawing / other
+             JS-driven HTML (the common case for LLM-generated
+             results) run. We deliberately DO NOT grant
+             `allow-same-origin`, so the iframe keeps a null
+             origin — it can't read MulmoClaude's cookies,
+             localStorage, or the parent window's DOM.
+             A CSP meta tag is injected via wrapHtmlWithPreviewCsp
+             to restrict script loads to a vetted CDN whitelist +
+             inline; connect-src is `'none'` so the page can't
+             phone home. See src/utils/html/previewCsp.ts. -->
+        <iframe v-else-if="isHtml" :srcdoc="sandboxedHtml" class="w-full h-full border-0" sandbox="allow-scripts" title="HTML preview" />
+        <!-- JSON: pretty-printed with simple syntax coloring. Fall
+             back to raw content if the file is malformed. -->
+        <pre v-else-if="isJson" class="p-4 text-xs whitespace-pre-wrap font-mono text-gray-800"><span
+          v-for="(tok, i) in jsonTokens"
+          :key="i"
+          :class="JSON_TOKEN_CLASS[tok.type]"
+        >{{ tok.value }}</span></pre>
+        <!-- JSONL / NDJSON: one pretty-printed + colored record per line -->
+        <div v-else-if="isJsonl" class="p-4 space-y-2">
+          <div v-for="(line, i) in jsonlLines" :key="i" class="rounded border bg-gray-50 p-3" :class="line.parseError ? 'border-red-300' : 'border-gray-200'">
+            <div v-if="line.parseError" class="text-xs text-red-600 mb-1 font-sans">parse error</div>
+            <pre class="text-xs font-mono text-gray-800 whitespace-pre-wrap"><span
+              v-for="(tok, j) in line.tokens"
+              :key="j"
+              :class="JSON_TOKEN_CLASS[tok.type]"
+            >{{ tok.value }}</span></pre>
+          </div>
+        </div>
+        <!-- Plain text fallback -->
+        <pre v-else class="p-4 text-xs whitespace-pre-wrap font-mono text-gray-800">{{ content.content }}</pre>
+      </template>
+      <!-- Image -->
+      <div v-else-if="content.kind === 'image' && selectedPath" class="h-full flex items-center justify-center p-4">
+        <img :src="rawUrl(selectedPath)" :alt="selectedPath" class="max-w-full max-h-full object-contain" />
+      </div>
+      <!-- PDF -->
+      <iframe v-else-if="content.kind === 'pdf' && selectedPath" :src="rawUrl(selectedPath)" class="w-full h-full border-0" title="PDF preview" />
+      <!-- Audio -->
+      <div v-else-if="content.kind === 'audio' && selectedPath" class="h-full flex items-center justify-center p-4">
+        <audio :key="selectedPath" :src="rawUrl(selectedPath)" controls preload="metadata" class="w-full max-w-2xl" />
+      </div>
+      <!-- Video -->
+      <div v-else-if="content.kind === 'video' && selectedPath" class="h-full flex items-center justify-center p-4 bg-black">
+        <video :key="selectedPath" :src="rawUrl(selectedPath)" controls preload="metadata" class="max-w-full max-h-full" />
+      </div>
+      <!-- Binary or too-large -->
+      <div v-else class="p-4 text-sm text-gray-500">
+        {{ "message" in content ? content.message : "" }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextResponseView from "../plugins/textResponse/View.vue";
+import SchedulerView from "../plugins/scheduler/View.vue";
+import TodoExplorer from "./TodoExplorer.vue";
+import type { FileContent } from "../composables/useFileSelection";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { TextResponseData } from "../plugins/textResponse/types";
+import type { SchedulerData } from "../plugins/scheduler/index";
+import type { TodoData } from "../plugins/todo/index";
+import { JSON_TOKEN_CLASS } from "../utils/format/jsonSyntax";
+import type { JsonToken, JsonlLine } from "../utils/format/jsonSyntax";
+import type { Frontmatter } from "../utils/format/frontmatter";
+import { rewriteMarkdownImageRefs } from "../utils/image/rewriteMarkdownImageRefs";
+import { API_ROUTES } from "../config/apiRoutes";
+
+const props = defineProps<{
+  selectedPath: string | null;
+  content: FileContent | null;
+  contentError: string | null;
+  contentLoading: boolean;
+  schedulerResult: ToolResultComplete<SchedulerData> | null;
+  todoExplorerResult: ToolResultComplete<TodoData> | null;
+  isMarkdown: boolean;
+  isHtml: boolean;
+  isJson: boolean;
+  isJsonl: boolean;
+  mdRawMode: boolean;
+  sandboxedHtml: string;
+  jsonTokens: JsonToken[];
+  jsonlLines: JsonlLine[];
+  mdFrontmatter: Frontmatter | null;
+  rawSaveError: string | null;
+}>();
+
+const emit = defineEmits<{
+  markdownLinkClick: [event: MouseEvent];
+  updateSource: [newSource: string];
+}>();
+
+function rawUrl(filePath: string): string {
+  return `${API_ROUTES.files.raw}?path=${encodeURIComponent(filePath)}`;
+}
+
+function markdownResult(text: string): ToolResultComplete<TextResponseData> {
+  // Rewrite `![alt](path)` refs BEFORE handing the markdown to
+  // TextResponseView so workspace-relative image paths resolve via
+  // /api/files/raw instead of 404-ing against the SPA page URL.
+  const current = props.selectedPath ?? "";
+  const slash = current.lastIndexOf("/");
+  const basePath = slash >= 0 ? current.slice(0, slash) : "";
+  const rewritten = rewriteMarkdownImageRefs(text, basePath);
+  return {
+    uuid: "files-preview",
+    toolName: "text-response",
+    message: rewritten,
+    title: props.selectedPath ?? "",
+    // role: "user" hides the PDF download button in TextResponseView
+    data: { text: rewritten, role: "user", transportKind: "text-rest" },
+  };
+}
+</script>

package/src/components/FileTree.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <button
+      v-if="node.type === 'dir'"
+      class="w-full flex items-center gap-1 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded"
+      :data-testid="`file-tree-dir-${node.name || 'root'}`"
+      @click="onToggle"
+    >
+      <span class="material-icons text-sm text-gray-400 shrink-0">{{ expanded ? "folder_open" : "folder" }}</span>
+      <span class="text-gray-700 truncate">{{ node.name || "(workspace)" }}</span>
+    </button>
+    <button
+      v-else
+      class="w-full flex items-center gap-1 px-2 py-1 text-left text-sm rounded transition-colors"
+      :class="selectedPath === node.path ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'"
+      :data-testid="`file-tree-file-${node.name}`"
+      :title="node.path"
+      @click="emit('select', node.path)"
+    >
+      <span class="material-icons text-sm text-gray-400 shrink-0">description</span>
+      <span class="truncate">{{ node.name }}</span>
+      <span v-if="isRecent" class="ml-auto w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" title="Recently changed" />
+    </button>
+    <div v-if="node.type === 'dir' && expanded" class="pl-4">
+      <!-- Loading state: children not in the cache yet. Rendered
+           once per dir so a slow network shows where the wait is,
+           not as a global overlay. -->
+      <div v-if="loadingChildren" class="px-2 py-1 text-xs text-gray-400">Loading...</div>
+      <FileTree
+        v-for="child in loadedChildren"
+        :key="child.path"
+        :node="child"
+        :selected-path="selectedPath"
+        :recent-paths="recentPaths"
+        :children-by-path="childrenByPath"
+        :sort-mode="sortMode"
+        @select="(p) => emit('select', p)"
+        @load-children="(p) => emit('loadChildren', p)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import { useExpandedDirs } from "../composables/useExpandedDirs";
+import { sortChildren } from "../utils/files/sortChildren";
+import type { FileSortMode } from "../composables/useFileSortMode";
+
+// TreeNode lives in src/types/fileTree.ts so .ts composables can
+// import it without depending on a .vue module. Re-export here so
+// existing `import { TreeNode } from "./FileTree.vue"` keeps working.
+export type { TreeNode } from "../types/fileTree";
+import type { TreeNode } from "../types/fileTree";
+
+const props = defineProps<{
+  node: TreeNode;
+  selectedPath: string | null;
+  recentPaths: Set<string>;
+  // Lazy-expand cache managed by the parent (FilesView). `undefined`
+  // entry (not in the map) = not loaded yet → we emit `loadChildren`
+  // so the parent kicks off the fetch. `null` = load in flight →
+  // show spinner. Array = loaded.
+  childrenByPath: Map<string, TreeNode[] | null>;
+  sortMode: FileSortMode;
+}>();
+
+const emit = defineEmits<{
+  select: [path: string];
+  loadChildren: [path: string];
+}>();
+
+// Expand/collapse state lives in a module-level singleton so every
+// recursive FileTree instance shares it, and survives remounts (e.g.
+// the agent-run refresh that bumps filesRefreshToken in FilesView).
+// Default on first run: only the workspace root ("") is expanded.
+const { isExpanded, toggle } = useExpandedDirs();
+const expanded = computed(() => isExpanded(props.node.path));
+
+const cached = computed(() => props.childrenByPath.get(props.node.path));
+// `cached === null` = load in flight. `undefined` = never requested.
+// Array = loaded.
+const loadingChildren = computed(() => cached.value === null);
+const loadedChildren = computed(() => (Array.isArray(cached.value) ? sortChildren(cached.value, props.sortMode) : []));
+
+// Kick off a fetch if the dir is expanded but its children haven't
+// been requested yet. Covers two scenarios:
+//   1. User just toggled open → onToggle already emits, but watching
+//      here makes the flow idempotent when the parent re-mounts the
+//      component with expand state restored from localStorage.
+//   2. Deep link: FilesView calls `expand(ancestor)` before children
+//      arrive; this watcher catches that case too.
+watch(
+  [expanded, cached],
+  ([isOpen, current]) => {
+    if (!isOpen) return;
+    if (props.node.type !== "dir") return;
+    if (current !== undefined) return;
+    emit("loadChildren", props.node.path);
+  },
+  { immediate: true },
+);
+
+function onToggle(): void {
+  toggle(props.node.path);
+  // When newly-opened, request children if cache miss. The watcher
+  // above covers the reactive path but we also fire here so the
+  // request is visibly tied to the click for network inspection.
+  if (!isExpanded(props.node.path)) return;
+  if (cached.value !== undefined) return;
+  emit("loadChildren", props.node.path);
+}
+
+const isRecent = computed(() => props.recentPaths.has(props.node.path));
+</script>