openclacky 1.2.6 → 1.2.7

data/lib/clacky/web/app.css

@@ -1514,7 +1514,106 @@ body {
 #btn-welcome-new:hover { background: var(--color-button-primary-hover); }
 
 /* ── Chat panel ──────────────────────────────────────────────────────────── */
-#chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
+#chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
+#chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
+
+/* ── Workspace panel (right file browser) ───────────────────────────────── */
+#workspace-panel {
+  width: 280px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--color-border-primary);
+  background: var(--color-bg-primary);
+  overflow: hidden;
+  transition: width var(--transition-base);
+}
+#workspace-panel.collapsed { width: 0; border-left: none; }
+#workspace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0 0.5rem 0 0.75rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.workspace-header-actions { display: flex; gap: 0.125rem; }
+.workspace-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+.workspace-icon-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+#workspace-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.375rem 0.25rem;
+  font-size: 0.8125rem;
+}
+.wt-node { user-select: none; }
+.wt-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1875rem 0.375rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.wt-row:hover { background: var(--color-bg-hover); }
+.wt-caret {
+  display: inline-flex;
+  width: 0.875rem;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition: transform var(--transition-base);
+}
+.wt-caret.open { transform: rotate(90deg); }
+.wt-caret.leaf { visibility: hidden; }
+.wt-icon { display: inline-flex; flex-shrink: 0; color: var(--color-text-secondary); }
+.wt-name { overflow: hidden; text-overflow: ellipsis; }
+.wt-size { margin-left: auto; padding-left: 0.5rem; font-size: 0.6875rem; color: var(--color-text-tertiary, var(--color-text-secondary)); flex-shrink: 0; }
+.wt-children { margin-left: 0.75rem; }
+.wt-empty, .wt-loading, .wt-error {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+.wt-error { color: var(--color-danger, #d23); }
+
+/* Collapsed-state opener tab — floats at the right edge of the chat area */
+#btn-workspace-open {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+#btn-workspace-open:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
 
 /* Mobile-only floating back button — replaces the old in-header back button.
    Hidden on desktop; mobile media query enables it. Positioned absolutely so
@@ -1971,6 +2070,14 @@ body {
   opacity: 0.5;
   cursor: not-allowed;
 }
+.msg-error a {
+  color: var(--color-error);
+  font-weight: 600;
+  text-decoration: underline;
+}
+.msg-error a:hover {
+  opacity: 0.8;
+}
 .msg-success   { color: var(--color-success); align-self: flex-start; font-size: 0.8125rem; }
 .tool-name     { color: var(--color-warning); font-weight: 600; }
 .progress-msg  { color: var(--color-accent-primary); font-size: 0.75rem; align-self: center; }
@@ -2551,6 +2658,99 @@ body {
   color: var(--color-accent-primary);
 }
 
+.sib-submodel-default-tag {
+  margin-left: 0.5rem;
+  font-size: 0.5625rem;
+  padding: 1px 0.3125rem;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
+  color: var(--color-text-secondary);
+  opacity: 0.8;
+}
+
+.sib-submodel-toggle {
+  margin-left: 0.375rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+}
+.sib-submodel-toggle:hover {
+  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  color: var(--color-accent-primary);
+}
+.sib-submodel-toggle[aria-expanded="true"] {
+  background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
+  color: var(--color-accent-primary);
+}
+.sib-submodel-toggle[aria-expanded="true"] svg {
+  transform: rotate(90deg);
+}
+.sib-submodel-toggle svg {
+  transition: transform 0.18s ease;
+}
+
+.sib-model-option.submodel-open {
+  background: var(--color-bg-hover);
+}
+
+.sib-submodel-panel {
+  position: fixed;
+  min-width: 11rem;
+  max-width: 16rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 10000;
+  max-height: 18.75rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+.sib-submodel-panel-header {
+  padding: 0.375rem 0.875rem 0.4375rem;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
+  margin-bottom: 0.25rem;
+}
+.sib-submodel-row {
+  padding: 0.5rem 0.875rem;
+  font-size: 0.7rem;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.sib-submodel-row:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-accent-primary);
+}
+.sib-submodel-row.current {
+  background: var(--color-bg-hover);
+  font-weight: 600;
+  color: var(--color-accent-primary);
+}
+.sib-submodel-row-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ── Model switcher benchmark banner & latency column ──────────────────────
    The banner sits at the top of the dropdown with a subtle border so it
    visually separates from the scrollable model list below. The ⚡ button is
@@ -2638,6 +2838,15 @@ body {
   white-space: nowrap;
   max-width: 100%;
 }
+.sib-model-option .sib-model-name-override {
+  font-size: 0.6875rem;
+  color: var(--color-accent-primary);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
 .sib-model-option .sib-model-right {
   display: inline-flex;
   align-items: center;
@@ -3691,6 +3900,33 @@ body {
   color: var(--color-error);
   background: color-mix(in srgb, var(--color-error) 8%, transparent);
 }
+a.btn-card-grid-action {
+  text-decoration: none;
+}
+.model-card-grid-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+}
+.model-card-grid-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  padding: 0.125rem 0.25rem;
+  border-radius: 4px;
+  transition: color 0.15s;
+}
+.model-card-grid-link:hover {
+  color: var(--color-accent-primary);
+  text-decoration: underline;
+}
+.model-card-grid-link svg {
+  opacity: 0.7;
+  flex-shrink: 0;
+}
 
 /* ── Settings Toggle List ───────────────────────────────────────────────────── */
 .settings-toggle-list {

data/lib/clacky/web/app.js

@@ -158,7 +158,6 @@ const Router = (() => {
         }
         _setHash(`session/${id}`);
         $("chat-panel").style.display       = "flex";
-        $("chat-panel").style.flexDirection = "column";
         Sessions.updateChatHeader(s);
         Sessions.updateStatusBar(s.status);
         Sessions.updateInfoBar(s);

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",
@@ -681,6 +690,9 @@ const I18n = (() => {
       "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",
     },
 
     zh: {
@@ -750,6 +762,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 +1195,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":        "取消",
@@ -1349,6 +1370,9 @@ const I18n = (() => {
       "billing.tokenUsage":      "Token 用量",
       "billing.costTrend":       "费用趋势",
       "billing.noData":          "暂无数据",
+
+      "error.insufficient_credit": "LLM（大模型）余额不足，请充值后继续使用。",
+      "error.insufficient_credit.action": "去充值",
     }
   };
 

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>