cli-jaw 2.2.16 → 2.2.17

package/public/manager/src/components/InstanceListContent.tsx

@@ -1,5 +1,8 @@
+import type { ReactNode } from 'react';
 import { EmptyNavigator } from './EmptyNavigator';
 import { InstanceGroups } from './InstanceGroups';
+import { InstanceSessionList } from './InstanceSessionList';
+import { useActiveSessionDisclosure } from '../hooks/useActiveSessionDisclosure';
 import type {
     DashboardInstance,
     DashboardLifecycleAction,
@@ -24,6 +27,9 @@ type InstanceListContentProps = {
     showInlineLabelEditor: boolean;
     showSidebarRuntimeLine: boolean;
     showSelectedRowActions: boolean;
+    /** Re-clicking the already selected (Active) row routes here instead of
+     *  onSelect — palette/keyboard selection keeps its meaning (260806 D3). */
+    onRouteToSettings?: (port: number) => void;
     profiles: DashboardProfile[];
     getLabel: (instance: DashboardInstance) => string;
     formatUptime: (seconds: number | null) => string;
@@ -35,11 +41,24 @@ type InstanceListContentProps = {
 };
 
 export function InstanceListContent(props: InstanceListContentProps) {
+    // Session disclosure state lives with the list it decorates (260806 D2);
+    // App.tsx stays inside its 500-line dashboard budget.
+    const { activeSessionCount, sessionsOpen, setSessionsOpen } =
+        useActiveSessionDisclosure(props.selectedInstance?.ok ? props.selectedInstance.port : null);
     const showEmpty = !props.error && !props.loading && props.instances.length === 0
         && !props.instances.some(instance => instance.hidden);
     const visibleInstances = props.selectedInstance && !props.filtered.some(instance => instance.port === props.selectedInstance?.port)
         ? [props.selectedInstance, ...props.filtered]
         : props.filtered;
+    const handleSelect = (instance: DashboardInstance): void => {
+        if (props.onRouteToSettings && props.selectedInstance?.port === instance.port) {
+            props.onRouteToSettings(instance.port);
+            return;
+        }
+        props.onSelect(instance);
+    };
+    const renderActiveSessionList = (port: number): ReactNode =>
+        <InstanceSessionList port={port} open={sessionsOpen} />;
 
     return (
         <>
@@ -65,10 +84,14 @@ export function InstanceListContent(props: InstanceListContentProps) {
                     showInlineLabelEditor={props.showInlineLabelEditor}
                     showSidebarRuntimeLine={props.showSidebarRuntimeLine}
                     showSelectedRowActions={props.showSelectedRowActions}
+                    activeSessionCount={activeSessionCount}
+                    activeSessionsOpen={sessionsOpen}
+                    onToggleActiveSessions={() => setSessionsOpen(open => !open)}
+                    renderActiveSessionList={renderActiveSessionList}
                     profiles={props.profiles}
                     getLabel={props.getLabel}
                     formatUptime={props.formatUptime}
-                    onSelect={props.onSelect}
+                    onSelect={handleSelect}
                     onPreview={props.onPreview}
                     onMarkActivitySeen={props.onMarkActivitySeen}
                     onInstanceLabelSave={props.onInstanceLabelSave}

package/public/manager/src/components/InstanceRow.tsx

@@ -19,6 +19,10 @@ type InstanceRowProps = {
     showInlineLabelEditor?: boolean;
     showRuntimeLine?: boolean;
     showSelectedActions?: boolean;
+    /** Session disclosure (Active row only; devlog 260806 D2). */
+    sessionCount?: number;
+    sessionsOpen?: boolean;
+    onToggleSessions?: (port: number) => void;
     onSelect: (instance: DashboardInstance) => void;
     onPreview: (instance: DashboardInstance) => void;
     onMarkActivitySeen: (port: number) => void;
@@ -52,6 +56,13 @@ const OpenIcon = () => (
     </svg>
 );
 
+const ChevronIcon = ({ open }: { open: boolean }) => (
+    <svg viewBox="0 0 16 16" width="12" height="12" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
+        style={{ transform: open ? 'rotate(180deg)' : undefined, transition: 'transform 0.12s' }}>
+        <path d="M3.5 6l4.5 4.5L12.5 6" />
+    </svg>
+);
+
 export function InstanceRow(props: InstanceRowProps) {
     const lifecycle = props.instance.lifecycle;
     const reason = lifecycle?.reason || props.instance.healthReason || 'ok';
@@ -106,6 +117,25 @@ export function InstanceRow(props: InstanceRowProps) {
                         {transitionLabel && <span><em className="instance-row-transition">{transitionLabel}</em></span>}
                     </div>
                     <div className="instance-row-quick" onClick={stopAction}>
+                        {props.priority === 'active' && (props.sessionCount ?? 0) >= 2 && props.onToggleSessions ? (
+                            // Same nested-interactive debt as the stop/open
+                            // controls beside it (audit Med#2): aria-expanded +
+                            // label only, no aria-controls, restructure tracked
+                            // as a follow-up unit.
+                            <button
+                                type="button"
+                                className="quick-btn action-sessions"
+                                aria-expanded={props.sessionsOpen === true}
+                                aria-label={`Sessions (${props.sessionCount})`}
+                                title={`Sessions (${props.sessionCount})`}
+                                onClick={(event) => {
+                                    stopAction(event);
+                                    props.onToggleSessions?.(props.instance.port);
+                                }}
+                            >
+                                <ChevronIcon open={props.sessionsOpen === true} />
+                            </button>
+                        ) : null}
                         <button
                             type="button"
                             className="quick-btn action-stop"
@@ -140,10 +170,10 @@ export function InstanceRow(props: InstanceRowProps) {
                     </div>
                 </div>
                 <div className="instance-row-meta">
-                    {props.showLatestActivityTitle !== false && props.latestActivityTitle && <span className="instance-row-activity-title">{props.latestActivityTitle}</span>}
+                    {props.priority !== 'active' && props.showLatestActivityTitle !== false && props.latestActivityTitle && <span className="instance-row-activity-title">{props.latestActivityTitle}</span>}
                     {props.showRuntimeLine !== false && <span className="instance-row-runtime">{props.instance.currentCli || 'cli n/a'} / {props.instance.currentModel || 'model n/a'}</span>}
-                    <span className="instance-row-version">v{props.instance.version || 'n/a'} · {props.uptime}</span>
-                    <span className="instance-row-reason">{new Date(props.instance.lastCheckedAt).toLocaleTimeString()} · {reason}</span>
+                    {props.priority !== 'active' && <span className="instance-row-version">v{props.instance.version || 'n/a'} · {props.uptime}</span>}
+                    {props.priority !== 'active' && <span className="instance-row-reason">{new Date(props.instance.lastCheckedAt).toLocaleTimeString()} · {reason}</span>}
                 </div>
             </button>
             {props.showInlineLabelEditor !== false && editing ? (

package/public/manager/src/components/InstanceSessionList.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+import type { MouseEvent } from 'react';
+import {
+    getSessionSnapshot,
+    loadSessions,
+    retrySessions,
+    subscribeSessions,
+    switchSession,
+} from '../lib/session-store';
+import type { ChatSessionSummary } from '../lib/session-store';
+
+export type { ChatSessionSummary } from '../lib/session-store';
+
+// Inline session disclosure under the Active instance row (devlog
+// 260806_manager_active_session_disclosure). Lazy: fetches only while open.
+// Fields other than id/seq/label/message_count are absent when the instance
+// runs with multiSession off, so everything renders with fallbacks.
+/** "jaw:slack:channel:C0BM..:thread:1785.." → "slack C0BM.. · thread" */
+function summarizeRemoteKey(remoteKey: string): string {
+    const parts = remoteKey.split(':');
+    if (parts.length >= 4 && parts[0] === 'jaw') {
+        const channel = parts[3] || '';
+        const threaded = parts.includes('thread');
+        return `${parts[1]} ${channel.slice(0, 11)}${threaded ? ' · thread' : ''}`;
+    }
+    return remoteKey.slice(0, 32);
+}
+
+function sessionTitle(session: ChatSessionSummary): string {
+    if (session.label && !session.label.startsWith('jaw:')) return session.label;
+    if (session.remoteKey) return summarizeRemoteKey(session.remoteKey);
+    if (session.label) return summarizeRemoteKey(session.label);
+    return session.seq === 0 ? 'Default session' : `Session #${session.seq}`;
+}
+
+function relativeTime(iso: string | null | undefined): string | null {
+    if (!iso) return null;
+    const then = new Date(iso.replace(' ', 'T')).getTime();
+    if (Number.isNaN(then)) return null;
+    const minutes = Math.floor((Date.now() - then) / 60000);
+    if (minutes < 1) return 'now';
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+}
+
+type InstanceSessionListProps = {
+    port: number;
+    open: boolean;
+    onSessionSwitched?: () => void;
+};
+
+export function InstanceSessionList(props: InstanceSessionListProps) {
+    const subscribe = useCallback(
+        (callback: () => void) => subscribeSessions(props.port, callback),
+        [props.port],
+    );
+    const snapshot = useSyncExternalStore(subscribe, () => getSessionSnapshot(props.port));
+
+    useEffect(() => {
+        if (!props.open) return;
+        void loadSessions(props.port).catch(() => { /* snapshot exposes the error */ });
+    }, [props.open, props.port]);
+
+    if (!props.open) return null;
+
+    async function handleSwitch(event: MouseEvent, session: ChatSessionSummary): Promise<void> {
+        event.stopPropagation();
+        if (session.id === snapshot.data?.activeId || snapshot.switching) return;
+        try {
+            await switchSession(props.port, session.seq);
+            props.onSessionSwitched?.();
+        } catch { /* snapshot exposes the error */ }
+    }
+
+    const retry = (event: MouseEvent): void => {
+        event.stopPropagation();
+        void retrySessions(props.port).catch(() => { /* snapshot exposes the error */ });
+    };
+
+    if (snapshot.error?.kind === 'load') {
+        return (
+            <div className="instance-session-list" role="list" aria-label="Chat sessions">
+                <div className="instance-session-error">
+                    <span>{snapshot.error.message}</span>
+                    <button type="button" className="instance-session-retry" onClick={retry}>Retry</button>
+                </div>
+            </div>
+        );
+    }
+
+    const sessions = snapshot.data?.sessions ?? [];
+    const activeId = snapshot.data?.activeId ?? null;
+
+    return (
+        <div className="instance-session-list" role="list" aria-label="Chat sessions">
+            {snapshot.error?.kind === 'switch' && (
+                <div className="instance-session-error">
+                    <span>{snapshot.error.message}</span>
+                    <button type="button" className="instance-session-retry" onClick={retry}>Retry</button>
+                </div>
+            )}
+            {sessions.map(session => {
+                const isActive = session.id === activeId;
+                const when = relativeTime(session.lastActivityAt);
+                return (
+                    <button
+                        key={session.id}
+                        type="button"
+                        role="listitem"
+                        className={`instance-session-row${isActive ? ' is-active' : ''}`}
+                        disabled={snapshot.switching}
+                        aria-current={isActive || undefined}
+                        onClick={(event) => void handleSwitch(event, session)}
+                    >
+                        <span className="instance-session-title">
+                            {sessionTitle(session)}
+                            {session.source && <span className="session-source-badge">{session.source}</span>}
+                        </span>
+                        <span className="instance-session-meta">
+                            {snapshot.switching
+                                ? 'switching…'
+                                : `${session.message_count} msg${when ? ` · ${when}` : ''}`}
+                        </span>
+                    </button>
+                );
+            })}
+            {sessions.length === 0 && <div className="instance-session-empty">Loading sessions…</div>}
+        </div>
+    );
+}

package/public/manager/src/hooks/useActiveSessionDisclosure.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import {
+    getSessionSnapshot,
+    loadSessions,
+    subscribeSessions,
+    type SessionsSnapshot,
+} from '../lib/session-store';
+
+const EMPTY_SESSIONS_SNAPSHOT: SessionsSnapshot = {
+    data: null,
+    switching: false,
+    error: null,
+    count: 0,
+};
+
+// Session disclosure state for the Active navigator row (devlog 260806 D2):
+// count fetched once per selected instance to decide chevron visibility; the
+// list itself is fetched lazily by InstanceSessionList only while open.
+// Extracted from App.tsx to honor the 500-line dashboard budget; the WP4
+// hardening cycle replaces the fetch here with the shared session store.
+export function useActiveSessionDisclosure(activeSessionPort: number | null) {
+    const [sessionsOpen, setSessionsOpen] = useState(false);
+    const subscribe = useCallback(
+        (callback: () => void) => activeSessionPort == null
+            ? () => {}
+            : subscribeSessions(activeSessionPort, callback),
+        [activeSessionPort],
+    );
+    const getSnapshot = useCallback(
+        () => activeSessionPort == null
+            ? EMPTY_SESSIONS_SNAPSHOT
+            : getSessionSnapshot(activeSessionPort),
+        [activeSessionPort],
+    );
+    const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+
+    useEffect(() => {
+        setSessionsOpen(false);
+        if (activeSessionPort == null) return;
+        void loadSessions(activeSessionPort)
+            .catch(() => { /* offline or pre-session build: chevron simply stays hidden */ });
+    }, [activeSessionPort]);
+
+    return { activeSessionCount: snapshot.count, sessionsOpen, setSessionsOpen };
+}

package/public/manager/src/lib/resilient-fetch.ts

@@ -0,0 +1,93 @@
+const DEFAULT_RETRIES = 2;
+const DEFAULT_BASE_DELAY_MS = 500;
+const MAX_TOTAL_WAIT_MS = 10_000;
+
+type Delay = (ms: number, signal?: AbortSignal) => Promise<void>;
+
+export type ResilientFetchOptions = {
+    retries?: number;
+    baseDelayMs?: number;
+    signal?: AbortSignal;
+    /** Dependency injection for deterministic unit tests. */
+    fetchImpl?: typeof fetch;
+    delay?: Delay;
+    random?: () => number;
+};
+
+export function parseRetryAfterMs(header: string | null): number | null {
+    const value = header?.trim();
+    if (!value) return null;
+
+    if (/^\d+$/.test(value)) {
+        const seconds = Number(value);
+        const delayMs = seconds * 1000;
+        return Number.isSafeInteger(delayMs) ? delayMs : null;
+    }
+
+    const timestamp = Date.parse(value);
+    if (!Number.isFinite(timestamp)) return null;
+    const delayMs = timestamp - Date.now();
+    return delayMs > 0 ? delayMs : null;
+}
+
+function abortError(): DOMException {
+    return new DOMException('The operation was aborted.', 'AbortError');
+}
+
+function defaultDelay(ms: number, signal?: AbortSignal): Promise<void> {
+    return new Promise((resolve, reject) => {
+        if (signal?.aborted) {
+            reject(abortError());
+            return;
+        }
+        const onAbort = () => {
+            clearTimeout(timer);
+            reject(abortError());
+        };
+        const timer = setTimeout(() => {
+            signal?.removeEventListener('abort', onAbort);
+            resolve();
+        }, ms);
+        signal?.addEventListener('abort', onAbort, { once: true });
+    });
+}
+
+function boundedInteger(value: number | undefined, fallback: number): number {
+    if (value === undefined || !Number.isFinite(value)) return fallback;
+    return Math.max(0, Math.floor(value));
+}
+
+export async function resilientGet(
+    url: string,
+    opts: ResilientFetchOptions = {},
+): Promise<Response> {
+    const retries = boundedInteger(opts.retries, DEFAULT_RETRIES);
+    const baseDelayMs = boundedInteger(opts.baseDelayMs, DEFAULT_BASE_DELAY_MS);
+    const fetchImpl = opts.fetchImpl ?? fetch;
+    const delay = opts.delay ?? defaultDelay;
+    const random = opts.random ?? Math.random;
+    const requestInit: RequestInit = {
+        method: 'GET',
+        ...(opts.signal ? { signal: opts.signal } : {}),
+    };
+    let totalWaitMs = 0;
+    let response = await fetchImpl(url, requestInit);
+
+    for (let attempt = 0; response.status === 429 && attempt < retries; attempt++) {
+        const remainingWaitMs = MAX_TOTAL_WAIT_MS - totalWaitMs;
+        if (remainingWaitMs <= 0) return response;
+
+        // RFC 6585 clients may honor Retry-After. Without it, use AWS-style
+        // full jitter over a capped exponential backoff to avoid retry herds
+        // (rate-limit hardening research 001 §B).
+        const retryAfterMs = parseRetryAfterMs(response.headers.get('Retry-After'));
+        const backoffCapMs = Math.min(baseDelayMs * (2 ** attempt), MAX_TOTAL_WAIT_MS);
+        const jitter = Math.min(1, Math.max(0, random())) * backoffCapMs;
+        const waitMs = Math.min(retryAfterMs ?? jitter, remainingWaitMs);
+        await delay(waitMs, opts.signal);
+        totalWaitMs += waitMs;
+        response = await fetchImpl(url, requestInit);
+    }
+
+    return response;
+}

package/public/manager/src/lib/session-store.ts

@@ -0,0 +1,216 @@
+import { resilientGet } from './resilient-fetch';
+
+const SESSION_TTL_MS = 2_000;
+
+export type ChatSessionSummary = {
+    id: string;
+    seq: number;
+    label: string | null;
+    remoteKey?: string | null;
+    source?: string;
+    message_count: number;
+    lastActivityAt?: string | null;
+};
+
+type SessionsPayload = { sessions?: ChatSessionSummary[]; active?: string };
+
+export type FetchResult = {
+    sessions: ChatSessionSummary[];
+    activeId: string | null;
+};
+
+type SessionStoreErrorKind = { kind: 'load' } | { kind: 'switch'; seq: number };
+
+export type SessionsSnapshot = {
+    data: FetchResult | null;
+    switching: boolean;
+    error: { kind: 'load'; message: string } | { kind: 'switch'; seq: number; message: string } | null;
+    count: number;
+};
+
+export type SessionStoreEntry = {
+    generation: number;
+    at: number;
+    promise: Promise<FetchResult> | null;
+    data: FetchResult | null;
+    switching: boolean;
+    lastError: SessionStoreErrorKind | null;
+    errorMessage: string | null;
+    snapshot: SessionsSnapshot;
+    listeners: Set<() => void>;
+};
+
+type SessionStoreTestOptions = {
+    fetchImpl?: typeof fetch;
+    now?: () => number;
+};
+
+const entries = new Map<number, SessionStoreEntry>();
+let fetchImpl: typeof fetch = (...args) => fetch(...args);
+let now = (): number => Date.now();
+
+function makeSnapshot(entry: Pick<SessionStoreEntry, 'data' | 'switching' | 'lastError' | 'errorMessage'>): SessionsSnapshot {
+    let error: SessionsSnapshot['error'] = null;
+    if (entry.lastError?.kind === 'load') {
+        error = { kind: 'load', message: entry.errorMessage ?? 'sessions load failed' };
+    } else if (entry.lastError?.kind === 'switch') {
+        error = {
+            kind: 'switch',
+            seq: entry.lastError.seq,
+            message: entry.errorMessage ?? 'session switch failed',
+        };
+    }
+    return {
+        data: entry.data,
+        switching: entry.switching,
+        error,
+        count: entry.data?.sessions.length ?? 0,
+    };
+}
+
+function createEntry(): SessionStoreEntry {
+    const entry: SessionStoreEntry = {
+        generation: 0,
+        at: 0,
+        promise: null,
+        data: null,
+        switching: false,
+        lastError: null,
+        errorMessage: null,
+        snapshot: { data: null, switching: false, error: null, count: 0 },
+        listeners: new Set(),
+    };
+    return entry;
+}
+
+function entryFor(port: number): SessionStoreEntry {
+    let entry = entries.get(port);
+    if (!entry) {
+        entry = createEntry();
+        entries.set(port, entry);
+    }
+    return entry;
+}
+
+function errorMessage(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+}
+
+function commit(entry: SessionStoreEntry): void {
+    entry.snapshot = makeSnapshot(entry);
+    for (const listener of [...entry.listeners]) listener();
+}
+
+async function fetchChatSessions(port: number): Promise<FetchResult> {
+    const response = await resilientGet(`/i/${port}/api/chat-sessions`, { fetchImpl });
+    if (!response.ok) throw new Error(`sessions fetch failed: ${response.status}`);
+    const body = await response.json() as { ok?: boolean; data?: SessionsPayload };
+    const data = body.data ?? {};
+    return {
+        sessions: Array.isArray(data.sessions) ? data.sessions : [],
+        activeId: typeof data.active === 'string' ? data.active : null,
+    };
+}
+
+async function postSessionSwitch(port: number, seq: number): Promise<void> {
+    const response = await fetchImpl(`/i/${port}/api/chat-sessions/${seq}/switch`, { method: 'POST' });
+    if (response.ok) return;
+    const body = await response.json().catch(() => ({})) as { error?: string };
+    throw new Error(body.error || `switch failed: ${response.status}`);
+}
+
+export function subscribeSessions(port: number, callback: () => void): () => void {
+    const entry = entryFor(port);
+    entry.listeners.add(callback);
+    return () => { entry.listeners.delete(callback); };
+}
+
+export function getSessionSnapshot(port: number): SessionsSnapshot {
+    return entryFor(port).snapshot;
+}
+
+export function readSessions(port: number): Pick<SessionsSnapshot, 'data' | 'switching'> {
+    const snapshot = getSessionSnapshot(port);
+    return { data: snapshot.data, switching: snapshot.switching };
+}
+
+export async function loadSessions(port: number): Promise<void> {
+    const entry = entryFor(port);
+    if (entry.promise) {
+        await entry.promise;
+        return;
+    }
+    if (entry.data && now() - entry.at < SESSION_TTL_MS) return;
+
+    const generation = entry.generation;
+    const request = fetchChatSessions(port);
+    entry.promise = request;
+    try {
+        const data = await request;
+        // A switch invalidates older GETs. Only the current generation may commit.
+        if (entry.generation !== generation) return;
+        entry.data = data;
+        entry.at = now();
+        entry.lastError = null;
+        entry.errorMessage = null;
+        commit(entry);
+    } catch (error) {
+        if (entry.promise === request) entry.promise = null;
+        if (entry.generation === generation) {
+            entry.lastError = { kind: 'load' };
+            entry.errorMessage = errorMessage(error);
+            commit(entry);
+        }
+        throw error;
+    } finally {
+        if (entry.promise === request) entry.promise = null;
+    }
+}
+
+export async function switchSession(port: number, seq: number): Promise<void> {
+    const entry = entryFor(port);
+    // This port-level lock is shared by every mounted consumer.
+    if (entry.switching) return;
+    entry.switching = true;
+    entry.lastError = null;
+    entry.errorMessage = null;
+    commit(entry);
+
+    try {
+        try {
+            await postSessionSwitch(port, seq);
+        } catch (error) {
+            entry.lastError = { kind: 'switch', seq };
+            entry.errorMessage = errorMessage(error);
+            commit(entry);
+            throw error;
+        }
+
+        entry.generation++;
+        entry.at = Number.NEGATIVE_INFINITY;
+        entry.promise = null;
+        await loadSessions(port);
+    } finally {
+        entry.switching = false;
+        commit(entry);
+    }
+}
+
+export async function retrySessions(port: number): Promise<void> {
+    const lastError = entryFor(port).lastError;
+    if (lastError?.kind === 'switch') {
+        await switchSession(port, lastError.seq);
+        return;
+    }
+    await loadSessions(port);
+}
+
+export function resetSessionStoreForTest(options: SessionStoreTestOptions = {}): void {
+    entries.clear();
+    fetchImpl = options.fetchImpl ?? ((...args) => fetch(...args));
+    now = options.now ?? (() => Date.now());
+}
+
+export function getSessionListenerCountForTest(port: number): number {
+    return entries.get(port)?.listeners.size ?? 0;
+}