feat(app): improve tool call sheet with word-level diff and better UX

- Add word-level highlighting using LCS algorithm for edit diffs - Match diff colors to explorer sidebar (GitHub-style rgba backgrounds) - Use discriminated union for tool call parsing (shell, edit, generic) - Add horizontal scroll for bash/command output instead of wrapping - Remove status badge from bottom sheet header - Fix sheet snap points (60%/95%) and disable dynamic sizing - Add min-width to diff viewer for full-width backgrounds 🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-10 23:37:13 +07:00
parent 42129926ae
commit f073be0b98
5 changed files with 518 additions and 468 deletions
@@ -3,7 +3,7 @@ import { View, Text } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import { StyleSheet } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
-import type { DiffLine } from "@/utils/tool-call-parsers";
+import type { DiffLine, DiffSegment } from "@/utils/tool-call-parsers";

 interface DiffViewerProps {
  diffLines: DiffLine[];
@@ -12,6 +12,8 @@ interface DiffViewerProps {
 }

 export function DiffViewer({ diffLines, maxHeight = 280, emptyLabel = "No changes to display" }: DiffViewerProps) {
+  const [scrollViewWidth, setScrollViewWidth] = React.useState(0);
+
  if (!diffLines.length) {
    return (
      <View style={styles.emptyState}>
@@ -32,8 +34,9 @@ export function DiffViewer({ diffLines, maxHeight = 280, emptyLabel = "No change
        nestedScrollEnabled
        showsHorizontalScrollIndicator
        contentContainerStyle={styles.horizontalContent}
+        onLayout={(e) => setScrollViewWidth(e.nativeEvent.layout.width)}
      >
-        <View style={styles.linesContainer}>
+        <View style={[styles.linesContainer, scrollViewWidth > 0 && { minWidth: scrollViewWidth }]}>
          {diffLines.map((line, index) => (
            <View
              key={`${line.type}-${index}`}
@@ -45,17 +48,36 @@ export function DiffViewer({ diffLines, maxHeight = 280, emptyLabel = "No change
                line.type === "context" && styles.contextLine,
              ]}
            >
-              <Text
-                style={[
-                  styles.lineText,
-                  line.type === "header" && styles.headerText,
-                  line.type === "add" && styles.addText,
-                  line.type === "remove" && styles.removeText,
-                  line.type === "context" && styles.contextText,
-                ]}
-              >
-                {line.content}
-              </Text>
+              {line.segments ? (
+                <Text style={styles.lineText}>
+                  <Text style={line.type === "add" ? styles.addText : styles.removeText}>
+                    {line.content[0]}
+                  </Text>
+                  {line.segments.map((segment, segIdx) => (
+                    <Text
+                      key={segIdx}
+                      style={[
+                        line.type === "add" ? styles.addText : styles.removeText,
+                        segment.changed && (line.type === "add" ? styles.addHighlight : styles.removeHighlight),
+                      ]}
+                    >
+                      {segment.text}
+                    </Text>
+                  ))}
+                </Text>
+              ) : (
+                <Text
+                  style={[
+                    styles.lineText,
+                    line.type === "header" && styles.headerText,
+                    line.type === "add" && styles.addText,
+                    line.type === "remove" && styles.removeText,
+                    line.type === "context" && styles.contextText,
+                  ]}
+                >
+                  {line.content}
+                </Text>
+              )}
            </View>
          ))}
        </View>
@@ -92,16 +114,22 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.mutedForeground,
  },
  addLine: {
-    backgroundColor: theme.colors.palette.green[900],
+    backgroundColor: "rgba(46, 160, 67, 0.15)",
  },
  addText: {
-    color: theme.colors.palette.green[200],
+    color: theme.colors.foreground,
  },
  removeLine: {
-    backgroundColor: theme.colors.palette.red[900],
+    backgroundColor: "rgba(248, 81, 73, 0.1)",
  },
  removeText: {
-    color: theme.colors.palette.red[200],
+    color: theme.colors.foreground,
+  },
+  addHighlight: {
+    backgroundColor: "rgba(46, 160, 67, 0.4)",
+  },
+  removeHighlight: {
+    backgroundColor: "rgba(248, 81, 73, 0.35)",
  },
  contextLine: {
    backgroundColor: theme.colors.card,
@@ -1168,12 +1168,8 @@ export const ToolCall = memo(function ToolCall({
      args,
      result,
      error,
-      parsedEditEntries,
-      parsedReadEntries,
-      parsedCommandDetails,
-      cwd,
    });
-  }, [openToolCall, toolName, kind, status, args, result, error, parsedEditEntries, parsedReadEntries, parsedCommandDetails, cwd]);
+  }, [openToolCall, toolName, kind, status, args, result, error]);

  // Dummy renderDetails to make badge tappable - actual content is rendered in the sheet
  const dummyRenderDetails = useCallback(() => null, []);
@@ -15,16 +15,8 @@ import {
  BottomSheetBackdrop,
 } from "@gorhom/bottom-sheet";
 import { Pencil, Eye, SquareTerminal, Search, Wrench, X } from "lucide-react-native";
+import { parseToolCallDisplay, buildLineDiff, type DiffLine } from "@/utils/tool-call-parsers";
 import { DiffViewer } from "./diff-viewer";
-import {
-  extractKeyValuePairs,
-  stripCwdPrefix,
-  type EditEntry,
-  type ReadEntry,
-  type CommandDetails,
-  type DiffLine,
-  type KeyValuePair,
-} from "@/utils/tool-call-parsers";

 // ----- Types -----

@@ -35,10 +27,6 @@ export interface ToolCallSheetData {
  args?: unknown;
  result?: unknown;
  error?: unknown;
-  parsedEditEntries?: EditEntry[];
-  parsedReadEntries?: ReadEntry[];
-  parsedCommandDetails?: CommandDetails | null;
-  cwd?: string;
 }

 interface ToolCallSheetContextValue {
@@ -83,80 +71,6 @@ function formatValue(value: unknown): string {
  }
 }

-// Type guard for structured tool results
-type StructuredToolResult = {
-  type: "command" | "file_write" | "file_edit" | "file_read" | "generic";
-  [key: string]: unknown;
-};
-
-function isStructuredToolResult(result: unknown): result is StructuredToolResult {
-  return (
-    typeof result === "object" &&
-    result !== null &&
-    "type" in result &&
-    typeof result.type === "string" &&
-    ["command", "file_write", "file_edit", "file_read", "generic"].includes(result.type)
-  );
-}
-
-// Build diff lines from before/after strings
-function buildLineDiffFromStrings(originalText: string, updatedText: string): DiffLine[] {
-  const splitIntoLines = (text: string): string[] => {
-    if (!text) return [];
-    return text.replace(/\r\n/g, "\n").split("\n");
-  };
-
-  const originalLines = splitIntoLines(originalText);
-  const updatedLines = splitIntoLines(updatedText);
-
-  const hasAnyContent = originalLines.length > 0 || updatedLines.length > 0;
-  if (!hasAnyContent) return [];
-
-  const m = originalLines.length;
-  const n = updatedLines.length;
-  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
-
-  for (let i = m - 1; i >= 0; i -= 1) {
-    for (let j = n - 1; j >= 0; j -= 1) {
-      if (originalLines[i] === updatedLines[j]) {
-        dp[i][j] = dp[i + 1][j + 1] + 1;
-      } else {
-        dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-  }
-
-  const diff: DiffLine[] = [];
-  let i = 0;
-  let j = 0;
-
-  while (i < m && j < n) {
-    if (originalLines[i] === updatedLines[j]) {
-      diff.push({ type: "context", content: ` ${originalLines[i]}` });
-      i += 1;
-      j += 1;
-    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-      diff.push({ type: "remove", content: `-${originalLines[i]}` });
-      i += 1;
-    } else {
-      diff.push({ type: "add", content: `+${updatedLines[j]}` });
-      j += 1;
-    }
-  }
-
-  while (i < m) {
-    diff.push({ type: "remove", content: `-${originalLines[i]}` });
-    i += 1;
-  }
-
-  while (j < n) {
-    diff.push({ type: "add", content: `+${updatedLines[j]}` });
-    j += 1;
-  }
-
-  return diff;
-}
-
 // ----- Provider Component -----

 interface ToolCallSheetProviderProps {
@@ -167,7 +81,7 @@ export function ToolCallSheetProvider({ children }: ToolCallSheetProviderProps)
  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const [sheetData, setSheetData] = React.useState<ToolCallSheetData | null>(null);

-  const snapPoints = useMemo(() => ["60%", "90%"], []);
+  const snapPoints = useMemo(() => ["60%", "95%"], []);

  const openToolCall = useCallback((data: ToolCallSheetData) => {
    setSheetData(data);
@@ -207,6 +121,8 @@ export function ToolCallSheetProvider({ children }: ToolCallSheetProviderProps)
      <BottomSheetModal
        ref={bottomSheetRef}
        snapPoints={snapPoints}
+        index={0}
+        enableDynamicSizing={false}
        onChange={handleSheetChange}
        backdropComponent={renderBackdrop}
        enablePanDownToClose
@@ -227,127 +143,91 @@ interface ToolCallSheetContentProps {
 }

 function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
-  const {
-    toolName,
-    kind,
-    status,
-    args,
-    result,
-    error,
-    parsedEditEntries,
-    parsedReadEntries,
-    parsedCommandDetails,
-    cwd,
-  } = data;
+  const { toolName, kind, args, result, error } = data;

  const IconComponent = kind
    ? toolKindIcons[kind.toLowerCase()] || Wrench
    : Wrench;

-  const serializedArgs = useMemo(
-    () => (args !== undefined ? formatValue(args) : ""),
-    [args]
-  );
-  const serializedResult = useMemo(
-    () => (result !== undefined ? formatValue(result) : ""),
-    [result]
-  );
  const serializedError = useMemo(
    () => (error !== undefined ? formatValue(error) : ""),
    [error]
  );

-  // Check if result has a type field for structured rendering
-  const structuredResult = useMemo(
-    () => (isStructuredToolResult(result) ? result : null),
-    [result]
+  // Parse tool call display using discriminated union
+  const toolCallDisplay = useMemo(
+    () => parseToolCallDisplay(args, result),
+    [args, result]
  );

-  // Extract functions for structured results
-  const extractCommandFromStructured = useCallback(
-    (structured: StructuredToolResult): CommandDetails | null => {
-      if (structured.type !== "command") return null;
-
-      const cmd: CommandDetails = {};
-      if (typeof structured.command === "string") cmd.command = structured.command;
-      if (typeof structured.cwd === "string") cmd.cwd = structured.cwd;
-      if (typeof structured.output === "string") cmd.output = structured.output;
-      if (typeof structured.exitCode === "number") cmd.exitCode = structured.exitCode;
-
-      return cmd.command || cmd.output ? cmd : null;
-    },
-    []
-  );
-
-  const extractDiffFromStructured = useCallback(
-    (structured: StructuredToolResult): EditEntry[] => {
-      if (structured.type !== "file_write" && structured.type !== "file_edit") {
-        return [];
-      }
-
-      const filePath = typeof structured.filePath === "string" ? structured.filePath : undefined;
-
-      if (structured.type === "file_write") {
-        const oldContent = typeof structured.oldContent === "string" ? structured.oldContent : "";
-        const newContent = typeof structured.newContent === "string" ? structured.newContent : "";
-        const diffLines = buildLineDiffFromStrings(oldContent, newContent);
-        if (diffLines.length > 0) {
-          return [{ filePath, diffLines }];
-        }
-      }
-
-      if (structured.type === "file_edit") {
-        if (Array.isArray(structured.diffLines)) {
-          return [{ filePath, diffLines: structured.diffLines as DiffLine[] }];
-        }
-        const oldContent = typeof structured.oldContent === "string" ? structured.oldContent : "";
-        const newContent = typeof structured.newContent === "string" ? structured.newContent : "";
-        const diffLines = buildLineDiffFromStrings(oldContent, newContent);
-        if (diffLines.length > 0) {
-          return [{ filePath, diffLines }];
-        }
-      }
-
-      return [];
-    },
-    []
-  );
-
-  const extractReadFromStructured = useCallback(
-    (structured: StructuredToolResult): ReadEntry[] => {
-      if (structured.type !== "file_read") return [];
-
-      const filePath = typeof structured.filePath === "string" ? structured.filePath : undefined;
-      const content = typeof structured.content === "string" ? structured.content : "";
-
-      if (content) {
-        return [{ filePath, content }];
-      }
-
-      return [];
-    },
-    []
-  );
+  // Compute diff lines for edit type
+  const editDiffLines = useMemo((): DiffLine[] => {
+    if (toolCallDisplay.type !== "edit") return [];
+    return buildLineDiff(toolCallDisplay.oldString, toolCallDisplay.newString);
+  }, [toolCallDisplay]);

  // Render content sections
  const renderSections = useCallback(() => {
    const sections: ReactNode[] = [];
-    let hasOutput = false;

-    // Always show args first if available
-    if (args !== undefined) {
-      // Add Input group header
+    if (toolCallDisplay.type === "shell") {
+      // Shell tool: show command and output as single block
      sections.push(
-        <View key="input-header" style={styles.groupHeader}>
-          <Text style={styles.groupHeaderText}>Input</Text>
+        <View key="shell" style={styles.section}>
+          <Text style={styles.sectionTitle}>Command</Text>
+          <ScrollView
+            horizontal
+            nestedScrollEnabled
+            style={styles.jsonScroll}
+            contentContainerStyle={styles.jsonContent}
+            showsHorizontalScrollIndicator={true}
+          >
+            <Text style={styles.scrollText}>{toolCallDisplay.command}</Text>
+          </ScrollView>
+          {toolCallDisplay.output ? (
+            <ScrollView
+              style={styles.scrollArea}
+              contentContainerStyle={styles.scrollContent}
+              nestedScrollEnabled
+              showsVerticalScrollIndicator={true}
+            >
+              <ScrollView
+                horizontal
+                nestedScrollEnabled
+                showsHorizontalScrollIndicator={true}
+              >
+                <Text style={styles.scrollText}>{toolCallDisplay.output}</Text>
+              </ScrollView>
+            </ScrollView>
+          ) : null}
        </View>
      );
-
-      const argPairs = extractKeyValuePairs(args);
-      if (argPairs.length > 0) {
-        argPairs.forEach((pair, index) => {
+    } else if (toolCallDisplay.type === "edit") {
+      // Edit tool: show file path and diff
+      sections.push(
+        <View key="edit" style={styles.section}>
+          <Text style={styles.sectionTitle}>File</Text>
+          <View style={styles.fileBadge}>
+            <Text style={styles.fileBadgeText}>{toolCallDisplay.filePath}</Text>
+          </View>
+          {editDiffLines.length > 0 ? (
+            <View style={styles.diffContainer}>
+              <DiffViewer diffLines={editDiffLines} maxHeight={300} />
+            </View>
+          ) : null}
+        </View>
+      );
+    } else {
+      // Generic tool: show input/output as key-value pairs
+      if (toolCallDisplay.input.length > 0) {
+        sections.push(
+          <View key="input-header" style={styles.groupHeader}>
+            <Text style={styles.groupHeaderText}>Input</Text>
+          </View>
+        );
+        toolCallDisplay.input.forEach((pair, index) => {
          sections.push(
-            <View key={`arg-${index}-${pair.key}`} style={styles.section}>
+            <View key={`input-${index}-${pair.key}`} style={styles.section}>
              <Text style={styles.sectionTitle}>{pair.key}</Text>
              <ScrollView
                horizontal
@@ -361,175 +241,17 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
            </View>
          );
        });
-      } else {
-        // Fallback to raw JSON display
-        sections.push(
-          <View key="args" style={styles.section}>
-            <Text style={styles.sectionTitle}>Arguments</Text>
-            <ScrollView
-              horizontal
-              nestedScrollEnabled
-              style={styles.jsonScroll}
-              contentContainerStyle={styles.jsonContent}
-              showsHorizontalScrollIndicator={true}
-            >
-              <Text style={styles.scrollText}>{serializedArgs}</Text>
-            </ScrollView>
-          </View>
-        );
      }
-    }

-    // Helper to add output header once
-    const addOutputHeader = () => {
-      if (!hasOutput) {
-        hasOutput = true;
+      if (toolCallDisplay.output.length > 0) {
        sections.push(
          <View key="output-header" style={styles.groupHeader}>
            <Text style={styles.groupHeaderText}>Output</Text>
          </View>
        );
-      }
-    };
-
-    // Render based on structured result type or raw data
-    if (structuredResult) {
-      switch (structuredResult.type) {
-        case "command": {
-          const cmd = parsedCommandDetails ?? extractCommandFromStructured(structuredResult);
-          if (cmd) {
-            addOutputHeader();
-            sections.push(
-              <View key="command" style={styles.section}>
-                <Text style={styles.sectionTitle}>Command</Text>
-                {cmd.command ? (
-                  <ScrollView
-                    horizontal
-                    nestedScrollEnabled
-                    style={styles.jsonScroll}
-                    contentContainerStyle={styles.jsonContent}
-                    showsHorizontalScrollIndicator={true}
-                  >
-                    <Text style={styles.scrollText}>{cmd.command}</Text>
-                  </ScrollView>
-                ) : null}
-                {cmd.cwd ? (
-                  <View style={styles.metaRow}>
-                    <Text style={styles.metaLabel}>Directory</Text>
-                    <Text style={styles.metaValue}>{cmd.cwd}</Text>
-                  </View>
-                ) : null}
-                {cmd.exitCode !== undefined ? (
-                  <View style={styles.metaRow}>
-                    <Text style={styles.metaLabel}>Exit Code</Text>
-                    <Text style={styles.metaValue}>
-                      {cmd.exitCode === null ? "Unknown" : cmd.exitCode}
-                    </Text>
-                  </View>
-                ) : null}
-                {cmd.output ? (
-                  <ScrollView
-                    style={styles.scrollArea}
-                    contentContainerStyle={styles.scrollContent}
-                    nestedScrollEnabled
-                    showsVerticalScrollIndicator={true}
-                  >
-                    <Text style={styles.scrollText}>{cmd.output}</Text>
-                  </ScrollView>
-                ) : null}
-              </View>
-            );
-          }
-          break;
-        }
-
-        case "file_write":
-        case "file_edit": {
-          const diffs = parsedEditEntries?.length
-            ? parsedEditEntries
-            : extractDiffFromStructured(structuredResult);
-          if (diffs.length > 0) {
-            addOutputHeader();
-          }
-          diffs.forEach((entry, index) => {
-            sections.push(
-              <View key={`diff-${index}`} style={styles.section}>
-                <Text style={styles.sectionTitle}>Diff</Text>
-                {entry.filePath ? (
-                  <View style={styles.fileBadge}>
-                    <Text style={styles.fileBadgeText}>{stripCwdPrefix(entry.filePath, cwd)}</Text>
-                  </View>
-                ) : null}
-                <View style={styles.diffContainer}>
-                  <DiffViewer diffLines={entry.diffLines} maxHeight={300} />
-                </View>
-              </View>
-            );
-          });
-          break;
-        }
-
-        case "file_read": {
-          const reads = parsedReadEntries?.length
-            ? parsedReadEntries
-            : extractReadFromStructured(structuredResult);
-          if (reads.length > 0) {
-            addOutputHeader();
-          }
-          reads.forEach((entry, index) => {
-            sections.push(
-              <View key={`read-${index}`} style={styles.section}>
-                <Text style={styles.sectionTitle}>Read Result</Text>
-                {entry.filePath ? (
-                  <View style={styles.fileBadge}>
-                    <Text style={styles.fileBadgeText}>{stripCwdPrefix(entry.filePath, cwd)}</Text>
-                  </View>
-                ) : null}
-                <ScrollView
-                  style={styles.scrollArea}
-                  contentContainerStyle={styles.scrollContent}
-                  nestedScrollEnabled
-                  showsVerticalScrollIndicator={true}
-                >
-                  <Text style={styles.scrollText}>{entry.content}</Text>
-                </ScrollView>
-              </View>
-            );
-          });
-          break;
-        }
-
-        case "generic":
-        default: {
-          if (result !== undefined && sections.length === 1) {
-            // Only args shown, add result
-            addOutputHeader();
-            sections.push(
-              <View key="result" style={styles.section}>
-                <Text style={styles.sectionTitle}>Result</Text>
-                <ScrollView
-                  horizontal
-                  nestedScrollEnabled
-                  style={styles.jsonScroll}
-                  contentContainerStyle={styles.jsonContent}
-                  showsHorizontalScrollIndicator={true}
-                >
-                  <Text style={styles.scrollText}>{serializedResult}</Text>
-                </ScrollView>
-              </View>
-            );
-          }
-          break;
-        }
-      }
-    } else if (result !== undefined) {
-      // No structured result - try to extract key-value pairs
-      addOutputHeader();
-      const keyValuePairs = extractKeyValuePairs(result);
-      if (keyValuePairs.length > 0) {
-        keyValuePairs.forEach((pair, index) => {
+        toolCallDisplay.output.forEach((pair, index) => {
          sections.push(
-            <View key={`kv-${index}-${pair.key}`} style={styles.section}>
+            <View key={`output-${index}-${pair.key}`} style={styles.section}>
              <Text style={styles.sectionTitle}>{pair.key}</Text>
              <ScrollView
                horizontal
@@ -543,22 +265,6 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
            </View>
          );
        });
-      } else {
-        // Fallback to raw JSON display
-        sections.push(
-          <View key="result" style={styles.section}>
-            <Text style={styles.sectionTitle}>Result</Text>
-            <ScrollView
-              horizontal
-              nestedScrollEnabled
-              style={styles.jsonScroll}
-              contentContainerStyle={styles.jsonContent}
-              showsHorizontalScrollIndicator={true}
-            >
-              <Text style={styles.scrollText}>{serializedResult}</Text>
-            </ScrollView>
-          </View>
-        );
      }
    }

@@ -587,21 +293,7 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
    }

    return sections;
-  }, [
-    args,
-    result,
-    error,
-    serializedArgs,
-    serializedResult,
-    serializedError,
-    structuredResult,
-    parsedEditEntries,
-    parsedReadEntries,
-    parsedCommandDetails,
-    extractCommandFromStructured,
-    extractDiffFromStructured,
-    extractReadFromStructured,
-  ]);
+  }, [toolCallDisplay, editDiffLines, error, serializedError]);

  return (
    <View style={styles.container}>
@@ -612,27 +304,6 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
          <Text style={styles.headerTitle} numberOfLines={1}>
            {toolName}
          </Text>
-          {status && (
-            <View
-              style={[
-                styles.statusBadge,
-                status === "executing" && styles.statusExecuting,
-                status === "completed" && styles.statusCompleted,
-                status === "failed" && styles.statusFailed,
-              ]}
-            >
-              <Text
-                style={[
-                  styles.statusText,
-                  status === "executing" && styles.statusTextExecuting,
-                  status === "completed" && styles.statusTextCompleted,
-                  status === "failed" && styles.statusTextFailed,
-                ]}
-              >
-                {status === "executing" ? "Running" : status === "completed" ? "Done" : "Failed"}
-              </Text>
-            </View>
-          )}
        </View>
        <Pressable onPress={onClose} style={styles.closeButton}>
          <X size={20} color={styles.closeIcon.color} />
@@ -687,33 +358,6 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.foreground,
    flex: 1,
  },
-  statusBadge: {
-    paddingHorizontal: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
-    borderRadius: theme.borderRadius.full,
-  },
-  statusExecuting: {
-    backgroundColor: theme.colors.palette.blue[900],
-  },
-  statusCompleted: {
-    backgroundColor: theme.colors.palette.green[900],
-  },
-  statusFailed: {
-    backgroundColor: theme.colors.palette.red[900],
-  },
-  statusText: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  statusTextExecuting: {
-    color: theme.colors.palette.blue[200],
-  },
-  statusTextCompleted: {
-    color: theme.colors.palette.green[200],
-  },
-  statusTextFailed: {
-    color: theme.colors.palette.red[200],
-  },
  closeButton: {
    padding: theme.spacing[2],
  },
@@ -812,21 +456,4 @@ const styles = StyleSheet.create((theme) => ({
    fontSize: theme.fontSize.sm,
    fontStyle: "italic",
  },
-  metaRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  metaLabel: {
-    color: theme.colors.mutedForeground,
-    fontSize: theme.fontSize.xs,
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-  },
-  metaValue: {
-    color: theme.colors.foreground,
-    fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.xs,
-    flex: 1,
-  },
 }));