jinzd-ai-cli 0.1.96 → 0.1.98

package/CLAUDE.md

@@ -352,6 +352,74 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 - [x] **web_fetch DNS 解析时 SSRF 防护**（v0.1.25）：新增 `resolveAndCheck()` 函数，用 `dns.promises.lookup()` 预解析域名，检查结果 IP 是否为私有地址。初始 URL 和 redirect 目标均校验。
 - [ ] **`persistentCwd` 全局状态**：bash 工具的当前工作目录是模块级全局变量，多 session 并发时可能串扰。现阶段单 session REPL 无影响，GUI 多会话扩展时需重构为 per-session 状态。
 
+## 本轮开发完成记录（2026-03-18，v0.1.91 → v0.1.96）
+
+### Web UI P2 收尾 + P3-2 PWA + Bug 修复
+
+**P2-3：工具执行可视化**（v0.1.91）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/protocol.ts` | 修改 | `S2C_ToolCall` 新增 `startTime` 字段 |
+| `src/web/tool-executor-web.ts` | 修改 | 工具执行计时 + 状态追踪 |
+| `src/web/client/app.js` | 修改 | 工具卡片显示耗时、进度指示、状态可视化 |
+
+**P2-4：Prompt 模板库**（v0.1.91）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/client/index.html` | 修改 | 📝 按钮 + `<dialog>` 模板管理弹窗（表单/搜索/列表） |
+| `src/web/client/style.css` | 修改 | `.template-item` 系列样式（hover、tags、actions、empty） |
+| `src/web/client/app.js` | 修改 | 完整 CRUD（loadTemplates/saveTemplates/renderTemplateList/useTemplate/editTemplate/deleteTemplate/exportTemplates/importTemplates） |
+
+- localStorage 持久化，key: `aicli-templates`
+- 搜索过滤（名称/标签/内容）
+- 标签系统（逗号分隔，彩色 badge）
+- 导入/导出 JSON（去重合并）
+
+**P2-5：代码主题联动**（v0.1.91）
+- highlight.js 主题随 DaisyUI 主题自动切换（暗色 → github-dark，亮色 → github-light）
+
+**Bug 修复：EADDRINUSE 端口占用崩溃**（v0.1.92）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/server.ts` | 修改 | 端口占用时自动递增（最多尝试 10 次），不再 Fatal crash |
+
+**Bug 修复：空 Untitled 会话 + 侧边栏宽度 + /skill 命令**（v0.1.94）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/session-handler.ts` | 修改 | 新增 `saveIfNeeded()` 仅在 session 有消息时持久化；chat 完成后自动保存；`/clear` 先保存旧 session；新增 `/skill` 命令（list/activate/off/reload）；`/help` 更新 |
+| `src/web/client/index.html` | 修改 | 搜索框 `min-w-0` + 按钮 `whitespace-nowrap`，防止 "+" New 被挤压 |
+
+**P3-2：PWA 支持 — 可安装为桌面/移动应用**（v0.1.95）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/client/manifest.json` | **新增** | PWA 清单（name/theme_color/display:standalone/icons） |
+| `src/web/client/icon.svg` | **新增** | 矢量图标（机器人头像 + "ai-cli" 文字） |
+| `src/web/client/icon-192.png` | **新增** | 192x192 PNG 图标（纯 Node.js 生成） |
+| `src/web/client/icon-512.png` | **新增** | 512x512 PNG 图标 |
+| `src/web/client/sw.js` | **新增** | Service Worker（网络优先 app shell + 缓存优先 CDN，不缓存 API/WS） |
+| `src/web/client/index.html` | 修改 | manifest link + theme-color + apple-mobile-web-app + favicon + SW 注册 |
+| `scripts/generate-icons.cjs` | **新增** | 纯 Node.js PNG 图标生成器（CRC32 + zlib，无外部依赖） |
+
+**LAN 访问支持**（v0.1.96）
+
+| 文件 | 变更类型 | 说明 |
+|------|---------|------|
+| `src/web/server.ts` | 修改 | `--host 0.0.0.0` 时显示 📱 LAN IP 地址，方便手机/平板访问 |
+
+### 版本与收尾
+- `src/core/constants.ts`：VERSION `0.1.91` → `0.1.96`
+- `package.json`：version 同步
+- 构建验证：`npm run build` 零错误（ESM + CJS 双产物）
+- 发布：`npm publish` → `jinzd-ai-cli@0.1.96`
+- Web UI P2 全部完成（P2-1 ~ P2-5），P3-2 完成
+
+---
+
 ## 本轮开发完成记录（2026-03-16，v0.1.85 → v0.1.86）
 
 ### Web UI P1 增强（续）：命令扩展 + 键盘快捷键 + 导出 + 断线重连
@@ -2042,15 +2110,15 @@ const stdinLines = Array.isArray(rawStdin) ? rawStdin.map(String)
 |---|------|------|------|
 | P2-1 | **多 Tab 会话** | [x] | 浏览器内多 Tab 并行对话（CLI 做不到），类似 ChatGPT |
 | P2-2 | **文件树面板** | [x] | 浏览项目目录结构，点击文件查看/插入上下文，可视化 `@` 引用 |
-| P2-3 | **工具执行可视化** | [ ] | 进度条、工具调用时间线、Agentic 循环图示 |
-| P2-4 | **Prompt 模板库** | [ ] | 保存常用 prompt 为模板，一键复用（localStorage） |
-| P2-5 | **代码主题联动** | [ ] | highlight.js 主题随 DaisyUI 主题切换（亮色 → github-light，暗色 → github-dark） |
+| P2-3 | **工具执行可视化** | [x] | 工具调用时间线 + 耗时显示 + 进度指示 + 状态可视化 |
+| P2-4 | **Prompt 模板库** | [x] | CRUD + 搜索 + 标签 + 导入导出（localStorage 持久化） |
+| P2-5 | **代码主题联动** | [x] | highlight.js 主题随 DaisyUI 主题切换（亮色 → github-light，暗色 → github-dark） |
 
 ### P3 — 长远方向
 
 | # | 功能 | 状态 | 说明 |
 |---|------|------|------|
 | P3-1 | **多用户支持** | [ ] | 认证 + 多 session handler（当前 `activeHandler` 单连接限制） |
-| P3-2 | **PWA 支持** | [ ] | Service Worker + manifest.json，可安装为桌面应用 |
+| P3-2 | **PWA 支持** | [x] | manifest.json + Service Worker + 图标 + `--host 0.0.0.0` LAN 访问 |
 | P3-3 | **移动端适配** | [ ] | 响应式布局 + 触摸手势 |
 | P3-4 | **Electron 打包** | [ ] | 复用 Web UI 代码打包为桌面应用 |

package/dist/{chunk-LSM6QYBE.js → chunk-E6NUTTCD.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.96";
+var VERSION = "0.1.98";
 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/{chunk-MKCOC3S6.js → chunk-K4AB4ZUH.js}

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

package/dist/index.js

@@ -35,7 +35,7 @@ import {
   theme,
   truncateOutput,
   undoStack
-} from "./chunk-MKCOC3S6.js";
+} from "./chunk-K4AB4ZUH.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   AUTHOR,
@@ -55,7 +55,7 @@ import {
   REPO_URL,
   SKILLS_DIR_NAME,
   VERSION
-} from "./chunk-LSM6QYBE.js";
+} from "./chunk-E6NUTTCD.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-BX2T6JTU.js");
+        const { executeTests } = await import("./run-tests-CNDALP24.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-KV423SND.js");
+  const { startWebServer } = await import("./server-K5CTT3WU.js");
   await startWebServer({ port, host: options.host });
 });
 program.command("sessions").description("List recent conversation sessions").action(async () => {

package/dist/{run-tests-BX2T6JTU.js → run-tests-CNDALP24.js}

@@ -2,7 +2,7 @@
 import {
   executeTests,
   runTestsTool
-} from "./chunk-LSM6QYBE.js";
+} from "./chunk-E6NUTTCD.js";
 export {
   executeTests,
   runTestsTool

package/dist/{server-KV423SND.js → server-K5CTT3WU.js}

@@ -23,7 +23,7 @@ import {
   setupProxy,
   spawnAgentContext,
   truncateOutput
-} from "./chunk-MKCOC3S6.js";
+} from "./chunk-K4AB4ZUH.js";
 import {
   AGENTIC_BEHAVIOR_GUIDELINE,
   CONTEXT_FILE_CANDIDATES,
@@ -34,9 +34,8 @@ import {
   PLAN_MODE_READONLY_TOOLS,
   PLAN_MODE_SYSTEM_ADDON,
   SKILLS_DIR_NAME,
-  VERSION,
-  __require
-} from "./chunk-LSM6QYBE.js";
+  VERSION
+} from "./chunk-E6NUTTCD.js";
 
 // src/web/server.ts
 import express from "express";
@@ -44,6 +43,7 @@ import { createServer } from "http";
 import { WebSocketServer } from "ws";
 import { join as join3, dirname, resolve as resolve2, relative } from "path";
 import { existsSync as existsSync4, readFileSync as readFileSync4, readdirSync, statSync } from "fs";
+import { networkInterfaces } from "os";
 
 // src/web/tool-executor-web.ts
 import { randomUUID } from "crypto";
@@ -1560,6 +1560,16 @@ async function startWebServer(options = {}) {
   const MAX_PORT_ATTEMPTS = 10;
   let actualPort = port;
   const tryListen = (attempt) => {
+    server.once("error", (err) => {
+      if (err.code === "EADDRINUSE" && attempt < MAX_PORT_ATTEMPTS) {
+        actualPort++;
+        console.log(`   \u26A0 Port ${actualPort - 1} in use, trying ${actualPort}...`);
+        server.close(() => tryListen(attempt + 1));
+      } else {
+        console.error(`   \u274C Failed to start server: ${err.message}`);
+        process.exit(1);
+      }
+    });
     server.listen(actualPort, host, () => {
       const url = `http://${host === "0.0.0.0" ? "localhost" : host}:${actualPort}`;
       console.log(`
@@ -1567,7 +1577,7 @@ async function startWebServer(options = {}) {
       if (actualPort !== port) console.log(`   (port ${port} was in use, using ${actualPort})`);
       if (host === "0.0.0.0" || host === "::") {
         try {
-          const nets = __require("os").networkInterfaces();
+          const nets = networkInterfaces();
           for (const name of Object.keys(nets)) {
             for (const net of nets[name] ?? []) {
               if (net.family === "IPv4" && !net.internal) {
@@ -1582,16 +1592,6 @@ async function startWebServer(options = {}) {
 `);
       openBrowser(url);
     });
-    server.once("error", (err) => {
-      if (err.code === "EADDRINUSE" && attempt < MAX_PORT_ATTEMPTS) {
-        actualPort++;
-        console.log(`   \u26A0 Port ${actualPort - 1} in use, trying ${actualPort}...`);
-        tryListen(attempt + 1);
-      } else {
-        console.error(`   \u274C Failed to start server: ${err.message}`);
-        process.exit(1);
-      }
-    });
   };
   tryListen(1);
   process.on("SIGINT", () => {

package/dist/web/client/app.js

@@ -1682,3 +1682,112 @@ if (savedTheme) {
 
 connect();
 userInput.focus();
+
+// ── Mobile: Sidebar toggle ──────────────────────────────────────────
+
+const btnSidebarToggle = document.getElementById('btn-sidebar-toggle');
+const sidebarBackdrop = document.getElementById('sidebar-backdrop');
+
+function openSidebar() {
+  sidebar.classList.add('sidebar-open');
+  sidebarBackdrop?.classList.remove('hidden');
+}
+
+function closeSidebar() {
+  sidebar.classList.remove('sidebar-open');
+  sidebarBackdrop?.classList.add('hidden');
+}
+
+function toggleSidebar() {
+  if (sidebar.classList.contains('sidebar-open')) {
+    closeSidebar();
+  } else {
+    openSidebar();
+  }
+}
+
+if (btnSidebarToggle) {
+  btnSidebarToggle.addEventListener('click', toggleSidebar);
+}
+
+// Close sidebar when selecting a session on mobile
+const origSwitchSession = window.switchSession;
+if (typeof origSwitchSession === 'function') {
+  // Wrap — after switching, close sidebar if mobile
+  window._origSwitchSession = origSwitchSession;
+}
+
+// ── Mobile: Swipe gesture to open/close sidebar ─────────────────────
+
+let touchStartX = 0;
+let touchStartY = 0;
+let touchStartTime = 0;
+const SWIPE_THRESHOLD = 60;
+const SWIPE_MAX_Y = 80; // Ignore diagonal swipes
+const EDGE_ZONE = 30; // px from left edge to trigger open
+
+document.addEventListener('touchstart', (e) => {
+  touchStartX = e.touches[0].clientX;
+  touchStartY = e.touches[0].clientY;
+  touchStartTime = Date.now();
+}, { passive: true });
+
+document.addEventListener('touchend', (e) => {
+  const dx = e.changedTouches[0].clientX - touchStartX;
+  const dy = Math.abs(e.changedTouches[0].clientY - touchStartY);
+  const dt = Date.now() - touchStartTime;
+
+  // Only quick swipes (< 400ms), mostly horizontal
+  if (dt > 400 || dy > SWIPE_MAX_Y) return;
+
+  // Swipe right from left edge → open sidebar
+  if (dx > SWIPE_THRESHOLD && touchStartX < EDGE_ZONE && !sidebar.classList.contains('sidebar-open')) {
+    openSidebar();
+  }
+  // Swipe left → close sidebar (if open)
+  if (dx < -SWIPE_THRESHOLD && sidebar.classList.contains('sidebar-open')) {
+    closeSidebar();
+  }
+}, { passive: true });
+
+// ── Mobile: Handle virtual keyboard / visual viewport ───────────────
+
+if (window.visualViewport) {
+  let initialHeight = window.visualViewport.height;
+
+  window.visualViewport.addEventListener('resize', () => {
+    const vh = window.visualViewport.height;
+    const offset = window.visualViewport.offsetTop;
+    // When keyboard opens, viewport height shrinks significantly
+    const keyboardOpen = vh < initialHeight * 0.75;
+
+    // Adjust the app container to fit the visible viewport
+    const app = document.getElementById('app');
+    if (app) {
+      app.style.height = `${vh}px`;
+      app.style.transform = `translateY(${offset}px)`;
+    }
+
+    // Scroll to bottom when keyboard opens (so user sees latest messages)
+    if (keyboardOpen) {
+      setTimeout(scrollToBottom, 100);
+    }
+  });
+
+  // Update initial height on orientation change
+  window.addEventListener('orientationchange', () => {
+    setTimeout(() => { initialHeight = window.visualViewport.height; }, 500);
+  });
+}
+
+// ── Mobile: Close sidebar when clicking session item ────────────────
+
+// Observe session-list clicks to auto-close sidebar on mobile
+if (sessionListEl) {
+  sessionListEl.addEventListener('click', (e) => {
+    const item = e.target.closest('.session-item');
+    if (item && window.innerWidth <= 768) {
+      setTimeout(closeSidebar, 150);
+    }
+  });
+}

package/dist/web/client/index.html

@@ -2,7 +2,7 @@
 <html lang="en" data-theme="dark">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <title>ai-cli Web UI</title>
   <!-- PWA -->
   <link rel="manifest" href="manifest.json">
@@ -27,9 +27,12 @@
     <!-- ── Navbar ─────────────────────────────────────── -->
     <div class="navbar bg-base-200 border-b border-base-content/10 px-4 min-h-[3.5rem] flex-shrink-0">
       <div class="navbar-start gap-2">
-        <span class="text-lg font-bold text-primary">🤖 ai-cli</span>
-        <select id="provider-select" class="select select-sm select-bordered w-32" title="Provider"></select>
-        <select id="model-select" class="select select-sm select-bordered w-48" title="Model"></select>
+        <button id="btn-sidebar-toggle" class="btn btn-sm btn-ghost sidebar-toggle-btn" title="Toggle sidebar" aria-label="Toggle sidebar">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+        </button>
+        <span class="text-lg font-bold text-primary brand-text">🤖 ai-cli</span>
+        <select id="provider-select" class="select select-sm select-bordered navbar-select" title="Provider"></select>
+        <select id="model-select" class="select select-sm select-bordered navbar-select" title="Model"></select>
       </div>
       <div class="navbar-end gap-1">
         <button id="btn-think" class="btn btn-sm btn-ghost" title="Toggle thinking mode">💭 Think</button>
@@ -57,7 +60,7 @@
     <div class="flex flex-1 overflow-hidden">
 
       <!-- Sidebar -->
-      <aside id="sidebar" class="sidebar bg-base-200 border-r border-base-content/10 flex flex-col w-72 flex-shrink-0 overflow-hidden transition-all duration-200">
+      <aside id="sidebar" class="sidebar bg-base-200 border-r border-base-content/10 flex flex-col flex-shrink-0 overflow-hidden">
         <!-- Sidebar tabs -->
         <div class="flex border-b border-base-content/10 flex-shrink-0">
           <button class="sidebar-tab active flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="sessions">📋 Sessions</button>
@@ -103,6 +106,8 @@
           </div>
         </div>
       </aside>
+      <!-- Sidebar backdrop (mobile overlay) -->
+      <div id="sidebar-backdrop" class="sidebar-backdrop hidden" onclick="closeSidebar()"></div>
 
       <!-- Chat Area -->
       <main id="chat-area" class="flex-1 overflow-y-auto px-4 py-4 relative">
@@ -127,7 +132,7 @@
     </div>
 
     <!-- ── Input Area ─────────────────────────────────── -->
-    <footer class="bg-base-200 border-t border-base-content/10 px-4 py-3 flex-shrink-0">
+    <footer class="bg-base-200 border-t border-base-content/10 px-4 py-3 flex-shrink-0 input-footer">
       <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>

package/dist/web/client/style.css

@@ -254,6 +254,10 @@
 }
 
 /* ── Sidebar ───────────────────────────────────────── */
+.sidebar {
+  width: 18rem;
+  transition: width 0.2s ease;
+}
 .sidebar .session-item {
   padding: 0.5rem 0.6rem;
   border-radius: 0.375rem;
@@ -559,12 +563,118 @@
   font-size: 0.85rem;
 }
 
-/* ── Responsive ─────────────────────────────────────── */
-@media (max-width: 768px) {
-  .sidebar { width: 0; padding: 0; border: none; }
-  .sidebar.sidebar-open { width: 18rem; position: absolute; z-index: 20; height: calc(100vh - 3.5rem); top: 3.5rem; }
+/* ── Sidebar toggle button (hidden on desktop) ──────── */
+.sidebar-toggle-btn { display: none; }
+
+/* ── Sidebar backdrop (mobile overlay) ───────────────── */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  top: 3.5rem;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 19;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+/* ── Touch optimization ──────────────────────────────── */
+button, a, .session-item, .file-tree-row, .template-item, .tool-item, .mcp-server-item {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
 }
+
+/* ── Input footer safe area (iPhone notch) ───────────── */
+.input-footer {
+  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
+}
+
+/* ── Responsive: Tablet ────────────────────────────── */
+@media (max-width: 768px) {
+  .sidebar-toggle-btn { display: flex; }
+  .sidebar {
+    width: 0;
+    padding: 0;
+    border: none;
+    position: fixed;
+    z-index: 20;
+    top: 3.5rem;
+    left: 0;
+    height: calc(100vh - 3.5rem);
+    height: calc(100dvh - 3.5rem);
+    transition: width 0.2s ease, padding 0.2s ease;
+  }
+  .sidebar.sidebar-open {
+    width: 18rem;
+    border-right: 1px solid oklch(var(--bc) / 0.1);
+    overflow: hidden;
+  }
+  /* Provider/model selects: narrower on tablet */
+  .navbar-select { width: 7rem; font-size: 0.8rem; }
+  /* Navbar end buttons: hide text labels */
+  #btn-think, #btn-plan { font-size: 0.8rem; padding: 0 0.4rem; }
+}
+
+/* ── Responsive: Phone ──────────────────────────────── */
 @media (max-width: 640px) {
-  .navbar-start .select { width: 6rem; font-size: 0.75rem; }
-  .msg-assistant { padding: 0.75rem; }
+  /* Navbar: compact layout */
+  .navbar { padding: 0 0.5rem; min-height: 3rem; }
+  .navbar-start { gap: 0.25rem; }
+  .navbar-end { gap: 0; }
+  .brand-text { display: none; }
+  .navbar-select { width: 5.5rem; font-size: 0.72rem; height: 2rem; min-height: 2rem; }
+  /* Navbar end: icon-only for action buttons */
+  #btn-think, #btn-plan { font-size: 0.75rem; padding: 0 0.3rem; min-height: 2rem; height: 2rem; }
+  .divider-horizontal { display: none; }
+  #btn-clear, #btn-compact { min-height: 2rem; height: 2rem; padding: 0 0.3rem; }
+
+  /* Sidebar: full width on small phones */
+  .sidebar.sidebar-open { width: min(85vw, 20rem); }
+
+  /* Chat area */
+  #chat-area { padding: 0.75rem 0.5rem; }
+  .msg-assistant { padding: 0.75rem; font-size: 0.92rem; }
+  .msg-assistant pre code { font-size: 0.78rem; padding: 0.75rem; }
+  .msg-assistant table { font-size: 0.8rem; }
+  .msg-assistant th, .msg-assistant td { padding: 0.3rem 0.5rem; }
+
+  /* Input area */
+  .input-footer { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
+  .input-footer .max-w-4xl { gap: 0.35rem; }
+  #user-input { font-size: 16px; /* Prevents iOS zoom on focus */ min-height: 2.5rem; }
+  #btn-send, #btn-stop { width: 2.5rem; height: 2.5rem; min-height: 2.5rem; }
+  #btn-templates { width: 2rem; height: 2rem; min-height: 2rem; }
+  #btn-templates .text-lg { font-size: 1rem; }
+
+  /* Status bar: hide or compact */
+  .input-footer .text-xs { font-size: 0.65rem; gap: 0.25rem; }
+
+  /* Tool cards */
+  .tool-card { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
+  .confirm-diff { font-size: 0.72rem; max-height: 150px; }
+
+  /* Copy button always visible on mobile (no hover) */
+  .copy-code-btn { opacity: 0.6; }
+
+  /* Modals: near full-width on phone */
+  .modal-box { max-width: 95vw; margin: 0.5rem; }
+  #templates-modal .modal-box { max-height: 85vh; }
+}
+
+/* ── Responsive: Very small phones (320px) ───────────── */
+@media (max-width: 380px) {
+  .navbar-select { width: 4.5rem; font-size: 0.68rem; }
+  .sidebar.sidebar-open { width: 90vw; }
+  .msg-assistant { padding: 0.5rem 0.6rem; font-size: 0.88rem; }
+}
+
+/* ── Landscape phone: reduce vertical space ──────────── */
+@media (max-height: 500px) and (max-width: 900px) {
+  .navbar { min-height: 2.5rem; }
+  .input-footer { padding-top: 0.35rem; padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)); }
+  #chat-area { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+}
+
+/* ── PWA standalone mode: extra top padding for status bar ── */
+@media (display-mode: standalone) {
+  .navbar { padding-top: env(safe-area-inset-top, 0px); }
 }

package/package.json

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