mulmoclaude 0.6.4 → 0.7.0

package/src/components/FileTree.vue

@@ -5,6 +5,7 @@
       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"
+      @contextmenu="onFolderContextMenu"
     >
       <span class="material-icons text-sm text-gray-400 shrink-0">{{ expanded ? "folder_open" : "folder" }}</span>
       <span class="text-gray-700 truncate">{{ node.name || t("fileTree.workspace") }}</span>
@@ -14,6 +15,7 @@
       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}`"
+      :data-selected="selectedPath === node.path ? 'true' : undefined"
       :title="node.path"
       @click="emit('select', node.path)"
     >
@@ -22,6 +24,28 @@
       <span v-if="isRecent" class="ml-auto w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" :title="t('fileTree.recentlyChanged')" />
     </button>
     <div v-if="node.type === 'dir' && expanded" class="pl-4">
+      <!-- New-file inline input (#1598). Shown when the user picked
+           "New file" from the folder's context menu. Mounted as the
+           first child so the new entry sits where the user expects
+           it (top of the folder). Esc / blur close; Enter submits. -->
+      <div v-if="createPending" class="flex items-center gap-1 px-2 py-1 text-sm" :data-testid="`file-tree-new-file-input-${node.name || 'root'}`">
+        <span class="material-icons text-sm text-gray-400 shrink-0">description</span>
+        <input
+          ref="newFileInputRef"
+          v-model="newFileSlug"
+          type="text"
+          class="flex-1 min-w-0 px-1 py-0.5 text-sm border border-blue-400 rounded focus:outline-none focus:ring-1 focus:ring-blue-400"
+          :placeholder="placeholderText"
+          :aria-label="t('fileTree.newFileInputAria')"
+          data-testid="file-tree-new-file-input"
+          @keydown="onInputKeydown"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+          @blur="onInputBlur"
+        />
+        <span class="text-xs text-gray-400 font-mono shrink-0 select-none">{{ createPolicy?.extension }}</span>
+      </div>
+      <div v-if="createError" class="px-2 py-1 text-xs text-red-600" data-testid="file-tree-new-file-error">{{ createError }}</div>
       <!-- 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. -->
@@ -36,17 +60,42 @@
         :sort-mode="sortMode"
         @select="(p) => emit('select', p)"
         @load-children="(p) => emit('loadChildren', p)"
+        @create-file="(args) => emit('createFile', args)"
       />
     </div>
+    <!-- Floating context menu (#1598). Position-fixed near the
+         click point so it floats above the tree row regardless of
+         the scrollable pane. One-shot; clicking the option starts
+         the inline input flow above. -->
+    <Teleport to="body">
+      <div
+        v-if="menuOpen"
+        class="fixed z-50 min-w-32 bg-white border border-gray-200 rounded shadow-md py-1 text-sm"
+        :style="{ top: `${menuY}px`, left: `${menuX}px` }"
+        data-testid="file-tree-context-menu"
+        @click.stop
+      >
+        <button
+          type="button"
+          class="w-full text-left px-3 py-1.5 hover:bg-gray-100 flex items-center gap-2"
+          data-testid="file-tree-context-new-file"
+          @click="onContextNewFile"
+        >
+          <span class="material-icons text-sm text-gray-400">note_add</span>
+          {{ t("fileTree.newFileMenuItem") }}
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useExpandedDirs } from "../composables/useExpandedDirs";
 import { sortChildren } from "../utils/files/sortChildren";
 import { descriptorForPath, EDIT_POLICY_ICON_COLOR } from "../config/systemFileDescriptors";
+import { normaliseNewFileSlug, policyForFolder } from "../config/createFilePolicy";
 import type { FileSortMode } from "../composables/useFileSortMode";
 import type { TreeNode } from "../types/fileTree";
 
@@ -74,13 +123,18 @@ const props = defineProps<{
 const emit = defineEmits<{
   select: [path: string];
   loadChildren: [path: string];
+  // Bubbled up to FilesView, which performs the PUT and refreshes
+  // the tree. Per-instance FileTree state is reset by the parent
+  // setting `childrenByPath` for this folder; the inline input here
+  // closes itself when its commit resolves.
+  createFile: [args: { folder: string; filename: string; resolve: (ok: boolean, error?: string) => void }];
 }>();
 
 // 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 { isExpanded, toggle, expand } = useExpandedDirs();
 const expanded = computed(() => isExpanded(props.node.path));
 
 const cached = computed(() => props.childrenByPath.get(props.node.path));
@@ -142,4 +196,166 @@ const iconColorClass = computed(() => {
   const descriptor = descriptorForPath(props.node.path);
   return descriptor ? EDIT_POLICY_ICON_COLOR[descriptor.editPolicy] : DEFAULT_FILE_ICON_COLOR;
 });
+
+// --- Context menu + inline new-file input (#1598) -------------------
+
+const createPolicy = computed(() => (props.node.type === "dir" ? policyForFolder(props.node.path) : null));
+const placeholderText = computed(() => (createPolicy.value ? t(createPolicy.value.placeholderKey) : ""));
+
+const menuOpen = ref(false);
+const menuX = ref(0);
+const menuY = ref(0);
+const createPending = ref(false);
+const newFileSlug = ref("");
+const createError = ref<string | null>(null);
+const newFileInputRef = ref<HTMLInputElement | null>(null);
+// `blur` would close the input on every focus change. We mute it for
+// a single tick when the user clicks the trailing extension label or
+// re-focuses the field programmatically, so the cancel-on-blur path
+// doesn't fight legitimate re-focus.
+let suppressBlur = false;
+
+function onFolderContextMenu(event: MouseEvent): void {
+  if (!createPolicy.value) return;
+  event.preventDefault();
+  menuX.value = event.clientX;
+  menuY.value = event.clientY;
+  menuOpen.value = true;
+}
+
+function closeMenu(): void {
+  menuOpen.value = false;
+}
+
+function onContextNewFile(): void {
+  closeMenu();
+  if (!createPolicy.value) return;
+  // Make sure the folder is open so the inline input is visible.
+  if (!isExpanded(props.node.path)) expand(props.node.path);
+  newFileSlug.value = "";
+  createError.value = null;
+  createPending.value = true;
+  void nextTick(() => {
+    newFileInputRef.value?.focus();
+  });
+}
+
+function cancelCreate(): void {
+  createPending.value = false;
+  newFileSlug.value = "";
+  createError.value = null;
+}
+
+function onInputBlur(): void {
+  if (suppressBlur) {
+    suppressBlur = false;
+    return;
+  }
+  // Cancel on blur — matches Finder/VSCode's "click away to discard"
+  // behaviour. Submit still happens on Enter explicitly.
+  cancelCreate();
+}
+
+const composingFlag = ref(false);
+function onCompositionStart(): void {
+  composingFlag.value = true;
+}
+function onCompositionEnd(): void {
+  // Defer clearing so a keydown Enter that fires immediately after
+  // compositionend (Chromium IME-commit behaviour) still sees the
+  // flag true and is suppressed.
+  setTimeout(() => {
+    composingFlag.value = false;
+  }, 0);
+}
+
+function onInputKeydown(event: KeyboardEvent): void {
+  // Enter / Escape are wired here (not via Vue's `.enter` / `.esc`
+  // modifiers) because those modifiers were not firing for the user
+  // in #1598. Reading `event.key` directly matches the spec.
+  //
+  // IME guard: the Enter that commits a Japanese / Chinese / Korean
+  // composition fires keydown with either `isComposing === true`
+  // (Firefox) or `keyCode === 229` (Chrome / Safari). Without the
+  // 229 fallback the user gets an empty-filename error the moment
+  // they confirm an IME candidate. `composingFlag` covers the
+  // "compositionend just fired but the trailing keyup hasn't" gap
+  // some browsers expose.
+  if (event.key === "Enter") {
+    if (composingFlag.value || event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    onNewFileSubmit();
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    cancelCreate();
+  }
+}
+
+function refocusInput(): void {
+  // Arm `suppressBlur` for the SINGLE blur that the focus() call
+  // may produce before settling, then clear it so the next real
+  // click-away triggers cancel-on-blur as expected. Without the
+  // post-focus clear the flag stays armed after a validation /
+  // save failure and silently swallows the user's next blur
+  // (CodeRabbit review on #1608).
+  suppressBlur = true;
+  void nextTick(() => {
+    newFileInputRef.value?.focus();
+    setTimeout(() => {
+      suppressBlur = false;
+    }, 0);
+  });
+}
+
+function onNewFileSubmit(): void {
+  if (!createPolicy.value) return;
+  const result = normaliseNewFileSlug(newFileSlug.value, createPolicy.value);
+  if (!result.ok) {
+    createError.value = result.reason === "empty" ? t("fileTree.newFileError.empty") : t("fileTree.newFileError.unsafe");
+    refocusInput();
+    return;
+  }
+  // Keep the input open until the parent's PUT resolves so a save
+  // failure leaves the user where they were typing. The parent
+  // hands back ok / error via the `resolve` callback.
+  suppressBlur = true;
+  emit("createFile", {
+    folder: props.node.path,
+    filename: result.filename,
+    resolve: (ok, error) => {
+      if (ok) {
+        cancelCreate();
+        return;
+      }
+      createError.value = error ?? t("fileTree.newFileError.saveFailed");
+      refocusInput();
+    },
+  });
+}
+
+// Global click closes the menu — Teleport puts it on body, so a
+// click outside the menu but inside the tree pane will still trigger
+// this. The Teleport's @click.stop above keeps clicks inside the
+// menu from being treated as outside.
+function onWindowClick(): void {
+  if (menuOpen.value) closeMenu();
+}
+function onWindowKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape" && menuOpen.value) closeMenu();
+}
+watch(menuOpen, (open) => {
+  if (open) {
+    window.addEventListener("click", onWindowClick);
+    window.addEventListener("keydown", onWindowKeydown);
+  } else {
+    window.removeEventListener("click", onWindowClick);
+    window.removeEventListener("keydown", onWindowKeydown);
+  }
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("click", onWindowClick);
+  window.removeEventListener("keydown", onWindowKeydown);
+});
 </script>

package/src/components/FileTreePane.vue

@@ -40,6 +40,7 @@
       :sort-mode="sortMode"
       @select="emit('select', $event)"
       @load-children="emit('loadChildren', $event)"
+      @create-file="emit('createFile', $event)"
     />
     <template v-if="refRoots.length > 0">
       <div class="mt-2 pt-2 border-t border-gray-200 px-1 mb-1 flex items-center gap-1">
@@ -83,6 +84,7 @@ const emit = defineEmits<{
   select: [path: string];
   loadChildren: [path: string];
   "update:sortMode": [mode: FileSortMode];
+  createFile: [args: { folder: string; filename: string; resolve: (ok: boolean, error?: string) => void }];
 }>();
 
 // Shared empty set for reference roots (they don't highlight recents).

package/src/components/FilesView.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="h-full flex bg-white">
+  <div class="h-full flex bg-white" data-testid="files-view-root">
     <FileTreePane
+      ref="treePaneRef"
       :root-node="rootNode"
       :ref-roots="refRoots"
       :children-by-path="childrenByPath"
@@ -11,6 +12,7 @@
       @select="selectFile"
       @load-children="loadDirChildren"
       @update:sort-mode="setSortMode"
+      @create-file="handleCreateFile"
     />
     <!-- Content pane -->
     <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
@@ -28,8 +30,6 @@
         :content="content"
         :content-error="contentError"
         :content-loading="contentLoading"
-        :scheduler-result="schedulerResult"
-        :todo-explorer-result="todoExplorerResult"
         :is-markdown="isMarkdown"
         :is-html="isHtml"
         :is-json="isJson"
@@ -74,10 +74,8 @@ import { useMarkdownMode } from "../composables/useMarkdownMode";
 import { useFileSortMode } from "../composables/useFileSortMode";
 import { useContentDisplay } from "../composables/useContentDisplay";
 import { useMarkdownLinkHandler } from "../composables/useMarkdownLinkHandler";
-import { apiPut } from "../utils/api";
+import { apiPost, apiPut } from "../utils/api";
 import { API_ROUTES } from "../config/apiRoutes";
-import { toSchedulerResult } from "../utils/filesPreview/schedulerPreview";
-import { toTodoExplorerResult } from "../utils/filesPreview/todoPreview";
 
 const RECENT_THRESHOLD_MS = 60 * 1000;
 
@@ -95,7 +93,7 @@ const emit = defineEmits<{
   loadSession: [sessionId: string];
 }>();
 
-const { rootNode, refRoots, childrenByPath, treeError, loadDirChildren, ensureAncestorsLoaded, reloadRoot, loadRefRoots } = useFileTree();
+const { rootNode, refRoots, childrenByPath, treeError, loadDirChildren, ensureAncestorsLoaded, reloadDirChildren, reloadRoot, loadRefRoots } = useFileTree();
 
 const { selectedPath, content, contentLoading, contentError, loadContent, selectFile, deselectFile, abortContent } = useFileSelection();
 
@@ -149,9 +147,47 @@ watch(content, () => {
   rawSaveError.value = null;
 });
 
-const schedulerResult = computed(() => toSchedulerResult(selectedPath.value, content.value?.kind === "text" ? content.value.content : null));
-
-const todoExplorerResult = computed(() => toTodoExplorerResult(selectedPath.value, content.value?.kind === "text" ? content.value.content : null));
+// #1598 — folder-row context menu → "New file" inline flow. The
+// FileTree component handles input + slug validation; here we
+// only do the conflict check + PUT + refresh. The callback shape
+// lets the inline input close itself on success and stay open
+// (with the error label) on failure.
+async function handleCreateFile(args: { folder: string; filename: string; resolve: (ok: boolean, error?: string) => void }): Promise<void> {
+  const { folder, filename, resolve } = args;
+  const targetPath = folder ? `${folder}/${filename}` : filename;
+  // Client-side conflict pre-check via the local cache — cheap and
+  // matches what the user sees. The server's create endpoint also
+  // refuses on conflict (#1598), so a tab racing with another that
+  // already won would still get a 409 below — this just turns the
+  // common case into a localised inline error without a round-trip.
+  const cached = childrenByPath.value.get(folder);
+  if (Array.isArray(cached) && cached.some((child) => child.name === filename)) {
+    resolve(false, t("fileTree.newFileError.exists", { filename }));
+    return;
+  }
+  const result = await apiPost<{ path: string; size: number; modifiedMs: number }>(API_ROUTES.files.create, {
+    path: targetPath,
+    content: "",
+  });
+  if (!result.ok) {
+    // Map HTTP status to a localised message so the inline error
+    // matches the rest of the menu's language. 409 = a race lost
+    // to another tab/agent that just created the same file.
+    if (result.status === 409) {
+      resolve(false, t("fileTree.newFileError.exists", { filename }));
+      await reloadDirChildren(folder);
+      return;
+    }
+    resolve(false, t("fileTree.newFileError.saveFailed"));
+    return;
+  }
+  resolve(true);
+  await reloadDirChildren(folder);
+  // Reveal the new file in the right-hand content pane so the user
+  // can start editing immediately. selectFile() also drives the URL
+  // bar + ancestor expansion via the existing watcher.
+  selectFile(result.data.path);
+}
 
 const recentPaths = computed(() => {
   const set = new Set<string>();
@@ -197,6 +233,50 @@ watch(
   },
 );
 
+// Keep the tree expanded down to the active selection regardless of
+// how the selection changed (URL bar, back/forward, selectFile from a
+// markdown link). selectFile() updates selectedPath synchronously
+// before pushing the route, so a guard on the route watcher would
+// miss in-app file→file navigation — we watch the source of truth
+// directly. `immediate: true` covers the deep-link mount case, so
+// onMounted doesn't need its own ensureAncestorsLoaded call.
+// Idempotent: loadDirChildren and expand() both short-circuit when
+// the cache/expand-state already has the ancestor.
+watch(
+  selectedPath,
+  (newPath) => {
+    if (newPath) ensureAncestorsLoaded(newPath);
+  },
+  { immediate: true },
+);
+
+// Reveal the selected file row in the tree pane. The tree grows
+// incrementally on deep-link mount: ensureAncestorsLoaded fetches the
+// direct ancestors, but sibling dirs whose `expanded` state was
+// restored from localStorage lazy-load their children later via each
+// FileTree's own watcher. Each of those loads pushes the selected
+// row further down, so scrollIntoView must re-run whenever the tree
+// grows, not just once on selection change. A pending-rAF guard
+// coalesces a burst of childrenByPath updates into a single scroll.
+// Scope the query to the FileTreePane's root via a template ref so
+// it survives data-testid / DOM-structure changes elsewhere in
+// FilesView.
+const treePaneRef = ref<InstanceType<typeof FileTreePane> | null>(null);
+let pendingRevealRaf = 0;
+function revealSelectedInTree(): void {
+  if (!selectedPath.value) return;
+  if (pendingRevealRaf !== 0) return;
+  pendingRevealRaf = requestAnimationFrame(() => {
+    pendingRevealRaf = 0;
+    const paneRoot = treePaneRef.value?.$el as HTMLElement | undefined;
+    const button = paneRoot?.querySelector<HTMLElement>('button[data-selected="true"]');
+    button?.scrollIntoView({ block: "nearest" });
+  });
+}
+
+watch(selectedPath, revealSelectedInTree);
+watch(childrenByPath, revealSelectedInTree);
+
 watch(
   () => props.refreshToken,
   () => {
@@ -209,16 +289,14 @@ onMounted(async () => {
   await loadDirChildren("");
   await loadRefRoots();
 
-  // Deep-link: if the URL has a selected path, reveal its ancestors
-  // by fetching each dir in sequence so the tree auto-expands to
-  // the selection.
-  if (selectedPath.value) {
-    await ensureAncestorsLoaded(selectedPath.value);
-    loadContent(selectedPath.value);
-  }
+  // Deep-link content load. The ancestor expansion + scroll reveal are
+  // handled by the selectedPath watchers above (the ensureAncestorsLoaded
+  // watcher runs with immediate: true).
+  if (selectedPath.value) loadContent(selectedPath.value);
 });
 
 onUnmounted(() => {
   abortContent();
+  if (pendingRevealRaf !== 0) cancelAnimationFrame(pendingRevealRaf);
 });
 </script>

package/src/components/PinToggle.vue

@@ -0,0 +1,52 @@
+<template>
+  <button
+    type="button"
+    :class="[
+      'h-8 w-8 flex items-center justify-center rounded transition-colors',
+      pinned ? 'text-amber-500 hover:bg-amber-50' : 'text-slate-400 hover:bg-slate-100 hover:text-slate-600',
+    ]"
+    :title="pinned ? t('shortcuts.unpin') : t('shortcuts.pin')"
+    :aria-label="pinned ? t('shortcuts.unpin') : t('shortcuts.pin')"
+    :aria-pressed="pinned"
+    :data-testid="`pin-toggle-${kind}-${slug}`"
+    @click.stop="toggle"
+    @keydown.enter.stop
+    @keydown.space.stop
+  >
+    <span class="material-icons text-lg">{{ pinned ? "star" : "star_border" }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useShortcuts } from "../composables/useShortcuts";
+import type { ShortcutKind } from "../types/shortcuts";
+
+// Shared ★ toggle used by the collections / feeds index cards and the
+// individual view header. Talks to the `useShortcuts` singleton itself,
+// so a parent only supplies the target's identity + cached label/icon.
+// Click + keyboard activation are stopped so toggling the star never
+// also opens the underlying card.
+
+const props = defineProps<{
+  kind: ShortcutKind;
+  slug: string;
+  /** Cached at pin time so the launcher renders without re-fetching. */
+  title: string;
+  icon: string;
+}>();
+
+const { t } = useI18n();
+const { isPinned, pin, unpin } = useShortcuts();
+
+const pinned = computed(() => isPinned(props.kind, props.slug));
+
+function toggle(): void {
+  if (pinned.value) {
+    void unpin(props.kind, props.slug);
+  } else {
+    void pin({ kind: props.kind, slug: props.slug, title: props.title, icon: props.icon });
+  }
+}
+</script>