openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/index.html

@@ -25,6 +25,7 @@
   <!-- ── TOP HEADER ──────────────────────────────────────────────────────── -->
   <header id="top-header">
     <div id="header-left">
+      <span id="ext-slot-header-left" data-slot="header.left"></span>
       <button id="btn-toggle-sidebar" class="sidebar-toggle-btn" title="Toggle sidebar">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <rect width="18" height="18" x="3" y="3" rx="2"/>
@@ -51,6 +52,7 @@
       </button>
     </div>
     <div id="header-right">
+      <span id="ext-slot-header-right" data-slot="header.right"></span>
       <button id="share-toggle-header" class="theme-toggle-btn" data-i18n-title="share.tooltip" title="Share">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm">
           <circle cx="18" cy="5" r="3"/>
@@ -269,10 +271,14 @@
           </div>
         </div>
       </div>
+
+      <!-- Extension nav slot: extensions add custom menu items / entry points to whole new workspaces here. -->
+      <div id="ext-slot-sidebar-nav" data-slot="sidebar.nav"></div>
     </div>
 
     <!-- Bottom Settings -->
     <div id="sidebar-footer">
+      <span id="ext-slot-sidebar-footer" data-slot="sidebar.footer"></span>
       <div class="sidebar-nav-row">
         <button id="btn-settings" class="sidebar-nav-btn" title="Settings">
           <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -297,6 +303,9 @@
   <!-- ── MAIN ─────────────────────────────────────────────────────────── -->
   <main id="main">
 
+    <!-- Extension workspace slot: extensions mount entirely new custom panels here. -->
+    <div id="ext-slot-main-workspace" data-slot="main.workspace"></div>
+
 
     <!-- Onboard panel: kept as empty shell (soul_setup auto-launches /onboard session) -->
     <div id="onboard-panel" style="display:none"></div>
@@ -354,6 +363,8 @@
 
       <!-- Chat column (messages + info bar + input) -->
       <div id="chat-main">
+      <!-- Banner slot: agent-scoped notices/toolbars above the message stream. -->
+      <div id="ext-slot-session-banner" class="session-banner" data-slot="session.banner"></div>
       <div id="messages" class="chat-messages-scroll"></div>
       <!-- New message notification banner -->
       <div id="new-message-banner" class="new-message-banner" style="display:none">
@@ -403,6 +414,8 @@
         </span>
       </div>
 
+      <!-- Composer slot: agent-scoped controls just above the input bar. -->
+      <div id="ext-slot-session-composer" class="session-composer" data-slot="session.composer"></div>
       <div id="input-area">
         <div id="ws-disconnect-hint" style="display:none"></div>
         <!-- Skill autocomplete dropdown (shown when user types /xxx) -->
@@ -441,32 +454,23 @@
       </div>
       </div><!-- /#chat-main -->
 
-      <!-- ── WORKSPACE PANEL (right) ──────────────────────────────────── -->
-      <aside id="workspace-panel" class="collapsed">
-        <div id="workspace-header">
-          <span id="workspace-title" data-i18n="workspace.title">Workspace</span>
-          <div class="workspace-header-actions">
-            <button id="btn-workspace-refresh" class="workspace-icon-btn" data-i18n-title="workspace.refresh" title="Refresh">
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
-                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
-              </svg>
-            </button>
-            <button id="btn-workspace-close" class="workspace-icon-btn" data-i18n-title="workspace.collapse" title="Collapse">
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M9 18l6-6-6-6"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div id="workspace-tree" role="tree"></div>
-      </aside>
+      <!-- ── SESSION ASIDE (right) ────────────────────────────────────────
+           One resizable / collapsible right column. The tab bar and tab bodies
+           are rendered into #ext-slot-session-aside by Clacky.ext (tabbed slot);
+           the chrome here (resize handle, collapse button) is host-owned and
+           sits outside the slot container so re-renders never clobber it. -->
+      <div id="session-aside" class="session-aside">
+        <div id="session-aside-resize" class="session-aside-resize"></div>
+        <button id="btn-aside-collapse" class="session-aside-collapse" data-i18n-title="aside.collapse" title="Collapse">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+        </button>
+        <div id="ext-slot-session-aside" class="session-aside-slot" data-slot="session.aside"></div>
+      </div>
 
       <!-- Collapsed-state opener tab -->
-      <button id="btn-workspace-open" data-i18n-title="workspace.expand" title="Open workspace" style="display:none">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-        </svg>
+      <div id="workspace-overlay"></div>
+      <button id="btn-aside-open" class="session-aside-opener" data-i18n-title="aside.expand" title="Open panel" style="display:none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
       </button>
     </div>
 
@@ -740,7 +744,10 @@
           <div id="profile-soul-body" class="profile-markdown"></div>
           <div class="profile-pane-footer">
             <p class="profile-pane-footer-hint" data-i18n="profile.soul.curateHint">Not quite right? Let the assistant curate this through a short conversation.</p>
-            <button id="btn-profile-curate-soul" class="btn-profile-update" data-i18n="profile.soul.curateBtn">Have the assistant curate this</button>
+            <div class="profile-pane-footer-actions">
+              <button id="btn-profile-curate-soul" class="btn-profile-update" data-i18n="profile.soul.curateBtn">Have the assistant curate this</button>
+              <button id="btn-profile-edit-soul" class="btn-profile-edit" data-i18n="profile.soul.editBtn">Edit directly</button>
+            </div>
           </div>
         </section>
 
@@ -756,7 +763,10 @@
           <div id="profile-user-body" class="profile-markdown"></div>
           <div class="profile-pane-footer">
             <p class="profile-pane-footer-hint" data-i18n="profile.user.curateHint">Changed jobs? Picked up new interests? Let the assistant update your profile.</p>
-            <button id="btn-profile-curate-user" class="btn-profile-update" data-i18n="profile.user.curateBtn">Have the assistant update this</button>
+            <div class="profile-pane-footer-actions">
+              <button id="btn-profile-curate-user" class="btn-profile-update" data-i18n="profile.user.curateBtn">Have the assistant update this</button>
+              <button id="btn-profile-edit-user" class="btn-profile-edit" data-i18n="profile.user.editBtn">Edit directly</button>
+            </div>
           </div>
         </section>
 
@@ -796,9 +806,14 @@
         <button class="settings-tab" data-tab="ui" data-i18n="settings.tabs.ui">UI</button>
         <button class="settings-tab" data-tab="general" data-i18n="settings.tabs.general">General</button>
         <button class="settings-tab" data-tab="about" data-i18n="settings.tabs.about">About</button>
+        <!-- Extension tab slot: extensions add custom settings tabs here (button needs data-tab="<id>"). -->
+        <span id="ext-slot-settings-tabs" data-slot="settings.tabs"></span>
       </div>
 
       <div id="settings-body">
+        <!-- Extension tab-content slot: matching panels go here (root needs data-tab-content="<id>"). -->
+        <span id="ext-slot-settings-body" data-slot="settings.body"></span>
+
 
         <!-- ══ Tab: Models ══ -->
         <div class="settings-tab-content active" data-tab-content="models">
@@ -820,6 +835,19 @@
               Optional. Image / video / audio / vision models.
             </div>
             <div id="media-rows"></div>
+
+            <!-- Output directory: scoped under media section -->
+            <div class="settings-subsection" id="media-output-dir-section">
+              <p class="settings-subsection-desc" data-i18n="settings.media.output_dir.desc">Where generated images, videos and audio are saved (optional)</p>
+              <div class="settings-network-url">
+                <div class="settings-network-url-row">
+                  <input type="text" id="settings-media-output-dir" class="field-input" placeholder="" autocomplete="off" spellcheck="false" readonly>
+                  <button type="button" id="btn-browse-media-output-dir" class="btn-settings-action" data-i18n="settings.media.output_dir.browse">Browse…</button>
+                  <button type="button" id="btn-clear-media-output-dir" class="btn-settings-action" data-i18n="settings.media.output_dir.clear">Clear</button>
+                </div>
+                <div id="settings-media-output-dir-status" class="model-test-result"></div>
+              </div>
+            </div>
           </section>
         </div>
 
@@ -933,22 +961,24 @@
             </div>
             <p class="settings-section-desc" data-i18n="settings.backup.desc">Back up your ~/.clacky directory (config, skills, memories, tasks, sessions). Regenerable caches and logs are excluded.</p>
 
-            <div class="backup-auto-row">
-              <label class="toggle-switch">
-                <input type="checkbox" id="backup-auto-toggle">
-                <span class="toggle-slider"></span>
+            <div class="backup-auto-card">
+              <div class="backup-auto-row">
+                <label class="toggle-switch">
+                  <input type="checkbox" id="backup-auto-toggle">
+                  <span class="toggle-slider"></span>
+                </label>
+                <span class="backup-auto-label" data-i18n="settings.backup.autoLabel">Automatic backup</span>
+                <span class="backup-auto-hint" data-i18n="settings.backup.autoHint">Daily at 03:00, keeps the latest 7</span>
+              </div>
+
+              <label class="backup-option backup-option-nested">
+                <input type="checkbox" id="backup-include-sessions">
+                <span data-i18n="settings.backup.includeSessions">Include session history (larger archive)</span>
               </label>
-              <span class="backup-auto-label" data-i18n="settings.backup.autoLabel">Automatic backup</span>
-              <span class="backup-auto-hint" data-i18n="settings.backup.autoHint">Daily at 03:00, keeps the latest 7</span>
             </div>
 
-            <label class="backup-option">
-              <input type="checkbox" id="backup-include-sessions">
-              <span data-i18n="settings.backup.includeSessions">Include session history (larger archive)</span>
-            </label>
-
             <div class="backup-actions">
-              <button id="btn-backup-now" class="btn-settings-action" data-i18n="settings.backup.runNow">💾 Download backup</button>
+              <button id="btn-backup-now" class="btn-settings-action" data-i18n="settings.backup.runNow">Download backup (full snapshot)</button>
               <span id="backup-status" class="model-test-result"></span>
             </div>
           </section>
@@ -1440,38 +1470,68 @@
 
 <div id="tooltip" style="display:none"></div>
 
-<script src="/marked.min.js"></script>
+<script src="/vendor/codemirror/codemirror.min.js"></script>
+<script src="/components/code-editor.js"></script>
+<script src="/vendor/marked/marked.min.js"></script>
 <script src="/vendor/hljs/highlight.min.js"></script>
 <script src="/vendor/katex/katex.min.js"></script>
 <script src="/vendor/katex/auto-render.min.js"></script>
 <script src="/utils.js"></script>
+<script src="/core/ext.js"></script>
+<script src="/core/aside.js"></script>
 <script src="/i18n.js"></script>
 <script src="/auth.js"></script>
 <script src="/theme.js"></script>
-<script src="/notify.js"></script>
+<script src="/components/notify.js"></script>
 <script src="/ws.js"></script>
 <script src="/ws-dispatcher.js"></script>
 <script src="/sessions.js"></script>
-<script src="/workspace.js"></script>
-<script src="/datepicker.js"></script>
-<script src="/tasks.js"></script>
+<script src="/features/workspace/store.js"></script>
+<script src="/features/workspace/view.js"></script>
+<script src="/components/datepicker.js"></script>
+<script src="/features/tasks/store.js"></script>
+<script src="/features/tasks/view.js"></script>
+<script src="/features/skills/store.js"></script>
+<script src="/features/skills/view.js"></script>
+<script src="/features/channels/store.js"></script>
+<script src="/features/channels/view.js"></script>
 <script src="/skills.js"></script>
-<script src="/channels.js"></script>
-<script src="/mcp.js"></script>
-<script src="/backup.js"></script>
-<script src="/model-tester.js"></script>
+<script src="/features/mcp/store.js"></script>
+<script src="/features/mcp/view.js"></script>
+<script src="/features/backup/store.js"></script>
+<script src="/features/backup/view.js"></script>
+<script src="/features/model-tester/store.js"></script>
+<script src="/features/model-tester/view.js"></script>
 <script src="/settings.js"></script>
-<script src="/billing.js"></script>
-<script src="/onboard.js"></script>
-<script src="/brand.js"></script>
-<script src="/creator.js"></script>
-<script src="/trash.js"></script>
-<script src="/profile.js"></script>
-<script src="/version.js"></script>
-<script src="/sidebar.js"></script>
+<script src="/features/billing/store.js"></script>
+<script src="/features/billing/view.js"></script>
+<script src="/components/onboard.js"></script>
+<script src="/features/brand/store.js"></script>
+<script src="/features/brand/view.js"></script>
+<script src="/features/creator/store.js"></script>
+<script src="/features/creator/view.js"></script>
+<script src="/features/trash/store.js"></script>
+<script src="/features/trash/view.js"></script>
+<script src="/features/profile/store.js"></script>
+<script src="/features/profile/view.js"></script>
+<script src="/features/version/store.js"></script>
+<script src="/features/version/view.js"></script>
+<script src="/components/sidebar.js"></script>
 <script src="/vendor/qrcode/qrcode.min.js"></script>
-<script src="/share.js"></script>
+<script src="/features/share/store.js"></script>
+<script src="/features/share/view.js"></script>
 <script src="/app.js"></script>
-<script>Tooltip.init();</script>
+{{EXT_SCRIPTS}}
+<script>
+  Tooltip.init();
+  // Render every host-declared slot once extensions have registered.
+  // Each [data-slot] element is a named injection point; renderSlot isolates
+  // failing extensions so a crash degrades only that slot.
+  (function () {
+    document.querySelectorAll("[data-slot]").forEach(function (el) {
+      Clacky.ext.renderSlot(el.getAttribute("data-slot"), el, {});
+    });
+  })();
+</script>
 </body>
 </html>

data/lib/clacky/web/sessions.js

@@ -29,6 +29,12 @@ const Sessions = (() => {
   // Search results live in their own list, rendered into the overlay's
   // #session-search-results — they NEVER replace the sidebar session list.
   let   _searchResults     = [];
+  // Sessions resolved by id but not in the paged sidebar list — e.g. landed
+  // here via search-result click, URL deep link, share link, browser
+  // back/forward, or external notification jump. Acts as a local cache for
+  // `findOrFetch`. Excluded from sidebar render and from the loadMore cursor
+  // so the pagination of `_sessions` stays correct.
+  const _extraSessions     = [];
   // Active search result split when _filter.q is non-empty:
   // { nameIds: Set<id>, contentIds: Set<id>, contentLoaded: bool }
   let   _searchSplit       = null;
@@ -1353,8 +1359,13 @@ const Sessions = (() => {
         }
         bubbleHtml += escapeHtml(ev.content || "");
         el.innerHTML = bubbleHtml;
+        if (ev.created_at) el.dataset.createdAt = ev.created_at;
         _appendMsgTime(el, ev.created_at);
-        container.appendChild(el);
+        const wrap = document.createElement("div");
+        wrap.className = "msg-user-wrap";
+        wrap.appendChild(el);
+        _appendUserActionBar(el, wrap);
+        container.appendChild(wrap);
         break;
       }
 
@@ -1694,6 +1705,151 @@ const Sessions = (() => {
     el.appendChild(span);
   }
 
+  // ── User message action bar (copy + edit) ───────────────────────────────
+
+  const COPY_SVG = `<svg class="msg-user-copy-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M10 1H4a2 2 0 0 0-2 2v8h1.5V3a.5.5 0 0 1 .5-.5h6V1zm3 3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm.5 10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v8z"/>` +
+  `</svg>` +
+  `<svg class="msg-user-copy-icon-check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M13.5 3.5 6 11 2.5 7.5 1 9l5 5 9-9z"/>` +
+  `</svg>`;
+
+  const EDIT_SVG = `<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086zM11.189 6.25 9.75 4.81l-6.286 6.287a.25.25 0 0 0-.064.108l-.558 1.953 1.953-.558a.249.249 0 0 0 .108-.064l6.286-6.286z"/>` +
+  `</svg>`;
+
+  function _appendUserActionBar(el, wrap) {
+    el.dataset.originalHtml = el.innerHTML;
+
+    const bar = document.createElement("div");
+    bar.className = "msg-user-actions";
+
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "msg-user-action-btn";
+    copyBtn.setAttribute("aria-label", I18n.t("chat.copy"));
+    copyBtn.title = I18n.t("chat.copy");
+    copyBtn.innerHTML = COPY_SVG;
+    copyBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const text = _extractUserBubbleText(el);
+      _copyTextAndFlash(copyBtn, text);
+    });
+
+    const editBtn = document.createElement("button");
+    editBtn.type = "button";
+    editBtn.className = "msg-user-action-btn";
+    editBtn.setAttribute("aria-label", I18n.t("chat.edit"));
+    editBtn.title = I18n.t("chat.edit");
+    editBtn.innerHTML = EDIT_SVG;
+    editBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      _enterEditMode(el);
+    });
+
+    bar.appendChild(copyBtn);
+    bar.appendChild(editBtn);
+    wrap.appendChild(bar);
+  }
+
+  function _extractUserBubbleText(el) {
+    const clone = el.cloneNode(true);
+    clone.querySelectorAll(".msg-user-actions, .msg-time").forEach(n => n.remove());
+    return (clone.textContent || "").trim();
+  }
+
+  function _enterEditMode(el) {
+    if (el.classList.contains("editing")) return;
+    el.classList.add("editing");
+
+    const originalHtml = el.dataset.originalHtml || "";
+    const originalText = (() => {
+      const tmp = document.createElement("div");
+      tmp.innerHTML = originalHtml;
+      tmp.querySelectorAll(".msg-user-actions, .msg-time, .msg-pdf-badge, img").forEach(n => n.remove());
+      return (tmp.textContent || "").trim();
+    })();
+
+    el.innerHTML = "";
+
+    const wrap = document.createElement("div");
+    wrap.className = "msg-user-edit-wrap";
+
+    const textarea = document.createElement("textarea");
+    textarea.className = "msg-user-edit-textarea";
+    textarea.value = originalText;
+    textarea.rows = 1;
+
+    const actions = document.createElement("div");
+    actions.className = "msg-user-edit-actions";
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "msg-user-edit-cancel";
+    cancelBtn.textContent = I18n.t("chat.cancel");
+    cancelBtn.addEventListener("click", () => _exitEditMode(el));
+
+    const sendBtn = document.createElement("button");
+    sendBtn.type = "button";
+    sendBtn.className = "msg-user-edit-send";
+    sendBtn.textContent = I18n.t("chat.send");
+    sendBtn.addEventListener("click", () => _submitEdit(el, textarea.value.trim()));
+
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        _submitEdit(el, textarea.value.trim());
+      }
+      if (e.key === "Escape") _exitEditMode(el);
+    });
+
+    textarea.addEventListener("input", () => {
+      textarea.style.height = "auto";
+      textarea.style.height = textarea.scrollHeight + "px";
+    });
+
+    actions.appendChild(cancelBtn);
+    actions.appendChild(sendBtn);
+    wrap.appendChild(textarea);
+    wrap.appendChild(actions);
+    el.appendChild(wrap);
+
+    requestAnimationFrame(() => {
+      textarea.style.height = textarea.scrollHeight + "px";
+      textarea.focus();
+      textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+    });
+  }
+
+  function _exitEditMode(el) {
+    el.classList.remove("editing");
+    el.innerHTML = el.dataset.originalHtml || "";
+  }
+
+  function _submitEdit(el, newContent) {
+    if (!newContent) return;
+    if (!Sessions.activeId) return;
+
+    const createdAt = el.dataset.createdAt || null;
+
+    const messages = el.closest("#messages, .messages");
+    if (messages) {
+      const wrap = el.parentElement;
+      let sibling = wrap ? wrap.nextSibling : el.nextSibling;
+      while (sibling) {
+        const next = sibling.nextSibling;
+        sibling.remove();
+        sibling = next;
+      }
+    }
+
+    _exitEditMode(el);
+
+    WS.send({ type: "edit_message", session_id: Sessions.activeId, content: newContent, created_at: createdAt });
+
+    if (messages) messages.scrollTop = messages.scrollHeight;
+  }
+
   // ── Copy button for assistant messages ──────────────────────────────────
   //
   // Each assistant bubble gets a small copy button in its top-right corner.
@@ -2017,7 +2173,41 @@ const Sessions = (() => {
     get all()        { return _sessions; },
     get activeId()   { return _activeId; },
     get searchOpen() { return _searchOpen; },
-    find: id => _sessions.find(s => s.id === id),
+    find: id => _sessions.find(s => s.id === id)
+              || _extraSessions.find(s => s.id === id),
+
+    // Async variant of `find`: when not found in memory, falls back to
+    // GET /api/sessions/:id which returns the on-disk session merged with
+    // any live in-memory state (see SessionRegistry#snapshot in
+    // session_registry.rb). Resolved rows are cached in `_extraSessions`
+    // so subsequent synchronous `find` calls hit too. Returns null on
+    // 404 / network error.
+    //
+    // Use this in code paths where missing-id should NOT silently fail
+    // (Router navigation: search clicks, URL deep links, share links,
+    // browser back/forward, notification jumps). For tight synchronous
+    // paths (WS dispatch, status updates) keep using `find`.
+    async findOrFetch(id) {
+      if (!id) return null;
+      const local = _sessions.find(s => s.id === id)
+                 || _extraSessions.find(s => s.id === id);
+      if (local) return local;
+      try {
+        const resp = await fetch(`/api/sessions/${encodeURIComponent(id)}`);
+        if (!resp.ok) return null;
+        const data = await resp.json();
+        if (!data || !data.session) return null;
+        // Race guard: another caller may have hydrated meanwhile.
+        if (!_sessions.find(s => s.id === id)
+            && !_extraSessions.find(s => s.id === id)) {
+          _extraSessions.push(data.session);
+        }
+        return data.session;
+      } catch (e) {
+        console.error("Sessions.findOrFetch failed:", e);
+        return null;
+      }
+    },
 
     // Composer entry point — called by Skill autocomplete keydown handler
     // (in app.js) when the user presses Enter without an active completion.
@@ -3265,26 +3455,31 @@ const Sessions = (() => {
       }
       if (type === "user" && time) _appendMsgTime(el, time);
 
-      // For error messages, add a retry button
-      if (type === "error") {
-        const retryBtn = document.createElement("button");
-        retryBtn.className = "retry-btn";
-        retryBtn.textContent = I18n.t("chat.retry");
-        retryBtn.onclick = () => {
-          if (!_activeId) return;
-          // Send "continue" or "继续" based on user's language preference
-          const retryMessage = I18n.lang() === "zh" ? "继续" : "continue";
-          WS.send({ 
-            type: "message", 
-            session_id: _activeId, 
-            content: retryMessage 
-          });
-          retryBtn.disabled = true; // Disable button after clicking (keep it visible)
-        };
-        el.appendChild(retryBtn);
+      if (type === "user") {
+        const wrap = document.createElement("div");
+        wrap.className = "msg-user-wrap";
+        wrap.appendChild(el);
+        _appendUserActionBar(el, wrap);
+        messages.appendChild(wrap);
+      } else {
+        // For error messages, add a retry button
+        if (type === "error") {
+          const retryBtn = document.createElement("button");
+          retryBtn.className = "retry-btn";
+          retryBtn.textContent = I18n.t("chat.retry");
+          retryBtn.onclick = () => {
+            if (!_activeId) return;
+            WS.send({
+              type: "message",
+              session_id: _activeId,
+              content: I18n.t("chat.continue")
+            });
+            retryBtn.disabled = true;
+          };
+          el.appendChild(retryBtn);
+        }
+        messages.appendChild(el);
       }
-
-      messages.appendChild(el);
       // User messages: force scroll to bottom (user just sent a message)
       // Assistant/info: conditional scroll (preserve position if user is viewing history)
       if (type === "user") {
@@ -4418,7 +4613,7 @@ const Sessions = (() => {
   // ── Tree-based directory picker ─────────────────────────────────────────
   const ICON_FOLDER_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
   const ICON_CARET_SVG  = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
-  function showDirectoryPicker(currentDir, sessionId) {
+  function showDirectoryPicker(currentDir, sessionId, titleText) {
     return new Promise((resolve) => {
       const t = (key, fallback) => {
         const s = I18n.t(key);
@@ -4570,9 +4765,10 @@ const Sessions = (() => {
       // Title
       const title = document.createElement("div");
       title.className = "modal-title";
-      title.textContent = sessionLess
-        ? t("sessions.modal.dirpicker.title", "选择工作目录")
-        : t("sib.dir.changePrompt", "切换工作目录");
+      title.textContent = titleText
+        || (sessionLess
+          ? t("sessions.modal.dirpicker.title", "选择工作目录")
+          : t("sib.dir.changePrompt", "切换工作目录"));
       modal.appendChild(title);
 
       // Modal body