@chrysb/alphaclaw 0.8.3-beta.3 → 0.8.3-beta.5

package/lib/public/js/app.js

@@ -217,13 +217,6 @@ const App = () => {
           setSelectedChatSessionKey(sessionKey);
           if (!isChatRoute) setLocation("/chat");
         }}
-        onStartChat=${() => {
-          if (!isChatRoute) {
-            setLocation("/chat");
-            return;
-          }
-          window.dispatchEvent(new Event("alphaclaw:chat-new"));
-        }}
       />
       <div
         class=${`sidebar-resizer ${shellState.isResizingSidebar ? "is-resizing" : ""}`}

package/lib/public/js/components/cron-tab/cron-job-settings-card.js

@@ -4,6 +4,7 @@ import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { SegmentedControl } from "../segmented-control.js";
 import { ToggleSwitch } from "../toggle-switch.js";
+import { getSessionDisplayLabel } from "../../lib/session-keys.js";
 import {
   formatCronScheduleLabel,
   formatNextRunRelativeMs,
@@ -89,7 +90,9 @@ export const CronJobSettingsCard = ({
         if (!key) return;
         if (key === selectedKey) selectedPresent = true;
         const label = String(
-          sessionRow?.label || sessionRow?.key || "Session",
+          getSessionDisplayLabel(sessionRow) ||
+            sessionRow?.key ||
+            "Session",
         ).trim();
         const dedupeKey = label.toLowerCase();
         if (seenLabels.has(dedupeKey)) return;
@@ -193,7 +196,11 @@ export const CronJobSettingsCard = ({
               ${deliverySessionOptions.map(
                 (sessionRow) => html`
                   <option value=${String(sessionRow?.key || "")}>
-                    ${String(sessionRow?.label || sessionRow?.key || "Session")}
+                    ${String(
+                      getSessionDisplayLabel(sessionRow) ||
+                        sessionRow?.key ||
+                        "Session",
+                    )}
                   </option>
                 `,
               )}

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -18,7 +18,10 @@ import {
   kNoDestinationSessionValue,
   useDestinationSessionSelection,
 } from "../../hooks/use-destination-session-selection.js";
-import { kDestinationSessionFilter } from "../../lib/session-keys.js";
+import {
+  getSessionDisplayLabel,
+  kDestinationSessionFilter,
+} from "../../lib/session-keys.js";
 
 const html = htm.bind(h);
 
@@ -419,7 +422,8 @@ export const GmailSetupWizard = ({
                         ${selectableAgentSessions.map(
                           (sessionRow) => html`
                             <option value=${sessionRow.key}>
-                              ${sessionRow.label || sessionRow.key}
+                              ${getSessionDisplayLabel(sessionRow) ||
+                              sessionRow.key}
                             </option>
                           `,
                         )}

package/lib/public/js/components/icons.js

@@ -208,6 +208,19 @@ export const ChatVoiceLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const Chat4LineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M5.76282 17H20V5H4V18.3851L5.76282 17ZM6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455Z"
+    />
+  </svg>
+`;
+
 export const FileMusicLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/routes/chat-route.js

@@ -2,6 +2,7 @@ import { h } from "preact";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -10,13 +11,27 @@ import htm from "htm";
 import { marked } from "marked";
 import { authFetch } from "../../lib/api.js";
 import { kChatSessionDraftsStorageKey } from "../../lib/storage-keys.js";
+import { getSessionDisplayLabel } from "../../lib/session-keys.js";
 import { showToast } from "../toast.js";
 
 const html = htm.bind(h);
-const kNewChatEventName = "alphaclaw:chat-new";
 const kWsReconnectMaxAttempts = 8;
 const kAutoscrollBottomThresholdPx = 40;
 const kChatDebugQueryFlag = "chatDebug";
+const kComposerMaxLines = 5;
+const kComposerFontSizePx = 12;
+const kComposerLineHeight = 1.4;
+const kComposerPaddingYPx = 20;
+
+const resizeComposerTextarea = (element) => {
+  if (!element) return;
+  const linePx = kComposerFontSizePx * kComposerLineHeight;
+  const minH = linePx + kComposerPaddingYPx;
+  const maxH = linePx * kComposerMaxLines + kComposerPaddingYPx;
+  element.style.height = "auto";
+  const next = Math.min(Math.max(element.scrollHeight, minH), maxH);
+  element.style.height = `${next}px`;
+};
 
 const buildMessage = ({
   role = "assistant",
@@ -174,8 +189,10 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
   const [activeRunBySession, setActiveRunBySession] = useState({});
   const [connectionError, setConnectionError] = useState("");
   const [historyLoading, setHistoryLoading] = useState(false);
+  const [assistantStreamStarted, setAssistantStreamStarted] = useState(false);
   const wsRef = useRef(null);
   const threadRef = useRef(null);
+  const composerRef = useRef(null);
   const reconnectTimerRef = useRef(null);
   const reconnectAttemptsRef = useRef(0);
   const selectedSessionKeyRef = useRef(selectedSessionKey);
@@ -206,6 +223,14 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
     selectedSessionKeyRef.current = selectedSessionKey;
   }, [selectedSessionKey]);
 
+  useEffect(() => {
+    setAssistantStreamStarted(false);
+  }, [selectedSessionKey]);
+
+  useLayoutEffect(() => {
+    resizeComposerTextarea(composerRef.current);
+  }, [draft, selectedSessionKey]);
+
   useEffect(() => {
     if (!selectedSessionKey) return;
     setDraft(String(draftBySession[selectedSessionKey] || ""));
@@ -242,25 +267,6 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
     [messagesBySession, selectedSessionKey],
   );
 
-  useEffect(() => {
-    const handleNewChat = () => {
-      if (!selectedSessionKey) return;
-      setMessagesBySession((currentMap) => ({
-        ...currentMap,
-        [selectedSessionKey]: [],
-      }));
-      setDraft("");
-      setDraftBySession((currentMap) => ({
-        ...currentMap,
-        [selectedSessionKey]: "",
-      }));
-    };
-    window.addEventListener(kNewChatEventName, handleNewChat);
-    return () => {
-      window.removeEventListener(kNewChatEventName, handleNewChat);
-    };
-  }, [selectedSessionKey]);
-
   useEffect(() => {
     let mounted = true;
 
@@ -294,6 +300,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         setIsConnected(false);
         setStreaming(false);
         setSending(false);
+        setAssistantStreamStarted(false);
         setHistoryLoading(false);
         if (realtimeDisabledRef.current) return;
         if (reconnectAttemptsRef.current >= kWsReconnectMaxAttempts) return;
@@ -368,6 +375,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           if (!chunkSessionKey || !messageId) return;
           setSending(false);
           setStreaming(true);
+          setAssistantStreamStarted(true);
           setMessagesBySession((currentMap) => {
             const currentMessages = currentMap[chunkSessionKey] || [];
             const lastMessage = currentMessages[currentMessages.length - 1];
@@ -424,6 +432,8 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
             payload.sessionKey || selectedSessionKeyRef.current || "",
           );
           if (!toolSessionKey) return;
+          setSending(false);
+          setAssistantStreamStarted(true);
           const toolPhase = String(payload.phase || "").toLowerCase();
           const toolCall =
             payload?.toolCall && typeof payload.toolCall === "object"
@@ -552,6 +562,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           );
           const runId = String(payload.runId || "");
           if (!nextSessionKey || !runId) return;
+          setSending(false);
           setActiveRunBySession((currentMap) => ({
             ...currentMap,
             [nextSessionKey]: runId,
@@ -572,6 +583,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           }
           setSending(false);
           setStreaming(false);
+          setAssistantStreamStarted(false);
           setHistoryLoading(false);
           if (doneSessionKey && ws && ws.readyState === 1) {
             setHistoryLoading(true);
@@ -592,6 +604,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         if (payload.type === "error") {
           setSending(false);
           setStreaming(false);
+          setAssistantStreamStarted(false);
           setHistoryLoading(false);
           const errorSessionKey = String(
             payload.sessionKey || selectedSessionKeyRef.current || "",
@@ -791,6 +804,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
       ...currentMap,
       [selectedSessionKey]: "",
     }));
+    setAssistantStreamStarted(false);
     setSending(true);
     setMessagesBySession((currentMap) => ({
       ...currentMap,
@@ -829,8 +843,20 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
     });
     setStreaming(false);
     setSending(false);
+    setAssistantStreamStarted(false);
   }, [appendDebugEvent, selectedSessionKey]);
 
+  const handleComposerKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Enter") return;
+      if (event.shiftKey) return;
+      if (event.isComposing) return;
+      event.preventDefault();
+      handleSend();
+    },
+    [handleSend],
+  );
+
   const rawHistory = selectedSessionKey
     ? rawHistoryBySession[selectedSessionKey]
     : null;
@@ -844,7 +870,8 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         <div>
           <div class="chat-route-title">Chat</div>
           <div class="chat-route-subtitle">
-            ${selectedSession?.label || "Pick a session in the sidebar"}
+            ${getSessionDisplayLabel(selectedSession) ||
+            "Pick a session in the sidebar"}
           </div>
           ${connectionError
             ? html`<div class="chat-route-warning">${connectionError}</div>`
@@ -1024,14 +1051,12 @@ ${JSON.stringify(
                     })()}
                   `,
                 )}
-        ${selectedSessionKey && (sending || streaming)
+        ${selectedSessionKey &&
+        (sending || streaming) &&
+        !assistantStreamStarted
           ? html`
               <div class="chat-bubble is-assistant chat-typing-indicator">
-                <div class="chat-bubble-meta">
-                  <span>Agent</span>
-                  <span>${isConnected ? "typing..." : "reconnecting..."}</span>
-                </div>
-                <div class="chat-typing-dots">
+                <div class="chat-typing-dots" aria-hidden="true">
                   <span></span><span></span><span></span>
                 </div>
               </div>
@@ -1055,12 +1080,15 @@ ${JSON.stringify(
       <div class="chat-composer">
         <textarea
           class="chat-composer-input"
+          ref=${composerRef}
+          rows=${1}
           placeholder=${selectedSessionKey
-            ? "Type a message..."
+            ? "Message… (Enter to send, Shift+Enter for newline)"
             : "Select a session to start"}
           value=${draft}
           disabled=${!selectedSessionKey || sending || !isConnected}
           oninput=${handleDraftInput}
+          onkeydown=${handleComposerKeyDown}
         ></textarea>
         <div class="chat-composer-actions">
           ${streaming
@@ -1085,7 +1113,7 @@ ${JSON.stringify(
             !String(draft || "").trim()}
             onclick=${handleSend}
           >
-            ${sending || streaming ? "Sending..." : "Send"}
+            ${sending ? "Sending..." : "Send"}
           </button>
         </div>
       </div>

package/lib/public/js/components/session-select-field.js

@@ -1,6 +1,9 @@
 import { h } from "preact";
 import htm from "htm";
-import { getSessionRowKey } from "../lib/session-keys.js";
+import {
+  getSessionDisplayLabel,
+  getSessionRowKey,
+} from "../lib/session-keys.js";
 
 const html = htm.bind(h);
 
@@ -54,7 +57,11 @@ export const SessionSelectField = ({
               ${sessions.map(
                 (sessionRow) => html`
                   <option value=${getSessionRowKey(sessionRow)}>
-                    ${String(sessionRow?.label || getSessionRowKey(sessionRow) || "Session")}
+                    ${String(
+                      getSessionDisplayLabel(sessionRow) ||
+                        getSessionRowKey(sessionRow) ||
+                        "Session",
+                    )}
                   </option>
                 `,
               )}

package/lib/public/js/components/sidebar.js

@@ -1,5 +1,5 @@
 import { h } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import htm from "htm";
 import {
   AddLineIcon,
@@ -7,7 +7,8 @@ import {
   BarChartLineIcon,
   Brain2LineIcon,
   BracesLineIcon,
-  ChatVoiceLineIcon,
+  Chat4LineIcon,
+  ChevronDownIcon,
   ComputerLineIcon,
   EyeLineIcon,
   FolderLineIcon,
@@ -21,7 +22,17 @@ import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
 import { UpdateModal } from "./update-modal.js";
-import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
+import {
+  readUiSettings,
+  updateUiSettings,
+  writeUiSettings,
+} from "../lib/ui-settings.js";
+import {
+  getAgentIdFromSessionKey,
+  getSessionChannelForIcon,
+  getSessionDisplayLabel,
+  getSessionRowKey,
+} from "../lib/session-keys.js";
 
 const html = htm.bind(h);
 const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
@@ -29,6 +40,16 @@ const kBrowsePanelMinHeightPx = 120;
 const kBrowseBottomMinHeightPx = 120;
 const kBrowseResizerHeightPx = 6;
 const kDefaultBrowseBottomPanelHeightPx = 260;
+const kChatSidebarCollapsedAgentIdsKey = "chatSidebarCollapsedAgentIds";
+const kChatChannelIconSrc = {
+  telegram: "/assets/icons/telegram.svg",
+  discord: "/assets/icons/discord.svg",
+  slack: "/assets/icons/slack.svg",
+};
+const readChatSidebarCollapsedAgentIds = () => {
+  const raw = readUiSettings()[kChatSidebarCollapsedAgentIdsKey];
+  return Array.isArray(raw) ? raw : [];
+};
 const kSidebarNavIconsById = {
   cron: AlarmLineIcon,
   usage: BarChartLineIcon,
@@ -97,7 +118,6 @@ export const AppSidebar = ({
   chatSessions = [],
   selectedChatSessionKey = "",
   onSelectChatSession = () => {},
-  onStartChat = () => {},
 }) => {
   const browseLayoutRef = useRef(null);
   const browseBottomPanelRef = useRef(null);
@@ -107,6 +127,53 @@ export const AppSidebar = ({
   );
   const [isResizingBrowsePanels, setIsResizingBrowsePanels] = useState(false);
   const [updateModalOpen, setUpdateModalOpen] = useState(false);
+  const [collapsedChatAgentIds, setCollapsedChatAgentIds] = useState(() =>
+    readChatSidebarCollapsedAgentIds(),
+  );
+
+  const chatSessionGroups = useMemo(() => {
+    const rows = Array.isArray(chatSessions) ? chatSessions : [];
+    const order = [];
+    const byAgent = new Map();
+    for (const row of rows) {
+      const aid = String(
+        row.agentId ||
+          getAgentIdFromSessionKey(getSessionRowKey(row)) ||
+          "unknown",
+      );
+      if (!byAgent.has(aid)) {
+        byAgent.set(aid, {
+          agentId: aid,
+          agentLabel: String(row.agentLabel || "").trim() || aid,
+          sessions: [],
+        });
+        order.push(aid);
+      }
+      byAgent.get(aid).sessions.push(row);
+    }
+    const groups = order.map((aid) => byAgent.get(aid));
+    groups.sort((a, b) => {
+      if (a.agentId === "main" && b.agentId !== "main") return -1;
+      if (b.agentId === "main" && a.agentId !== "main") return 1;
+      return a.agentLabel.localeCompare(b.agentLabel);
+    });
+    return groups;
+  }, [chatSessions]);
+
+  const toggleChatAgentCollapsed = (agentId) => {
+    const id = String(agentId || "");
+    setCollapsedChatAgentIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      const arr = Array.from(next);
+      updateUiSettings((s) => ({
+        ...s,
+        [kChatSidebarCollapsedAgentIdsKey]: arr,
+      }));
+      return arr;
+    });
+  };
 
   useEffect(() => {
     const settings = readUiSettings();
@@ -219,7 +286,7 @@ export const AppSidebar = ({
         title="Chat"
         onclick=${() => onSelectSidebarTab("chat")}
       >
-        <${ChatVoiceLineIcon} className="sidebar-tab-icon" />
+        <${Chat4LineIcon} className="sidebar-tab-icon" />
       </button>
     </div>
     <div
@@ -306,31 +373,67 @@ export const AppSidebar = ({
     >
       <div class="sidebar-chat-header">
         <div class="sidebar-label sidebar-chat-label">Sessions</div>
-        <button
-          type="button"
-          class="sidebar-chat-new-button"
-          onclick=${onStartChat}
-          title="New chat"
-          aria-label="New chat"
-        >
-          <${AddLineIcon} className="sidebar-chat-new-icon" />
-        </button>
       </div>
       <div class="sidebar-chat-sessions-list">
         ${chatSessions.length === 0
           ? html`<div class="sidebar-chat-empty">No sessions found</div>`
-          : chatSessions.map(
-              (sessionRow) => html`
-                <button
-                  key=${sessionRow.key}
-                  class=${`sidebar-chat-session-item ${selectedChatSessionKey === sessionRow.key ? "active" : ""}`}
-                  onclick=${() => onSelectChatSession(sessionRow.key)}
-                  title=${sessionRow.label || sessionRow.key}
-                >
-                  <span class="sidebar-chat-session-name"
-                    >${sessionRow.label || sessionRow.key}</span
+          : chatSessionGroups.map(
+              (group) => html`
+                <div key=${group.agentId} class="sidebar-chat-agent-group">
+                  <button
+                    type="button"
+                    class="sidebar-chat-agent-toggle"
+                    onclick=${() => toggleChatAgentCollapsed(group.agentId)}
+                    aria-expanded=${!collapsedChatAgentIds.includes(
+                      group.agentId,
+                    )}
                   >
-                </button>
+                    <span
+                      class=${`sidebar-chat-agent-chevron ${collapsedChatAgentIds.includes(group.agentId) ? "is-collapsed" : ""}`}
+                      aria-hidden="true"
+                    >
+                      <${ChevronDownIcon} className="sidebar-chat-agent-chevron-icon" />
+                    </span>
+                    <span class="sidebar-chat-agent-label">${group.agentLabel}</span>
+                  </button>
+                  ${collapsedChatAgentIds.includes(group.agentId)
+                    ? null
+                    : html`
+                        <div class="sidebar-chat-agent-sessions">
+                          ${group.sessions.map((sessionRow) => {
+                            const displayLabel = getSessionDisplayLabel(sessionRow);
+                            const channelIconSrc =
+                              kChatChannelIconSrc[
+                                String(
+                                  getSessionChannelForIcon(sessionRow) || "",
+                                ).toLowerCase()
+                              ] || "";
+                            return html`
+                              <button
+                                key=${sessionRow.key}
+                                class=${`sidebar-chat-session-item ${selectedChatSessionKey === sessionRow.key ? "active" : ""}`}
+                                onclick=${() =>
+                                  onSelectChatSession(sessionRow.key)}
+                                title=${displayLabel}
+                              >
+                                ${channelIconSrc
+                                  ? html`<img
+                                      src=${channelIconSrc}
+                                      alt=""
+                                      width="12"
+                                      height="12"
+                                      class="sidebar-chat-session-channel-icon"
+                                    />`
+                                  : null}
+                                <span class="sidebar-chat-session-name"
+                                  >${displayLabel}</span
+                                >
+                              </button>
+                            `;
+                          })}
+                        </div>
+                      `}
+                </div>
               `,
             )}
       </div>

package/lib/public/js/components/webhooks/webhook-detail/index.js

@@ -6,7 +6,10 @@ import { Badge } from "../../badge.js";
 import { ConfirmDialog } from "../../confirm-dialog.js";
 import { showToast } from "../../toast.js";
 import { kNoDestinationSessionValue } from "../../../hooks/use-destination-session-selection.js";
-import { getSessionRowKey } from "../../../lib/session-keys.js";
+import {
+  getSessionDisplayLabel,
+  getSessionRowKey,
+} from "../../../lib/session-keys.js";
 import { formatDateTime } from "../helpers.js";
 import { RequestHistory } from "../request-history/index.js";
 import { useWebhookDetail } from "./use-webhook-detail.js";
@@ -267,7 +270,7 @@ export const WebhookDetail = ({
                           (sessionRow) => html`
                             <option value=${getSessionRowKey(sessionRow)}>
                               ${String(
-                                sessionRow?.label ||
+                                getSessionDisplayLabel(sessionRow) ||
                                 getSessionRowKey(sessionRow) ||
                                 "Session",
                               )}

package/lib/public/js/lib/session-keys.js

@@ -55,3 +55,77 @@ export const getDestinationFromSession = (sessionRow = null) => {
     ...(agentId ? { agentId } : {}),
   };
 };
+
+/** Matches server `parseChannelFromSessionKey` for icon routing when `channel` is absent (cached rows). */
+export const parseChannelFromSessionKey = (sessionKey = "") => {
+  const k = String(sessionKey || "");
+  if (k.includes(":telegram:")) return "telegram";
+  if (k.includes(":discord:")) return "discord";
+  if (k.includes(":slack:")) return "slack";
+  return "";
+};
+
+const getTopicIdsFromSessionKey = (sessionKey = "") => {
+  const normalizedSessionKey = getNormalizedSessionKey(sessionKey);
+  const topicMatch = normalizedSessionKey.match(
+    /:telegram:group:([^:]+):topic:([^:]+)$/,
+  );
+  return {
+    groupId: String(topicMatch?.[1] || "").trim(),
+    topicId: String(topicMatch?.[2] || "").trim(),
+  };
+};
+
+export const getSessionKind = (sessionKey = "") => {
+  const normalizedSessionKey = getNormalizedSessionKey(sessionKey);
+  if (!normalizedSessionKey) return "other";
+  if (normalizedSessionKey === "main" || normalizedSessionKey.endsWith(":main")) {
+    return "main";
+  }
+  if (/:telegram:group:([^:]+):topic:([^:]+)$/.test(normalizedSessionKey)) {
+    return "topic";
+  }
+  if (normalizedSessionKey.includes(":slash:")) return "slash";
+  if (normalizedSessionKey.includes(":subagent:")) return "subagent";
+  if (/:direct:([^:]+)$/.test(normalizedSessionKey)) return "direct";
+  return "other";
+};
+
+export const getSessionDisplayLabel = (sessionRow = null) => {
+  const key = getSessionRowKey(sessionRow);
+  const kind = getSessionKind(key);
+  if (kind === "main") return "Main Thread";
+
+  const doctorMatch = key.match(/(?:^|:)doctor:(\d+)$/);
+  if (doctorMatch) return `Doctor Run #${doctorMatch[1]}`;
+  if (/(?:^|:)doctor(?::|$)/.test(key)) return "Doctor Run";
+
+  if (kind === "topic") {
+    const { groupId, topicId } = getTopicIdsFromSessionKey(key);
+    const topicName = String(sessionRow?.topicName || "").trim();
+    const groupName = String(sessionRow?.groupName || "").trim();
+    const topicLabel = topicName || (topicId ? `Topic ${topicId}` : "Topic");
+    const groupLabel = groupName || groupId;
+    return groupLabel ? `${topicLabel} - ${groupLabel}` : topicLabel;
+  }
+
+  if (kind === "direct") {
+    const directMatch = key.match(/:direct:([^:]+)$/);
+    const directTarget = String(directMatch?.[1] || "").trim();
+    if (parseChannelFromSessionKey(key) === "telegram") {
+      return "Direct message";
+    }
+    return directTarget ? `Direct ${directTarget}` : "Direct";
+  }
+
+  return key || "Session";
+};
+
+/** Channel id for platform icons; prefers API `channel`, else parses from key / replyChannel. */
+export const getSessionChannelForIcon = (sessionRow = null) => {
+  const fromRow = String(sessionRow?.channel || "").trim();
+  if (fromRow) return fromRow;
+  const fromReply = String(sessionRow?.replyChannel || "").trim();
+  if (fromReply) return fromReply;
+  return parseChannelFromSessionKey(getSessionRowKey(sessionRow));
+};

package/lib/public/js/lib/storage-keys.js

@@ -24,7 +24,8 @@ export const kTelegramWorkspaceStorageKey = "alphaclaw.telegram.workspaceState";
 export const kTelegramWorkspaceCacheKey = "alphaclaw.telegram.workspaceCache";
 
 // --- Agent sessions (shared across session pickers) ---
-export const kAgentSessionsCacheKey = "alphaclaw.agent.sessionsCache";
+// Bump version when session row shape changes so stale cache is not reused.
+export const kAgentSessionsCacheKey = "alphaclaw.agent.sessionsCache.v3";
 export const kAgentLastSessionKey = "alphaclaw.agent.lastSessionKey";
 
 // --- Chat ---