openclacky 0.9.7 → 0.9.9

data/lib/clacky/web/index.html

@@ -27,7 +27,7 @@
           <path d="M9 3v18"/>
         </svg>
       </button>
-      <div id="header-brand">
+      <div id="header-brand" style="cursor:pointer" onclick="Router.navigate('chat')">
         <img class="header-logo-img" id="header-logo-img" src="" alt="" style="display:none">
         <span class="header-logo-divider"></span>
         <span class="header-logo" id="header-logo">{{BRAND_NAME}}</span>
@@ -42,6 +42,9 @@
     </div>
   </header>
 
+  <!-- ── Sidebar overlay (mobile only) ───────────────────────────────────── -->
+  <div id="sidebar-overlay"></div>
+
   <!-- ── CONTENT ROW (Sidebar + Main) ────────────────────────────────────── -->
   <div id="content-row">
 
@@ -51,16 +54,37 @@
     <div id="sidebar-list">
       <!-- Chat Group -->
       <div id="chat-section">
+        <!-- Header: "Sessions" label + [+ ▾] split button -->
         <div class="sidebar-divider">
-          <span data-i18n="sidebar.chat">Chat</span>
-          <button id="btn-new-session-inline" class="btn-new-inline" title="New Session">
-            <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="M5 12h14"/>
-              <path d="M12 5v14"/>
-            </svg>
-          </button>
+          <span data-i18n="sidebar.chat">Sessions</span>
+          <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="Choose agent">▾</button>
+            <!-- Dropdown -->
+            <div id="new-session-dropdown" class="new-session-dropdown" hidden>
+              <div class="dropdown-item" data-profile="general">✦ General</div>
+              <div class="dropdown-item" data-profile="coding">👨‍💻 Coding</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Source tabs: Manual / Scheduled / Channel -->
+        <div id="session-tabs" class="session-tabs">
+          <button class="session-tab active" data-tab="manual"    data-i18n="sessions.tab.manual">Manual</button>
+          <button class="session-tab"        data-tab="cron"      data-i18n="sessions.tab.scheduled">Scheduled</button>
+          <button class="session-tab"        data-tab="channel"   data-i18n="sessions.tab.channel">Channel</button>
+          <button class="session-tab"        data-tab="setup"     data-i18n="sessions.tab.setup" id="tab-setup" style="display:none">Setup</button>
         </div>
+
+        <!-- General sessions list (filtered by active tab) -->
         <div id="session-list"></div>
+
+        <!-- Coding agent fixed section -->
+        <div id="coding-section" style="display:none">
+          <div class="coding-section-divider">👨‍💻 Coding</div>
+          <div id="coding-session-list"></div>
+        </div>
+        <!-- Load more buttons are rendered dynamically inside each section by Sessions.renderList() -->
       </div>
       
       <!-- Config Group -->
@@ -161,6 +185,12 @@
     <!-- Chat panel -->
     <div id="chat-panel" style="display:none">
       <header id="chat-header">
+        <!-- Mobile-only back button: shown inside a session -->
+        <button id="btn-back-mobile" class="chat-back-btn" title="Back">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 18l-6-6 6-6"/>
+          </svg>
+        </button>
         <span id="chat-title">Session</span>
         <span id="chat-status" class="status-idle">idle</span>
         <button id="btn-delete-session" class="btn-delete-session" title="Delete session">
@@ -174,7 +204,7 @@
       <div id="session-info-bar" style="display:none">
         <!-- Always visible: status | id | model | cost -->
         <span id="sib-status"></span>
-        <span class="sib-sep">│</span>
+        <span class="sib-sep sib-sep-before-id">│</span>
         <span id="sib-id"></span>
         <span id="sib-model-wrap"><span class="sib-sep">│</span><span id="sib-model"></span></span>
         <span class="sib-sep">│</span>
@@ -184,7 +214,7 @@
           <span class="sib-sep">│</span>
           <span id="sib-dir"></span>
           <span id="sib-mode-wrap"><span class="sib-sep">│</span><span id="sib-mode"></span></span>
-          <span class="sib-sep">│</span>
+          <span class="sib-sep sib-sep-before-tasks">│</span>
           <span id="sib-tasks"></span>
         </span>
       </div>
@@ -342,6 +372,23 @@
           </div>
         </section>
 
+        <!-- Browser section -->
+        <section class="settings-section">
+          <div class="settings-section-title">
+            <span data-i18n="settings.browser.title">Browser</span>
+          </div>
+          <div class="settings-personalize">
+            <p class="settings-personalize-desc" id="browser-status-desc" data-i18n="settings.browser.desc">Connect your browser to enable browser automation.</p>
+            <div class="settings-browser-actions">
+              <label class="toggle-switch" id="browser-toggle-wrap" style="display:none">
+                <input type="checkbox" id="browser-toggle-input">
+                <span class="toggle-slider"></span>
+              </label>
+              <button id="btn-browser-setup" class="btn-settings-action" data-i18n="settings.browser.btn">🌐 Configure Browser</button>
+            </div>
+          </div>
+        </section>
+
         <!-- Language section -->
         <section class="settings-section" id="language-section">
           <div class="settings-section-title">
@@ -375,10 +422,20 @@
                   <span class="brand-status-label" data-i18n="settings.brand.label.expires">Expires</span>
                   <span class="brand-status-value" id="brand-status-expires">—</span>
                 </div>
+                <div class="brand-status-row" id="brand-status-homepage-row" style="display:none">
+                  <span class="brand-status-label" data-i18n="settings.brand.label.homepage">Homepage</span>
+                  <a id="brand-status-homepage" class="brand-status-value brand-status-link" href="#" target="_blank" rel="noopener noreferrer">—</a>
+                </div>
                 <div class="brand-status-actions">
                   <button id="btn-rebind-license" class="btn-settings-action" data-i18n="settings.brand.btn.change">Change License Key</button>
                 </div>
               </div>
+              <!-- Support contact (shown when support_contact is available) -->
+              <div id="brand-support-contact" class="brand-support-contact" style="display:none">
+                <span class="brand-support-contact-label" data-i18n="settings.brand.label.supportContact">Support</span>
+                <a id="brand-support-contact-link" class="brand-support-contact-value" href="#" target="_blank" rel="noopener noreferrer"></a>
+              </div>
+
               <!-- Support QR code (shown when support_qr_url is available) -->
               <div id="brand-support-qr" class="brand-support-qr" style="display:none">
                 <button class="brand-support-qr-btn" id="brand-support-qr-btn" title="Click to enlarge" aria-label="View QR code larger">

data/lib/clacky/web/onboard.js

@@ -312,13 +312,14 @@ const Onboard = (() => {
       const res = await fetch("/api/sessions", {
         method:  "POST",
         headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name: "✨ Onboard" })
+        body:    JSON.stringify({ name: "✨ Onboard", source: "setup" })
       });
       const data    = await res.json();
       const session = data.session;
       if (!session) throw new Error("No session returned");
 
       Sessions.add(session);
+      Sessions.setTab("setup");
       Sessions.renderList();
       Sessions.setPendingMessage(session.id, `/onboard lang:${_selectedLang}`);
       Sessions.select(session.id);

data/lib/clacky/web/sessions.js

@@ -20,6 +20,10 @@ const Sessions = (() => {
   const _historyState      = {};  // { [session_id]: { hasMore, oldestCreatedAt, loading, loaded } }
   const _renderedCreatedAt = {};  // { [session_id]: Set<number> } — dedup by created_at
   let   _activeId          = null;
+  let   _activeTab         = "manual";  // "manual" | "cron" | "channel" | "setup"
+  // Per-source pagination state (manual/cron/channel/setup for general tabs; coding for coding section)
+  const _hasMoreBySource   = { manual: false, cron: false, channel: false, setup: false, coding: false };
+  const _loadingMoreSource = { manual: false, cron: false, channel: false, setup: false, coding: false };
   let   _pendingRunTaskId  = null;  // session_id waiting to send "run_task" after subscribe
   let   _pendingMessage    = null;  // { session_id, content } — slash command to send after subscribe
 
@@ -246,8 +250,20 @@ const Sessions = (() => {
         if (Array.isArray(ev.images) && ev.images.length > 0) {
           bubbleHtml += ev.images.map(src => {
             if (src && src.startsWith("pdf:")) {
-              // PDF placeholder — render a badge instead of an image
-              return `<span class="msg-pdf-badge">📄 PDF</span>`;
+              // File badge — extract filename and extension from sentinel "pdf:<name>"
+              const fname = src.slice(4);
+              const ext   = (fname.split(".").pop() || "file").toUpperCase();
+              const icon  = ext === "PDF" ? "📄" : ext === "ZIP" ? "🗜️" :
+                            (ext === "DOC" || ext === "DOCX") ? "📝" :
+                            (ext === "XLS" || ext === "XLSX") ? "📊" :
+                            (ext === "PPT" || ext === "PPTX") ? "📋" : "📎";
+              return `<span class="msg-pdf-badge">` +
+                `<span class="msg-pdf-badge-icon">${icon}</span>` +
+                `<span class="msg-pdf-badge-info">` +
+                  `<span class="msg-pdf-badge-name">${escapeHtml(fname)}</span>` +
+                  `<span class="msg-pdf-badge-type">${escapeHtml(ext)}</span>` +
+                `</span>` +
+              `</span>`;
             }
             return `<img src="${escapeHtml(src)}" alt="image" class="msg-image-thumb">`;
           }).join("");
@@ -390,6 +406,83 @@ const Sessions = (() => {
     }
   }
 
+  // ── Private helpers ───────────────────────────────────────────────────
+
+  // Return a human-readable relative label for a session with no name.
+  // e.g. "Today 14:14" / "Yesterday" / "Mar 21"
+  function _relativeTime(createdAt) {
+    if (!createdAt) return I18n.t("sessions.untitled") || "Untitled";
+    const d   = new Date(createdAt);
+    const now = new Date();
+    const diffDays = Math.floor((now - d) / 86400000);
+    const pad = n => String(n).padStart(2, "0");
+    const hhmm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    if (diffDays === 0) return `Today ${hhmm}`;
+    if (diffDays === 1) return `Yesterday ${hhmm}`;
+    return `${d.getMonth() + 1}/${d.getDate()} ${hhmm}`;
+  }
+
+  // Build a load-more button for a given source tab.
+  function _makeLoadMoreBtn(source) {
+    const btn = document.createElement("button");
+    btn.className   = "btn-load-more-sessions";
+    btn.disabled    = _loadingMoreSource[source];
+    btn.textContent = _loadingMoreSource[source]
+      ? I18n.t("sessions.loadingMore")
+      : I18n.t("sessions.loadMore");
+    btn.onclick = () => Sessions.loadMoreSessions(source);
+    return btn;
+  }
+
+  // ── Private render helper ─────────────────────────────────────────────
+  //
+  // Build and append a single session-item <div> into `container`.
+  // Used by both the general list and the coding section.
+  function _renderSessionItem(container, s) {
+    const el = document.createElement("div");
+    el.className = "session-item" + (s.id === _activeId ? " active" : "");
+    const displayName = s.name || _relativeTime(s.created_at);
+    const metaText    = I18n.t("sessions.meta", { tasks: s.total_tasks || 0, cost: (s.total_cost || 0).toFixed(4) });
+    el.innerHTML = `
+      <span class="session-dot dot-${s.status || "idle"}"></span>
+      <div class="session-body">
+        <div class="session-name">${escapeHtml(displayName)}</div>
+        <div class="session-meta">${metaText}</div>
+      </div>
+      <button class="session-delete-btn" title="${I18n.t("sessions.deleteTitle")}">×</button>`;
+
+    // Use a click timer to distinguish single-click (select) from double-click (rename).
+    let clickTimer = null;
+    el.onclick = () => {
+      if (clickTimer) {
+        clearTimeout(clickTimer);
+        clickTimer = null;
+        return;
+      }
+      clickTimer = setTimeout(() => {
+        clickTimer = null;
+        Sessions.select(s.id);
+      }, 200);
+    };
+
+    // Delete button
+    const deleteBtn = el.querySelector(".session-delete-btn");
+    deleteBtn.onclick = (e) => {
+      e.stopPropagation();
+      Sessions.deleteSession(s.id);
+    };
+
+    // Double-click to rename
+    const nameDiv = el.querySelector(".session-name");
+    nameDiv.ondblclick = (e) => {
+      e.stopPropagation();
+      if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
+      Sessions._startRename(s.id, nameDiv, s.name);
+    };
+
+    container.appendChild(el);
+  }
+
   // ── Public API ─────────────────────────────────────────────────────────
   return {
     get all()      { return _sessions; },
@@ -399,9 +492,13 @@ const Sessions = (() => {
     // ── List management ───────────────────────────────────────────────────
 
     /** Populate list from initial session_list WS event (connect only). */
-    setAll(list) {
+    setAll(list, hasMoreBySource = {}) {
       _sessions.length = 0;
       _sessions.push(...list);
+      // Accept either new per-source map or legacy scalar boolean
+      if (typeof hasMoreBySource === "object" && hasMoreBySource !== null) {
+        Object.assign(_hasMoreBySource, hasMoreBySource);
+      }
     },
 
     /** Insert a newly created session into the local list. */
@@ -423,6 +520,53 @@ const Sessions = (() => {
       if (idx !== -1) _sessions.splice(idx, 1);
     },
 
+    /** Load older sessions for a specific bucket.
+     *  bucket: "manual" | "cron" | "channel" | "setup"  → uses ?source=<bucket>
+     *          "coding"                                  → uses ?profile=coding
+     */
+    async loadMoreSessions(source) {
+      if (_loadingMoreSource[source] || !_hasMoreBySource[source]) return;
+      _loadingMoreSource[source] = true;
+      Sessions.renderList();  // re-render to show loading state on button
+
+      try {
+        // Cursor: oldest created_at among sessions in this bucket
+        const bucketSessions = source === "coding"
+          ? _sessions.filter(s => s.agent_profile === "coding")
+          : _sessions.filter(s => s.source === source);
+
+        const oldest = bucketSessions.reduce((min, s) => {
+          if (!s.created_at) return min;
+          return (!min || s.created_at < min) ? s.created_at : min;
+        }, null);
+
+        const param = source === "coding" ? "profile=coding" : `source=${encodeURIComponent(source)}&profile=general`;
+        let url = `/api/sessions?limit=10&${param}`;
+        if (oldest) url += `&before=${encodeURIComponent(oldest)}`;
+
+        const res  = await fetch(url);
+        if (!res.ok) return;
+        const data = await res.json();
+
+        let added = 0;
+        (data.sessions || []).forEach(s => {
+          if (!_sessions.find(x => x.id === s.id)) {
+            _sessions.push(s);
+            added++;
+          }
+        });
+        _hasMoreBySource[source] = !!data.has_more;
+
+        if (added > 0) Sessions.renderList();
+        else Sessions.renderList();  // update button state even with no new items
+      } catch (e) {
+        console.error("loadMoreSessions error:", e);
+      } finally {
+        _loadingMoreSource[source] = false;
+        Sessions.renderList();
+      }
+    },
+
     /** Delete a session via API (called from UI delete button). */
     async deleteSession(id) {
       const s = _sessions.find(s => s.id === id);
@@ -500,70 +644,75 @@ const Sessions = (() => {
 
     // ── Rendering ─────────────────────────────────────────────────────────
 
-    renderList() {
-      const list = $("session-list");
-      list.innerHTML = "";
-
-      // Show a ghost placeholder when there are no sessions yet (e.g. during onboarding)
-      if (_sessions.length === 0) {
-        list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
-        return;
-      }
+    setTab(tab) {
+      _activeTab = tab;
+      // Sync tab button active state
+      document.querySelectorAll(".session-tab").forEach(btn => {
+        btn.classList.toggle("active", btn.dataset.tab === tab);
+      });
+      Sessions.renderList();
+    },
 
-      // Split into manual sessions and scheduled (⏰) sessions, each sorted
-      // newest-first by created_at (falling back to array order).
+    renderList() {
+      // Sort helper: newest-first by created_at
       const byTime = (a, b) => {
         const ta = a.created_at ? new Date(a.created_at) : 0;
         const tb = b.created_at ? new Date(b.created_at) : 0;
         return tb - ta;
       };
-      const manual    = _sessions.filter(s => !s.name.startsWith("⏰")).sort(byTime);
-      const scheduled = _sessions.filter(s =>  s.name.startsWith("⏰")).sort(byTime);
 
-      [...manual, ...scheduled].forEach(s => {
-        const el = document.createElement("div");
-        el.className = "session-item" + (s.id === _activeId ? " active" : "");
-        el.innerHTML = `
-          <div class="session-name">
-            <span class="session-dot dot-${s.status || "idle"}"></span>${escapeHtml(s.name)}
-          </div>
-          <div class="session-meta">${I18n.t("sessions.meta", { tasks: s.total_tasks || 0, cost: (s.total_cost || 0).toFixed(4) })}</div>
-          <button class="session-delete-btn" title="${I18n.t("sessions.deleteTitle")}">×</button>`;
-        // Use a click timer to distinguish single-click (select) from double-click (rename).
-        // Without this, the first click of a dblclick fires select() which re-renders the
-        // list and destroys the nameDiv DOM node before dblclick can fire _startRename.
-        let clickTimer = null;
-        el.onclick = () => {
-          if (clickTimer) {
-            // Second click arrived quickly — this is a dblclick, cancel the pending select
-            clearTimeout(clickTimer);
-            clickTimer = null;
-            return;
-          }
-          clickTimer = setTimeout(() => {
-            clickTimer = null;
-            Sessions.select(s.id);
-          }, 200); // 200 ms threshold to distinguish single-click from double-click
-        };
-
-        // Delete button: stop propagation so it doesn't trigger session select
-        const deleteBtn = el.querySelector(".session-delete-btn");
-        deleteBtn.onclick = (e) => {
-          e.stopPropagation();
-          Sessions.deleteSession(s.id);
-        };
-
-        // Double-click to rename: cancel any pending single-click select, then start rename
-        const nameDiv = el.querySelector(".session-name");
-        nameDiv.ondblclick = (e) => {
-          e.stopPropagation();
-          // Cancel the pending select() that was scheduled by the first click of this dblclick
-          if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
-          Sessions._startRename(s.id, nameDiv, s.name);
-        };
-
-        list.appendChild(el);
-      });
+      // ── Classify ──────────────────────────────────────────────────────────
+      // Two orthogonal dimensions: agent_profile (general vs coding) and source (tab).
+      // Coding section: profile === "coding", shown separately at bottom — no source filter.
+      // General area tabs: all non-coding sessions, filtered by source per tab.
+      const codingSessions  = _sessions.filter(s => s.agent_profile === "coding").sort(byTime);
+      const generalSessions = _sessions.filter(s => s.agent_profile !== "coding").sort(byTime);
+
+      // ── Tab visibility ────────────────────────────────────────────────────
+      const hasCron    = generalSessions.some(s => s.source === "cron")    || _hasMoreBySource["cron"];
+      const hasChannel = generalSessions.some(s => s.source === "channel") || _hasMoreBySource["channel"];
+      const hasSetup   = generalSessions.some(s => s.source === "setup")   || _hasMoreBySource["setup"];
+      const hasNonManual = hasCron || hasChannel || hasSetup;
+
+      const tabBar = $("session-tabs");
+      if (tabBar) tabBar.style.display = hasNonManual ? "" : "none";
+
+      const setupTabBtn = $("tab-setup");
+      if (setupTabBtn) setupTabBtn.style.display = hasSetup ? "" : "none";
+
+      // Use active tab directly — no fallback to manual when content is empty.
+      // Tabs may show an empty state (e.g. cron tab before any cron sessions exist).
+      const effectiveTab = _activeTab;
+
+      const tabSessions = generalSessions.filter(s => (s.source || "manual") === effectiveTab);
+
+      // ── Render general (tab-filtered) sessions ──────────────────────────
+      const list = $("session-list");
+      list.innerHTML = "";
+      if (tabSessions.length === 0) {
+        list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
+      } else {
+        tabSessions.forEach(s => _renderSessionItem(list, s));
+      }
+      // Per-tab load-more button (inside the tab's section)
+      if (_hasMoreBySource[effectiveTab]) {
+        list.appendChild(_makeLoadMoreBtn(effectiveTab));
+      }
+
+      // ── Render coding sessions (fixed section) ───────────────────────────
+      const codingSection = $("coding-section");
+      const codingList    = $("coding-session-list");
+      if (codingSessions.length === 0) {
+        codingSection.style.display = "none";
+      } else {
+        codingSection.style.display = "";
+        codingList.innerHTML = "";
+        codingSessions.forEach(s => _renderSessionItem(codingList, s));
+        // Per-section load-more button
+        if (_hasMoreBySource["coding"]) {
+          codingList.appendChild(_makeLoadMoreBtn("coding"));
+        }
+      }
     },
 
     /** Begin inline rename: replace session-name content with an <input>. */
@@ -571,10 +720,7 @@ const Sessions = (() => {
       // Prevent starting a second rename while one is already active
       if (nameDiv.querySelector("input")) return;
 
-      const dot = nameDiv.querySelector(".session-dot");
-      const dotHtml = dot ? dot.outerHTML : "";
-
-      // Replace entire content with just the input (no dot — keeps layout clean)
+      // Replace name span content with input (dot lives in session-row, not here)
       nameDiv.innerHTML = "";
       nameDiv.classList.add("renaming"); // disable overflow:hidden while editing
       const input = document.createElement("input");
@@ -597,7 +743,7 @@ const Sessions = (() => {
 
         // Restore original display immediately
         nameDiv.classList.remove("renaming");
-        nameDiv.innerHTML = dotHtml + escapeHtml(currentName);
+        nameDiv.textContent = currentName;
 
         if (!newName || newName === currentName) return;
 
@@ -748,8 +894,18 @@ const Sessions = (() => {
       }
 
       // Cost: 5 decimal places (matches CLI precision)
-      const cost    = ev.cost || 0;
-      const costStr = `$${cost.toFixed(5)}`;
+      // :api    => "$0.00123"   (exact)
+      // :price  => "~$0.00123" (estimated from pricing table)
+      // :default => "N/A"      (model unknown)
+      const cost = ev.cost || 0;
+      let costStr;
+      if (ev.cost_source === "default") {
+        costStr = "N/A";
+      } else if (ev.cost_source === "price") {
+        costStr = `~$${cost.toFixed(5)}`;
+      } else {
+        costStr = `$${cost.toFixed(5)}`;
+      }
 
       // Always-visible: label, delta, cache indicator, cost
       // Detail fields (Input/Output/Total) are hidden until hover
@@ -806,6 +962,32 @@ const Sessions = (() => {
       messages.scrollTop = messages.scrollHeight;
     },
 
+    // Two-phase idle compression status — renders as a single line that updates in-place.
+    // phase "start": create element with spinner; phase "end": update same element with result.
+    updateIdleStatus(phase, text) {
+      const messages = $("messages");
+      if (phase === "start") {
+        Sessions.collapseToolGroup();
+        const el = document.createElement("div");
+        el.className   = "msg msg-info msg-idle-status";
+        el.textContent = "⟳ " + text;
+        messages.appendChild(el);
+        Sessions._idleStatusEl = el;
+      } else {
+        // phase "end" — update existing element or create a new one if start was missed
+        if (Sessions._idleStatusEl) {
+          Sessions._idleStatusEl.textContent = "· " + text;
+          Sessions._idleStatusEl.classList.add("msg-idle-done");
+          Sessions._idleStatusEl = null;
+        } else {
+          Sessions.appendInfo("· " + text);
+        }
+      }
+      messages.scrollTop = messages.scrollHeight;
+    },
+
+    _idleStatusEl: null,
+
     showProgress(text) {
       Sessions.clearProgress();
       const messages = $("messages");
@@ -829,7 +1011,7 @@ const Sessions = (() => {
     // ── Create ─────────────────────────────────────────────────────────────
 
     /** Create a new session and navigate to it. */
-    async create() {
+    async create(agentProfile = "general") {
       const maxN = _sessions.reduce((max, s) => {
         const m = s.name.match(/^Session (\d+)$/);
         return m ? Math.max(max, parseInt(m[1], 10)) : max;
@@ -839,7 +1021,7 @@ const Sessions = (() => {
       const res  = await fetch("/api/sessions", {
         method:  "POST",
         headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name })
+        body:    JSON.stringify({ name, agent_profile: agentProfile, source: "manual" })
       });
       const data = await res.json();
       if (!res.ok) { alert(I18n.t("sessions.createError") + (data.error || "unknown")); return; }
@@ -848,6 +1030,10 @@ const Sessions = (() => {
       if (!session) return;
 
       Sessions.add(session);
+
+      // If a coding session was created, make sure the coding section is visible.
+      // If a general session was created, switch to the manual tab to show it.
+      if (agentProfile === "general") Sessions.setTab("manual");
       Sessions.renderList();
       Sessions.select(session.id);
     },