mulmoclaude 0.1.2 → 0.4.0

package/src/App.vue

@@ -1,52 +1,46 @@
 <template>
   <div class="flex flex-col fixed inset-0 bg-gray-900 text-white">
     <!-- Global top bar — shown in every view mode -->
-    <div ref="topBarRef" class="shrink-0 bg-white text-gray-900">
+    <div class="shrink-0 bg-white text-gray-900">
       <!-- Row 1: title + plugin launcher -->
       <div class="flex items-center gap-3 px-3 py-2 border-b border-gray-200">
         <SidebarHeader
           :sandbox-enabled="sandboxEnabled"
           :show-right-sidebar="showRightSidebar"
+          :is-chat-page="isChatPage"
           :title-style="debugTitleStyle"
           @test-query="(q) => sendMessage(q)"
           @notification-navigate="handleNotificationNavigate"
           @toggle-right-sidebar="toggleRightSidebar"
           @open-settings="showSettings = true"
+          @home="handleHomeClick"
         />
         <div class="flex-1 min-w-0">
-          <PluginLauncher :active-tool-name="selectedResult?.toolName ?? null" :active-view-mode="canvasViewMode" @navigate="onPluginNavigate" />
+          <PluginLauncher :active-tool-name="selectedResult?.toolName ?? null" :active-view-mode="currentPage" @navigate="onPluginNavigate" />
         </div>
       </div>
       <!-- Row 2: canvas toggle + role selector + session tabs -->
       <div class="flex items-center gap-3 px-3 py-2 border-b border-gray-100">
-        <CanvasViewToggle :model-value="canvasViewMode" @update:model-value="setCanvasViewMode" />
+        <CanvasViewToggle v-if="isChatPage" :model-value="layoutMode" @update:model-value="setLayoutMode" />
         <RoleSelector v-model:current-role-id="currentRoleId" :roles="roles" @change="onRoleChange" />
         <SessionTabBar
-          ref="sessionTabBarRef"
           :sessions="tabSessions"
           :current-session-id="displayedCurrentSessionId"
           :roles="roles"
           :active-session-count="activeSessionCount"
           :unread-count="unreadCount"
-          :history-open="showHistory"
+          :history-open="currentPage === 'history'"
           @new-session="handleNewSessionClick"
           @load-session="handleSessionSelect"
-          @toggle-history="toggleHistory"
+          @toggle-history="handleHistoryClick"
         />
       </div>
     </div>
 
-    <!-- History popup (all layouts) -->
-    <SessionHistoryPanel
-      v-if="showHistory"
-      ref="historyPanelRef"
-      :sessions="mergedSessions"
-      :current-session-id="currentSessionId"
-      :roles="roles"
-      :top-offset="historyTopOffset"
-      :error-message="historyError"
-      @load-session="handleSessionSelect"
-    />
+    <!-- Session history is now a canvas-column view rendered under
+         the `/history` route (see plans/feat-history-url-route.md).
+         The old absolute-positioned overlay is gone — browser
+         back/forward drives open/close instead. -->
 
     <!-- Body: sidebar (Single only) + canvas column + right sidebar -->
     <div class="flex flex-1 min-h-0">
@@ -58,8 +52,10 @@
           class="mx-4 mt-3 mb-2 rounded border border-yellow-400 bg-yellow-50 p-3 text-xs text-yellow-700 shrink-0"
         >
           <span class="material-icons text-xs align-middle mr-1">warning</span>
-          Image generation requires
-          <code class="font-mono">GEMINI_API_KEY</code>. Add it to <code class="font-mono">.env</code> and restart the app.
+          <i18n-t keypath="app.geminiRequired" tag="span">
+            <template #envKey><code class="font-mono">GEMINI_API_KEY</code></template>
+            <template #envFile><code class="font-mono">.env</code></template>
+          </i18n-t>
         </div>
 
         <!-- Tool result previews -->
@@ -90,13 +86,15 @@
           class="mx-3 mt-2 rounded border border-yellow-400 bg-yellow-50 p-2 text-xs text-yellow-700 shrink-0"
         >
           <span class="material-icons text-xs align-middle mr-1">warning</span>
-          Image generation requires
-          <code class="font-mono">GEMINI_API_KEY</code>. Add it to <code class="font-mono">.env</code> and restart the app.
+          <i18n-t keypath="app.geminiRequired" tag="span">
+            <template #envKey><code class="font-mono">GEMINI_API_KEY</code></template>
+            <template #envFile><code class="font-mono">.env</code></template>
+          </i18n-t>
         </div>
 
         <div ref="canvasRef" class="flex-1 overflow-hidden outline-none min-h-0" tabindex="0" @mousedown="activePane = 'main'" @keydown="handleCanvasKeydown">
-          <!-- Single mode -->
-          <template v-if="canvasViewMode === 'single'">
+          <!-- Chat page: single or stack layout -->
+          <template v-if="isChatPage && layoutMode === 'single'">
             <component
               :is="getPlugin(selectedResult.toolName)?.viewComponent"
               v-if="selectedResult && getPlugin(selectedResult.toolName)?.viewComponent"
@@ -108,12 +106,11 @@
               <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{ JSON.stringify(selectedResult, null, 2) }}</pre>
             </div>
             <div v-else class="flex items-center justify-center h-full text-gray-600">
-              <p>Start a conversation</p>
+              <p>{{ t("app.startConversation") }}</p>
             </div>
           </template>
-          <!-- Stack mode -->
           <StackView
-            v-else-if="canvasViewMode === 'stack'"
+            v-else-if="isChatPage && layoutMode === 'stack'"
             :tool-results="sidebarResults"
             :selected-result-uuid="selectedResultUuid"
             :result-timestamps="activeSession?.resultTimestamps ?? new Map()"
@@ -121,31 +118,36 @@
             @select="(uuid) => (selectedResultUuid = uuid)"
             @update-result="handleUpdateResult"
           />
-          <!-- Files mode -->
-          <FilesView v-else-if="canvasViewMode === 'files'" :refresh-token="filesRefreshToken" @load-session="handleSessionSelect" />
-          <!-- Todos mode -->
-          <TodoExplorer v-else-if="canvasViewMode === 'todos'" />
-          <!-- Scheduler mode -->
-          <SchedulerView v-else-if="canvasViewMode === 'scheduler'" />
-          <!-- Wiki mode -->
-          <WikiView v-else-if="canvasViewMode === 'wiki'" />
-          <!-- Skills mode -->
-          <SkillsView v-else-if="canvasViewMode === 'skills'" />
-          <!-- Roles mode -->
-          <RolesView v-else-if="canvasViewMode === 'roles'" />
+          <!-- Distinct pages -->
+          <FilesView v-else-if="currentPage === 'files'" :refresh-token="filesRefreshToken" @load-session="handleSessionSelect" />
+          <TodoExplorer v-else-if="currentPage === 'todos'" />
+          <SchedulerView v-else-if="currentPage === 'scheduler'" />
+          <WikiView v-else-if="currentPage === 'wiki'" />
+          <SkillsView v-else-if="currentPage === 'skills'" />
+          <RolesView v-else-if="currentPage === 'roles'" />
+          <SessionHistoryPanel
+            v-else-if="currentPage === 'history'"
+            :sessions="mergedSessions"
+            :current-session-id="currentSessionId"
+            :roles="roles"
+            :error-message="historyError"
+            @load-session="handleSessionSelect"
+          />
         </div>
 
         <!-- Bottom bar (Stack chat only — plugin views have no
              session context, so no chat input is shown) -->
-        <div v-if="canvasViewMode === 'stack'" class="border-t border-gray-200 bg-white shrink-0">
+        <div v-if="isChatPage && layoutMode === 'stack'" class="border-t border-gray-200 bg-white shrink-0">
           <SuggestionsPanel ref="suggestionsPanelRef" :queries="currentRole.queries ?? []" @send="(q) => sendMessage(q)" @edit="onQueryEdit" />
           <ChatInput ref="chatInputRef" v-model="userInput" v-model:pasted-file="pastedFile" :is-running="isRunning" @send="sendMessage()" />
         </div>
       </div>
 
-      <!-- Right sidebar: tool call history -->
+      <!-- Right sidebar: tool call history. Only shown on the chat
+           page — system prompt / tools / tool-call history are all
+           agent-context and have no meaning on plugin views. -->
       <RightSidebar
-        v-if="showRightSidebar"
+        v-if="showRightSidebar && isChatPage"
         ref="rightSidebarRef"
         :tool-call-history="toolCallHistory"
         :available-tools="availableTools"
@@ -162,7 +164,10 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, reactive } from "vue";
+import { useI18n } from "vue-i18n";
 import { v4 as uuidv4 } from "uuid";
+
+const { t } = useI18n();
 import { getPlugin } from "./tools";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import RightSidebar from "./components/RightSidebar.vue";
@@ -180,12 +185,13 @@ import FilesView from "./components/FilesView.vue";
 import TodoExplorer from "./components/TodoExplorer.vue";
 import SchedulerView from "./plugins/scheduler/View.vue";
 import WikiView from "./plugins/wiki/View.vue";
+import { buildWikiRouteParams } from "./plugins/wiki/route";
 import SkillsView from "./plugins/manageSkills/View.vue";
 import RolesView from "./plugins/manageRoles/View.vue";
 import SettingsModal from "./components/SettingsModal.vue";
 import NotificationToast from "./components/NotificationToast.vue";
 import type { NotificationAction } from "./types/notification";
-import { CANVAS_VIEW } from "./utils/canvas/viewMode";
+import { PAGE_ROUTES, type PageRouteName } from "./router";
 import type { SseEvent } from "./types/sse";
 import { type SessionEntry, type ActiveSession } from "./types/session";
 import { EVENT_TYPES } from "./types/events";
@@ -198,7 +204,6 @@ import { createEmptySession } from "./utils/session/sessionFactory";
 import { buildLoadedSession, parseSessionEntries } from "./utils/session/sessionEntries";
 import { resolveNotificationTarget } from "./utils/notification/dispatch";
 import { usePendingCalls } from "./composables/usePendingCalls";
-import { useClickOutside } from "./composables/useClickOutside";
 import { useKeyNavigation } from "./composables/useKeyNavigation";
 import { useDebugBeat } from "./composables/useDebugBeat";
 import { useChatScroll } from "./composables/useChatScroll";
@@ -207,7 +212,7 @@ import { useSessionSync } from "./composables/useSessionSync";
 import { useSessionDerived } from "./composables/useSessionDerived";
 import { useFaviconState } from "./composables/useFaviconState";
 import { useMergedSessions } from "./composables/useMergedSessions";
-import { useCanvasViewMode } from "./composables/useCanvasViewMode";
+import { useLayoutMode } from "./composables/useLayoutMode";
 import { useSelectedResult } from "./composables/useSelectedResult";
 import { useMcpTools } from "./composables/useMcpTools";
 import { useRoles } from "./composables/useRoles";
@@ -223,6 +228,7 @@ import { useRoute, useRouter } from "vue-router";
 import { apiGet } from "./utils/api";
 import { API_ROUTES } from "./config/apiRoutes";
 import { needsGemini } from "./utils/role/plugins";
+import { classifyWorkspacePath } from "./utils/path/workspaceLinkRouter";
 
 // --- Per-session state ---
 // Declared early so that pub/sub callbacks and function declarations
@@ -253,18 +259,18 @@ const router = useRouter();
 
 // Omit ?role= for the default role to keep URLs clean.
 function buildRoleQuery(): Record<string, string> {
-  const id = currentRoleId.value;
-  if (!id || roles.value.length === 0 || id === roles.value[0]?.id) return {};
-  return { role: id };
+  const roleId = currentRoleId.value;
+  if (!roleId || roles.value.length === 0 || roleId === roles.value[0]?.id) return {};
+  return { role: roleId };
 }
 
-function navigateToSession(id: string, replace = false): void {
-  currentSessionId.value = id;
+function navigateToSession(sessionId: string, replace = false): void {
+  currentSessionId.value = sessionId;
   const method = replace ? router.replace : router.push;
   method({
-    name: "chat",
-    params: { sessionId: id },
-    query: { ...buildViewQuery(), ...buildRoleQuery() },
+    name: PAGE_ROUTES.chat,
+    params: { sessionId },
+    query: buildRoleQuery(),
   }).catch((err) => {
     if (err?.type !== 16) {
       console.error("[navigateToSession] push failed:", err);
@@ -278,7 +284,7 @@ function handleNotificationNavigate(action: NotificationAction): void {
   if (target.kind === "session") {
     navigateToSession(target.sessionId);
   } else {
-    setCanvasViewMode(CANVAS_VIEW[target.view]);
+    router.push({ name: target.view }).catch(() => {});
   }
 }
 
@@ -318,7 +324,7 @@ const userInput = ref("");
 const pastedFile = ref<PastedFile | null>(null);
 const activePane = ref<"sidebar" | "main">("sidebar");
 
-const { sessions, showHistory, historyError, fetchSessions, toggleHistory } = useSessionHistory();
+const { sessions, historyError, fetchSessions } = useSessionHistory();
 const { markSessionRead } = useSessionSync({
   sessionMap,
   currentSessionId,
@@ -336,21 +342,14 @@ const { selectedResultUuid } = useSelectedResult({
 });
 
 // ── Dynamic favicon (#470) ──────────────────────────────────
-useFaviconState({ isRunning, currentSummary, activeSession });
+// `unreadCount` covers every session (not just the active tab), so
+// the favicon badge lights up when a background session gets a new
+// reply even though the user is looking at a different session.
+useFaviconState({ isRunning, currentSummary, activeSession, sessionsUnreadCount: unreadCount });
 
 const toolResultsPanelRef = ref<{ root: HTMLDivElement | null } | null>(null);
 const canvasRef = ref<HTMLDivElement | null>(null);
 const chatInputRef = ref<{ focus: () => void } | null>(null);
-const topBarRef = ref<HTMLDivElement | null>(null);
-const historyTopOffset = ref<number | undefined>(undefined);
-
-const sessionTabBarRef = ref<{
-  historyButton: HTMLButtonElement | null;
-} | null>(null);
-const historyButtonRef = computed(() => sessionTabBarRef.value?.historyButton ?? null);
-const historyPanelRef = ref<{ root: HTMLDivElement | null } | null>(null);
-const historyPopupRef = computed(() => historyPanelRef.value?.root ?? null);
-
 const { focusChatInput } = useChatScroll({
   toolResultsPanelRef,
   toolResults,
@@ -361,45 +360,87 @@ const { focusChatInput } = useChatScroll({
 const { showRightSidebar, toggleRightSidebar } = useRightSidebar();
 const showSettings = ref(false);
 
-const { canvasViewMode, setCanvasViewMode, buildViewQuery, filesRefreshToken, handleViewModeShortcut, onPluginNavigate } = useCanvasViewMode({ isRunning });
+const { layoutMode, setLayoutMode, toggleLayoutMode } = useLayoutMode();
+
+// Current page derives from the route. The chat page has a layout
+// preference on top (single vs. stack); other pages are distinct
+// full-width views.
+const isChatPage = computed(() => route.name === PAGE_ROUTES.chat);
+const currentPage = computed<PageRouteName | null>(() => {
+  const name = route.name;
+  return typeof name === "string" && isPageRouteName(name) ? name : null;
+});
+
+// Refresh the files tree after each agent run so newly written files
+// appear without a manual reload.
+const filesRefreshToken = ref(0);
+watch(isRunning, (running, prev) => {
+  if (prev && !running) filesRefreshToken.value++;
+});
+
+// Cmd/Ctrl + 1 toggles layout when on /chat; on any other page it
+// navigates to /chat (layout flip requires a second press). Cmd+2–7
+// navigate directly to the matching page.
+const PAGE_SHORTCUT_KEYS: Record<string, PageRouteName> = {
+  "2": PAGE_ROUTES.files,
+  "3": PAGE_ROUTES.todos,
+  "4": PAGE_ROUTES.scheduler,
+  "5": PAGE_ROUTES.wiki,
+  "6": PAGE_ROUTES.skills,
+  "7": PAGE_ROUTES.roles,
+};
+
+function handleViewModeShortcut(event: KeyboardEvent): void {
+  if (!(event.metaKey || event.ctrlKey)) return;
+  if (event.altKey || event.shiftKey) return;
+
+  if (event.key === "1") {
+    event.preventDefault();
+    if (route.name === PAGE_ROUTES.chat) {
+      toggleLayoutMode();
+    } else {
+      resumeOrCreateChatSession().catch((err) => console.error("[Cmd+1] resume failed:", err));
+    }
+    return;
+  }
+
+  const page = PAGE_SHORTCUT_KEYS[event.key];
+  if (page) {
+    event.preventDefault();
+    router.push({ name: page }).catch(() => {});
+  }
+}
+
+function onPluginNavigate(target: { key: string }): void {
+  if (isPageRouteName(target.key)) {
+    router.push({ name: target.key }).catch(() => {});
+  }
+}
+
+function isPageRouteName(value: string): value is PageRouteName {
+  return Object.values(PAGE_ROUTES).includes(value as PageRouteName);
+}
 
-// The no-sidebar "stack-style" layout (top bar + full-width canvas +
-// bottom bar) is used for every view mode except Single. Clicking a
-// plugin launcher button (Todos / Scheduler / Files / ...) swaps the
-// canvas content without collapsing the frame back to the sidebar
-// layout.
-const { isStackLayout, restoreChatViewForSession, displayedCurrentSessionId } = useViewLayout({
-  canvasViewMode,
-  setCanvasViewMode,
+// Layout only matters on /chat; other pages are full-width by design.
+const { isStackLayout, displayedCurrentSessionId } = useViewLayout({
+  layoutMode,
+  isChatPage,
   currentSessionId,
   activePane,
 });
 
-// User-initiated session switches: clicking a session tab, a history
-// row, or a chat link in FilesView. In plugin views (Todos / Files /
-// ...) no chat is active, so the click's purpose is to surface the
-// chat — restore the preferred Single/Stack mode before loading.
-// Not wired into the internal `loadSession` call path because that
-// also fires on initial mount with `?view=plugin` URLs, which must
-// be honoured as-is.
-function handleSessionSelect(id: string): void {
-  restoreChatViewForSession();
-  loadSession(id);
+function handleSessionSelect(sessionId: string): void {
+  loadSession(sessionId);
 }
 
 function handleNewSessionClick(): void {
-  restoreChatViewForSession();
   createNewSession();
 }
 
-// Measure the top bar's height when the history popup opens.
-watch(showHistory, (open) => {
-  if (open) {
-    nextTick(() => {
-      historyTopOffset.value = topBarRef.value?.offsetHeight;
-    });
-  }
-});
+function handleHomeClick(): void {
+  resumeOrCreateChatSession().catch((err) => console.error("[home] resume failed:", err));
+}
+
 const rightSidebarRef = ref<InstanceType<typeof RightSidebar> | null>(null);
 
 const { availableTools, toolDescriptions, mcpToolsError, fetchMcpToolsStatus } = useMcpTools({
@@ -425,8 +466,8 @@ const { mergedSessions, tabSessions } = useMergedSessions({
 // when switching away (running sessions keep their subscription so they
 // continue receiving events — session_finished will clean them up).
 let previousSessionId: string | null = null;
-watch(currentSessionId, (id) => {
-  const session = sessionMap.get(id);
+watch(currentSessionId, (sessionId) => {
+  const session = sessionMap.get(sessionId);
   // Subscribe to the new session's channel
   if (session) {
     ensureSessionSubscription(session);
@@ -435,23 +476,23 @@ watch(currentSessionId, (id) => {
   // no in-flight background generations. Tearing down the subscription
   // while a generation is still running would orphan its completion
   // event, leaving the session's busy indicator stuck on.
-  if (previousSessionId && previousSessionId !== id) {
+  if (previousSessionId && previousSessionId !== sessionId) {
     const prevSession = sessionMap.get(previousSessionId);
     const prevBusy = !!prevSession && (prevSession.isRunning || Object.keys(prevSession.pendingGenerations ?? {}).length > 0);
     if (prevSession && !prevBusy) {
       unsubscribeSession(previousSessionId);
     }
   }
-  previousSessionId = id;
+  previousSessionId = sessionId;
 
   // Clear unread in both sessionMap and sessions list (for badge count),
   // then tell the server so other tabs see it too.
-  const summary = sessions.value.find((entry) => entry.id === id);
+  const summary = sessions.value.find((entry) => entry.id === sessionId);
   const wasUnread = (session && session.hasUnread) || (summary && summary.hasUnread);
   if (wasUnread) {
     if (session) session.hasUnread = false;
     if (summary) summary.hasUnread = false;
-    markSessionRead(id);
+    markSessionRead(sessionId);
   }
 });
 
@@ -484,71 +525,127 @@ const needsGeminiForRole = (roleId: string) => needsGemini(roles.value, roleId);
 // router.replace instead of router.push to keep the empty session out
 // of browser navigation history.
 function removeCurrentIfEmpty(): boolean {
-  const id = currentSessionId.value;
-  if (!id) return false;
-  const session = sessionMap.get(id);
+  const sessionId = currentSessionId.value;
+  if (!sessionId) return false;
+  const session = sessionMap.get(sessionId);
   if (session && session.toolResults.length === 0) {
-    sessionMap.delete(id);
+    sessionMap.delete(sessionId);
     return true;
   }
   return false;
 }
 
+// Replace vs push is derived from state, not chosen by the caller:
+// replace only when we just discarded an empty session AND we're
+// currently on that same /chat/:emptyId URL — otherwise there's
+// something worth keeping in history (a real chat transcript, or
+// a non-chat page like /wiki the user came from).
 function createNewSession(roleId?: string): ActiveSession {
-  removeCurrentIfEmpty();
+  const removedEmpty = removeCurrentIfEmpty();
+  const replace = removedEmpty && isChatPage.value;
   const rId = roleId ?? currentRoleId.value;
   const session = createEmptySession(uuidv4(), rId);
   sessionMap.set(session.id, session);
   currentRoleId.value = rId;
-  navigateToSession(session.id, true);
+  navigateToSession(session.id, replace);
   suggestionsPanelRef.value?.collapse();
   nextTick(() => focusChatInput());
   return sessionMap.get(session.id)!;
 }
 
 function onRoleChange() {
-  // Covers both the user dropdown click and the agent-triggered role
-  // switch (EVENT_TYPES.switchRole) — either way the user ends up in
-  // a fresh chat session, so a plugin view should yield to chat.
-  restoreChatViewForSession();
+  // On non-chat pages (wiki, files, etc.) the user is just picking
+  // the role that future new-chat actions should use — don't yank
+  // them onto /chat by creating a session here. currentRoleId is
+  // already updated by RoleSelector's v-model, so future "+" clicks
+  // or composer sends will pick it up. Agent-triggered role switches
+  // (EVENT_TYPES.switchRole) always fire during an active run on
+  // /chat, so the guard doesn't affect them.
+  if (!isChatPage.value) return;
   const session = createNewSession(currentRoleId.value);
   maybeSeedRoleDefault(session);
 }
 
-function activateSession(id: string, roleId: string, replace: boolean): void {
-  const reactiveSession = sessionMap.get(id);
+// Land on /chat with no specific session in mind (initial load, Cmd+1
+// from another page). Prefer the most-recent session so the user
+// resumes where they left off; only create a fresh session when they
+// have no chat history at all. Explicit "+" clicks and role switches
+// still create a new session via createNewSession() directly.
+async function resumeOrCreateChatSession(): Promise<void> {
+  const topId = mergedSessions.value[0]?.id;
+  if (!topId) {
+    const currentSession = sessionMap.get(currentSessionId.value);
+    if (currentSession && currentSession.toolResults.length === 0) {
+      navigateToSession(currentSession.id);
+      return;
+    }
+    createNewSession();
+    return;
+  }
+  if (sessionMap.has(topId)) {
+    // Already in memory — navigate explicitly. loadSession would
+    // early-return here if topId === currentSessionId, skipping the
+    // URL push we need when arriving from a non-chat page.
+    navigateToSession(topId);
+    return;
+  }
+  await loadSession(topId);
+  // loadSession silently returns on fetch failure (stale summary,
+  // transient API error). Without a fallback, /chat is left with no
+  // active session and sendMessage becomes a no-op.
+  if (!sessionMap.has(topId)) {
+    createNewSession();
+  }
+}
+
+function activateSession(sessionId: string, roleId: string, replace: boolean): void {
+  const reactiveSession = sessionMap.get(sessionId);
   if (reactiveSession) ensureSessionSubscription(reactiveSession);
   // Set role before navigating: buildRoleQuery() reads currentRoleId to
   // build ?role=, and the route.query.role watcher would otherwise fire
   // after navigation and revert currentRoleId to the previous session's role.
   currentRoleId.value = roleId;
-  navigateToSession(id, replace);
-  showHistory.value = false;
+  navigateToSession(sessionId, replace);
+  // Closing the history popup is no longer explicit — navigating to
+  // /chat/:id via navigateToSession changes the route, and the
+  // canvas-column branches away from SessionHistoryPanel naturally.
 }
 
-async function loadSession(id: string) {
-  if (id === currentSessionId.value && sessionMap.has(id)) return;
-  const replaced = removeCurrentIfEmpty();
+async function loadSession(sessionId: string) {
+  // currentSessionId tracks "last active chat session" and is NOT
+  // reset when the user navigates to a non-chat page (/wiki, /files,
+  // …). Also checking the URL ensures that clicking the same session
+  // in the tab bar from /wiki still triggers a /chat navigation
+  // instead of silently no-opping.
+  const alreadyOnThatChat = sessionId === currentSessionId.value && sessionMap.has(sessionId) && route.params.sessionId === sessionId;
+  if (alreadyOnThatChat) return;
+  // Mirror createNewSession: only replace when we just discarded an
+  // empty session AND we're on that /chat/:emptyId URL. On /history
+  // (or any non-chat page) selecting a session must push, otherwise
+  // the /history entry would be skipped when the last chat happened
+  // to be empty.
+  const removedEmpty = removeCurrentIfEmpty();
+  const replaced = removedEmpty && isChatPage.value;
 
-  const live = sessionMap.get(id);
+  const live = sessionMap.get(sessionId);
   if (live) {
-    activateSession(id, live.roleId, replaced);
+    activateSession(sessionId, live.roleId, replaced);
     return;
   }
 
-  const response = await apiGet<SessionEntry[]>(API_ROUTES.sessions.detail.replace(":id", encodeURIComponent(id)));
+  const response = await apiGet<SessionEntry[]>(API_ROUTES.sessions.detail.replace(":id", encodeURIComponent(sessionId)));
   if (!response.ok) return;
 
   const newSession = buildLoadedSession({
-    id,
+    id: sessionId,
     entries: response.data,
     defaultRoleId: currentRoleId.value,
     urlResult: typeof route.query.result === "string" ? route.query.result : null,
-    serverSummary: sessions.value.find((s) => s.id === id),
+    serverSummary: sessions.value.find((summary) => summary.id === sessionId),
     nowIso: new Date().toISOString(),
   });
-  sessionMap.set(id, newSession);
-  activateSession(id, newSession.roleId, replaced);
+  sessionMap.set(sessionId, newSession);
+  activateSession(sessionId, newSession.roleId, replaced);
 }
 
 // Re-fetch the transcript from the server and patch any entries the
@@ -665,16 +762,79 @@ async function sendMessage(text?: string) {
   }
 }
 
-const { handler: handleClickOutsideHistory } = useClickOutside({
-  isOpen: showHistory,
-  buttonRef: historyButtonRef,
-  popupRef: historyPopupRef,
-});
+// History is a page route (/history) now — no click-outside handling
+// needed. Clicking the history button toggles between /history and the
+// previous page via router.back / router.push.
+function handleHistoryClick(): void {
+  if (currentPage.value !== PAGE_ROUTES.history) {
+    router.push({ name: PAGE_ROUTES.history }).catch(() => {});
+    return;
+  }
+  // Direct-link to /history has no prior entry to go back to.
+  // vue-router exposes the previous entry on window.history.state.back;
+  // when null, fall back to /chat so the button still closes the panel.
+  const hasBack = typeof window !== "undefined" && window.history.state?.back != null;
+  if (hasBack) {
+    router.back();
+  } else {
+    router.push({ name: PAGE_ROUTES.chat }).catch(() => {});
+  }
+}
+
+// Fetch the session list when entering /history. Not `immediate` on
+// purpose: onMounted() already fires fetchSessions() unconditionally,
+// so the direct-link /history case is already covered — adding an
+// immediate watcher would race two initial fetches against each other
+// (fetchSessions picks snapshot-vs-diff from the mutable cursor at
+// response time, and a late-arriving full snapshot could be misread
+// as a diff, leaving stale deleted sessions in the list).
+watch(
+  () => currentPage.value,
+  (page) => {
+    if (page === PAGE_ROUTES.history) {
+      fetchSessions().catch((err) => console.error("[history] fetch failed:", err));
+    }
+  },
+);
+
+// Route workspace-internal links (wiki pages, files, sessions) to the
+// appropriate page. Called from plugin Views via AppApi.
+function navigateToWorkspacePath(href: string): void {
+  const target = classifyWorkspacePath(href);
+  if (!target) return;
+
+  switch (target.kind) {
+    case "wiki":
+      router.push({ name: PAGE_ROUTES.wiki, params: buildWikiRouteParams({ kind: "page", slug: target.slug }) }).catch(() => {});
+      break;
+    case "file":
+      // Path-based files URL (see plans/feat-files-path-url.md) — pass
+      // segments as an array so each piece is url-encoded independently
+      // and slashes stay as path separators.
+      router.push({ name: PAGE_ROUTES.files, params: { pathMatch: target.path.split("/") } }).catch(() => {});
+      break;
+    case "session":
+      handleSessionSelect(target.sessionId);
+      break;
+  }
+}
+
+function startNewChat(message: string): void {
+  // createNewSession sets currentSessionId synchronously (see the
+  // comment on its declaration), so the follow-up sendMessage lands
+  // in the new session rather than whatever was previously active.
+  // Cross-route push behaviour (so browser Back returns to /wiki)
+  // is now handled inside createNewSession via the isChatPage check.
+  createNewSession(currentRoleId.value);
+  void sendMessage(message);
+}
 
 // Plugin Views call back into App.vue via provide/inject (#227).
 provideAppApi({
   refreshRoles,
   sendMessage: (message: string) => sendMessage(message),
+  startNewChat: (message: string) => startNewChat(message),
+  navigateToWorkspacePath: (href: string) => navigateToWorkspacePath(href),
 });
 // Plugin Views that need to tag background work with the current
 // session (e.g. MulmoScript generations) inject this.
@@ -683,7 +843,6 @@ provideActiveSession(activeSession);
 useEventListeners({
   onKeyNavigation: handleKeyNavigation,
   onViewModeShortcut: handleViewModeShortcut,
-  onClickOutsideHistory: handleClickOutsideHistory,
   onTeardown: teardownPendingCalls,
 });
 
@@ -691,7 +850,9 @@ onMounted(async () => {
   // Fire-and-forget side fetches.
   fetchHealth();
   fetchMcpToolsStatus();
-  fetchSessions();
+  // Awaited below before resuming the top session, so we know the
+  // sessions list is populated when we pick which one to land on.
+  const sessionsReady = fetchSessions();
   // Roles must be loaded before the first session is created, so
   // createNewSession() picks a roleId that exists in the merged
   // role list (built-in + custom).
@@ -703,18 +864,31 @@ onMounted(async () => {
     currentRoleId.value = urlRole;
   }
 
-  // If the URL already names a session (e.g. a bookmarked link or a
-  // page reload), try to load it. Otherwise create a fresh one.
-  const initialSessionId = currentSessionId.value;
-  if (initialSessionId) {
-    await loadSession(initialSessionId);
-    // loadSession is a no-op when the server returns 404 — in that
-    // case sessionMap won't have the id, so fall through to create.
-    if (!sessionMap.has(initialSessionId)) {
-      createNewSession();
+  // Session bootstrap only applies on /chat. On /files, /todos, /wiki,
+  // etc. we must not create or load a chat session — doing so would
+  // replace the URL with /chat/<new-id> and pull the user off the page
+  // they actually loaded.
+  //
+  // Read the URL's sessionId directly rather than through
+  // currentSessionId.value — the route-param watcher isn't `immediate`,
+  // so on a hard load of /chat/<id> the ref may still be "" when we
+  // reach this code and we'd mistakenly resume the top session.
+  if (route.name === PAGE_ROUTES.chat) {
+    const urlSessionId = typeof route.params.sessionId === "string" ? route.params.sessionId : "";
+    if (urlSessionId) {
+      if (currentSessionId.value !== urlSessionId) {
+        currentSessionId.value = urlSessionId;
+      }
+      await loadSession(urlSessionId);
+      // loadSession is a no-op when the server returns 404 — in that
+      // case sessionMap won't have the id, so fall through to create.
+      if (!sessionMap.has(urlSessionId)) {
+        createNewSession();
+      }
+    } else {
+      await sessionsReady;
+      await resumeOrCreateChatSession();
     }
-  } else {
-    createNewSession();
   }
 });
 </script>