mulmoclaude 0.1.0

package/src/components/FileTreePane.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="w-72 flex-shrink-0 border-r border-gray-200 overflow-y-auto p-2 bg-gray-50">
+    <div class="flex justify-end items-center gap-2 px-1 pb-1 text-xs">
+      <span class="text-gray-400">Sort:</span>
+      <button
+        type="button"
+        class="px-2 py-0.5 rounded transition-colors"
+        :class="sortMode === 'name' ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-500 hover:bg-gray-200'"
+        :aria-pressed="sortMode === 'name'"
+        title="Sort by name"
+        data-testid="file-sort-name"
+        @click="emit('update:sortMode', 'name')"
+      >
+        Name
+      </button>
+      <button
+        type="button"
+        class="px-2 py-0.5 rounded transition-colors"
+        :class="sortMode === 'recent' ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-500 hover:bg-gray-200'"
+        :aria-pressed="sortMode === 'recent'"
+        title="Sort by modified date (newest first)"
+        data-testid="file-sort-recent"
+        @click="emit('update:sortMode', 'recent')"
+      >
+        Recent
+      </button>
+    </div>
+    <div v-if="treeError" class="p-2 text-xs text-red-600">
+      {{ treeError }}
+    </div>
+    <div v-else-if="!rootNode" class="p-2 text-xs text-gray-400">Loading...</div>
+    <FileTree
+      v-else
+      :node="rootNode"
+      :selected-path="selectedPath"
+      :recent-paths="recentPaths"
+      :children-by-path="childrenByPath"
+      :sort-mode="sortMode"
+      @select="emit('select', $event)"
+      @load-children="emit('loadChildren', $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">
+        <span class="text-[10px] font-semibold text-gray-400 uppercase">Reference</span>
+        <span class="text-[9px] px-1 py-0.5 rounded bg-blue-100 text-blue-600">RO</span>
+      </div>
+      <FileTree
+        v-for="refNode in refRoots"
+        :key="refNode.path"
+        :node="refNode"
+        :selected-path="selectedPath"
+        :recent-paths="emptySet"
+        :children-by-path="childrenByPath"
+        :sort-mode="sortMode"
+        @select="emit('select', $event)"
+        @load-children="emit('loadChildren', $event)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FileTree from "./FileTree.vue";
+import type { TreeNode } from "../types/fileTree";
+import type { FileSortMode } from "../composables/useFileSortMode";
+
+defineProps<{
+  rootNode: TreeNode | null;
+  refRoots: TreeNode[];
+  childrenByPath: Map<string, TreeNode[] | null>;
+  treeError: string | null;
+  selectedPath: string | null;
+  recentPaths: Set<string>;
+  sortMode: FileSortMode;
+}>();
+
+const emit = defineEmits<{
+  select: [path: string];
+  loadChildren: [path: string];
+  "update:sortMode": [mode: FileSortMode];
+}>();
+
+// Shared empty set for reference roots (they don't highlight recents).
+const emptySet = new Set<string>();
+</script>

package/src/components/FilesView.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="h-full flex bg-white">
+    <FileTreePane
+      :root-node="rootNode"
+      :ref-roots="refRoots"
+      :children-by-path="childrenByPath"
+      :tree-error="treeError"
+      :selected-path="selectedPath"
+      :recent-paths="recentPaths"
+      :sort-mode="sortMode"
+      @select="selectFile"
+      @load-children="loadDirChildren"
+      @update:sort-mode="setSortMode"
+    />
+    <!-- Content pane -->
+    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+      <FileContentHeader
+        :selected-path="selectedPath"
+        :size="content?.size ?? null"
+        :modified-ms="content?.modifiedMs ?? null"
+        :is-markdown="isMarkdown"
+        :md-raw-mode="mdRawMode"
+        @toggle-md-raw="toggleMdRaw"
+        @deselect="deselectFile"
+      />
+      <FileContentRenderer
+        :selected-path="selectedPath"
+        :content="content"
+        :content-error="contentError"
+        :content-loading="contentLoading"
+        :scheduler-result="schedulerResult"
+        :todo-explorer-result="todoExplorerResult"
+        :is-markdown="isMarkdown"
+        :is-html="isHtml"
+        :is-json="isJson"
+        :is-jsonl="isJsonl"
+        :md-raw-mode="mdRawMode"
+        :sandboxed-html="sandboxedHtml"
+        :json-tokens="jsonTokens"
+        :jsonl-lines="jsonlLines"
+        :md-frontmatter="mdFrontmatter"
+        :raw-save-error="rawSaveError"
+        @markdown-link-click="handleMarkdownLinkClick"
+        @update-source="saveRawMarkdown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
+import FileTreePane from "./FileTreePane.vue";
+import FileContentHeader from "./FileContentHeader.vue";
+import FileContentRenderer from "./FileContentRenderer.vue";
+import { useFileTree } from "../composables/useFileTree";
+import { useFileSelection, isValidFilePath } from "../composables/useFileSelection";
+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 { API_ROUTES } from "../config/apiRoutes";
+import { toSchedulerResult } from "../utils/filesPreview/schedulerPreview";
+import { toTodoExplorerResult } from "../utils/filesPreview/todoPreview";
+
+const RECENT_THRESHOLD_MS = 60 * 1000;
+
+const route = useRoute();
+
+const props = defineProps<{
+  refreshToken?: number;
+}>();
+
+const emit = defineEmits<{
+  // Emitted when the user clicks a markdown link whose target is
+  // a chat session jsonl; App.vue should load that session into
+  // the active chat view rather than opening the raw jsonl.
+  loadSession: [sessionId: string];
+}>();
+
+const { rootNode, refRoots, childrenByPath, treeError, loadDirChildren, ensureAncestorsLoaded, reloadRoot, loadRefRoots } = useFileTree();
+
+const { selectedPath, content, contentLoading, contentError, loadContent, selectFile, deselectFile, abortContent } = useFileSelection();
+
+const { mdRawMode, toggleMdRaw } = useMarkdownMode();
+
+const { sortMode, setSortMode } = useFileSortMode();
+
+const { isMarkdown, isHtml, isJson, isJsonl, sandboxedHtml, jsonTokens, jsonlLines, mdFrontmatter } = useContentDisplay(selectedPath, content);
+
+// Save-error banner shown above the Rendered-mode markdown editor.
+// Cleared on every new file load and on the next successful save.
+const rawSaveError = ref<string | null>(null);
+
+async function saveRawMarkdown(newSource: string): Promise<void> {
+  if (!selectedPath.value) return;
+  if (content.value?.kind !== "text") return;
+  if (newSource === content.value.content) return;
+  // Snapshot the target path so a late response from a PUT for file A
+  // can't overwrite `content.value` after the user has navigated to
+  // file B. Server-side the save still completes — we only suppress
+  // the stale UI update.
+  const pathAtSave = selectedPath.value;
+  rawSaveError.value = null;
+  const result = await apiPut<{
+    path: string;
+    size: number;
+    modifiedMs: number;
+  }>(API_ROUTES.files.content, {
+    path: pathAtSave,
+    content: newSource,
+  });
+  if (selectedPath.value !== pathAtSave) return;
+  if (!result.ok) {
+    rawSaveError.value = result.error;
+    return;
+  }
+  // Reflect the saved state locally — size/modifiedMs come from the
+  // server's post-write stat, and `content` is what we just sent. Avoid
+  // a round-trip GET since the server has already confirmed the write.
+  content.value = {
+    kind: "text",
+    path: result.data.path,
+    content: newSource,
+    size: result.data.size,
+    modifiedMs: result.data.modifiedMs,
+  };
+}
+
+// Clear any stale save error whenever a new file is loaded.
+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));
+
+const recentPaths = computed(() => {
+  const set = new Set<string>();
+  const now = Date.now();
+  // Walk every loaded directory in the cache — lazy-loaded children
+  // may not be rooted under the ref we start from, so iterating the
+  // cache directly is both cheaper and more complete.
+  for (const children of childrenByPath.value.values()) {
+    if (!children) continue;
+    for (const node of children) {
+      if (node.type === "file" && node.modifiedMs && now - node.modifiedMs < RECENT_THRESHOLD_MS) {
+        set.add(node.path);
+      }
+    }
+  }
+  return set;
+});
+
+// Uses click.capture so we intercept before TextResponseView's own
+// handler (which only knows about absolute URLs) sees the event.
+const { handleMarkdownLinkClick } = useMarkdownLinkHandler(selectedPath, {
+  onNavigate: selectFile,
+  onLoadSession: (sessionId) => emit("loadSession", sessionId),
+});
+
+// External URL changes (back/forward) → update selectedPath.
+watch(
+  () => route.query.path,
+  (newPath) => {
+    if (!isValidFilePath(newPath)) {
+      if (selectedPath.value !== null) {
+        selectedPath.value = null;
+        content.value = null;
+      }
+      return;
+    }
+    if (newPath !== selectedPath.value) {
+      selectedPath.value = newPath;
+      loadContent(newPath);
+    }
+  },
+);
+
+watch(
+  () => props.refreshToken,
+  () => {
+    reloadRoot();
+    if (selectedPath.value) loadContent(selectedPath.value);
+  },
+);
+
+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);
+  }
+});
+
+onUnmounted(() => {
+  abortContent();
+});
+</script>

package/src/components/LockStatusPopup.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="relative">
+    <button
+      ref="button"
+      data-testid="sandbox-lock-button"
+      :class="sandboxEnabled ? 'text-gray-400 hover:text-gray-700' : 'text-amber-400 hover:text-amber-500'"
+      :title="sandboxEnabled ? 'Sandbox enabled (Docker)' : 'No sandbox (Docker not found)'"
+      @click="emit('update:open', !open)"
+    >
+      <span class="material-icons">{{ sandboxEnabled ? "lock" : "lock_open" }}</span>
+    </button>
+    <div v-if="open" ref="popup" class="absolute left-0 top-full mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-50 p-3 text-xs">
+      <p class="mb-2" :class="sandboxEnabled ? 'text-green-800' : 'text-amber-500'">
+        <template v-if="sandboxEnabled">
+          <span class="material-icons text-xs align-middle mr-1">lock</span>
+          <strong>Sandbox enabled:</strong> Docker is running. Filesystem access is isolated.
+        </template>
+        <template v-else>
+          <span class="material-icons text-xs align-middle mr-1">warning</span>
+          <strong>No sandbox:</strong> Claude can access all files on your machine. Install
+          <a href="https://www.docker.com/products/docker-desktop/" target="_blank" class="underline">Docker Desktop</a>
+          to enable filesystem isolation.
+        </template>
+      </p>
+      <div v-if="sandboxEnabled" data-testid="sandbox-credentials-block" class="mb-2 border-t border-gray-100 pt-2">
+        <p class="text-gray-400 mb-1">Host credentials attached:</p>
+        <p v-if="sandboxStatus === null" class="text-gray-400 italic" data-testid="sandbox-credentials-loading">loading…</p>
+        <template v-else>
+          <p data-testid="sandbox-credentials-ssh">
+            <span class="mr-1">🔑</span>
+            <span class="text-gray-500">SSH agent:</span>
+            <span :class="sandboxStatus.sshAgent ? 'text-green-700' : 'text-gray-400'" class="ml-1">
+              {{ sandboxStatus.sshAgent ? "forwarded" : "not forwarded" }}
+            </span>
+          </p>
+          <p data-testid="sandbox-credentials-mounts">
+            <span class="mr-1">📁</span>
+            <span class="text-gray-500">Mounted configs:</span>
+            <span :class="sandboxStatus.mounts.length > 0 ? 'text-green-700' : 'text-gray-400'" class="ml-1">
+              {{ sandboxStatus.mounts.length > 0 ? sandboxStatus.mounts.join(", ") : "none" }}
+            </span>
+          </p>
+        </template>
+      </div>
+      <p class="text-gray-400 mb-1">Test sandbox isolation:</p>
+      <div class="flex flex-col gap-1">
+        <button
+          v-for="q in SANDBOX_TEST_QUERIES"
+          :key="q"
+          data-testid="sandbox-test-query"
+          class="text-left rounded px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors"
+          @click="onTestQuery(q)"
+        >
+          {{ q }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useSandboxStatus } from "../composables/useSandboxStatus";
+
+const props = defineProps<{
+  sandboxEnabled: boolean;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+  testQuery: [query: string];
+}>();
+
+// Canned queries that demonstrate what the sandbox does / doesn't
+// allow. Kept here (not passed as a prop) because they are specific
+// to this popup and nothing else in the app needs them.
+//
+// The last entry is intentionally broader than the others: after #327
+// shipped opt-in credential forwarding, users need a way to ask what's
+// actually attached to *their* container, not just read the generic
+// docs. Claude answers by reading config/helps/sandbox.md and
+// inspecting the live state via built-in tools.
+const SANDBOX_TEST_QUERIES = [
+  "Run `whoami` and show the result",
+  "Run `hostname` and show the result",
+  "Try to list files in ~/Library",
+  "Read config/helps/sandbox.md and explain how the sandbox works",
+  "Explain my current sandbox and credential setup",
+];
+
+const button = ref<HTMLButtonElement | null>(null);
+const popup = ref<HTMLDivElement | null>(null);
+defineExpose({ button, popup });
+
+// Lazy-load the sandbox credential state the first time the popup
+// opens (and only when the sandbox is actually enabled — /api/sandbox
+// returns `{}` otherwise and the UI block is hidden).
+const { status: sandboxStatus, ensureLoaded } = useSandboxStatus();
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen && props.sandboxEnabled) await ensureLoaded();
+  },
+);
+
+function onTestQuery(q: string): void {
+  emit("update:open", false);
+  emit("testQuery", q);
+}
+</script>

package/src/components/NotificationBell.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { useNotifications } from "../composables/useNotifications";
+import { formatRelativeTime } from "../utils/format/date";
+import { NOTIFICATION_ICONS, NOTIFICATION_ACTION_TYPES, NOTIFICATION_PRIORITIES } from "../types/notification";
+import type { NotificationPayload } from "../types/notification";
+
+const { notifications, unreadCount, markAllRead, dismiss } = useNotifications();
+const open = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+
+function onDocumentClick(event: MouseEvent): void {
+  if (!open.value || !rootRef.value) return;
+  if (!rootRef.value.contains(event.target as Node)) {
+    close();
+  }
+}
+
+onMounted(() => document.addEventListener("mousedown", onDocumentClick));
+onUnmounted(() => document.removeEventListener("mousedown", onDocumentClick));
+
+const props = defineProps<{
+  forceClose?: boolean;
+}>();
+
+const emit = defineEmits<{
+  navigate: [action: NotificationPayload["action"]];
+  "update:open": [open: boolean];
+}>();
+
+watch(
+  () => props.forceClose,
+  (shouldClose) => {
+    if (shouldClose && open.value) close();
+  },
+);
+
+function toggle(): void {
+  open.value = !open.value;
+  if (open.value) markAllRead();
+  emit("update:open", open.value);
+}
+
+function close(): void {
+  open.value = false;
+  emit("update:open", false);
+}
+
+function iconName(notification: NotificationPayload): string {
+  return notification.icon ?? NOTIFICATION_ICONS[notification.kind] ?? "notifications";
+}
+
+function formatTime(iso: string): string {
+  return formatRelativeTime(iso);
+}
+
+function handleClick(notification: NotificationPayload): void {
+  if (notification.action.type === NOTIFICATION_ACTION_TYPES.navigate) {
+    emit("navigate", notification.action);
+    close();
+  }
+}
+
+function handleDismiss(event: Event, notificationId: string): void {
+  event.stopPropagation();
+  dismiss(notificationId);
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="relative">
+    <!-- Bell button -->
+    <button class="relative text-gray-400 hover:text-gray-700" data-testid="notification-bell" aria-label="Notifications" @click="toggle">
+      <span class="material-icons">notifications</span>
+      <span
+        v-if="unreadCount > 0"
+        class="absolute -top-1.5 -right-1.5 min-w-[1rem] h-4 px-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none"
+        data-testid="notification-badge"
+      >
+        {{ unreadCount > 99 ? "99+" : unreadCount }}
+      </span>
+    </button>
+
+    <!-- Dropdown panel -->
+    <div
+      v-if="open"
+      class="absolute left-0 top-full mt-1 w-72 max-h-80 overflow-y-auto rounded-lg shadow-xl border border-gray-200 bg-white z-50"
+      data-testid="notification-panel"
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <span class="text-sm font-semibold text-gray-700">Notifications</span>
+        <button class="text-xs text-blue-500 hover:text-blue-700" data-testid="notification-mark-all-read" @click="markAllRead">Mark all read</button>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="notifications.length === 0" class="py-8 text-center text-sm text-gray-400">No notifications</div>
+
+      <!-- Items -->
+      <div v-else>
+        <div
+          v-for="n in notifications"
+          :key="n.id"
+          role="button"
+          tabindex="0"
+          class="flex items-start gap-3 px-4 py-3 border-b border-gray-50 hover:bg-gray-50 focus:bg-gray-100 cursor-pointer outline-none"
+          :data-testid="`notification-item-${n.id}`"
+          :aria-label="n.title"
+          @click="handleClick(n)"
+          @keydown.enter="handleClick(n)"
+        >
+          <span class="material-icons text-lg mt-0.5 shrink-0" :class="n.priority === NOTIFICATION_PRIORITIES.high ? 'text-red-500' : 'text-gray-400'">
+            {{ iconName(n) }}
+          </span>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-gray-800 truncate">{{ n.title }}</p>
+            <p v-if="n.body" class="text-xs text-gray-500 truncate mt-0.5">
+              {{ n.body }}
+            </p>
+            <p class="text-xs text-gray-400 mt-0.5">
+              {{ formatTime(n.firedAt) }}
+            </p>
+          </div>
+          <button class="text-gray-300 hover:text-gray-500 shrink-0 mt-0.5" aria-label="Dismiss" @click="handleDismiss($event, n.id)">
+            <span class="material-icons text-sm">close</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/NotificationToast.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useNotifications } from "../composables/useNotifications";
+import { NOTIFICATION_ICONS } from "../types/notification";
+import type { NotificationPayload } from "../types/notification";
+import { ONE_SECOND_MS } from "../../server/utils/time";
+import { formatSmartTime } from "../utils/format/date";
+
+const AUTO_HIDE_MS = 5 * ONE_SECOND_MS;
+
+const { latest } = useNotifications();
+const visible = ref<NotificationPayload | null>(null);
+let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(latest, (item) => {
+  if (!item) return;
+  visible.value = item;
+  if (hideTimer !== null) clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    visible.value = null;
+    hideTimer = null;
+  }, AUTO_HIDE_MS);
+});
+
+function dismiss(): void {
+  if (hideTimer !== null) clearTimeout(hideTimer);
+  hideTimer = null;
+  visible.value = null;
+}
+
+function iconName(n: NotificationPayload): string {
+  return n.icon ?? NOTIFICATION_ICONS[n.kind] ?? "notifications";
+}
+</script>
+
+<template>
+  <Transition name="toast">
+    <div
+      v-if="visible"
+      data-testid="notification-toast"
+      class="fixed top-4 right-4 z-50 max-w-sm rounded-lg bg-slate-800 text-white shadow-lg p-4 flex items-start gap-3"
+    >
+      <span class="material-icons text-sky-300" aria-hidden="true">
+        {{ iconName(visible) }}
+      </span>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium break-words">{{ visible.title }}</p>
+        <p v-if="visible.body" class="mt-0.5 text-xs text-slate-300 break-words">
+          {{ visible.body }}
+        </p>
+        <p class="mt-1 text-xs text-slate-400">
+          {{ formatSmartTime(visible.firedAt) }}
+        </p>
+      </div>
+      <button type="button" class="text-slate-400 hover:text-white" aria-label="Dismiss" @click="dismiss">
+        <span class="material-icons text-base">close</span>
+      </button>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 200ms ease;
+}
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>