npm - shraga - Versions diffs - 0.1.97 → 0.1.99 - Mend

shraga 0.1.97 → 0.1.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/client/assets/{index-QkJewVCL.js → index-BZnO7Mn0.js} +194 -194
package/dist/client/index.html +1 -1
package/package.json +1 -1
package/src/client/components/ChatView.tsx +38 -7
package/src/client/components/Sidebar.tsx +25 -7
package/src/server/claude.ts +3 -0
package/src/server/engine/claude-code.ts +1 -1
package/src/server/engine/types.ts +3 -0
package/src/server/hooks.ts +10 -4
package/src/server/scheduler/runner.ts +7 -1

package/dist/client/index.html CHANGED Viewed

@@ -13,7 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-QkJewVCL.js"></script>
+    <script type="module" crossorigin src="/assets/index-BZnO7Mn0.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DlgCLI89.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",

package/src/client/components/ChatView.tsx CHANGED Viewed

@@ -127,10 +127,41 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
   const screenMap = screenMapRef.current;
   // Only the last slice is mounted — an agent thread runs to thousands of blocks and the DOM
-  // (not React) is what goes sluggish. `showAll` mounts the rest on demand.
-  const [showAll, setShowAll] = useState(false);
-  const hiddenCount = showAll ? 0 : Math.max(0, messages.length - VISIBLE_MESSAGES);
+  // (not React) is what goes sluggish. Scrolling to the top reveals the next slice, so a long
+  // thread walks backwards a page at a time instead of mounting 12k rows in one jump.
+  const [limit, setLimit] = useState(VISIBLE_MESSAGES);
+  const hiddenCount = Math.max(0, messages.length - limit);
   const visibleMessages = hiddenCount > 0 ? messages.slice(hiddenCount) : messages;
+  const showEarlier = useCallback(() => setLimit((n) => n + VISIBLE_MESSAGES), []);
+  const pendingAnchor = useRef<{ box: HTMLDivElement | null; before: number } | null>(null);
+  // Reveal-on-scroll, with the button below as the visible fallback. The scroll position is pinned
+  // to the same message afterwards: prepending rows above the viewport otherwise yanks the thread.
+  const topRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = topRef.current;
+    if (!el || hiddenCount === 0) return;
+    const io = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      // On mount the thread is pinned to the bottom and the top sentinel can be "visible" simply
+      // because nothing has scrolled yet — expanding there would cascade the whole 12k thread into
+      // the DOM, which is exactly what the window exists to prevent. Only reveal on a real scroll up.
+      if (isNearBottom.current) return;
+      const box = scrollRef.current;
+      const before = box?.scrollHeight ?? 0;
+      pendingAnchor.current = { box, before };
+      showEarlier();
+    }, { rootMargin: '400px' });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [hiddenCount, limit, showEarlier]);
+  useEffect(() => {
+    const a = pendingAnchor.current;
+    if (!a?.box) return;
+    pendingAnchor.current = null;
+    a.box.scrollTop += a.box.scrollHeight - a.before; // keep the reader on the same message
+  }, [limit]);
   useEffect(() => {
     if (isNearBottom.current) {
@@ -172,10 +203,10 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
           </button>
         </div>
         {hiddenCount > 0 && (
-          <div className="flex justify-center pb-2">
-            <button onClick={() => setShowAll(true)} className="text-xs px-3 py-1 rounded-full border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
-              Show {hiddenCount} earlier message{hiddenCount === 1 ? '' : 's'}
-            </button>
+          // Scroll-based, like the sidebar: scrolling to the top reveals the previous slice. A
+          // status row, not a control — the earlier button read as a dead box at the top of a thread.
+          <div ref={topRef} className="py-3 text-center text-[11px] text-muted-foreground/60">
+            {hiddenCount} earlier message{hiddenCount === 1 ? '' : 's'} · scroll up to load
           </div>
         )}
         {visibleMessages.map((msg, i) => {

package/src/client/components/Sidebar.tsx CHANGED Viewed

@@ -120,6 +120,26 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
     }
   }, [activeSessionId, filtered, activeRow]);
+  // Load the next page when the end of the list comes into view. A list that simply stops when you
+  // scroll to the bottom reads as broken — the button below stays as the visible fallback, but it
+  // is not the mechanism. `root: null` still respects the Radix viewport's clipping, so the sentinel
+  // only intersects once the user has actually scrolled near the end.
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const loadMoreRef = useRef(loadMore);
+  loadMoreRef.current = loadMore;
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el || !cursor || unreadOnly) return;
+    const io = new IntersectionObserver(
+      (entries) => { if (entries.some((e) => e.isIntersecting)) loadMoreRef.current(); },
+      { rootMargin: '300px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+    // `loading` is a dep so the observer re-arms after a page lands: if the end is STILL in view
+    // (a short page, a tall sidebar), re-observing fires again and walks on to the next page.
+  }, [cursor, loading, unreadOnly]);
   useEffect(() => {
     getToken().then(t => t ? fetch('/api/version', { headers: { Authorization: `Bearer ${t}` } }) : null).then(r => r?.json()).then(d => d && setVersion(d.version)).catch(() => {});
   }, []);
@@ -212,13 +232,11 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
           {activeRow && renderRow(activeRow)}
           {filtered.map(renderRow)}
           {!unreadOnly && cursor && (
-            <button
-              onClick={loadMore}
-              disabled={loading}
-              className="w-full text-[11px] text-muted-foreground hover:text-foreground py-2 rounded-lg hover:bg-accent/50 transition-colors disabled:opacity-50"
-            >
-              {loading ? 'Loading…' : 'Show older'}
-            </button>
+            // Scroll-based: reaching the end of the list loads the next page. This is a status row,
+            // not a control — a "Show older" button read as a dead grey box at the end of the list.
+            <div ref={sentinelRef} className="py-3 text-center text-[11px] text-muted-foreground/60">
+              {loading ? 'Loading older…' : '···'}
+            </div>
           )}
         </div>
       </ScrollArea>

package/src/server/claude.ts CHANGED Viewed

@@ -209,6 +209,8 @@ export async function* streamChat(opts: {
   onPermissionRequest?: PermissionHandler;
   onDestructiveApproval?: PermissionHandler;
   onUserQuestion?: QuestionHandler;
+  /** See EngineStreamOpts.foregroundBashCommand. */
+  foregroundBashCommand?: string;
   conversationReset?: boolean;
   /** Opaque per-send bag from the client. Never interpreted here — handed to the turn-context seam,
    * where an add-on's contributor reads its own keys. */
@@ -401,6 +403,7 @@ export async function* streamChat(opts: {
     onPermissionRequest: opts.onPermissionRequest,
     onDestructiveApproval: opts.onDestructiveApproval,
     onUserQuestion: opts.onUserQuestion,
+    foregroundBashCommand: opts.foregroundBashCommand,
     turnHints: opts.turnHints,
     conversationReset: opts.conversationReset,
     context: opts.context,

package/src/server/engine/claude-code.ts CHANGED Viewed

@@ -268,7 +268,7 @@ export class ClaudeCodeEngine implements AgentEngine {
       skills: listSkills(),
       disallowedTools: ['Skill'],
       agents: loadAgents(),
-      hooks: buildHooks(),
+      hooks: buildHooks({ exemptBashCommand: opts.foregroundBashCommand }),
     };
     const userHandler = opts.onPermissionRequest;

package/src/server/engine/types.ts CHANGED Viewed

@@ -23,6 +23,9 @@ export interface EngineStreamOpts {
   onPermissionRequest?: PermissionHandler;
   onDestructiveApproval?: PermissionHandler;
   onUserQuestion?: QuestionHandler;
+  /** The single command this turn was spawned to run in the foreground (a `bash` schedule).
+   *  Exempted from the long-running-script background guard — see server/hooks.ts. */
+  foregroundBashCommand?: string;
   /** Opaque per-send hints bag, forwarded verbatim from the client. The core interprets no key of it;
    *  an add-on engine reads its own keys (e.g. a duplex engine's `voice` marker). */
   turnHints?: Record<string, unknown>;

package/src/server/hooks.ts CHANGED Viewed

@@ -19,7 +19,7 @@ const LONG_RUNNING_PATTERNS = [
  * which lets the CLI manage the process asynchronously (the model can
  * continue working and gets notified when the command finishes).
  */
-const forceBackgroundForScripts: HookCallback = async (input) => {
+const forceBackgroundForScripts = (exemptCommand?: string): HookCallback => async (input) => {
   if (input.hook_event_name !== 'PreToolUse') return {};
   const { tool_name, tool_input } = input as PreToolUseHookInput;
   if (tool_name !== 'Bash') return {};
@@ -27,6 +27,10 @@ const forceBackgroundForScripts: HookCallback = async (input) => {
   const ti = tool_input as Record<string, unknown>;
   const cmd = ti.command as string | undefined;
   if (!cmd || ti.run_in_background) return {};
+  // The turn EXISTS to run this one command (a `bash` schedule): there is no other work to
+  // continue with, and its exit code is the run's verdict. Backgrounding it only hides that
+  // exit code behind a task id, so the guard must not fire on it.
+  if (exemptCommand && cmd === exemptCommand) return {};
   const isLongRunning = LONG_RUNNING_PATTERNS.some(p => p.test(cmd));
   if (!isLongRunning) return {};
@@ -130,11 +134,13 @@ const guardFirebaseReads: HookCallback = async (input) => {
   };
 };
-/** Build the hooks map to pass into SDK query() options. */
-export function buildHooks(): Partial<Record<HookEvent, HookCallbackMatcher[]>> {
+/** Build the hooks map to pass into SDK query() options.
+ *  `exemptBashCommand` is the one command the turn was explicitly told to run in the foreground
+ *  (a `bash` schedule's command) — see forceBackgroundForScripts. */
+export function buildHooks(opts?: { exemptBashCommand?: string }): Partial<Record<HookEvent, HookCallbackMatcher[]>> {
   return {
     PreToolUse: [
-      { matcher: 'Bash', hooks: [forceBackgroundForScripts] },
+      { matcher: 'Bash', hooks: [forceBackgroundForScripts(opts?.exemptBashCommand)] },
       { matcher: 'mcp__mcp-slack-use__post_slack_.*', hooks: [resolveSlackMentions] },
       { matcher: 'mcp__mcp-firebase-(?:prod|lab)__get_db.*', hooks: [guardFirebaseReads] },
     ],

package/src/server/scheduler/runner.ts CHANGED Viewed

@@ -311,6 +311,7 @@ export async function runSchedule(
           mcpServers,
           abortController,
           onPermissionRequest,
+          foregroundBashCommand: allowedCmd ?? undefined,
         })) {
           onEvent({ type: 'session_stream', sessionId, event: ev });
           if (ev.type === 'text_delta') {
@@ -331,7 +332,12 @@ export async function runSchedule(
           } else if (ev.type === 'tool_result') {
             assistantBlocks.push({ type: 'tool_result', toolUseId: ev.toolUseId, output: ev.output });
             const use = toolUses.get(ev.toolUseId);
-            if (ev.isError && allowedCmd && use?.tool === 'Bash' && (use.input as any)?.command === allowedCmd) bashFailure = ev.output;
+            // LAST result wins, failures and successes alike. A latched first failure survived the
+            // agent's own successful retry of the same command, so a run that ended green was
+            // reported as a failed schedule and paged a human about a healthy check.
+            if (allowedCmd && use?.tool === 'Bash' && (use.input as any)?.command === allowedCmd) {
+              bashFailure = ev.isError ? ev.output : undefined;
+            }
           } else if (ev.type === 'done') {
             break;
           } else if (ev.type === 'error') {