openclacky 1.3.6 → 1.3.8

data/lib/clacky/web/index.html

@@ -37,10 +37,10 @@
         <span class="header-logo-divider"></span>
         <span class="header-logo" id="header-logo">{{BRAND_NAME}}</span>
         <!-- Owner badge: visible only for creator-tier licenses (user_licensed=true).
-             Clicking navigates to Creator Hub. stopPropagation prevents the parent
-             #header-brand onclick (which would navigate to chat). -->
+             Clicking opens the Extension & Creation workspace. stopPropagation
+             prevents the parent #header-brand onclick (which navigates to chat). -->
         <button id="header-owner-badge" class="header-owner-badge" style="display:none"
-                onclick="event.stopPropagation(); Router.navigate('creator')"
+                onclick="event.stopPropagation(); Clacky.ext.ui.openWorkspace('ext-studio')"
                 title="Creator / Owner" data-i18n-title="header.owner.tooltip">OWNER</button>
       </div>
     </div>
@@ -53,6 +53,14 @@
     </div>
     <div id="header-right">
       <span id="ext-slot-header-right" data-slot="header.right"></span>
+      <button id="refresh-page-btn" class="theme-toggle-btn" data-i18n-title="header.refresh" title="Refresh" onclick="location.reload()">
+        <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">
+          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+          <path d="M21 3v5h-5"/>
+          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+          <path d="M8 16H3v5"/>
+        </svg>
+      </button>
       <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"/>
@@ -117,25 +125,17 @@
   <aside id="sidebar">
     <!-- Sidebar navigation groups -->
     <div id="sidebar-list">
+      <!-- TOP nav slot: extensions add first-class workspace entries here.
+           Above Sessions — reserved for major extension surfaces. -->
+      <div id="ext-slot-sidebar-nav-top" data-slot="sidebar.nav.top"></div>
+
       <!-- Chat Group -->
       <div id="chat-section">
-        <!-- Header: "Sessions" label + [+ ▾] split button -->
+        <!-- Header: "Sessions" label + [+ New] button -->
         <div class="sidebar-divider">
           <span data-i18n="sidebar.chat">Sessions</span>
           <div class="sidebar-divider-actions">
-            <div class="btn-split-wrap">
-              <button id="btn-new-session-inline" class="btn-split-main" title="New Session" data-i18n="sessions.newSession">+ New Session</button>
-              <button id="btn-new-session-arrow" class="btn-split-arrow" title="Options">▾</button>
-              <!-- Dropdown -->
-              <div id="new-session-dropdown" class="new-session-dropdown" hidden>
-                <div class="dropdown-item" id="btn-new-session-modal" data-i18n="sessions.newSessionAdvanced">
-                  <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: -1px; margin-right: 5px; opacity: 0.6;">
-                    <path d="M8 0a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-2A.5.5 0 018 0zm0 13a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-2A.5.5 0 018 13zm8-5a.5.5 0 01-.5.5h-2a.5.5 0 010-1h2a.5.5 0 01.5.5zM3 8a.5.5 0 01-.5.5h-2a.5.5 0 010-1h2A.5.5 0 013 8zm10.657-5.657a.5.5 0 010 .707l-1.414 1.415a.5.5 0 11-.707-.708l1.414-1.414a.5.5 0 01.707 0zm-9.193 9.193a.5.5 0 010 .707L3.05 13.657a.5.5 0 01-.707-.707l1.414-1.414a.5.5 0 01.707 0zm9.193 2.121a.5.5 0 01-.707 0l-1.414-1.414a.5.5 0 01.707-.707l1.414 1.414a.5.5 0 010 .707zM4.464 4.465a.5.5 0 01-.707 0L2.343 3.05a.5.5 0 11.707-.707l1.414 1.414a.5.5 0 010 .708z"/>
-                  </svg>
-                  <span data-i18n="sessions.newSessionAdvanced">More Options</span>
-                </div>
-              </div>
-            </div>
+            <button id="btn-new-session-inline" class="btn-split-main" title="New Session" data-i18n="sessions.newSession">+ New Session</button>
           </div>
         </div>
 
@@ -154,7 +154,11 @@
         <div id="session-list"></div>
         <!-- Load more button rendered dynamically by Sessions.renderList() -->
       </div>
-      
+
+      <!-- MAIN nav slot: default landing spot for extension menus. Between
+           Sessions and Config so ext entries feel like standard nav items. -->
+      <div id="ext-slot-sidebar-nav" data-slot="sidebar.nav"></div>
+
       <!-- Config Group -->
       <div id="config-section">
         <div class="sidebar-divider"><span data-i18n="sidebar.config">Config</span></div>
@@ -203,6 +207,17 @@
               </div>
             </div>
           </div>
+          <div id="extensions-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">
+                <path d="M20 7h-9"/><path d="M14 17H5"/>
+                <circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/>
+              </svg>
+              <div class="task-info">
+                <span class="task-name" id="extensions-sidebar-label" data-i18n="sidebar.extensions">Extension Market</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -253,27 +268,8 @@
         </div>
       </div>
 
-      <!-- Creator Group — only shown when user_licensed -->
-      <div id="creator-section" style="display:none">
-        <div class="sidebar-divider"><span data-i18n="sidebar.creatorSection">Creator</span></div>
-        <div id="creator-nav-items">
-          <div id="creator-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">
-                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
-                <path d="M2 17l10 5 10-5"/>
-                <path d="M2 12l10 5 10-5"/>
-              </svg>
-              <div class="task-info">
-                <span class="task-name" id="creator-sidebar-label" data-i18n="sidebar.creator">Creator Hub</span>
-              </div>
-            </div>
-          </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>
+      <!-- BOTTOM nav slot: end-of-sidebar spot for secondary ext entries. -->
+      <div id="ext-slot-sidebar-nav-bottom" data-slot="sidebar.nav.bottom"></div>
     </div>
 
     <!-- Bottom Settings -->
@@ -303,39 +299,108 @@
   <!-- ── 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>
+    <!-- Extension workspace slot: extensions mount entirely new custom panels here.
+         Hidden by default; the Router shows it (display:block) when handling
+         the `ext-workspace` view and re-renders it on every navigate(). -->
+    <div id="ext-slot-main-workspace" data-slot="main.workspace" style="display:none"></div>
 
 
     <!-- Onboard panel: kept as empty shell (soul_setup auto-launches /onboard session) -->
     <div id="onboard-panel" style="display:none"></div>
 
-    <!-- Welcome screen -->
-    <div id="welcome" class="centered">
-      <div class="ce-mark">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z"/>
-        </svg>
-      </div>
-      <div class="ce-head">
-        <h2 id="welcome-title" class="ce-title" data-i18n="welcome.title" data-i18n-vars="brand={{BRAND_NAME}}">What should we build?</h2>
-        <p class="ce-sub" data-i18n="welcome.body">Your agent is standing by. Pick a starting point or just type.</p>
-      </div>
-      <div class="chips">
-        <button class="chip" data-welcome-prompt="welcome.chip.code.prompt">
-          <span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg></span>
-          <span class="ct-wrap"><span class="ct" data-i18n="welcome.chip.code.title">Write code</span><span class="cd" data-i18n="welcome.chip.code.desc">build, refactor, debug</span></span>
-        </button>
-        <button class="chip" data-welcome-prompt="welcome.chip.task.prompt">
-          <span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
-          <span class="ct-wrap"><span class="ct" data-i18n="welcome.chip.task.title">Automate a task</span><span class="cd" data-i18n="welcome.chip.task.desc">schedule, run, repeat</span></span>
-        </button>
-        <button class="chip" data-welcome-prompt="welcome.chip.research.prompt">
-          <span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5V6a2 2 0 0 1 2-2h12v16H6a2 2 0 0 1-2-2z"/><path d="M8 7h7"/></svg></span>
-          <span class="ct-wrap"><span class="ct" data-i18n="welcome.chip.research.title">Research</span><span class="cd" data-i18n="welcome.chip.research.desc">search, read, summarize</span></span>
-        </button>
+    <!-- New Session page (default landing view; hash: #new or empty) -->
+    <div id="welcome" class="centered new-session-page">
+      <div class="new-session-inner">
+       <div class="new-session-body">
+        <h2 class="new-session-title" data-i18n="sessions.new.title">Start a new session</h2>
+        <p class="new-session-subtitle" data-i18n="sessions.new.subtitle">Pick who you want to chat with, then type your first message.</p>
+
+        <div id="new-session-agents" class="new-session-agents"></div>
+
+        <!-- Panels the selected agent exposes (filled when an agent is picked) -->
+        <div id="new-session-agent-panels" class="new-session-agent-panels" style="display:none"></div>
+
+        <div class="new-session-advanced-wrap">
+          <button id="new-session-toggle-advanced" class="new-session-advanced-toggle" type="button" aria-expanded="false">
+            <span data-i18n="sessions.new.moreOptions">More options</span>
+            <svg class="new-session-advanced-caret" width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>
+          </button>
+
+          <div id="new-session-advanced" class="new-session-advanced" hidden>
+            <div class="new-session-field">
+              <label class="new-session-label" data-i18n="sessions.modal.name">Session Name</label>
+              <input id="new-session-name" type="text" class="new-session-input"
+                     data-i18n-placeholder="sessions.modal.name.placeholder"
+                     placeholder="Leave empty to auto-generate">
+            </div>
+
+            <div class="new-session-field">
+              <label class="new-session-label" data-i18n="sessions.modal.model">Model</label>
+              <select id="new-session-model" class="new-session-select"></select>
+            </div>
+
+            <div class="new-session-field">
+              <label class="new-session-label" data-i18n="sessions.modal.directory">Working Directory</label>
+              <div class="new-session-input-row">
+                <input id="new-session-directory" type="text" class="new-session-input"
+                       data-i18n-placeholder="sessions.modal.directory.placeholder"
+                       placeholder="~/workspace/my-project">
+                <button id="new-session-browse-btn" type="button" class="new-session-browse-btn"
+                        data-i18n-title="sessions.modal.directory.browse" title="Browse…" aria-label="Browse">
+                  <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>
+                </button>
+              </div>
+            </div>
+
+            <div id="new-session-init-project-field" class="new-session-checkbox-field" style="display:none">
+              <label class="new-session-checkbox-label">
+                <input id="new-session-init-project" type="checkbox" class="new-session-checkbox">
+                <span data-i18n="sessions.modal.initProject">Initialize full-stack project (/new)</span>
+              </label>
+            </div>
+          </div>
+        </div>
+       </div><!-- /.new-session-body -->
+
+        <div class="new-session-composer">
+          <!-- Skill autocomplete dropdown (shown when user types /xxx) -->
+          <div id="ns-skill-autocomplete" class="skill-autocomplete" style="display:none" role="listbox" aria-label="Skills">
+            <div class="skill-ac-header-row">
+              <div class="skill-ac-left">
+                <div class="skill-ac-title" data-i18n="sidebar.skills">Skills</div>
+                <label class="skill-ac-filter-toggle">
+                  <input type="checkbox" id="ns-chk-ac-show-system-skills">
+                  <span class="skill-ac-toggle-track"></span>
+                  <span class="skill-ac-filter-label" data-i18n="skills.filter.showSystemShort">System</span>
+                </label>
+              </div>
+            </div>
+            <div id="ns-skill-autocomplete-list"></div>
+          </div>
+          <!-- Attachment preview strip (hidden when empty) -->
+          <div id="ns-image-preview-strip" style="display:none"></div>
+          <div id="ns-input-bar" class="new-session-input-bar">
+            <input type="file" id="ns-file-input" accept="*/*" multiple style="display:none">
+            <button id="ns-btn-attach" type="button" class="new-session-composer-btn"
+                    title="Attach file (image, pdf, docx, md, tar.gz…) — drag & drop / Ctrl+V also work">
+              <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">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+              </svg>
+            </button>
+            <button id="ns-btn-slash" type="button" class="new-session-composer-btn" title="Insert skill command (/)">
+              <span>/</span>
+            </button>
+            <textarea id="new-session-input"
+                      class="new-session-textarea"
+                      rows="1"
+                      data-i18n-placeholder="chat.input.placeholder"
+                      placeholder="Message… (Enter to send, Shift+Enter for newline)"></textarea>
+            <button id="new-session-send" class="new-session-send" type="button" title="Send message" disabled>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </button>
+          </div>
+        </div>
       </div>
-      <button id="btn-welcome-new" class="ce-blank" data-i18n="welcome.btn">Start a blank session</button>
     </div>
 
     <!-- Scheduled Tasks list panel (shown when user clicks "Scheduled Tasks") -->
@@ -370,6 +435,8 @@
       <div id="new-message-banner" class="new-message-banner" style="display:none">
         <span data-i18n="chat.newMessageHint">New messages ↓</span>
       </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>
       <!-- Session info bar — mirrors CLI bottom status bar -->
       <div id="session-info-bar" style="display:none">
         <!-- Order: status | id | dir | model | mode | tasks | cost -->
@@ -414,8 +481,7 @@
         </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>
+      <!-- Composer slot: moved above the session info bar. -->
       <div id="input-area">
         <div id="ws-disconnect-hint" style="display:none"></div>
         <!-- Skill autocomplete dropdown (shown when user types /xxx) -->
@@ -474,67 +540,6 @@
       </button>
     </div>
 
-    <!-- ── CREATOR PANEL ─────────────────────────────────────────────── -->
-    <div id="creator-panel" style="display:none">
-      <div id="creator-body">
-        <div class="skills-page-header">
-          <h2 class="skills-page-title" data-i18n="creator.title">Creator Hub</h2>
-          <p class="skills-page-subtitle" data-i18n="creator.subtitle">Manage and publish your skills to the platform</p>
-        </div>
-
-        <!-- Promo banner: shown only to non-licensed users -->
-        <div id="creator-promo-banner" style="display:none">
-          <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">
-            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
-          </svg>
-          <span data-i18n="creator.promo.text">Publish your skills &amp; build your own brand on OpenClacky.</span>
-          <a href="https://www.openclacky.com/creators" target="_blank" data-i18n="creator.promo.link">Learn more →</a>
-        </div>
-
-        <!-- Section 1: Cloud skills (published) -->
-        <div class="creator-section-block" id="creator-cloud-block">
-          <div class="creator-section-header">
-            <span class="creator-section-label" data-i18n="creator.section.cloud">Cloud Skills</span>
-            <span class="creator-section-hint" data-i18n="creator.section.cloudHint">Published to the platform</span>
-          </div>
-          <div id="creator-cloud-list" class="creator-list"></div>
-          <!-- Lock overlay: shown only to non-licensed users -->
-          <div id="creator-cloud-lock" 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">
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-            </svg>
-            <span data-i18n="creator.cloud.locked">Brand license required to publish cloud skills.</span>
-          </div>
-        </div>
-
-        <!-- Section 2: Local skills (ready to publish) -->
-        <div class="creator-section-block" id="creator-local-block">
-          <div class="creator-section-header">
-            <span class="creator-section-label" data-i18n="creator.section.local">Local Skills</span>
-            <span class="creator-section-hint" data-i18n="creator.section.localHint">Ready to publish</span>
-          </div>
-          <div id="creator-local-list" class="creator-list"></div>
-        </div>
-
-        <!-- Section 3: Create new skill -->
-        <div class="creator-section-block" id="creator-new-block">
-          <div class="creator-section-header">
-            <span class="creator-section-label" data-i18n="creator.section.new">Create New Skill</span>
-          </div>
-          <div id="creator-new-entry" class="creator-new-card">
-            <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="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 8v8"/><path d="M8 12h8"/>
-            </svg>
-            <span data-i18n="creator.newSkill.label">Create a new skill with /skill-creator</span>
-            <svg class="creator-new-arrow" 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="M5 12h14"/><path d="M12 5l7 7-7 7"/>
-            </svg>
-          </div>
-        </div>
-
-      </div>
-    </div>
-
     <!-- ── SKILLS PANEL ───────────────────────────────────────────────── -->
     <div id="skills-panel" style="display:none">
       <div id="skills-body">
@@ -648,6 +653,29 @@
       </div>
     </div>
 
+    <!-- ── EXTENSIONS PANEL — public extension marketplace (browse only) ─── -->
+    <div id="extensions-panel" style="display:none">
+      <div id="extensions-body">
+        <div class="channels-page-header">
+          <h2 class="channels-page-title" data-i18n="extensions.title">Extension Market</h2>
+          <p class="channels-page-subtitle" data-i18n="extensions.subtitle">Browse extensions that creators can bundle into brand packages. Extensions are delivered with your license — there is no direct download here.</p>
+        </div>
+
+        <div class="extensions-toolbar">
+          <select id="extensions-sort" class="extensions-sort">
+            <option value="newest" data-i18n="extensions.sort.newest">Newest</option>
+            <option value="updated" data-i18n="extensions.sort.updated">Recently updated</option>
+            <option value="downloads" data-i18n="extensions.sort.downloads">Most downloaded</option>
+          </select>
+          <input type="text" id="extensions-search-input" class="extensions-search" placeholder="Search extensions…" />
+        </div>
+
+        <div id="extensions-warning" class="brand-skills-warning" style="display:none"></div>
+        <div id="extensions-list"></div>
+      </div>
+      <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">
@@ -663,30 +691,37 @@
           </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>
+
         <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>
           <span class="trash-summary" id="trash-summary"></span>
           <div class="trash-actions">
-            <button id="btn-trash-refresh" class="btn-trash-action" title="Refresh">
+            <button id="btn-trash-refresh" class="btn-trash-action" data-i18n-title="trash.refresh.tooltip" title="Refresh">
               <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="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/>
                 <path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/>
               </svg>
               <span data-i18n="trash.refresh">Refresh</span>
             </button>
-            <button id="btn-trash-empty-old" class="btn-trash-action" title="Permanently delete files older than 7 days">
+            <button id="btn-trash-empty-old" class="btn-trash-action" data-i18n-title="trash.emptyOld.tooltip" title="Permanently delete files older than 7 days">
               <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">
                 <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
               </svg>
               <span data-i18n="trash.emptyOld">Empty &gt;7 days</span>
             </button>
-            <button id="btn-trash-empty-orphans" class="btn-trash-action" 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" 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"/>
               </svg>
               <span data-i18n="trash.emptyOrphans">Clean orphans</span>
             </button>
-            <button id="btn-trash-empty-all" class="btn-trash-action btn-trash-danger" title="Permanently delete all trashed files">
+            <button id="btn-trash-empty-all" class="btn-trash-action btn-trash-danger" data-i18n-title="trash.emptyAll.tooltip" title="Permanently delete all trashed files">
               <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"/>
@@ -1394,61 +1429,6 @@
   </div>
 </div>
 
-<!-- ── NEW SESSION MODAL ─────────────────────────────────────────────────── -->
-<div id="new-session-modal" class="modal-overlay" style="display:none">
-  <div class="modal-box new-session-modal">
-    <div class="modal-header">
-      <h3 class="modal-title" data-i18n="sessions.modal.title">Create New Session</h3>
-    </div>
-    <div class="modal-body">
-      <div class="modal-field">
-        <label class="modal-label" data-i18n="sessions.modal.agent">Agent</label>
-        <select id="new-session-agent" class="modal-select">
-          <option value="general" data-i18n="sessions.modal.agent.general">General</option>
-          <option value="coding" data-i18n="sessions.modal.agent.coding">Coding</option>
-        </select>
-      </div>
-
-      <div class="modal-field">
-        <label class="modal-label" data-i18n="sessions.modal.name">Session Name</label>
-        <input id="new-session-name" type="text" class="modal-input" 
-               data-i18n-placeholder="sessions.modal.name.placeholder" 
-               placeholder="Leave empty to auto-generate">
-      </div>
-
-      <div class="modal-field">
-        <label class="modal-label" data-i18n="sessions.modal.model">Model</label>
-        <select id="new-session-model" class="modal-select">
-          <!-- Populated dynamically from configured models -->
-        </select>
-      </div>
-
-      <div class="modal-field">
-        <label class="modal-label" data-i18n="sessions.modal.directory">Working Directory</label>
-        <div class="modal-input-row">
-          <input id="new-session-directory" type="text" class="modal-input" 
-                 data-i18n-placeholder="sessions.modal.directory.placeholder"
-                 placeholder="~/workspace/my-project">
-          <button id="new-session-browse-btn" type="button" class="modal-browse-btn" data-i18n-title="sessions.modal.directory.browse" title="Browse…" aria-label="Browse">
-            <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>
-          </button>
-        </div>
-      </div>
-
-      <div id="new-session-init-project-field" class="modal-field-checkbox" style="display:none">
-        <label class="modal-checkbox-label">
-          <input id="new-session-init-project" type="checkbox" class="modal-checkbox">
-          <span data-i18n="sessions.modal.initProject">Initialize full-stack project (/new)</span>
-        </label>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button id="new-session-cancel" class="btn-secondary" data-i18n="modal.cancel">Cancel</button>
-      <button id="new-session-create" class="btn-primary" data-i18n="sessions.modal.create">Create Session</button>
-    </div>
-  </div>
-</div>
-
 <!-- ── CONFIRMATION MODAL ────────────────────────────────────────────────── -->
 <div id="modal-overlay" class="modal-overlay" style="display:none">
   <div class="modal-box sm">
@@ -1531,8 +1511,12 @@
 <script src="/skills.js"></script>
 <script src="/features/mcp/store.js"></script>
 <script src="/features/mcp/view.js"></script>
+<script src="/features/extensions/store.js"></script>
+<script src="/features/extensions/view.js"></script>
 <script src="/features/backup/store.js"></script>
 <script src="/features/backup/view.js"></script>
+<script src="/features/new-session/store.js"></script>
+<script src="/features/new-session/view.js"></script>
 <script src="/features/model-tester/store.js"></script>
 <script src="/features/model-tester/view.js"></script>
 <script src="/settings.js"></script>
@@ -1541,8 +1525,6 @@
 <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>