openclacky 0.9.35 → 0.9.36

data/lib/clacky/web/app.css

@@ -1359,144 +1359,36 @@ body {
 
 /* ── Chat panel ──────────────────────────────────────────────────────────── */
 #chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
-#chat-header {
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 44px;
-}
-/* Title block — stacks the name + subtitle vertically so the header has
-   two lines of information (like Linear / Arc) without growing wider. */
-#chat-title-block {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;           /* allow ellipsis inside */
-  flex: 1;
-  line-height: 1.25;
-  gap: 2px;
-}
-#chat-title {
-  font-weight: 600;
-  font-size: 15px;
-  color: var(--color-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-#chat-subtitle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: var(--color-text-secondary);
-  opacity: 0.75;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-#chat-subtitle .chat-sub-source {
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-#chat-subtitle .chat-sub-dir {
-  font-family: var(--font-mono, monospace);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  opacity: 0.85;
-}
-#chat-subtitle .chat-sub-sep {
-  opacity: 0.35;
-  flex-shrink: 0;
-}
-
-/* Status badge styles - softed design */
-.status-idle,
-.status-running,
-.status-error {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: lowercase;
-}
 
-.status-idle {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-secondary);
-}
-
-[data-theme="light"] .status-idle {
-  background: rgba(0, 0, 0, 0.04);
-  color: var(--color-text-secondary);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.status-running {
-  background: rgba(34, 197, 94, 0.1);
-  color: var(--color-success);
-  border: 1px solid rgba(34, 197, 94, 0.2);
-}
-
-[data-theme="light"] .status-running {
-  background: rgba(34, 197, 94, 0.08);
-  color: #16a34a;
-  border: 1px solid rgba(34, 197, 94, 0.15);
-}
-
-.status-error {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--color-error);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-}
-
-[data-theme="light"] .status-error {
-  background: rgba(239, 68, 68, 0.08);
-  color: #dc2626;
-  border: 1px solid rgba(239, 68, 68, 0.15);
-}
-
-/* Delete session button in chat header */
-/* Back button in chat header — hidden on desktop, shown on mobile via media query */
+/* Mobile-only floating back button — replaces the old in-header back button.
+   Hidden on desktop; mobile media query enables it. Positioned absolutely so
+   it doesn't take layout space or add visual chrome on desktop. */
 .chat-back-btn {
   display: none;
+}
+.chat-back-floating {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 5;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: transparent;
-  border: none;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-secondary);
   border-radius: 6px;
   color: var(--color-text-secondary);
   cursor: pointer;
   padding: 0;
-  flex-shrink: 0;
   transition: background .15s, color .15s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
-.chat-back-btn:hover { background: var(--color-bg-hover); }
+.chat-back-floating:hover { background: var(--color-bg-hover); }
 
-.btn-delete-session {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  padding: 0;
-  transition: background .15s, color .15s;
-}
-.btn-delete-session:hover { background: var(--color-error-bg); color: var(--color-error); }
+/* Status badges (.status-idle/running/error) used to live in #chat-header.
+   That header has been removed; the bottom #session-info-bar uses its own
+   .sib-status-* classes instead. Legacy .status-* styles removed. */
 
 /* ── Messages ────────────────────────────────────────────────────────────── */
 #messages {
@@ -1508,6 +1400,61 @@ body {
   gap: 12px;
 }
 
+/* Empty-state hint: shown inside #messages when a session has no messages yet.
+   Designed to be quiet and low-contrast so it guides without distracting. */
+.chat-empty-hint {
+  margin: auto;                /* vertical + horizontal centering inside flex column */
+  max-width: 420px;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: var(--color-text-secondary);
+  user-select: none;
+  pointer-events: none;        /* purely decorative — don't block clicks/scroll */
+  opacity: 0.85;
+}
+.chat-empty-hint .chat-empty-icon {
+  color: var(--color-text-tertiary);
+  margin-bottom: 14px;
+  opacity: 0.55;
+}
+.chat-empty-hint .chat-empty-title {
+  color: var(--color-text-primary);
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.chat-empty-hint .chat-empty-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  margin-bottom: 18px;
+  opacity: 0.85;
+}
+.chat-empty-hint .chat-empty-tips {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+.chat-empty-hint .chat-empty-tips li {
+  position: relative;
+  padding-left: 14px;
+  line-height: 1.5;
+}
+.chat-empty-hint .chat-empty-tips li::before {
+  content: "·";
+  position: absolute;
+  left: 4px;
+  top: -1px;
+  opacity: 0.6;
+}
+
 /* New message notification banner */
 .new-message-banner {
   position: absolute;
@@ -5970,31 +5917,6 @@ body.setup-mode[data-theme="dark"] {
     padding: 0 12px;
   }
 
-  /* Chat sub-header: tighten padding */
-  #chat-header {
-    padding: 8px 12px;
-    gap: 8px;
-  }
-
-  /* Truncate long session titles */
-  #chat-title {
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    flex: 1;
-  }
-
-  /* Status badge: smaller on mobile */
-  .status-idle,
-  .status-running,
-  .status-error {
-    font-size: 10px;
-    padding: 1px 6px;
-    flex-shrink: 0;
-  }
-
   /* Session info bar: single-line, no hover-expand, font smaller */
   #session-info-bar {
     padding: 3px 12px;
@@ -6050,6 +5972,10 @@ body.setup-mode[data-theme="dark"] {
   .chat-back-btn {
     display: flex;
   }
+  /* Reserve top space in messages so floating back button doesn't overlap content */
+  #chat-panel #messages {
+    padding-top: 52px;
+  }
 
   /* Welcome page: vertically centered but shifted up, add horizontal padding */
   #welcome {

data/lib/clacky/web/app.js

@@ -437,9 +437,7 @@ WS.onEvent(ev => {
     case "session_renamed": {
       Sessions.patch(ev.session_id, { name: ev.name });
       Sessions.renderList();
-      if (ev.session_id === Sessions.activeId) {
-        $("chat-title").textContent = ev.name;
-      }
+      // Title is now shown only in the sidebar; chat-header element was removed.
       break;
     }
 
@@ -847,7 +845,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
 // On mobile: start with sidebar hidden
 if (_isMobile()) _closeSidebar();
 
-// Mobile back button in chat-header: tap to go back to welcome
+// Mobile floating back button (visible only on mobile via CSS): tap to go back to welcome.
 const _btnBack = document.querySelector(".chat-back-btn");
 if (_btnBack) _btnBack.addEventListener("click", () => Router.navigate("welcome"));
 
@@ -985,9 +983,14 @@ document.addEventListener("change", e => {
 if ($("theme-toggle-header")) {
   $("theme-toggle-header").addEventListener("click", () => Theme.toggle());
 }
-$("btn-delete-session").addEventListener("click", () => {
-  if (Sessions.activeId) Sessions.deleteSession(Sessions.activeId);
-});
+// btn-delete-session was removed with chat-header; deletion is now triggered from
+// the bottom session-info-bar actions dropdown (see Sessions._showActionsMenu).
+const _btnDeleteSession = $("btn-delete-session");
+if (_btnDeleteSession) {
+  _btnDeleteSession.addEventListener("click", () => {
+    if (Sessions.activeId) Sessions.deleteSession(Sessions.activeId);
+  });
+}
 
 // Load older history when the user scrolls to the top of the message list
 $("messages").addEventListener("scroll", () => {
@@ -1617,7 +1620,7 @@ window.bootAfterBrand = async function() {
       dropdown.innerHTML = "";
 
       models.forEach(m => {
-        console.log("[Model Switcher] Adding model:", m.model, "current:", currentModel);
+        console.log("[Model Switcher] Adding model:", m.model, "id:", m.id, "current:", currentModel);
         const opt = document.createElement("div");
         opt.className = "sib-model-option";
         if (m.model === currentModel) opt.classList.add("current");
@@ -1633,7 +1636,8 @@ window.bootAfterBrand = async function() {
           opt.appendChild(badge);
         }
 
-        opt.addEventListener("click", () => _switchModel(sessionId, m.model));
+        // Switch by id (stable across reorders/edits). Keep model name for UI update.
+        opt.addEventListener("click", () => _switchModel(sessionId, m.id, m.model));
         dropdown.appendChild(opt);
       });
       console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
@@ -1644,7 +1648,9 @@ window.bootAfterBrand = async function() {
   }
 
   // Switch session model via API
-  async function _switchModel(sessionId, newModel) {
+  // modelId — stable runtime id (required by backend)
+  // modelName — display name, used for optimistic UI update
+  async function _switchModel(sessionId, modelId, modelName) {
     const dropdown = $("sib-model-dropdown");
     if (dropdown) {
       dropdown.style.display = "none";
@@ -1655,20 +1661,20 @@ window.bootAfterBrand = async function() {
       const res = await fetch(`/api/sessions/${sessionId}/model`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ model: newModel })
+        body: JSON.stringify({ model_id: modelId })
       });
-      
+
       const data = await res.json();
-      
+
       if (!res.ok) {
         throw new Error(data.error || "Unknown error");
       }
-      
+
       // Update UI optimistically (will be confirmed by session_update broadcast)
       const sibModel = $("sib-model");
-      if (sibModel) sibModel.textContent = newModel;
-      
-      console.log(`Switched session ${sessionId} to model ${newModel}`);
+      if (sibModel) sibModel.textContent = modelName;
+
+      console.log(`Switched session ${sessionId} to model ${modelName} (${modelId})`);
     } catch (e) {
       console.error("Failed to switch model:", e);
       alert("Failed to switch model: " + e.message);

data/lib/clacky/web/i18n.js

@@ -46,6 +46,11 @@ const I18n = (() => {
       "chat.retry":          "Retry",
       "chat.copy":           "Copy",
       "chat.copied":         "Copied",
+      "chat.empty.title":    "Start the conversation",
+      "chat.empty.subtitle": "Ask anything, or use a skill to get going.",
+      "chat.empty.tip1":     "Type / to browse skills",
+      "chat.empty.tip2":     "Attach images, PDFs, or docs for context",
+      "chat.empty.tip3":     "Shift+Enter for a new line",
 
       // ── Session list ──
       "sessions.empty":         "No sessions yet",
@@ -422,6 +427,11 @@ const I18n = (() => {
       "chat.retry":          "重试",
       "chat.copy":           "复制",
       "chat.copied":         "已复制",
+      "chat.empty.title":    "开始新的对话",
+      "chat.empty.subtitle": "直接提问，或用一个 Skill 启动。",
+      "chat.empty.tip1":     "输入 / 浏览 Skill",
+      "chat.empty.tip2":     "可粘贴或拖入图片、PDF、文档",
+      "chat.empty.tip3":     "Shift+Enter 换行",
 
       // ── Session list ──
       "sessions.empty":         "暂无对话",

data/lib/clacky/web/index.html

@@ -234,24 +234,14 @@
 
     <!-- Chat panel -->
     <div id="chat-panel" style="display:none">
-      <header id="chat-header">
-        <!-- Mobile-only back button: shown inside a session -->
-        <button id="btn-back-mobile" class="chat-back-btn" title="Back">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M15 18l-6-6 6-6"/>
-          </svg>
-        </button>
-        <span id="chat-title-block">
-          <span id="chat-title">Session</span>
-          <span id="chat-subtitle"></span>
-        </span>
-        <span id="chat-status" class="status-idle">idle</span>
-        <button id="btn-delete-session" class="btn-delete-session" title="Delete session">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
-          </svg>
-        </button>
-      </header>
+      <!-- Mobile-only floating back button: shown inside a session on small screens.
+           Desktop: hidden. All other session info (title, status, dir, delete) is
+           provided by the bottom #session-info-bar. -->
+      <button id="btn-back-mobile" class="chat-back-btn chat-back-floating" title="Back">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 18l-6-6 6-6"/>
+        </svg>
+      </button>
       <div id="messages"></div>
       <!-- New message notification banner -->
       <div id="new-message-banner" class="new-message-banner" style="display:none">

data/lib/clacky/web/sessions.js

@@ -183,6 +183,75 @@ const Sessions = (() => {
     banner.style.display = "none";
   }
 
+  // ── Empty-state hint ──────────────────────────────────────────────────
+  //
+  // Shows a small centered hint inside #messages when the message list is
+  // empty (e.g. just-created session with no history). Uses a MutationObserver
+  // so we don't have to instrument every append/clear call site.
+
+  const _EMPTY_HINT_ID = "chat-empty-hint";
+
+  function _buildEmptyHintHtml() {
+    const title    = I18n.t("chat.empty.title");
+    const subtitle = I18n.t("chat.empty.subtitle");
+    const tip1     = I18n.t("chat.empty.tip1");
+    const tip2     = I18n.t("chat.empty.tip2");
+    const tip3     = I18n.t("chat.empty.tip3");
+    return `
+      <div class="chat-empty-icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        </svg>
+      </div>
+      <div class="chat-empty-title">${escapeHtml(title)}</div>
+      <div class="chat-empty-subtitle">${escapeHtml(subtitle)}</div>
+      <ul class="chat-empty-tips">
+        <li>${escapeHtml(tip1)}</li>
+        <li>${escapeHtml(tip2)}</li>
+        <li>${escapeHtml(tip3)}</li>
+      </ul>
+    `;
+  }
+
+  function _updateEmptyHint() {
+    const messages = $("messages");
+    if (!messages) return;
+    // Check if there's any real content besides the hint itself
+    const hasReal = Array.from(messages.children).some(
+      (el) => el.id !== _EMPTY_HINT_ID
+    );
+    const existing = document.getElementById(_EMPTY_HINT_ID);
+    // While history is still loading, don't flash the hint — wait until the
+    // first fetch completes so we know whether the session is actually empty.
+    const loading = !!(_activeId && _historyState[_activeId] && _historyState[_activeId].loading);
+    if (hasReal || loading) {
+      if (existing) existing.remove();
+    } else {
+      if (!existing) {
+        const el = document.createElement("div");
+        el.id = _EMPTY_HINT_ID;
+        el.className = "chat-empty-hint";
+        el.innerHTML = _buildEmptyHintHtml();
+        messages.appendChild(el);
+      }
+    }
+  }
+
+  function _initEmptyHint() {
+    const messages = $("messages");
+    if (!messages) return;
+    // Re-evaluate whenever children change (append/insertBefore/innerHTML="")
+    const observer = new MutationObserver(() => _updateEmptyHint());
+    observer.observe(messages, { childList: true });
+    // Re-render hint text on language change
+    document.addEventListener("langchange", () => {
+      const existing = document.getElementById(_EMPTY_HINT_ID);
+      if (existing) existing.innerHTML = _buildEmptyHintHtml();
+    });
+    // Initial paint
+    _updateEmptyHint();
+  }
+
   function _initNewMessageBanner() {
     const banner = $("new-message-banner");
     const messages = $("messages");
@@ -640,6 +709,9 @@ const Sessions = (() => {
       }
     } finally {
       state.loading = false;
+      // After loading finishes, re-evaluate the empty-state hint in case
+      // the session is genuinely empty (no events + no existing DOM content).
+      if (id === _activeId) _updateEmptyHint();
     }
   }
 
@@ -891,6 +963,7 @@ const Sessions = (() => {
     // ── Init ──────────────────────────────────────────────────────────────
     init() {
       _initNewMessageBanner();
+      _initEmptyHint();
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
       // Browsers block file:// navigation from http:// pages. Intercept clicks on
@@ -1260,8 +1333,8 @@ const Sessions = (() => {
             Sessions.patch(sessionId, { name: newName });
             Sessions.renderList();
             if (sessionId === Sessions.activeId) {
-              const titleEl = document.getElementById("chat-title");
-              if (titleEl) titleEl.textContent = newName;
+              // chat-header was removed — no title element to update here.
+              // Sidebar re-renders with the new name above.
             }
           } else {
             console.error("Rename failed:", await res.text());
@@ -1399,64 +1472,20 @@ const Sessions = (() => {
     },
 
     updateStatusBar(status) {
-      $("chat-status").textContent = status || "idle";
-      if (status === "running") {
-        $("chat-status").className = "status-running";
-      } else if (status === "error") {
-        $("chat-status").className = "status-error";
-      } else {
-        $("chat-status").className = "status-idle";
-      }
-      $("btn-interrupt").style.display = status === "running" ? "" : "none";
+      // chat-header was removed; status text is now shown in the bottom session-info-bar (#sib-status).
+      // Here we only update the interrupt button visibility.
+      const interrupt = $("btn-interrupt");
+      if (interrupt) interrupt.style.display = status === "running" ? "" : "none";
     },
 
     /**
-    /**
-     * Populate the chat header (title + subtitle) for the given session.
-     * Subtitle shows a source tag (Auto / Channel / Setup — no emoji) and
-     * the working directory — gives the user immediate context for what
-     * this session is without glancing down at the status bar.
+     * No-op: the chat header element (#chat-header) was removed. All session
+     * metadata (title, source, working dir, status) is now shown in the
+     * sidebar and the bottom #session-info-bar. Kept as a stub so existing
+     * call sites don't need to be updated.
      */
-    updateChatHeader(s) {
-      const titleEl = $("chat-title");
-      const subEl   = $("chat-subtitle");
-      if (!titleEl || !subEl) return;
-
-      if (!s) {
-        titleEl.textContent = "";
-        subEl.innerHTML = "";
-        subEl.style.display = "none";
-        return;
-      }
-
-      titleEl.textContent = s.name || _relativeTime(s.created_at);
-
-      // Build subtitle pieces. No emoji — keeps the UI clean and avoids
-      // the "AI-generated" feel that overuse of emoji creates.
-      const parts = [];
-      let sourceLabel = "";
-      if (s.source === "cron")          sourceLabel = I18n.t("sessions.badge.cron");
-      else if (s.source === "channel")  sourceLabel = I18n.t("sessions.badge.channel");
-      else if (s.source === "setup")    sourceLabel = I18n.t("sessions.badge.setup");
-
-      if (sourceLabel) {
-        parts.push(
-          `<span class="chat-sub-source">${escapeHtml(sourceLabel)}</span>`
-        );
-      }
-      if (s.working_dir) {
-        parts.push(
-          `<span class="chat-sub-dir" title="${escapeHtml(s.working_dir)}">${escapeHtml(s.working_dir)}</span>`
-        );
-      }
-
-      if (parts.length === 0) {
-        subEl.innerHTML = "";
-        subEl.style.display = "none";
-      } else {
-        subEl.innerHTML = parts.join(`<span class="chat-sub-sep">·</span>`);
-        subEl.style.display = "";
-      }
+    updateChatHeader(_s) {
+      // intentionally empty
     },
 
     /** Update the session info bar below the chat header with current session metadata. */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openclacky
 version: !ruby/object:Gem::Version
-  version: 0.9.35
+  version: 0.9.36
 platform: ruby
 authors:
 - windy