@shipfox/client-logs 17.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-logs",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -19,8 +19,8 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@shipfox/api-logs-dto": "12.0.0",
-    "@shipfox/react-ui": "1.2.0",
-    "@shipfox/client-api": "6.0.1"
+    "@shipfox/client-api": "6.0.1",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/agent-session-rows.tsx

@@ -10,7 +10,7 @@ import {
 } from '@shipfox/react-ui/log';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {cn} from '@shipfox/react-ui/utils';
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import type {SessionViewRow, SessionViewRowMeta} from '#core/log-model.js';
 
 const PREVIEW_CHAR_LIMIT = 1200;
@@ -23,6 +23,7 @@ export interface AgentSessionRowsProps {
   resolvedToolCallIds: ReadonlySet<string>;
   toolCallNames: ReadonlyMap<string, string>;
   indent: number;
+  forceOpen?: boolean;
 }
 
 export function AgentSessionRows({
@@ -30,6 +31,7 @@ export function AgentSessionRows({
   resolvedToolCallIds,
   toolCallNames,
   indent,
+  forceOpen = false,
 }: AgentSessionRowsProps) {
   return rows.map((row, index) => (
     <AgentSessionRowView
@@ -39,6 +41,7 @@ export function AgentSessionRows({
       resolvedToolCallIds={resolvedToolCallIds}
       toolCallNames={toolCallNames}
       indent={indent}
+      forceOpen={forceOpen}
     />
   ));
 }
@@ -48,12 +51,20 @@ function AgentSessionRowView({
   resolvedToolCallIds,
   toolCallNames,
   indent,
+  forceOpen,
 }: {
   row: SessionViewRow;
   resolvedToolCallIds: ReadonlySet<string>;
   toolCallNames: ReadonlyMap<string, string>;
   indent: number;
+  forceOpen: boolean;
 }) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (forceOpen) setOpen(true);
+  }, [forceOpen]);
+  const disclosureProps = {open: forceOpen || open, onOpenChange: setOpen};
+
   switch (row.kind) {
     case 'message':
       return (
@@ -64,7 +75,7 @@ function AgentSessionRowView({
           tone={row.terminalFailure ? 'error' : 'default'}
           data-log-terminal-failure={row.terminalFailure ? 'true' : undefined}
         >
-          <LogContent className="text-foreground-neutral-base">
+          <LogContent className="text-foreground-contrast-primary">
             <span className="flex min-w-0 items-start gap-inline">
               <MessageIcon role={row.role} terminalFailure={row.terminalFailure} />
               <span className="flex min-w-0 flex-1 flex-col gap-tight">
@@ -82,16 +93,16 @@ function AgentSessionRowView({
       );
     case 'thinking':
       return (
-        <LogDisclosure indent={indent}>
+        <LogDisclosure indent={indent} {...disclosureProps}>
           <LogDisclosureTrigger
             summary={wordSummary(row.text)}
             timestamp={new Date(row.timestamp)}
-            className="text-foreground-neutral-subtle"
+            className="text-foreground-contrast-secondary"
           >
             thinking
           </LogDisclosureTrigger>
-          <LogDisclosureContent className="text-foreground-neutral-subtle">
-            <LogContent className="text-foreground-neutral-subtle">
+          <LogDisclosureContent className="text-foreground-contrast-secondary">
+            <LogContent className="text-foreground-contrast-secondary">
               <PreviewText text={row.text} />
             </LogContent>
           </LogDisclosureContent>
@@ -100,7 +111,7 @@ function AgentSessionRowView({
     case 'tool-call': {
       const awaitingResult = row.id != null && !resolvedToolCallIds.has(row.id);
       return (
-        <LogDisclosure indent={indent}>
+        <LogDisclosure indent={indent} {...disclosureProps}>
           <LogDisclosureTrigger
             timestamp={new Date(row.timestamp)}
             summary={compactPreview(row.summary ?? row.input)}
@@ -148,7 +159,7 @@ function AgentSessionRowView({
             '(unmatched)')
           : row.toolName;
       return (
-        <LogDisclosure indent={indent}>
+        <LogDisclosure indent={indent} {...disclosureProps}>
           <LogDisclosureTrigger
             timestamp={new Date(row.timestamp)}
             summary={compactPreview(row.output)}
@@ -156,7 +167,7 @@ function AgentSessionRowView({
               <span
                 className={cn(
                   'inline-flex items-center gap-tight',
-                  row.isError ? 'text-red-600 dark:text-red-400' : 'text-foreground-neutral-muted',
+                  row.isError ? 'text-tag-error-icon' : 'text-foreground-contrast-secondary',
                 )}
               >
                 <Icon
@@ -174,10 +185,7 @@ function AgentSessionRowView({
             </span>
           </LogDisclosureTrigger>
           <LogDisclosureContent>
-            <LogContent
-              variant="code"
-              className={cn(row.isError && 'text-red-600 dark:text-red-400')}
-            >
+            <LogContent variant="code" className="text-foreground-contrast-primary">
               <PreviewText text={row.output} />
             </LogContent>
           </LogDisclosureContent>
@@ -193,7 +201,7 @@ function AgentSessionRowView({
           tone={row.tone}
           data-log-terminal-failure={row.terminalFailure ? 'true' : undefined}
         >
-          <LogContent className="text-foreground-neutral-muted">
+          <LogContent className="text-foreground-contrast-secondary">
             <span className="inline-flex w-full items-center gap-inline">
               <Icon name="informationLine" className="size-14 flex-none" aria-hidden="true" />
               <span className="min-w-0">
@@ -201,7 +209,7 @@ function AgentSessionRowView({
                 {row.detail != null ? (
                   <>
                     {' · '}
-                    <span className="text-foreground-neutral-subtle">{row.detail}</span>
+                    <span className="text-foreground-contrast-secondary">{row.detail}</span>
                   </>
                 ) : null}
               </span>
@@ -216,14 +224,18 @@ function AgentSessionRowView({
       );
     case 'raw':
       return (
-        <LogDisclosure indent={indent}>
+        <LogDisclosure indent={indent} {...disclosureProps}>
           <LogDisclosureTrigger
             timestamp={new Date(row.timestamp)}
             summary={compactPreview(row.raw)}
-            className="text-orange-600 dark:text-orange-400"
+            className="text-foreground-contrast-primary"
           >
             <span className="inline-flex min-w-0 items-center gap-inline">
-              <Icon name="errorWarningLine" className="size-14 flex-none" aria-hidden="true" />
+              <Icon
+                name="errorWarningLine"
+                className="size-14 flex-none text-tag-warning-icon"
+                aria-hidden="true"
+              />
               <span className="truncate">{row.label}</span>
             </span>
           </LogDisclosureTrigger>
@@ -253,7 +265,7 @@ function MessageIcon({role, terminalFailure}: {role: string; terminalFailure: bo
       name={name}
       className={cn(
         'mt-[2px] size-14 flex-none',
-        terminalFailure ? 'text-red-600 dark:text-red-400' : 'text-foreground-neutral-muted',
+        terminalFailure ? 'text-tag-error-icon' : 'text-foreground-contrast-secondary',
       )}
       aria-hidden="true"
     />
@@ -264,8 +276,8 @@ function MessageRoleLabel({label, terminalFailure}: {label: string; terminalFail
   return (
     <span
       className={cn(
-        'min-w-0 font-code text-foreground-neutral-muted',
-        terminalFailure && 'text-foreground-highlight-error',
+        'min-w-0 font-code text-foreground-contrast-secondary',
+        terminalFailure && 'text-foreground-contrast-primary',
       )}
     >
       <span className="truncate">{label}</span>
@@ -280,7 +292,7 @@ function RowMetadata({meta, className}: {meta: readonly SessionViewRowMeta[]; cl
   if (inlineMeta != null) {
     return (
       <span
-        className={cn('font-code text-xs text-foreground-neutral-muted', className)}
+        className={cn('font-code text-xs text-foreground-contrast-secondary', className)}
         title={`${inlineMeta.label}: ${inlineMeta.value}`}
       >
         {inlineMeta.value}
@@ -301,7 +313,7 @@ function MetadataTrigger({meta}: {meta: readonly SessionViewRowMeta[]}) {
       <TooltipTrigger asChild>
         <button
           type="button"
-          className="inline-flex size-20 flex-none items-center justify-center rounded-4 text-foreground-neutral-muted opacity-60 transition-opacity hover:bg-background-components-hover hover:text-foreground-neutral-base hover:opacity-100 focus-visible:opacity-100 focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] group-hover/log-row:opacity-100"
+          className="inline-flex size-20 flex-none items-center justify-center rounded-4 text-foreground-contrast-secondary opacity-60 transition-opacity hover:bg-background-components-hover hover:text-foreground-contrast-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:shadow-focus-inset group-hover/log-row:opacity-100"
           aria-label="Show message metadata"
         >
           <Icon name="informationLine" className="size-12" aria-hidden="true" />
@@ -335,7 +347,7 @@ function PreviewText({text}: {text: string}) {
         <button
           type="button"
           aria-expanded={expanded}
-          className="ms-inline inline-flex min-h-24 items-center rounded-4 px-tight font-display text-xs text-foreground-highlight-interactive focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)]"
+          className="ms-inline inline-flex min-h-24 items-center rounded-4 px-tight font-display text-xs text-foreground-highlight-interactive focus-visible:shadow-focus-inset"
           onClick={() => setExpanded((value) => !value)}
         >
           {expanded ? 'show less' : 'show more'}

package/src/components/log-group.tsx

@@ -3,7 +3,7 @@
 import {Icon} from '@shipfox/react-ui/icon';
 import {LogDisclosure, LogDisclosureContent, LogDisclosureTrigger} from '@shipfox/react-ui/log';
 import {cn, formatDuration} from '@shipfox/react-ui/utils';
-import type {ReactNode} from 'react';
+import {type ReactNode, useEffect, useState} from 'react';
 import type {GroupLogNode} from '#core/log-tree.js';
 
 export interface LogGroupProps {
@@ -12,13 +12,26 @@ export interface LogGroupProps {
   terminated: boolean;
   children: ReactNode;
   defaultOpen?: boolean;
+  forceOpen?: boolean;
 }
 
-export function LogGroup({node, depth, terminated, children, defaultOpen = false}: LogGroupProps) {
+export function LogGroup({
+  node,
+  depth,
+  terminated,
+  children,
+  defaultOpen = false,
+  forceOpen = false,
+}: LogGroupProps) {
   const lineLabel = `${node.lineCount} ${node.lineCount === 1 ? 'line' : 'lines'}`;
+  const [open, setOpen] = useState(defaultOpen);
+
+  useEffect(() => {
+    if (forceOpen) setOpen(true);
+  }, [forceOpen]);
 
   return (
-    <LogDisclosure indent={depth} defaultOpen={defaultOpen}>
+    <LogDisclosure indent={depth} open={forceOpen || open} onOpenChange={setOpen}>
       <LogDisclosureTrigger
         summary={lineLabel}
         trailing={<GroupStatus node={node} terminated={terminated} />}
@@ -42,11 +55,11 @@ function GroupStatus({node, terminated}: {node: GroupLogNode; terminated: boolea
   // closed only because an ancestor's group_end cascaded (its own end was dropped, so endTs
   // is null). Either way show "incomplete" rather than a blank slot or a forever spinner.
   if (node.closed || terminated) {
-    return <span className="text-foreground-neutral-muted">incomplete</span>;
+    return <span className="text-foreground-contrast-secondary">incomplete</span>;
   }
 
   return (
-    <span className="inline-flex items-center gap-tight text-foreground-neutral-muted">
+    <span className="inline-flex items-center gap-tight text-foreground-contrast-secondary">
       <Icon name="loader4Line" className="size-12 motion-safe:animate-spin" aria-hidden="true" />
       running
     </span>

package/src/components/log-view.test.tsx

@@ -12,6 +12,20 @@ const output = (data: string): LogRecord => ({
   stream: 'stdout',
   data,
 });
+const groupStart = (groupId: string, name: string): LogRecord => ({
+  v: 1,
+  ts,
+  type: 'group_start',
+  groupId,
+  parentGroupId: null,
+  name,
+});
+const groupEnd = (groupId: string): LogRecord => ({
+  v: 1,
+  ts,
+  type: 'group_end',
+  groupId,
+});
 type AgentSessionRow = Extract<LogRecord, {type: 'agent_session'}>['row'];
 
 const agentSession = (row: AgentSessionRow, offsetMs = 0): LogRecord => ({
@@ -85,6 +99,91 @@ describe('LogView', () => {
     expect(screen.queryByText('No output yet')).toBeNull();
   });
 
+  test('filters output and session rows by the log search term', () => {
+    render(
+      <LogView
+        search="failure"
+        records={[
+          output('setup complete\n'),
+          output('failure: test failed\n'),
+          agentSession({
+            kind: 'message',
+            timestamp: ts,
+            role: 'assistant',
+            label: 'assistant',
+            meta: [],
+            text: 'The failure is in the validation step.',
+            terminalFailure: false,
+          }),
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('failure: test failed')).toBeDefined();
+    expect(screen.getByText('The failure is in the validation step.')).toBeDefined();
+    expect(screen.queryByText('setup complete')).toBeNull();
+    expect(screen.getByRole('log')).toHaveAttribute('aria-live', 'off');
+    expect(screen.getByRole('status')).toHaveTextContent('Log search updated for “failure”.');
+  });
+
+  test('opens matching groups and filters their children', () => {
+    render(
+      <LogView
+        search="success"
+        records={[
+          groupStart('build', 'Build'),
+          output('setup complete\n'),
+          output('Success: compiled\n'),
+          groupEnd('build'),
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Success: compiled')).toBeInTheDocument();
+    expect(screen.queryByText('setup complete')).not.toBeInTheDocument();
+    expect(screen.getByText('1 line')).toBeInTheDocument();
+  });
+
+  test('normalizes search text and restores all rows when search is cleared', async () => {
+    const records = [output('Failure: validation failed\n'), output('success: recovered\n')];
+    const {rerender} = render(<LogView search="  FAILURE  " records={records} />);
+
+    await waitFor(() => expect(screen.getByText('Failure: validation failed')).toBeInTheDocument());
+    expect(screen.queryByText('success: recovered')).not.toBeInTheDocument();
+
+    rerender(<LogView search="" records={records} />);
+
+    await waitFor(() => expect(screen.getByText('success: recovered')).toBeInTheDocument());
+  });
+
+  test('searches marker labels and drops groups without matching descendants', () => {
+    render(
+      <LogView
+        search="missing"
+        records={[
+          groupStart('build', 'Build'),
+          output('build succeeded\n'),
+          groupEnd('build'),
+          groupStart('deploy', 'Deploy'),
+          output('deploy started\n'),
+          groupEnd('deploy'),
+          {v: 1, ts, type: 'gap', droppedBytes: 64},
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Output missing')).toBeInTheDocument();
+    expect(screen.queryByText('Build')).not.toBeInTheDocument();
+    expect(screen.queryByText('Deploy')).not.toBeInTheDocument();
+  });
+
+  test('shows a message when the log search has no matches', () => {
+    render(<LogView search="missing" records={[output('hello\n')]} />);
+
+    expect(screen.getByRole('status')).toHaveTextContent('No log lines match “missing”.');
+    expect(screen.queryByText('hello')).toBeNull();
+  });
+
   test('allows terminal logs to opt out of live announcements', () => {
     render(<LogView records={[output('hello\n')]} ariaLive="off" />);
 
@@ -190,6 +289,34 @@ describe('LogView', () => {
     expect(screen.getByText('awaiting result')).toBeDefined();
   });
 
+  test('keeps tool relationships when search matches only one side', () => {
+    const records = [
+      agentSession({
+        kind: 'tool-call',
+        timestamp: ts,
+        id: 'call-1',
+        name: 'edit_file',
+        input: '{}',
+      }),
+      agentSession({
+        kind: 'tool-result',
+        timestamp: ts + 1,
+        toolCallId: 'call-1',
+        toolName: 'edit_file',
+        output: 'patched',
+        isError: false,
+      }),
+    ];
+
+    const {unmount} = render(<LogView search="{}" records={records} />);
+    expect(screen.queryByText('awaiting result')).not.toBeInTheDocument();
+
+    unmount();
+    render(<LogView search="patched" records={records} />);
+    expect(screen.getByText('result edit_file')).toBeInTheDocument();
+    expect(screen.queryByText('result (unmatched)')).not.toBeInTheDocument();
+  });
+
   test('renders unknown session entries without crashing', () => {
     render(
       <LogView
@@ -234,7 +361,7 @@ describe('LogView', () => {
     );
   });
 
-  test('anchors terminal failures when requested', async () => {
+  test('anchors terminal failures once while search changes', async () => {
     vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
       callback(0);
       return 1;
@@ -255,25 +382,26 @@ describe('LogView', () => {
       .spyOn(HTMLElement.prototype, 'scrollIntoView')
       .mockImplementation(() => undefined);
 
-    render(
-      <LogView
-        anchorToFailure
-        records={[
-          output('setup\n'),
-          agentSession({
-            kind: 'message',
-            timestamp: ts,
-            role: 'assistant',
-            label: 'assistant',
-            meta: [],
-            text: 'I cannot continue.',
-            terminalFailure: true,
-          }),
-        ]}
-      />,
-    );
+    const records = [
+      output('setup\n'),
+      agentSession({
+        kind: 'message',
+        timestamp: ts,
+        role: 'assistant',
+        label: 'assistant',
+        meta: [],
+        text: 'I cannot continue.',
+        terminalFailure: true,
+      }),
+    ];
+    const {rerender} = render(<LogView anchorToFailure records={records} search="cannot" />);
 
     await waitFor(() => expect(scrollIntoView).toHaveBeenCalledWith({block: 'center'}));
+    scrollIntoView.mockClear();
+
+    rerender(<LogView anchorToFailure records={records} search="missing" />);
+
+    expect(scrollIntoView).not.toHaveBeenCalled();
   });
 });
 

package/src/components/log-view.tsx

@@ -3,8 +3,16 @@
 import {Icon} from '@shipfox/react-ui/icon';
 import {LogContent, LogRow, LogRows, type LogTimestampMode} from '@shipfox/react-ui/log';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
-import {type ReactNode, type UIEventHandler, useEffect, useMemo, useRef} from 'react';
+import {
+  type ReactNode,
+  type UIEventHandler,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import type {LogRecord} from '#core/log-model.js';
+import {buildLogSearchIndex, filterLogNodes} from '#core/log-search.js';
 import {
   assertNever,
   buildLogTree,
@@ -25,6 +33,7 @@ export interface LogViewProps {
   emptyState?: 'complete' | 'pending';
   defaultGroupsOpen?: boolean;
   anchorToFailure?: boolean;
+  search?: string;
   ariaLive?: 'off' | 'polite' | 'assertive';
   className?: string | undefined;
   onScroll?: UIEventHandler<HTMLDivElement> | undefined;
@@ -43,15 +52,29 @@ export function LogView({
   emptyState = 'complete',
   defaultGroupsOpen = false,
   anchorToFailure = false,
+  search = '',
   ariaLive = 'polite',
   className,
   onScroll,
 }: LogViewProps) {
   const rowsRef = useRef<HTMLDivElement>(null);
   const tree = useMemo(() => buildLogTree(records), [records]);
+  const deferredSearch = useDeferredValue(search);
+  const normalizedSearch = deferredSearch.trim().toLowerCase();
+  const searchIndex = useMemo(() => buildLogSearchIndex(tree.nodes), [tree.nodes]);
+  const visibleNodes = useMemo(
+    () =>
+      normalizedSearch ? filterLogNodes(tree.nodes, normalizedSearch, searchIndex) : tree.nodes,
+    [normalizedSearch, searchIndex, tree.nodes],
+  );
   const resolvedToolCalls = useMemo(() => collectResolvedToolCalls(tree.nodes), [tree.nodes]);
-  const noOutputState = getNoOutputState(tree, emptyState);
+  const noOutputState = normalizedSearch ? null : getNoOutputState(tree, emptyState);
   const anchorRecordCount = records.length;
+  const searchStatus = normalizedSearch
+    ? visibleNodes.length === 0
+      ? `No log lines match “${deferredSearch.trim()}”.`
+      : `Log search updated for “${deferredSearch.trim()}”.`
+    : null;
 
   useEffect(() => {
     if (!anchorToFailure) return;
@@ -74,19 +97,36 @@ export function LogView({
   }, [anchorToFailure, anchorRecordCount]);
 
   return (
-    <LogRows
-      ref={rowsRef}
-      timestamps={timestamps}
-      wrap={wrap}
-      showLineNumbers={showLineNumbers}
-      aria-live={ariaLive}
-      className={className}
-      onScroll={onScroll}
-      {...(tree.originTs != null ? {timestampOrigin: new Date(tree.originTs)} : {})}
-    >
-      {noOutputState ? <NoOutputRow state={noOutputState} /> : null}
-      {renderNodes(tree.nodes, 0, tree, defaultGroupsOpen, resolvedToolCalls)}
-    </LogRows>
+    <>
+      {searchStatus ? (
+        <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+          {searchStatus}
+        </div>
+      ) : null}
+      <LogRows
+        ref={rowsRef}
+        timestamps={timestamps}
+        wrap={wrap}
+        showLineNumbers={showLineNumbers}
+        aria-live={normalizedSearch ? 'off' : ariaLive}
+        className={className}
+        onScroll={onScroll}
+        {...(tree.originTs != null ? {timestampOrigin: new Date(tree.originTs)} : {})}
+      >
+        {noOutputState ? <NoOutputRow state={noOutputState} /> : null}
+        {normalizedSearch && visibleNodes.length === 0 ? (
+          <NoSearchMatchesRow query={deferredSearch.trim()} />
+        ) : null}
+        {renderNodes(
+          visibleNodes,
+          0,
+          tree,
+          defaultGroupsOpen,
+          Boolean(normalizedSearch),
+          resolvedToolCalls,
+        )}
+      </LogRows>
+    </>
   );
 }
 
@@ -157,13 +197,13 @@ function NoOutputRow({state}: {state: NonNullable<LogViewProps['emptyState']>})
 
   return (
     <LogRow lineNumber={null}>
-      <LogContent className="text-foreground-neutral-muted">
+      <LogContent className="text-foreground-contrast-secondary">
         <span className="inline-flex min-w-0 items-center gap-inline">
           <Icon name="info" className="size-14 flex-none" aria-hidden="true" />
           <span className="min-w-0">
             <span className="font-medium">{copy.title}</span>
             {' · '}
-            <span className="text-foreground-neutral-subtle">{copy.detail}</span>
+            <span className="text-foreground-contrast-secondary">{copy.detail}</span>
           </span>
         </span>
       </LogContent>
@@ -171,11 +211,25 @@ function NoOutputRow({state}: {state: NonNullable<LogViewProps['emptyState']>})
   );
 }
 
+function NoSearchMatchesRow({query}: {query: string}) {
+  return (
+    <LogRow lineNumber={null}>
+      <LogContent className="text-foreground-contrast-secondary">
+        <span className="inline-flex min-w-0 items-center gap-inline">
+          <Icon name="searchLine" className="size-14 flex-none" aria-hidden="true" />
+          <span>No log lines match “{query}”.</span>
+        </span>
+      </LogContent>
+    </LogRow>
+  );
+}
+
 function renderNodes(
   nodes: readonly LogNode[],
   depth: number,
   tree: LogTree,
   defaultGroupsOpen: boolean,
+  forceOpen: boolean,
   resolvedToolCalls: ResolvedToolCalls,
 ): ReactNode[] {
   // `node.seq` is the stable, unique render key (see `LogNodeBase`): a concatenated
@@ -200,8 +254,16 @@ function renderNodes(
             depth={depth}
             terminated={tree.terminated}
             defaultOpen={defaultGroupsOpen}
+            forceOpen={forceOpen}
           >
-            {renderNodes(node.children, depth + 1, tree, defaultGroupsOpen, resolvedToolCalls)}
+            {renderNodes(
+              node.children,
+              depth + 1,
+              tree,
+              defaultGroupsOpen,
+              forceOpen,
+              resolvedToolCalls,
+            )}
           </LogGroup>
         );
       case 'marker':
@@ -214,6 +276,7 @@ function renderNodes(
             resolvedToolCallIds={resolvedToolCalls.ids}
             toolCallNames={resolvedToolCalls.names}
             indent={depth}
+            forceOpen={forceOpen}
           />
         );
       default:

package/src/components/output-log-row.tsx

@@ -27,7 +27,11 @@ export function OutputLogRow({
       data-stream={record.stream}
       className={cn(isStderr && 'shadow-[inset_2px_0_0_var(--color-border-neutral-strong)]')}
     >
-      <LogContent variant="code" ansi className={cn(isStderr && 'text-foreground-neutral-subtle')}>
+      <LogContent
+        variant="code"
+        ansi
+        className={cn(isStderr && 'text-foreground-contrast-secondary')}
+      >
         {stripTrailingNewline(record.data)}
       </LogContent>
     </LogRow>