mulmoclaude 0.1.0

package/src/composables/useFileSelection.ts

@@ -0,0 +1,115 @@
+// Composable: file selection, content loading with abort, URL sync.
+// Extracted from FilesView.vue (#507 step 2).
+
+import { ref } from "vue";
+import { useRoute, useRouter, isNavigationFailure } from "vue-router";
+import { apiGet } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+interface TextContent {
+  kind: "text";
+  path: string;
+  content: string;
+  size: number;
+  modifiedMs: number;
+}
+
+interface MetaContent {
+  kind: "image" | "pdf" | "audio" | "video" | "binary" | "too-large";
+  path: string;
+  size: number;
+  modifiedMs: number;
+  message?: string;
+}
+
+export type FileContent = TextContent | MetaContent;
+
+/** Segment-wise traversal check: rejects `../` path components
+ *  but allows legitimate filenames like `my..notes.txt`. */
+export function isValidFilePath(value: unknown): value is string {
+  if (typeof value !== "string" || value.length === 0) return false;
+  if (value.startsWith("/")) return false;
+  return !value.split("/").some((seg) => seg === "..");
+}
+
+export function useFileSelection() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const urlPath = route.query.path;
+  const selectedPath = ref<string | null>(isValidFilePath(urlPath) ? urlPath : null);
+  const content = ref<FileContent | null>(null);
+  const contentLoading = ref(false);
+  const contentError = ref<string | null>(null);
+
+  let contentAbort: AbortController | null = null;
+
+  async function loadContent(filePath: string): Promise<void> {
+    contentAbort?.abort();
+    const controller = new AbortController();
+    contentAbort = controller;
+
+    contentLoading.value = true;
+    contentError.value = null;
+    content.value = null;
+    try {
+      const result = await apiGet<FileContent>(API_ROUTES.files.content, { path: filePath }, { signal: controller.signal });
+      if (controller.signal.aborted) return;
+      if (!result.ok) {
+        contentError.value = result.error;
+      } else {
+        content.value = result.data;
+      }
+    } finally {
+      if (contentAbort === controller) {
+        contentLoading.value = false;
+        contentAbort = null;
+      }
+    }
+  }
+
+  function selectFile(filePath: string): void {
+    selectedPath.value = filePath;
+    loadContent(filePath);
+    const { path: __path, ...restQuery } = route.query;
+    router.push({ query: { ...restQuery, path: filePath } }).catch((err: unknown) => {
+      if (!isNavigationFailure(err)) {
+        // Frontend composable — server logger not available.
+        // console.error is the standard pattern in Vue composables.
+        console.error("[selectFile] navigation failed:", err);
+      }
+    });
+  }
+
+  function deselectFile(): void {
+    contentAbort?.abort();
+    contentAbort = null;
+    selectedPath.value = null;
+    content.value = null;
+    contentLoading.value = false;
+    contentError.value = null;
+    const { path: __path, ...restQuery } = route.query;
+    router.replace({ query: restQuery }).catch((err: unknown) => {
+      if (!isNavigationFailure(err)) {
+        console.error("[deselectFile] navigation failed:", err);
+      }
+    });
+  }
+
+  function abortContent(): void {
+    contentAbort?.abort();
+    contentAbort = null;
+    contentLoading.value = false;
+  }
+
+  return {
+    selectedPath,
+    content,
+    contentLoading,
+    contentError,
+    loadContent,
+    selectFile,
+    deselectFile,
+    abortContent,
+  };
+}

package/src/composables/useFileSortMode.ts

@@ -0,0 +1,24 @@
+// Composable: file-tree sort mode ("name" | "recent") persisted to
+// localStorage. Applied globally across every directory in the Files
+// view; only affects within-group order (dirs-first grouping stays).
+
+import { ref } from "vue";
+
+const SORT_MODE_STORAGE_KEY = "files_sort_mode";
+
+export type FileSortMode = "name" | "recent";
+
+function readStoredMode(): FileSortMode {
+  return localStorage.getItem(SORT_MODE_STORAGE_KEY) === "recent" ? "recent" : "name";
+}
+
+export function useFileSortMode() {
+  const sortMode = ref<FileSortMode>(readStoredMode());
+
+  function setSortMode(mode: FileSortMode): void {
+    sortMode.value = mode;
+    localStorage.setItem(SORT_MODE_STORAGE_KEY, mode);
+  }
+
+  return { sortMode, setSortMode };
+}

package/src/composables/useFileTree.ts

@@ -0,0 +1,85 @@
+// Composable: workspace file tree state + lazy loading.
+// Extracted from FilesView.vue (#507 step 1).
+
+import { ref } from "vue";
+import type { TreeNode } from "../types/fileTree";
+import { useExpandedDirs } from "./useExpandedDirs";
+import { apiGet } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+export function useFileTree() {
+  const { expand } = useExpandedDirs();
+
+  const rootNode = ref<TreeNode | null>(null);
+  const refRoots = ref<TreeNode[]>([]);
+  const childrenByPath = ref<Map<string, TreeNode[] | null>>(new Map());
+  const treeError = ref<string | null>(null);
+
+  // Generation counter — incremented on reloadRoot so in-flight
+  // requests from a prior generation don't write stale data.
+  let generation = 0;
+
+  async function loadDirChildren(path: string): Promise<void> {
+    if (childrenByPath.value.has(path)) return;
+
+    const gen = generation;
+    const next = new Map(childrenByPath.value);
+    next.set(path, null);
+    childrenByPath.value = next;
+
+    const result = await apiGet<TreeNode>(API_ROUTES.files.dir, { path });
+    // Bail if reloadRoot was called while we were awaiting.
+    if (gen !== generation) return;
+    if (!result.ok) {
+      const rollback = new Map(childrenByPath.value);
+      rollback.delete(path);
+      childrenByPath.value = rollback;
+      treeError.value = result.error || `dir: ${result.status}`;
+      return;
+    }
+    const node = result.data;
+    const updated = new Map(childrenByPath.value);
+    updated.set(path, node.children ?? []);
+    childrenByPath.value = updated;
+    if (path === "") rootNode.value = { ...node, children: [] };
+  }
+
+  async function ensureAncestorsLoaded(filePath: string): Promise<void> {
+    const parts = filePath.split("/").filter(Boolean);
+    if (parts.length <= 1) return;
+    const ancestors: string[] = [];
+    for (let i = 1; i < parts.length; i++) {
+      ancestors.push(parts.slice(0, i).join("/"));
+    }
+    for (const dir of ancestors) {
+      expand(dir);
+      await loadDirChildren(dir);
+    }
+  }
+
+  async function reloadRoot(): Promise<void> {
+    generation++;
+    rootNode.value = null;
+    childrenByPath.value = new Map();
+    treeError.value = null;
+    await loadDirChildren("");
+  }
+
+  async function loadRefRoots(): Promise<void> {
+    const result = await apiGet<TreeNode[]>(API_ROUTES.files.refRoots);
+    if (result.ok && Array.isArray(result.data)) {
+      refRoots.value = result.data;
+    }
+  }
+
+  return {
+    rootNode,
+    refRoots,
+    childrenByPath,
+    treeError,
+    loadDirChildren,
+    ensureAncestorsLoaded,
+    reloadRoot,
+    loadRefRoots,
+  };
+}

package/src/composables/useFreshPluginData.ts

@@ -0,0 +1,89 @@
+// Shared fetch-fresh-data-on-mount pattern for plugin view / preview
+// components. Each affected plugin (todo, scheduler, wiki, manageRoles)
+// used to duplicate the same onMounted + AbortController + JSON parse
+// + apply routine in 8 files. This composable factors it out and
+// drives 3 distinct flavours via callbacks:
+//
+//   endpoint(): returns the URL to fetch. A function (not a string)
+//     so callers can derive it from local refs — wiki/View picks
+//     between /api/wiki and /api/wiki?slug=... depending on the
+//     current action.
+//
+//   extract(json): pulls the data off the response envelope. Three
+//     shapes in practice:
+//       - json.data.items     (todo / scheduler)
+//       - json.data           (wiki — the whole WikiData object)
+//       - bare array          (manageRoles — /api/roles returns an
+//                              unwrapped CustomRole[])
+//     Return `null` to skip the apply step (e.g. response malformed
+//     or the caller wants to ignore a particular payload).
+//
+//   apply(data): writes into the caller's local refs. Callers can
+//     guard here — wiki/Preview only applies the index payload when
+//     it's currently showing the index view, because the preview is
+//     reused for page / log / lint_report previews.
+//
+// Lifecycle: `onMounted` fires one initial refresh. `onUnmounted`
+// aborts any in-flight request. Callers can also call `refresh()`
+// explicitly (e.g. from a `watch(() => props.selectedResult.uuid)`
+// to re-fetch when switching between tool results).
+
+import { onMounted, onUnmounted } from "vue";
+import { apiGet } from "../utils/api";
+
+export interface UseFreshPluginDataOptions<T> {
+  endpoint: () => string;
+  extract: (json: unknown) => T | null;
+  apply: (data: T) => void;
+}
+
+export interface UseFreshPluginDataHandle {
+  // Abort any in-flight fetch and fire a new one. Returns true if
+  // the response was applied, false on abort / non-OK / malformed /
+  // apply-skipped. Callers can await this when they want to know
+  // whether the refresh succeeded (e.g. for a manual retry flow).
+  refresh: () => Promise<boolean>;
+
+  // Cancel any in-flight fetch without firing a new one. Called
+  // automatically by the composable on component unmount.
+  abort: () => void;
+}
+
+// Pure core of the refresh logic, exported separately so tests can
+// exercise it without spinning up a Vue component lifecycle. The
+// composable below wraps this with AbortController / onMounted /
+// onUnmounted management.
+export async function refreshOnce<T>(opts: UseFreshPluginDataOptions<T>, signal: AbortSignal): Promise<boolean> {
+  const result = await apiGet<unknown>(opts.endpoint(), undefined, { signal });
+  // AbortError / network error / non-OK HTTP / malformed JSON all land
+  // as { ok: false }. The caller still has prop-initialised state as a
+  // fallback, so a failed refresh is a silent no-op.
+  if (signal.aborted || !result.ok) return false;
+  const extracted = opts.extract(result.data);
+  if (extracted === null) return false;
+  opts.apply(extracted);
+  return true;
+}
+
+export function useFreshPluginData<T>(opts: UseFreshPluginDataOptions<T>): UseFreshPluginDataHandle {
+  let controller: AbortController | null = null;
+
+  async function refresh(): Promise<boolean> {
+    controller?.abort();
+    const c = new AbortController();
+    controller = c;
+    return refreshOnce(opts, c.signal);
+  }
+
+  function abort(): void {
+    controller?.abort();
+    controller = null;
+  }
+
+  onMounted(() => {
+    void refresh();
+  });
+  onUnmounted(abort);
+
+  return { refresh, abort };
+}

package/src/composables/useHealth.ts

@@ -0,0 +1,38 @@
+// Composable for the server /api/health probe.
+//
+// Owns two refs that the UI reads (gemini key availability + sandbox
+// toggle) plus the one-shot fetch that populates them on mount. On
+// fetch failure we assume Gemini is unavailable so dependent UI
+// (e.g. the "generate image" plugin buttons) falls back gracefully
+// — the sandbox flag keeps its initial `true` so the lock indicator
+// doesn't momentarily flash "sandbox disabled" on a transient error.
+
+import { ref, type Ref } from "vue";
+import { API_ROUTES } from "../config/apiRoutes";
+import { apiGet } from "../utils/api";
+
+interface HealthResponse {
+  geminiAvailable?: unknown;
+  sandboxEnabled?: unknown;
+}
+
+export function useHealth(): {
+  geminiAvailable: Ref<boolean>;
+  sandboxEnabled: Ref<boolean>;
+  fetchHealth: () => Promise<void>;
+} {
+  const geminiAvailable = ref(true);
+  const sandboxEnabled = ref(true);
+
+  async function fetchHealth(): Promise<void> {
+    const result = await apiGet<HealthResponse>(API_ROUTES.health);
+    if (!result.ok) {
+      geminiAvailable.value = false;
+      return;
+    }
+    geminiAvailable.value = !!result.data.geminiAvailable;
+    sandboxEnabled.value = !!result.data.sandboxEnabled;
+  }
+
+  return { geminiAvailable, sandboxEnabled, fetchHealth };
+}

package/src/composables/useImeAwareEnter.ts

@@ -0,0 +1,57 @@
+/**
+ * Unify IME (Japanese, Chinese, Korean) Enter-confirmation behavior
+ * across Safari and Chrome / Firefox so only a user-intended Enter
+ * sends a message.
+ *
+ * Safari fires `compositionend` BEFORE the confirming Enter's
+ * `keydown`, so `event.isComposing` is already `false` by the time
+ * the keydown handler runs — the standard `!isComposing` guard lets
+ * the message send on IME confirmation. Chrome / Firefox fire
+ * `compositionend` AFTER the keydown and keep `isComposing` true, so
+ * they handle confirmation correctly on their own.
+ *
+ * We use a tight time window after `compositionend` to suppress only
+ * the immediately-following keydown. Safari's sequence is synchronous
+ * (microseconds); a human follow-up Enter takes >= 100 ms and never
+ * falls inside.
+ */
+export const SAFARI_IME_RACE_WINDOW_MS = 30;
+
+export interface ImeAwareEnterHandlers {
+  onCompositionStart: () => void;
+  onCompositionEnd: () => void;
+  onKeydown: (event: KeyboardEvent) => void;
+  onBlur: () => void;
+}
+
+export function useImeAwareEnter(onSend: () => void, now: () => number = () => performance.now()): ImeAwareEnterHandlers {
+  let isImeComposing = false;
+  let lastCompositionEndAt = 0;
+
+  return {
+    onCompositionStart() {
+      isImeComposing = true;
+    },
+    onCompositionEnd() {
+      isImeComposing = false;
+      lastCompositionEndAt = now();
+    },
+    onBlur() {
+      isImeComposing = false;
+      lastCompositionEndAt = 0;
+    },
+    onKeydown(event: KeyboardEvent) {
+      if (event.key !== "Enter" || event.shiftKey) return;
+      if (event.isComposing || isImeComposing) {
+        event.preventDefault();
+        return;
+      }
+      if (now() - lastCompositionEndAt < SAFARI_IME_RACE_WINDOW_MS) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      onSend();
+    },
+  };
+}

package/src/composables/useKeyNavigation.ts

@@ -0,0 +1,60 @@
+// Keyboard navigation extracted from App.vue.
+// Arrow keys scroll the canvas (main pane) or navigate the sidebar
+// result list depending on which pane is active.
+
+import type { Ref, ComputedRef } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import { findScrollableChild } from "../utils/dom/scrollable";
+
+const SCROLL_AMOUNT = 60;
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+}
+
+function isVerticalArrow(key: string): key is "ArrowUp" | "ArrowDown" {
+  return key === "ArrowUp" || key === "ArrowDown";
+}
+
+function resolveNextUuid(results: ToolResultComplete[], currentUuid: string | null, direction: "ArrowUp" | "ArrowDown"): string | null {
+  if (results.length === 0) return null;
+  const idx = results.findIndex((r) => r.uuid === currentUuid);
+  if (idx === -1) {
+    return direction === "ArrowDown" ? results[0].uuid : results[results.length - 1].uuid;
+  }
+  const next = direction === "ArrowUp" ? Math.max(0, idx - 1) : Math.min(results.length - 1, idx + 1);
+  return results[next].uuid;
+}
+
+export function useKeyNavigation(opts: {
+  canvasRef: Ref<HTMLDivElement | null>;
+  activePane: Ref<"sidebar" | "main">;
+  sidebarResults: ComputedRef<ToolResultComplete[]>;
+  selectedResultUuid: ComputedRef<string | null> & {
+    value: string | null;
+  };
+}) {
+  const { canvasRef, activePane, sidebarResults, selectedResultUuid } = opts;
+
+  function handleCanvasKeydown(e: KeyboardEvent): void {
+    if (!isVerticalArrow(e.key)) return;
+    if (isEditableTarget(e.target)) return;
+    if (!canvasRef.value) return;
+    const scrollable = findScrollableChild(canvasRef.value);
+    if (!scrollable) return;
+    e.preventDefault();
+    const delta = e.key === "ArrowDown" ? SCROLL_AMOUNT : -SCROLL_AMOUNT;
+    scrollable.scrollBy({ top: delta, behavior: "smooth" });
+  }
+
+  function handleKeyNavigation(e: KeyboardEvent): void {
+    if (activePane.value !== "sidebar") return;
+    if (isEditableTarget(e.target)) return;
+    if (!isVerticalArrow(e.key)) return;
+    e.preventDefault();
+    const nextUuid = resolveNextUuid(sidebarResults.value, selectedResultUuid.value, e.key);
+    if (nextUuid) selectedResultUuid.value = nextUuid;
+  }
+
+  return { handleCanvasKeydown, handleKeyNavigation };
+}

package/src/composables/useMarkdownLinkHandler.ts

@@ -0,0 +1,46 @@
+// Composable: intercept clicks on <a> links inside rendered markdown
+// bodies and route workspace-internal refs back into FilesView / the
+// chat session loader. Extracted from FilesView.vue (#507 step 8).
+
+import type { Ref } from "vue";
+import { isExternalHref, resolveWorkspaceLink, extractSessionIdFromPath } from "../utils/path/relativeLink";
+
+interface MarkdownLinkHandlers {
+  /** Invoked when a link resolves to a workspace file path. */
+  onNavigate: (path: string) => void;
+  /** Invoked when a link resolves to a chat session jsonl. */
+  onLoadSession: (sessionId: string) => void;
+}
+
+export function useMarkdownLinkHandler(selectedPath: Ref<string | null>, handlers: MarkdownLinkHandlers) {
+  function handleMarkdownLinkClick(event: MouseEvent): void {
+    if (event.button !== 0) return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const anchor = target.closest("a");
+    if (!anchor) return;
+    const href = anchor.getAttribute("href");
+    if (!href) return;
+    // External URLs and mailto/tel: let TextResponseView's existing
+    // handler open them in a new tab.
+    if (isExternalHref(href)) return;
+    // Anchor-only (#section): let the browser handle in-page scroll.
+    if (href.startsWith("#")) return;
+    if (!selectedPath.value) return;
+    const resolved = resolveWorkspaceLink(selectedPath.value, href);
+    if (!resolved) return;
+    event.preventDefault();
+    event.stopPropagation();
+    // Chat session link: hand off so the sidebar chat switches to that
+    // session instead of opening the raw jsonl as a file.
+    const sessionId = extractSessionIdFromPath(resolved);
+    if (sessionId !== null) {
+      handlers.onLoadSession(sessionId);
+      return;
+    }
+    handlers.onNavigate(resolved);
+  }
+
+  return { handleMarkdownLinkClick };
+}

package/src/composables/useMarkdownMode.ts

@@ -0,0 +1,17 @@
+// Composable: markdown raw/rendered toggle persisted to localStorage.
+// Extracted from FilesView.vue (#507 step 5).
+
+import { ref } from "vue";
+
+const MD_RAW_STORAGE_KEY = "files_md_raw_mode";
+
+export function useMarkdownMode() {
+  const mdRawMode = ref(localStorage.getItem(MD_RAW_STORAGE_KEY) === "true");
+
+  function toggleMdRaw(): void {
+    mdRawMode.value = !mdRawMode.value;
+    localStorage.setItem(MD_RAW_STORAGE_KEY, String(mdRawMode.value));
+  }
+
+  return { mdRawMode, toggleMdRaw };
+}

package/src/composables/useMcpTools.ts

@@ -0,0 +1,71 @@
+// Composable that owns the MCP tool state used by the sidebar:
+// which tools are currently disabled, their per-tool prompts, and
+// the derived `availableTools` / `toolDescriptions` computeds. The
+// pure rules live in src/utils/mcpTools so they are unit-testable
+// independently of fetch / Vue.
+
+import { computed, ref, type ComputedRef } from "vue";
+import { API_ROUTES } from "../config/apiRoutes";
+import type { Role } from "../config/roles";
+import { availableToolsFor, toolDescriptionsFor, type ToolDefinitionMetadata } from "../utils/tools/mcp";
+import { apiGet } from "../utils/api";
+
+interface UseMcpToolsOptions {
+  currentRole: ComputedRef<Role>;
+  // Injection point for the in-app plugin registry lookup. Real
+  // callers pass `(name) => getPlugin(name)?.toolDefinition ?? null`,
+  // tests can stub it.
+  getDefinition: (name: string) => ToolDefinitionMetadata | null;
+}
+
+export function useMcpTools(opts: UseMcpToolsOptions) {
+  const disabledMcpTools = ref(new Set<string>());
+  const mcpToolDescriptions = ref<Record<string, string>>({});
+  // Surfaces the most recent GET /api/mcp-tools failure so consumers
+  // (e.g. the Settings modal's MCP tab) can render a small warning.
+  // We intentionally keep the "all tools visible" fallback below so
+  // the UI stays usable; this ref lets the UI tell the user *why* the
+  // list looks incomplete / unfiltered.
+  const mcpToolsError = ref<string | null>(null);
+
+  const availableTools = computed(() => availableToolsFor(opts.currentRole.value.availablePlugins, disabledMcpTools.value));
+
+  const toolDescriptions = computed(() => toolDescriptionsFor(opts.currentRole.value.availablePlugins, opts.getDefinition, mcpToolDescriptions.value));
+
+  interface McpToolStatus {
+    name: string;
+    enabled: boolean;
+    prompt?: string;
+  }
+
+  function hasPrompt(tool: McpToolStatus): tool is McpToolStatus & { prompt: string } {
+    return typeof tool.prompt === "string" && tool.prompt.length > 0;
+  }
+
+  async function fetchMcpToolsStatus(): Promise<void> {
+    const result = await apiGet<McpToolStatus[]>(API_ROUTES.mcpTools.list);
+    if (!result.ok) {
+      mcpToolsError.value = result.error;
+      // Keep the "all tools visible" fallback — not clearing
+      // disabledMcpTools or descriptions means the UI remains usable.
+      return;
+    }
+    if (!Array.isArray(result.data)) {
+      mcpToolsError.value = "Unexpected response shape from /api/mcp-tools";
+      return;
+    }
+    mcpToolsError.value = null;
+    const tools = result.data;
+    disabledMcpTools.value = new Set(tools.filter((t) => !t.enabled).map((t) => t.name));
+    mcpToolDescriptions.value = Object.fromEntries(tools.filter(hasPrompt).map((t) => [t.name, t.prompt]));
+  }
+
+  return {
+    disabledMcpTools,
+    mcpToolDescriptions,
+    mcpToolsError,
+    availableTools,
+    toolDescriptions,
+    fetchMcpToolsStatus,
+  };
+}

package/src/composables/useMergedSessions.ts

@@ -0,0 +1,27 @@
+// Merged session list for the history pane + tab bar.
+// Live sessions in sessionMap are merged with server-only sessions
+// (from the chat indexer), sorted newest-first by updatedAt.
+
+import { computed, type Ref } from "vue";
+import type { ActiveSession, SessionSummary } from "../types/session";
+import { mergeSessionLists } from "../utils/session/mergeSessions";
+
+const MAX_TABS = 6;
+
+// A freshly-created live session (plus-button / role-change) has no
+// toolResults yet. Hide it from the tab bar + history until the user
+// sends the first message — otherwise the UI shows an empty shell row
+// that the user didn't ask for.
+function hasContent(session: ActiveSession): boolean {
+  return session.toolResults.length > 0;
+}
+
+export function useMergedSessions(opts: { sessionMap: Map<string, ActiveSession>; sessions: Ref<SessionSummary[]> }) {
+  const { sessionMap, sessions } = opts;
+
+  const mergedSessions = computed((): SessionSummary[] => mergeSessionLists([...sessionMap.values()].filter(hasContent), sessions.value));
+
+  const tabSessions = computed(() => mergedSessions.value.slice(0, MAX_TABS));
+
+  return { mergedSessions, tabSessions };
+}