paseo-terminal-integration 0.5.3 → 0.5.5

package/OVERVIEW.md

@@ -10,10 +10,15 @@ accept passwords and confirmations. Background commands have no terminal or inpu
 parallel, and retain more output. Commands only run after the user presses a run button or submits
 the `/run` command.
 
-The settings control whether completed output is sent to the agent by default and how many lines
-make a result start collapsed in the timeline. Optional command guidance can be added to newly
-created agents for either a local-daemon or client-server setup. Both supplied instruction templates
-are editable per host.
+The settings control whether completed output is sent to the agent by default. Sent reports remain
+available to the agent but are hidden from the visible timeline to avoid duplicating the inline run
+status, recent output, and terminal. Optional command guidance can be added to newly created agents
+for either a local-daemon or client-server setup. Both supplied instruction templates are editable
+per host.
+
+Output up to five lines opens automatically in the inline run controls. Longer output can be
+expanded into a scrollable history panel after the run, including after its terminal tab is closed.
+The retained history lasts until the plugin process is reloaded or prunes an older run.
 
 The plugin requires Paseo 0.10.1 or later and a macOS or Linux daemon host with `bash`. Python and
 Node.js code blocks also require their corresponding interpreter. Plugins are trusted code; this

package/README.md

@@ -17,9 +17,11 @@ the reply finishes. On other Paseo versions a **Run in terminal** card appears u
 - With **Send output to agent** checked (the default), the command, exit code, and output go to
   the agent as a new message when the block finishes. If the agent is busy, delivery waits until
   its turn ends instead of interrupting it. Unchecked, **Send output** sends it later.
-- Sent output longer than 20 lines starts collapsed. Change the threshold under
-  **Settings → Plugins → Terminal integration**, or set it to 0 to keep output expanded.
+- Sent output remains available to the agent but is hidden from the visible timeline, since the
+  inline run controls and terminal already show the command status and recent output.
 - **Stop** sends Ctrl-C; **Send output so far** reports a still-running command.
+- Output up to 5 lines opens automatically. Longer output stays behind the status row; expand it
+  to browse the retained history in a scrollable panel, even after its terminal tab is closed.
 
 **Terminal beside the chat.** On Paseo builds with the terminal open-location setting, choose
 **Settings → Layout → Open location → Opening a terminal → On the side** and "Agent commands"
@@ -80,7 +82,7 @@ The commands are available on Paseo versions without inline code block actions.
 - Terminal output is read from the screen, so very long lines arrive wrapped and only the last
   3,000 rows are visible. The agent receives at most 300 lines or 24,000 characters.
 - Run state lives in the plugin process; reloading the plugin forgets it. Controls and cards stay,
-  and nothing is re-run.
+  but their saved output is no longer available and nothing is re-run.
 - A command that has not started within 20 seconds fails, for example when something else is
   running in "Agent commands".
 

package/client/code-block-actions.tsx

@@ -16,6 +16,7 @@ import {
 import { runnableBlock } from "../shared/code-blocks";
 import { preferences } from "../shared/settings";
 import { revealStartedRun } from "./reveal-run";
+import { RunOutput } from "./run-output";
 
 type Theme = PluginCodeBlockActionsProps["theme"];
 type Styles = ReturnType<typeof createStyles>;
@@ -171,12 +172,12 @@ function RunnableActions({
       ) : null}
       {controls.error ? <Text style={styles.danger}>{controls.error}</Text> : null}
       {status.error ? <Text style={styles.danger}>{status.error.message}</Text> : null}
-      {run ? <RunStatus run={run} styles={styles} /> : null}
+      {run ? <RunStatus run={run} styles={styles} theme={theme} /> : null}
     </View>
   );
 }
 
-function RunStatus({ run, styles }: { run: RunSnapshot; styles: Styles }) {
+function RunStatus({ run, styles, theme }: { run: RunSnapshot; styles: Styles; theme: Theme }) {
   const parts: string[] = [];
   let tone: TextStyle = styles.muted;
   if (run.status === "queued") parts.push("Queued, waiting for the terminal");
@@ -202,17 +203,15 @@ function RunStatus({ run, styles }: { run: RunSnapshot; styles: Styles }) {
 
   return (
     <View style={styles.status}>
-      {parts.length > 0 ? <Text style={tone}>{parts.join(" · ")}</Text> : null}
-      {run.error ? <Text style={styles.danger}>{run.error}</Text> : null}
-      {run.tail.length > 0 ? (
-        <View style={styles.tail}>
-          {run.tail.map((line, index) => (
-            <Text key={index} style={styles.tailLine} numberOfLines={1}>
-              {line || " "}
-            </Text>
-          ))}
-        </View>
+      {parts.length > 0 ? (
+        <RunOutput
+          run={run}
+          summary={parts.join(" · ")}
+          summaryColor={tone.color as string}
+          theme={theme}
+        />
       ) : null}
+      {run.error ? <Text style={styles.danger}>{run.error}</Text> : null}
     </View>
   );
 }
@@ -355,13 +354,5 @@ function createStyles(theme: Theme, compact: boolean) {
     primaryButton: { backgroundColor: theme.colors.accent, borderColor: theme.colors.accent },
     buttonText: { fontSize: 13 },
     status: { gap: 6 },
-    tail: {
-      padding: 8,
-      borderRadius: 6,
-      backgroundColor: theme.colors.surface0,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-    },
-    tailLine: { color: theme.colors.foregroundMuted, fontFamily: MONOSPACE, fontSize: 12 },
   };
 }

package/client/hide-run-report.ts

@@ -0,0 +1,11 @@
+import type { PluginTimelineTransformerContribution } from "@getpaseo/plugin/client";
+import { RUN_REPORT_MARKER } from "../shared/run-report";
+
+type UserMessageTransformer = PluginTimelineTransformerContribution<"user_message">["transform"];
+
+/** Keep the full report available to the agent without repeating it in the visible timeline. */
+export const hideRunReport: UserMessageTransformer = ({ item }) => {
+  if (item.text === RUN_REPORT_MARKER || item.text.startsWith(`${RUN_REPORT_MARKER}\n`)) {
+    return { items: [] };
+  }
+};

package/client/run-card.tsx

@@ -15,6 +15,7 @@ import {
   type RunSnapshot,
 } from "../shared/contracts";
 import { preferences } from "../shared/settings";
+import { RunOutput } from "./run-output";
 
 type Theme = PluginTimelineItemProps["theme"];
 type Styles = ReturnType<typeof createStyles>;
@@ -175,7 +176,7 @@ export function RunCard({ item, agentId, theme, layout }: PluginTimelineItemProp
                 }
               />
             </View>
-            {run ? <RunStatus run={run} styles={styles} /> : null}
+            {run ? <RunStatus run={run} styles={styles} theme={theme} /> : null}
           </View>
         );
       })}
@@ -183,7 +184,7 @@ export function RunCard({ item, agentId, theme, layout }: PluginTimelineItemProp
   );
 }
 
-function RunStatus({ run, styles }: { run: RunSnapshot; styles: Styles }) {
+function RunStatus({ run, styles, theme }: { run: RunSnapshot; styles: Styles; theme: Theme }) {
   const parts: string[] = [];
   let tone: TextStyle = styles.muted;
   if (run.status === "queued") parts.push("Queued, waiting for the terminal");
@@ -209,17 +210,15 @@ function RunStatus({ run, styles }: { run: RunSnapshot; styles: Styles }) {
 
   return (
     <View style={styles.status}>
-      {parts.length > 0 ? <Text style={tone}>{parts.join(" · ")}</Text> : null}
-      {run.error ? <Text style={styles.danger}>{run.error}</Text> : null}
-      {run.tail.length > 0 ? (
-        <View style={styles.tail}>
-          {run.tail.map((line, index) => (
-            <Text key={index} style={styles.tailLine} numberOfLines={1}>
-              {line || " "}
-            </Text>
-          ))}
-        </View>
+      {parts.length > 0 ? (
+        <RunOutput
+          run={run}
+          summary={parts.join(" · ")}
+          summaryColor={tone.color as string}
+          theme={theme}
+        />
       ) : null}
+      {run.error ? <Text style={styles.danger}>{run.error}</Text> : null}
     </View>
   );
 }
@@ -362,13 +361,5 @@ function createStyles(theme: Theme, compact: boolean) {
     primaryButton: { backgroundColor: theme.colors.accent, borderColor: theme.colors.accent },
     buttonText: { fontSize: 13 },
     status: { gap: 6 },
-    tail: {
-      padding: 8,
-      borderRadius: 6,
-      backgroundColor: theme.colors.surface0,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-    },
-    tailLine: { color: theme.colors.foregroundMuted, fontFamily: MONOSPACE, fontSize: 12 },
   };
 }

package/client/run-output.tsx

@@ -0,0 +1,116 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { Platform, Pressable, ScrollView, Text, View } from "react-native";
+import { runOutput, type RunSnapshot } from "../shared/contracts";
+
+const AUTO_EXPAND_LINES = 5;
+const POLL_MS = 700;
+const MONOSPACE = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+});
+
+interface OutputTheme {
+  colors: {
+    border: string;
+    foregroundMuted: string;
+    surface0: string;
+  };
+}
+
+export function RunOutput({
+  run,
+  summary,
+  summaryColor,
+  theme,
+}: {
+  run: RunSnapshot;
+  summary: string;
+  summaryColor: string;
+  theme: OutputTheme;
+}) {
+  const automatic = run.lineCount > 0 && run.lineCount <= AUTO_EXPAND_LINES;
+  const [override, setOverride] = useState<boolean | null>(null);
+  useEffect(() => setOverride(null), [run.runId]);
+  const expanded = override ?? automatic;
+  const fetchOutput = useRpc(runOutput);
+  const active = run.status === "queued" || run.status === "running";
+  const output = useQuery({
+    queryKey: ["terminal-run-output", run.key, run.runId],
+    queryFn: () => fetchOutput({ key: run.key }),
+    enabled: expanded && run.lineCount > 0,
+    refetchInterval: active && expanded ? POLL_MS : false,
+  });
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const lines = output.data?.lines ?? run.tail;
+
+  if (run.lineCount === 0) return <Text style={{ color: summaryColor }}>{summary}</Text>;
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`${expanded ? "Collapse" : "Expand"} command output`}
+        accessibilityState={{ expanded }}
+        onPress={() => setOverride(!expanded)}
+        style={({ pressed }) => [styles.toggle, pressed && styles.pressed]}
+      >
+        <Icon name={expanded ? "ChevronDown" : "ChevronRight"} size={15} color={summaryColor} />
+        <Text style={[styles.summary, { color: summaryColor }]}>{summary}</Text>
+      </Pressable>
+      {expanded ? (
+        <View style={styles.output}>
+          {output.isPending && lines.length === 0 ? (
+            <Text style={styles.note}>Loading output…</Text>
+          ) : null}
+          {output.error ? <Text style={styles.note}>{output.error.message}</Text> : null}
+          {output.data?.truncated ? (
+            <Text style={styles.note}>Earlier output is no longer available.</Text>
+          ) : null}
+          {lines.length > 0 ? (
+            <ScrollView style={styles.viewport} nestedScrollEnabled>
+              <ScrollView horizontal contentContainerStyle={styles.outputContent}>
+                <Text selectable style={styles.outputText}>
+                  {lines.join("\n")}
+                </Text>
+              </ScrollView>
+            </ScrollView>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: OutputTheme) {
+  return {
+    container: { gap: 6 },
+    toggle: { flexDirection: "row" as const, alignItems: "center" as const, gap: 4 },
+    pressed: { opacity: 0.7 },
+    summary: { flexShrink: 1 },
+    output: {
+      borderRadius: 6,
+      backgroundColor: theme.colors.surface0,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      overflow: "hidden" as const,
+    },
+    viewport: { maxHeight: 280 },
+    outputContent: { padding: 8 },
+    outputText: {
+      color: theme.colors.foregroundMuted,
+      fontFamily: MONOSPACE,
+      fontSize: 12,
+      lineHeight: 18,
+    },
+    note: {
+      color: theme.colors.foregroundMuted,
+      fontSize: 12,
+      paddingHorizontal: 8,
+      paddingTop: 6,
+    },
+  };
+}

package/client/settings-screen.tsx

@@ -3,7 +3,6 @@ import {
   ExternalLink,
   SettingsAction,
   SettingsCard,
-  SettingsInput,
   SettingsRow,
   SettingsSection,
   SettingsSelect,
@@ -40,14 +39,6 @@ function ReadySettingsScreen({
 }) {
   const { values, revision } = settings;
   const [draft, setDraft] = useState(values);
-  const [collapseLinesText, setCollapseLinesText] = useState(
-    String(values.collapseOutputAfterLines),
-  );
-  const collapseLines = /^\d+$/.test(collapseLinesText) ? Number(collapseLinesText) : NaN;
-  const collapseLinesError =
-    Number.isInteger(collapseLines) && collapseLines >= 0 && collapseLines <= 5_000
-      ? null
-      : "Enter a whole number from 0 to 5000.";
   const dirty = useMemo(() => JSON.stringify(draft) !== JSON.stringify(values), [draft, values]);
   const editorStyle = useMemo(
     () => ({
@@ -83,21 +74,6 @@ function ReadySettingsScreen({
             error={settings.saveError}
             onValueChange={(sendToAgent) => setDraft((current) => ({ ...current, sendToAgent }))}
           />
-          <SettingsInput
-            label="Collapse output after this many lines"
-            hint="Long output sent back to the agent starts collapsed. Set 0 to keep all output expanded."
-            initialValue={collapseLinesText}
-            placeholder="20"
-            disabled={settings.saving}
-            error={collapseLinesError}
-            onChangeText={(text) => {
-              setCollapseLinesText(text);
-              const value = /^\d+$/.test(text) ? Number(text) : NaN;
-              if (Number.isInteger(value) && value >= 0 && value <= 5_000) {
-                setDraft((current) => ({ ...current, collapseOutputAfterLines: value }));
-              }
-            }}
-          />
           <SettingsRow
             label="Where the terminal appears"
             hint={`Commands run in the "${TERMINAL_NAME}" terminal tab. Choose Main panel or On the side in Settings → Layout → Open location → Terminals. Manually moved tabs keep their location.`}
@@ -212,10 +188,10 @@ function ReadySettingsScreen({
         <SettingsCard>
           <SettingsAction
             label="Apply changes"
-            hint="Output display changes immediately. Command instructions apply only to newly created agents."
+            hint="Command instructions apply only to newly created agents."
             error={settings.saveError}
             actionLabel={settings.saving ? "Saving…" : "Save changes"}
-            disabled={settings.saving || !dirty || collapseLinesError !== null}
+            disabled={settings.saving || !dirty}
             onPress={() => void settings.save(draft, revision)}
           />
         </SettingsCard>

package/index.client.tsx

@@ -3,8 +3,8 @@ import { contributeLegacy } from "./client/legacy";
 import type { PluginCleanup } from "@getpaseo/plugin";
 import type { InlineActionsClient } from "./client/sdk-compat";
 import { CodeBlockActions } from "./client/code-block-actions";
+import { hideRunReport } from "./client/hide-run-report";
 import { SettingsScreen } from "./client/settings-screen";
-import { RunReport, runReportSchema, transformRunReport } from "./client/run-report";
 import { RUNNABLE_LANGUAGES } from "./shared/code-blocks";
 import { terminalOutputSource } from "./shared/contracts";
 
@@ -12,13 +12,7 @@ export default function contribute(client: InlineActionsClient): PluginCleanup {
   client.addTimelineTransformer({
     id: "terminal-run-report",
     query: { itemType: "user_message" },
-    transform: transformRunReport,
-  });
-  client.addTimelineRenderer({
-    kind: "terminal-run-report",
-    version: 1,
-    schema: runReportSchema,
-    Component: RunReport,
+    transform: hideRunReport,
   });
   if (typeof client.addCodeBlockActions === "function") {
     client.addCodeBlockActions({

package/index.server.ts

@@ -9,6 +9,7 @@ import {
   cancelRun,
   runAdhoc,
   runKey,
+  runOutput,
   runStatus,
   scanBlocks,
   searchTerminalOutput,
@@ -48,6 +49,7 @@ export default function contribute(server: PluginServerContext) {
 
   server.handle(startRun, (input, { paseo }) => runnerFor(paseo).start(input));
   server.handle(runStatus, ({ keys }, { paseo }) => ({ runs: runnerFor(paseo).status(keys) }));
+  server.handle(runOutput, ({ key }, { paseo }) => runnerFor(paseo).output(key));
   server.handle(cancelRun, ({ key }, { paseo }) => runnerFor(paseo).cancel(key));
   server.handle(sendRunOutput, ({ key }, { paseo }) => runnerFor(paseo).sendOutput(key));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo-terminal-integration",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Run agent code blocks in a Paseo terminal and send the output back to the agent; attach terminal output to prompts",
   "keywords": [
     "agents",

package/server/runner.ts

@@ -29,6 +29,8 @@ const FINISHED_RUN_LIMIT = 200;
 const BACKGROUND_MAX_LINES = 5_000;
 const BACKGROUND_MAX_LINE_CHARS = 16_000;
 const BACKGROUND_FLUSH_MS = 1_000;
+const UI_OUTPUT_MAX_LINES = 5_000;
+const UI_OUTPUT_MAX_CHARS = 1_000_000;
 
 // sendKeys() expands only a few key names, so control characters are written as raw bytes.
 const CTRL_C = "\x03";
@@ -146,6 +148,17 @@ export class TerminalRunner {
     });
   }
 
+  output(key: string): { lines: string[]; lineCount: number; truncated: boolean } | null {
+    const run = this.runs.get(key);
+    if (!run) return null;
+    const lines = boundedOutput(run.output, UI_OUTPUT_MAX_LINES, UI_OUTPUT_MAX_CHARS);
+    return {
+      lines,
+      lineCount: run.output.length,
+      truncated: run.truncated || lines.length < run.output.length,
+    };
+  }
+
   cancel(key: string): RunSnapshot | null {
     const run = this.runs.get(key);
     if (!run) return null;
@@ -375,6 +388,23 @@ export class TerminalRunner {
   }
 }
 
+export function boundedOutput(
+  output: readonly string[],
+  maxLines: number,
+  maxChars: number,
+): string[] {
+  const selected: string[] = [];
+  let characters = 0;
+  for (let index = output.length - 1; index >= 0 && selected.length < maxLines; index--) {
+    const line = output[index];
+    const remaining = maxChars - characters;
+    if (remaining <= 0) break;
+    selected.push(line.length <= remaining ? line : line.slice(-remaining));
+    characters += Math.min(line.length, remaining) + 1;
+  }
+  return selected.reverse();
+}
+
 /** Read through a call: TypeScript keeps `run.status` narrowed across the awaits in execute(). */
 function finishedCleanly(run: Run): boolean {
   return run.status === "done";

package/shared/contracts.ts

@@ -68,6 +68,18 @@ export const runStatus = defineRpc({
   output: z.object({ runs: z.array(runSnapshotSchema) }),
 });
 
+export const runOutput = defineRpc({
+  name: "run.output",
+  input: z.object({ key: z.string() }),
+  output: z
+    .object({
+      lines: z.array(z.string()),
+      lineCount: z.number().int().nonnegative(),
+      truncated: z.boolean(),
+    })
+    .nullable(),
+});
+
 export const cancelRun = defineRpc({
   name: "run.cancel",
   input: z.object({ key: z.string() }),

package/shared/settings.ts

@@ -4,22 +4,13 @@ import { CLIENT_SERVER_INSTRUCTIONS, LOCAL_DAEMON_INSTRUCTIONS } from "./instruc
 
 export const instructionTopologies = ["local-daemon", "client-server"] as const;
 export type InstructionTopology = (typeof instructionTopologies)[number];
-export const DEFAULT_COLLAPSE_OUTPUT_AFTER_LINES = 20;
-
 export const preferences = defineSettings({
   id: "preferences",
   scope: "host",
-  version: 3,
+  version: 4,
   schema: z.object({
     /** Initial state of a code block's "Send output to agent" checkbox. */
     sendToAgent: z.boolean().default(true),
-    /** Automatically collapse a sent run report when its output exceeds this many lines; 0 disables. */
-    collapseOutputAfterLines: z
-      .number()
-      .int()
-      .min(0)
-      .max(5_000)
-      .default(DEFAULT_COLLAPSE_OUTPUT_AFTER_LINES),
     /** Add command-formatting and execution-topology guidance to newly created agents. */
     injectCommandInstructions: z.boolean().default(false),
     instructionTopology: z.enum(instructionTopologies).default("client-server"),

package/client/run-report.tsx

@@ -1,143 +0,0 @@
-import {
-  useSettings,
-  type PluginTimelineItemProps,
-  type PluginTimelineTransformerContribution,
-} from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
-import { useMemo, useState } from "react";
-import { Platform, Pressable, ScrollView, Text, View } from "react-native";
-import {
-  parseRunReport,
-  runReportSchema,
-  wrapRunReportOutcome,
-  type RunReportData,
-} from "../shared/run-report";
-import { DEFAULT_COLLAPSE_OUTPUT_AFTER_LINES, preferences } from "../shared/settings";
-
-type UserMessageTransformer = PluginTimelineTransformerContribution<"user_message">["transform"];
-type Theme = PluginTimelineItemProps["theme"];
-
-export const transformRunReport: UserMessageTransformer = ({ item }) => {
-  const data = parseRunReport(item.text);
-  if (!data) return;
-  return {
-    items: [{ type: "plugin", kind: "terminal-run-report", version: 1, data }],
-  };
-};
-
-export { runReportSchema };
-
-export function RunReport({ item, theme, layout }: PluginTimelineItemProps<RunReportData>) {
-  const settings = useSettings(preferences);
-  const threshold =
-    settings.status === "ready"
-      ? settings.values.collapseOutputAfterLines
-      : DEFAULT_COLLAPSE_OUTPUT_AFTER_LINES;
-  const autoCollapsed = threshold > 0 && item.data.outputLineCount > threshold;
-  const [expandedOverride, setExpandedOverride] = useState<boolean | null>(null);
-  const expanded = expandedOverride ?? !autoCollapsed;
-  const styles = useMemo(() => createStyles(theme, layout.compact), [theme, layout.compact]);
-
-  if (!item.data.output) {
-    return (
-      <View style={styles.card}>
-        <Text style={styles.intro}>{item.data.intro}</Text>
-        <CodeBlock text={item.data.code} styles={styles} />
-        <Text style={styles.outputLabel}>{item.data.outputLabel}</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={[styles.card, !expanded && styles.collapsedCard]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`${expanded ? "Collapse" : "Expand"} terminal output`}
-        accessibilityState={{ expanded }}
-        onPress={() => setExpandedOverride(!expanded)}
-        style={({ pressed }) => [styles.reportHeader, pressed && styles.pressed]}
-      >
-        <Icon
-          name={expanded ? "ChevronDown" : "ChevronRight"}
-          size={16}
-          color={theme.colors.foregroundMuted}
-        />
-        <Text style={styles.reportTitle} numberOfLines={expanded ? undefined : 1}>
-          {expanded ? wrapRunReportOutcome(item.data.intro) : item.data.intro}
-        </Text>
-        <Text style={styles.lineCount}>
-          {item.data.outputLineCount} {item.data.outputLineCount === 1 ? "line" : "lines"}
-        </Text>
-      </Pressable>
-      {expanded ? (
-        <>
-          <CodeBlock text={item.data.code} styles={styles} />
-          <Text style={styles.outputLabel}>{item.data.outputLabel}</Text>
-          <CodeBlock text={item.data.output} styles={styles} />
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-type Styles = ReturnType<typeof createStyles>;
-
-function CodeBlock({ text, styles }: { text: string; styles: Styles }) {
-  return (
-    <ScrollView horizontal style={styles.codeBlock} contentContainerStyle={styles.codeContent}>
-      <Text selectable style={styles.code}>
-        {text}
-      </Text>
-    </ScrollView>
-  );
-}
-
-function createStyles(theme: Theme, compact: boolean) {
-  return {
-    card: {
-      gap: 10,
-      padding: compact ? 12 : 14,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 12,
-      backgroundColor: theme.colors.surface1,
-    },
-    collapsedCard: { gap: 0, padding: 4 },
-    intro: { color: theme.colors.foreground, fontSize: 14, lineHeight: 20 },
-    reportHeader: {
-      minHeight: 36,
-      flexDirection: "row" as const,
-      alignItems: "center" as const,
-      gap: 6,
-      paddingHorizontal: 8,
-      borderRadius: 6,
-    },
-    pressed: { opacity: 0.7 },
-    reportTitle: {
-      flex: 1,
-      color: theme.colors.foreground,
-      fontSize: 13,
-      lineHeight: 18,
-    },
-    outputLabel: { flexShrink: 1, color: theme.colors.foreground, fontSize: 13 },
-    lineCount: { marginLeft: "auto" as const, color: theme.colors.foregroundMuted, fontSize: 12 },
-    codeBlock: {
-      maxWidth: "100%" as const,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 8,
-      backgroundColor: theme.colors.surface0,
-    },
-    codeContent: { paddingHorizontal: 10, paddingVertical: 8 },
-    code: {
-      color: theme.colors.foreground,
-      fontSize: 12,
-      lineHeight: 18,
-      fontFamily: Platform.select({
-        ios: "Menlo",
-        android: "monospace",
-        default: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-      }),
-    },
-  };
-}