claude-simple 0.2.24 → 0.2.25

package/public/shell/session-nav.js

@@ -2,7 +2,7 @@
 import { batch, esc, $ } from '../lib.js';
 import {
   sessionsData, sessionFilter, filesPath, viewingFile, filteredSessions,
-  currentProject, currentTab, filesRoot, gitRoot, currentAgent, setAgent,
+  currentProject, currentTab, filesRoot, gitRoot, currentAgent, setAgent, isProcessing,
   selectedMachineId, setSelectedMachine, AGENT_LABELS, ctx, hubMode,
 } from '../state.js';
 import { api } from '../api.js';
@@ -10,13 +10,31 @@ import { getLastSessionContext, setLastSessionContext } from './session-context.
 import {
   connectWS, clearMessages, appendMsg, appendSystemMsg, renderToolUse,
   appendHistoryTokenBar, appendContextBar, flushToolBatch, coerceTs,
-  stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch,
+  stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch, setExternalSessionReadOnly,
 } from '../chat.js';
 import { setHash, syncHash } from '../router.js';
 import { refreshModelSelect } from './session-list.js';
 import { renderSessionNotesBar } from './notes.js';
 import { addRecentSession, updateDashboard, getDashboardSessions } from './dashboard.js';
 
+// A terminal-owned agent writes its native transcript independently of this
+// UI. Keep just the currently open session hot and coalesce file updates into
+// one fresh history read, rather than attempting to replay every vendor JSONL
+// event in the browser.
+let activeExternalHistory = null;
+let externalHistoryTimer = null;
+
+document.addEventListener('external-session-updated', ({ detail }) => {
+  const active = activeExternalHistory;
+  if (!active || !detail || detail.sessionId !== active.sessionId) return;
+  if (detail.agent && active.agent && detail.agent !== active.agent) return;
+  if (externalHistoryTimer) clearTimeout(externalHistoryTimer);
+  externalHistoryTimer = setTimeout(() => {
+    externalHistoryTimer = null;
+    activeExternalHistory?.refresh();
+  }, 140);
+});
+
 /** Show which edge machine Files/Git/Shell paths belong to. */
 function syncMachinePathHints(machineId) {
   for (const id of ['files-machine-hint', 'git-machine-hint']) {
@@ -35,6 +53,8 @@ function syncMachinePathHints(machineId) {
 }
 
 export function openProject(project) {
+  activeExternalHistory = null;
+  setExternalSessionReadOnly(false);
   stashComposerDraft();
   parkQueuedMessages();
   discardComposerAttachments();
@@ -67,6 +87,8 @@ export function openProject(project) {
 }
 
 export function goHome() {
+  activeExternalHistory = null;
+  setExternalSessionReadOnly(false);
   stashComposerDraft();
   parkQueuedMessages();
   discardComposerAttachments();
@@ -144,6 +166,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   }
 
   ctx.sessionId = sid;
+  setExternalSessionReadOnly(false);
   ctx.configDir = resolvedConfig;
   ctx.agent = resolvedAgent;
   setAgent(resolvedAgent);
@@ -153,7 +176,6 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   // Default path = session cwd on the target machine (set immediately; no await)
   let edgeCwd = resolvedCwd;
   applyProjectPaths(edgeCwd, resolvedMachine, sid);
-  connectWS();
 
   // Background: normalize path on the edge (does not block chat)
   if (edgeCwd) {
@@ -169,6 +191,9 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
 
   // Switch to target tab BEFORE history (files/git/shell usable immediately)
   clearMessages();
+  // Subscribe after clearing the prior transcript. A queued Grok snapshot can
+  // arrive immediately on socket-open and must belong to the new history.
+  connectWS();
   switchTab(targetTab);
   {
     const cur = sessionsData.peek();
@@ -227,7 +252,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
               ? m.content.map(p => p?.text || '').filter(Boolean).join('\n')
               : String(m.content ?? ''));
           if (content) {
-            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts });
+            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts, historyIndex: i });
           }
         } else if (typ === 'tool_use' || m.name) {
           renderToolUse({ name: m.name || 'tool', input: m.input ?? m.arguments ?? {} }, { ts });
@@ -252,14 +277,13 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     paintChunk();
   };
 
-  const loadHistory = async () => {
+  const loadHistory = async ({ preferCache = true } = {}) => {
     // Instant re-open from in-memory cache (never trust empty cache — race/stale)
     const cached = historyCache.get(cacheKey);
-    if (cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
+    if (preferCache && cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
       paintMessages(cached.msgs, cached.context, cached.meta);
-      return;
     }
-    appendSystemMsg(`Loading ${label} history…`);
+    if (!cached?.msgs?.length) appendSystemMsg(`Loading ${label} history…`);
     try {
       // Hub mode must route to the edge that owns the session.
       const mid = resolvedMachine || selectedMachineId.peek() || ctx.machineId || null;
@@ -273,10 +297,6 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
         const q = new URLSearchParams({
           tail: '0',
           compact: '1',
-          // Hub keeps a short-lived compact copy after completed turns.  This
-          // makes a mobile re-open cache-first while the live WS remains the
-          // source for an in-progress answer.
-          cache: 'prefer',
         });
         if (agent) q.set('agent', agent);
         // Also put machine in query for proxies that drop custom headers.
@@ -284,6 +304,9 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
         return api('GET', `/api/sessions/${sid}/messages?${q}`, undefined, undefined, {
           machineId: mid || undefined,
           dedupe: false,
+          // A transcript can be written shortly after the final stream frame.
+          // Never let an HTTP/browser cache hide a newer user prompt.
+          cache: 'no-store',
         });
       };
 
@@ -299,6 +322,10 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       const meta = Array.isArray(data) ? {} : { truncated: data?.truncated, total: data?.total };
       if (msgs.length) historyCache.set(cacheKey, { msgs, context, meta, at: Date.now() });
       else historyCache.delete(cacheKey);
+      // A reconnect can receive new stream frames while this verification read
+      // is in flight. Keep those live frames authoritative; the fresh response
+      // is still retained for the next open.
+      if (isProcessing.peek() || $('messages')?.querySelector('.live-stream')) return;
       paintMessages(msgs, context, meta);
     } catch (e) {
       if (ctx.sessionId !== sid) return;
@@ -308,6 +335,12 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     }
   };
 
+  activeExternalHistory = {
+    sessionId: sid,
+    agent: resolvedAgent,
+    refresh: () => loadHistory({ preferCache: false }).catch(() => {}),
+  };
+
   // Never block tab UI on history; chat still loads ASAP in background
   if (skipHistory) {
     loadHistory().catch(() => {});

package/public/state.js

@@ -77,7 +77,7 @@ export const agentFilters   = signal((() => {
 export const timeRange      = signal(localStorage.getItem('timeRange') || '14'); // '0'|'1'|'7'|'14'|'30'
 export const activityHits   = signal(null); // null | { q, results, loading, error }
 export const activityLoading = signal(false);
-/** agent:sessionId → { favorite, notes, title, hidden, updatedAt }  (title = rename map) */
+/** agent:sessionId → { favorite, notes, title, hidden, branch, updatedAt }  (title = rename map) */
 export const sessionMetaMap = signal({});
 /** Sidebar: show only favorited sessions */
 export const favoritesOnly  = signal(localStorage.getItem('favoritesOnly') === '1');
@@ -107,6 +107,7 @@ export const ctx = {
   ws:          null,
   shellBubble: null,
   configDir:   null,
+  externalSessionReadOnly: false,
 };
 
 /** Select edge machine (hub). Keeps signal + ctx + localStorage in sync. */
@@ -129,7 +130,7 @@ export function metaKey(agent, sessionId, machineId) {
 
 export function getSessionMeta(agent, sessionId, machineId) {
   const m = sessionMetaMap.peek()?.[metaKey(agent, sessionId, machineId)];
-  return m || { favorite: false, notes: '', title: '', hidden: false };
+  return m || { favorite: false, notes: '', title: '', hidden: false, branch: null };
 }
 
 /** Display title: user rename map → original display → short id. */

package/public/style.css

@@ -733,6 +733,37 @@ html.pwa-standalone .ma-panel {
 .session-row.session-thin {
   opacity: 0.88;
 }
+.session-row.session-branch {
+  margin-left: calc(var(--branch-depth, 1) * 0.7rem);
+  border-left-style: dashed;
+}
+.session-branch-line {
+  margin-top: 1px;
+  font-size: 9px;
+  line-height: 1.25;
+  font-family: ui-monospace, Menlo, monospace;
+  color: color-mix(in oklch, var(--color-primary) 58%, var(--color-base-content));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-branch-badge {
+  font-size: 9px;
+  color: color-mix(in oklch, var(--color-primary) 82%, var(--color-base-content));
+  border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
+  border-radius: 3px;
+  padding: 0 3px;
+}
+.session-branch-current {
+  margin-left: auto;
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 10px;
+  color: color-mix(in oklch, var(--color-primary) 72%, var(--color-base-content));
+}
 .session-thin-badge {
   font-size: 9px;
   font-family: ui-monospace, Menlo, monospace;
@@ -1304,6 +1335,41 @@ html.pwa-standalone .ma-panel {
   user-select: none;
 }
 .msg-row.user .msg-ts { text-align: right; }
+.msg-row.queued-user-msg > div:not(.msg-ts) {
+  opacity: .76;
+  border-style: dashed;
+}
+.msg-row.cancelled-queued-user-msg > div:not(.msg-ts) {
+  opacity: .48;
+  text-decoration: line-through;
+}
+.msg-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.45rem;
+  opacity: 0;
+  transition: opacity .12s ease;
+}
+.msg-row.assistant:hover .msg-actions,
+.msg-row.assistant:focus-within .msg-actions { opacity: 1; }
+.msg-action-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: color-mix(in oklch, var(--color-base-content) 48%, transparent);
+  font-size: 10px;
+  line-height: 1.4;
+  padding: 1px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.msg-action-btn:hover:not(:disabled) {
+  color: var(--color-primary);
+  background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+}
+.msg-action-btn:disabled { cursor: wait; opacity: .55; }
+@media (hover: none) { .msg-actions { opacity: 1; } }
 
 .token-bar {
   display: flex;
@@ -1623,3 +1689,63 @@ html.pwa-standalone .ma-panel {
     padding: 0.05em 0 0.15em 0.5em !important;
   }
 }
+
+/* ── Settings: full-page overlay using the same DaisyUI tokens as #app ── */
+
+html.settings-open #app { visibility: hidden; }
+.set-page {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: hsl(var(--b1));
+  color: hsl(var(--bc));
+  overflow: auto;
+  min-height: 100dvh;
+}
+.set-island {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 44px;
+  padding: 0 0.75rem;
+  background: hsl(var(--b2));
+  border-bottom: 1px solid hsl(var(--b3));
+}
+.set-split {
+  display: grid;
+  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
+  gap: 0.75rem;
+  max-width: 56rem;
+  margin: 1rem auto 2.5rem;
+  padding: 0 1rem 2rem;
+}
+.set-nav { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; }
+.set-nav-item.is-on {
+  background: hsl(var(--b3));
+  color: hsl(var(--bc));
+}
+.set-main { min-width: 0; }
+.set-panel { padding: 0.25rem 0 1.5rem; }
+.set-fields { display: grid; gap: 0.5rem; }
+.set-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
+.set-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--b2));
+  border: 1px solid hsl(var(--b3));
+}
+.set-row-body { flex: 1; min-width: 0; }
+.set-add { display: grid; gap: 0.5rem; }
+.set-token { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
+.set-token textarea { min-height: 7rem; resize: vertical; }
+@media (max-width: 767px) {
+  .set-split { grid-template-columns: 1fr; }
+  .set-nav { flex-direction: row; overflow-x: auto; gap: 0.25rem; }
+  .set-nav-item { white-space: nowrap; }
+}