spiracha 2.0.0 → 2.2.0

package/apps/ui/src/routes/threads.$threadId.tsx

@@ -1,7 +1,14 @@
+import type {
+    DynamicToolDefinition,
+    MessageEvent,
+    ParsedCodexTranscript,
+    ThreadEvent,
+} from '@spiracha/lib/codex-browser-types';
 import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { Download, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { ChevronDown, ChevronUp, Download, Search, Trash2 } from 'lucide-react';
+import type { KeyboardEvent } from 'react';
+import { startTransition, useEffect, useMemo, useState } from 'react';
 import { Breadcrumbs } from '#/components/breadcrumbs';
 import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
 import { ExportDialog } from '#/components/export-dialog';
@@ -10,18 +17,168 @@ import { LoadingPanel } from '#/components/loading-panel';
 import { MetadataSection } from '#/components/metadata-section';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
-import { TranscriptView } from '#/components/transcript-view';
+import { RouteErrorPanel } from '#/components/route-error-panel';
+import { ThreadGoalsPanel } from '#/components/thread-goals-panel';
+import { ThreadToolsPanel } from '#/components/thread-tools-panel';
+import {
+    getTranscriptEventKey,
+    shouldShowEvent,
+    type TranscriptSortOrder,
+    TranscriptView,
+} from '#/components/transcript-view';
 import { Badge } from '#/components/ui/badge';
 import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
+import { Input } from '#/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '#/components/ui/tabs';
-import { threadSnapshotQueryOptions, threadTranscriptQueryOptions } from '#/lib/codex-queries';
+import {
+    threadSnapshotQueryOptions,
+    threadTranscriptPreviewQueryOptions,
+    threadTranscriptQueryOptions,
+} from '#/lib/codex-queries';
 import { deleteThreadFn, exportThreadFn, type getThreadSnapshotFn } from '#/lib/codex-server';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
-import { formatBooleanLabel, formatBytes, formatDateTime, formatList, formatTokens } from '#/lib/formatters';
+import {
+    formatBooleanLabel,
+    formatBytes,
+    formatDateTime,
+    formatList,
+    formatModelLabel,
+    formatTokens,
+} from '#/lib/formatters';
+import { getMutationErrorMessage } from '#/lib/mutation-error';
+import { applyPathTransforms } from '#/lib/path-utils';
+import {
+    parseThreadTranscriptSearch,
+    type ThreadTranscriptSearch,
+    withThreadTranscriptSearch,
+} from '#/lib/route-search';
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
 import { useSettings } from '#/lib/settings-store';
+import { formatSandboxPolicy } from '#/lib/thread-metadata';
+import { shouldLoadFullThreadTranscript } from '#/lib/thread-transcript-load';
 
-type ThreadSnapshot = Awaited<ReturnType<typeof getThreadSnapshotFn>>;
+type ThreadSnapshotResponse = Awaited<ReturnType<typeof getThreadSnapshotFn>>;
+type ThreadTranscript = ParsedCodexTranscript;
+type ThreadSnapshot = Omit<ThreadSnapshotResponse, 'availableTools' | 'transcript'> & {
+    availableTools: DynamicToolDefinition[];
+    transcript: ThreadTranscript | null;
+};
+
+type TranscriptSearchResult = {
+    event: MessageEvent;
+    eventIndex: number;
+    eventKey: string;
+    messageNumber: number;
+    phase: string | null;
+    roleLabel: string;
+    snippet: string;
+};
+
+type TranscriptSearchPanelProps = {
+    activeResultIndex: number;
+    query: string;
+    results: TranscriptSearchResult[];
+    onJumpToResult: (index: number) => void;
+    onQueryChange: (value: string) => void;
+};
+
+type TranscriptSearchFilters = {
+    showCommentary: boolean;
+    showExtraEvents: boolean;
+    showToolCalls: boolean;
+    showUserMessages: boolean;
+};
+
+const SEARCH_SNIPPET_RADIUS = 72;
+
+const getTranscriptFiltersFromSearch = (search: ThreadTranscriptSearch) => ({
+    showCommentary: search.commentary === true,
+    showExtraEvents: search.extra === true,
+    showToolCalls: search.tools === true,
+    showUserMessages: search.user === true,
+});
+
+type ThreadTranscriptFilters = ReturnType<typeof getTranscriptFiltersFromSearch>;
+
+const normalizeTranscriptSearchText = (value: string) => value.replace(/\s+/gu, ' ').trim();
+
+const getTranscriptSearchRoleLabel = (event: MessageEvent, assistantModel: string | null) => {
+    if (event.role === 'assistant') {
+        return formatModelLabel(event.model ?? assistantModel);
+    }
+
+    return event.role === 'system' ? 'System' : 'User';
+};
+
+const buildTranscriptSearchSnippet = (text: string, query: string) => {
+    const normalizedText = normalizeTranscriptSearchText(text);
+    const normalizedQuery = normalizeTranscriptSearchText(query).toLowerCase();
+    const matchIndex = normalizedText.toLowerCase().indexOf(normalizedQuery);
+
+    if (matchIndex < 0) {
+        return normalizedText.slice(0, SEARCH_SNIPPET_RADIUS * 2);
+    }
+
+    const start = Math.max(0, matchIndex - SEARCH_SNIPPET_RADIUS);
+    const end = Math.min(normalizedText.length, matchIndex + normalizedQuery.length + SEARCH_SNIPPET_RADIUS);
+    const prefix = start > 0 ? '...' : '';
+    const suffix = end < normalizedText.length ? '...' : '';
+
+    return `${prefix}${normalizedText.slice(start, end)}${suffix}`;
+};
+
+const buildTranscriptSearchResults = (
+    events: ThreadEvent[],
+    query: string,
+    assistantModel: string | null,
+    filters: TranscriptSearchFilters,
+    transform: (text: string) => string,
+): TranscriptSearchResult[] => {
+    const normalizedQuery = normalizeTranscriptSearchText(query).toLowerCase();
+    if (!normalizedQuery) {
+        return [];
+    }
+
+    const results: TranscriptSearchResult[] = [];
+    let messageNumber = 0;
+
+    events.forEach((event, index) => {
+        if (event.kind !== 'message') {
+            return;
+        }
+
+        if (
+            !shouldShowEvent(
+                event,
+                filters.showToolCalls,
+                filters.showExtraEvents,
+                filters.showCommentary,
+                filters.showUserMessages,
+            )
+        ) {
+            return;
+        }
+
+        messageNumber += 1;
+        const searchText = normalizeTranscriptSearchText(transform(event.text));
+        if (!searchText.toLowerCase().includes(normalizedQuery)) {
+            return;
+        }
+
+        results.push({
+            event,
+            eventIndex: index,
+            eventKey: getTranscriptEventKey(event, index),
+            messageNumber,
+            phase: event.phase,
+            roleLabel: getTranscriptSearchRoleLabel(event, assistantModel),
+            snippet: buildTranscriptSearchSnippet(searchText, query),
+        });
+    });
+
+    return results;
+};
 
 type TranscriptControlsProps = {
     rawJsonDisabled?: boolean;
@@ -91,6 +248,7 @@ const buildRuntimeItems = (snapshot: ThreadSnapshot) => {
         { label: 'Reasoning effort', value: snapshot.thread.reasoning_effort ?? 'n/a' },
         { label: 'CLI version', value: snapshot.thread.cli_version },
         { label: 'Approval mode', value: snapshot.thread.approval_mode },
+        { label: 'Sandbox policy', value: formatSandboxPolicy(snapshot.thread.sandbox_policy) },
         { label: 'Memory mode', value: snapshot.thread.memory_mode },
         { label: 'Has user event', value: formatBooleanLabel(Boolean(snapshot.thread.has_user_event)) },
     ];
@@ -162,7 +320,7 @@ const buildTranscriptStatsItems = (snapshot: ThreadSnapshot) => {
         return [
             { label: 'Transcript load', value: 'Deferred for oversized rollout' },
             { label: 'Rollout size', value: formatBytes(snapshot.rollout.fileSizeBytes) },
-            { label: 'Preview mode', value: 'Load the transcript manually to inspect it.' },
+            { label: 'Deferred load', value: 'Load the transcript manually to inspect it.' },
         ];
     }
 
@@ -240,6 +398,98 @@ function TranscriptControls({
     );
 }
 
+function TranscriptSearchPanel({
+    activeResultIndex,
+    query,
+    results,
+    onJumpToResult,
+    onQueryChange,
+}: TranscriptSearchPanelProps) {
+    const hasQuery = normalizeTranscriptSearchText(query).length > 0;
+    const hasResults = results.length > 0;
+    const statusLabel = hasQuery
+        ? hasResults
+            ? `${activeResultIndex + 1} / ${results.length}`
+            : 'No matches'
+        : 'Search';
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key !== 'Enter' || !hasResults) {
+            return;
+        }
+
+        event.preventDefault();
+        onJumpToResult(event.shiftKey ? activeResultIndex - 1 : activeResultIndex);
+    };
+
+    return (
+        <section className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-4 py-3 shadow-[var(--panel-shadow)]">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+                <div className="relative min-w-0 flex-1">
+                    <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--muted-foreground)]" />
+                    <Input
+                        aria-label="Search transcript messages"
+                        className="h-10 rounded-full border-[var(--border)] bg-[var(--panel-secondary)] pr-4 pl-9"
+                        placeholder="Search transcript messages"
+                        value={query}
+                        onChange={(event) => onQueryChange(event.target.value)}
+                        onKeyDown={handleKeyDown}
+                    />
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                    <span className="min-w-20 text-right text-[var(--muted-foreground)] text-sm">{statusLabel}</span>
+                    <Button
+                        className="rounded-full"
+                        disabled={!hasResults}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                        onClick={() => onJumpToResult(activeResultIndex - 1)}
+                    >
+                        <ChevronUp className="size-4" />
+                        Prev
+                    </Button>
+                    <Button
+                        className="rounded-full"
+                        disabled={!hasResults}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                        onClick={() => onJumpToResult(activeResultIndex + 1)}
+                    >
+                        <ChevronDown className="size-4" />
+                        Next
+                    </Button>
+                </div>
+            </div>
+
+            {hasQuery && hasResults ? (
+                <div className="mt-3 max-h-72 overflow-auto rounded-xl border border-[var(--border)] bg-[var(--panel-secondary)]">
+                    {results.map((result, index) => (
+                        <button
+                            key={result.eventKey}
+                            aria-current={index === activeResultIndex ? 'true' : undefined}
+                            className="block w-full border-[var(--border)] border-b px-3 py-2.5 text-left transition last:border-b-0 hover:bg-[var(--panel)] aria-current:bg-[var(--panel)]"
+                            type="button"
+                            onClick={() => onJumpToResult(index)}
+                        >
+                            <span className="flex flex-wrap items-center gap-2">
+                                <span className="font-medium text-sm">Message {result.messageNumber}</span>
+                                <Badge variant="outline">{result.roleLabel}</Badge>
+                                {result.phase ? <Badge variant="outline">{result.phase}</Badge> : null}
+                            </span>
+                            <span className="mt-1 block min-w-0 break-words text-[var(--muted-foreground)] text-sm leading-5 [overflow-wrap:anywhere]">
+                                {result.snippet}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            ) : null}
+        </section>
+    );
+}
+
 function ThreadMetadataPanels({ snapshot }: ThreadMetadataProps) {
     return (
         <div className="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
@@ -251,29 +501,7 @@ function ThreadMetadataPanels({ snapshot }: ThreadMetadataProps) {
 
             <div className="space-y-4">
                 <MetadataSection items={buildRelationItems(snapshot)} title="Relations and summary" />
-
-                <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
-                    <h3 className="font-semibold text-[var(--muted-foreground)] text-sm uppercase tracking-[0.18em]">
-                        Available tools
-                    </h3>
-                    <div className="mt-4 space-y-3">
-                        {snapshot.availableTools.map((tool) => (
-                            <div
-                                key={`${tool.name}-${tool.namespace ?? 'global'}`}
-                                className="rounded-xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3.5"
-                            >
-                                <div className="flex flex-wrap items-center gap-2">
-                                    <p className="font-medium font-mono text-sm">{tool.name}</p>
-                                    {tool.namespace ? <Badge variant="outline">{tool.namespace}</Badge> : null}
-                                </div>
-                                <p className="mt-1.5 text-[var(--muted-foreground)] text-sm">
-                                    {tool.description || 'No description.'}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
-                </section>
-
+                <ThreadGoalsPanel goals={snapshot.goals} />
                 <MetadataSection items={buildTranscriptStatsItems(snapshot)} title="Transcript stats" />
             </div>
         </div>
@@ -319,12 +547,12 @@ function DeferredTranscriptNotice({
             <p className="mt-2 text-[var(--muted-foreground)] text-sm leading-6">
                 {missing
                     ? 'The rollout JSONL referenced by this thread is no longer present on disk. Export may still work if the file is restored, but transcript browsing is unavailable right now.'
-                    : `Spiracha skipped loading the transcript automatically because the rollout file is ${formatBytes(fileSizeBytes)}. Export still works immediately. If you need to inspect the thread here, load a bounded preview manually.`}
+                    : `Spiracha skipped loading the transcript automatically because the rollout file is ${formatBytes(fileSizeBytes)}. Export still works immediately. Load the full transcript when you need to inspect it here.`}
             </p>
             {missing ? null : (
                 <div className="mt-4">
                     <Button disabled={pending} variant="outline" onClick={onLoad}>
-                        {pending ? 'Loading preview...' : 'Load transcript preview'}
+                        {pending ? 'Loading full thread...' : 'Load Full Thread'}
                     </Button>
                 </div>
             )}
@@ -332,27 +560,43 @@ function DeferredTranscriptNotice({
     );
 }
 
-function ThreadErrorComponent({ error }: { error: Error }) {
-    const isSqlite = error.message.includes('unable to open database') || error.message.includes('database is locked');
+function LargeThreadPreviewNotice({
+    fileSizeBytes,
+    fullTranscriptLoaded,
+    pending,
+    onLoad,
+}: {
+    fileSizeBytes: number | null;
+    fullTranscriptLoaded: boolean;
+    pending: boolean;
+    onLoad: () => void;
+}) {
+    const buttonLabel = fullTranscriptLoaded
+        ? 'Full thread loaded'
+        : pending
+          ? 'Loading full thread...'
+          : 'Load Full Thread';
+
     return (
-        <div className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center">
-            <p className="font-medium text-[var(--destructive)] text-sm">
-                {isSqlite ? 'Database unavailable' : 'Failed to load thread'}
-            </p>
-            <p className="mt-2 text-[var(--muted-foreground)] text-sm">
-                {isSqlite ? 'Codex may have an exclusive lock on the database. Reload to retry.' : error.message}
+        <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+            <h3 className="font-semibold text-base">Showing the latest matching messages</h3>
+            <p className="mt-2 text-[var(--muted-foreground)] text-sm leading-6">
+                This rollout is {formatBytes(fileSizeBytes)}, so Spiracha loaded a small window from the end of the
+                thread using the current transcript filters. Load the full thread when you need earlier messages.
             </p>
-            <button
-                className="mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline"
-                type="button"
-                onClick={() => window.location.reload()}
-            >
-                Reload
-            </button>
-        </div>
+            <div className="mt-4">
+                <Button disabled={pending || fullTranscriptLoaded} variant="outline" onClick={onLoad}>
+                    {buttonLabel}
+                </Button>
+            </div>
+        </section>
     );
 }
 
+function ThreadErrorComponent({ error }: { error: Error }) {
+    return <RouteErrorPanel error={error} title="Failed to load thread" />;
+}
+
 const getThreadExportErrorMessage = (transcriptMissing: boolean, error: unknown): string | null => {
     if (transcriptMissing) {
         return 'The rollout JSONL file is missing from disk, so this thread cannot be exported right now.';
@@ -371,10 +615,199 @@ export const Route = createFileRoute('/threads/$threadId')({
             title="Loading thread"
         />
     ),
+    validateSearch: parseThreadTranscriptSearch,
 });
 
-function ThreadDetailPage() {
-    const navigate = useNavigate();
+const useThreadTranscriptRouteSearch = () => {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const search = Route.useSearch();
+    const transcriptFilters = useMemo(() => getTranscriptFiltersFromSearch(search), [search]);
+
+    const updateTranscriptSearch = (patch: Partial<ThreadTranscriptSearch>) => {
+        startTransition(() => {
+            void navigate({
+                params: true,
+                replace: true,
+                search: (previous: Record<string, unknown>) => withThreadTranscriptSearch(previous, patch),
+            });
+        });
+    };
+
+    return {
+        navigate,
+        search,
+        transcriptFilters,
+        updateTranscriptSearch,
+    };
+};
+
+const useTranscriptSearchResults = ({
+    assistantModel,
+    filters,
+    projectPath,
+    query,
+    settings,
+    transcript,
+}: {
+    assistantModel: string | null;
+    filters: TranscriptSearchFilters;
+    projectPath: string;
+    query: string;
+    settings: ReturnType<typeof useSettings>['settings'];
+    transcript: ThreadTranscript | null;
+}) =>
+    useMemo(
+        () =>
+            transcript
+                ? buildTranscriptSearchResults(transcript.events, query, assistantModel, filters, (text) =>
+                      applyPathTransforms(text, settings, projectPath),
+                  )
+                : [],
+        [assistantModel, filters, projectPath, query, settings, transcript],
+    );
+
+function ThreadTranscriptTab({
+    activeEventJumpSignal,
+    activeSearchResultIndex,
+    activeTranscriptEventKey,
+    fullTranscriptLoaded,
+    loadError,
+    loadingFullTranscript,
+    searchInput,
+    searchResults,
+    showRawJson,
+    sortOrder,
+    snapshot,
+    transcript,
+    transcriptFilters,
+    onJumpToSearchResult,
+    onLoadFullThread,
+    onSearchInputChange,
+    onSortOrderChange,
+    onTranscriptFilterChange,
+}: {
+    activeEventJumpSignal: number;
+    activeSearchResultIndex: number;
+    activeTranscriptEventKey: string | null;
+    fullTranscriptLoaded: boolean;
+    loadError: unknown;
+    loadingFullTranscript: boolean;
+    searchInput: string;
+    searchResults: TranscriptSearchResult[];
+    showRawJson: boolean;
+    sortOrder: TranscriptSortOrder;
+    snapshot: ThreadSnapshot;
+    transcript: ThreadTranscript | null;
+    transcriptFilters: ThreadTranscriptFilters;
+    onJumpToSearchResult: (index: number) => void;
+    onLoadFullThread: () => void;
+    onSearchInputChange: (value: string) => void;
+    onSortOrderChange: (value: TranscriptSortOrder) => void;
+    onTranscriptFilterChange: (patch: Partial<ThreadTranscriptSearch>) => void;
+}) {
+    return (
+        <TabsContent className="space-y-3" value="transcript">
+            <TranscriptControls
+                rawJsonDisabled={!transcript?.rawIncluded}
+                showCommentary={transcriptFilters.showCommentary}
+                showExtraEvents={transcriptFilters.showExtraEvents}
+                showRawJson={showRawJson}
+                showToolCalls={transcriptFilters.showToolCalls}
+                showUserMessages={transcriptFilters.showUserMessages}
+                onShowCommentaryChange={(commentary) => onTranscriptFilterChange({ commentary })}
+                onShowExtraEventsChange={(extra) => onTranscriptFilterChange({ extra })}
+                onShowRawJsonChange={(raw) => onTranscriptFilterChange({ raw })}
+                onShowToolCallsChange={(tools) => onTranscriptFilterChange({ tools })}
+                onShowUserMessagesChange={(user) => onTranscriptFilterChange({ user })}
+            />
+            {transcript?.isPartial && snapshot.rollout.shouldDeferTranscriptLoad ? (
+                <LargeThreadPreviewNotice
+                    fileSizeBytes={snapshot.rollout.fileSizeBytes}
+                    fullTranscriptLoaded={fullTranscriptLoaded}
+                    pending={loadingFullTranscript}
+                    onLoad={onLoadFullThread}
+                />
+            ) : null}
+            {transcript ? (
+                <TranscriptSearchPanel
+                    activeResultIndex={activeSearchResultIndex}
+                    query={searchInput}
+                    results={searchResults}
+                    onJumpToResult={onJumpToSearchResult}
+                    onQueryChange={onSearchInputChange}
+                />
+            ) : null}
+            {transcript ? (
+                <TranscriptView
+                    activeEventJumpSignal={activeEventJumpSignal}
+                    activeEventKey={activeTranscriptEventKey}
+                    assistantModel={snapshot.thread.model}
+                    events={transcript.events}
+                    projectPath={snapshot.thread.cwd}
+                    showCommentary={transcriptFilters.showCommentary}
+                    showExtraEvents={transcriptFilters.showExtraEvents}
+                    showRawJson={showRawJson && transcript.rawIncluded}
+                    showToolCalls={transcriptFilters.showToolCalls}
+                    showUserMessages={transcriptFilters.showUserMessages}
+                    sortOrder={sortOrder}
+                    onSortOrderChange={onSortOrderChange}
+                />
+            ) : (
+                <DeferredTranscriptNotice
+                    fileSizeBytes={snapshot.rollout.fileSizeBytes}
+                    missing={snapshot.transcriptState === 'missing'}
+                    pending={loadingFullTranscript}
+                    onLoad={onLoadFullThread}
+                />
+            )}
+            {loadError ? (
+                <p className="text-[var(--destructive)] text-sm">
+                    Failed to load transcript preview:{' '}
+                    {loadError instanceof Error ? loadError.message : 'Unknown error'}
+                </p>
+            ) : null}
+        </TabsContent>
+    );
+}
+
+function ThreadToolsTab({
+    loadingTranscript,
+    showRawJson,
+    snapshot,
+    sortOrder,
+    transcript,
+    onLoadTranscript,
+    onSortOrderChange,
+}: {
+    loadingTranscript: boolean;
+    showRawJson: boolean;
+    snapshot: ThreadSnapshot;
+    sortOrder: TranscriptSortOrder;
+    transcript: ThreadTranscript | null;
+    onLoadTranscript: () => void;
+    onSortOrderChange: (value: TranscriptSortOrder) => void;
+}) {
+    return (
+        <TabsContent value="tools">
+            <ThreadToolsPanel
+                assistantModel={snapshot.thread.model}
+                availableTools={snapshot.availableTools}
+                events={transcript?.events ?? null}
+                loadingTranscript={loadingTranscript}
+                projectPath={snapshot.thread.cwd}
+                showRawJson={showRawJson && Boolean(transcript?.rawIncluded)}
+                sortOrder={sortOrder}
+                transcriptIsPartial={transcript?.isPartial}
+                transcriptState={transcript ? 'available' : snapshot.transcriptState}
+                onLoadTranscript={onLoadTranscript}
+                onSortOrderChange={onSortOrderChange}
+            />
+        </TabsContent>
+    );
+}
+
+function ThreadDetailPageContent() {
+    const { navigate, search, transcriptFilters, updateTranscriptSearch } = useThreadTranscriptRouteSearch();
     const queryClient = useQueryClient();
     const params = Route.useParams();
     const snapshot = useSuspenseQuery(threadSnapshotQueryOptions(params.threadId)).data;
@@ -383,19 +816,82 @@ function ThreadDetailPage() {
     const [shouldLoadTranscript, setShouldLoadTranscript] = useState(
         !snapshot.rollout.shouldDeferTranscriptLoad && !transcriptMissing,
     );
-    const [showToolCalls, setShowToolCalls] = useState(false);
-    const [showCommentary, setShowCommentary] = useState(false);
-    const [showExtraEvents, setShowExtraEvents] = useState(false);
-    const [showRawJson, setShowRawJson] = useState(false);
-    const [showUserMessages, setShowUserMessages] = useState(true);
+    const showRawJson = search.raw === true;
+    const sortOrder: TranscriptSortOrder = search.sort ?? 'earliest';
+    const transcriptSearchInput = search.q ?? '';
+    const [activeSearchResultIndex, setActiveSearchResultIndex] = useState(0);
+    const [activeTranscriptEventKey, setActiveTranscriptEventKey] = useState<string | null>(null);
+    const [activeEventJumpSignal, setActiveEventJumpSignal] = useState(0);
     const [exportOpen, setExportOpen] = useState(false);
     const [deleteOpen, setDeleteOpen] = useState(false);
+    const transcriptPreviewQuery = useQuery({
+        ...threadTranscriptPreviewQueryOptions(params.threadId, transcriptFilters),
+        enabled: snapshot.rollout.shouldDeferTranscriptLoad && !shouldLoadTranscript && !transcriptMissing,
+    });
     const transcriptQuery = useQuery({
         ...threadTranscriptQueryOptions(params.threadId),
-        enabled: shouldLoadTranscript && snapshot.transcript === null && !transcriptMissing,
+        enabled: shouldLoadFullThreadTranscript({
+            shouldLoadTranscript,
+            snapshotTranscript: snapshot.transcript,
+            transcriptMissing,
+        }),
+    });
+    const transcript = transcriptQuery.data ?? transcriptPreviewQuery.data ?? snapshot.transcript ?? null;
+    const viewSnapshot = {
+        ...snapshot,
+        availableTools:
+            snapshot.availableTools.length > 0 ? snapshot.availableTools : (transcript?.sessionMeta.dynamicTools ?? []),
+        transcript,
+    };
+    const fullTranscriptLoaded = Boolean(transcriptQuery.data && !transcriptQuery.data.isPartial);
+    const transcriptSearchResults = useTranscriptSearchResults({
+        assistantModel: snapshot.thread.model,
+        filters: transcriptFilters,
+        projectPath: snapshot.thread.cwd,
+        query: transcriptSearchInput,
+        settings,
+        transcript,
     });
-    const transcript = snapshot.transcript ?? transcriptQuery.data ?? null;
-    const viewSnapshot = { ...snapshot, transcript };
+
+    useEffect(() => {
+        setActiveSearchResultIndex((current) =>
+            transcriptSearchResults.length === 0 ? 0 : Math.min(current, transcriptSearchResults.length - 1),
+        );
+        setActiveTranscriptEventKey((current) =>
+            current && transcriptSearchResults.some((result) => result.eventKey === current) ? current : null,
+        );
+    }, [transcriptSearchResults]);
+
+    const updateTranscriptSearchInput = (value: string) => {
+        setActiveSearchResultIndex(0);
+        setActiveTranscriptEventKey(null);
+        updateTranscriptSearch({ q: value });
+    };
+
+    const updateTranscriptFilter = (patch: Partial<ThreadTranscriptSearch>) => {
+        setActiveSearchResultIndex(0);
+        setActiveTranscriptEventKey(null);
+        updateTranscriptSearch(patch);
+    };
+
+    const updateSortOrder = (sort: TranscriptSortOrder) => {
+        updateTranscriptSearch({ sort });
+    };
+
+    const jumpToTranscriptSearchResult = (index: number) => {
+        if (transcriptSearchResults.length === 0) {
+            return;
+        }
+
+        const wrappedIndex =
+            ((index % transcriptSearchResults.length) + transcriptSearchResults.length) %
+            transcriptSearchResults.length;
+        const result = transcriptSearchResults[wrappedIndex]!;
+
+        setActiveSearchResultIndex(wrappedIndex);
+        setActiveTranscriptEventKey(result.eventKey);
+        setActiveEventJumpSignal((current) => current + 1);
+    };
 
     const exportThreadMutation = useMutation({
         mutationFn: async (options: {
@@ -458,6 +954,9 @@ function ThreadDetailPage() {
                 },
             }),
         onSuccess: async () => {
+            queryClient.removeQueries({ queryKey: ['thread', snapshot.thread.id] });
+            queryClient.removeQueries({ queryKey: ['thread-transcript-preview', snapshot.thread.id] });
+            queryClient.removeQueries({ queryKey: ['thread-transcript', snapshot.thread.id] });
             await Promise.all([
                 queryClient.invalidateQueries({ queryKey: ['analytics'] }),
                 queryClient.invalidateQueries({ queryKey: ['dashboard'] }),
@@ -502,13 +1001,10 @@ function ThreadDetailPage() {
                                 params: { project: snapshot.project },
                                 to: '/codex/$project',
                             },
-                            { label: snapshot.thread.title },
+                            { label: snapshot.thread.title, title: snapshot.thread.title, truncate: true },
                         ]}
                     />
                 }
-                eyebrow={snapshot.project}
-                subtitle={snapshot.thread.preview}
-                title={snapshot.thread.title}
             />
 
             <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
@@ -529,10 +1025,13 @@ function ThreadDetailPage() {
             </div>
 
             <Tabs className="space-y-4" defaultValue="transcript">
-                <TabsList className="grid w-fit min-w-[24rem] grid-cols-3 rounded-full border border-[var(--border)] bg-[var(--panel)] p-1">
+                <TabsList className="grid w-full grid-cols-4 rounded-full border border-[var(--border)] bg-[var(--panel)] p-1 sm:w-fit sm:min-w-[30rem]">
                     <TabsTrigger className="rounded-full px-5 text-sm" value="transcript">
                         Transcript
                     </TabsTrigger>
+                    <TabsTrigger className="rounded-full px-5 text-sm" value="tools">
+                        Tools
+                    </TabsTrigger>
                     <TabsTrigger className="rounded-full px-5 text-sm" value="metadata">
                         Metadata
                     </TabsTrigger>
@@ -541,46 +1040,42 @@ function ThreadDetailPage() {
                     </TabsTrigger>
                 </TabsList>
 
-                <TabsContent className="space-y-3" value="transcript">
-                    <TranscriptControls
-                        rawJsonDisabled={!transcript?.rawIncluded}
-                        showCommentary={showCommentary}
-                        showExtraEvents={showExtraEvents}
-                        showRawJson={showRawJson}
-                        showToolCalls={showToolCalls}
-                        showUserMessages={showUserMessages}
-                        onShowCommentaryChange={setShowCommentary}
-                        onShowExtraEventsChange={setShowExtraEvents}
-                        onShowRawJsonChange={setShowRawJson}
-                        onShowToolCallsChange={setShowToolCalls}
-                        onShowUserMessagesChange={setShowUserMessages}
-                    />
-                    {transcript ? (
-                        <TranscriptView
-                            assistantModel={snapshot.thread.model}
-                            events={transcript.events}
-                            projectPath={snapshot.thread.cwd}
-                            showCommentary={showCommentary}
-                            showExtraEvents={showExtraEvents}
-                            showRawJson={showRawJson && transcript.rawIncluded}
-                            showToolCalls={showToolCalls}
-                            showUserMessages={showUserMessages}
-                        />
-                    ) : (
-                        <DeferredTranscriptNotice
-                            fileSizeBytes={snapshot.rollout.fileSizeBytes}
-                            missing={snapshot.transcriptState === 'missing'}
-                            pending={transcriptQuery.isFetching}
-                            onLoad={() => setShouldLoadTranscript(true)}
-                        />
-                    )}
-                    {transcriptQuery.isError ? (
-                        <p className="text-[var(--destructive)] text-sm">
-                            Failed to load transcript preview:{' '}
-                            {transcriptQuery.error instanceof Error ? transcriptQuery.error.message : 'Unknown error'}
-                        </p>
-                    ) : null}
-                </TabsContent>
+                <ThreadTranscriptTab
+                    activeEventJumpSignal={activeEventJumpSignal}
+                    activeSearchResultIndex={activeSearchResultIndex}
+                    activeTranscriptEventKey={activeTranscriptEventKey}
+                    fullTranscriptLoaded={fullTranscriptLoaded}
+                    loadError={
+                        transcriptQuery.isError
+                            ? transcriptQuery.error
+                            : transcriptPreviewQuery.isError
+                              ? transcriptPreviewQuery.error
+                              : null
+                    }
+                    loadingFullTranscript={transcriptQuery.isFetching}
+                    searchInput={transcriptSearchInput}
+                    searchResults={transcriptSearchResults}
+                    showRawJson={showRawJson}
+                    sortOrder={sortOrder}
+                    snapshot={snapshot}
+                    transcript={transcript}
+                    transcriptFilters={transcriptFilters}
+                    onJumpToSearchResult={jumpToTranscriptSearchResult}
+                    onLoadFullThread={() => setShouldLoadTranscript(true)}
+                    onSearchInputChange={updateTranscriptSearchInput}
+                    onSortOrderChange={updateSortOrder}
+                    onTranscriptFilterChange={updateTranscriptFilter}
+                />
+
+                <ThreadToolsTab
+                    loadingTranscript={transcriptQuery.isFetching}
+                    showRawJson={showRawJson}
+                    snapshot={viewSnapshot}
+                    sortOrder={sortOrder}
+                    transcript={transcript}
+                    onLoadTranscript={() => setShouldLoadTranscript(true)}
+                    onSortOrderChange={updateSortOrder}
+                />
 
                 <TabsContent value="metadata">
                     <ThreadMetadataPanels snapshot={viewSnapshot} />
@@ -595,11 +1090,17 @@ function ThreadDetailPage() {
                 confirmLabel={deleteThreadMutation.isPending ? 'Deleting...' : 'Delete thread'}
                 defaultDeleteSessionFiles
                 description="Delete this thread from the Codex database. Enable Delete Session files if you also want to remove the rollout JSONL from disk."
+                errorMessage={getMutationErrorMessage(deleteThreadMutation.error, 'Thread delete failed')}
                 open={deleteOpen}
                 showDeleteSessionFilesOption
                 title="Delete this thread from Codex DB?"
                 onConfirm={({ deleteSessionFiles }) => deleteThreadMutation.mutate({ deleteSessionFiles })}
-                onOpenChange={setDeleteOpen}
+                onOpenChange={(open) => {
+                    setDeleteOpen(open);
+                    if (!open) {
+                        deleteThreadMutation.reset();
+                    }
+                }}
             />
 
             <ExportDialog
@@ -612,8 +1113,22 @@ function ThreadDetailPage() {
                         exportThreadMutation.mutate(options);
                     }
                 }}
-                onOpenChange={setExportOpen}
+                onOpenChange={(open) => {
+                    setExportOpen(open);
+                    if (!open) {
+                        exportThreadMutation.reset();
+                    }
+                }}
             />
         </div>
     );
 }
+
+function ThreadDetailPage() {
+    const { threadId } = Route.useParams();
+    return (
+        <RouteStateResetBoundary routeKey={threadId}>
+            <ThreadDetailPageContent />
+        </RouteStateResetBoundary>
+    );
+}