@bakapiano/ccsm 0.22.5 → 0.22.7

package/public/js/pages/SessionsPage.js

@@ -1,9 +1,9 @@
-// Sessions page · the main pane. Shows the terminal for the currently
-// selected session (activeSessionId), with a thin header providing
-// session metadata + a session-tabs strip (future multi-tab support)
-// and a kebab menu top-right for per-session actions. When a session is
-// selected but not running we auto-resume it — no manual button.
-
+// Sessions page · the main pane. Shows the terminal for the currently
+// selected session (activeSessionId), with a thin header providing
+// session metadata + a session-tabs strip (future multi-tab support)
+// and a kebab menu top-right for per-session actions. When a session is
+// selected but not running we auto-resume it — no manual button.
+
 import { html } from '../html.js';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { activeSessionId, sessions, config, selectTab, selectSession, clockTick } from '../state.js';
@@ -29,7 +29,7 @@ function SessionTabs({ activeId, openSessions, onActivate, onClose, onReorder, o
     <div class="session-tabs" role="tablist">
       <div class="session-tabs-list">
         ${open.map((s) => {
-          const cli = (config.value?.clis || []).find((c) => c.id === s.cliId);
+          const cli = (config.value?.clis || []).find((c) => c.id === s.cliId);
           const Icon = IconForCliType(cli?.type) || IconTerminal;
           const t = s.title || s.workspace || s.id.slice(0, 12);
           const isActive = s.id === activeId;
@@ -73,28 +73,28 @@ function SessionTabs({ activeId, openSessions, onActivate, onClose, onReorder, o
               </button>
             </div>`;
         })}
-        ${/* <button class="session-tab session-tab-add" onClick=${onNew} title="New session">
-          <${IconPlus} />
-        </button> */ null}
-      </div>
-      ${kebab ? html`<div class="session-tabs-right">${kebab}</div>` : null}
-    </div>`;
-}
-
+        ${/* <button class="session-tab session-tab-add" onClick=${onNew} title="New session">
+          <${IconPlus} />
+        </button> */ null}
+      </div>
+      ${kebab ? html`<div class="session-tabs-right">${kebab}</div>` : null}
+    </div>`;
+}
+
 function SessionMenu({ session, switchableClis, onRename, onDelete, onOpenEditor, onSwitchCli }) {
   const [open, setOpen] = useState(false);
   const anchor = useRef(null);
   return html`
     <button class="session-menu-btn" ref=${anchor}
             aria-label="Session actions" title="Session actions"
-            onClick=${() => setOpen((v) => !v)}>
-      <${IconMoreVert} />
-    </button>
-    ${open ? html`
-      <${Popover} anchor=${anchor} align="right" width=${200}
-                  onClose=${() => setOpen(false)}>
-        <div class="session-menu">
-          <button class="session-menu-item" onClick=${() => { setOpen(false); onOpenEditor(); }}>
+            onClick=${() => setOpen((v) => !v)}>
+      <${IconMoreVert} />
+    </button>
+    ${open ? html`
+      <${Popover} anchor=${anchor} align="right" width=${200}
+                  onClose=${() => setOpen(false)}>
+        <div class="session-menu">
+          <button class="session-menu-item" onClick=${() => { setOpen(false); onOpenEditor(); }}>
             <${IconExternal} /> Open in editor
           </button>
           ${switchableClis.length ? html`
@@ -114,8 +114,8 @@ function SessionMenu({ session, switchableClis, onRename, onDelete, onOpenEditor
           </button>
           <button class="session-menu-item danger" onClick=${() => { setOpen(false); onDelete(); }}>
             <${IconClose} /> Delete
-          </button>
-        </div>
+          </button>
+        </div>
       </${Popover}>` : null}`;
 }
 
@@ -146,24 +146,23 @@ export function SessionsPage() {
   const id = activeSessionId.value;
   const list = sessions.value;
   const session = id ? list.find((s) => s.id === id) : null;
-  const runningSessions = list.filter((s) => s.status === 'running');
   const [resumeError, setResumeError] = useState(null);
   const [actionBusy, setActionBusy] = useState(false);
   const [openTerminalIds, setOpenTerminalIds] = useState(() => new Set());
   // Bumps to force the auto-resume effect to re-run on Retry without
   // mutating any signal. Primitive in the dep array → identity changes.
   const [retryNonce, setRetryNonce] = useState(0);
-
-  // No session selected → bounce to the Launch page. Done in an effect so
-  // we don't mutate signals during render. Returning null while the bounce
-  // is in flight avoids a flash of empty content.
-  useEffect(() => {
-    if (!session) selectTab('launch');
-  }, [session]);
-
-  // Auto-resume when the active session is exited. resumeSession() in
-  // api.js dedups in-flight calls per session id, so simultaneous fires
-  // from here and from Sidebar.onClick collapse into one request.
+
+  // No session selected → bounce to the Launch page. Done in an effect so
+  // we don't mutate signals during render. Returning null while the bounce
+  // is in flight avoids a flash of empty content.
+  useEffect(() => {
+    if (!session) selectTab('launch');
+  }, [session]);
+
+  // Auto-resume when the active session is exited. resumeSession() in
+  // api.js dedups in-flight calls per session id, so simultaneous fires
+  // from here and from Sidebar.onClick collapse into one request.
   useEffect(() => {
     if (!session) return;
     if (session.status === 'running') { setResumeError(null); return; }
@@ -175,39 +174,40 @@ export function SessionsPage() {
   }, [session?.id, session?.status, session?.cliId, session?.manualStopped, retryNonce]);
 
   useEffect(() => {
-    const runningIds = new Set(runningSessions.map((s) => s.id));
+    const existingIds = new Set(list.map((s) => s.id));
     setOpenTerminalIds((prev) => {
       const next = new Set();
       let changed = false;
       for (const sid of prev) {
-        if (runningIds.has(sid)) {
+        if (existingIds.has(sid)) {
           next.add(sid);
         } else {
           changed = true;
         }
       }
-      if (session?.status === 'running' && !next.has(session.id)) {
+      if (session?.id && existingIds.has(session.id) && !next.has(session.id)) {
         next.add(session.id);
         changed = true;
       }
       return changed || next.size !== prev.size ? next : prev;
     });
-  }, [list, session?.id, session?.status]);
+  }, [list, session?.id]);
 
   if (!session) return null;
-
+
   const cli = (config.value?.clis || []).find((c) => c.id === session.cliId);
   const cliForSession = (s) => (config.value?.clis || []).find((c) => c.id === s.cliId);
   const switchableClis = cli
     ? (config.value?.clis || []).filter((c) => c.id !== cli.id && c.type === cli.type)
     : [];
   const running = session.status === 'running';
-  const retainedSessions = Array.from(openTerminalIds)
+  const openSessions = Array.from(openTerminalIds)
     .map((sid) => list.find((s) => s.id === sid))
-    .filter((s) => s && s.status === 'running');
-  const terminalSessions = running && !retainedSessions.some((s) => s.id === session.id)
-    ? [...retainedSessions, session]
-    : retainedSessions;
+    .filter(Boolean);
+  const tabSessions = session && !openSessions.some((s) => s.id === session.id)
+    ? [...openSessions, session]
+    : openSessions;
+  const terminalSessions = tabSessions.filter((s) => s.status === 'running');
   const title = session.title || session.workspace || session.id.slice(0, 12);
 
   const onCloseTab = (sid) => {
@@ -219,8 +219,8 @@ export function SessionsPage() {
     });
 
     if (sid !== session.id) return;
-    const currentIndex = terminalSessions.findIndex((s) => s.id === sid);
-    const remaining = terminalSessions.filter((s) => s.id !== sid);
+    const currentIndex = tabSessions.findIndex((s) => s.id === sid);
+    const remaining = tabSessions.filter((s) => s.id !== sid);
     const replacement = currentIndex >= 0
       ? remaining[Math.min(currentIndex, remaining.length - 1)] || remaining[remaining.length - 1]
       : remaining[0];
@@ -233,14 +233,14 @@ export function SessionsPage() {
   };
 
   const onReorderTabs = (orderedIds) => {
-    const runningIds = new Set(runningSessions.map((s) => s.id));
+    const existingIds = new Set(list.map((s) => s.id));
     setOpenTerminalIds((prev) => {
       const nextIds = [];
       for (const sid of orderedIds) {
-        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+        if (existingIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
       }
       for (const sid of prev) {
-        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+        if (existingIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
       }
       return new Set(nextIds);
     });
@@ -275,21 +275,21 @@ export function SessionsPage() {
       setActionBusy(false);
     }
   };
-  const onRename = async () => {
-    const next = await ccsmPrompt('Rename session', title, { okLabel: 'Save' });
-    if (next === null) return;
-    try { await setSessionTitle(session.id, next.trim()); }
-    catch (e) { setToast(e.message, 'error'); }
-  };
-  const onDelete = async () => {
-    const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
-      title: 'Delete session', okLabel: 'Delete', danger: true });
-    if (!ok) return;
-    try {
-      await deleteSession(session.id);
-      activeSessionId.value = null;
-    } catch (e) { setToast(e.message, 'error'); }
-  };
+  const onRename = async () => {
+    const next = await ccsmPrompt('Rename session', title, { okLabel: 'Save' });
+    if (next === null) return;
+    try { await setSessionTitle(session.id, next.trim()); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+  const onDelete = async () => {
+    const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
+      title: 'Delete session', okLabel: 'Delete', danger: true });
+    if (!ok) return;
+    try {
+      await deleteSession(session.id);
+      activeSessionId.value = null;
+    } catch (e) { setToast(e.message, 'error'); }
+  };
   const onOpenEditor = async () => {
     try {
       const r = await openSessionInEditor(session.id);
@@ -316,22 +316,15 @@ export function SessionsPage() {
       }
     } catch (e) { setToast(e.message, 'error'); }
   };
-
-  return html`
-    <${PageTitleBar} title=${html`
-        <span class="session-title-text">${title}</span>
-        <span class="session-title-meta">
-          <span class="mono">${session.cwd}</span>
-          <span>·</span>
-          <span>${cli ? cli.name : session.cliId}</span>
-          ${session.repos.length ? html`<span>·</span><span>${session.repos.join(', ')}</span>` : null}
-          <span>·</span>
-          <span>${running ? 'running' : (resumeError ? 'resume failed' : (session.manualStopped ? 'stopped' : 'resuming…'))}</span>
-        </span>
+
+  return html`
+    <${PageTitleBar} title=${html`
+        <span class="session-title-text" title=${title}>${title}</span>
+        <span class="session-title-cwd" title=${session.cwd}>${session.cwd}</span>
       `} />
     <${SessionTabs}
       activeId=${session.id}
-      openSessions=${terminalSessions}
+      openSessions=${tabSessions}
       onActivate=${(sid) => selectSession(sid)}
       onClose=${onCloseTab}
       onReorder=${onReorderTabs}