anentrypoint-design 0.0.201 → 0.0.202

package/src/components/files.js

@@ -31,8 +31,11 @@ export function fileGlyph(type) {
     return TYPE_ICON[type] || TYPE_ICON.other;
 }
 
+// The canonical kit byte formatter (chat.js re-exports it as fmtBytes). One
+// format everywhere: '0 B' for zero; the em-dash means unknown/null ONLY.
 export function fmtFileSize(bytes) {
-    if (bytes == null || bytes === 0) return '—';
+    if (bytes == null) return '—';
+    if (bytes === 0) return '0 B';
     const u = ['B', 'KB', 'MB', 'GB', 'TB'];
     let i = 0, n = bytes;
     while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
@@ -278,11 +281,27 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
     );
 }
 
-export function UploadProgress({ items = [] } = {}) {
+// UploadProgress — per-file upload rows. Error rows are recoverable, not dead
+// ends: each item may carry `actions` ([{ label, onClick }], e.g. 'replace' on
+// a 409 collision) and the host may wire `onDismiss(item, index)` so error rows
+// can be cleared without waiting for the next successful batch.
+export function UploadProgress({ items = [], onDismiss } = {}) {
     if (!items.length) return null;
     return h('div', { class: 'ds-upload-progress' },
         ...items.map((it, i) => {
             const status = it.error ? 'error' : (it.done ? 'complete' : `uploading ${it.pct || 0}%`);
+            const rowActions = [
+                ...((it.actions || []).map((a, ai) => h('button', {
+                    key: 'ua' + ai, type: 'button', class: 'ds-upload-act',
+                    'aria-label': `${a.label} ${it.name}`,
+                    onclick: () => a.onClick && a.onClick(it, i),
+                }, a.label))),
+                (it.error && onDismiss) ? h('button', {
+                    key: 'ud', type: 'button', class: 'ds-upload-act',
+                    'aria-label': `dismiss ${it.name}`,
+                    onclick: () => onDismiss(it, i),
+                }, 'dismiss') : null,
+            ].filter(Boolean);
             return h('div', {
                 key: it.name + i,
                 class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : ''),
@@ -297,7 +316,8 @@ export function UploadProgress({ items = [] } = {}) {
                 h('span', { class: 'ds-upload-bar' },
                     h('span', { class: 'ds-upload-fill', 'data-pct': String(Math.max(0, Math.min(100, it.pct || 0))), 'aria-hidden': 'true' })
                 ),
-                h('span', { class: 'ds-upload-pct', 'aria-hidden': 'true' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%')))
+                h('span', { class: 'ds-upload-pct', 'aria-hidden': 'true' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%'))),
+                rowActions.length ? h('span', { class: 'ds-upload-actions', role: 'group', 'aria-label': `actions for ${it.name}` }, ...rowActions) : null
             );
         })
     );

package/src/components/sessions.js

@@ -8,6 +8,19 @@ import { Btn, Icon } from './shell.js';
 import { Select, SearchInput } from './content.js';
 const h = webjsx.createElement;
 
+// ONE duration format for every surface (live cards, running panel, session
+// meta, context pane): <60s -> 'Ns', <1h -> 'Nm Ss', else 'Nh Nm'. Durations
+// roll s -> m -> h instead of an hour-long run reading '3712s'.
+export function fmtDuration(ms) {
+  if (ms == null || !isFinite(ms) || ms < 0) return '';
+  const s = Math.round(ms / 1000);
+  if (s < 60) return s + 's';
+  const m = Math.floor(s / 60);
+  if (m < 60) return m + 'm ' + (s % 60) + 's';
+  const hrs = Math.floor(m / 60);
+  return hrs + 'h ' + (m % 60) + 'm';
+}
+
 // ConversationList — the Claude-Desktop "Chats" column. Sessions grouped by a
 // caller-supplied group label, each row showing title/project, relative time,
 // agent badge, and a running/new-event indicator. Selecting a row switches the
@@ -36,8 +49,10 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     // applyDiff crashes "reading 'key'"). Keep these unkeyed and filter nulls so
     // each h() call gets a clean, consistent child list.
     h('span', { class: 'ds-session-main' }, [
-      h('span', { class: 'ds-session-title' }, s.title || s.project || s.sid || ''),
-      (s.project || s.time) ? h('span', { class: 'ds-session-sub' },
+      // Two-sided truncation: the CSS ellipsis is paired with a title= carrying
+      // the full string, so a long title/project is recoverable on hover.
+      h('span', { class: 'ds-session-title', title: s.title || s.project || s.sid || null }, s.title || s.project || s.sid || ''),
+      (s.project || s.time) ? h('span', { class: 'ds-session-sub', title: s.project || null },
         [s.project, s.time].filter(Boolean).join(' · ')) : null,
     ].filter(Boolean)),
     h('span', { class: 'ds-session-meta' }, [
@@ -125,36 +140,50 @@ export function SessionMeta({ items = [] } = {}) {
 // no current tool) — it reads as `idle` with a NON-pulsing disc so a stuck agent
 // is visually distinct from a busy one (a frozen elapsed alone reads identically
 // for both, which is the high-severity oversight gap this closes).
-const STATUS_WORD = { error: 'error', stale: 'idle', running: 'running' };
-const STATUS_DISC = { error: 'status-dot-error', stale: 'status-dot-stale', running: 'status-dot-live' };
+// `session.stopping` is the in-flight cancel state: the stop button disables
+// with label 'stopping…' and the status word flips to 'stopping', so the click
+// visibly took and cannot re-fire while the host waits for the active poll.
+// `session.external` marks a session we observe (ccsniff stream) but do not own
+// (no process to kill): the stop button is suppressed, an 'external' tag renders
+// in the head, and the host wires onView to open it in history instead.
+// `session.title` is the SAME string the conversation rails use, rendered as
+// the card heading so the rail row and its dashboard card share one identity.
+// `session.elapsedMs` (raw ms) is formatted internally via fmtDuration; the
+// pre-formatted `elapsed` string remains as a legacy fallback.
+const STATUS_WORD = { error: 'error', stale: 'idle', running: 'running', stopping: 'stopping' };
+const STATUS_DISC = { error: 'status-dot-error', stale: 'status-dot-stale', running: 'status-dot-live', stopping: 'status-dot-connecting' };
 
 export function SessionCard({ session = {}, onStop, onOpen, onView, active = false,
                              selectable = false, selected = false, onToggleSelect } = {}) {
   const s = session;
-  const st = s.status === 'error' ? 'error' : (s.status === 'stale' ? 'stale' : 'running');
+  const st = s.stopping ? 'stopping' : (s.status === 'error' ? 'error' : (s.status === 'stale' ? 'stale' : 'running'));
   // The stat line composes elapsed + live counter; the activity line carries the
   // last-activity time and the current tool so a card shows MOTION, not just a
   // start offset. Both are middot-joined (kept product separator).
-  const statBits = [s.elapsed != null ? s.elapsed : null, s.counter != null ? s.counter : null].filter((x) => x != null && x !== '');
+  const elapsedText = s.elapsedMs != null ? fmtDuration(s.elapsedMs) : (s.elapsed != null ? s.elapsed : null);
+  const statBits = [elapsedText, s.counter != null ? s.counter : null].filter((x) => x != null && x !== '');
   const activityBits = [
     s.currentTool ? 'running: ' + s.currentTool : null,
     s.lastActivity ? 'last ' + s.lastActivity : null,
   ].filter(Boolean);
-  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '');
-  return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.agent || s.sid), 'aria-current': active ? 'true' : null },
+  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '');
+  return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.title || s.agent || s.sid), 'aria-current': active ? 'true' : null },
+    // Shared session identity: the same title the conversation rails show.
+    s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
     h('div', { class: 'ds-dash-card-head' },
       selectable ? h('button', {
         type: 'button', class: 'ds-dash-select', role: 'checkbox',
         'aria-checked': selected ? 'true' : 'false',
-        'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.agent || s.sid),
+        'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.title || s.agent || s.sid),
         onclick: () => onToggleSelect && onToggleSelect(s),
       }, selected ? '[x]' : '[ ]') : null,
       h('span', { class: 'status-dot-disc ' + STATUS_DISC[st], 'aria-hidden': 'true' }),
       // Status is words + the disc, never colour alone (WCAG 1.4.1): the disc is
       // aria-hidden, so the visible/AT status word carries the state.
       h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
-      h('span', { class: 'ds-dash-agent' }, s.agent || 'agent'),
-      s.model ? h('span', { class: 'ds-dash-model' }, s.model) : null),
+      s.external ? h('span', { class: 'ds-dash-external' }, 'external') : null,
+      h('span', { class: 'ds-dash-agent', title: s.agent || null }, s.agent || 'agent'),
+      s.model ? h('span', { class: 'ds-dash-model', title: s.model }, s.model) : null),
     h('div', { class: 'ds-dash-meta' },
       s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
       statBits.length ? h('span', { class: 'ds-dash-stat' }, statBits.join(' · ')) : null,
@@ -163,8 +192,10 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
       // open and resume collapsed into one 'open' action (they both just reopen
       // the session in chat); 'events' kept for the read-only event view.
       onOpen ? Btn({ key: 'open', onClick: () => onOpen(s), children: 'open' }) : null,
-      onView ? Btn({ key: 'view', onClick: () => onView(s), children: 'events' }) : null,
-      onStop ? Btn({ key: 'stop', danger: true, onClick: () => onStop(s), children: 'stop' }) : null));
+      onView ? Btn({ key: 'view', onClick: () => onView(s), children: s.external ? 'open in history' : 'events' }) : null,
+      // External sessions get no stop control: we own no process to kill.
+      (onStop && !s.external) ? Btn({ key: 'stop', danger: true, disabled: !!s.stopping,
+        onClick: () => !s.stopping && onStop(s), children: s.stopping ? 'stopping…' : 'stop' }) : null));
 }
 
 // SessionDashboard — grid of SessionCards for ALL live sessions, managed at once.
@@ -177,7 +208,14 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
 // card's stop. Rendered only when there are sessions AND onStopAll is wired.
 // Streamstate words: the live-stream health signal so "connected, zero running"
 // still tells the user the dashboard is listening (vs a dropped stream).
-const STREAM_WORD = { connected: 'listening for activity', connecting: 'connecting to live stream…', lost: 'live stream lost — retrying…' };
+// One connection vocabulary across the crumb, settings chip, and the dashboard
+// stream line: connected / connecting / offline ('lost' kept as a legacy alias).
+const STREAM_WORD = {
+  connected: 'listening for activity',
+  connecting: 'connecting to live stream…',
+  offline: 'live stream offline — retrying…',
+  lost: 'live stream offline — retrying…',
+};
 
 // The stop-all / stop-selected danger buttons are two-step (host-driven, the kit
 // is stateless): the first click fires onArmStop* so the host flips confirming*
@@ -196,6 +234,9 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   }
   const selSet = selected instanceof Set ? selected : new Set(selected || []);
   const selCount = selSet.size;
+  // While any session is mid-cancel the bulk control reads disabled
+  // 'stopping N…' so a bulk stop visibly takes instead of staying re-firable.
+  const stoppingCount = sessions.filter((s) => s.stopping).length;
   // The stream-state line always renders (even with zero sessions) so a
   // connected-but-idle dashboard reads differently from an offline one.
   const streamLine = streamState
@@ -225,7 +266,9 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
       selectable && selCount ? selCount + ' selected' : sessions.length + ' running'),
     streamLine,
     h('span', { class: 'spread' }),
-    selectable && selCount && onStopSelected
+    stoppingCount > 0 && (onStopSelected || onStopAll)
+      ? Btn({ key: 'stopbusy', danger: true, disabled: true, children: 'stopping ' + stoppingCount + '…' })
+      : (selectable && selCount && onStopSelected
       ? (onArmStopSelected && !confirmingStopSelected
           ? Btn({ key: 'stopsel', danger: true, onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
           : Btn({ key: 'stopsel', danger: true, onClick: () => onStopSelected([...selSet]),
@@ -235,7 +278,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
               ? Btn({ key: 'stopall', danger: true, onClick: () => onArmStopAll(sessions), children: 'stop all' })
               : Btn({ key: 'stopall', danger: true, onClick: () => onStopAll(sessions),
                       children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
-          : null),
+          : null)),
     toolbar);
   const grid = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' },
     ...sessions.map((s) => h('div', { key: s.sid, role: 'listitem' },

package/src/components.js

@@ -20,15 +20,15 @@ export {
 } from './components/content.js';
 
 export {
-    fmtBytes, renderInline,
+    fmtBytes, renderInline, hasSelectionInside,
     ChatMessage, ChatComposer, Chat,
     AICAT_FACE, AICatPortrait, AICat
 } from './components/chat.js';
 
-export { AgentChat } from './components/agent-chat.js';
+export { AgentChat, MESSAGE_CAP } from './components/agent-chat.js';
 
 export {
-    ConversationList, SessionCard, SessionDashboard, SessionMeta
+    ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration
 } from './components/sessions.js';
 
 export { ContextPane } from './components/context-pane.js';

package/src/markdown-cache.js

@@ -2,7 +2,7 @@
 // Ensures libraries are loaded once globally, reused for all subsequent renders.
 // Tracks initialization status and render timings.
 
-import { renderMarkdown, ensureReady as ensureMarkdownReady } from './markdown.js';
+import { renderMarkdown, ensureReady as ensureMarkdownReady, isDegraded as isMarkdownDegraded } from './markdown.js';
 import { highlightAllUnder, ensurePrism } from './highlight.js';
 import { register } from './debug.js';
 
@@ -84,19 +84,23 @@ export async function renderMarkdownCached(text) {
         return _renderCache.get(hash);
     }
 
-    // Ensure markdown is ready (cached after first init)
-    if (!_markdownInitialized) {
-        await ensureMarkdownReady();
-        _markdownInitialized = true;
-    }
+    // Ensure markdown is ready. NOT latched behind _markdownInitialized: a
+    // failed loader must be retried on a later render (markdown.js owns the
+    // retry backoff), otherwise an offline boot is sticky-degraded forever.
+    await ensureMarkdownReady();
+    _markdownInitialized = !isMarkdownDegraded();
 
     const html = await renderMarkdown(text);
 
-    // Store in content cache (limit to 500 entries to prevent unbounded growth)
-    _renderCache.set(hash, html);
-    if (_renderCache.size > 500) {
-        const first = _renderCache.keys().next().value;
-        _renderCache.delete(first);
+    // Store in content cache (limit to 500 entries to prevent unbounded growth).
+    // Never cache degraded (escaped-fallback) output: when the loader recovers,
+    // the same content must re-render as real markdown, not replay the fallback.
+    if (!isMarkdownDegraded()) {
+        _renderCache.set(hash, html);
+        if (_renderCache.size > 500) {
+            const first = _renderCache.keys().next().value;
+            _renderCache.delete(first);
+        }
     }
 
     const renderMs = performance.now() - t0;

package/src/markdown.js

@@ -5,20 +5,35 @@
 let _ready = null;
 let _marked = null;
 let _purify = null;
+// A failed load is NOT cached forever: we drop _ready so a later render retries,
+// guarded by a small backoff so an offline session doesn't hammer the CDN.
+let _failedAt = 0;
+const RETRY_BACKOFF_MS = 30000;
 
 const MARKED_URL = 'https://cdn.jsdelivr.net/npm/marked@15/+esm';
 const PURIFY_URL = 'https://cdn.jsdelivr.net/npm/dompurify@3/+esm';
 
+// True while the markdown stack is unavailable (escaped-fallback rendering).
+// Consumers (markdown-cache) use this to avoid caching degraded output.
+export function isDegraded() {
+    return !_marked || !_purify;
+}
+
 export async function ensureReady() {
     if (_ready) return _ready;
+    if (_failedAt && Date.now() - _failedAt < RETRY_BACKOFF_MS) return false;
     _ready = (async () => {
         try {
             const [{ marked }, DOMPurifyMod] = await Promise.all([import(MARKED_URL), import(PURIFY_URL)]);
             _marked = marked;
             _purify = DOMPurifyMod.default || DOMPurifyMod;
+            _failedAt = 0;
             return true;
         } catch (err) {
             console.warn('[247420] markdown loader failed:', err);
+            // Reset the cached promise so a later render retries (after backoff).
+            _ready = null;
+            _failedAt = Date.now();
             return false;
         }
     })();