openclacky 1.2.6 → 1.2.8

data/lib/clacky/web/billing.js

@@ -4,6 +4,7 @@
 const Billing = (() => {
   let _summary = null;
   let _daily = [];
+  let _sessions = []; // 会话列表
   let _allModels = []; // 保存完整的模型列表
   let _currentPeriod = "day";
   let _currentModel = "all";
@@ -73,15 +74,19 @@ const Billing = (() => {
 
     try {
       const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
-      const [summaryRes, dailyRes] = await Promise.all([
+      const [summaryRes, dailyRes, sessionsRes] = await Promise.all([
         fetch(`/api/billing/summary?period=${_currentPeriod}${modelParam}`),
-        fetch(`/api/billing/daily?days=30${modelParam}`)
+        fetch(`/api/billing/daily?days=30${modelParam}`),
+        fetch(`/api/billing/sessions?period=${_currentPeriod}${modelParam}&limit=100`)
       ]);
 
       _summary = await summaryRes.json();
       const dailyData = await dailyRes.json();
       _daily = dailyData.days || [];
 
+      const sessionsData = await sessionsRes.json();
+      _sessions = sessionsData.sessions || [];
+
       // 保存完整模型列表（仅在未筛选时更新）
       if (!_currentModel || _currentModel === "all") {
         _allModels = _summary.by_model ? Object.keys(_summary.by_model) : [];
@@ -172,6 +177,10 @@ const Billing = (() => {
         <div class="billing-chart-row">
           ${_renderCombinedChart()}
         </div>
+
+        <div class="billing-sessions-row">
+          ${_renderSessionList()}
+        </div>
       </div>
     `;
 
@@ -219,14 +228,19 @@ const Billing = (() => {
           <span class="tooltip-date">${date}</span>
           <span class="tooltip-total">${total} tokens</span>
         </div>
+        <div class="tooltip-row">
+          <span class="tooltip-dot tooltip-total"></span>
+          <span class="tooltip-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</span>
+          <span class="tooltip-value">${total}</span>
+        </div>
         <div class="tooltip-row">
           <span class="tooltip-dot tooltip-cache-hit"></span>
-          <span class="tooltip-label">${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}</span>
+          <span class="tooltip-label">${I18n.t("billing.inputCacheHit") || "Input (Hit)"}</span>
           <span class="tooltip-value">${cacheHit}</span>
         </div>
         <div class="tooltip-row">
           <span class="tooltip-dot tooltip-cache-miss"></span>
-          <span class="tooltip-label">${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}</span>
+          <span class="tooltip-label">${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}</span>
           <span class="tooltip-value">${cacheMiss}</span>
         </div>
         <div class="tooltip-row">
@@ -333,35 +347,50 @@ const Billing = (() => {
   }
 
   function _renderTokenBreakdown() {
+    const totalTokens = _summary.total_tokens || 0;
+    const promptTokens = _summary.prompt_tokens || 0;
+    const completionTokens = _summary.completion_tokens || 0;
+    const cacheReadTokens = _summary.cache_read_tokens || 0;
+    const cacheMissTokens = promptTokens - cacheReadTokens;
+
     return `
       <div class="billing-section billing-token-section">
         <h3>${I18n.t("billing.tokenBreakdown") || "Token Breakdown"}</h3>
         <div class="billing-token-bars">
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
-              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.cache_read_tokens)}</span>
+              <span class="billing-token-bar-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(totalTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-cache-read" style="width: ${_getTokenPercent('cache_read')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-total" style="width: 100%"></div>
             </div>
           </div>
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
-              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.prompt_tokens)}</span>
+              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheHit") || "Input (Hit)"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(cacheReadTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-prompt" style="width: ${_getTokenPercent('prompt')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-cache-read" style="width: ${_getTokenPercent(cacheReadTokens, totalTokens)}%"></div>
+            </div>
+          </div>
+          <div class="billing-token-bar-item">
+            <div class="billing-token-bar-header">
+              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(cacheMissTokens)}</span>
+            </div>
+            <div class="billing-token-bar-track">
+              <div class="billing-token-bar-fill billing-bar-cache-miss" style="width: ${_getTokenPercent(cacheMissTokens, totalTokens)}%"></div>
             </div>
           </div>
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
               <span class="billing-token-bar-label">${I18n.t("billing.output") || "Output"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.completion_tokens)}</span>
+              <span class="billing-token-bar-value">${_formatCompact(completionTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-completion" style="width: ${_getTokenPercent('completion')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-completion" style="width: ${_getTokenPercent(completionTokens, totalTokens)}%"></div>
             </div>
           </div>
         </div>
@@ -369,9 +398,8 @@ const Billing = (() => {
     `;
   }
 
-  function _getTokenPercent(type) {
-    const total = _summary.total_tokens || 1;
-    const value = _summary[type + '_tokens'] || 0;
+  function _getTokenPercent(value, total) {
+    if (!total || total === 0) return 0;
     return Math.min((value / total) * 100, 100).toFixed(1);
   }
 
@@ -427,9 +455,8 @@ const Billing = (() => {
 
     const recentDays = _daily.slice(-14);
     // Max values for scaling
-    const maxInput = Math.max(...recentDays.map(d => (d.prompt_tokens || 0) + (d.cache_read_tokens || 0)), 1);
-    const maxOutput = Math.max(...recentDays.map(d => d.completion_tokens || 0), 1);
-    const maxVal = Math.max(maxInput, maxOutput);
+    const maxInput = Math.max(...recentDays.map(d => d.prompt_tokens || 0), 1);
+    const maxOutput = Math.max(...recentDays.map(d => d.completion_tokens || 0), 1);    const maxVal = Math.max(maxInput, maxOutput);
 
     // Chart height in pixels
     const chartHeight = 120;
@@ -437,9 +464,10 @@ const Billing = (() => {
     // Generate bars: each date has Input (stacked: cache hit + cache miss) and Output
     const chartBars = recentDays.map((d, i) => {
       const cacheHit = d.cache_read_tokens || 0;        // 命中缓存
-      const cacheMiss = d.prompt_tokens || 0;           // 未命中缓存（实际发送的prompt）
+      const totalPrompt = d.prompt_tokens || 0;         // 全部输入token
+      const cacheMiss = totalPrompt - cacheHit;         // 未命中缓存 = 全部输入 - 命中
       const output = d.completion_tokens || 0;
-      const totalInput = cacheHit + cacheMiss;
+      const totalInput = totalPrompt;
       const totalTokens = totalInput + output;
 
       // Calculate heights in pixels
@@ -471,13 +499,17 @@ const Billing = (() => {
         <div class="billing-chart-header">
           <h4>${I18n.t("billing.dailyUsage") || "Usage Details"}</h4>
           <div class="billing-chart-legends">
+            <span class="billing-chart-legend">
+              <span class="billing-legend-dot billing-legend-total"></span>
+              ${I18n.t("billing.totalTokens") || "Total Tokens"}
+            </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-cache-hit"></span>
-              ${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}
+              ${I18n.t("billing.inputCacheHit") || "Input (Hit)"}
             </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-cache-miss"></span>
-              ${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}
+              ${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}
             </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-output"></span>
@@ -493,6 +525,69 @@ const Billing = (() => {
     `;
   }
 
+  function _renderSessionList() {
+    if (!_sessions || _sessions.length === 0) {
+      return `
+        <div class="billing-section billing-sessions-section">
+          <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
+          <div class="billing-sessions-empty">${I18n.t("billing.noSessions") || "No session data"}</div>
+        </div>
+      `;
+    }
+
+    const rows = _sessions.map((s, index) => {
+      const sessionId = s.session_id || "unknown";
+      const isDeleted = s.is_deleted;
+      const sessionName = s.session_name || sessionId;
+      const displayName = isDeleted ? (I18n.t("billing.deletedSessions") || "已删除会话") : (sessionName.length > 25 ? sessionName.slice(0, 25) + "..." : sessionName);
+      const totalCost = _convertCost(s.total_cost || 0);
+      const totalTokens = s.total_tokens || 0;
+      const promptTokens = s.prompt_tokens || 0;
+      const cacheHit = s.cache_read_tokens || 0;
+      const cacheMiss = promptTokens - cacheHit;
+      const completionTokens = s.completion_tokens || 0;
+      const requests = s.requests || 0;
+      const models = (s.models || []).join(", ");
+      const lastRequest = s.last_request ? new Date(s.last_request).toLocaleString() : "-";
+      const rowClass = isDeleted ? "billing-session-row billing-session-deleted" : "billing-session-row";
+
+      return `
+        <div class="${rowClass}" data-session-id="${_esc(sessionId)}">
+          <div class="billing-cell billing-cell-index">${index + 1}</div>
+          <div class="billing-cell billing-cell-session" title="${_esc(sessionName)}">
+            <span class="billing-cell-main">${_esc(displayName)}</span>
+            <span class="billing-cell-sub">${requests} ${I18n.t("billing.requests") || "req"} · ${_esc(models)}</span>
+          </div>
+          <div class="billing-cell billing-cell-number">${_formatCompact(totalTokens)}</div>
+          <div class="billing-cell billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)}</div>
+          <div class="billing-cell billing-cell-number billing-cell-miss">${_formatCompact(cacheMiss)}</div>
+          <div class="billing-cell billing-cell-number">${_formatCompact(completionTokens)}</div>
+          <div class="billing-cell billing-cell-cost">${_getCurrencySymbol()}${_formatCost(totalCost)}</div>
+          <div class="billing-cell billing-cell-time">${lastRequest}</div>
+        </div>
+      `;
+    }).join("");
+
+    return `
+      <div class="billing-section billing-sessions-section">
+        <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
+        <div class="billing-sessions-header">
+          <span class="billing-cell billing-cell-index">#</span>
+          <span class="billing-cell billing-cell-session">${I18n.t("billing.sessionId") || "Session"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerTotal") || "总消耗"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerHit") || "命中"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerMiss") || "未命中"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerOutput") || "输出"}</span>
+          <span class="billing-cell billing-cell-cost">${I18n.t("billing.cost") || "Cost"}</span>
+          <span class="billing-cell billing-cell-time">${I18n.t("billing.lastRequest") || "Time"}</span>
+        </div>
+        <div class="billing-sessions-list">
+          ${rows}
+        </div>
+      </div>
+    `;
+  }
+
   // ── Helpers ─────────────────────────────────────────────────────────────────
 
   function _formatCost(cost) {

data/lib/clacky/web/i18n.js

@@ -81,6 +81,14 @@ const I18n = (() => {
       "sessions.actions.downloadHint": "for debugging",
       "sib.dir.tooltip":         "Click to change directory",
       "sib.dir.changePrompt":    "Change working directory:",
+      "workspace.title":         "Workspace",
+      "workspace.expand":        "Open workspace",
+      "workspace.collapse":      "Collapse workspace",
+      "workspace.refresh":       "Refresh",
+      "workspace.empty":         "This folder is empty",
+      "workspace.loading":       "Loading…",
+      "workspace.error":         "Failed to load files",
+      "workspace.downloadFailed": "Download failed",
       "sib.model.tooltip":       "Click to switch model",
       "sib.model.tooltip.busy":  "Model switching is disabled while the agent is responding",
       "sib.signal.tooltip":      "Recent LLM latency",
@@ -507,6 +515,7 @@ const I18n = (() => {
       "settings.models.btn.saved":         "Saved ✓",
       "settings.models.btn.testing":       "Testing…",
       "settings.models.btn.test":          "Test",
+      "settings.models.link.topUp":        "Top up / Manage account",
       "settings.models.btn.edit":          "Edit",
       "settings.models.btn.delete":        "Delete",
       "settings.models.btn.cancel":        "Cancel",
@@ -677,12 +686,25 @@ const I18n = (() => {
       "billing.cacheHit":        "Cache Hit",
       "billing.inputCacheHit":   "Input (Cache Hit)",
       "billing.inputCacheMiss":  "Input (Cache Miss)",
-      "billing.output":          "Output",
-      "billing.tokenUsage":      "Token Usage",
+      "billing.totalInput":      "Total Input",
+      "billing.output":          "Output",      "billing.tokenUsage":      "Token Usage",
       "billing.costTrend":       "Cost Trend",
       "billing.noData":          "No data available",
-    },
 
+      "error.insufficient_credit": "Insufficient LLM credit. Please top up your account to continue.",
+      "error.insufficient_credit.action": "Top up",
+
+      "billing.sessions":        "Sessions",
+      "billing.sessionId":       "Session",
+      "billing.tokens":          "Tokens",
+      "billing.lastRequest":     "Last Request",
+      "billing.noSessions":      "No session data",
+      "billing.deletedSessions": "Deleted Sessions",
+      "billing.headerTotal":     "Total",
+      "billing.headerHit":       "Hit",
+      "billing.headerMiss":      "Miss",
+      "billing.headerOutput":    "Output",
+    },
     zh: {
       // ── Sidebar ──
       "sidebar.chat":     "会话",
@@ -750,6 +772,14 @@ const I18n = (() => {
       "sessions.actions.downloadHint": "用于调试",
       "sib.dir.tooltip":         "点击切换工作目录",
       "sib.dir.changePrompt":    "切换工作目录：",
+      "workspace.title":         "工作区",
+      "workspace.expand":        "打开工作区",
+      "workspace.collapse":      "收起工作区",
+      "workspace.refresh":       "刷新",
+      "workspace.empty":         "此文件夹为空",
+      "workspace.loading":       "加载中…",
+      "workspace.error":         "加载文件失败",
+      "workspace.downloadFailed": "下载失败",
       "sib.model.tooltip":       "点击切换模型",
       "sib.model.tooltip.busy":  "Agent 回复中，暂时无法切换模型",
       "sib.signal.tooltip":      "最近一次 LLM 响应延迟",
@@ -1175,6 +1205,7 @@ const I18n = (() => {
       "settings.models.btn.saved":         "已保存 ✓",
       "settings.models.btn.testing":       "测试中…",
       "settings.models.btn.test":          "测试",
+      "settings.models.link.topUp":        "充值 / 账户管理",
       "settings.models.btn.edit":          "编辑",
       "settings.models.btn.delete":        "删除",
       "settings.models.btn.cancel":        "取消",
@@ -1345,13 +1376,26 @@ const I18n = (() => {
       "billing.cacheHit":        "缓存命中",
       "billing.inputCacheHit":   "输入（命中缓存）",
       "billing.inputCacheMiss":  "输入（未命中缓存）",
-      "billing.output":          "输出",
-      "billing.tokenUsage":      "Token 用量",
+      "billing.totalTokens":     "Token 总消耗",
+      "billing.totalInput":      "总输入",
+      "billing.output":          "输出",      "billing.tokenUsage":      "Token 用量",
       "billing.costTrend":       "费用趋势",
       "billing.noData":          "暂无数据",
+
+      "error.insufficient_credit": "LLM（大模型）余额不足，请充值后继续使用。",
+      "error.insufficient_credit.action": "去充值",
+      "billing.sessions":        "会话消耗",
+      "billing.sessionId":       "会话",
+      "billing.tokens":          "Token",
+      "billing.lastRequest":     "最后请求",
+      "billing.noSessions":      "暂无会话数据",
+      "billing.deletedSessions": "已删除会话",
+      "billing.headerTotal":     "总消耗",
+      "billing.headerHit":       "命中",
+      "billing.headerMiss":      "未命中",
+      "billing.headerOutput":    "输出",
     }
   };
-
   // ── State ──────────────────────────────────────────────────────────────────
   let _lang = localStorage.getItem(STORAGE_KEY) || DEFAULT_LANG;
 

data/lib/clacky/web/index.html

@@ -313,6 +313,8 @@
     <!-- Chat panel -->
     <div id="chat-panel" style="display:none">
 
+      <!-- Chat column (messages + info bar + input) -->
+      <div id="chat-main">
       <div id="messages"></div>
       <!-- New message notification banner -->
       <div id="new-message-banner" class="new-message-banner" style="display:none">
@@ -334,6 +336,7 @@
         <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>
+          <div id="sib-submodel-panel" class="sib-submodel-panel" style="display:none"></div>
         </span>
         <span class="sib-sep sib-sep-after-model">│</span>
         <span id="sib-reasoning-wrap">
@@ -397,6 +400,35 @@
           <button id="btn-interrupt" style="display:none" title="Stop"></button>
         </div>
       </div>
+      </div><!-- /#chat-main -->
+
+      <!-- ── WORKSPACE PANEL (right) ──────────────────────────────────── -->
+      <aside id="workspace-panel" class="collapsed">
+        <div id="workspace-header">
+          <span id="workspace-title" data-i18n="workspace.title">Workspace</span>
+          <div class="workspace-header-actions">
+            <button id="btn-workspace-refresh" class="workspace-icon-btn" data-i18n-title="workspace.refresh" title="Refresh">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+              </svg>
+            </button>
+            <button id="btn-workspace-close" class="workspace-icon-btn" data-i18n-title="workspace.collapse" title="Collapse">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 18l6-6-6-6"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div id="workspace-tree" role="tree"></div>
+      </aside>
+
+      <!-- Collapsed-state opener tab -->
+      <button id="btn-workspace-open" data-i18n-title="workspace.expand" title="Open workspace" style="display:none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+        </svg>
+      </button>
     </div>
 
     <!-- ── CREATOR PANEL ─────────────────────────────────────────────── -->
@@ -1250,6 +1282,7 @@
 <script src="/ws.js"></script>
 <script src="/ws-dispatcher.js"></script>
 <script src="/sessions.js"></script>
+<script src="/workspace.js"></script>
 <script src="/datepicker.js"></script>
 <script src="/tasks.js"></script>
 <script src="/skills.js"></script>