openclacky 1.5.19 → 1.5.21

data/lib/clacky/web/index.html

@@ -58,6 +58,9 @@
                 title="Creator / Owner" data-i18n-title="header.owner.tooltip">OWNER</button>
       </div>
     </div>
+    <!-- Active session title, aligned to the content column (right of the
+         sidebar divider). Filled by Sessions.updateChatHeader(). -->
+    <div id="header-session-title" hidden></div>
     <div id="header-right">
       <span id="ext-slot-header-right" data-slot="header.right"></span>
 
@@ -80,17 +83,20 @@
     <div class="cmd-palette" role="dialog" aria-modal="true" aria-label="Search sessions">
       <div class="search-panel-card">
         <!-- Input row -->
-        <div class="search-input-row">
-          <span class="search-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16" y2="16"/></svg>
-          </span>
-          <input id="session-search-q" type="text" class="search-input"
-                 data-i18n-placeholder="sessions.search.placeholder" placeholder="Search sessions…"
-                 autocomplete="off" />
-          <button id="btn-search-q-clear" class="btn-search-q-clear" aria-label="Clear text" hidden>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
+        <div class="search-input-wrap">
+          <div class="search-input-row">
+            <span class="search-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16" y2="16"/></svg>
+            </span>
+            <input id="session-search-q" type="text" class="search-input"
+                   data-i18n-placeholder="sessions.search.placeholder" placeholder="Search sessions…"
+                   autocomplete="off" />
+            <button id="btn-search-q-clear" class="btn-search-q-clear" type="button"
+                    data-i18n="sessions.search.clear" aria-label="Clear text" hidden>Clear</button>
+          </div>
+          <button id="btn-session-search-close" class="cmd-palette-close" type="button" aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
           </button>
-          <button id="btn-session-search-close" class="cmd-palette-esc" type="button" aria-label="Close">ESC</button>
         </div>
         <!-- Filter row -->
         <div class="search-filter-row">
@@ -112,7 +118,7 @@
           </div>
           <div class="search-date-wrap">
             <button id="session-search-date" class="search-date datepicker-trigger" type="button" data-value="" data-i18n="sessions.search.datePlaceholder"></button>
-            <svg class="search-date-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg>
+            <svg class="search-date-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="15.5" rx="2.5"/><path d="M8 2.75v3.5M16 2.75v3.5M3 10h18"/></svg>
           </div>
           <button id="btn-search-clear-all" class="btn-search-clear-all" aria-label="Clear filters" hidden>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
@@ -305,15 +311,17 @@
                  Kept as a hidden placeholder so any legacy CSS selector that
                  targets this id still resolves harmlessly. -->
           </div>
-          <div id="trash-sidebar-item" class="task-item task-item-summary">
+          <!-- Data management: one page holding the archive / recycle bin /
+               backup tabs. One rail entry keeps Billing on screen. -->
+          <div id="data-management-sidebar-item" class="task-item task-item-summary">
             <div class="task-row">
               <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="task-icon">
-                <rect x="2" y="3" width="20" height="5" rx="1"/>
-                <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/>
-                <path d="M10 12h4"/>
+                <ellipse cx="12" cy="5" rx="9" ry="3"/>
+                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+                <path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>
               </svg>
               <div class="task-info">
-                <span class="task-name" id="trash-sidebar-label" data-i18n="sidebar.trash">File Recall</span>
+                <span class="task-name" id="data-management-label" data-i18n="sidebar.dataManagement">Data</span>
               </div>
             </div>
           </div>
@@ -487,11 +495,9 @@
       </div>
       <!-- Composer slot: agent-scoped controls above the session info bar. -->
       <div id="ext-slot-session-composer" class="session-composer" data-slot="session.composer"></div>
-      <!-- Live todo/task list panel (driven by todo_update WS events) -->
-      <div id="todo-panel" class="todo-panel" style="display:none"></div>
       <!-- Session info bar — mirrors CLI bottom status bar -->
       <div id="session-info-bar" style="display:none">
-        <!-- Order: status | id | dir | model | mode | tasks | cost -->
+        <!-- Order: status | id | dir | model | reasoning | mode | todo | signal | cost -->
         <!-- Pattern: element + separator-after-element (except last) -->
         <span id="sib-status"></span>
         <span class="sib-sep sib-sep-after-status">│</span>
@@ -512,7 +518,47 @@
           <span id="sib-reasoning" class="sib-reasoning-clickable" data-i18n-title="sib.reasoning.tooltip" title="Click to change reasoning effort"><span class="sib-pill-label" data-i18n="sib.reasoning.label">Reasoning</span><span id="sib-reasoning-text"></span><span class="sib-caret" aria-hidden="true"><svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true"><path d="M4 6.5L8 10.5L12 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span>
           <div id="sib-reasoning-dropdown" class="clacky-popover sib-reasoning-dropdown" style="display:none" role="menu"></div>
         </span>
-        <span class="sib-sep sib-sep-after-reasoning">│</span>
+        <span id="sib-mode-wrap">
+          <button id="sib-mode" class="sib-mode-clickable" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="sib-mode-menu" data-i18n-title="sib.mode.tooltip"><span class="sib-pill-label" data-i18n="sib.mode.pill">Mode</span><span id="sib-mode-text"></span><span class="sib-caret" aria-hidden="true"><svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true"><path d="M4 6.5L8 10.5L12 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>
+          <div id="sib-mode-menu" class="clacky-popover" role="menu" hidden>
+            <button type="button" role="menuitemradio" data-permission-mode="confirm_all" aria-checked="true">
+              <strong data-i18n="sib.mode.confirm_all">Manual</strong>
+              <small data-i18n="sib.mode.manualHelp">Confirm actions; wait for your answer.</small>
+            </button>
+            <button type="button" role="menuitemradio" data-permission-mode="auto_approve" aria-checked="false">
+              <strong data-i18n="sib.mode.auto_approve">Auto</strong>
+              <small data-i18n="sib.mode.autoHelp">Approve tools automatically; continue after the question countdown.</small>
+            </button>
+          </div>
+        </span>
+        <span class="sib-sep sib-sep-after-mode">│</span>
+        <span id="todo-panel" class="todo-panel">
+          <button id="todo-trigger" class="todo-trigger" type="button"
+                  aria-controls="todo-popover" aria-expanded="false" disabled>
+            <svg class="todo-status-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="3" cy="4" r="1"/><path d="M6 4h7"/>
+              <circle cx="3" cy="8" r="1"/><path d="M6 8h7"/>
+              <circle cx="3" cy="12" r="1"/><path d="M6 12h7"/>
+            </svg>
+            <span class="todo-trigger-detail" aria-hidden="true">
+              <span id="todo-count" class="todo-count"></span>
+              <svg class="todo-caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10l4-4 4 4"/></svg>
+            </span>
+          </button>
+          <div id="todo-popover" class="clacky-popover todo-popover" role="dialog" hidden>
+            <div class="todo-popover-header">
+              <div class="todo-popover-heading">
+                <div class="todo-popover-title" data-i18n="chat.todo.title">Tasks</div>
+                <div id="todo-summary" class="todo-summary"></div>
+              </div>
+              <button id="todo-close" class="todo-close" type="button" aria-label="Close task list">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+              </button>
+            </div>
+            <div id="todo-list" class="todo-list" aria-live="polite"></div>
+          </div>
+        </span>
+        <span class="sib-sep sib-sep-after-todo">│</span>
         <!-- Latency signal: 4-bar signal + TTFT number. Hidden until the first LLM
              call completes (see updateInfoBar / Sessions.renderSignalBars). Click
              opens a mini benchmark panel (see Step 3/4 — not yet implemented). -->
@@ -523,14 +569,7 @@
           </span>
         </span>
         <span class="sib-sep sib-sep-after-signal" style="display:none">│</span>
-        <!-- Detail fields: mode, tasks, cost -->
-        <span class="sib-detail">
-          <span id="sib-mode"></span>
-          <span class="sib-sep sib-sep-after-mode">│</span>
-          <span id="sib-tasks"></span>
-          <span class="sib-sep sib-sep-after-tasks">│</span>
-          <span id="sib-cost"></span>
-        </span>
+        <span id="sib-cost"></span>
       </div>
 
       <!-- Composer slot: moved above the session info bar. -->
@@ -613,11 +652,11 @@
              itself is rendered by Clacky.ext inside the slot below). -->
         <div class="aside-tabbar-actions">
           <button id="btn-aside-fullscreen" class="session-aside-fullscreen" data-i18n-title="aside.fullscreen" title="Fullscreen">
-            <svg class="icon-fs-enter" 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="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
-            <svg class="icon-fs-exit" 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="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/></svg>
+            <svg class="icon-fs-enter" 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="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
+            <svg class="icon-fs-exit" 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="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/></svg>
           </button>
           <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"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m14 9 3 3-3 3"/></svg>
+            <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"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m14 9 3 3-3 3"/></svg>
           </button>
         </div>
         <div id="ext-slot-session-aside" class="session-aside-slot" data-slot="session.aside"></div>
@@ -818,30 +857,122 @@
       <div id="extensions-detail" class="extension-detail" style="display:none"></div>
     </div>
 
-    <!-- ── TRASH PANEL — Recently deleted files across all projects ─── -->
-    <div id="trash-panel" style="display:none">
-      <div id="trash-body">
+    <!-- ── DATA MANAGEMENT PANEL — one page, three tabs ──────────────────
+         Archived sessions / recycle bin / backup used to be three top-level
+         panels. They now share one page: the tab bar owns the naming, each
+         tab keeps its own panel element so every module still owns exactly
+         one body to render into. ── -->
+    <div id="data-management-panel" style="display:none">
+      <!-- Title and description mirror the Assistant Memory page: the rail entry
+           label doubles as the page title, the tabs sit right below. -->
+      <div id="data-management-header">
         <div class="channels-page-header">
           <div class="channels-page-header-main">
-            <h2 class="channels-page-title page-title" data-i18n="trash.title">File Recall</h2>
-            <p class="channels-page-subtitle" data-i18n="trash.subtitle">Files the agent moved to trash across all projects. Recall them back to where they were, or clear the ones you don't need.</p>
+            <h2 class="channels-page-title page-title" data-i18n="dataManagement.title">Data</h2>
+            <p class="channels-page-subtitle" data-i18n="dataManagement.subtitle">Archiving only hides a session from the sidebar, recycled files can be restored to where they were, and a backup can move your whole ~/.clacky to another machine.</p>
+          </div>
+        </div>
+      </div>
+      <div id="data-management-tabs" class="page-tabs" role="tablist">
+        <button type="button" class="page-tab active" role="tab" aria-selected="true"
+                data-dm-tab="archive" id="tab-dm-archive" aria-controls="archive-panel" data-i18n="archive.title">Archived sessions</button>
+        <button type="button" class="page-tab" role="tab" aria-selected="false"
+                data-dm-tab="trash" id="tab-dm-trash" aria-controls="trash-panel" data-i18n="trash.title">Recycle Bin</button>
+        <button type="button" class="page-tab" role="tab" aria-selected="false"
+                data-dm-tab="backup" id="tab-dm-backup" aria-controls="backup-panel" data-i18n="backup.title">Data backup</button>
+      </div>
+
+    <!-- ── ARCHIVE PANEL — chats the user archived: off the rail, still on disk ── -->
+    <div id="archive-panel" class="dm-view" style="display:none">
+      <div id="archive-body">
+        <div class="trash-toolbar">
+          <div class="archive-search-wrap">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="archive-search-icon">
+              <circle cx="11" cy="11" r="8"/>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+            <input type="search" id="archive-search" class="archive-search-input" data-i18n-placeholder="archive.searchPlaceholder" placeholder="Search archived sessions" autocomplete="off" spellcheck="false">
+          </div>
+
+          <div class="trash-filter-project-wrap">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-filter-project-icon">
+              <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 class="custom-select-wrapper" id="archive-filter-project">
+              <div class="custom-select-trigger custom-select-trigger--bare" tabindex="0">
+                <span class="custom-select-value placeholder" data-i18n="archive.filterAllProjects">All projects</span>
+                <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </div>
+              <div class="custom-select-dropdown"></div>
+            </div>
+          </div>
+
+          <div class="trash-filter-project-wrap">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-filter-project-icon">
+              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.83z"/>
+              <line x1="7" y1="7" x2="7.01" y2="7"/>
+            </svg>
+            <div class="custom-select-wrapper" id="archive-filter-type">
+              <div class="custom-select-trigger custom-select-trigger--bare" tabindex="0">
+                <span class="custom-select-value placeholder" data-i18n="archive.filterAllTypes">All types</span>
+                <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </div>
+              <div class="custom-select-dropdown"></div>
+            </div>
           </div>
+
+          <span class="trash-summary" id="archive-summary"></span>
+
+          <button id="btn-archive-delete-all" class="btn-trash-action btn-trash-danger">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="3 6 5 6 21 6"/>
+              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+              <path d="M10 11v6"/><path d="M14 11v6"/>
+              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
+            </svg>
+            <span data-i18n="archive.deleteAll">Delete all</span>
+          </button>
         </div>
 
-        <div id="trash-tabs" class="page-tabs">
-          <div class="trash-tabs-left">
-            <button class="trash-tab page-tab active" data-tab="file-trash" id="tab-file-trash" data-i18n="trash.tabFile">文件回收</button>
-            <button class="trash-tab page-tab" data-tab="session-trash" id="tab-session-trash" data-i18n="trash.tabSession">会话回收</button>
+        <div id="archive-list"></div>
+
+        <button id="btn-archive-load-more" style="display:none" data-i18n="archive.loadMore">Load more</button>
+      </div>
+    </div>
+
+    <!-- ── TRASH PANEL — Recently deleted files across all projects ─── -->
+    <div id="trash-panel" class="dm-view" style="display:none">
+      <div id="trash-body">
+        <div id="trash-tabs">
+          <div class="segmented-control">
+            <button class="trash-tab segmented-control__btn active" data-tab="session-trash" id="tab-session-trash" data-i18n="trash.tabSession">Sessions</button>
+            <button class="trash-tab segmented-control__btn" data-tab="file-trash" id="tab-file-trash" data-i18n="trash.tabFile">Agent Files</button>
           </div>
         </div>
 
-        <p class="trash-session-hint" id="trash-session-hint" style="display:none" data-i18n="trash.sessionAutoCleanHint">The system keeps the most recent 200 sessions; older ones are moved here.</p>
+        <p class="trash-session-hint" id="trash-session-hint" data-i18n="trash.sessionAutoCleanHint">The system keeps the most recent 200 sessions; older ones are moved here.</p>
 
         <div class="trash-toolbar">
-          <div class="trash-filter-bar" id="trash-filter-bar" style="display:none">
-            <button class="trash-filter-chip active" data-filter="all" data-i18n="trash.filterAll">All</button>
-            <button class="trash-filter-chip" data-filter="manual" data-i18n="trash.filterManual">Regular</button>
-            <button class="trash-filter-chip" data-filter="cron" data-i18n="trash.filterCron">Scheduled</button>
+          <div class="trash-filter-bar" id="trash-filter-bar">
+            <div class="trash-filter-project-wrap">
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-filter-project-icon">
+                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.83z"/>
+                <line x1="7" y1="7" x2="7.01" y2="7"/>
+              </svg>
+              <div class="custom-select-wrapper" id="trash-filter-source">
+                <div class="custom-select-trigger custom-select-trigger--bare" tabindex="0">
+                  <span class="custom-select-value placeholder" data-i18n="trash.filterAllTypes">All types</span>
+                  <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  </svg>
+                </div>
+                <div class="custom-select-dropdown"></div>
+              </div>
+            </div>
             <div class="trash-filter-project-wrap" id="trash-filter-project-wrap">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-filter-project-icon">
                 <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"/>
@@ -872,7 +1003,7 @@
               </svg>
               <span data-i18n="trash.emptyOld">Empty older than 7 days</span>
             </button>
-            <button id="btn-trash-empty-orphans" class="btn-trash-action btn-trash-danger" data-i18n-title="trash.emptyOrphans.tooltip" title="Permanently delete entries whose original project directory no longer exists (e.g. test temp dirs)">
+            <button id="btn-trash-empty-orphans" class="btn-trash-action btn-trash-danger" style="display:none" data-i18n-title="trash.emptyOrphans.tooltip" title="Permanently delete entries whose original project directory no longer exists (e.g. test temp dirs)">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                 <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
@@ -891,16 +1022,72 @@
           </div>
         </div>
 
-        <div id="trash-tab-file" class="trash-tab-content">
+        <div id="trash-tab-file" class="trash-tab-content" style="display:none">
           <div id="trash-list"></div>
         </div>
 
-        <div id="trash-tab-session" class="trash-tab-content" style="display:none">
+        <div id="trash-tab-session" class="trash-tab-content">
           <div id="trash-session-list"></div>
         </div>
       </div>
     </div>
 
+    <!-- ── BACKUP PANEL — auto/manual backup of ~/.clacky (moved out of Settings) ── -->
+    <div id="backup-panel" class="dm-view" style="display:none">
+      <div id="backup-body">
+        <div id="backup-content">
+
+          <!-- 自动备份 -->
+          <section class="settings-section" id="backup-section">
+            <div class="settings-section-title">
+              <span data-i18n="settings.backup.autoTitle">Auto Backup</span>
+            </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-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>
+              <div class="backup-dest-row">
+                <span class="backup-dest-label" data-i18n="settings.backup.destLabel">Backup folder</span>
+                <span class="backup-dest-path" id="backup-dest-path">—</span>
+                <button id="btn-backup-open-folder" class="btn-backup-action" data-i18n="settings.backup.openFolder">Open</button>
+              </div>
+              <div id="backup-status" class="model-test-result"></div>
+            </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>
+          </section>
+
+          <!-- 手动备份 -->
+          <section class="settings-section">
+            <div class="settings-section-title">
+              <span data-i18n="settings.backup.manualTitle">Manual Backup</span>
+            </div>
+
+            <div class="backup-actions">
+              <button id="btn-backup-now" class="btn-backup-action" data-i18n="settings.backup.runNow">Download backup</button>
+              <label class="btn-backup-action">
+                <span data-i18n="settings.backup.restoreBtn">Restore backup</span>
+                <input type="file" id="input-backup-restore" accept=".tar.gz,.gz" style="display:none">
+              </label>
+              <span id="backup-manual-status" class="model-test-result"></span>
+            </div>
+          </section>
+
+        </div>
+      </div>
+    </div>
+    </div>
+    <!-- /data-management-panel -->
+
     <!-- ── PROFILE PANEL — "Assistant Memory": a 3-tab window into the agent's inner state.
          All mutations happen through sessions (never in-browser editors):
            SOUL tab   → [让助理整理性格] → /onboard scope:soul
@@ -1006,7 +1193,6 @@
         <button class="settings-tab page-tab active" data-tab="models" data-i18n="settings.tabs.models">Models</button>
         <button class="settings-tab page-tab" data-tab="ui" data-i18n="settings.tabs.ui">UI</button>
         <button class="settings-tab page-tab" data-tab="general" data-i18n="settings.tabs.general">General</button>
-        <button class="settings-tab page-tab" data-tab="data" data-i18n="settings.tabs.data">Data</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>
         <button class="settings-tab page-tab" data-tab="about" data-i18n="settings.tabs.about">About</button>
@@ -1195,6 +1381,20 @@
                 <button id="btn-browser-setup" class="btn-settings-action" data-i18n="settings.browser.btn">🌐 Configure Browser</button>
               </div>
             </div>
+            <div class="settings-screenshot" id="browser-screenshot-settings" style="display:none">
+              <div class="settings-screenshot-head">
+                <span class="settings-screenshot-title" data-i18n="settings.browser.screenshot.title">Screenshot quality</span>
+                <p class="settings-screenshot-desc" data-i18n="settings.browser.screenshot.desc">When the AI browses a web page it takes screenshots to "see" it. Higher quality looks clearer, but each screenshot takes up more of the conversation — long tasks can end up slower and more expensive.</p>
+              </div>
+              <div class="settings-screenshot-row">
+                <span class="settings-screenshot-label" data-i18n="settings.browser.screenshot.quality">Quality</span>
+                <div class="settings-segmented" id="browser-screenshot-quality">
+                  <button type="button" class="settings-segmented-btn" data-bytes="150000" data-i18n="settings.browser.screenshot.standard">Standard</button>
+                  <button type="button" class="settings-segmented-btn" data-bytes="300000" data-i18n="settings.browser.screenshot.high">High</button>
+                </div>
+              </div>
+              <p class="settings-screenshot-hint" data-i18n="settings.browser.screenshot.qualityHint">Standard is enough for most pages and saves space. High keeps more detail on long pages.</p>
+            </div>
           </section>
 
           <!-- Network / Proxy section -->
@@ -1222,24 +1422,24 @@
               <span data-i18n="settings.search.title">Web Search</span>
             </div>
             <div class="settings-network">
-              <p class="settings-network-desc" data-i18n="settings.search.desc">Free built-in search uses Parallel, DuckDuckGo, and Bing with no key required. Select a search provider to use a configured API instead.</p>
+              <p class="settings-network-desc" data-i18n="settings.search.desc">The agent searches the web and fetches page content automatically when it needs up-to-date information — news, docs, prices, time-sensitive data.</p>
               <div class="settings-network-url">
                 <label class="settings-network-url-label" for="settings-search-provider-trigger" data-i18n="settings.search.provider">Provider</label>
                 <div class="settings-network-url-row">
                   <div class="custom-select-wrapper" id="settings-search-provider-wrapper">
                     <div class="custom-select-trigger" tabindex="0" id="settings-search-provider-trigger">
-                      <span class="custom-select-value placeholder" id="settings-search-provider-value" data-i18n="settings.search.builtin">Built-in (Parallel / DuckDuckGo / Bing)</span>
+                      <span class="custom-select-value placeholder" id="settings-search-provider-value" data-i18n="settings.search.builtin">Free (auto-selects a working engine)</span>
                       <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                       </svg>
                     </div>
                     <div class="custom-select-dropdown" id="settings-search-provider-dropdown">
-                      <div class="custom-select-option" data-value="" data-i18n="settings.search.builtin">Built-in (Parallel / DuckDuckGo / Bing)</div>
+                      <div class="custom-select-option" data-value="" data-i18n="settings.search.builtin">Free (auto-selects a working engine)</div>
+                      <div class="custom-select-option" data-value="deepseek_web" data-i18n="settings.search.deepseek">DeepSeek (search &amp; page fetch)</div>
                     </div>
                   </div>
                   <button type="button" id="btn-save-search" class="btn-settings-action" data-i18n="settings.search.save">Save</button>
                 </div>
-                <div id="settings-search-status" class="model-test-result"></div>
               </div>
               <div class="settings-network-url" id="search-key-wrap" style="display:none">
                 <label class="settings-network-url-label" for="settings-search-key" data-i18n="settings.search.key">API Key</label>
@@ -1247,15 +1447,17 @@
                   <input type="password" id="settings-search-key" class="field-input" placeholder="tvly-..." autocomplete="off" spellcheck="false">
                   <button type="button" id="btn-test-search" class="btn-settings-action" data-i18n="settings.search.test">Test</button>
                 </div>
+                <p class="settings-network-note" id="search-deepseek-hint" data-i18n="settings.search.deepseekHintFree" style="display:none">Leave the API Key empty to reuse your configured model key; accepts DeepSeek and OpenClacky provider keys. Per-call billing starts Nov 1, 2026 00:00 (Beijing time) at about ¥0.005 per call.</p>
+              </div>
+              <p class="settings-network-note" id="search-builtin-note" data-i18n="settings.search.builtinEngines">Tries Parallel → DuckDuckGo → Bing in order. No key or configuration needed.</p>
+              <div id="settings-search-status" class="model-test-result"></div>
+              <div class="settings-network-url-row settings-network-divider" id="custom-searcher-row">
+                <span class="settings-network-note" data-i18n="settings.search.customHint">Need another search provider? Put a script in ~/.clacky/searchers/, see tavily.rb.</span>
+                <button type="button" id="btn-custom-searcher" class="btn-settings-action" data-i18n="settings.search.customBtn">Build with Agent</button>
               </div>
-              <p class="settings-network-desc" data-i18n="settings.search.custom">Add your own provider by dropping a script into ~/.clacky/searchers/ — see tavily.rb for the interface.</p>
             </div>
           </section>
 
-          <!-- Backup section -->
-          <section class="settings-section" id="backup-section" style="display:none">
-          </section>
-
           <!-- Brand & License section -->
           <section class="settings-section" id="brand-license-section">
             <div class="settings-section-title">
@@ -1292,7 +1494,10 @@
                   </div>
                   <div class="brand-status-row">
                     <span class="brand-status-label" data-i18n="settings.brand.label.status">Status</span>
-                    <span class="brand-status-value" id="brand-status-badge">—</span>
+                    <span class="brand-status-state">
+                      <span class="brand-status-value" id="brand-status-badge">—</span>
+                      <span class="brand-status-hint" id="brand-status-hint" style="display:none"></span>
+                    </span>
                   </div>
                   <div class="brand-status-row">
                     <span class="brand-status-label" data-i18n="settings.brand.label.expires">Expires</span>
@@ -1330,7 +1535,7 @@
                   <div class="qr-lightbox-backdrop" id="qr-lightbox-backdrop"></div>
                   <div class="qr-lightbox-content">
                     <img id="qr-lightbox-img" src="" alt="Support QR Code" class="qr-lightbox-img">
-                    <p class="qr-lightbox-label" id="qr-lightbox-label">Tech Support</p>
+                    <p class="qr-lightbox-label" id="qr-lightbox-label" data-i18n="settings.brand.label.supportQr">Tech Support</p>
                     <p class="qr-lightbox-hint" data-i18n="settings.brand.label.qrHint">Scan with your phone camera</p>
                     <button class="qr-lightbox-close" id="qr-lightbox-close" aria-label="Close">
                       <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
@@ -1364,56 +1569,6 @@
           </section>
         </div><!-- end Tab: General -->
 
-        <!-- ══ Tab: Data ══ -->
-        <div class="settings-tab-content" data-tab-content="data" style="display:none">
-
-          <!-- 自动备份 -->
-          <section class="settings-section">
-            <div class="settings-section-title">
-              <span data-i18n="settings.backup.autoTitle">Auto Backup</span>
-            </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-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>
-              <div class="backup-dest-row">
-                <span class="backup-dest-label" data-i18n="settings.backup.destLabel">Backup folder</span>
-                <span class="backup-dest-path" id="backup-dest-path">—</span>
-                <button id="btn-backup-open-folder" class="btn-settings-link" data-i18n="settings.backup.openFolder">Open</button>
-              </div>
-              <div id="backup-status" class="model-test-result"></div>
-            </div>
-          </section>
-
-          <!-- 手动备份 -->
-          <section class="settings-section">
-            <div class="settings-section-title">
-              <span data-i18n="settings.backup.manualTitle">Manual Backup</span>
-            </div>
-
-            <div class="backup-actions">
-              <button id="btn-backup-now" class="btn-settings-action" data-i18n="settings.backup.runNow">Download backup</button>
-              <label class="btn-settings-action btn-settings-action--file">
-                <span data-i18n="settings.backup.restoreBtn">Restore backup</span>
-                <input type="file" id="input-backup-restore" accept=".tar.gz,.gz" style="display:none">
-              </label>
-              <span id="backup-manual-status" class="model-test-result"></span>
-            </div>
-          </section>
-
-        </div><!-- end Tab: Data -->
-
         <!-- ══ Tab: About ══ -->
         <div class="settings-tab-content" data-tab-content="about" style="display:none">
           <!-- Version section -->
@@ -1633,8 +1788,8 @@
           </div>
           <p class="setup-device-card-lead" data-i18n="onboard.device.card.lead">Sign up and get $1 free credit · no subscription · pay as you go</p>
           <ul class="setup-device-card-points">
-            <li data-i18n="onboard.device.card.point1">One key for all frontier models — Claude, Gemini, DeepSeek &amp; more</li>
-            <li data-i18n="onboard.device.card.point2">Same pricing as official APIs, switch models instantly</li>
+            <li data-i18n="onboard.device.card.point1">One key for all frontier models — Claude, GPT, DeepSeek &amp; more</li>
+            <li data-i18n="onboard.device.card.point2">Up to 70% off, switch models instantly</li>
           </ul>
           <button id="setup-btn-device-login" class="setup-submit-btn setup-device-btn">
             <span data-i18n="onboard.device.btn">Get started free</span>
@@ -1645,11 +1800,7 @@
         <!-- Pending state: shown while waiting for browser approval -->
         <div id="setup-device-pending" style="display:none">
           <div class="setup-device-spinner"></div>
-          <p class="setup-device-pending-text" data-i18n="onboard.device.pending">Waiting for confirmation in your browser…</p>
-          <p class="setup-device-code">
-            <span data-i18n="onboard.device.code">Verification code:</span>
-            <strong id="setup-device-usercode">—</strong>
-          </p>
+          <p class="setup-device-pending-text" data-i18n="onboard.device.pending">Finishing the connection in your browser…</p>
           <a id="setup-device-link" href="#" target="_blank" rel="noopener" class="setup-device-reopen"><span data-i18n="onboard.device.reopen">Open browser again</span><svg class="setup-btn-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg></a>
           <button id="setup-device-cancel" class="setup-back-btn" data-i18n="onboard.device.cancel">Cancel</button>
         </div>
@@ -1860,6 +2011,8 @@
 <script src="/features/brand/view.js"></script>
 <script src="/features/trash/store.js"></script>
 <script src="/features/trash/view.js"></script>
+<script src="/features/archive/store.js"></script>
+<script src="/features/archive/view.js"></script>
 <script src="/features/profile/store.js"></script>
 <script src="/features/profile/view.js"></script>
 <script src="/features/version/store.js"></script>