openclacky 1.2.12 → 1.2.13

data/lib/clacky/web/app.css

@@ -856,6 +856,43 @@ body {
   opacity: 0.5;
 }
 
+.session-search-group {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+.session-search-group + .session-search-group {
+  margin-top: 0.25rem;
+}
+
+.session-snippet {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+  line-height: 1.35;
+  opacity: 0.85;
+}
+.session-snippet mark {
+  background: var(--color-warning-bg, #fef3c7);
+  color: var(--color-text-primary);
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+.session-name__text mark {
+  background: var(--color-warning-bg, #fef3c7);
+  color: var(--color-text-primary);
+  padding: 0 1px;
+  border-radius: 2px;
+}
+
 /* Legacy .btn-new-inline — kept for compat, can be removed after cleanup */
 .btn-new-inline {
   display: none;
@@ -984,9 +1021,22 @@ body {
   z-index: 1000;
   animation: fadeIn 0.15s ease;
 }
+.session-context-menu {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
+  padding: 0.25rem;
+  min-width: 10rem;
+  z-index: 1001;
+  animation: fadeIn 0.15s ease;
+}
 [data-theme="dark"] .session-actions-menu {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
 }
+[data-theme="dark"] .session-context-menu {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+}
 .session-actions-menu-item {
   display: flex;
   align-items: center;
@@ -1622,7 +1672,7 @@ body {
    .sib-status-* classes instead. Legacy .status-* styles removed. */
 
 /* ── Messages ────────────────────────────────────────────────────────────── */
-#messages {
+.chat-messages-scroll {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -2108,6 +2158,15 @@ body {
 .tu-delta-ok    { color: #34d399; }   /* green — normal */
 .tu-delta-mid   { color: #f59e0b; }   /* yellow — moderate */
 .tu-delta-high  { color: #f87171; }   /* red — large */
+
+.tool-item .token-usage-line.tu-attached {
+  align-self: stretch;
+  margin: 0.25rem 0 0;
+  padding: 2px 0 0;
+  opacity: 0.55;
+  flex-wrap: wrap;
+}
+.tool-item .token-usage-line.tu-attached:hover { opacity: 0.95; }
 .tu-delta-neg   { color: var(--color-accent-primary); }  /* cyan — compression */
 
 /* Detail fields: hidden by default, revealed on hover */
@@ -2221,6 +2280,30 @@ body {
 .tool-item-stdout .ansi-black   { color: #5c6370; }
 .tool-item-stdout .ansi-bold    { font-weight: 700; }
 
+/* ── Diff block (rendered inline within edit/write tool-item) ─────────────── */
+.tool-item-diff {
+  margin: 0.25rem 0 0.25rem 1.25rem;
+  padding: 0.375rem 0.5rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  font-family: monospace;
+  line-height: 1.5;
+  max-height: 20rem;
+  overflow: auto;
+}
+.diff-line {
+  white-space: pre;
+  padding: 0 0.25rem;
+  border-radius: 2px;
+}
+.diff-line.diff-add  { background: rgba(46, 160,  67, 0.18); color: #98c379; }
+.diff-line.diff-del  { background: rgba(248,  81,  73, 0.18); color: #e06c75; }
+.diff-line.diff-hunk { color: var(--color-text-tertiary); font-style: italic; }
+.diff-line.diff-ctx  { color: var(--color-text-secondary); }
+.diff-line.diff-more { color: var(--color-text-tertiary); font-style: italic; margin-top: 0.25rem; }
+
 /* ── Thinking block (collapsible <think>...</think> sections) ─────────────── */
 .thinking-block {
   margin: 0 0 0.375rem 0;
@@ -9966,6 +10049,7 @@ body.setup-mode[data-theme="dark"] {
   background: var(--color-bg-secondary);
   margin-bottom: 0.5rem;
   overflow: hidden;
+  max-width: 48rem;
 }
 .media-row.is-expanded {
   background: var(--color-bg-secondary);
@@ -9988,25 +10072,28 @@ body.setup-mode[data-theme="dark"] {
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
-  padding: 1px;
+  padding: 2px;
 }
 .media-row-segmented button {
   background: transparent;
   border: none;
-  padding: 0.25rem 0.625rem;
+  padding: 0.3125rem 0.875rem;
   font-size: 0.75rem;
+  font-weight: 500;
   color: var(--color-text-secondary);
   border-radius: 5px;
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
   font-family: inherit;
 }
 .media-row-segmented button:hover:not(.is-active):not(:disabled) {
   color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
 }
 .media-row-segmented button.is-active {
   background: var(--color-button-primary);
   color: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 .media-row-segmented button:disabled {
   opacity: 0.4;
@@ -10108,3 +10195,121 @@ body.setup-mode[data-theme="dark"] {
   justify-content: flex-end;
   margin-top: 0.25rem;
 }
+
+.media-auto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.625rem 1rem;
+}
+.media-provider-line {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  margin-bottom: 0.625rem;
+}
+.media-provider-label {
+  color: var(--color-text-secondary);
+}
+.media-provider-value {
+  color: var(--color-text-primary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+.media-auto-readonly {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  padding: 0.4375rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  word-break: break-all;
+  min-height: 1.125rem;
+  line-height: 1.4;
+}
+.media-custom-fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.625rem;
+}
+.media-custom-readonly-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.media-custom-readonly-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+.media-custom-readonly-label {
+  flex: 0 0 auto;
+  min-width: 4.5rem;
+  color: var(--color-text-secondary);
+}
+.media-custom-readonly-value {
+  flex: 1 1 auto;
+  color: var(--color-text-primary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  word-break: break-all;
+}
+.media-row-btn-sm {
+  font-size: 0.75rem;
+  padding: 0.3125rem 0.875rem;
+}
+.media-row-detail .model-test-result {
+  margin-top: 0.5rem;
+  min-height: 1rem;
+}
+.media-row-detail .media-row-actions {
+  margin-top: 0.625rem;
+}
+
+/* ── Phase grouping (folded subagent runs like skill evolution) ────────── */
+.msg-phase {
+  align-self: stretch;
+  margin: 0.25rem 0;
+  border: 1px dashed var(--color-border-primary);
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+  font-size: 0.8125rem;
+}
+.msg-phase-summary {
+  cursor: pointer;
+  padding: 0.375rem 0.625rem;
+  color: var(--color-text-secondary);
+  list-style: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.msg-phase-summary::-webkit-details-marker { display: none; }
+.msg-phase-summary::before {
+  content: "\25B8";
+  font-size: 0.6875rem;
+  transition: transform 0.15s;
+}
+.msg-phase[open] .msg-phase-summary::before { transform: rotate(90deg); }
+.msg-phase-icon { font-size: 0.875rem; }
+.msg-phase-label { font-weight: 500; }
+.msg-phase-status { opacity: 0.7; font-size: 0.75rem; }
+.msg-phase-status-incomplete { color: var(--color-warning, #c97f00); }
+.msg-phase-body {
+  padding: 0.625rem 0.75rem 0.75rem;
+  border-top: 1px dashed var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.msg-phase-body .msg { opacity: 0.9; }
+
+.msg-phase-empty {
+  opacity: 0.55;
+  border-style: dotted;
+}
+.msg-phase-empty .msg-phase-summary { cursor: default; }
+.msg-phase-empty .msg-phase-summary::before { visibility: hidden; }
+.msg-phase-empty .msg-phase-body { display: none; }

data/lib/clacky/web/app.js

@@ -335,15 +335,15 @@ const Modal = (() => {
         $("prompt-modal-ok").onclick = null;
         $("prompt-modal-cancel").onclick = null;
         input.onkeydown = null;
+        unbindEnter();
         resolve(result);
       };
 
       $("prompt-modal-ok").onclick = () => cleanup(input.value.trim() || null);
       $("prompt-modal-cancel").onclick = () => cleanup(null);
-      
-      // Support Enter to confirm, Escape to cancel
+
+      const unbindEnter = IME.bindEnter(input, () => cleanup(input.value.trim() || null));
       input.onkeydown = (e) => {
-        if (e.key === "Enter") cleanup(input.value.trim() || null);
         if (e.key === "Escape") cleanup(null);
       };
     });
@@ -369,6 +369,7 @@ const Modal = (() => {
         $("rename-modal-overlay").onclick = null;
         input.onkeydown = null;
         input.oninput = null;
+        unbindEnter();
         resolve(result);
       };
 
@@ -386,9 +387,9 @@ const Modal = (() => {
 
       $("rename-modal-save").onclick = saveHandler;
       $("rename-modal-cancel").onclick = () => cleanup(null);
-      
+
+      const unbindEnter = IME.bindEnter(input, saveHandler);
       input.onkeydown = (e) => {
-        if (e.key === "Enter") { e.preventDefault(); saveHandler(); }
         if (e.key === "Escape") cleanup(null);
       };
 

data/lib/clacky/web/i18n.js

@@ -69,6 +69,9 @@ const I18n = (() => {
       // ── Session list ──
       "sessions.empty":         "No sessions yet",
       "sessions.confirmDelete": "Delete session {{name}}? This cannot be undone.",
+      "sessions.search.byName": "Title matches ({{n}})",
+      "sessions.search.byContent": "Content matches ({{n}})",
+      "sessions.search.contentEmpty": "No content matches",
       "sessions.meta":          "{{tasks}} tasks · ${{cost}}",
       "sessions.metaTasks":     "{{n}} tasks",
       "sessions.deleteTitle":   "Delete session",
@@ -122,6 +125,7 @@ const I18n = (() => {
       "sessions.newSession":    "+ New Session",
       "sessions.actions.pin":   "Pin",
       "sessions.actions.unpin": "Unpin",
+      "sessions.actions.fork":  "Fork",
       "sessions.actions.rename": "Rename",
       "sessions.actions.delete": "Delete",
       "sessions.newSessionAdvanced": "More Options",
@@ -515,16 +519,19 @@ const I18n = (() => {
       "settings.media.field.apiKey":  "API Key",
       "settings.media.field.provider":"Provider",
       "settings.media.off.hint":               "Disabled.",
-      "settings.media.auto.followsDefault":    "Follows default chat model",
+      "settings.media.auto.followsDefault":    "Auto-enabled via your default provider",
+      "settings.media.auto.stale":             "Selected model {{requested}} is unavailable on the current provider — using {{current}} instead.",
       "settings.media.auto.noDefaultModel":    "Set a default chat model first.",
       "settings.media.auto.unsupported":       "Current provider has no built-in model for this kind. Switch to Custom.",
       "settings.media.auto.comingSoon":        "Not available yet — no built-in providers.",
-      "settings.media.auto.disabledTitle":     "No built-in provider available — use Custom.",
+      "settings.media.auto.disabledTitle":     "Provider has no built-in model — use Custom.",
       "settings.media.action.edit":   "Edit",
       "settings.media.action.save":   "Save",
       "settings.media.action.cancel": "Cancel",
       "settings.media.action.saving": "Saving…",
       "settings.media.action.saved":  "Saved",
+      "settings.media.action.test":   "Test",
+      "settings.media.testing":       "Testing connection…",
       "settings.media.apiKey.placeholder": "Enter API key",
       "settings.media.apiKey.required":    "API key required",
       "settings.media.model.required":     "Model name required",
@@ -803,6 +810,9 @@ const I18n = (() => {
       // ── Session list ──
       "sessions.empty":         "暂无会话",
       "sessions.confirmDelete": "删除会话 {{name}}？此操作不可撤销。",
+      "sessions.search.byName": "标题匹配 ({{n}})",
+      "sessions.search.byContent": "内容匹配 ({{n}})",
+      "sessions.search.contentEmpty": "没有内容匹配",
       "sessions.meta":          "{{tasks}} 个任务 · ${{cost}}",
       "sessions.metaTasks":     "{{n}} 个任务",
       "sessions.deleteTitle":   "删除会话",
@@ -858,6 +868,7 @@ const I18n = (() => {
       "sessions.loadMore":      "加载更多会话",
       "sessions.actions.pin":   "置顶",
       "sessions.actions.unpin": "取消置顶",
+      "sessions.actions.fork":  "复制会话",
       "sessions.actions.rename": "重命名",
       "sessions.actions.delete": "删除",
       "sessions.loadingMore":   "加载中…",
@@ -1248,16 +1259,19 @@ const I18n = (() => {
       "settings.media.field.apiKey":  "API Key",
       "settings.media.field.provider":"服务商",
       "settings.media.off.hint":               "已关闭。",
-      "settings.media.auto.followsDefault":    "跟随默认聊天模型",
+      "settings.media.auto.followsDefault":    "该服务商已支持，已自动启用",
+      "settings.media.auto.stale":             "你选定的 {{requested}} 在当前服务商不可用，已临时使用 {{current}}。",
       "settings.media.auto.noDefaultModel":    "请先设置默认聊天模型。",
       "settings.media.auto.unsupported":       "当前服务商无内置模型，请切换到「自定义」。",
       "settings.media.auto.comingSoon":        "暂无内置服务商，敬请期待。",
-      "settings.media.auto.disabledTitle":     "暂无内置服务商，请使用自定义。",
+      "settings.media.auto.disabledTitle":     "服务商尚未配置支持，请使用自定义",
       "settings.media.action.edit":   "编辑",
       "settings.media.action.save":   "保存",
       "settings.media.action.cancel": "取消",
       "settings.media.action.saving": "保存中…",
       "settings.media.action.saved":  "已保存",
+      "settings.media.action.test":   "测试",
+      "settings.media.testing":       "测试连接中…",
       "settings.media.apiKey.placeholder": "请输入 API Key",
       "settings.media.apiKey.required":    "请填写 API Key",
       "settings.media.model.required":     "请填写模型名称",

data/lib/clacky/web/index.html

@@ -316,7 +316,7 @@
 
       <!-- Chat column (messages + info bar + input) -->
       <div id="chat-main">
-      <div id="messages"></div>
+      <div id="messages" class="chat-messages-scroll"></div>
       <!-- New message notification banner -->
       <div id="new-message-banner" class="new-message-banner" style="display:none">
         <span data-i18n="chat.newMessageHint">New messages ↓</span>
@@ -1296,6 +1296,7 @@
 <script src="/vendor/hljs/highlight.min.js"></script>
 <script src="/vendor/katex/katex.min.js"></script>
 <script src="/vendor/katex/auto-render.min.js"></script>
+<script src="/utils.js"></script>
 <script src="/i18n.js"></script>
 <script src="/auth.js"></script>
 <script src="/theme.js"></script>