mulmoclaude 0.1.0

package/src/components/SettingsReferenceDirsTab.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiGet, apiPut } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+interface RefDirEntry {
+  hostPath: string;
+  label: string;
+}
+
+const dirs = ref<RefDirEntry[]>([]);
+const loading = ref(true);
+const error = ref("");
+const saving = ref(false);
+const saveStatus = ref("");
+
+const draftPath = ref("");
+const draftLabel = ref("");
+const draftError = ref("");
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  const result = await apiGet<{ dirs: RefDirEntry[] }>(API_ROUTES.config.referenceDirs);
+  loading.value = false;
+  if (!result.ok) {
+    error.value = result.error;
+    return;
+  }
+  dirs.value = result.data.dirs;
+}
+
+async function save(): Promise<void> {
+  saving.value = true;
+  saveStatus.value = "";
+  const result = await apiPut<{ dirs: RefDirEntry[] }>(API_ROUTES.config.referenceDirs, { dirs: dirs.value });
+  saving.value = false;
+  if (!result.ok) {
+    saveStatus.value = result.error;
+    return;
+  }
+  dirs.value = result.data.dirs;
+  saveStatus.value = "Saved";
+  setTimeout(() => {
+    saveStatus.value = "";
+  }, 2000);
+}
+
+function addEntry(): void {
+  draftError.value = "";
+  const p = draftPath.value.trim();
+  if (!p) {
+    draftError.value = "Path required";
+    return;
+  }
+  if (!p.startsWith("/") && !p.startsWith("~/")) {
+    draftError.value = "Must be an absolute path or start with ~/";
+    return;
+  }
+  // Normalize: trim trailing slashes for consistent comparison
+  let normalized = p;
+  while (normalized.length > 1 && normalized.endsWith("/")) {
+    normalized = normalized.slice(0, -1);
+  }
+  const stripSlash = (s: string): string => {
+    let r = s;
+    while (r.length > 1 && r.endsWith("/")) r = r.slice(0, -1);
+    return r;
+  };
+  if (dirs.value.some((d) => stripSlash(d.hostPath) === normalized)) {
+    draftError.value = "Already exists";
+    return;
+  }
+  const lastSeg = normalized.split("/").pop();
+  const label = draftLabel.value.trim() || lastSeg || normalized;
+  // Reject duplicate labels — @ref/<label> routing requires uniqueness
+  if (dirs.value.some((d) => d.label === label)) {
+    draftError.value = `Label "${label}" already exists`;
+    return;
+  }
+  dirs.value.push({ hostPath: normalized, label });
+  draftPath.value = "";
+  draftLabel.value = "";
+}
+
+function removeEntry(index: number): void {
+  dirs.value.splice(index, 1);
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="space-y-3">
+    <p class="text-xs text-gray-600 leading-relaxed">
+      External directories Claude can read but not modify. In Docker mode, these are mounted read-only. Useful for referencing Obsidian vaults, project code, or
+      document folders.
+    </p>
+
+    <!-- Loading -->
+    <div v-if="loading" class="text-sm text-gray-400">Loading...</div>
+    <div v-else-if="error" class="text-sm text-red-600 bg-red-50 rounded px-3 py-2">
+      {{ error }}
+    </div>
+
+    <template v-else>
+      <!-- Existing entries -->
+      <div v-if="dirs.length === 0" class="text-sm text-gray-400">No reference directories configured.</div>
+      <div v-else class="space-y-1.5">
+        <div
+          v-for="(dir, i) in dirs"
+          :key="dir.hostPath"
+          class="flex items-center gap-2 px-2 py-1.5 bg-gray-50 rounded text-sm"
+          :data-testid="`reference-dir-${i}`"
+        >
+          <span class="material-icons text-sm text-gray-400 shrink-0">folder_open</span>
+          <div class="flex-1 min-w-0">
+            <div class="font-mono text-xs text-gray-800 truncate">
+              {{ dir.hostPath }}
+            </div>
+            <div v-if="dir.label" class="text-xs text-gray-500 truncate">
+              {{ dir.label }}
+            </div>
+          </div>
+          <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 shrink-0"> read-only </span>
+          <button class="text-gray-300 hover:text-red-500 shrink-0" title="Remove" data-testid="reference-dir-remove-btn" @click="removeEntry(i)">
+            <span class="material-icons text-sm">close</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Add new -->
+      <div class="border border-gray-200 rounded p-2 space-y-2">
+        <div class="text-xs font-semibold text-gray-600">Add reference directory</div>
+        <input
+          v-model="draftPath"
+          class="w-full px-2 py-1 text-xs font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          placeholder="/Users/me/ObsidianVault or ~/Documents/notes"
+          data-testid="reference-dir-path-input"
+          @keydown.enter="addEntry"
+          @keydown.stop
+        />
+        <input
+          v-model="draftLabel"
+          class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          placeholder="Label (optional — defaults to folder name)"
+          data-testid="reference-dir-label-input"
+          @keydown.enter="addEntry"
+          @keydown.stop
+        />
+        <div class="flex items-center gap-2">
+          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="reference-dir-add-btn" @click="addEntry">Add</button>
+          <span v-if="draftError" class="text-xs text-red-500">{{ draftError }}</span>
+        </div>
+      </div>
+
+      <!-- Save -->
+      <div class="flex items-center gap-2">
+        <button
+          class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300"
+          :disabled="saving"
+          data-testid="reference-dirs-save-btn"
+          @click="save"
+        >
+          {{ saving ? "Saving..." : "Save" }}
+        </button>
+        <span v-if="saveStatus" class="text-xs" :class="saveStatus === 'Saved' ? 'text-green-600' : 'text-red-600'">
+          {{ saveStatus }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/SettingsWorkspaceDirsTab.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiGet, apiPut } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+interface DirEntry {
+  path: string;
+  description: string;
+  structure: "flat" | "by-name" | "by-date";
+}
+
+const dirs = ref<DirEntry[]>([]);
+const loading = ref(true);
+const error = ref("");
+const saving = ref(false);
+const saveStatus = ref("");
+
+// Draft for new entry
+const draftPath = ref("");
+const draftDescription = ref("");
+const draftStructure = ref<DirEntry["structure"]>("flat");
+const draftError = ref("");
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  const result = await apiGet<{ dirs: DirEntry[] }>(API_ROUTES.config.workspaceDirs);
+  loading.value = false;
+  if (!result.ok) {
+    error.value = result.error;
+    return;
+  }
+  dirs.value = result.data.dirs;
+}
+
+async function save(): Promise<void> {
+  saving.value = true;
+  saveStatus.value = "";
+  const result = await apiPut<{ dirs: DirEntry[] }>(API_ROUTES.config.workspaceDirs, { dirs: dirs.value });
+  saving.value = false;
+  if (!result.ok) {
+    saveStatus.value = result.error;
+    return;
+  }
+  dirs.value = result.data.dirs;
+  saveStatus.value = "Saved";
+  setTimeout(() => {
+    saveStatus.value = "";
+  }, 2000);
+}
+
+function addEntry(): void {
+  draftError.value = "";
+  const p = draftPath.value.trim();
+  if (!p) {
+    draftError.value = "Path required";
+    return;
+  }
+  if (!p.startsWith("data/") && !p.startsWith("artifacts/")) {
+    draftError.value = "Must start with data/ or artifacts/";
+    return;
+  }
+  if (dirs.value.some((d) => d.path === p)) {
+    draftError.value = "Already exists";
+    return;
+  }
+  dirs.value.push({
+    path: p,
+    description: draftDescription.value.trim(),
+    structure: draftStructure.value,
+  });
+  draftPath.value = "";
+  draftDescription.value = "";
+  draftStructure.value = "flat";
+}
+
+function removeEntry(index: number): void {
+  dirs.value.splice(index, 1);
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="space-y-3">
+    <p class="text-xs text-gray-600 leading-relaxed">
+      Custom directories for organizing files under
+      <code class="bg-gray-100 px-1 rounded">data/</code> and <code class="bg-gray-100 px-1 rounded">artifacts/</code>. Claude uses these to route file saves.
+    </p>
+
+    <!-- Loading -->
+    <div v-if="loading" class="text-sm text-gray-400">Loading...</div>
+    <div v-else-if="error" class="text-sm text-red-600 bg-red-50 rounded px-3 py-2">
+      {{ error }}
+    </div>
+
+    <template v-else>
+      <!-- Existing entries -->
+      <div v-if="dirs.length === 0" class="text-sm text-gray-400">No custom directories configured.</div>
+      <div v-else class="space-y-1.5">
+        <div
+          v-for="(dir, i) in dirs"
+          :key="dir.path"
+          class="flex items-center gap-2 px-2 py-1.5 bg-gray-50 rounded text-sm"
+          :data-testid="`workspace-dir-${i}`"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="font-mono text-xs text-gray-800">{{ dir.path }}/</div>
+            <div v-if="dir.description" class="text-xs text-gray-500 truncate">
+              {{ dir.description }}
+            </div>
+          </div>
+          <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-200 text-gray-600 shrink-0">
+            {{ dir.structure }}
+          </span>
+          <button class="text-gray-300 hover:text-red-500 shrink-0" title="Remove" @click="removeEntry(i)">
+            <span class="material-icons text-sm">close</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Add new -->
+      <div class="border border-gray-200 rounded p-2 space-y-2">
+        <div class="text-xs font-semibold text-gray-600">Add directory</div>
+        <div class="flex gap-2">
+          <input
+            v-model="draftPath"
+            class="flex-1 px-2 py-1 text-xs font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            placeholder="data/clients or artifacts/reports"
+            data-testid="workspace-dir-path-input"
+            @keydown.enter="addEntry"
+            @keydown.stop
+          />
+          <select
+            v-model="draftStructure"
+            class="text-xs border border-gray-300 rounded px-1 py-1 focus:outline-none"
+            data-testid="workspace-dir-structure-select"
+          >
+            <option value="flat">flat</option>
+            <option value="by-name">by-name</option>
+            <option value="by-date">by-date</option>
+          </select>
+        </div>
+        <input
+          v-model="draftDescription"
+          class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          placeholder="Description (what goes in this folder)"
+          data-testid="workspace-dir-desc-input"
+          @keydown.enter="addEntry"
+          @keydown.stop
+        />
+        <div class="flex items-center gap-2">
+          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="workspace-dir-add-btn" @click="addEntry">Add</button>
+          <span v-if="draftError" class="text-xs text-red-500">{{ draftError }}</span>
+        </div>
+      </div>
+
+      <!-- Save -->
+      <div class="flex items-center gap-2">
+        <button
+          class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300"
+          :disabled="saving"
+          data-testid="workspace-dirs-save-btn"
+          @click="save"
+        >
+          {{ saving ? "Saving..." : "Save" }}
+        </button>
+        <span v-if="saveStatus" class="text-xs" :class="saveStatus === 'Saved' ? 'text-green-600' : 'text-red-600'">
+          {{ saveStatus }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/SidebarHeader.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex items-center gap-2">
+    <img :src="logoUrl" alt="" class="h-[50px] w-auto -my-3.5 -ml-3 rounded object-contain shrink-0" />
+    <h1 data-testid="app-title" class="text-sm font-semibold text-gray-800 mr-1" :style="titleStyle">MulmoClaude</h1>
+    <div class="flex gap-2">
+      <LockStatusPopup
+        ref="lockPopup"
+        :sandbox-enabled="sandboxEnabled"
+        :open="lockPopupOpen"
+        @update:open="lockPopupOpen = $event"
+        @test-query="(q) => emit('testQuery', q)"
+      />
+      <NotificationBell :force-close="lockPopupOpen" @navigate="(action) => emit('notificationNavigate', action)" @update:open="onNotificationOpen" />
+      <button
+        class="text-gray-400 hover:text-gray-700"
+        :class="{ 'text-blue-500': showRightSidebar }"
+        title="Tool call history"
+        @click="emit('toggleRightSidebar')"
+      >
+        <span class="material-icons">build</span>
+      </button>
+      <button class="text-gray-400 hover:text-gray-700" data-testid="settings-btn" title="Settings" aria-label="Settings" @click="emit('openSettings')">
+        <span class="material-icons">settings</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, type CSSProperties } from "vue";
+import LockStatusPopup from "./LockStatusPopup.vue";
+import NotificationBell from "./NotificationBell.vue";
+import { useClickOutside } from "../composables/useClickOutside";
+import type { NotificationPayload } from "../types/notification";
+import logoUrl from "../assets/mulmo_bw.png";
+
+defineProps<{
+  sandboxEnabled: boolean;
+  showRightSidebar: boolean;
+  titleStyle?: CSSProperties;
+}>();
+
+const emit = defineEmits<{
+  testQuery: [query: string];
+  notificationNavigate: [action: NotificationPayload["action"]];
+  toggleRightSidebar: [];
+  openSettings: [];
+}>();
+
+const lockPopupOpen = ref(false);
+const lockPopup = ref<{
+  button: HTMLButtonElement | null;
+  popup: HTMLDivElement | null;
+} | null>(null);
+const lockButton = computed(() => lockPopup.value?.button ?? null);
+const lockPopupEl = computed(() => lockPopup.value?.popup ?? null);
+
+const { handler } = useClickOutside({
+  isOpen: lockPopupOpen,
+  buttonRef: lockButton,
+  popupRef: lockPopupEl,
+});
+onMounted(() => document.addEventListener("mousedown", handler));
+onBeforeUnmount(() => document.removeEventListener("mousedown", handler));
+
+function onNotificationOpen(isOpen: boolean): void {
+  if (isOpen) lockPopupOpen.value = false;
+}
+</script>