openclacky 0.9.35 → 0.9.37

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
@@ -954,8 +1027,14 @@ const Sessions = (() => {
       Sessions.renderList();
 
       try {
-        // Cursor: oldest created_at in the current list
+        // Cursor: oldest created_at in the current list, EXCLUDING pinned
+        // sessions. The backend always returns ALL pinned sessions on the
+        // first page (they bypass pagination), so their created_at is
+        // irrelevant for cursor calculation. Including them here would
+        // cause the cursor to jump too far back and skip sessions between
+        // the oldest pinned one and the real last-loaded non-pinned row.
         const oldest = _sessions.reduce((min, s) => {
+          if (s.pinned) return min;                       // ignore pinned
           if (!s.created_at) return min;
           return (!min || s.created_at < min) ? s.created_at : min;
         }, null);
@@ -1260,8 +1339,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 +1478,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.37
 platform: ruby
 authors:
 - windy