openclacky 0.9.32 → 0.9.34

data/lib/clacky/web/app.js

@@ -274,7 +274,40 @@ const Modal = (() => {
     });
   }
 
-  return { confirm };
+  /** Show a text input prompt dialog. Returns a Promise<string|null>. */
+  function prompt(message, defaultValue = "") {
+    return new Promise(resolve => {
+      $("prompt-modal-message").textContent = message;
+      const input = $("prompt-modal-input");
+      input.value = defaultValue;
+      $("prompt-modal-overlay").style.display = "flex";
+      
+      // Auto-focus and select all text
+      setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 50);
+
+      const cleanup = (result) => {
+        $("prompt-modal-overlay").style.display = "none";
+        $("prompt-modal-ok").onclick = null;
+        $("prompt-modal-cancel").onclick = null;
+        input.onkeydown = null;
+        resolve(result);
+      };
+
+      $("prompt-modal-ok").onclick = () => cleanup(input.value.trim() || null);
+      $("prompt-modal-cancel").onclick = () => cleanup(null);
+      
+      // Support Enter to confirm, Escape to cancel
+      input.onkeydown = (e) => {
+        if (e.key === "Enter") cleanup(input.value.trim() || null);
+        if (e.key === "Escape") cleanup(null);
+      };
+    });
+  }
+
+  return { confirm, prompt };
 })();
 
 // ── Confirmation modal ────────────────────────────────────────────────────
@@ -391,8 +424,13 @@ WS.onEvent(ev => {
         // Update chat title in case session was renamed
         $("chat-title").textContent = current?.name || "";
       }
-      // When a session finishes, refresh tasks and skills
-      if (patch.status === "idle") { Tasks.load(); Skills.load(); }
+      // When a session finishes, refresh tasks and skills, and clear any progress state
+      if (patch.status === "idle") {
+        Tasks.load();
+        Skills.load();
+        // Clear progress state for this session (even if not currently active)
+        Sessions.clearProgress(sid);
+      }
       break;
     }
 
@@ -825,10 +863,8 @@ function _mobileCloseSidebar() {
 }
 
 // ── New session split button [+ ▾] ────────────────────────────────────────
-// btn-new-session-inline: click → create General session immediately
-// btn-new-session-arrow:  click → toggle dropdown
-// dropdown items:         click → create session with chosen agent_profile
-// btn-new-project-entry:  click → open inline new-project form
+// Main button: quick create (like before)
+// Arrow button: show dropdown with "Advanced Options..." to open modal
 if ($("btn-new-session-inline")) {
   $("btn-new-session-inline").addEventListener("click", () => Sessions.create("general"));
 }
@@ -839,21 +875,13 @@ if ($("btn-new-session-arrow")) {
     if (dd) dd.hidden = !dd.hidden;
   });
 }
-// Dropdown item clicks
-document.querySelectorAll("#new-session-dropdown .dropdown-item").forEach(item => {
-  item.addEventListener("click", (e) => {
+// Dropdown item: Advanced Options → open modal
+document.addEventListener("click", (e) => {
+  if (e.target && e.target.id === "btn-new-session-modal") {
     e.stopPropagation();
     $("new-session-dropdown").hidden = true;
-
-    // "New Project" entry — open inline form instead of creating immediately
-    if (item.id === "btn-new-project-entry") {
-      NewProjectForm.open();
-      return;
-    }
-
-    const profile = item.dataset.profile || "general";
-    Sessions.create(profile);
-  });
+    Sessions.openNewSessionModal();
+  }
 });
 // Close dropdown when clicking elsewhere
 document.addEventListener("click", () => {
@@ -863,103 +891,28 @@ document.addEventListener("click", () => {
 
 $("btn-welcome-new").addEventListener("click", () => Sessions.create("general"));
 
-// ── New Project inline form ────────────────────────────────────────────────
-const NewProjectForm = {
-  _defaultDir() {
-    // Generate default dir like ~/clacky_projects/my-project
-    return "~/clacky_projects/my-project";
-  },
-
-  open() {
-    const panel = $("new-project-form");
-    const input = $("new-project-dir");
-    if (!panel) return;
-    // Set default directory value
-    if (input && !input.value) input.value = this._defaultDir();
-    // Animate open
-    panel.hidden = false;
-    requestAnimationFrame(() => panel.classList.add("panel--open"));
-    // Focus input and select the "my-project" part so user can rename easily
-    if (input) {
-      input.focus();
-      const val = input.value;
-      const lastSlash = val.lastIndexOf("/");
-      if (lastSlash >= 0) {
-        input.setSelectionRange(lastSlash + 1, val.length);
-      } else {
-        input.select();
-      }
-    }
-  },
-
-  close() {
-    const panel = $("new-project-form");
-    if (!panel) return;
-    panel.classList.remove("panel--open");
-    setTimeout(() => { panel.hidden = true; }, 200);
-  },
-
-  async submit() {
-    const input = $("new-project-dir");
-    const createBtn = $("btn-new-project-create");
-    const dir = input ? input.value.trim() : "";
-    if (!dir) { input && input.focus(); return; }
-
-    // Derive session name from directory basename
-    const basename = dir.replace(/\/$/, "").split("/").pop() || "Project";
-    const name = basename;
-
-    if (createBtn) createBtn.disabled = true;
-
-    const res = await fetch("/api/sessions", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        name,
-        agent_profile: "coding",
-        source: "manual",
-        working_dir: dir
-      })
-    });
-    const data = await res.json();
-
-    if (createBtn) createBtn.disabled = false;
-
-    if (!res.ok) {
-      const msg = data.error || "unknown error";
-      const friendly = res.status === 409
-        ? I18n.t("sessions.dirNotEmpty")
-        : I18n.t("sessions.createError") + msg;
-      alert(friendly);
-      return;
-    }
-
-    const session = data.session;
-    if (!session) return;
-
-    // Reset form for next use
-    if (input) input.value = "";
-    this.close();
-
-    Sessions.add(session);
-    Sessions.renderList();
-    Sessions.select(session.id);
-    // After subscribe is confirmed, auto-send /new to trigger the new-project skill
-    Sessions.setPendingMessage(session.id, "/new");
-  }
-};
-
-if ($("btn-new-project-cancel")) {
-  $("btn-new-project-cancel").addEventListener("click", () => NewProjectForm.close());
+// ── New Session Modal event handlers ───────────────────────────────────────
+if ($("new-session-modal-close")) {
+  $("new-session-modal-close").addEventListener("click", () => Sessions.closeNewSessionModal());
 }
-if ($("btn-new-project-create")) {
-  $("btn-new-project-create").addEventListener("click", () => NewProjectForm.submit());
+if ($("new-session-cancel")) {
+  $("new-session-cancel").addEventListener("click", () => Sessions.closeNewSessionModal());
 }
-// Enter key inside directory input
-if ($("new-project-dir")) {
-  $("new-project-dir").addEventListener("keydown", (e) => {
-    if (e.key === "Enter") { e.preventDefault(); NewProjectForm.submit(); }
-    if (e.key === "Escape") { e.preventDefault(); NewProjectForm.close(); }
+if ($("new-session-create")) {
+  $("new-session-create").addEventListener("click", () => Sessions.createFromModal());
+}
+// Close modal when clicking overlay
+if ($("new-session-modal")) {
+  $("new-session-modal").addEventListener("click", (e) => {
+    if (e.target.id === "new-session-modal") {
+      Sessions.closeNewSessionModal();
+    }
+  });
+}
+// Browse button (placeholder - actual file browsing would need native integration)
+if ($("new-session-browse-btn")) {
+  $("new-session-browse-btn").addEventListener("click", () => {
+    alert("Tip: Enter your desired path directly, e.g., ~/clacky_workspace/my-project");
   });
 }
 
@@ -1596,3 +1549,168 @@ window.bootAfterBrand = async function() {
     }
   });
 })();
+
+// ── Session Info Bar Model Switcher ───────────────────────────────────────
+(function() {
+  let _isOpen = false;
+
+  // Toggle model dropdown when clicking on model name
+  document.addEventListener("click", async (e) => {
+    const modelEl = e.target.closest("#sib-model");
+    if (modelEl) {
+      e.stopPropagation();
+      const dropdown = $("sib-model-dropdown");
+      if (!dropdown) return;
+
+      if (_isOpen) {
+        dropdown.style.display = "none";
+        _isOpen = false;
+      } else {
+        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.textContent.trim());
+        
+        // Calculate position relative to the model element (fixed positioning)
+        const rect = modelEl.getBoundingClientRect();
+        dropdown.style.left = `${rect.left + rect.width / 2}px`;
+        dropdown.style.top = `${rect.top - 6}px`; // 6px above the element
+        dropdown.style.transform = "translate(-50%, -100%)"; // Center horizontally, move up by its own height
+        
+        dropdown.style.display = "block";
+        _isOpen = true;
+      }
+      return;
+    }
+
+    // Close dropdown when clicking outside
+    if (_isOpen && !e.target.closest(".sib-model-dropdown")) {
+      const dropdown = $("sib-model-dropdown");
+      if (dropdown) dropdown.style.display = "none";
+      _isOpen = false;
+    }
+  });
+
+  // Populate dropdown with available models
+  async function _populateModelDropdown(sessionId, currentModel) {
+    const dropdown = $("sib-model-dropdown");
+    if (!dropdown) return;
+
+    try {
+      console.log("[Model Switcher] Fetching /api/config...");
+      const res = await fetch("/api/config");
+      const data = await res.json();
+      console.log("[Model Switcher] Received data:", data);
+      const models = data.models || [];
+      console.log("[Model Switcher] Models count:", models.length);
+
+      if (models.length === 0) {
+        dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-text-secondary);font-size:11px;">No models configured</div>';
+        return;
+      }
+
+      dropdown.innerHTML = "";
+
+      models.forEach(m => {
+        console.log("[Model Switcher] Adding model:", m.model, "current:", currentModel);
+        const opt = document.createElement("div");
+        opt.className = "sib-model-option";
+        if (m.model === currentModel) opt.classList.add("current");
+
+        const modelName = document.createElement("span");
+        modelName.textContent = m.model;
+        opt.appendChild(modelName);
+
+        if (m.type === "default" || m.type === "lite") {
+          const badge = document.createElement("span");
+          badge.className = `model-badge ${m.type}`;
+          badge.textContent = m.type;
+          opt.appendChild(badge);
+        }
+
+        opt.addEventListener("click", () => _switchModel(sessionId, m.model));
+        dropdown.appendChild(opt);
+      });
+      console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
+    } catch (e) {
+      console.error("Failed to load models:", e);
+      dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-error);font-size:11px;">Error loading models</div>';
+    }
+  }
+
+  // Switch session model via API
+  async function _switchModel(sessionId, newModel) {
+    const dropdown = $("sib-model-dropdown");
+    if (dropdown) {
+      dropdown.style.display = "none";
+      _isOpen = false;
+    }
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/model`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model: newModel })
+      });
+      
+      const data = await res.json();
+      
+      if (!res.ok) {
+        throw new Error(data.error || "Unknown error");
+      }
+      
+      // Update UI optimistically (will be confirmed by session_update broadcast)
+      const sibModel = $("sib-model");
+      if (sibModel) sibModel.textContent = newModel;
+      
+      console.log(`Switched session ${sessionId} to model ${newModel}`);
+    } catch (e) {
+      console.error("Failed to switch model:", e);
+      alert("Failed to switch model: " + e.message);
+    }
+  }
+})();
+
+// ── Session Info Bar Working Directory Switcher ───────────────────────────
+(function() {
+  // Handle click on working directory
+  document.addEventListener("click", async (e) => {
+    const dirEl = e.target.closest("#sib-dir");
+    if (dirEl) {
+      e.stopPropagation();
+      const sessionId = dirEl.dataset.sessionId;
+      const currentDir = dirEl.title.replace(" (click to change)", "");
+      
+      const newDir = await Modal.prompt("Change working directory:", currentDir);
+      if (newDir && newDir !== currentDir) {
+        _changeWorkingDirectory(sessionId, newDir);
+      }
+    }
+  });
+
+  // Change working directory via backend API
+  async function _changeWorkingDirectory(sessionId, newDir) {
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/working_dir`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ working_dir: newDir })
+      });
+      
+      const data = await res.json();
+      
+      if (!res.ok) {
+        throw new Error(data.error || "Unknown error");
+      }
+      
+      // Update UI optimistically (will be confirmed by session_update broadcast)
+      const sibDir = $("sib-dir");
+      if (sibDir) {
+        sibDir.textContent = newDir;
+        sibDir.title = newDir + " (click to change)";
+      }
+      
+      console.log(`Changed session ${sessionId} directory to ${newDir}`);
+    } catch (e) {
+      console.error("Failed to change directory:", e);
+      alert("Failed to change directory: " + e.message);
+    }
+  }
+})();

data/lib/clacky/web/i18n.js

@@ -43,6 +43,7 @@ const I18n = (() => {
       "chat.interrupted":    "Interrupted.",
       "chat.feedback_hint":  "Or type your own answer below ↓",
       "chat.newMessageHint": "New messages ↓",
+      "chat.retry":          "Retry",
 
       // ── Session list ──
       "sessions.empty":         "No sessions yet",
@@ -58,6 +59,11 @@ const I18n = (() => {
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "Setup",
       "sessions.newSession":    "+ New Session",
+      "sessions.actions.pin":   "Pin",
+      "sessions.actions.unpin": "Unpin",
+      "sessions.actions.rename": "Rename",
+      "sessions.actions.delete": "Delete",
+      "sessions.newSessionAdvanced": "More Options",
       "sessions.loadMore":      "Load more sessions",
       "sessions.loadingMore":   "Loading…",
       "sessions.search.placeholder": "Search sessions…",
@@ -71,6 +77,21 @@ const I18n = (() => {
       // ── Modal ──
       "modal.yes": "Yes",
       "modal.no":  "No",
+      "modal.ok": "OK",
+      "modal.cancel": "Cancel",
+
+      // ── New Session Modal ──
+      "sessions.modal.title":       "Create New Session",
+      "sessions.modal.agent":       "Agent",
+      "sessions.modal.agent.general": "General",
+      "sessions.modal.agent.coding":  "Coding",
+      "sessions.modal.name":         "Session Name",
+      "sessions.modal.name.placeholder": "Leave empty to auto-generate",
+      "sessions.modal.model":        "Model",
+      "sessions.modal.directory":    "Working Directory",
+      "sessions.modal.directory.placeholder": "~/clacky_workspace",
+      "sessions.modal.initProject":  "Initialize full-stack project (/new)",
+      "sessions.modal.create":       "Create Session",
 
       // ── Offline banner ──
       "offline.banner":           "Server disconnected — reconnecting…",
@@ -381,6 +402,7 @@ const I18n = (() => {
       "chat.interrupted":    "已中断。",
       "chat.feedback_hint":  "或在下方输入框自由作答 ↓",
       "chat.newMessageHint": "有新消息 ↓",
+      "chat.retry":          "重试",
 
       // ── Session list ──
       "sessions.empty":         "暂无对话",
@@ -396,7 +418,12 @@ const I18n = (() => {
       "sessions.badge.coding":  "Coding",
       "sessions.badge.setup":   "配置",
       "sessions.newSession":    "+ 新会话",
+      "sessions.newSessionAdvanced": "更多选项",
       "sessions.loadMore":      "加载更多会话",
+      "sessions.actions.pin":   "置顶",
+      "sessions.actions.unpin": "取消置顶",
+      "sessions.actions.rename": "重命名",
+      "sessions.actions.delete": "删除",
       "sessions.loadingMore":   "加载中…",
       "sessions.search.placeholder": "搜索会话…",
       "sessions.search.typeAll":     "全部类型",
@@ -409,6 +436,21 @@ const I18n = (() => {
       // ── Modal ──
       "modal.yes": "确认",
       "modal.no":  "取消",
+      "modal.ok": "确定",
+      "modal.cancel": "取消",
+
+      // ── New Session Modal ──
+      "sessions.modal.title":       "创建新会话",
+      "sessions.modal.agent":       "助手类型",
+      "sessions.modal.agent.general": "通用",
+      "sessions.modal.agent.coding":  "编程",
+      "sessions.modal.name":         "会话名称",
+      "sessions.modal.name.placeholder": "留空自动生成",
+      "sessions.modal.model":        "模型",
+      "sessions.modal.directory":    "工作目录",
+      "sessions.modal.directory.placeholder": "~/clacky_workspace",
+      "sessions.modal.initProject":  "初始化全栈项目 (/new)",
+      "sessions.modal.create":       "创建会话",
 
       // ── Offline banner ──
       "offline.banner":           "服务已断开，正在重连…",

data/lib/clacky/web/index.html

@@ -68,13 +68,15 @@
             </button>
             <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>
+              <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" data-profile="general">✦ General</div>
-                <div class="dropdown-item" data-profile="coding">👨‍💻 Coding</div>
-                <div class="dropdown-divider"></div>
-                <div class="dropdown-item" id="btn-new-project-entry">🚀 New Project</div>
+                <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>
           </div>
@@ -109,23 +111,6 @@
           </div>
         </div>
 
-        <!-- New Project inline form (hidden by default, toggled by "New Project" dropdown item) -->
-        <div id="new-project-form" class="new-project-panel" hidden>
-          <div class="new-project-card">
-            <div class="new-project-title">🚀 New Project</div>
-            <div class="new-project-field">
-              <label class="new-project-label" for="new-project-dir">Working Directory</label>
-              <input id="new-project-dir" type="text" class="new-project-input"
-                     placeholder="~/clacky_projects/my-project"
-                     autocomplete="off" spellcheck="false" />
-            </div>
-            <div class="new-project-actions">
-              <button id="btn-new-project-cancel" class="btn-new-project-cancel">Cancel</button>
-              <button id="btn-new-project-create" class="btn-new-project-create">Create →</button>
-            </div>
-          </div>
-        </div>
-
         <!-- Unified session list (all sources + profiles, newest first) -->
         <div id="session-list"></div>
         <!-- Load more button rendered dynamically by Sessions.renderList() -->
@@ -271,20 +256,26 @@
       </div>
       <!-- Session info bar — mirrors CLI bottom status bar -->
       <div id="session-info-bar" style="display:none">
-        <!-- Always visible: status | id | model | cost -->
+        <!-- Order: status | id | dir | model | mode | tasks | cost -->
+        <!-- Pattern: element + separator-after-element (except last) -->
         <span id="sib-status"></span>
-        <span class="sib-sep sib-sep-before-id">│</span>
+        <span class="sib-sep sib-sep-after-status">│</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>
-        <span id="sib-cost"></span>
-        <!-- Detail fields: hidden by default, revealed on hover -->
+        <span class="sib-sep sib-sep-after-id">│</span>
+        <span id="sib-dir" title="Click to change directory"></span>
+        <span class="sib-sep sib-sep-after-dir">│</span>
+        <span id="sib-model-wrap">
+          <span id="sib-model" class="sib-model-clickable" title="Click to switch model"></span>
+          <div id="sib-model-dropdown" class="sib-model-dropdown" style="display:none"></div>
+        </span>
+        <span class="sib-sep sib-sep-after-model">│</span>
+        <!-- Detail fields: mode, tasks, cost -->
         <span class="sib-detail">
-          <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 sib-sep-before-tasks">│</span>
+          <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>
       </div>
 
@@ -718,6 +709,57 @@
   </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>
+      <button id="new-session-modal-close" class="modal-close-btn" title="Close">×</button>
+    </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>
+        <input id="new-session-directory" type="text" class="modal-input" 
+               data-i18n-placeholder="sessions.modal.directory.placeholder"
+               placeholder="~/workspace/my-project">
+      </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-create" class="btn-primary" data-i18n="sessions.modal.create">Create Session</button>
+      <button id="new-session-cancel" class="btn-secondary" data-i18n="modal.cancel">Cancel</button>
+    </div>
+  </div>
+</div>
+
 <!-- ── CONFIRMATION MODAL ────────────────────────────────────────────────── -->
 <div id="modal-overlay" class="modal-overlay" style="display:none">
   <div class="modal-box sm">
@@ -729,6 +771,18 @@
   </div>
 </div>
 
+<!-- Prompt modal for text input -->
+<div id="prompt-modal-overlay" class="modal-overlay" style="display:none">
+  <div class="modal-box sm">
+    <div id="prompt-modal-message" style="font-size:14px;line-height:1.6;margin-bottom:12px"></div>
+    <input type="text" id="prompt-modal-input" class="prompt-modal-input" autocomplete="off" spellcheck="false">
+    <div class="modal-actions">
+      <button id="prompt-modal-ok" class="btn-primary" data-i18n="modal.ok">OK</button>
+      <button id="prompt-modal-cancel" class="btn-secondary" data-i18n="modal.cancel">Cancel</button>
+    </div>
+  </div>
+</div>
+
 
 
 <script src="/marked.min.js"></script>