jinzd-ai-cli 0.1.89 → 0.1.91

package/dist/{chunk-3RRSDUVU.js → chunk-CXWWAWE7.js}

@@ -16,7 +16,7 @@ import {
   SUBAGENT_MAX_ROUNDS_LIMIT,
   VERSION,
   runTestsTool
-} from "./chunk-6T7KHDLM.js";
+} from "./chunk-KYHUMNQO.js";
 
 // src/config/config-manager.ts
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";

package/dist/{chunk-6T7KHDLM.js → chunk-KYHUMNQO.js}

@@ -1,10 +1,4 @@
 #!/usr/bin/env node
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
 
 // src/tools/builtin/run-tests.ts
 import { execSync } from "child_process";
@@ -14,7 +8,7 @@ import { platform } from "os";
 import chalk from "chalk";
 
 // src/core/constants.ts
-var VERSION = "0.1.89";
+var VERSION = "0.1.91";
 var APP_NAME = "ai-cli";
 var CONFIG_DIR_NAME = ".aicli";
 var CONFIG_FILE_NAME = "config.json";
@@ -447,7 +441,6 @@ var runTestsTool = {
 };
 
 export {
-  __require,
   VERSION,
   APP_NAME,
   CONFIG_DIR_NAME,

package/dist/index.js

@@ -35,7 +35,7 @@ import {
   theme,
   truncateOutput,
   undoStack
-} from "./chunk-3RRSDUVU.js";
+} from "./chunk-CXWWAWE7.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-6T7KHDLM.js";
+} from "./chunk-KYHUMNQO.js";
 
 // src/index.ts
 import { program } from "commander";
@@ -1904,7 +1904,7 @@ ${hint}` : "")
       description: "Run project tests and show structured report",
       usage: "/test [command|filter]",
       async execute(args, _ctx) {
-        const { executeTests } = await import("./run-tests-U3HF44WA.js");
+        const { executeTests } = await import("./run-tests-TLJ53CV5.js");
         const argStr = args.join(" ").trim();
         let testArgs = {};
         if (argStr) {
@@ -5292,7 +5292,7 @@ program.command("web").description("Start Web UI server with browser-based chat
     console.error("Error: Invalid port number. Must be between 1 and 65535.");
     process.exit(1);
   }
-  const { startWebServer } = await import("./server-IDSC72WU.js");
+  const { startWebServer } = await import("./server-QG62ZDQI.js");
   await startWebServer({ port, host: options.host });
 });
 program.command("sessions").description("List recent conversation sessions").action(async () => {

package/dist/{run-tests-U3HF44WA.js → run-tests-TLJ53CV5.js}

@@ -2,7 +2,7 @@
 import {
   executeTests,
   runTestsTool
-} from "./chunk-6T7KHDLM.js";
+} from "./chunk-KYHUMNQO.js";
 export {
   executeTests,
   runTestsTool

package/dist/{server-IDSC72WU.js → server-QG62ZDQI.js}

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-3RRSDUVU.js";
+} from "./chunk-CXWWAWE7.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -34,16 +34,15 @@ import {
   PLAN_MODE_READONLY_TOOLS,
   PLAN_MODE_SYSTEM_ADDON,
   SKILLS_DIR_NAME,
-  VERSION,
-  __require
-} from "./chunk-6T7KHDLM.js";
+  VERSION
+} from "./chunk-KYHUMNQO.js";
 
 // src/web/server.ts
 import express from "express";
 import { createServer } from "http";
 import { WebSocketServer } from "ws";
-import { join as join3, dirname, resolve as resolve2 } from "path";
-import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
+import { join as join3, dirname, resolve as resolve2, relative } from "path";
+import { existsSync as existsSync4, readFileSync as readFileSync4, readdirSync, statSync } from "fs";
 
 // src/web/tool-executor-web.ts
 import { randomUUID } from "crypto";
@@ -64,6 +63,8 @@ var ToolExecutorWeb = class {
   pendingBatchConfirms = /* @__PURE__ */ new Map();
   /** Publicly readable by SessionHandler to check if confirm is active */
   confirming = false;
+  /** Track tool start times for duration calculation */
+  toolStartTimes = /* @__PURE__ */ new Map();
   setRoundInfo(current, total) {
     this.round = current;
     this.totalRounds = total;
@@ -110,6 +111,8 @@ var ToolExecutorWeb = class {
   }
   sendToolCallStart(call) {
     const dangerLevel = getDangerLevel(call.name, call.arguments);
+    const startTime = Date.now();
+    this.toolStartTimes.set(call.id, startTime);
     const msg = {
       type: "tool_call_start",
       callId: call.id,
@@ -117,17 +120,22 @@ var ToolExecutorWeb = class {
       args: call.arguments,
       dangerLevel,
       round: this.round,
-      totalRounds: this.totalRounds
+      totalRounds: this.totalRounds,
+      startTime
     };
     this.send(msg);
   }
   sendToolCallResult(call, content, isError) {
+    const startTime = this.toolStartTimes.get(call.id);
+    const durationMs = startTime ? Date.now() - startTime : void 0;
+    this.toolStartTimes.delete(call.id);
     const msg = {
       type: "tool_call_result",
       callId: call.id,
       toolName: call.name,
       content: content.length > 500 ? content.slice(0, 500) + "..." : content,
-      isError
+      isError,
+      durationMs
     };
     this.send(msg);
   }
@@ -1356,17 +1364,19 @@ async function startWebServer(options = {}) {
   app.get("/api/status", (_req, res) => {
     res.json({
       version: VERSION,
-      providers: availableProviders,
+      providers: availableProviders.map((p) => ({
+        id: p.info.id,
+        displayName: p.info.displayName,
+        models: p.info.models.map((m) => ({ id: m.id, name: m.name ?? m.id }))
+      })),
       tools: toolRegistry.getDefinitions().length,
       cwd: process.cwd()
     });
   });
   app.get("/api/files", (req, res) => {
-    const { readdirSync, statSync } = __require("fs");
-    const { join: pjoin, relative } = __require("path");
     const cwd = process.cwd();
     const prefix = req.query.prefix || "";
-    const targetDir = pjoin(cwd, prefix);
+    const targetDir = join3(cwd, prefix);
     if (!resolve2(targetDir).startsWith(resolve2(cwd))) {
       res.json({ files: [] });
       return;
@@ -1376,7 +1386,7 @@ async function startWebServer(options = {}) {
       const entries = readdirSync(targetDir, { withFileTypes: true });
       const files = entries.filter((e) => !SKIP.has(e.name) && !e.name.startsWith(".")).slice(0, 50).map((e) => ({
         name: e.name,
-        path: relative(cwd, pjoin(targetDir, e.name)).replace(/\\/g, "/"),
+        path: relative(cwd, join3(targetDir, e.name)).replace(/\\/g, "/"),
         isDir: e.isDirectory()
       }));
       res.json({ files });
@@ -1414,13 +1424,12 @@ async function startWebServer(options = {}) {
       return;
     }
     try {
-      const { statSync, readFileSync: readFileSync5 } = __require("fs");
       const stat = statSync(fullPath);
       if (stat.size > 512 * 1024) {
         res.json({ error: `File too large (${(stat.size / 1024).toFixed(0)} KB, max 512 KB)` });
         return;
       }
-      const content = readFileSync5(fullPath, "utf-8");
+      const content = readFileSync4(fullPath, "utf-8");
       res.json({ content, size: stat.size });
     } catch (err) {
       res.json({ error: `Cannot read: ${err.message}` });

package/dist/web/client/app.js

@@ -17,6 +17,7 @@ let pendingImages = []; // { name, data (base64), mime }
 let inputHistory = []; // Previous user inputs for ↑/↓ navigation
 let historyIndex = -1; // -1 = not browsing history
 let savedInputDraft = ''; // Saved current input when entering history mode
+let toolTimers = new Map(); // callId → { startTime, intervalId }
 
 // ── DOM refs ───────────────────────────────────────────────────────
 
@@ -153,8 +154,8 @@ function handleServerMessage(msg) {
     case 'export_data':     handleExportData(msg); break;
     case 'memory_content':  handleMemoryContent(msg); break;
     case 'info':            addInfoMessage(msg.message); break;
-    case 'error':           addErrorMessage(msg.message); setProcessing(false); break;
-    case 'round_progress':  break;
+    case 'error':           addErrorMessage(msg.message); hideRoundProgress(); clearAllToolTimers(); setProcessing(false); break;
+    case 'round_progress':  handleRoundProgress(msg); break;
   }
 }
 
@@ -186,6 +187,8 @@ function handleResponseDone(msg) {
 
   currentAssistantEl = null;
   currentAssistantContent = '';
+  hideRoundProgress();
+  clearAllToolTimers();
   setProcessing(false);
   scrollToBottom();
 }
@@ -208,6 +211,7 @@ function handleToolCallStart(msg) {
     <summary class="flex items-center gap-2 w-full cursor-pointer select-none py-1">
       <span class="badge ${levelBadge} badge-sm gap-1">${levelIcon} ${escapeHtml(msg.toolName)}</span>
       <span class="text-xs opacity-50">${msg.round}/${msg.totalRounds}</span>
+      <span class="tool-timer timing" data-call-id="${msg.callId}">⏱ 0.0s</span>
       <span class="tool-result-badge text-xs ml-auto"></span>
     </summary>
     <div class="tool-details-body pt-1">
@@ -215,12 +219,42 @@ function handleToolCallStart(msg) {
     </div>
   `;
   messagesEl.appendChild(el);
+
+  // Start live timer
+  const startTime = msg.startTime || Date.now();
+  const timerEl = el.querySelector(`[data-call-id="${msg.callId}"]`);
+  const intervalId = setInterval(() => {
+    const elapsed = (Date.now() - startTime) / 1000;
+    if (timerEl) timerEl.textContent = `⏱ ${elapsed.toFixed(1)}s`;
+  }, 100);
+  toolTimers.set(msg.callId, { startTime, intervalId });
+
   scrollToBottom();
 }
 
 function handleToolCallResult(msg) {
+  // Stop live timer
+  const timer = toolTimers.get(msg.callId);
+  if (timer) {
+    clearInterval(timer.intervalId);
+    toolTimers.delete(msg.callId);
+  }
+
   const el = document.getElementById(`tool-${msg.callId}`);
   if (el) {
+    // Replace timer with final duration
+    const timerEl = el.querySelector(`[data-call-id="${msg.callId}"]`);
+    if (timerEl && msg.durationMs != null) {
+      const secs = msg.durationMs / 1000;
+      const speedClass = secs < 1 ? 'fast' : secs < 5 ? 'medium' : 'slow';
+      timerEl.className = `tool-duration ${speedClass}`;
+      timerEl.textContent = formatDuration(msg.durationMs);
+    } else if (timerEl) {
+      // No duration data — just clear the timer
+      timerEl.className = 'tool-duration';
+      timerEl.textContent = '';
+    }
+
     // Add result inside the details body
     const body = el.querySelector('.tool-details-body');
     if (body) {
@@ -308,6 +342,38 @@ function handleAskUserRequest(msg) {
   setTimeout(() => document.getElementById(`ask-input-${msg.requestId}`)?.focus(), 100);
 }
 
+function handleRoundProgress(msg) {
+  const progressBar = document.getElementById('round-progress');
+  const progressBarEl = document.getElementById('round-progress-bar');
+  const progressLabel = document.getElementById('round-progress-label');
+  if (!progressBar || !progressBarEl || !progressLabel) return;
+
+  progressBar.classList.remove('hidden');
+  progressLabel.textContent = `Round ${msg.current}/${msg.total}`;
+  progressBarEl.value = Math.round((msg.current / msg.total) * 100);
+}
+
+function hideRoundProgress() {
+  const progressBar = document.getElementById('round-progress');
+  if (progressBar) progressBar.classList.add('hidden');
+}
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 10000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(0)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.round((ms % 60000) / 1000);
+  return `${mins}m${secs}s`;
+}
+
+function clearAllToolTimers() {
+  for (const { intervalId } of toolTimers.values()) {
+    clearInterval(intervalId);
+  }
+  toolTimers.clear();
+}
+
 function handleThinkingStart() {
   const details = document.createElement('details');
   details.className = 'thinking-block my-1 collapse collapse-arrow bg-base-200';
@@ -421,9 +487,21 @@ window.respondAskUser = function(requestId) {
   }
 };
 
+// DaisyUI light themes → highlight.js light stylesheet; others → dark
+const LIGHT_DAISYUI_THEMES = new Set(['light', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'garden', 'lofi', 'pastel', 'fantasy', 'wireframe', 'cmyk', 'autumn', 'acid', 'lemonade', 'winter', 'nord']);
+const HLJS_CDN = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles';
+
+function updateCodeTheme(daisyTheme) {
+  const isLight = LIGHT_DAISYUI_THEMES.has(daisyTheme);
+  const hljsFile = isLight ? 'github.min.css' : 'github-dark.min.css';
+  const link = document.getElementById('hljs-theme');
+  if (link) link.href = `${HLJS_CDN}/${hljsFile}`;
+}
+
 window.setTheme = function(theme) {
   document.documentElement.setAttribute('data-theme', theme);
   localStorage.setItem('aicli-theme', theme);
+  updateCodeTheme(theme);
 };
 
 // ── UI helpers ─────────────────────────────────────────────────────
@@ -1178,6 +1256,189 @@ function handleMemoryContent(msg) {
   scrollToBottom();
 }
 
+// ── Prompt Templates ───────────────────────────────────────────────
+
+const TEMPLATES_KEY = 'aicli-templates';
+
+function loadTemplates() {
+  try {
+    return JSON.parse(localStorage.getItem(TEMPLATES_KEY) || '[]');
+  } catch { return []; }
+}
+
+function saveTemplatesToStorage(templates) {
+  localStorage.setItem(TEMPLATES_KEY, JSON.stringify(templates));
+}
+
+function openTemplatesModal() {
+  const modal = document.getElementById('templates-modal');
+  if (!modal) return;
+  cancelTemplateForm();
+  renderTemplateList();
+  document.getElementById('template-search').value = '';
+  modal.showModal();
+}
+
+function renderTemplateList(filter) {
+  const listEl = document.getElementById('template-list');
+  if (!listEl) return;
+  const templates = loadTemplates();
+  const q = (filter || '').toLowerCase();
+  const filtered = q
+    ? templates.filter(t => t.name.toLowerCase().includes(q) || (t.tags || []).some(tag => tag.toLowerCase().includes(q)) || t.content.toLowerCase().includes(q))
+    : templates;
+
+  if (filtered.length === 0) {
+    listEl.innerHTML = `<div class="template-empty">${q ? 'No matching templates' : 'No templates yet. Click ＋ New to create one.'}</div>`;
+    return;
+  }
+
+  listEl.innerHTML = filtered.map(t => {
+    const preview = t.content.length > 80 ? t.content.slice(0, 80) + '...' : t.content;
+    const tagsHtml = (t.tags || []).map(tag => `<span class="template-item-tag">${escapeHtml(tag)}</span>`).join('');
+    return `
+      <div class="template-item" data-tpl-id="${t.id}" onclick="useTemplate('${t.id}')">
+        <div class="template-item-body">
+          <div class="template-item-name">${escapeHtml(t.name)}</div>
+          <div class="template-item-preview">${escapeHtml(preview)}</div>
+          ${tagsHtml ? `<div class="template-item-tags">${tagsHtml}</div>` : ''}
+        </div>
+        <div class="template-item-actions">
+          <button class="btn btn-xs btn-ghost" onclick="event.stopPropagation(); editTemplate('${t.id}')" title="Edit">✏️</button>
+          <button class="btn btn-xs btn-ghost" onclick="event.stopPropagation(); deleteTemplate('${t.id}')" title="Delete">🗑️</button>
+        </div>
+      </div>`;
+  }).join('');
+}
+
+function useTemplate(id) {
+  const templates = loadTemplates();
+  const tpl = templates.find(t => t.id === id);
+  if (!tpl) return;
+  userInput.value = tpl.content;
+  userInput.focus();
+  userInput.style.height = 'auto';
+  userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
+  document.getElementById('templates-modal')?.close();
+}
+
+function showAddTemplate() {
+  const form = document.getElementById('template-form');
+  form.classList.remove('hidden');
+  document.getElementById('tpl-edit-id').value = '';
+  document.getElementById('tpl-name').value = '';
+  document.getElementById('tpl-content').value = '';
+  document.getElementById('tpl-tags').value = '';
+  document.getElementById('tpl-name').focus();
+}
+
+function editTemplate(id) {
+  const templates = loadTemplates();
+  const tpl = templates.find(t => t.id === id);
+  if (!tpl) return;
+  const form = document.getElementById('template-form');
+  form.classList.remove('hidden');
+  document.getElementById('tpl-edit-id').value = tpl.id;
+  document.getElementById('tpl-name').value = tpl.name;
+  document.getElementById('tpl-content').value = tpl.content;
+  document.getElementById('tpl-tags').value = (tpl.tags || []).join(', ');
+  document.getElementById('tpl-name').focus();
+}
+
+function cancelTemplateForm() {
+  document.getElementById('template-form')?.classList.add('hidden');
+}
+
+function saveTemplateForm() {
+  const name = document.getElementById('tpl-name').value.trim();
+  const content = document.getElementById('tpl-content').value.trim();
+  const tagsRaw = document.getElementById('tpl-tags').value.trim();
+  const editId = document.getElementById('tpl-edit-id').value;
+
+  if (!name || !content) return;
+
+  const tags = tagsRaw ? tagsRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+  const templates = loadTemplates();
+
+  if (editId) {
+    const idx = templates.findIndex(t => t.id === editId);
+    if (idx >= 0) {
+      templates[idx].name = name;
+      templates[idx].content = content;
+      templates[idx].tags = tags;
+    }
+  } else {
+    templates.unshift({
+      id: 'tpl-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+      name,
+      content,
+      tags,
+      createdAt: new Date().toISOString(),
+    });
+  }
+
+  saveTemplatesToStorage(templates);
+  cancelTemplateForm();
+  renderTemplateList();
+}
+
+function deleteTemplate(id) {
+  const templates = loadTemplates().filter(t => t.id !== id);
+  saveTemplatesToStorage(templates);
+  renderTemplateList(document.getElementById('template-search')?.value);
+}
+
+function exportTemplates() {
+  const templates = loadTemplates();
+  if (templates.length === 0) return;
+  const blob = new Blob([JSON.stringify(templates, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `aicli-templates-${new Date().toISOString().slice(0, 10)}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function importTemplates() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.json';
+  input.onchange = () => {
+    const file = input.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const imported = JSON.parse(reader.result);
+        if (!Array.isArray(imported)) throw new Error('Not an array');
+        const existing = loadTemplates();
+        const existingIds = new Set(existing.map(t => t.id));
+        let added = 0;
+        for (const t of imported) {
+          if (t.id && t.name && t.content && !existingIds.has(t.id)) {
+            existing.push(t);
+            added++;
+          }
+        }
+        saveTemplatesToStorage(existing);
+        renderTemplateList();
+        addInfoMessage(`📥 Imported ${added} template(s).`);
+      } catch {
+        addErrorMessage('Failed to import templates: invalid JSON format.');
+      }
+    };
+    reader.readAsText(file);
+  };
+  input.click();
+}
+
+// Template button + search binding
+document.getElementById('btn-templates')?.addEventListener('click', openTemplatesModal);
+document.getElementById('template-search')?.addEventListener('input', (e) => {
+  renderTemplateList(e.target.value);
+});
+
 // ── File Tree ──────────────────────────────────────────────────────
 
 const fileTreeEl = document.getElementById('file-tree');
@@ -1355,9 +1616,12 @@ if (btnFileTreeRefresh) {
 
 // ── Initialize ─────────────────────────────────────────────────────
 
-// Restore theme
+// Restore theme + sync code highlight
 const savedTheme = localStorage.getItem('aicli-theme');
-if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);
+if (savedTheme) {
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  updateCodeTheme(savedTheme);
+}
 
 connect();
 userInput.focus();

package/dist/web/client/index.html

@@ -9,7 +9,7 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <!-- Markdown + Code highlighting -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
+  <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
   <link rel="stylesheet" href="style.css">
 </head>
@@ -88,7 +88,14 @@
       </aside>
 
       <!-- Chat Area -->
-      <main id="chat-area" class="flex-1 overflow-y-auto px-4 py-4">
+      <main id="chat-area" class="flex-1 overflow-y-auto px-4 py-4 relative">
+        <!-- Round progress bar (sticky top, hidden by default) -->
+        <div id="round-progress" class="round-progress-bar hidden">
+          <div class="round-progress-inner">
+            <span id="round-progress-label" class="round-progress-label">Round 1/25</span>
+            <progress id="round-progress-bar" class="progress progress-primary progress-sm flex-1" value="0" max="100"></progress>
+          </div>
+        </div>
         <div id="messages" class="max-w-4xl mx-auto flex flex-col gap-3">
           <!-- Welcome message -->
           <div class="chat chat-start">
@@ -105,6 +112,9 @@
     <!-- ── Input Area ─────────────────────────────────── -->
     <footer class="bg-base-200 border-t border-base-content/10 px-4 py-3 flex-shrink-0">
       <div class="max-w-4xl mx-auto flex gap-2 items-end">
+        <button id="btn-templates" class="btn btn-ghost btn-square btn-sm self-center" title="Prompt templates">
+          <span class="text-lg">📝</span>
+        </button>
         <textarea id="user-input"
           class="textarea textarea-bordered flex-1 min-h-[2.75rem] max-h-[200px] resize-none leading-relaxed"
           placeholder="Type a message... (Shift+Enter for newline)"
@@ -130,6 +140,43 @@
 
   </div>
 
+  <!-- ── Prompt Templates Modal ───────────────────────── -->
+  <dialog id="templates-modal" class="modal">
+    <div class="modal-box max-w-2xl bg-base-200">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-bold text-lg">📝 Prompt Templates</h3>
+        <div class="flex gap-1">
+          <button class="btn btn-xs btn-ghost" onclick="importTemplates()" title="Import">📥 Import</button>
+          <button class="btn btn-xs btn-ghost" onclick="exportTemplates()" title="Export">📤 Export</button>
+          <button class="btn btn-xs btn-ghost" onclick="showAddTemplate()" title="New template">＋ New</button>
+        </div>
+      </div>
+
+      <!-- Add/Edit form (hidden by default) -->
+      <div id="template-form" class="hidden mb-3 p-3 bg-base-300 rounded-lg">
+        <input id="tpl-name" type="text" class="input input-sm input-bordered w-full mb-2" placeholder="Template name">
+        <textarea id="tpl-content" class="textarea textarea-bordered w-full text-sm mb-2" rows="4" placeholder="Prompt content..."></textarea>
+        <input id="tpl-tags" type="text" class="input input-sm input-bordered w-full mb-2" placeholder="Tags (comma-separated, optional)">
+        <div class="flex gap-2 justify-end">
+          <button class="btn btn-sm btn-ghost" onclick="cancelTemplateForm()">Cancel</button>
+          <button class="btn btn-sm btn-primary" onclick="saveTemplateForm()">Save</button>
+        </div>
+        <input type="hidden" id="tpl-edit-id">
+      </div>
+
+      <!-- Search -->
+      <input id="template-search" type="text" class="input input-sm input-bordered w-full mb-3" placeholder="Search templates...">
+
+      <!-- Template list -->
+      <div id="template-list" class="flex flex-col gap-1 max-h-[50vh] overflow-y-auto"></div>
+
+      <div class="modal-action mt-3">
+        <form method="dialog"><button class="btn btn-sm">Close</button></form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop"><button>close</button></form>
+  </dialog>
+
   <script src="app.js"></script>
 </body>
 </html>

package/dist/web/client/style.css

@@ -453,6 +453,112 @@
   font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
 }
 
+/* ── Round progress bar (sticky top of chat area) ──── */
+.round-progress-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 0.4rem 1rem;
+  background: oklch(var(--b2) / 0.92);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid oklch(var(--bc) / 0.1);
+  max-width: 64rem;
+  margin: -1rem auto 0.5rem;
+}
+.round-progress-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.round-progress-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+/* ── Tool duration & timer ─────────────────────────── */
+.tool-timer {
+  font-size: 0.7rem;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
+  opacity: 0.5;
+  white-space: nowrap;
+}
+.tool-timer.timing {
+  color: oklch(var(--wa));
+  opacity: 0.7;
+}
+.tool-duration {
+  font-size: 0.7rem;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
+  opacity: 0.6;
+  white-space: nowrap;
+}
+.tool-duration.fast { color: oklch(var(--su)); }
+.tool-duration.medium { color: oklch(var(--wa)); }
+.tool-duration.slow { color: oklch(var(--er)); }
+
+/* ── Prompt templates ──────────────────────────────── */
+.template-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.15s;
+  border: 1px solid oklch(var(--bc) / 0.08);
+}
+.template-item:hover {
+  background: oklch(var(--b3));
+  border-color: oklch(var(--p) / 0.3);
+}
+.template-item-body {
+  flex: 1;
+  min-width: 0;
+}
+.template-item-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.template-item-preview {
+  font-size: 0.78rem;
+  opacity: 0.55;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.template-item-tags {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  margin-top: 0.2rem;
+}
+.template-item-tag {
+  font-size: 0.65rem;
+  padding: 0.05rem 0.35rem;
+  border-radius: 0.25rem;
+  background: oklch(var(--p) / 0.12);
+  color: oklch(var(--p));
+}
+.template-item-actions {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.template-item:hover .template-item-actions {
+  opacity: 1;
+}
+.template-empty {
+  text-align: center;
+  padding: 2rem;
+  opacity: 0.4;
+  font-size: 0.85rem;
+}
+
 /* ── Responsive ─────────────────────────────────────── */
 @media (max-width: 768px) {
   .sidebar { width: 0; padding: 0; border: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jinzd-ai-cli",
-  "version": "0.1.89",
+  "version": "0.1.91",
   "description": "Cross-platform REPL-style AI CLI with multi-provider support",
   "type": "module",
   "main": "./dist/index.js",