clawdex-mobile 5.0.1 → 5.0.2

package/apps/mobile/src/components/ChatMessage.tsx

@@ -1,959 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { memo, useMemo, useState, type ReactElement } from 'react';
-import {
-  Image,
-  Pressable,
-  type ImageSourcePropType,
-  Linking,
-  Platform,
-  StyleSheet,
-  Text,
-  type TextProps,
-  View,
-} from 'react-native';
-import Markdown, { type RenderRules } from 'react-native-markdown-display';
-
-import type { ChatMessage as ApiChatMessage } from '../api/types';
-import { colors, radius, spacing, typography } from '../theme';
-import { toMarkdownImageSource } from './chatImageSource';
-
-interface ChatMessageProps {
-  message: ApiChatMessage;
-  bridgeUrl?: string | null;
-  bridgeToken?: string | null;
-}
-
-interface TimelineEntry {
-  title: string;
-  details: string[];
-}
-
-type UserMessageBlock =
-  | { kind: 'text'; value: string }
-  | { kind: 'file'; value: string }
-  | { kind: 'image'; source: ImageSourcePropType; accessibilityLabel?: string };
-
-function ChatMessageComponent({ message, bridgeUrl = null, bridgeToken = null }: ChatMessageProps) {
-  const isUser = message.role === 'user';
-  const markdownRules = useMemo(
-    () => createMarkdownRules(bridgeUrl, bridgeToken),
-    [bridgeToken, bridgeUrl]
-  );
-  const [expandedTimelineEntries, setExpandedTimelineEntries] = useState<
-    Record<string, boolean>
-  >({});
-  const userBlocks = useMemo(
-    () =>
-      isUser ? parseUserMessageBlocks(message.content, bridgeUrl, bridgeToken) : [],
-    [bridgeToken, bridgeUrl, isUser, message.content]
-  );
-
-  const renderedMessage = isUser ? (
-    <View style={[styles.messageWrapper, styles.messageWrapperUser]}>
-      <View style={[styles.userBubble, userBlocks.length > 1 && styles.userBubbleWithAttachments]}>
-        <View style={styles.userBubbleContent}>
-          {userBlocks.map((block, index) => {
-            if (block.kind === 'image') {
-              return (
-                <MarkdownImage
-                  key={`${message.id}-image-${String(index)}`}
-                  source={block.source}
-                  accessibilityLabel={block.accessibilityLabel}
-                />
-              );
-            }
-
-            if (block.kind === 'file') {
-              return (
-                <View key={`${message.id}-file-${String(index)}`} style={styles.userFileChip}>
-                  <Ionicons name="document-text-outline" size={12} color={colors.textMuted} />
-                  <Text style={styles.userFileChipText} numberOfLines={1}>
-                    {block.value}
-                  </Text>
-                </View>
-              );
-            }
-
-            return (
-              <SelectableMessageText
-                key={`${message.id}-text-${String(index)}`}
-                style={styles.userMessageText}
-              >
-                {block.value}
-              </SelectableMessageText>
-            );
-          })}
-        </View>
-      </View>
-    </View>
-  ) : null;
-
-  if (renderedMessage) {
-    return renderedMessage;
-  }
-
-  const timelineEntries =
-    message.role === 'system' ? parseTimelineEntries(message.content) : null;
-  if (message.role === 'system' && message.systemKind === 'subAgent') {
-    const subAgentEntries =
-      timelineEntries && timelineEntries.length > 0
-        ? timelineEntries
-        : [{ title: message.content, details: [] }];
-
-    return (
-      <View style={[styles.messageWrapper, styles.messageWrapperAssistant]}>
-        <View style={styles.subAgentCardStack}>
-          {subAgentEntries.map((entry, index) => {
-            const visual = toSubAgentVisual(entry.title);
-            return (
-              <View
-                key={`${message.id}-subagent-${String(index)}`}
-                style={[
-                  styles.subAgentCard,
-                  visual.isError && styles.subAgentCardError,
-                ]}
-              >
-                <View style={styles.subAgentHeader}>
-                  <Ionicons
-                    name={visual.icon}
-                    size={14}
-                    color={visual.isError ? colors.statusError : '#F5A524'}
-                  />
-                  <Text style={styles.subAgentTitle}>{entry.title}</Text>
-                </View>
-                {entry.details.length > 0 ? (
-                  <View style={styles.subAgentDetailWrap}>
-                    {entry.details.map((line, lineIndex) => (
-                      <SelectableMessageText
-                        key={`${message.id}-subagent-${String(index)}-line-${String(lineIndex)}`}
-                        style={styles.subAgentDetailLine}
-                      >
-                        {line}
-                      </SelectableMessageText>
-                    ))}
-                  </View>
-                ) : null}
-              </View>
-            );
-          })}
-        </View>
-      </View>
-    );
-  }
-  if (timelineEntries && timelineEntries.length > 0) {
-    return (
-      <View style={[styles.messageWrapper, styles.messageWrapperAssistant]}>
-        <View style={styles.timelineCardStack}>
-          {timelineEntries.map((entry, index) => {
-            const visual = toTimelineVisual(entry.title);
-            const timelineKey = `${message.id}-timeline-${String(index)}`;
-            const hasDetails = entry.details.length > 0;
-            const expanded = expandedTimelineEntries[timelineKey] === true;
-            const toggleLabel = expanded
-              ? 'Tap to hide output'
-              : entry.details.length <= 1
-                ? 'Tap to show output'
-                : `Tap to show ${String(entry.details.length)} lines`;
-            return (
-              <Pressable
-                key={`${message.id}-timeline-${String(index)}`}
-                disabled={!hasDetails}
-                onPress={() => {
-                  if (!hasDetails) {
-                    return;
-                  }
-                  setExpandedTimelineEntries((previous) => ({
-                    ...previous,
-                    [timelineKey]: !previous[timelineKey],
-                  }));
-                }}
-                style={({ pressed }) => [
-                  styles.timelineCard,
-                  visual.isError && styles.timelineCardError,
-                  hasDetails && styles.timelineCardInteractive,
-                  pressed && hasDetails && styles.timelineCardPressed,
-                ]}
-              >
-                <View style={styles.timelineHeader}>
-                  <Ionicons
-                    name={visual.icon}
-                    size={14}
-                    color={visual.isError ? colors.statusError : colors.statusRunning}
-                  />
-                  <Text
-                    style={[
-                      styles.timelineTitle,
-                      visual.useMonospaceTitle && styles.timelineTitleMono,
-                    ]}
-                    numberOfLines={expanded ? 3 : 1}
-                  >
-                    {entry.title}
-                  </Text>
-                  {hasDetails ? (
-                    <Ionicons
-                      name={expanded ? 'chevron-up' : 'chevron-down'}
-                      size={14}
-                      color={colors.textMuted}
-                    />
-                  ) : null}
-                </View>
-                {hasDetails ? (
-                  <Text style={styles.timelineToggleText}>{toggleLabel}</Text>
-                ) : null}
-                {expanded && entry.details.length > 0 ? (
-                  <View style={styles.timelineDetailWrap}>
-                    {entry.details.map((line, lineIndex) => (
-                      <SelectableMessageText
-                        key={`${message.id}-timeline-${String(index)}-line-${String(lineIndex)}`}
-                        style={styles.timelineDetailLine}
-                      >
-                        {line}
-                      </SelectableMessageText>
-                    ))}
-                  </View>
-                ) : null}
-              </Pressable>
-            );
-          })}
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View style={[styles.messageWrapper, styles.messageWrapperAssistant]}>
-      <Markdown style={markdownStyles} rules={markdownRules}>
-        {message.content || '\u258D'}
-      </Markdown>
-    </View>
-  );
-}
-
-function areChatMessagePropsEqual(
-  prevProps: ChatMessageProps,
-  nextProps: ChatMessageProps
-): boolean {
-  const previous = prevProps.message;
-  const next = nextProps.message;
-
-  if (previous === next) {
-    return true;
-  }
-
-  return (
-    previous.id === next.id &&
-    previous.role === next.role &&
-    previous.content === next.content &&
-    previous.createdAt === next.createdAt &&
-    previous.systemKind === next.systemKind &&
-    prevProps.bridgeUrl === nextProps.bridgeUrl &&
-    prevProps.bridgeToken === nextProps.bridgeToken
-  );
-}
-
-export const ChatMessage = memo(ChatMessageComponent, areChatMessagePropsEqual);
-ChatMessage.displayName = 'ChatMessage';
-
-const monoFont = Platform.select({ ios: 'Menlo', default: 'monospace' });
-
-const markdownStyles = StyleSheet.create({
-  body: {
-    ...typography.body,
-    color: colors.textPrimary,
-  },
-  code_inline: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    backgroundColor: colors.inlineCodeBg,
-    color: colors.inlineCodeText,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.inlineCodeBorder,
-    borderRadius: 4,
-    paddingHorizontal: 5,
-    paddingVertical: 2,
-  },
-  code_block: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    backgroundColor: colors.bgInput,
-    color: colors.textPrimary,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.borderHighlight,
-    borderRadius: radius.sm,
-    padding: spacing.md,
-    marginVertical: spacing.sm,
-  },
-  fence: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    backgroundColor: colors.bgInput,
-    color: colors.textPrimary,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.borderHighlight,
-    borderRadius: radius.sm,
-    padding: spacing.md,
-    marginVertical: spacing.sm,
-  },
-  link: {
-    color: colors.accent,
-    textDecorationLine: 'underline',
-  },
-  paragraph: {
-    marginTop: spacing.xs,
-    marginBottom: spacing.xs,
-  },
-  bullet_list: {
-    marginVertical: spacing.xs,
-  },
-  ordered_list: {
-    marginVertical: spacing.xs,
-  },
-  list_item: {
-    marginVertical: 2,
-  },
-  strong: {
-    fontWeight: '700',
-    color: colors.textPrimary,
-  },
-  em: {
-    fontStyle: 'italic',
-  },
-});
-
-function createMarkdownRules(
-  bridgeUrl: string | null,
-  bridgeToken: string | null
-): RenderRules {
-  return {
-    text: (node, _children, _parent, styles, inheritedStyles = {}) => (
-      <SelectableMessageText key={node.key} style={[inheritedStyles, styles.text]}>
-        {node.content}
-      </SelectableMessageText>
-    ),
-    textgroup: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.textgroup}>
-        {children}
-      </SelectableMessageText>
-    ),
-    strong: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.strong}>
-        {children}
-      </SelectableMessageText>
-    ),
-    em: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.em}>
-        {children}
-      </SelectableMessageText>
-    ),
-    s: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.s}>
-        {children}
-      </SelectableMessageText>
-    ),
-    code_inline: (node, _children, _parent, styles, inheritedStyles = {}) => (
-      <SelectableMessageText key={node.key} style={[inheritedStyles, styles.code_inline]}>
-        {node.content}
-      </SelectableMessageText>
-    ),
-    code_block: (node, _children, _parent, styles, inheritedStyles = {}) => {
-      const content =
-        typeof node.content === 'string' && node.content.charAt(node.content.length - 1) === '\n'
-          ? node.content.substring(0, node.content.length - 1)
-          : node.content;
-      return (
-        <SelectableMessageText key={node.key} style={[inheritedStyles, styles.code_block]}>
-          {content}
-        </SelectableMessageText>
-      );
-    },
-    fence: (node, _children, _parent, styles, inheritedStyles = {}) => {
-      const content =
-        typeof node.content === 'string' && node.content.charAt(node.content.length - 1) === '\n'
-          ? node.content.substring(0, node.content.length - 1)
-          : node.content;
-      return (
-        <SelectableMessageText key={node.key} style={[inheritedStyles, styles.fence]}>
-          {content}
-        </SelectableMessageText>
-      );
-    },
-    hardbreak: (node, _children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.hardbreak}>
-        {'\n'}
-      </SelectableMessageText>
-    ),
-    softbreak: (node, _children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.softbreak}>
-        {'\n'}
-      </SelectableMessageText>
-    ),
-    inline: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.inline}>
-        {children}
-      </SelectableMessageText>
-    ),
-    span: (node, children, _parent, styles) => (
-      <SelectableMessageText key={node.key} style={styles.span}>
-        {children}
-      </SelectableMessageText>
-    ),
-    link: (node, children, _parent, styles, onLinkPress) => {
-      const href = readMarkdownAttr(node.attributes.href);
-      if (!href) {
-        return (
-          <SelectableMessageText key={node.key} style={styles.link}>
-            {children}
-          </SelectableMessageText>
-        );
-      }
-
-      const localFileReference = toLocalFileReferenceLabel(href);
-      if (localFileReference) {
-        return (
-          <SelectableMessageText key={node.key} style={styles.code_inline}>
-            {localFileReference}
-          </SelectableMessageText>
-        );
-      }
-
-      return (
-        <SelectableMessageText
-          key={node.key}
-          style={styles.link}
-          onPress={() => openMarkdownLink(href, onLinkPress)}
-        >
-          {children}
-        </SelectableMessageText>
-      );
-    },
-    image: (node) => {
-      const src = readMarkdownAttr(node.attributes.src);
-      if (!src) {
-        return null;
-      }
-      const source = toMarkdownImageSource(src, bridgeUrl, bridgeToken);
-      if (!source) {
-        return null;
-      }
-      const alt = readMarkdownAttr(node.attributes.alt);
-
-      return (
-        <MarkdownImage
-          key={node.key}
-          source={source}
-          accessibilityLabel={alt ?? undefined}
-        />
-      );
-    },
-  };
-}
-
-const styles = StyleSheet.create({
-  messageWrapper: {
-    maxWidth: '92%',
-  },
-  messageWrapperUser: {
-    alignSelf: 'flex-end',
-  },
-  messageWrapperAssistant: {
-    alignSelf: 'flex-start',
-    width: '100%',
-  },
-  userBubble: {
-    backgroundColor: colors.userBubble,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.userBubbleBorder,
-    borderRadius: radius.lg,
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-  },
-  userBubbleWithAttachments: {
-    minWidth: 196,
-  },
-  userBubbleContent: {
-    gap: spacing.sm,
-  },
-  userMessageText: {
-    fontFamily: monoFont,
-    fontSize: 14,
-    color: colors.textPrimary,
-    lineHeight: 20,
-  },
-  userFileChip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    gap: spacing.xs,
-    borderRadius: radius.sm,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.userBubbleBorder,
-    backgroundColor: colors.bgMain,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs,
-    maxWidth: '100%',
-  },
-  userFileChipText: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    lineHeight: 16,
-    color: colors.textMuted,
-    flexShrink: 1,
-  },
-  markdownImage: {
-    width: '100%',
-    borderRadius: radius.sm,
-    marginVertical: spacing.sm,
-    backgroundColor: colors.bgInput,
-  },
-  markdownImageFallback: {
-    minHeight: 120,
-    maxHeight: 260,
-  },
-  timelineCardStack: {
-    gap: spacing.sm,
-  },
-  subAgentCardStack: {
-    gap: spacing.xs + 2,
-  },
-  subAgentCard: {
-    borderRadius: radius.md,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(245, 165, 36, 0.35)',
-    backgroundColor: 'rgba(245, 165, 36, 0.08)',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm + 1,
-  },
-  subAgentCardError: {
-    borderColor: colors.statusError,
-    backgroundColor: colors.errorBg,
-  },
-  subAgentHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-  },
-  subAgentTitle: {
-    ...typography.body,
-    color: colors.textPrimary,
-    flex: 1,
-    fontSize: 13,
-    lineHeight: 18,
-  },
-  subAgentDetailWrap: {
-    marginTop: spacing.xs,
-    paddingLeft: spacing.lg + 2,
-    gap: 2,
-  },
-  subAgentDetailLine: {
-    ...typography.caption,
-    color: colors.textMuted,
-    lineHeight: 16,
-  },
-  timelineCard: {
-    borderRadius: radius.md,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.borderLight,
-    backgroundColor: colors.bgItem,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm + 2,
-  },
-  timelineCardError: {
-    borderColor: colors.statusError,
-    backgroundColor: colors.errorBg,
-  },
-  timelineCardInteractive: {
-    overflow: 'hidden',
-  },
-  timelineCardPressed: {
-    opacity: 0.82,
-  },
-  timelineHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-  },
-  timelineTitle: {
-    ...typography.body,
-    color: colors.textPrimary,
-    flex: 1,
-    fontSize: 13,
-    lineHeight: 18,
-  },
-  timelineTitleMono: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    lineHeight: 18,
-  },
-  timelineDetailWrap: {
-    marginTop: spacing.xs,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: colors.borderLight,
-    paddingTop: spacing.xs,
-    gap: 2,
-  },
-  timelineToggleText: {
-    ...typography.caption,
-    color: colors.textMuted,
-    marginTop: spacing.xs,
-  },
-  timelineDetailLine: {
-    fontFamily: monoFont,
-    fontSize: 11,
-    lineHeight: 16,
-    color: colors.textSecondary,
-  },
-});
-
-function readMarkdownAttr(value: unknown): string | null {
-  return typeof value === 'string' && value.trim().length > 0 ? value : null;
-}
-
-function SelectableMessageText({ children, ...props }: TextProps): ReactElement {
-  return (
-    <Text selectable={props.selectable ?? !props.onPress} {...props}>
-      {children}
-    </Text>
-  );
-}
-
-function MarkdownImage({
-  source,
-  accessibilityLabel,
-}: {
-  source: ImageSourcePropType;
-  accessibilityLabel?: string;
-}): ReactElement {
-  const [aspectRatio, setAspectRatio] = useState<number | null>(null);
-
-  return (
-    <Image
-      source={source}
-      style={[
-        styles.markdownImage,
-        aspectRatio ? { aspectRatio } : styles.markdownImageFallback,
-      ]}
-      resizeMode="contain"
-      accessible={Boolean(accessibilityLabel)}
-      accessibilityLabel={accessibilityLabel}
-      onLoad={(event) => {
-        const width = event.nativeEvent.source?.width;
-        const height = event.nativeEvent.source?.height;
-        if (
-          typeof width !== 'number' ||
-          typeof height !== 'number' ||
-          !Number.isFinite(width) ||
-          !Number.isFinite(height) ||
-          width <= 0 ||
-          height <= 0
-        ) {
-          return;
-        }
-
-        const nextAspectRatio = width / height;
-        setAspectRatio((previousAspectRatio) =>
-          previousAspectRatio === nextAspectRatio ? previousAspectRatio : nextAspectRatio
-        );
-      }}
-    />
-  );
-}
-
-function parseUserMessageBlocks(
-  content: string,
-  bridgeUrl: string | null,
-  bridgeToken: string | null
-): UserMessageBlock[] {
-  const blocks: UserMessageBlock[] = [];
-  const pendingTextLines: string[] = [];
-
-  const flushTextBlock = () => {
-    if (pendingTextLines.length === 0) {
-      return;
-    }
-
-    const value = pendingTextLines.join('\n');
-    pendingTextLines.length = 0;
-    if (!value.trim()) {
-      return;
-    }
-
-    blocks.push({
-      kind: 'text',
-      value,
-    });
-  };
-
-  for (const line of content.split('\n')) {
-    const localImageMatch = line.match(/^\[local image:\s*(.+?)\]$/i);
-    if (localImageMatch) {
-      const source = toMarkdownImageSource(localImageMatch[1], bridgeUrl, bridgeToken);
-      if (source) {
-        flushTextBlock();
-        blocks.push({
-          kind: 'image',
-          source,
-          accessibilityLabel: toPathBasename(localImageMatch[1]),
-        });
-        continue;
-      }
-    }
-
-    const remoteImageMatch = line.match(/^\[image:\s*(.+?)\]$/i);
-    if (remoteImageMatch) {
-      const source = toMarkdownImageSource(remoteImageMatch[1], bridgeUrl, bridgeToken);
-      if (source) {
-        flushTextBlock();
-        blocks.push({
-          kind: 'image',
-          source,
-          accessibilityLabel: toPathBasename(remoteImageMatch[1]),
-        });
-        continue;
-      }
-    }
-
-    const fileMatch = line.match(/^\[file:\s*(.+?)\]$/i);
-    if (fileMatch) {
-      flushTextBlock();
-      blocks.push({
-        kind: 'file',
-        value: toLocalFileReferenceLabel(fileMatch[1]) ?? toPathBasename(fileMatch[1]),
-      });
-      continue;
-    }
-
-    pendingTextLines.push(line);
-  }
-
-  flushTextBlock();
-
-  if (blocks.length === 0) {
-    return [
-      {
-        kind: 'text',
-        value: content,
-      },
-    ];
-  }
-
-  return blocks;
-}
-
-function toPathBasename(path: string): string {
-  const normalizedPath = path.trim().replace(/\\/g, '/');
-  if (!normalizedPath) {
-    return 'image';
-  }
-
-  const basename = normalizedPath.split('/').filter(Boolean).pop();
-  return basename && basename.length > 0 ? basename : normalizedPath;
-}
-
-function openMarkdownLink(
-  href: string,
-  onLinkPress?: (url: string) => boolean
-): void {
-  const shouldOpen = onLinkPress ? onLinkPress(href) !== false : true;
-  if (!shouldOpen) {
-    return;
-  }
-  void Linking.openURL(href).catch(() => {});
-}
-
-function toLocalFileReferenceLabel(href: string): string | null {
-  let normalizedHref = href.trim();
-  if (!normalizedHref) {
-    return null;
-  }
-
-  try {
-    normalizedHref = decodeURIComponent(normalizedHref);
-  } catch {
-    // Keep original href when decode fails.
-  }
-
-  if (normalizedHref.startsWith('file://')) {
-    normalizedHref = normalizedHref.replace(/^file:\/\//, '');
-  }
-
-  const isPosixPath = normalizedHref.startsWith('/');
-  const isWindowsPath = /^[A-Za-z]:[\\/]/.test(normalizedHref);
-  if (!isPosixPath && !isWindowsPath) {
-    return null;
-  }
-
-  const anchorLineMatch = normalizedHref.match(/#L(\d+)(?:C\d+)?$/i);
-  const suffixLineMatch = normalizedHref.match(/:(\d+)(?::\d+)?$/);
-
-  const line = anchorLineMatch?.[1] ?? suffixLineMatch?.[1] ?? null;
-  let pathOnly = normalizedHref;
-  if (anchorLineMatch) {
-    pathOnly = normalizedHref.slice(0, normalizedHref.length - anchorLineMatch[0].length);
-  } else if (suffixLineMatch) {
-    pathOnly = normalizedHref.slice(0, normalizedHref.length - suffixLineMatch[0].length);
-  }
-
-  const basename = pathOnly.split(/[\\/]/).filter(Boolean).pop();
-  if (!basename) {
-    return line ? `line ${line}` : null;
-  }
-
-  return line ? `${basename}:${line}` : basename;
-}
-
-function parseTimelineEntries(content: string): TimelineEntry[] | null {
-  if (!content.includes('•')) {
-    return null;
-  }
-
-  const lines = content.split('\n');
-  const entries: TimelineEntry[] = [];
-  let current: TimelineEntry | null = null;
-
-  const commitCurrent = () => {
-    if (!current || !current.title) {
-      current = null;
-      return;
-    }
-    entries.push(current);
-    current = null;
-  };
-
-  for (const line of lines) {
-    const headingMatch = line.match(/^\s*•\s+(.+)$/);
-    if (headingMatch) {
-      commitCurrent();
-      current = {
-        title: headingMatch[1].trim(),
-        details: [],
-      };
-      continue;
-    }
-
-    if (!current) {
-      if (line.trim().length > 0) {
-        return null;
-      }
-      continue;
-    }
-
-    const detail = normalizeTimelineDetail(line);
-    if (detail) {
-      current.details.push(detail);
-    }
-  }
-
-  commitCurrent();
-  return entries.length > 0 ? entries : null;
-}
-
-function normalizeTimelineDetail(line: string): string | null {
-  if (line.trim().length === 0) {
-    return null;
-  }
-
-  const withoutMarker = line.replace(/^\s*[└├│]\s*/, '').trimEnd();
-  if (withoutMarker.trim().length === 0) {
-    return null;
-  }
-
-  return withoutMarker;
-}
-
-function toTimelineVisual(title: string): {
-  icon: keyof typeof Ionicons.glyphMap;
-  useMonospaceTitle: boolean;
-  isError: boolean;
-} {
-  const normalized = title.toLowerCase();
-  const isError =
-    normalized.includes('failed') || normalized.includes('error') || normalized.includes('aborted');
-
-  if (isError) {
-    return {
-      icon: 'alert-circle-outline',
-      useMonospaceTitle: false,
-      isError: true,
-    };
-  }
-
-  if (normalized.startsWith('ran ')) {
-    return {
-      icon: 'play-outline',
-      useMonospaceTitle: true,
-      isError: false,
-    };
-  }
-
-  if (normalized.startsWith('explored')) {
-    return {
-      icon: 'search',
-      useMonospaceTitle: false,
-      isError: false,
-    };
-  }
-
-  if (normalized.startsWith('called tool')) {
-    return {
-      icon: 'construct-outline',
-      useMonospaceTitle: false,
-      isError: false,
-    };
-  }
-
-  if (normalized.startsWith('searched web')) {
-    return {
-      icon: 'globe-outline',
-      useMonospaceTitle: false,
-      isError: false,
-    };
-  }
-
-  return {
-    icon: 'document-text-outline',
-    useMonospaceTitle: false,
-    isError: false,
-  };
-}
-
-function toSubAgentVisual(title: string): {
-  icon: keyof typeof Ionicons.glyphMap;
-  isError: boolean;
-} {
-  const normalized = title.toLowerCase();
-  const isError =
-    normalized.includes('failed') || normalized.includes('error') || normalized.includes('aborted');
-
-  if (isError) {
-    return {
-      icon: 'alert-circle-outline',
-      isError: true,
-    };
-  }
-
-  if (normalized.includes('waiting')) {
-    return {
-      icon: 'pause-circle-outline',
-      isError: false,
-    };
-  }
-
-  if (normalized.includes('closed')) {
-    return {
-      icon: 'checkmark-circle-outline',
-      isError: false,
-    };
-  }
-
-  if (normalized.includes('spawn')) {
-    return {
-      icon: 'sparkles-outline',
-      isError: false,
-    };
-  }
-
-  return {
-    icon: 'git-branch-outline',
-    isError: false,
-  };
-}