mulmoclaude 0.3.0 → 0.5.0

package/src/components/SourcesView.vue

@@ -0,0 +1,45 @@
+<template>
+  <SourcesManager mode="page" />
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, watch } from "vue";
+import { useRoute } from "vue-router";
+import SourcesManager from "./SourcesManager.vue";
+import { scrollIntoViewByTestId } from "../utils/dom/scrollIntoViewByTestId";
+
+// Permalink support (#762): arrivals on /sources/:slug scroll and
+// flash the matching source row. SourcesManager fetches the list
+// asynchronously and renders `source-row-<slug>` testids per row,
+// so we retry a couple of times while the API settles before
+// giving up — avoids a race on first mount when the fetch hasn't
+// resolved yet.
+const MAX_RETRIES = 10;
+const RETRY_INTERVAL_MS = 150;
+
+const route = useRoute();
+
+async function focusUrlSlug(slug: string): Promise<void> {
+  for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+    await nextTick();
+    if (scrollIntoViewByTestId(`source-row-${slug}`)) return;
+    await new Promise((resolve) => window.setTimeout(resolve, RETRY_INTERVAL_MS));
+  }
+}
+
+onMounted(() => {
+  const slug = route.params.slug;
+  if (typeof slug === "string" && slug) {
+    void focusUrlSlug(slug);
+  }
+});
+
+watch(
+  () => route.params.slug,
+  (slug) => {
+    if (typeof slug === "string" && slug) {
+      void focusUrlSlug(slug);
+    }
+  },
+);
+</script>

package/src/components/StackView.vue

@@ -1,26 +1,50 @@
 <template>
-  <div ref="containerRef" class="h-full overflow-y-auto bg-gray-50 p-4 space-y-3" data-testid="stack-scroll">
-    <div v-if="toolResults.length === 0" class="flex items-center justify-center h-full text-gray-400 text-sm">No results yet</div>
-    <div
-      v-for="result in toolResults"
-      :key="result.uuid"
-      :ref="(element) => setItemRef(result.uuid, element as HTMLElement | null)"
-      class="bg-white rounded-lg border transition-colors"
-      :class="result.uuid === selectedResultUuid ? 'border-blue-400 ring-2 ring-blue-200' : 'border-gray-200'"
-    >
-      <button
-        class="w-full flex items-center gap-2 px-3 py-2 border-b border-gray-100 text-left hover:bg-gray-50"
-        :title="result.title || result.toolName"
-        @click="emit('select', result.uuid)"
+  <div class="h-full flex flex-col bg-gray-50">
+    <div class="shrink-0 flex items-center gap-1 text-xs text-gray-400 px-4 pt-3 pb-2" data-testid="stack-role-header">
+      <span v-if="sessionRoleIcon" class="material-icons text-xs leading-none">{{ sessionRoleIcon }}</span>
+      <span v-if="sessionRoleName">{{ sessionRoleName }}</span>
+      <div class="ml-auto flex items-center gap-1">
+        <button
+          type="button"
+          class="text-gray-400 hover:text-gray-700"
+          :class="{ 'text-blue-500': showRightSidebar }"
+          :title="t('sidebarHeader.toolCallHistory')"
+          :aria-label="t('sidebarHeader.toolCallHistory')"
+          :aria-pressed="showRightSidebar"
+          @click="emit('toggle-right-sidebar')"
+        >
+          <span class="material-icons text-lg" aria-hidden="true">build</span>
+        </button>
+        <CanvasViewToggle :model-value="layoutMode" @update:model-value="(mode) => emit('update:layoutMode', mode)" />
+      </div>
+    </div>
+    <!-- Empty state pulled out of the scroll container so `h-full` +
+         the container's `pb-4` padding can't combine into a stray
+         scrollbar. A sibling `flex-1` slot centers cleanly. -->
+    <div v-if="toolResults.length === 0" class="flex-1 flex items-center justify-center text-gray-400 text-sm" data-testid="stack-empty">
+      {{ t("common.noResultsYet") }}
+    </div>
+    <div v-else ref="containerRef" class="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-3" data-testid="stack-scroll">
+      <div
+        v-for="result in toolResults"
+        :key="result.uuid"
+        :ref="(element) => setItemRef(result.uuid, element as HTMLElement | null)"
+        class="bg-white rounded-lg border transition-colors"
+        :class="result.uuid === selectedResultUuid ? 'border-blue-400 ring-2 ring-blue-200' : 'border-gray-200'"
       >
-        <span class="material-icons text-sm text-gray-400">{{ iconFor(result.toolName) }}</span>
-        <span class="text-sm font-medium text-gray-800 truncate">{{ result.title || result.toolName }}</span>
-        <span v-if="resultTimestamps.get(result.uuid)" class="text-[10px] text-gray-400 shrink-0">{{
-          formatSmartTime(resultTimestamps.get(result.uuid)!)
-        }}</span>
-        <span class="font-mono text-xs text-gray-400 shrink-0">{{ result.toolName }}</span>
-      </button>
-      <!-- text-response: render the message as Markdown via the
+        <button
+          class="w-full flex items-center gap-2 px-3 py-2 border-b border-gray-100 text-left hover:bg-gray-50"
+          :title="result.title || result.toolName"
+          @click="emit('select', result.uuid)"
+        >
+          <span class="material-icons text-sm text-gray-400">{{ iconFor(result.toolName) }}</span>
+          <span class="text-sm font-medium text-gray-800 truncate">{{ result.title || result.toolName }}</span>
+          <span v-if="resultTimestamps.get(result.uuid)" class="text-[10px] text-gray-400 shrink-0">{{
+            formatSmartTime(resultTimestamps.get(result.uuid)!)
+          }}</span>
+          <span class="font-mono text-xs text-gray-400 shrink-0">{{ result.toolName }}</span>
+        </button>
+        <!-- text-response: render the message as Markdown via the
            underlying plugin View. The .stack-text-response class below
            collapses the plugin's own card chrome (outer p-6, inner
            rounded/border/shadow box, role header) so only the stack
@@ -31,38 +55,39 @@
            "open external links in a new tab" click handler. Attach
            the same handler here via @click.capture so cross-origin
            links in assistant Markdown don't navigate the SPA away. -->
-      <div v-if="isTextResponse(result)" class="stack-text-response" @click.capture="handleExternalLinkClick">
-        <TextResponseOriginalView :selected-result="result" />
-      </div>
-      <!-- Document-like plugins: let the content flow at its natural
+        <div v-if="isTextResponse(result)" class="stack-text-response" @click.capture="handleExternalLinkClick">
+          <TextResponseOriginalView :selected-result="result" />
+        </div>
+        <!-- Document-like plugins: let the content flow at its natural
            height by overriding the plugin's internal h-full / overflow
            / flex-1 via the .stack-natural scoped styles below. For
            plugins that embed iframes (e.g. presentHtml) we also size
            each iframe to its content after load. -->
-      <div
-        v-else-if="isStackNatural(result.toolName)"
-        :ref="(element) => setNaturalWrapperRef(result.uuid, element as HTMLElement | null)"
-        class="stack-natural"
-      >
-        <component
-          :is="getPlugin(result.toolName)?.viewComponent"
-          v-if="getPlugin(result.toolName)?.viewComponent"
-          :selected-result="result"
-          :send-text-message="sendTextMessage"
-          @update-result="(r: ToolResultComplete) => emit('updateResult', r)"
-        />
-      </div>
-      <!-- Other plugins: fixed height wrapper so plugins that rely on
+        <div
+          v-else-if="isStackNatural(result.toolName)"
+          :ref="(element) => setNaturalWrapperRef(result.uuid, element as HTMLElement | null)"
+          class="stack-natural"
+        >
+          <component
+            :is="getPlugin(result.toolName)?.viewComponent"
+            v-if="getPlugin(result.toolName)?.viewComponent"
+            :selected-result="result"
+            :send-text-message="sendTextMessage"
+            @update-result="(r: ToolResultComplete) => emit('updateResult', r)"
+          />
+        </div>
+        <!-- Other plugins: fixed height wrapper so plugins that rely on
            h-full continue to render properly. -->
-      <div v-else :style="{ height: PLUGIN_HEIGHT }">
-        <component
-          :is="getPlugin(result.toolName)?.viewComponent"
-          v-if="getPlugin(result.toolName)?.viewComponent"
-          :selected-result="result"
-          :send-text-message="sendTextMessage"
-          @update-result="(r: ToolResultComplete) => emit('updateResult', r)"
-        />
-        <pre v-else class="h-full overflow-auto p-4 text-xs text-gray-500 whitespace-pre-wrap">{{ JSON.stringify(result, null, 2) }}</pre>
+        <div v-else :style="{ height: PLUGIN_HEIGHT }">
+          <component
+            :is="getPlugin(result.toolName)?.viewComponent"
+            v-if="getPlugin(result.toolName)?.viewComponent"
+            :selected-result="result"
+            :send-text-message="sendTextMessage"
+            @update-result="(r: ToolResultComplete) => emit('updateResult', r)"
+          />
+          <pre v-else class="h-full overflow-auto p-4 text-xs text-gray-500 whitespace-pre-wrap">{{ JSON.stringify(result, null, 2) }}</pre>
+        </div>
       </div>
     </div>
   </div>
@@ -70,13 +95,18 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { getPlugin } from "../tools";
+
+const { t } = useI18n();
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import { View as TextResponseOriginalView } from "../plugins/textResponse/index";
 import { handleExternalLinkClick } from "../utils/dom/externalLink";
 import type { TextResponseData } from "../plugins/textResponse/types";
 import { formatSmartTime } from "../utils/format/date";
 import { isRecord } from "../utils/types";
+import CanvasViewToggle from "./CanvasViewToggle.vue";
+import type { LayoutMode } from "../utils/canvas/layoutMode";
 
 // Most plugin viewComponents use h-full internally, so a defined parent
 // height is required for them to render. text-response and the
@@ -110,11 +140,17 @@ const props = defineProps<{
   selectedResultUuid: string | null;
   resultTimestamps: Map<string, number>;
   sendTextMessage?: (text: string) => void;
+  sessionRoleName?: string;
+  sessionRoleIcon?: string;
+  layoutMode: LayoutMode;
+  showRightSidebar: boolean;
 }>();
 
 const emit = defineEmits<{
   select: [uuid: string];
   updateResult: [result: ToolResultComplete];
+  "update:layoutMode": [mode: LayoutMode];
+  "toggle-right-sidebar": [];
 }>();
 
 const containerRef = ref<HTMLDivElement | null>(null);

package/src/components/SuggestionsPanel.vue

@@ -1,65 +1,54 @@
 <template>
-  <div v-if="queries.length > 0" class="border-t border-gray-200">
-    <div v-if="expanded" ref="listRef" class="px-4 pt-2 max-h-64 overflow-y-auto flex flex-col gap-1">
-      <button
-        v-for="query in queries"
-        :key="query"
-        class="text-left text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded px-3 py-1.5 border border-gray-300 transition-colors"
-        @click="onClick($event, query)"
-      >
-        {{ query }}
-      </button>
-      <p class="text-center text-[10px] text-gray-400 py-0.5">click to send · shift+click to edit</p>
-    </div>
+  <div v-if="expanded && queries.length > 0" ref="listRef" class="border-t border-gray-200 px-4 pt-2 pb-2 max-h-64 overflow-y-auto flex flex-col gap-1">
     <button
-      class="w-full flex items-center justify-between px-4 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
-      @click="expanded = !expanded"
+      v-for="query in queries"
+      :key="query"
+      class="text-left text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded px-3 py-1.5 border border-gray-300 transition-colors"
+      @click="onClick($event, query)"
     >
-      <span class="flex items-center gap-1">
-        <span class="material-icons text-sm">lightbulb</span>
-        Suggestions
-      </span>
-      <span class="material-icons text-sm transition-transform" :class="{ 'rotate-180': !expanded }">expand_less</span>
+      {{ query }}
     </button>
+    <p class="text-center text-[10px] text-gray-400 py-0.5">{{ t("suggestionsPanel.sendEditHint") }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-defineProps<{
+const { t } = useI18n();
+
+const props = defineProps<{
   queries: string[];
+  expanded: boolean;
 }>();
 
 const emit = defineEmits<{
+  "update:expanded": [value: boolean];
   send: [query: string];
   edit: [query: string];
 }>();
 
-const expanded = ref(false);
 const listRef = ref<HTMLDivElement | null>(null);
 
-watch(expanded, (isExpanded) => {
-  if (!isExpanded) return;
-  nextTick(() => {
-    if (listRef.value) {
-      listRef.value.scrollTop = listRef.value.scrollHeight;
-    }
-  });
-});
+watch(
+  () => props.expanded,
+  (isExpanded) => {
+    if (!isExpanded) return;
+    nextTick(() => {
+      if (listRef.value) {
+        listRef.value.scrollTop = listRef.value.scrollHeight;
+      }
+    });
+  },
+);
 
 function onClick(event: MouseEvent, query: string): void {
-  expanded.value = false;
+  emit("update:expanded", false);
   if (event.shiftKey) {
     emit("edit", query);
     return;
   }
   emit("send", query);
 }
-
-function collapse(): void {
-  expanded.value = false;
-}
-
-defineExpose({ collapse });
 </script>

package/src/components/SystemFileBanner.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="m-4 mb-0 rounded border border-blue-200 bg-blue-50 text-sm" data-testid="system-file-banner">
+    <div class="flex items-start gap-2 px-3 py-2">
+      <span class="text-blue-600 shrink-0" aria-hidden="true">{{ INFO_ICON }}</span>
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap">
+          <span class="font-semibold text-blue-900">{{ t(`systemFiles.${descriptor.id}.title`) }}</span>
+          <span :class="['text-xs px-1.5 py-0.5 rounded shrink-0', policyChipClass]">
+            {{ t(`systemFiles.editPolicy.${descriptor.editPolicy}`) }}
+          </span>
+        </div>
+        <p v-if="!collapsed" class="mt-1 text-gray-700 leading-snug whitespace-pre-line">
+          {{ t(`systemFiles.${descriptor.id}.summary`) }}
+        </p>
+        <p v-if="!collapsed && descriptor.schemaRef" class="mt-1 text-xs text-gray-500">
+          {{ t("systemFiles.schemaLabel") }}:
+          <a :href="schemaUrl" target="_blank" rel="noopener noreferrer" class="font-mono text-blue-700 hover:underline break-all">
+            {{ descriptor.schemaRef }}
+          </a>
+        </p>
+      </div>
+      <button
+        type="button"
+        class="shrink-0 text-xs text-blue-700 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded px-1"
+        :aria-label="collapsed ? t('systemFiles.showDetails') : t('systemFiles.hideDetails')"
+        :data-testid="`system-file-banner-toggle`"
+        @click="toggle"
+      >
+        {{ collapsed ? t("systemFiles.showDetails") : t("systemFiles.hideDetails") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import type { SystemFileDescriptor, EditPolicy } from "../config/systemFileDescriptors";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  descriptor: SystemFileDescriptor;
+  path: string;
+}>();
+
+// Per-path collapse state. Persisted to localStorage so a user who
+// dismissed the banner once doesn't see it expanded again on reload.
+// Key includes the descriptor id (not the path) so all roles share
+// one collapse decision — we want "I read the roles banner, hide it
+// for every role file" rather than asking per-file.
+const STORAGE_PREFIX = "systemFileBanner.collapsed.";
+
+const INFO_ICON = "ℹ️";
+
+function storageKey(descriptorId: string): string {
+  return STORAGE_PREFIX + descriptorId;
+}
+
+function loadCollapsed(descriptorId: string): boolean {
+  try {
+    return localStorage.getItem(storageKey(descriptorId)) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function saveCollapsed(descriptorId: string, value: boolean): void {
+  try {
+    if (value) localStorage.setItem(storageKey(descriptorId), "1");
+    else localStorage.removeItem(storageKey(descriptorId));
+  } catch {
+    // localStorage may throw in private browsing / quota-exceeded;
+    // banner state degrades to in-memory only, no user-visible error.
+  }
+}
+
+const collapsed = ref(loadCollapsed(props.descriptor.id));
+
+// Re-load when the descriptor changes (different file selected).
+watch(
+  () => props.descriptor.id,
+  (descriptorId) => {
+    collapsed.value = loadCollapsed(descriptorId);
+  },
+);
+
+function toggle(): void {
+  collapsed.value = !collapsed.value;
+  saveCollapsed(props.descriptor.id, collapsed.value);
+}
+
+const POLICY_CHIP_CLASSES: Record<EditPolicy, string> = {
+  "agent-managed-but-hand-editable": "bg-emerald-100 text-emerald-800",
+  "user-editable": "bg-blue-100 text-blue-800",
+  "agent-managed": "bg-amber-100 text-amber-800",
+  "fragile-format": "bg-orange-100 text-orange-800",
+  ephemeral: "bg-gray-200 text-gray-700",
+};
+
+const policyChipClass = computed(() => POLICY_CHIP_CLASSES[props.descriptor.editPolicy]);
+
+const GITHUB_REPO_URL = "https://github.com/receptron/mulmoclaude/blob/main/";
+
+const schemaUrl = computed(() => (props.descriptor.schemaRef ? GITHUB_REPO_URL + props.descriptor.schemaRef : ""));
+</script>

package/src/components/ThinkingIndicator.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="px-2 py-1 text-sm" role="status" aria-live="polite" data-testid="thinking-indicator">
+    <div class="flex items-center gap-2 text-gray-500">
+      <span class="text-xs">{{ statusMessage }}</span>
+      <span class="flex gap-1" aria-hidden="true">
+        <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0ms" />
+        <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 150ms" />
+        <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 300ms" />
+      </span>
+      <span v-if="runElapsedMs !== null && runElapsedMs >= 1000" class="text-xs text-gray-400 tabular-nums" data-testid="run-elapsed">
+        · {{ formatElapsed(runElapsedMs) }}
+      </span>
+    </div>
+    <div v-if="pendingCalls && pendingCalls.length > 0" class="mt-1 space-y-0.5">
+      <div v-for="call in pendingCalls" :key="call.toolUseId" class="flex items-center gap-1.5 text-xs text-gray-400">
+        <span class="w-1.5 h-1.5 rounded-full bg-blue-300 shrink-0 animate-pulse" aria-hidden="true" />
+        <span class="font-mono truncate">{{ call.toolName }}</span>
+        <span class="text-xs text-gray-300 tabular-nums shrink-0">· {{ formatElapsed(call.elapsedMs) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatElapsed } from "../utils/agent/formatElapsed";
+
+interface PendingCall {
+  toolUseId: string;
+  toolName: string;
+  elapsedMs: number;
+}
+
+withDefaults(
+  defineProps<{
+    statusMessage: string;
+    runElapsedMs?: number | null;
+    pendingCalls?: PendingCall[];
+  }>(),
+  { runElapsedMs: null, pendingCalls: () => [] },
+);
+</script>

package/src/components/TodoExplorer.vue

@@ -1,36 +1,42 @@
 <template>
   <div class="h-full bg-white flex flex-col">
     <!-- Header -->
-    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 shrink-0 gap-3">
-      <div class="flex items-center gap-3 min-w-0">
-        <h2 class="text-base font-semibold text-gray-800 shrink-0">Todo</h2>
-        <span class="text-xs text-gray-500 shrink-0">{{ completedCount }}/{{ items.length }} done</span>
+    <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-100 shrink-0">
+      <div class="flex items-center gap-2 min-w-0">
+        <h2 class="text-base font-semibold text-gray-800 shrink-0">{{ t("todoExplorer.heading") }}</h2>
+        <span class="text-xs text-gray-500 shrink-0">{{ t("todoExplorer.doneRatio", { done: completedCount, total: items.length }) }}</span>
         <input
           v-model="search"
           data-testid="todo-search"
           type="text"
-          placeholder="Search..."
-          class="px-2 py-1 text-xs border border-gray-200 rounded w-44 focus:outline-none focus:border-blue-400"
+          :placeholder="t('todoExplorer.searchPlaceholder')"
+          class="h-8 px-2.5 text-sm border border-gray-200 rounded w-44 focus:outline-none focus:border-blue-400"
         />
       </div>
       <div class="flex items-center gap-2">
         <!-- Add button -->
-        <button data-testid="todo-add-btn" class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" @click="addOpen = true">+ Add</button>
+        <button
+          data-testid="todo-add-btn"
+          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          @click="addOpen = true"
+        >
+          {{ t("todoExplorer.addButton") }}
+        </button>
         <!-- Add column button (kanban only) -->
         <button
           v-if="viewMode === TODO_VIEW.kanban"
           data-testid="todo-column-add-btn"
-          class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
+          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
           @click="addColumnOpen = true"
         >
-          + Column
+          {{ t("todoExplorer.addColumnButton") }}
         </button>
         <!-- View mode toggle -->
-        <div class="flex border border-gray-300 rounded overflow-hidden text-xs">
+        <div class="flex border border-gray-300 rounded overflow-hidden">
           <button
             v-for="mode in VIEW_MODES"
             :key="mode.key"
-            class="px-2.5 py-1"
+            class="h-8 w-8 flex items-center justify-center"
             :class="viewMode === mode.key ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
             :data-testid="`todo-view-${mode.key}`"
             :title="mode.label"
@@ -44,7 +50,7 @@
 
     <!-- Label filter chips -->
     <div v-if="labelInventory.length > 0" class="flex flex-wrap items-center gap-1.5 px-4 py-1.5 border-b border-gray-100 bg-gray-50 shrink-0">
-      <span class="text-[11px] text-gray-500 mr-1">Labels:</span>
+      <span class="text-[11px] text-gray-500 mr-1">{{ t("todoExplorer.labels") }}</span>
       <button
         v-for="entry in labelInventory"
         :key="entry.label"
@@ -59,8 +65,13 @@
         {{ entry.label }}
         <span class="opacity-60">{{ entry.count }}</span>
       </button>
-      <button v-if="activeFilters.size > 0" class="ml-auto text-[11px] text-gray-500 hover:text-gray-700" title="Clear label filters" @click="clearFilters">
-        Clear ✕
+      <button
+        v-if="activeFilters.size > 0"
+        class="ml-auto text-[11px] text-gray-500 hover:text-gray-700"
+        :title="t('todoExplorer.clearFiltersTitle')"
+        @click="clearFilters"
+      >
+        {{ t("todoExplorer.clearButton") }}
       </button>
     </div>
 
@@ -71,7 +82,7 @@
 
     <!-- Body -->
     <div class="flex-1 min-h-0">
-      <div v-if="items.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No todo items yet. Click "+ Add" to create one.</div>
+      <div v-if="items.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoExplorer.emptyHint") }}</div>
       <template v-else>
         <TodoKanbanView
           v-if="viewMode === TODO_VIEW.kanban"
@@ -122,20 +133,22 @@
     <!-- Add column dialog -->
     <div v-if="addColumnOpen" class="fixed inset-0 z-50 bg-black/30 flex items-center justify-center" @click="addColumnOpen = false">
       <div class="bg-white rounded-lg shadow-xl w-80 p-5 space-y-3" role="dialog" aria-modal="true" aria-labelledby="todo-add-column-title" @click.stop>
-        <h3 id="todo-add-column-title" class="text-base font-semibold text-gray-800">Add Column</h3>
+        <h3 id="todo-add-column-title" class="text-base font-semibold text-gray-800">{{ t("todoExplorer.addColumn") }}</h3>
         <label class="block text-xs text-gray-600">
-          Label
+          {{ t("todoExplorer.newColumnLabelField") }}
           <input
             v-model="newColumnLabel"
             type="text"
-            placeholder="Review"
+            :placeholder="t('todoExplorer.newColumnPlaceholder')"
             class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
             @keydown.enter="commitNewColumn"
           />
         </label>
         <div class="flex justify-end gap-2 pt-1">
-          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="addColumnOpen = false">Cancel</button>
-          <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="commitNewColumn">Add</button>
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="addColumnOpen = false">
+            {{ t("common.cancel") }}
+          </button>
+          <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="commitNewColumn">{{ t("common.add") }}</button>
         </div>
       </div>
     </div>
@@ -143,7 +156,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { scrollIntoViewByTestId } from "../utils/dom/scrollIntoViewByTestId";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TodoData, TodoItem } from "../plugins/todo/index";
 import { colorForLabel, filterByLabels, listLabelsWithCount } from "../plugins/todo/labels";
@@ -153,9 +169,10 @@ import TodoTableView from "./todo/TodoTableView.vue";
 import TodoListView from "./todo/TodoListView.vue";
 import TodoAddDialog from "./todo/TodoAddDialog.vue";
 import TodoEditDialog from "./todo/TodoEditDialog.vue";
-
 import { TODO_VIEW, TODO_VIEW_MODES as VIEW_MODES, type TodoViewMode as ViewMode } from "../plugins/todo/viewModes";
 
+const { t } = useI18n();
+
 const VIEW_MODE_KEY = "todo_explorer_view_mode";
 
 const props = defineProps<{
@@ -275,6 +292,39 @@ function onExplorerKeydown(event: KeyboardEvent): void {
 onMounted(() => document.addEventListener("keydown", onExplorerKeydown));
 onUnmounted(() => document.removeEventListener("keydown", onExplorerKeydown));
 
+// Permalink support (#762): arrivals on /todos/:itemId scroll and
+// flash the matching card. Safe to run unconditionally — when the
+// explorer is embedded in FilesView the URL has no :itemId and
+// scrollIntoViewByTestId is a no-op. Retry a handful of times to
+// cover the window between mount and the first items fetch landing.
+const TODO_FOCUS_MAX_RETRIES = 10;
+const TODO_FOCUS_RETRY_MS = 150;
+const route = useRoute();
+
+async function focusUrlItem(itemId: string): Promise<void> {
+  for (let attempt = 0; attempt < TODO_FOCUS_MAX_RETRIES; attempt++) {
+    await nextTick();
+    if (scrollIntoViewByTestId(`todo-card-${itemId}`)) return;
+    await new Promise((resolve) => window.setTimeout(resolve, TODO_FOCUS_RETRY_MS));
+  }
+}
+
+onMounted(() => {
+  const itemId = route.params.itemId;
+  if (typeof itemId === "string" && itemId) {
+    void focusUrlItem(itemId);
+  }
+});
+
+watch(
+  () => route.params.itemId,
+  (itemId) => {
+    if (typeof itemId === "string" && itemId) {
+      void focusUrlItem(itemId);
+    }
+  },
+);
+
 // ── Item handlers ──────────────────────────────────────────────
 
 function onPatchItem(itemId: string, input: PatchItemInput): void {