PaperClipAI/ui/src/pages/AgentDetail.tsx

import { TranscriptSequence } from "../lib/transcript-sequence";
import { readTranscriptRequest } from "../components/transcript/read-transcript-request";
import { useTranscriptLiveStream } from "../context/LiveUpdatesProvider";
import { liveRunEvent, mergeRunEvents } from "../lib/live-run-event";
import { useSelectedHeartbeatRun } from "../hooks/useSelectedHeartbeatRun";
import { grokBotApi } from "@/api/grokBot";
import { GrokBotWorkSummary } from "@/components/GrokBotWorkSummary";
import { PrimaryAgentIndicator, SetPrimaryAgentButton } from "@/components/primary-agent/PrimaryAgentPresentation";
import { AiConnectionPoolRunDetails } from "@/components/ai-connections/AiConnectionPoolRunDetails";
import { AgentConnectionInstructions } from "@/features/connections/ConnectionInstructions";
import type { AgentInstructionCandidate, AgentInstructionsBundle } from "@paperclipai/shared";
import { InstructionHistory } from "../components/InstructionHistory";
import { AgentCharacter } from "../components/AgentCharacter";
import { characterStateForAgent } from "@paperclipai/shared";
import { mergeRunLogChunks, readChunkSeq } from "../lib/run-log-chunks";
import { usePageVisibility } from "../lib/page-visibility";
import { lazy, Suspense, useCallback, useEffect, useMemo, useState, useRef } from "react";
import { useParams, useNavigate, useLocation, Link, Navigate, useBeforeUnload, type NavigateFunction } from "@/lib/router";
import { useQuery, useMutation, useQueryClient, type QueryClient } from "@tanstack/react-query";
import {
  agentsApi,
  type AgentKey,
  type ClaudeLoginResult,
  type AgentPermissionUpdate,
} from "../api/agents";
import { builtInAgentsApi, type BuiltInManagedResourceKind } from "../api/builtInAgents";
import { companySkillsApi } from "../api/companySkills";
import { heartbeatsApi } from "../api/heartbeats";
import { instanceSettingsApi } from "../api/instanceSettings";
import { ApiError } from "../api/client";
import { activityApi } from "../api/activity";
import { accessApi } from "../api/access";
import { issuesApi } from "../api/issues";
import { projectsApi } from "../api/projects";
import { usePanel } from "../context/PanelContext";
import { useSidebar } from "../context/SidebarContext";
import { useCompany } from "../context/CompanyContext";
import { useToastActions } from "../context/ToastContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { copyTextToClipboard } from "../lib/clipboard";
import { AgentSkillsTab } from "./agent-skills/AgentSkillsTab";
import { AgentConfigForm } from "../components/AgentConfigForm";
import { agentDisplayAdapterType, getAdapterDisplay } from "../adapters/adapter-display-registry";
import { adapterLabels, roleLabels, help } from "../components/agent-config-primitives";
import { ToggleSwitch } from "@/components/ui/toggle-switch";
import { useAdapterCapabilities } from "@/adapters/use-adapter-capabilities";
import { redactCommandText as redactCommandSecretText } from "@paperclipai/adapter-utils";
import { MarkdownEditor } from "../components/MarkdownEditor";
import { assetsApi } from "../api/assets";
import { toolsApi } from "../api/tools";
import { getUIAdapter, buildTranscript, onAdapterChange } from "../adapters";
import { StatusBadge } from "../components/StatusBadge";
import { AgentLifecycleStatus, useAgentLifecycleStatus } from "../components/AgentLifecycleStatus";
import { MarkdownBody } from "../components/MarkdownBody";
import { CopyText } from "../components/CopyText";
import { IssueRow } from "../components/IssueRow";
import { TaskSummaryList } from "../components/TaskSummaryList";
import { useDesignSandbox } from "../context/DesignSandboxContext";
import { StatusGlyph } from "../components/StatusGlyph";
import { MembershipAction } from "../components/MembershipAction";
import { StarToggle } from "../components/StarToggle";
import { Identity } from "../components/Identity";
import { PageSkeleton } from "../components/PageSkeleton";
import { QueryErrorState, queryViewKind, useQueryView } from "../components/QueryView";
import { AgentActionButtons } from "../components/AgentActionButtons";
import { InlineBanner } from "../components/InlineBanner";
import { BuiltInBundlePanel } from "../components/BuiltInBundlePanel";
import { ConfigureBuiltInAgentModal } from "../components/ConfigureBuiltInAgentModal";
import { TrustPresetSection } from "../components/TrustPresetSection";
import { AgentProjectAccessSettings } from "../components/AgentProjectAccessSettings";
import { FileTree, buildFileTree } from "../components/FileTree";
import { ScrollToBottom } from "../components/ScrollToBottom";
import { SourceResolvedFoldCallout } from "../components/SourceResolvedFoldCallout";
import { SourceResolvedFoldBadge } from "../components/SourceResolvedFoldBadge";
import { readSourceResolvedWatchdogFold } from "../lib/source-resolved-watchdog-fold";
import { formatDate, relativeTime, formatTokens, visibleRunCostUsd, visibleRunTokenTotal, hasUnavailableProviderAccounting, supportsRawProviderTrace } from "../lib/utils";
import { cn } from "../lib/utils";
import { RunRetryDetails } from "../components/RunRetryDetails";
import { Button } from "@/components/ui/button";
import { Tabs } from "@/components/ui/tabs";
import { PageTabBar } from "../components/PageTabBar";
import { AuditFeed } from "./audit/AuditFeed";
import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import {
  CheckCircle2,
  XCircle,
  Clock,
  Timer,
  Loader2,
  Slash,
  RotateCcw,
  Plus,
  Key,
  Eye,
  EyeOff,
  Copy,
  ChevronRight,
  ChevronDown,
  ArrowLeft,
  HelpCircle,
  FolderOpen,
  AlertTriangle,
} from "lucide-react";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Input } from "@/components/ui/input";
import { RunTranscriptView, type TranscriptMode } from "../components/transcript/RunTranscriptView";
import { AgentToolsTab } from "./AgentToolsTab";
import { AgentChannelsPanel } from "../components/chat/AgentChannelsPanel";
import {
  LIVE_TRANSCRIPT_RENDER_LIMIT,
  MAX_LIVE_EVENTS,
  MAX_LIVE_LOG_LINES,
} from "../lib/live-log-buffer";
import {
  isUuidLike,
  type Agent,
  type AgentDetail as AgentDetailRecord,
  type HeartbeatRun,
  type HeartbeatRunEvent,
  type AgentRuntimeState,
  type Issue,
  type LiveEvent,
  type WorkspaceOperation,
  isResponsibleUserDenialCode,
  responsibleUserLabel,
} from "@paperclipai/shared";
import { ResponsibleUserDenialNotice } from "../components/ResponsibleUserDenialNotice";
import { RunWorkspaceRecoverySurface } from "../components/RunWorkspaceRecoverySurface";
import { RunnerInspector } from "../components/RunnerInspector";
import { HoneycombRunLink } from "../components/HoneycombRunLink";
import {
  ProviderTraceStatusBadge,
  runRequestedProviderTrace,
} from "../components/ProviderTraceStatusBadge";
import { buildPermissionsForTrustPreset, getTrustPreset } from "../lib/trust-policy-ui";
import { redactHomePathUserSegments, redactHomePathUserSegmentsInValue } from "@paperclipai/adapter-utils";
import { agentRouteRef } from "../lib/utils";
import { humanAgentCreatorUserId, resolveAgentCreatorLabel } from "../lib/agent-creator";
import {
  isStarred,
  resourceMembershipState,
  useResourceMembershipMutation,
  useResourceMemberships,
} from "../hooks/useResourceMemberships";
import { Badge } from "@/components/ui/badge";
import {
  AGENT_DETAIL_NAVIGATION,
  agentDetailHref,
  agentLegacyAuditSection,
  agentScopedAuditHref,
  parseAgentDetailView,
  type AgentDetailView,
} from "./agent-detail-navigation";

const AgentAdvancedTab = lazy(() => import("./AgentAdvancedTab").then(module => ({ default: module.AgentAdvancedTab })));

const runStatusIcons: Record<string, { icon: typeof CheckCircle2; color: string }> = {
  succeeded: { icon: CheckCircle2, color: "text-green-600 dark:text-green-400" },
  failed: { icon: XCircle, color: "text-red-600 dark:text-red-400" },
  running: { icon: Loader2, color: "text-blue-600 dark:text-blue-400" }, // Gallery feedback r1: running = status blue, not cyan.
  queued: { icon: Clock, color: "text-yellow-600 dark:text-yellow-400" },
  scheduled_retry: { icon: Clock, color: "text-sky-600 dark:text-sky-400" },
  timed_out: { icon: Timer, color: "text-orange-600 dark:text-orange-400" },
  cancelled: { icon: Slash, color: "text-neutral-500 dark:text-neutral-400" },
};

const RUN_LOG_PAGE_BYTES = 256_000;

const REDACTED_ENV_VALUE = "***REDACTED***";
const SECRET_ENV_KEY_RE =
  /(api[-_]?key|access[-_]?token|auth(?:_?token)?|authorization|bearer|secret|passwd|password|credential|jwt|private[-_]?key|cookie|connectionstring)/i;
const COMMAND_ENV_KEY_RE = /(^command$|^cmd$|command[-_]?line|resolved[-_]?command|PAPERCLIP_RESOLVED_COMMAND)/i;
const JWT_VALUE_RE = /^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+(?:\.[A-Za-z0-9_-]+)?$/;

function formatOrgChainHealthPath(agent: AgentDetailRecord) {
  return agent.orgChainHealth?.fullChain
    .map((entry) => `${entry.name}${entry.status !== "active" && entry.status !== "idle" ? ` (${entry.status})` : ""}`)
    .join(" -> ") ?? agent.name;
}

function redactPathText(value: string, censorUsernameInLogs: boolean) {
  return redactHomePathUserSegments(value, { enabled: censorUsernameInLogs });
}

function redactPathValue<T>(value: T, censorUsernameInLogs: boolean): T {
  return redactHomePathUserSegmentsInValue(value, { enabled: censorUsernameInLogs });
}

function redactCommandText(value: string, censorUsernameInLogs: boolean): string {
  return redactPathText(redactCommandSecretText(value, REDACTED_ENV_VALUE), censorUsernameInLogs);
}

function shouldRedactSecretValue(key: string, value: unknown): boolean {
  if (SECRET_ENV_KEY_RE.test(key)) return true;
  if (typeof value !== "string") return false;
  return JWT_VALUE_RE.test(value);
}

function redactEnvValue(key: string, value: unknown, censorUsernameInLogs: boolean): string {
  if (
    typeof value === "object" &&
    value !== null &&
    !Array.isArray(value) &&
    (value as { type?: unknown }).type === "secret_ref"
  ) {
    return "***SECRET_REF***";
  }
  if (shouldRedactSecretValue(key, value)) return REDACTED_ENV_VALUE;
  if (value === null || value === undefined) return "";
  if (typeof value === "string" && COMMAND_ENV_KEY_RE.test(key)) return redactCommandText(value, censorUsernameInLogs);
  if (typeof value === "string") return redactPathText(value, censorUsernameInLogs);
  try {
    return JSON.stringify(redactPathValue(value, censorUsernameInLogs));
  } catch {
    return redactPathText(String(value), censorUsernameInLogs);
  }
}

function isMarkdown(pathValue: string) {
  return pathValue.toLowerCase().endsWith(".md");
}

function shouldUseMarkdownInstructionsEditor(input: {
  selectedFileExists: boolean;
  selectedPath: string;
  detail?: { markdown?: boolean } | null;
  summary?: { markdown?: boolean } | null;
}) {
  const metadataMarkdown = input.detail?.markdown ?? input.summary?.markdown;
  if (typeof metadataMarkdown === "boolean") return metadataMarkdown;
  return isMarkdown(input.selectedPath);
}

function formatEnvForDisplay(envValue: unknown, censorUsernameInLogs: boolean): string {
  const env = asRecord(envValue);
  if (!env) return "<unable-to-parse>";

  const keys = Object.keys(env);
  if (keys.length === 0) return "<empty>";

  return keys
    .sort()
    .map((key) => `${key}=${redactEnvValue(key, env[key], censorUsernameInLogs)}`)
    .join("\n");
}

const sourceLabels: Record<string, string> = {
  timer: "Timer",
  assignment: "Assignment",
  on_demand: "On-demand",
  automation: "Automation",
};

const LIVE_SCROLL_BOTTOM_TOLERANCE_PX = 32;
type ScrollContainer = Window | HTMLElement;

function isWindowContainer(container: ScrollContainer): container is Window {
  return container === window;
}

function isElementScrollContainer(element: HTMLElement): boolean {
  const overflowY = window.getComputedStyle(element).overflowY;
  return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
}

function findScrollContainer(anchor: HTMLElement | null): ScrollContainer {
  let parent = anchor?.parentElement ?? null;
  while (parent) {
    if (isElementScrollContainer(parent)) return parent;
    parent = parent.parentElement;
  }
  return window;
}

function readScrollMetrics(container: ScrollContainer): { scrollHeight: number; distanceFromBottom: number } {
  if (isWindowContainer(container)) {
    const pageHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight,
    );
    const viewportBottom = window.scrollY + window.innerHeight;
    return {
      scrollHeight: pageHeight,
      distanceFromBottom: Math.max(0, pageHeight - viewportBottom),
    };
  }

  const viewportBottom = container.scrollTop + container.clientHeight;
  return {
    scrollHeight: container.scrollHeight,
    distanceFromBottom: Math.max(0, container.scrollHeight - viewportBottom),
  };
}

function scrollToContainerBottom(container: ScrollContainer, behavior: ScrollBehavior = "auto") {
  if (isWindowContainer(container)) {
    const pageHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight,
    );
    window.scrollTo({ top: pageHeight, behavior });
    return;
  }

  container.scrollTo({ top: container.scrollHeight, behavior });
}

/** @deprecated Use AGENT_DETAIL_NAVIGATION for contextual navigation. */
export const AGENT_DETAIL_TABS = AGENT_DETAIL_NAVIGATION.flatMap((section) => section.items);

const LEGACY_AGENT_DETAIL_TABS = [
  { value: "dashboard", label: "Dashboard" },
  { value: "instructions", label: "Instructions" },
  { value: "skills", label: "Skills" },
  { value: "configuration", label: "Configuration" },
  { value: "secrets", label: "Secrets" },
  { value: "tools", label: "Tools" },
  { value: "runs", label: "Runs" },
  { value: "audit", label: "Audit" },
  { value: "budget", label: "Budget" },
] as const;

export const DISCARD_AGENT_CONFIG_CHANGES_MESSAGE = "Discard unsaved agent configuration changes?";

export function confirmAgentConfigNavigation(
  dirty: boolean,
  confirm: (message: string) => boolean = (message) =>
    typeof window === "undefined" || window.confirm(message),
): boolean {
  return !dirty || confirm(DISCARD_AGENT_CONFIG_CHANGES_MESSAGE);
}

export function agentConfigHistoryRestoreDelta(currentIndex: unknown, nextIndex: unknown): number | null {
  if (typeof currentIndex !== "number" || typeof nextIndex !== "number") return null;
  const delta = currentIndex - nextIndex;
  return delta === 0 ? null : delta;
}

export function restoreAgentConfigHistoryEntry(
  history: Pick<History, "go" | "pushState">,
  currentEntry: { index: unknown; state: unknown; url: string },
  nextIndex: unknown,
): boolean {
  const restoreDelta = agentConfigHistoryRestoreDelta(currentEntry.index, nextIndex);
  if (restoreDelta === null) {
    // Some legacy URL-cleanup paths erased React Router's history index. A
    // fresh copy of the guarded entry is the only safe way to return without
    // letting Router consume the unindexed destination and discard the form.
    history.pushState(currentEntry.state, "", currentEntry.url);
    return false;
  }

  history.go(restoreDelta);
  return true;
}

export { agentDetailHref, agentScopedAuditHref, parseAgentDetailView };

function usageNumber(usage: Record<string, unknown> | null, ...keys: string[]) {
  if (!usage) return 0;
  for (const key of keys) {
    const value = usage[key];
    if (typeof value === "number" && Number.isFinite(value)) return value;
  }
  return 0;
}

function setsEqual<T>(left: Set<T>, right: Set<T>) {
  if (left.size !== right.size) return false;
  for (const value of left) {
    if (!right.has(value)) return false;
  }
  return true;
}

function runMetrics(run: HeartbeatRun) {
  const usage = (run.usageJson ?? null) as Record<string, unknown> | null;
  const result = (run.resultJson ?? null) as Record<string, unknown> | null;
  const usageUnavailable = hasUnavailableProviderAccounting(result);
  const input = usageNumber(usage, "inputTokens", "input_tokens");
  const output = usageNumber(usage, "outputTokens", "output_tokens");
  const cached = usageNumber(
    usage,
    "cachedInputTokens",
    "cached_input_tokens",
    "cache_read_input_tokens",
  );
  const cost =
    visibleRunCostUsd(usage, result);
  const provider = asNonEmptyString(usage?.provider) ?? null;
  const model = asNonEmptyString(usage?.model) ?? null;
  return {
    usageUnavailable,
    input: usageUnavailable ? null : input,
    output: usageUnavailable ? null : output,
    cached: usageUnavailable ? null : cached,
    cost: usageUnavailable ? null : cost,
    totalTokens: usageUnavailable ? null : visibleRunTokenTotal(usage),
    provider,
    model,
  };
}

export type RunLogChunk = {
  seq?: number;
  ts: string;
  stream: "stdout" | "stderr" | "system";
  chunk: string;
};

function asRecord(value: unknown): Record<string, unknown> | null {
  if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
  return value as Record<string, unknown>;
}

function asNonEmptyString(value: unknown): string | null {
  if (typeof value !== "string") return null;
  const trimmed = value.trim();
  return trimmed.length > 0 ? trimmed : null;
}

export function buildHeartbeatProgressLogLine(
  payload: Record<string, unknown>,
  fallbackTimestamp: string,
): RunLogChunk | null {
  const message = asNonEmptyString(payload.message);
  if (!message) return null;
  const phase = asNonEmptyString(payload.phase);
  const ts = asNonEmptyString(payload.updatedAt) ?? fallbackTimestamp;
  const chunk = phase ? `[${phase}] ${message}` : message;
  return { ts, stream: "system", chunk };
}

export function heartbeatProgressLogLineKey(line: RunLogChunk): string {
  return `${line.ts}\u0000${line.stream}\u0000${line.chunk}`;
}

export function shouldPollRunShellLog(status: HeartbeatRun["status"]): boolean {
  return status === "running";
}

export function runDetailRefetchIntervalMs(status: HeartbeatRun["status"]): 5000 | 15000 | false {
  if (status === "queued") return 5000;
  if (status === "running") return 15000;
  return false;
}

export function RunInvocationCard({
  payload,
  censorUsernameInLogs,
}: {
  payload: Record<string, unknown>;
  censorUsernameInLogs: boolean;
}) {
  const rawCommandLine = [
    typeof payload.command === "string" ? payload.command : null,
    ...(Array.isArray(payload.commandArgs)
      ? payload.commandArgs.filter((value): value is string => typeof value === "string")
      : []),
  ]
    .filter((value): value is string => Boolean(value))
    .join(" ");
  const commandLine = rawCommandLine ? redactCommandText(rawCommandLine, censorUsernameInLogs) : "";

  const hasAdvancedDetails =
    commandLine.length > 0
    || (Array.isArray(payload.commandNotes) && payload.commandNotes.length > 0)
    || payload.prompt !== undefined
    || payload.context !== undefined
    || payload.env !== undefined;

  return (
    <div className="rounded-lg border border-border bg-background/60 p-3 space-y-2">
      <div className="text-xs font-medium text-muted-foreground">Invocation</div>
      {typeof payload.adapterType === "string" && (
        <div className="text-xs"><span className="text-muted-foreground">Adapter: </span>{payload.adapterType}</div>
      )}
      {typeof payload.cwd === "string" && (
        <div className="text-xs break-all"><span className="text-muted-foreground">Working dir: </span><span className="font-mono">{payload.cwd}</span></div>
      )}
      {hasAdvancedDetails && (
        <Collapsible>
          <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors group">
            <ChevronRight className="h-3 w-3 transition-transform group-data-[state=open]:rotate-90" />
            Details
          </CollapsibleTrigger>
          <CollapsibleContent className="pt-2 space-y-2">
            {commandLine && (
              <div className="text-xs break-all">
                <span className="text-muted-foreground">Command: </span>
                <span className="font-mono">{commandLine}</span>
              </div>
            )}
            {Array.isArray(payload.commandNotes) && payload.commandNotes.length > 0 && (
              <div>
                <div className="text-xs text-muted-foreground mb-1">Command notes</div>
                <ul className="list-disc pl-5 space-y-1">
                  {payload.commandNotes
                    .filter((value): value is string => typeof value === "string" && value.trim().length > 0)
                    .map((note, idx) => (
                      <li key={`${idx}-${note}`} className="text-xs break-all font-mono">
                        {note}
                      </li>
                    ))}
                </ul>
              </div>
            )}
            {payload.prompt !== undefined && (
              <div>
                <div className="text-xs text-muted-foreground mb-1">Prompt</div>
                <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap">
                  {typeof payload.prompt === "string"
                    ? redactPathText(payload.prompt, censorUsernameInLogs)
                    : JSON.stringify(redactPathValue(payload.prompt, censorUsernameInLogs), null, 2)}
                </pre>
              </div>
            )}
            {payload.context !== undefined && (
              <div>
                <div className="text-xs text-muted-foreground mb-1">Context</div>
                <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap">
                  {JSON.stringify(redactPathValue(payload.context, censorUsernameInLogs), null, 2)}
                </pre>
              </div>
            )}
            {payload.env !== undefined && (
              <div>
                <div className="text-xs text-muted-foreground mb-1">Environment</div>
                <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap font-mono">
                  {formatEnvForDisplay(payload.env, censorUsernameInLogs)}
                </pre>
              </div>
            )}
          </CollapsibleContent>
        </Collapsible>
      )}
    </div>
  );
}

function parseStoredLogContent(content: string): RunLogChunk[] {
  const parsed: RunLogChunk[] = [];
  for (const line of content.split("\n")) {
    const trimmed = line.trim();
    if (!trimmed) continue;
    try {
      const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown };
      const stream =
        raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
      const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
      const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
      if (!chunk) continue;
      parsed.push({ ts, stream, chunk });
    } catch {
      // Ignore malformed log lines.
    }
  }
  return parsed;
}

function workspaceOperationPhaseLabel(phase: WorkspaceOperation["phase"]) {
  switch (phase) {
    case "worktree_prepare":
      return "Worktree setup";
    case "workspace_config_freshness":
      return "Config freshness";
    case "workspace_provision":
      return "Provision";
    case "workspace_teardown":
      return "Teardown";
    case "worktree_cleanup":
      return "Worktree cleanup";
    default:
      return phase;
  }
}

function workspaceOperationStatusTone(status: WorkspaceOperation["status"]) {
  switch (status) {
    case "succeeded":
      return "border-green-500/20 bg-green-500/10 text-green-700 dark:text-green-300";
    case "failed":
      return "border-red-500/20 bg-red-500/10 text-red-700 dark:text-red-300";
    case "running":
      return "border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-300";
    case "skipped":
      return "border-yellow-500/20 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300";
    default:
      return "border-border bg-muted/40 text-muted-foreground";
  }
}

function WorkspaceOperationStatusBadge({ status }: { status: WorkspaceOperation["status"] }) {
  return (
    <Badge variant="outline"
      className={cn(
        "text-(length:--text-micro) capitalize",
        workspaceOperationStatusTone(status),
      )}
    >
      {status.replace("_", " ")}
    </Badge>
  );
}

function WorkspaceOperationLogViewer({
  operation,
  censorUsernameInLogs,
}: {
  operation: WorkspaceOperation;
  censorUsernameInLogs: boolean;
}) {
  const [open, setOpen] = useState(false);
  const { data: logData, isLoading, error } = useQuery({
    queryKey: ["workspace-operation-log", operation.id],
    queryFn: () => heartbeatsApi.workspaceOperationLog(operation.id),
    enabled: open && Boolean(operation.logRef),
    refetchInterval: open && operation.status === "running" ? 2000 : false,
  });

  const chunks = useMemo(
    () => (logData?.content ? parseStoredLogContent(logData.content) : []),
    [logData?.content],
  );

  return (
    <div className="space-y-2">
      <button
        type="button"
        className="text-(length:--text-micro) text-muted-foreground underline underline-offset-2 hover:text-foreground"
        onClick={() => setOpen((value) => !value)}
      >
        {open ? "Hide full log" : "Show full log"}
      </button>
      {open && (
        <div className="rounded-md border border-border bg-background/70 p-2">
          {isLoading && <div className="text-xs text-muted-foreground">Loading log...</div>}
          {error && (
            <div className="text-xs text-destructive">
              {error instanceof Error ? error.message : "Failed to load workspace operation log"}
            </div>
          )}
          {!isLoading && !error && chunks.length === 0 && (
            <div className="text-xs text-muted-foreground">No persisted log lines.</div>
          )}
          {chunks.length > 0 && (
            <div className="max-h-64 overflow-y-auto rounded bg-neutral-100 p-2 font-mono text-xs dark:bg-neutral-950">
              {chunks.map((chunk, index) => (
                <div key={`${chunk.ts}-${index}`} className="flex gap-2">
                  <span className="shrink-0 text-neutral-500">
                    {new Date(chunk.ts).toLocaleTimeString("en-US", { hour12: false })}
                  </span>
                  <span
                    className={cn(
                      "shrink-0 w-14",
                      chunk.stream === "stderr"
                        ? "text-red-600 dark:text-red-300"
                        : chunk.stream === "system"
                          ? "text-blue-600 dark:text-blue-300"
                          : "text-muted-foreground",
                    )}
                  >
                    [{chunk.stream}]
                  </span>
                  <span className="whitespace-pre-wrap break-all">{redactPathText(chunk.chunk, censorUsernameInLogs)}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function WorkspaceOperationsSection({
  operations,
  censorUsernameInLogs,
}: {
  operations: WorkspaceOperation[];
  censorUsernameInLogs: boolean;
}) {
  if (operations.length === 0) return null;

  return (
    <div className="rounded-lg border border-border bg-background/60 p-3 space-y-3">
      <div className="text-xs font-medium text-muted-foreground">
        Workspace ({operations.length})
      </div>
      <div className="space-y-3">
        {operations.map((operation) => {
          const metadata = asRecord(operation.metadata);
          return (
            <div key={operation.id} className="rounded-md border border-border/70 bg-background/70 p-3 space-y-2">
              <div className="flex flex-wrap items-center gap-2">
                <div className="text-sm font-medium">{workspaceOperationPhaseLabel(operation.phase)}</div>
                <WorkspaceOperationStatusBadge status={operation.status} />
                <div className="text-(length:--text-micro) text-muted-foreground">
                  {relativeTime(operation.startedAt)}
                  {operation.finishedAt && ` to ${relativeTime(operation.finishedAt)}`}
                </div>
              </div>
              {operation.command && (
                <div className="text-xs break-all">
                  <span className="text-muted-foreground">Command: </span>
                  <span className="font-mono">{operation.command}</span>
                </div>
              )}
              {operation.cwd && (
                <div className="text-xs break-all">
                  <span className="text-muted-foreground">Working dir: </span>
                  <span className="font-mono">{operation.cwd}</span>
                </div>
              )}
              {(asNonEmptyString(metadata?.branchName)
                || asNonEmptyString(metadata?.baseRef)
                || asNonEmptyString(metadata?.worktreePath)
                || asNonEmptyString(metadata?.repoRoot)
                || asNonEmptyString(metadata?.cleanupAction)) && (
                <div className="grid gap-1 text-xs sm:grid-cols-2">
                  {asNonEmptyString(metadata?.branchName) && (
                    <div><span className="text-muted-foreground">Branch: </span><span className="font-mono">{metadata?.branchName as string}</span></div>
                  )}
                  {asNonEmptyString(metadata?.baseRef) && (
                    <div><span className="text-muted-foreground">Base ref: </span><span className="font-mono">{metadata?.baseRef as string}</span></div>
                  )}
                  {asNonEmptyString(metadata?.worktreePath) && (
                    <div className="break-all"><span className="text-muted-foreground">Worktree: </span><span className="font-mono">{metadata?.worktreePath as string}</span></div>
                  )}
                  {asNonEmptyString(metadata?.repoRoot) && (
                    <div className="break-all"><span className="text-muted-foreground">Repo root: </span><span className="font-mono">{metadata?.repoRoot as string}</span></div>
                  )}
                  {asNonEmptyString(metadata?.cleanupAction) && (
                    <div><span className="text-muted-foreground">Cleanup: </span><span className="font-mono">{metadata?.cleanupAction as string}</span></div>
                  )}
                </div>
              )}
              {typeof metadata?.created === "boolean" && (
                <div className="text-xs text-muted-foreground">
                  {metadata.created ? "Created by this run" : "Reused existing workspace"}
                </div>
              )}
              {operation.stderrExcerpt && operation.stderrExcerpt.trim() && (
                <div>
                  <div className="mb-1 text-xs text-red-700 dark:text-red-300">stderr excerpt</div>
                  <pre className="rounded-md bg-red-50 p-2 text-xs whitespace-pre-wrap break-all text-red-800 dark:bg-neutral-950 dark:text-red-100">
                    {redactPathText(operation.stderrExcerpt, censorUsernameInLogs)}
                  </pre>
                </div>
              )}
              {operation.stdoutExcerpt && operation.stdoutExcerpt.trim() && (
                <div>
                  <div className="mb-1 text-xs text-muted-foreground">stdout excerpt</div>
                  <pre className="rounded-md bg-neutral-100 p-2 text-xs whitespace-pre-wrap break-all dark:bg-neutral-950">
                    {redactPathText(operation.stdoutExcerpt, censorUsernameInLogs)}
                  </pre>
                </div>
              )}
              {operation.logRef && (
                <WorkspaceOperationLogViewer
                  operation={operation}
                  censorUsernameInLogs={censorUsernameInLogs}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export function AgentDetail() {
  const { companyPrefix, agentId, tab: urlTab, runId: urlRunId } = useParams<{
    companyPrefix?: string;
    agentId: string;
    tab?: string;
    runId?: string;
  }>();
  const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
  const { closePanel } = usePanel();
  const { setBreadcrumbs } = useBreadcrumbs();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const location = useLocation();
  const [actionError, setActionError] = useState<string | null>(null);
  const [dismissedLeftAgentIds, setDismissedLeftAgentIds] = useState<Set<string>>(() => new Set());
  const activeView: AgentDetailView = urlRunId ? "run-detail"
    : parseAgentDetailView(urlTab ?? null);
  const legacyAuditSection = !urlRunId ? agentLegacyAuditSection(urlTab ?? null) : null;
  const legacyView = urlRunId
    ? "runs"
    : legacyAuditSection === "runs"
      ? "runs"
      : legacyAuditSection === "activity"
        ? "audit"
        : legacyAuditSection === "costs" || legacyAuditSection === "budgets"
          ? "budget"
          : activeView === "overview"
            ? "dashboard"
            : activeView === "runtime"
              ? "configuration"
              : activeView;
  const needsOverviewData = activeView === "overview";
  const needsRunData = activeView === "run-detail";
  const shouldLoadHeartbeats = needsOverviewData || needsRunData;
  const [configDirty, setConfigDirty] = useState(false);
  const [configSaving, setConfigSaving] = useState(false);
  const saveConfigActionRef = useRef<(() => void) | null>(null);
  const cancelConfigActionRef = useRef<(() => void) | null>(null);
  const { isMobile } = useSidebar();
  const routeAgentRef = agentId ?? "";
  const routeCompanyId = useMemo(() => {
    if (!companyPrefix) return null;
    const requestedPrefix = companyPrefix.toUpperCase();
    return companies.find((company) => company.issuePrefix.toUpperCase() === requestedPrefix)?.id ?? null;
  }, [companies, companyPrefix]);
  const lookupCompanyId = routeCompanyId ?? selectedCompanyId ?? undefined;
  const canFetchAgent = routeAgentRef.length > 0 && (isUuidLike(routeAgentRef) || Boolean(lookupCompanyId));
  const setSaveConfigAction = useCallback((fn: (() => void) | null) => { saveConfigActionRef.current = fn; }, []);
  const setCancelConfigAction = useCallback((fn: (() => void) | null) => { cancelConfigActionRef.current = fn; }, []);
  const prepareAgentNavigation = useCallback(() => {
    if (activeView === "advanced" && configSaving) return false;
    return confirmAgentConfigNavigation(configDirty);
  }, [activeView, configDirty, configSaving]);
  const agentQuery = useQuery<AgentDetailRecord>({
    queryKey: [...queryKeys.agents.detail(routeAgentRef), lookupCompanyId ?? null],
    queryFn: () => agentsApi.get(routeAgentRef, lookupCompanyId),
    enabled: canFetchAgent,
  });
  const { data: agent, isLoading, error } = agentQuery;
  const agentView = useQueryView(agentQuery);
  const lifecycle = useAgentLifecycleStatus(agent);
  const resolvedCompanyId = agent?.companyId ?? selectedCompanyId;
  const canonicalAgentRef = agent ? agentRouteRef(agent) : routeAgentRef;
  const handleLegacyTabChange = useCallback((next: string) => {
    if (!prepareAgentNavigation()) return;
    navigate(`/agents/${canonicalAgentRef || routeAgentRef}/${next}`);
  }, [canonicalAgentRef, navigate, prepareAgentNavigation, routeAgentRef]);
  const agentLookupRef = agent?.id ?? routeAgentRef;
  const resolvedAgentId = agent?.id ?? null;
  const { data: boardAccess } = useQuery({
    queryKey: queryKeys.access.currentBoardAccess,
    queryFn: () => accessApi.getCurrentBoardAccess(),
  });
  const canUseProviderTrace =
    boardAccess?.source === "local_implicit" ||
    boardAccess?.isInstanceAdmin === true;
  const membershipsQuery = useResourceMemberships(resolvedCompanyId);
  const membershipMutation = useResourceMembershipMutation(resolvedCompanyId);
  const agentMembershipState = resolvedAgentId
    ? resourceMembershipState(membershipsQuery.data, "agent", resolvedAgentId)
    : "joined";

  const { data: experimentalSettings } = useQuery({
    queryKey: queryKeys.instance.experimentalSettings,
    queryFn: () => instanceSettingsApi.getExperimental(),
    enabled: !!resolvedCompanyId,
  });
  const builtInAgentsEnabled = experimentalSettings?.enableBuiltInAgents === true;
  const { data: builtInStates } = useQuery({
    queryKey: queryKeys.builtInAgents.list(resolvedCompanyId!),
    queryFn: () => builtInAgentsApi.list(resolvedCompanyId!),
    enabled: !!resolvedCompanyId && builtInAgentsEnabled,
  });
  const builtInState = builtInAgentsEnabled
    ? builtInStates?.find((entry) => entry.agentId === resolvedAgentId) ?? null
    : null;
  const builtInFeatureLabel = builtInState
    ? builtInState.definition.featureKeys
        .map((key) => key.charAt(0).toUpperCase() + key.slice(1))
        .join(", ")
    : "";
  const invalidateBuiltIn = useCallback(() => {
    queryClient.invalidateQueries({ queryKey: queryKeys.builtInAgents.list(resolvedCompanyId!) });
    if (resolvedAgentId) {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(resolvedAgentId) });
    }
    queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(routeAgentRef) });
  }, [queryClient, resolvedCompanyId, resolvedAgentId, routeAgentRef]);

  const resetBuiltIn = useMutation({
    mutationFn: () => builtInAgentsApi.reset(resolvedCompanyId!, builtInState!.definition.key),
    onSuccess: invalidateBuiltIn,
  });

  const [showBuiltInConfigure, setShowBuiltInConfigure] = useState(false);
  const resetBuiltInResource = useMutation({
    mutationFn: (kind: BuiltInManagedResourceKind) =>
      builtInAgentsApi.reset(resolvedCompanyId!, builtInState!.definition.key, [kind]),
    onSuccess: invalidateBuiltIn,
    onError: (error) => {
      setActionError(error instanceof Error ? error.message : "Failed to update bundle resource");
    },
  });
  const runBuiltInRoutine = useMutation({
    mutationFn: (routineKey: string) =>
      builtInAgentsApi.runRoutine(resolvedCompanyId!, builtInState!.definition.key, routineKey),
    onSuccess: invalidateBuiltIn,
    onError: (error) => {
      setActionError(error instanceof Error ? error.message : "Failed to run built-in routine");
    },
  });
  const enableBuiltInSchedule = useMutation({
    mutationFn: (routineKey: string) =>
      builtInAgentsApi.enableRoutineSchedule(resolvedCompanyId!, builtInState!.definition.key, routineKey),
    onSuccess: invalidateBuiltIn,
    onError: (error) => {
      setActionError(error instanceof Error ? error.message : "Failed to enable routine schedule");
    },
  });
  const disableBuiltInSchedule = useMutation({
    mutationFn: (routineKey: string) =>
      builtInAgentsApi.disableRoutineSchedule(resolvedCompanyId!, builtInState!.definition.key, routineKey),
    onSuccess: invalidateBuiltIn,
    onError: (error) => {
      setActionError(error instanceof Error ? error.message : "Failed to disable routine schedule");
    },
  });
  const builtInRoutineActionPending =
    runBuiltInRoutine.isPending
      ? "run"
      : enableBuiltInSchedule.isPending
        ? "enable"
        : disableBuiltInSchedule.isPending
          ? "disable"
          : null;

  const { data: runtimeState } = useQuery({
    queryKey: queryKeys.agents.runtimeState(resolvedAgentId ?? routeAgentRef),
    queryFn: () => agentsApi.runtimeState(resolvedAgentId!, resolvedCompanyId ?? undefined),
    enabled: Boolean(resolvedAgentId) && needsOverviewData,
  });

  const { data: heartbeats } = useQuery({
    queryKey: queryKeys.heartbeats(resolvedCompanyId!, agent?.id ?? undefined),
    queryFn: () => heartbeatsApi.list(resolvedCompanyId!, agent?.id ?? undefined),
    enabled: !!resolvedCompanyId && !!agent?.id && shouldLoadHeartbeats,
  });

  const { data: allIssues } = useQuery({
    queryKey: [...queryKeys.issues.list(resolvedCompanyId!), "participant-agent", resolvedAgentId ?? "__none__"],
    queryFn: () => issuesApi.list(resolvedCompanyId!, { participantAgentId: resolvedAgentId! }),
    enabled: !!resolvedCompanyId && !!resolvedAgentId && needsOverviewData,
  });

  const { data: allAgents } = useQuery({
    queryKey: queryKeys.agents.list(resolvedCompanyId!),
    queryFn: () => agentsApi.list(resolvedCompanyId!),
    enabled: !!resolvedCompanyId && needsOverviewData,
  });

  const { data: skillSnapshot } = useQuery({
    queryKey: queryKeys.agents.skills(resolvedAgentId ?? "__none__"),
    queryFn: () => agentsApi.skills(resolvedAgentId!, resolvedCompanyId ?? undefined),
    enabled: Boolean(resolvedCompanyId && resolvedAgentId && needsOverviewData),
  });

  const { data: overviewCompanySkills } = useQuery({
    queryKey: queryKeys.companySkills.list(resolvedCompanyId ?? "__none__"),
    queryFn: () => companySkillsApi.list(resolvedCompanyId!),
    enabled: Boolean(resolvedCompanyId && needsOverviewData),
  });

  const assignedIssues = useMemo(
    () => [...(allIssues ?? [])].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()),
    [allIssues],
  );
  const reportsToAgent = (allAgents ?? []).find((a) => a.id === agent?.reportsTo);
  const directReports = (allAgents ?? []).filter((a) => a.reportsTo === agent?.id && a.status !== "terminated");
  const overviewSkillNames = useMemo(() => {
    const namesByKey = new Map((overviewCompanySkills ?? []).map((skill) => [skill.key, skill.name]));
    return (skillSnapshot?.desiredSkills ?? []).map((key) => namesByKey.get(key) ?? key);
  }, [overviewCompanySkills, skillSnapshot?.desiredSkills]);
  const mobileLiveRun = useMemo(
    () => (heartbeats ?? []).find((r) => r.status === "running" || r.status === "queued") ?? null,
    [heartbeats],
  );

  useEffect(() => {
    if (!agent) return;
    if (activeView === "advanced" && (configSaving || configDirty)) return;
    if (urlRunId) {
      if (routeAgentRef !== canonicalAgentRef) {
        navigate(`/agents/${canonicalAgentRef}/runs/${urlRunId}`, { replace: true });
      }
      return;
    }
    if (legacyAuditSection) return;
    const canonicalTab = activeView === "run-detail" ? "overview" : activeView;
    if (routeAgentRef !== canonicalAgentRef || urlTab !== canonicalTab) {
      navigate(`${agentDetailHref(canonicalAgentRef, canonicalTab)}${location.search}`, { replace: true });
      return;
    }
  }, [agent, routeAgentRef, canonicalAgentRef, urlRunId, urlTab, activeView, configSaving, configDirty, legacyAuditSection, navigate, location.search]);

  useEffect(() => {
    if (!agent?.companyId || agent.companyId === selectedCompanyId) return;
    setSelectedCompanyId(agent.companyId, { source: "route_sync" });
  }, [agent?.companyId, selectedCompanyId, setSelectedCompanyId]);

  // Invoke / pause / resume / terminate / duplicate / reset live in the shared
  // AgentActionButtons component. Approval and lifecycle retry stay in the detail header.
  const agentAction = useMutation({
    mutationFn: async (action: "approve" | "retryLifecycle") => {
      if (!agentLookupRef) return Promise.reject(new Error("No agent reference"));
      if (action === "approve") {
        return agentsApi.approve(agentLookupRef, resolvedCompanyId ?? undefined);
      }
      return agentsApi.retryLifecycle(agentLookupRef, resolvedCompanyId ?? undefined);
    },
    onSuccess: (_data, action) => {
      setActionError(null);
      if (action === "retryLifecycle") {
        queryClient.invalidateQueries({ queryKey: [...queryKeys.agents.detail(agentLookupRef), "lifecycle"] });
        return;
      }
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(routeAgentRef) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentLookupRef) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.runtimeState(agentLookupRef) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.taskSessions(agentLookupRef) });
      if (resolvedCompanyId) {
        queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(resolvedCompanyId) });
        if (agent?.id) {
          queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(resolvedCompanyId, agent.id) });
        }
      }
    },
    onError: (err) => {
      setActionError(err instanceof Error ? err.message : "Action failed");
    },
  });

  const updateIcon = useMutation({
    mutationFn: (icon: string) => agentsApi.update(agentLookupRef, { icon }, resolvedCompanyId ?? undefined),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(routeAgentRef) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentLookupRef) });
      if (resolvedCompanyId) {
        queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(resolvedCompanyId) });
      }
    },
  });

  const updatePermissions = useMutation({
    mutationFn: (permissions: AgentPermissionUpdate) =>
      agentsApi.updatePermissions(agentLookupRef, permissions, resolvedCompanyId ?? undefined),
    onSuccess: () => {
      setActionError(null);
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(routeAgentRef) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentLookupRef) });
      if (resolvedCompanyId) {
        queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(resolvedCompanyId) });
      }
    },
    onError: (err) => {
      setActionError(err instanceof Error ? err.message : "Failed to update permissions");
    },
  });

  useEffect(() => {
    const crumbs: { label: string; href?: string }[] = [
      { label: "Agents", href: "/agents" },
    ];
    const agentName = agent?.name ?? routeAgentRef ?? "Agent";
    if (activeView === "overview" && !urlRunId) {
      crumbs.push({ label: agentName });
    } else {
      crumbs.push({ label: agentName, href: agentDetailHref(canonicalAgentRef) });
      if (urlRunId) {
        crumbs.push({ label: "Runs", href: agent?.id ? agentScopedAuditHref(agent.id, "runs") : undefined });
        crumbs.push({ label: `Run ${urlRunId.slice(0, 8)}` });
      } else {
        const item = AGENT_DETAIL_NAVIGATION
          .flatMap((section) => section.items)
          .find((candidate) => candidate.value === activeView);
        crumbs.push({ label: item?.label ?? "Overview" });
      }
    }
    setBreadcrumbs(crumbs);
  }, [setBreadcrumbs, agent, routeAgentRef, canonicalAgentRef, activeView, urlRunId]);

  useEffect(() => {
    closePanel();
    return () => closePanel();
  }, [closePanel]);

  useEffect(() => {
    if (!resolvedAgentId || agentMembershipState !== "joined") return;
    setDismissedLeftAgentIds((current) => {
      if (!current.has(resolvedAgentId)) return current;
      const next = new Set(current);
      next.delete(resolvedAgentId);
      return next;
    });
  }, [resolvedAgentId, agentMembershipState]);

  useBeforeUnload(
    useCallback((event) => {
      if (!configDirty) return;
      event.preventDefault();
      event.returnValue = "";
    }, [configDirty]),
  );

  useEffect(() => {
    if (!configDirty) return;

    function handleDocumentClick(event: MouseEvent) {
      if (
        event.defaultPrevented ||
        event.button !== 0 ||
        event.altKey ||
        event.ctrlKey ||
        event.metaKey ||
        event.shiftKey
      ) {
        return;
      }
      const target = event.target;
      if (!(target instanceof Element)) return;
      const anchor = target.closest("a[href]");
      if (!(anchor instanceof HTMLAnchorElement)) return;
      if (anchor.target && anchor.target !== "_self") return;

      const nextUrl = new URL(anchor.href, window.location.href);
      const currentUrl = new URL(window.location.href);
      if (nextUrl.origin !== currentUrl.origin) return;
      if (
        nextUrl.pathname === currentUrl.pathname &&
        nextUrl.search === currentUrl.search &&
        nextUrl.hash === currentUrl.hash
      ) {
        return;
      }
      if (prepareAgentNavigation()) return;
      event.preventDefault();
      event.stopPropagation();
    }

    document.addEventListener("click", handleDocumentClick, true);
    return () => document.removeEventListener("click", handleDocumentClick, true);
  }, [configDirty, prepareAgentNavigation]);

  useEffect(() => {
    if (!configDirty) return;

    // BrowserRouter updates after popstate. Run first in the capture phase so a
    // rejected Back/Forward navigation can be restored before React Router
    // consumes it and unmounts the route-backed form.
    const currentEntry = {
      index: window.history.state?.idx,
      state: window.history.state,
      url: window.location.href,
    };
    let restoring = false;

    function handlePopState(event: PopStateEvent) {
      if (restoring) {
        restoring = false;
        return;
      }

      if (prepareAgentNavigation()) return;

      event.stopImmediatePropagation();
      restoring = restoreAgentConfigHistoryEntry(window.history, currentEntry, event.state?.idx);
    }

    window.addEventListener("popstate", handlePopState, true);
    return () => window.removeEventListener("popstate", handlePopState, true);
  }, [configDirty, prepareAgentNavigation]);

  if (isLoading || agentView.kind === "reconnecting") return <PageSkeleton variant="detail" />;
  if (agentView.kind === "error") {
    return <QueryErrorState size="page" error={error} action="load this agent" onRetry={agentView.retry} retrying={agentView.isFetching} />;
  }
  if (!agent) return null;
  if (!urlRunId && legacyAuditSection) {
    return <Navigate to={agentScopedAuditHref(agent.id, legacyAuditSection)} replace />;
  }
  if (!urlRunId && !urlTab) {
    return <Navigate to={agentDetailHref(canonicalAgentRef)} replace />;
  }
  const currentAgent = lifecycle.data && (lifecycle.data.lifecycleVersion ?? 0) >= (agent.lifecycleVersion ?? 0)
    ? { ...agent, ...lifecycle.data } : agent;
  const isPendingApproval = currentAgent.status === "pending_approval";
  const hasInvalidOrgChain = agent.orgChainHealth?.status === "invalid_org_chain";
  const pausedEscalationWarning = !hasInvalidOrgChain ? agent.orgChainHealth?.escalationWarning ?? null : null;
  const showConfigActionBar = (
    activeView === "runtime" || activeView === "instructions" || activeView === "secrets"
  );
  const showLeftAgentNotice = agentMembershipState === "left" && !dismissedLeftAgentIds.has(agent.id);
  const agentMembershipPending =
    membershipMutation.isPending &&
    membershipMutation.variables?.resourceType === "agent" &&
    membershipMutation.variables.resourceId === agent.id;
  const agentStarred = isStarred(membershipsQuery.data, "agent", agent.id);
  const agentStarPending = agentMembershipPending && membershipMutation.variables?.starred !== undefined;
  const agentJoinLeavePending = agentMembershipPending && membershipMutation.variables?.starred === undefined;

  return (
    <div className={cn("agent-settings-content mx-auto max-w-5xl space-y-8", `agent-settings-${activeView}`)}>
      {showLeftAgentNotice ? (
        <div className="flex items-center gap-3 border border-yellow-300/35 bg-yellow-300/10 px-3 py-2 text-sm text-yellow-900 dark:text-yellow-100">
          <p className="min-w-0 flex-1">
            You left this agent. It no longer appears in your sidebar.
          </p>
          <MembershipAction
            compact
            state="left"
            pending={agentJoinLeavePending}
            pendingState={agentJoinLeavePending ? membershipMutation.variables?.state : null}
            resourceName={agent.name}
            onJoin={() => membershipMutation.mutate({
              resourceType: "agent",
              resourceId: agent.id,
              resourceName: agent.name,
              state: "joined",
            })}
            onLeave={() => membershipMutation.mutate({
              resourceType: "agent",
              resourceId: agent.id,
              resourceName: agent.name,
              state: "left",
            })}
          />
          <button
            type="button"
            className="h-6 w-6 shrink-0 text-yellow-900/70 hover:text-yellow-900 dark:text-yellow-100/70 dark:hover:text-yellow-100"
            aria-label="Dismiss agent membership notice"
            onClick={() => setDismissedLeftAgentIds((current) => new Set(current).add(agent.id))}
          >
            ×
          </button>
        </div>
      ) : null}
      {pausedEscalationWarning ? (
        <div className="flex items-start gap-3 border border-amber-300/35 bg-amber-300/10 px-3 py-2 text-sm text-amber-900 dark:text-amber-100">
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
          <div className="min-w-0 space-y-1">
            <p className="font-medium">Escalation path is paused</p>
            <p className="text-amber-900/90 dark:text-amber-100/90">{pausedEscalationWarning}</p>
          </div>
        </div>
      ) : null}
      {hasInvalidOrgChain ? (
        <div className="flex items-start gap-3 border border-amber-300/35 bg-amber-300/10 px-3 py-2 text-sm text-amber-900 dark:text-amber-100">
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
          <div className="min-w-0 space-y-1">
            <p className="font-medium">Invalid reporting chain</p>
            <p className="text-amber-900/90 dark:text-amber-100/90">
              {agent.name} cannot accept tasks or start runs until its reporting chain is repaired.
            </p>
            <p className="break-words font-mono text-xs text-amber-900/80 dark:text-amber-100/80">
              {formatOrgChainHealthPath(agent)}
            </p>
            {agent.orgChainHealth?.repairGuidance ? (
              <p className="text-amber-900/85 dark:text-amber-100/85">{agent.orgChainHealth.repairGuidance}</p>
            ) : (
              <p className="text-amber-900/85 dark:text-amber-100/85">
                Assign this agent to an active manager/root, or explicitly pause or terminate the affected agent/subtree.
              </p>
            )}
          </div>
        </div>
      ) : null}
      {/* Header */}
      <header className="flex flex-wrap items-center justify-between gap-5 border-b border-border pb-6">
        <div className="flex min-w-0 items-center gap-4">
          <div role="img" aria-label={`${agent.name} avatar`} className="shrink-0">
            <AgentCharacter agent={agent} state={characterStateForAgent(currentAgent.status)} size={96} trackingScope="page" />
          </div>
          <div className="min-w-0 space-y-1">
            <div className="flex items-center gap-2"><h1 className="truncate text-2xl font-semibold tracking-tight">{agent.name}</h1><PrimaryAgentIndicator agentId={agent.id} companyId={agent.companyId} /></div>
            <div className="flex items-center gap-2 text-xs text-muted-foreground">
              {agent.adapterType === "claude_local" || agent.adapterType === "codex_local"
                ? <img src={`/brands/${agent.adapterType === "claude_local" ? "claude" : "codex"}-color.svg`} className="size-4" alt="" />
                : null}
              <span>{getAdapterDisplay(agentDisplayAdapterType(agent)).label}</span><span>·</span>
              <span>{agent.title || roleLabels[agent.role] || agent.role}</span>
            </div>
            <AgentLifecycleStatus agent={currentAgent} refreshError={lifecycle.isError} onRetry={() => agentAction.mutate("retryLifecycle")} retryPending={agentAction.isPending} />
            <SetPrimaryAgentButton agent={agent} />
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <StarToggle
            size="button"
            starred={agentStarred}
            pending={agentStarPending}
            resourceName={agent.name}
            onToggle={(next) => membershipMutation.mutate({
              resourceType: "agent",
              resourceId: agent.id,
              resourceName: agent.name,
              starred: next,
            })}
          />
          <AgentActionButtons
            agent={currentAgent}
            companyId={resolvedCompanyId}
            assignLabel="Assign Task"
            showStatus={false}
            actionsDisabled={agentAction.isPending || (activeView === "advanced" && configSaving)}
            workActionsDisabled={hasInvalidOrgChain}
            workActionsDisabledReason="Repair this agent's reporting chain before assigning tasks or starting runs"
            hasPendingNavigationChanges={configDirty}
            onBeforeNavigate={prepareAgentNavigation}
            onActionError={setActionError}
            onTerminateSuccess={() => navigate("/agents/all", { replace: true })}
            hideTerminate={Boolean(builtInState)}
            pauseConfirm={
              builtInState
                ? {
                    title: `Pause the ${builtInState.definition.displayName}?`,
                    description: (
                      <>
                        {builtInFeatureLabel} depends on this agent. While paused,{" "}
                        {builtInFeatureLabel.toLowerCase()} generation is skipped and the{" "}
                        {builtInFeatureLabel} page shows a warning.
                      </>
                    ),
                  }
                : undefined
            }
          >
            {mobileLiveRun && (
              <Link
                to={`/agents/${canonicalAgentRef}/runs/${mobileLiveRun.id}`}
                className="sm:hidden flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-500/10 hover:bg-blue-500/20 transition-colors no-underline"
              >
                <span className="relative flex h-2 w-2">
                  <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
                </span>
                <span className="text-(length:--text-micro) font-medium text-blue-600 dark:text-blue-400">Live</span>
              </Link>
            )}
          </AgentActionButtons>
        </div>
      </header>

      {builtInState && (
        <InlineBanner
          tone="info"
          title="Built-in agent"
          actions={
            <Button
              variant="outline"
              size="sm"
              onClick={() => resetBuiltIn.mutate()}
              disabled={resetBuiltIn.isPending}
            >
              {resetBuiltIn.isPending ? "Resetting…" : "Reset to defaults"}
            </Button>
          }
        >
          Ships with Paperclip and powers <strong>{builtInFeatureLabel}</strong>. Configure it like
          any agent — model, instructions, budget. It can be paused but not deleted; pausing it
          pauses {builtInFeatureLabel}.
        </InlineBanner>
      )}

      {builtInState?.definition.bundle && (
        <BuiltInBundlePanel
          state={builtInState}
          agentRef={canonicalAgentRef}
          onConfigure={() => setShowBuiltInConfigure(true)}
          onResetResource={(kind) => resetBuiltInResource.mutate(kind)}
          onRunRoutine={(routineKey) => runBuiltInRoutine.mutate(routineKey)}
          onEnableSchedule={(routineKey) => enableBuiltInSchedule.mutate(routineKey)}
          onDisableSchedule={(routineKey) => disableBuiltInSchedule.mutate(routineKey)}
          resettingResource={resetBuiltInResource.isPending ? resetBuiltInResource.variables ?? null : null}
          routineActionPending={builtInRoutineActionPending}
        />
      )}

      {builtInState && resolvedCompanyId && (
        <ConfigureBuiltInAgentModal
          companyId={resolvedCompanyId}
          state={builtInState}
          open={showBuiltInConfigure}
          onOpenChange={setShowBuiltInConfigure}
          onConfigured={() => {
            setShowBuiltInConfigure(false);
            invalidateBuiltIn();
          }}
        />
      )}


      {actionError && <p className="text-sm text-destructive">{actionError}</p>}
      {isPendingApproval && (
        <div className="flex flex-wrap items-center gap-3 rounded-md border border-amber-300/60 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-400/40 dark:bg-amber-950/30 dark:text-amber-200">
          <span>This agent is pending board approval and cannot be invoked yet.</span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => agentAction.mutate("approve")}
            disabled={agentAction.isPending}
          >
            <CheckCircle2 className="h-3.5 w-3.5 sm:mr-1" />
            <span>Approve agent</span>
          </Button>
        </div>
      )}

      {activeView !== "run-detail" && activeView !== "channels" && <h2 className="text-xl font-semibold">{activeView === "secrets" ? "Secrets & variables" : AGENT_DETAIL_NAVIGATION.flatMap(section => section.items).find(item => item.value === activeView)?.label}</h2>}

      {/* View content */}
      {activeView === "overview" && (
        <AgentOverview
          agent={agent}
          runs={heartbeats ?? []}
          assignedIssues={assignedIssues}
          runtimeState={runtimeState}
          reportsToAgent={reportsToAgent}
          directReportCount={directReports.length}
          skillNames={overviewSkillNames}
          agentRouteId={canonicalAgentRef}
        />
      )}

      {activeView === "instructions" && (
        <div><PromptsTab
          agent={agent}
          companyId={resolvedCompanyId ?? undefined}
          showSaveNotice={false}
          onDirtyChange={setConfigDirty}
          onSaveActionChange={setSaveConfigAction}
          onCancelActionChange={setCancelConfigAction}
          onSavingChange={setConfigSaving}
        />
        {resolvedCompanyId && <AgentConnectionInstructions companyId={resolvedCompanyId} agentId={agent.id} />}
        </div>
      )}

      {activeView === "runtime" && (
        <div>
          <ConfigurationTab
            agent={agent}
            companyId={resolvedCompanyId ?? undefined}
            onDirtyChange={setConfigDirty}
            onSaveActionChange={setSaveConfigAction}
            onCancelActionChange={setCancelConfigAction}
            onSavingChange={setConfigSaving}
            updatePermissions={updatePermissions}
            canConfigureProviderTrace={canUseProviderTrace}
            content="runtime"
            hidePromptTemplate
            hideInstructionsFile
          />
        </div>
      )}

      {activeView === "secrets" && (
        <div>
          <ConfigurationTab
            agent={agent}
            companyId={resolvedCompanyId ?? undefined}
            onDirtyChange={setConfigDirty}
            onSaveActionChange={setSaveConfigAction}
            onCancelActionChange={setCancelConfigAction}
            onSavingChange={setConfigSaving}
            updatePermissions={updatePermissions}
            content="secrets"
          />
        </div>
      )}

      {activeView === "skills" && (
        <AgentSkillsTab
          agent={agent}
          companyId={resolvedCompanyId ?? undefined}
        />
      )}

      {activeView === "tools" && resolvedCompanyId && (
        <AgentToolsTab agent={agent} companyId={resolvedCompanyId} />
      )}

      {activeView === "channels" && resolvedCompanyId && (
        <AgentChannelsPanel agentId={agent.id} companyId={resolvedCompanyId} />
      )}

      {activeView === "permissions" && (
        <div>
          <ConfigurationTab
            agent={agent}
            companyId={resolvedCompanyId ?? undefined}
            onDirtyChange={setConfigDirty}
            onSaveActionChange={setSaveConfigAction}
            onCancelActionChange={setCancelConfigAction}
            onSavingChange={setConfigSaving}
            updatePermissions={updatePermissions}
            content="permissions"
          />
        </div>
      )}

      {activeView === "api-keys" && (
        <div className="max-w-3xl">
          <KeysTab agentId={agent.id} companyId={resolvedCompanyId ?? undefined} />
        </div>
      )}

      {activeView === "revisions" && (
        <AgentRevisionsTab agent={agent} companyId={resolvedCompanyId ?? undefined} />
      )}

      {activeView === "advanced" && (
        <Suspense fallback={<p role="status" className="text-sm text-muted-foreground">Loading configuration…</p>}>
          <AgentAdvancedTab key={agent.id} agent={agent} onDirtyChange={setConfigDirty} onSavingChange={setConfigSaving}
            onSaved={updated => {
              const nextRef = agentRouteRef(updated);
              const currentKey = [...queryKeys.agents.detail(routeAgentRef), lookupCompanyId ?? null];
              void queryClient.cancelQueries({ queryKey: currentKey, exact: true });
              queryClient.setQueryData(currentKey, { ...agent, ...updated });
              queryClient.setQueryData([...queryKeys.agents.detail(nextRef), lookupCompanyId ?? null], { ...agent, ...updated });
              if (nextRef !== routeAgentRef) navigate(`/agents/${nextRef}/advanced`, { replace: true });
            }} />
        </Suspense>
      )}

      {activeView === "run-detail" && (
        <RunsTab
          runs={heartbeats ?? []}
          companyId={resolvedCompanyId!}
          agentId={agent.id}
          agentRouteId={canonicalAgentRef}
          selectedRunId={urlRunId ?? null}
          adapterType={agent.adapterType}
          adapterConfig={agent.adapterConfig}
        />
      )}

      {showConfigActionBar && <footer className="sticky bottom-0 z-10 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-background py-4">
        <p role="status" className="text-xs text-muted-foreground">{configSaving ? "Saving changes…" : configDirty ? "You have unsaved changes." : ""}</p>
        <div className="flex gap-2">
          <Button variant="ghost" disabled={!configDirty || configSaving} onClick={() => cancelConfigActionRef.current?.()}>Discard</Button>
          <Button disabled={!configDirty || configSaving} onClick={() => {Promise.resolve(saveConfigActionRef.current?.()).catch(() => {});}}>{configSaving ? "Saving…" : "Save changes"}</Button>
        </div>
      </footer>}

    </div>
  );
}

/* ---- Helper components ---- */

function SummaryRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-muted-foreground text-xs">{label}</span>
      <div className="flex items-center gap-1">{children}</div>
    </div>
  );
}

export type LatestRunIssue = { id: string; title: string; status: string; identifier?: string | null };

/**
 * The id of the issue a run works on, read from its context snapshot. Newer
 * snapshots use `issueId`; older ones use `taskId`. Returns undefined for pure
 * timer heartbeats that carry no task reference.
 */
export function getRunSnapshotIssueId(
  run: Pick<HeartbeatRun, "contextSnapshot">,
): string | undefined {
  const ctx = run.contextSnapshot as Record<string, unknown> | null;
  const issueId = ctx?.issueId ?? ctx?.taskId;
  return issueId ? String(issueId) : undefined;
}

/**
 * Resolve the Live Run section's two navigation destinations and the task (if
 * any) the run works on. The run→task link lives in the run's context snapshot
 * (`issueId`, falling back to `taskId` for older snapshots); the `HeartbeatRun`
 * itself doesn't carry the issue id. The heading always links to the run detail
 * page; the running row links to the task detail page when the snapshot resolves
 * to a known issue, otherwise falls back to the run detail page (pure timer
 * heartbeats or an issue that can't be resolved).
 */
export function resolveLatestRunNavigation(
  run: Pick<HeartbeatRun, "id" | "contextSnapshot">,
  agentId: string,
  issuesById: Map<string, LatestRunIssue>,
): { task: LatestRunIssue | undefined; runHref: string; rowHref: string } {
  const issueId = getRunSnapshotIssueId(run);
  const task = issueId ? issuesById.get(issueId) : undefined;
  const runHref = `/agents/${agentId}/runs/${run.id}`;
  const rowHref = task ? `/issues/${task.identifier ?? task.id}` : runHref;
  return { task, runHref, rowHref };
}

function LatestRunCard({
  runs,
  agentId,
  issuesById,
}: {
  runs: HeartbeatRun[];
  agentId: string;
  issuesById: Map<string, LatestRunIssue>;
}) {
  const sorted = useMemo(
    () =>
      [...runs].sort(
        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      ),
    [runs]
  );

  const liveRun = sorted.find((r) => r.status === "running" || r.status === "queued");
  const run = liveRun ?? sorted[0];

  // The assigned-issues list this card resolves against is bounded (server page
  // limit), so a live run can reference a valid issue that isn't on the loaded
  // page. When the snapshot points at an issue we don't already have, fetch it
  // directly so the running row always links to the task rather than falling
  // back to run metadata. `enabled` keeps this a no-op for the common case.
  const snapshotIssueId = run ? getRunSnapshotIssueId(run) : undefined;
  const needsFallbackFetch = !!snapshotIssueId && !issuesById.has(snapshotIssueId);
  const { data: fallbackIssue } = useQuery({
    queryKey: queryKeys.issues.detail(snapshotIssueId ?? "__none__"),
    queryFn: () => issuesApi.get(snapshotIssueId as string),
    enabled: needsFallbackFetch,
    staleTime: 30_000,
  });

  const summaryRaw = run
    ? run.resultJson
      ? String((run.resultJson as Record<string, unknown>).summary ?? (run.resultJson as Record<string, unknown>).result ?? "")
      : run.error ?? ""
    : "";

  // Extract a clean 2-3 line excerpt: first non-empty, non-header, non-list-mark lines
  const summary = useMemo(() => {
    if (!summaryRaw) return "";
    const lines = summaryRaw
      .replace(/^#{1,6}\s+/gm, "")
      .split("\n")
      .map((l) => l.trim())
      .filter((l) => l.length > 0 && !l.startsWith("---") && !l.startsWith("|") && !l.startsWith("```") && !/^[-*>]/.test(l) && !/^\d+\./.test(l));
    const excerpt: string[] = [];
    let chars = 0;
    for (const line of lines) {
      if (excerpt.length >= 3 || chars + line.length > 280) break;
      excerpt.push(line);
      chars += line.length;
    }
    return excerpt.join(" ");
  }, [summaryRaw]);

  if (!run) return null;

  const isLive = run.status === "running" || run.status === "queued";
  // Fold any directly-fetched fallback issue into the lookup, keyed by the same
  // snapshot id used to resolve the row so it hits regardless of id-vs-slug.
  const effectiveIssuesById =
    fallbackIssue && snapshotIssueId
      ? new Map(issuesById).set(snapshotIssueId, {
          id: fallbackIssue.id,
          title: fallbackIssue.title,
          status: fallbackIssue.status,
          identifier: fallbackIssue.identifier,
        })
      : issuesById;
  const { task, runHref, rowHref } = resolveLatestRunNavigation(run, agentId, effectiveIssuesById);
  const statusInfo = runStatusIcons[run.status] ?? { icon: Clock, color: "text-neutral-400" };
  const StatusIcon = statusInfo.icon;

  return (
    <div className="space-y-3">
      <div className="flex w-full items-center justify-between">
        <Link
          to={runHref}
          className="no-underline"
        >
          <h3 className="flex items-center gap-2 text-sm font-medium transition-colors hover:text-foreground">
            {isLive && (
              <span className="relative flex h-2 w-2">
                <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
              </span>
            )}
            <span>{isLive ? "Live Run" : "Latest Run"}</span>
            <span className="font-mono text-xs font-normal text-muted-foreground">
              &middot; {run.id.slice(0, 8)}
            </span>
          </h3>
        </Link>
      </div>

      <Link
        to={rowHref}
        className={cn(
          "block border rounded-lg p-4 space-y-2 w-full no-underline transition-colors hover:bg-muted/50 cursor-pointer",
          isLive ? "border-blue-500/30 shadow-(--shadow-extract-14)" : "border-border"
        )}
      >
        <div className="flex items-center gap-2">
          <StatusIcon className={cn("h-3.5 w-3.5", statusInfo.color, run.status === "running" && "animate-spin")} />
          <StatusBadge status={run.status} />
          {task ? (
            <>
              <StatusGlyph status={task.status} size="sm" />
              <span className="font-mono text-xs text-muted-foreground">
                {task.identifier ?? task.id.slice(0, 8)}
              </span>
              <span className="truncate text-xs">{task.title}</span>
            </>
          ) : (
            <>
              <span className="font-mono text-xs text-muted-foreground">{run.id.slice(0, 8)}</span>
              <Badge variant="ghost" className={cn(
                "px-1.5 text-(length:--text-nano)",
                run.invocationSource === "timer" ? "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                  : run.invocationSource === "assignment" ? "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300"
                  : run.invocationSource === "on_demand" ? "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300"
                  : "bg-muted text-muted-foreground"
              )}>
                {sourceLabels[run.invocationSource] ?? run.invocationSource}
              </Badge>
            </>
          )}
          <span className="ml-auto text-xs text-muted-foreground">{relativeTime(run.createdAt)}</span>
        </div>

        {summary && (
          <div className="overflow-hidden max-h-16">
            <MarkdownBody className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{summary}</MarkdownBody>
          </div>
        )}
      </Link>
    </div>
  );
}

/* ---- Agent Overview ---- */

export function AgentOverview({
  agent,
  runs,
  assignedIssues,
  runtimeState,
  reportsToAgent,
  directReportCount,
  skillNames,
  agentRouteId,
}: {
  agent: AgentDetailRecord;
  runs: HeartbeatRun[];
  assignedIssues: Issue[];
  runtimeState?: AgentRuntimeState;
  reportsToAgent?: Agent;
  directReportCount: number;
  skillNames: string[];
  agentRouteId: string;
}) {
  const designSandbox = useDesignSandbox();
  const issuesById = useMemo(() => {
    const map = new Map<string, (typeof assignedIssues)[number]>();
    for (const issue of assignedIssues) map.set(issue.id, issue);
    return map;
  }, [assignedIssues]);
  const configuredModel = agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "muse"
    ? "Managed by Muse"
    : asNonEmptyString(agent.adapterConfig?.model)
    ?? asNonEmptyString(agent.adapterConfig?.modelName)
    ?? asNonEmptyString(agent.runtimeConfig?.model)
    ?? "Adapter default";
  const lastRun = runs[0] ?? null;
  const identity = useQuery({
    queryKey: [...queryKeys.agents.identity(agent.id), lastRun?.id, lastRun?.status],
    queryFn: () => agentsApi.getIdentity(agent.id, agent.companyId),
  });
  const hasHumanCreator = Boolean(humanAgentCreatorUserId(agent.createdByUserId));
  const userDirectory = useQuery({
    queryKey: queryKeys.access.companyUserDirectory(agent.companyId),
    queryFn: () => accessApi.listUserDirectory(agent.companyId),
    enabled: hasHumanCreator,
  });
  const creatorLabel = resolveAgentCreatorLabel(agent.createdByUserId, userDirectory.data?.users);
  return (
    <div className="space-y-6">
      <LatestRunCard runs={runs} agentId={agentRouteId} issuesById={issuesById} />

      <div className="grid gap-4 md:grid-cols-2">
        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-identity-heading">
          <div className="mb-4 flex items-center justify-between gap-3">
            <h3 id="agent-identity-heading" className="text-sm font-medium">Identity</h3>
            <StatusBadge status={agent.status} />
          </div>
          <div className="space-y-3">
            <SummaryRow label="Role"><span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span></SummaryRow>
            <SummaryRow label="Title"><span className="text-sm">{agent.title ?? "Not set"}</span></SummaryRow>
            <SummaryRow label="Reports to">
              {reportsToAgent ? (
                <Link className="text-sm hover:underline" to={agentDetailHref(agentRouteRef(reportsToAgent))}>
                  {reportsToAgent.name}
                </Link>
              ) : <span className="text-sm">Board</span>}
            </SummaryRow>
            <SummaryRow label="Direct reports"><span className="text-sm tabular-nums">{directReportCount}</span></SummaryRow>
            {hasHumanCreator && queryViewKind(userDirectory) === "error" ? (
              <SummaryRow label="Created by"><span className="text-sm text-destructive">Could not load creator</span></SummaryRow>
            ) : creatorLabel ? (
              <SummaryRow label="Created by"><span className="text-sm">{creatorLabel}</span></SummaryRow>
            ) : null}
            <SummaryRow label="Public key">
              {identity.isPending || queryViewKind(identity) === "reconnecting" ? <span className="text-sm text-muted-foreground">Loading…</span>
                : queryViewKind(identity) === "error" ? <span className="text-sm text-muted-foreground">Could not load public key</span>
                : identity.data ? (
                  <CopyText text={identity.data.publicKeyPem} ariaLabel="Copy public key" title="Copy public key">
                    <span className="font-mono text-sm">{identity.data.keyId.slice(0, 19)}…</span>
                  </CopyText>
                ) : (
                  <div className="text-sm">
                    <div>Not created yet</div>
                    <div className="text-xs text-muted-foreground">Created automatically on the next managed run</div>
                  </div>
                )}
            </SummaryRow>
          </div>
        </section>

        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-runtime-heading">
          <div className="mb-4 flex items-center justify-between gap-3">
            <h3 id="agent-runtime-heading" className="text-sm font-medium">Harness / Runtime</h3>
            <Link className="text-xs text-muted-foreground hover:text-foreground" to={agentDetailHref(agentRouteId, "runtime")}>Configure</Link>
          </div>
          <div className="space-y-3">
            <SummaryRow label="Adapter"><span className="text-sm">{getAdapterDisplay(agentDisplayAdapterType(agent)).label}</span></SummaryRow>
            {agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "grok_bot" ? <><SummaryRow label="Execution"><span className="text-sm">Runs in Grok Bot</span></SummaryRow><SummaryRow label="Usage"><span className="text-sm">Not reported</span></SummaryRow></> : <SummaryRow label="Model"><span className="max-w-64 truncate text-sm font-mono">{configuredModel}</span></SummaryRow>}
            <SummaryRow label="Session"><span className="max-w-64 truncate text-sm font-mono">{runtimeState?.sessionDisplayId ?? runtimeState?.sessionId ?? "No session"}</span></SummaryRow>
            <SummaryRow label="Last run">
              <span className="text-sm">{lastRun ? `${lastRun.status} · ${relativeTime(lastRun.createdAt)}` : "No runs"}</span>
            </SummaryRow>
            {agent.adapterType === "paperclip_runner" && agent.adapterConfig.provider === "grok_bot" && <GrokBotWorkSummary companyId={agent.companyId} agentId={agent.id} />}
          </div>
        </section>

        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-capabilities-heading">
          <h3 id="agent-capabilities-heading" className="mb-3 text-sm font-medium">Capabilities</h3>
          {agent.capabilities?.trim() ? (
            <MarkdownBody className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{agent.capabilities}</MarkdownBody>
          ) : (
            <p className="text-sm text-muted-foreground">No capability summary has been added.</p>
          )}
        </section>

        <section className="rounded-lg border border-border p-4" aria-labelledby="agent-skills-heading">
          <div className="mb-3 flex items-center justify-between gap-3">
            <h3 id="agent-skills-heading" className="text-sm font-medium">Skills</h3>
            <Link className="text-xs text-muted-foreground hover:text-foreground" to={agentDetailHref(agentRouteId, "skills")}>Manage</Link>
          </div>
          {skillNames.length > 0 ? (
            <div className="flex flex-wrap gap-2">
              {skillNames.slice(0, 8).map((skill) => <Badge key={skill} variant="secondary">{skill}</Badge>)}
              {skillNames.length > 8 ? <Badge variant="outline">+{skillNames.length - 8} more</Badge> : null}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">No skills enabled.</p>
          )}
        </section>
      </div>

      <section className="space-y-3" aria-labelledby="agent-recent-tasks-heading">
        <div className="flex items-center justify-between">
          <h3 id="agent-recent-tasks-heading" className="text-sm font-medium">Recent Tasks</h3>
          <Link
            to={`/issues?participantAgentId=${agent.id}`}
            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
          >
            See All &rarr;
          </Link>
        </div>
        {assignedIssues.length === 0 ? (
          <p className="text-sm text-muted-foreground">No recent tasks.</p>
        ) : (
          <div className="overflow-hidden rounded-lg border border-border">
            {designSandbox ? <TaskSummaryList issues={assignedIssues.slice(0, 6)} /> : assignedIssues.slice(0, 6).map((issue) => (
              <IssueRow
                key={issue.id}
                issue={issue}
                presentation="task"
                metadata={<span className="text-xs text-muted-foreground">{relativeTime(issue.updatedAt)}</span>}
                showDivider
              />
            ))}
            {assignedIssues.length > 6 && (
              <div className="border-t border-border px-3 py-2 text-center text-xs text-muted-foreground">
                +{assignedIssues.length - 6} more tasks
              </div>
            )}
          </div>
        )}
      </section>
    </div>
  );
}

/* ---- Agent Configure Page ---- */

/**
 * Agent detail URLs use a name-derived key, so updates that change the agent's
 * name (a rename or a config-revision rollback) can invalidate the reference
 * currently in the URL. When that happens, refetching the old reference would
 * 404 with "Agent not found". Instead, drop the stale cached queries and
 * replace the URL with the new canonical reference. Returns true when a
 * redirect happened.
 */
export function syncAgentRouteAfterRename(
  queryClient: QueryClient,
  navigate: NavigateFunction,
  previous: { id: string; urlKey?: string | null; name?: string | null },
  updated: { id: string; urlKey?: string | null; name?: string | null },
  tab: string,
): boolean {
  const previousRef = agentRouteRef(previous);
  const nextRef = agentRouteRef(updated);
  if (nextRef === previousRef) return false;
  queryClient.removeQueries({ queryKey: queryKeys.agents.detail(previousRef) });
  navigate(`/agents/${nextRef}/${tab}`, { replace: true });
  return true;
}

export function AgentRevisionsTab({
  agent,
  companyId,
}: {
  agent: AgentDetailRecord;
  companyId?: string;
}) {
  const queryClient = useQueryClient();
  const navigate = useNavigate();

  const { data: configRevisions } = useQuery({
    queryKey: queryKeys.agents.configRevisions(agent.id),
    queryFn: () => agentsApi.listConfigRevisions(agent.id, companyId),
  });

  const rollbackConfig = useMutation({
    mutationFn: (revisionId: string) => agentsApi.rollbackConfigRevision(agent.id, revisionId, companyId),
    onSuccess: (updated) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(agent.id) });
      if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, "revisions")) {
        queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
      }
    },
  });

  return (
    <div className="max-w-3xl space-y-3">
      <div className="flex items-baseline justify-between gap-3">
        <h3 className="text-sm font-medium">Configuration Revisions</h3>
        <span className="text-xs text-muted-foreground">{configRevisions?.length ?? 0} total</span>
      </div>
      {(configRevisions ?? []).length === 0 ? (
        <p className="text-sm text-muted-foreground">No configuration revisions yet.</p>
      ) : (
        <div className="space-y-2">
          {(configRevisions ?? []).map((revision) => (
            <div key={revision.id} className="space-y-2 rounded-md border border-border p-3">
              <div className="flex items-center justify-between gap-3">
                <div className="text-xs text-muted-foreground">
                  <span className="font-mono">{revision.id.slice(0, 8)}</span>
                  <span className="mx-1">·</span>
                  <span>{formatDate(revision.createdAt)}</span>
                  <span className="mx-1">·</span>
                  <span>{revision.source}</span>
                </div>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => rollbackConfig.mutate(revision.id)}
                  disabled={rollbackConfig.isPending}
                >
                  Restore
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                Changed: {revision.changedKeys.length > 0 ? revision.changedKeys.join(", ") : "no tracked changes"}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---- Configuration Tab ---- */

export function ConfigurationTab({
  agent,
  companyId,
  onDirtyChange,
  onSaveActionChange,
  onCancelActionChange,
  onSavingChange,
  updatePermissions,
  hidePromptTemplate,
  hideInstructionsFile,
  content = "runtime",
  canConfigureProviderTrace = false,
}: {
  agent: AgentDetailRecord;
  companyId?: string;
  onDirtyChange: (dirty: boolean) => void;
  onSaveActionChange: (save: (() => void) | null) => void;
  onCancelActionChange: (cancel: (() => void) | null) => void;
  onSavingChange: (saving: boolean) => void;
  updatePermissions: { mutate: (permissions: AgentPermissionUpdate) => void; isPending: boolean };
  hidePromptTemplate?: boolean;
  hideInstructionsFile?: boolean;
  content?: "runtime" | "permissions" | "secrets";
  canConfigureProviderTrace?: boolean;
}) {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const { tab: urlTab } = useParams<{ tab?: string }>();
  const { pushToast } = useToastActions();
  const [awaitingRefreshAfterSave, setAwaitingRefreshAfterSave] = useState(false);
  const lastAgentRef = useRef(agent);

  const catalogProvider = agent.adapterType === "paperclip_runner" ? String(agent.adapterConfig.provider ?? "codex") : undefined;
  const { data: adapterModels } = useQuery({
    queryKey:
      companyId
        ? queryKeys.agents.adapterModels(companyId, agent.adapterType, null, catalogProvider)
        : ["agents", "none", "adapter-models", agent.adapterType],
    queryFn: () => agentsApi.adapterModels(companyId!, agent.adapterType, { provider: catalogProvider }),
    enabled: Boolean(companyId) && content === "runtime" && !["openai_dot", "grok_bot", "muse"].includes(catalogProvider ?? ""),
  });

  const lowTrustSelected = getTrustPreset(agent.permissions) === "low_trust_review";

  const { data: boundaryProjects, isLoading: boundaryProjectsLoading } = useQuery({
    queryKey: companyId ? queryKeys.projects.list(companyId) : ["projects", "__low-trust-disabled"],
    queryFn: () => projectsApi.list(companyId!),
    enabled: Boolean(companyId && lowTrustSelected) && content === "permissions",
  });

  const { data: boundaryIssues, isLoading: boundaryIssuesLoading } = useQuery({
    queryKey: companyId
      ? [...queryKeys.issues.list(companyId), "low-trust-boundary-candidates"]
      : ["issues", "__low-trust-disabled"],
    queryFn: () => issuesApi.list(companyId!, { limit: 100, sortField: "updated", sortDir: "desc" }),
    enabled: Boolean(companyId && lowTrustSelected) && content === "permissions",
  });

  const updateAgent = useMutation({
    mutationFn: ({ target, patch }: { target: AgentDetailRecord; patch: Record<string, unknown> }) =>
      agentsApi.update(target.id, patch, target.companyId),
    onMutate: () => {
      setAwaitingRefreshAfterSave(true);
    },
    onSuccess: (updated, { target }) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(target.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(target.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(target.companyId) });
      if (lastAgentRef.current.id !== target.id
        || !syncAgentRouteAfterRename(queryClient, navigate, target, updated, urlTab ?? content)) {
        queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(target.urlKey) });
      }
      pushToast({ title: "Agent saved", tone: updated.configurationWarnings?.length ? "warn" : "success",
        body: updated.configurationWarnings?.map(warning => warning.message).join("\n") });
    },
    onError: (err) => {
      setAwaitingRefreshAfterSave(false);
      const message =
        err instanceof ApiError
          ? err.message
          : err instanceof Error
            ? err.message
            : "Could not save agent";
      pushToast({ title: "Save failed", body: message, tone: "error" });
    },
  });

  useEffect(() => {
    if (awaitingRefreshAfterSave && agent !== lastAgentRef.current) {
      setAwaitingRefreshAfterSave(false);
    }
    lastAgentRef.current = agent;
  }, [agent, awaitingRefreshAfterSave]);
  const isConfigSaving = content !== "permissions" && (updateAgent.isPending || awaitingRefreshAfterSave);

  useEffect(() => {
    onSavingChange(isConfigSaving);
  }, [onSavingChange, isConfigSaving]);

  useEffect(() => {
    if (content !== "permissions") return;
    onDirtyChange(false);
    onSaveActionChange(null);
    onCancelActionChange(null);
  }, [content, onCancelActionChange, onDirtyChange, onSaveActionChange]);

  const canCreateAgents = Boolean(agent.permissions?.canCreateAgents);
  const canCreateSkills = agent.permissions?.canCreateSkills !== false;
  const canAssignTasks = Boolean(agent.access?.canAssignTasks);
  const taskAssignSource = agent.access?.taskAssignSource ?? "none";
  const taskAssignLocked = agent.role === "ceo" || canCreateAgents;
  const taskAssignHint =
    taskAssignSource === "ceo_role"
      ? "Enabled automatically for CEO agents."
      : taskAssignSource === "agent_creator"
        ? "Enabled automatically while this agent can create new agents."
        : taskAssignSource === "explicit_grant"
          ? "Enabled via explicit organization permission grant."
          : taskAssignSource === "simple_default"
            ? "Enabled by simple organization-wide task assignment defaults."
            : "Disabled unless explicitly granted.";

  return (
    <div className="agent-settings-form space-y-6">
      {content !== "permissions" ? <AgentConfigForm
        mode="edit"
        agent={agent}
        onSave={(patch) => updateAgent.mutateAsync({ target: agent, patch })}
        isSaving={isConfigSaving}
        adapterModels={adapterModels}
        onDirtyChange={onDirtyChange}
        onSaveActionChange={onSaveActionChange}
        onCancelActionChange={onCancelActionChange}
        hideInlineSave
        hidePromptTemplate={hidePromptTemplate}
        hideInstructionsFile={hideInstructionsFile}
        content={content === "runtime" ? "configuration" : "secrets"}
        sectionLayout="cards"
        environmentVariablesPlacement={content === "secrets" ? "secrets" : "configuration"}
        compactTestFeedback
        sectionOrder={["identity", "adapter", "configuration", "environment", "environment-variables", "run-policy"]}
        sectionTitles={{ adapter: "Adapter", configuration: "Configuration", identity: "Agent identity" }}
        canConfigureProviderTrace={canConfigureProviderTrace}
      /> : null}


      {content === "permissions" ? <TrustPresetSection
        projectAccessEditor={<AgentProjectAccessSettings agent={agent} />}
        permissions={agent.permissions}
        disabled={updatePermissions.isPending}
        companyId={companyId}
        projectCandidates={(boundaryProjects ?? []).map((project) => ({
          id: project.id,
          label: project.name,
        }))}
        issueCandidates={(boundaryIssues ?? []).map((issue) => ({
          id: issue.id,
          label: `${issue.identifier ?? issue.id.slice(0, 8)} · ${issue.title}`,
        }))}
        candidatesLoading={boundaryProjectsLoading || boundaryIssuesLoading}
        onChange={(nextPermissions) =>
          updatePermissions.mutate({
            canCreateAgents,
            canCreateSkills,
            canAssignTasks,
            ...buildPermissionsForTrustPreset(nextPermissions, nextPermissions.trustPreset === "low_trust_review" ? "low_trust_review" : "standard"),
          })
        }
      /> : null}

      {content === "permissions" ? <div>
        <h3 className="text-sm font-medium mb-3">Permissions</h3>
        <div className="border border-border rounded-lg p-4 space-y-4">
          <div className="flex items-center justify-between gap-4 text-sm">
            <div className="space-y-1">
              <div>Can create new agents</div>
              <p className="text-xs text-muted-foreground">
                Lets this agent create or hire agents. This also grants task assignment authority.
              </p>
            </div>
            <ToggleSwitch
              checked={canCreateAgents}
              onCheckedChange={() =>
                updatePermissions.mutate({
                  canCreateAgents: !canCreateAgents,
                  canCreateSkills,
                  canAssignTasks: !canCreateAgents ? true : canAssignTasks,
                })
              }
              disabled={updatePermissions.isPending}
            />
          </div>
          <div className="flex items-center justify-between gap-4 text-sm">
            <div className="space-y-1">
              <div>Can create/import skills</div>
              <p className="text-xs text-muted-foreground">
                Lets this agent install, import, create, and scan organization skills without creating agents.
              </p>
            </div>
            <ToggleSwitch
              checked={canCreateSkills}
              onCheckedChange={() =>
                updatePermissions.mutate({
                  canCreateAgents,
                  canCreateSkills: !canCreateSkills,
                  canAssignTasks,
                })
              }
              disabled={updatePermissions.isPending}
            />
          </div>
          <div className="flex items-center justify-between gap-4 text-sm">
            <div className="space-y-1">
              <div>Can assign tasks</div>
              <p className="text-xs text-muted-foreground">
                {taskAssignHint}
              </p>
            </div>
            <ToggleSwitch
              checked={canAssignTasks}
              onCheckedChange={() =>
                updatePermissions.mutate({
                  canCreateAgents,
                  canCreateSkills,
                  canAssignTasks: !canAssignTasks,
                })
              }
              disabled={updatePermissions.isPending || taskAssignLocked}
            />
          </div>
        </div>
      </div> : null}
    </div>
  );
}

/* ---- Prompts Tab ---- */

export function PromptsTab({
  agent,
  companyId,
  onDirtyChange,
  onSaveActionChange,
  onCancelActionChange,
  onSavingChange,
  showSaveNotice = true,
}: {
  showSaveNotice?: boolean;
  agent: Agent;
  companyId?: string;
  onDirtyChange: (dirty: boolean) => void;
  onSaveActionChange: (save: (() => void) | null) => void;
  onCancelActionChange: (cancel: (() => void) | null) => void;
  onSavingChange: (saving: boolean) => void;
}) {
  const queryClient = useQueryClient();
  const { selectedCompanyId } = useCompany();
  const { isMobile } = useSidebar();
  const [selectedFile, setSelectedFileState] = useState<string>("AGENTS.md");
  const [instructionMode, setInstructionMode] = useState<"read" | "edit" | "raw">("read");
  const [showFilePanel, setShowFilePanel] = useState(false);
  const [draft, setDraft] = useState<string | null>(null);
  const draftBaseRevisionRef = useRef<string | null | undefined>(undefined);
  const draftBaseHashRef = useRef<string | null | undefined>(undefined);
  const [candidateRunId, setCandidateRunId] = useState<string | null>(null);
  const [readOnlyCandidateRunId, setReadOnlyCandidateRunId] = useState<string | null>(null);
  const candidateAgentRef = useRef(agent.id);
  candidateAgentRef.current = agent.id;
  const [bundleDraft, setBundleDraft] = useState<{
    mode: "managed" | "external";
    rootPath: string;
    entryFile: string;
  } | null>(null);
  const [newFilePath, setNewFilePath] = useState("");
  const [showNewFileInput, setShowNewFileInput] = useState(false);
  const [pendingFiles, setPendingFiles] = useState<string[]>([]);
  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
  const [filePanelWidth, setFilePanelWidth] = useState(260);
  const [instructionPaneWidth, setInstructionPaneWidth] = useState<number | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [awaitingRefresh, setAwaitingRefresh] = useState(false);
  const lastFileVersionRef = useRef<string | null>(null);
  const externalBundleRef = useRef<{
    rootPath: string;
    entryFile: string;
    selectedFile: string;
  } | null>(null);
  // MDXEditor can normalize markdown and emit onChange while it mounts. Only
  // treat editor output as a draft after a real interaction so merely opening
  // an instructions file cannot mark the agent dirty.
  const editorInteractedRef = useRef(false);
  const markEditorInteracted = useCallback(() => {
    editorInteractedRef.current = true;
  }, []);
  const setSelectedFile = useCallback((filePath: string) => {
    editorInteractedRef.current = false;
    draftBaseRevisionRef.current = undefined;
    draftBaseHashRef.current = undefined;
    setCandidateRunId(null);
    setSelectedFileState(filePath);
  }, []);

  useEffect(() => {
    editorInteractedRef.current = false;
    setSelectedFile("AGENTS.md");
    setInstructionMode("read");
    setShowFilePanel(false);
    setDraft(null);
    setReadOnlyCandidateRunId(null);
    setBundleDraft(null);
    setNewFilePath("");
    setShowNewFileInput(false);
    setPendingFiles([]);
    setExpandedDirs(new Set());
    setAwaitingRefresh(false);
    lastFileVersionRef.current = null;
    externalBundleRef.current = null;
  }, [agent.id]);

  const getCapabilities = useAdapterCapabilities();
  const isLocal = getCapabilities(agent.adapterType).supportsInstructionsBundle;

  const { data: bundle, isLoading: bundleLoading } = useQuery({
    queryKey: queryKeys.agents.instructionsBundle(agent.id),
    queryFn: () => agentsApi.instructionsBundle(agent.id, companyId),
    enabled: Boolean(companyId && isLocal),
    refetchInterval: draft === null ? 5000 : false,
  });

  const persistedMode = bundle?.mode ?? "managed";
  const persistedRootPath = persistedMode === "managed"
    ? (bundle?.managedRootPath ?? bundle?.rootPath ?? "")
    : (bundle?.rootPath ?? "");
  const currentMode = bundleDraft?.mode ?? persistedMode;
  const currentEntryFile = bundleDraft?.entryFile ?? bundle?.entryFile ?? "AGENTS.md";
  const currentRootPath = bundleDraft?.rootPath ?? persistedRootPath;
  const fileOptions = useMemo(
    () => bundle?.files.map((file) => file.path) ?? [],
    [bundle],
  );
  const bundleMatchesDraft = Boolean(
    bundle &&
    currentMode === persistedMode &&
    currentEntryFile === bundle.entryFile &&
    currentRootPath === persistedRootPath,
  );
  const visibleFilePaths = useMemo(
    () => bundleMatchesDraft
      ? [...new Set([currentEntryFile, ...fileOptions, ...pendingFiles])]
      : [currentEntryFile, ...pendingFiles],
    [bundleMatchesDraft, currentEntryFile, fileOptions, pendingFiles],
  );
  const fileTree = useMemo(
    () => buildFileTree(Object.fromEntries(visibleFilePaths.map((filePath) => [filePath, ""]))),
    [visibleFilePaths],
  );
  const selectedOrEntryFile = selectedFile || currentEntryFile;
  const selectedFileExists = bundleMatchesDraft && fileOptions.includes(selectedOrEntryFile);
  const selectedFileSummary = bundle?.files.find((file) => file.path === selectedOrEntryFile) ?? null;

  const { data: selectedFileDetail, isLoading: fileLoading, error: fileError } = useQuery({
    queryKey: queryKeys.agents.instructionsFile(agent.id, selectedOrEntryFile),
    queryFn: () => agentsApi.instructionsFile(agent.id, selectedOrEntryFile, companyId),
    enabled: Boolean(companyId && isLocal && selectedFileExists),
    refetchInterval: draft === null ? 5000 : false,
  });

  const candidates = useQuery({
    queryKey: queryKeys.agents.instructionCandidates(agent.id),
    queryFn: () => agentsApi.instructionCandidates(agent.id, companyId),
    enabled: Boolean(companyId && isLocal && currentMode === "managed"),
  });
  // Whole-folder failures belong to their run's diagnostics. They have no
  // preserved edits to resolve and do not describe the current saved files.
  const preservedCandidates = candidates.data?.filter((candidate) => candidate.contract !== "agent_files") ?? [];
  const loadCandidate = useMutation({
    mutationFn: async (candidate: AgentInstructionCandidate) => {
      if (candidate.content === null) throw new Error("These instruction edits have not been retrieved yet.");
      const file = await agentsApi.instructionsFile(agent.id, candidate.entryFile, companyId).catch((error) => {
        if (error instanceof ApiError && error.status === 404 && candidate.baseRevisionId === null) return null;
        throw error;
      });
      return { candidate, file, agentId: agent.id };
    },
    onSuccess: ({ candidate, file, agentId: requestedAgentId }) => {
      if (candidateAgentRef.current !== requestedAgentId) return;
      setSelectedFile(candidate.entryFile);
      if (file) queryClient.setQueryData(queryKeys.agents.instructionsFile(agent.id, candidate.entryFile), file);
      draftBaseRevisionRef.current = file?.revision?.id ?? null;
      setCandidateRunId(candidate.runId);
      setDraft(candidate.content);
      setInstructionMode("edit");
    },
  });
  const resolveCandidate = useMutation({
    mutationFn: async (data: { runId: string; content: string; baseRevisionId: string | null }) => ({
      file: await agentsApi.resolveInstructionCandidate(agent.id, data.runId, { content: data.content, baseRevisionId: data.baseRevisionId }, companyId),
      agentId: agent.id,
    }),
    onSuccess: ({ file, agentId: requestedAgentId }) => {
      if (candidateAgentRef.current !== requestedAgentId) return;
      setDraft(null);
      setCandidateRunId(null);
      draftBaseRevisionRef.current = undefined;
      draftBaseHashRef.current = undefined;
      queryClient.setQueryData(queryKeys.agents.instructionsFile(agent.id, file.path), file);
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionCandidates(agent.id) });
    },
  });

  const refreshCandidateBase = useMutation({
    mutationFn: async () => ({
      file: await agentsApi.instructionsFile(agent.id, selectedOrEntryFile, companyId),
      agentId: agent.id, runId: candidateRunId,
    }),
    onSuccess: ({ file, agentId: requestedAgentId, runId }) => {
      if (candidateAgentRef.current !== requestedAgentId || candidateRunId !== runId) return;
      draftBaseRevisionRef.current = file.revision?.id ?? null;
      queryClient.setQueryData(queryKeys.agents.instructionsFile(agent.id, file.path), file);
      resolveCandidate.reset();
    },
  });

  const updateBundle = useMutation({
    mutationFn: (data: {
      mode?: "managed" | "external";
      rootPath?: string | null;
      entryFile?: string;
      clearLegacyPromptTemplate?: boolean;
    }) => agentsApi.updateInstructionsBundle(agent.id, data, companyId),
    onMutate: () => {
      editorInteractedRef.current = false;
    },
    onSuccess: () => {
      setAwaitingRefresh(true);
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
    },
    onError: () => setAwaitingRefresh(false),
  });

  const saveFile = useMutation({
    mutationFn: (data: { path: string; content: string; baseRevisionId?: string | null; baseHash?: string | null; clearLegacyPromptTemplate?: boolean }) =>
      agentsApi.saveInstructionsFile(agent.id, data, companyId),
    onMutate: () => {
      editorInteractedRef.current = false;
    },
    onSuccess: (file, variables) => {
      setDraft(null);
      draftBaseRevisionRef.current = undefined;
      draftBaseHashRef.current = undefined;
      queryClient.setQueryData(queryKeys.agents.instructionsFile(agent.id, variables.path), file);
      // Keep the selected file present while the refreshed bundle is in flight.
      // Otherwise removing its pending placeholder briefly selects AGENTS.md.
      queryClient.setQueryData<AgentInstructionsBundle>(queryKeys.agents.instructionsBundle(agent.id), previous => previous ? {
        ...previous, files: [...previous.files.filter(item => item.path !== file.path), {
          path: file.path, size: file.size, language: file.language, markdown: file.markdown,
          isEntryFile: file.isEntryFile, editable: file.editable, deprecated: file.deprecated,
          virtual: file.virtual, binary: file.binary, contentHash: file.contentHash,
        }],
      } : previous);
      setPendingFiles((prev) => prev.filter((f) => f !== variables.path));
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsFile(agent.id, variables.path) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
    },
    onError: () => setAwaitingRefresh(false),
  });

  const deleteFile = useMutation({
    mutationFn: (relativePath: string) => agentsApi.deleteInstructionsFile(agent.id, relativePath, companyId, bundle?.files.find(file => file.path === relativePath)?.contentHash),
    onMutate: () => {
      editorInteractedRef.current = false;
      setAwaitingRefresh(true);
    },
    onSuccess: (_, relativePath) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
      queryClient.removeQueries({ queryKey: queryKeys.agents.instructionsFile(agent.id, relativePath) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) });
    },
    onError: () => setAwaitingRefresh(false),
  });

  const uploadMarkdownImage = useMutation({
    mutationFn: async ({ file, namespace }: { file: File; namespace: string }) => {
      if (!selectedCompanyId) throw new Error("Select an organization to upload images");
      return assetsApi.uploadImage(selectedCompanyId, file, namespace);
    },
  });

  useEffect(() => {
    if (!bundle) return;
    if (!bundleMatchesDraft) {
      if (selectedFile !== currentEntryFile) setSelectedFile(currentEntryFile);
      return;
    }
    const availablePaths = bundle.files.map((file) => file.path);
    if (availablePaths.length === 0) {
      if (selectedFile !== bundle.entryFile) setSelectedFile(bundle.entryFile);
      return;
    }
    if (!availablePaths.includes(selectedFile) && selectedFile !== currentEntryFile && !pendingFiles.includes(selectedFile)) {
      setSelectedFile(availablePaths.includes(bundle.entryFile) ? bundle.entryFile : availablePaths[0]!);
    }
  }, [bundle, bundleMatchesDraft, currentEntryFile, pendingFiles, selectedFile]);

  useEffect(() => {
    const nextExpanded = new Set<string>();
    for (const filePath of visibleFilePaths) {
      const parts = filePath.split("/");
      let currentPath = "";
      for (let i = 0; i < parts.length - 1; i++) {
        currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i]!;
        nextExpanded.add(currentPath);
      }
    }
    setExpandedDirs((current) => (setsEqual(current, nextExpanded) ? current : nextExpanded));
  }, [visibleFilePaths]);

  useEffect(() => {
    if (isMobile) {
      setInstructionPaneWidth(null);
      return;
    }
    const element = containerRef.current;
    if (!element) return;

    const updateWidth = () => setInstructionPaneWidth(element.getBoundingClientRect().width);
    updateWidth();

    if (typeof ResizeObserver === "undefined") return;
    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (entry) setInstructionPaneWidth(entry.contentRect.width);
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, [bundleLoading, isMobile, visibleFilePaths.length]);

  useEffect(() => {
    const versionKey = selectedFileExists && selectedFileDetail
      ? `${selectedFileDetail.path}:${selectedFileDetail.content}`
      : `draft:${currentMode}:${currentRootPath}:${selectedOrEntryFile}`;
    if (awaitingRefresh) {
      setAwaitingRefresh(false);
      setBundleDraft(null);
      setDraft(null);
      lastFileVersionRef.current = versionKey;
      return;
    }
    if (lastFileVersionRef.current !== versionKey) {
      if (draftBaseRevisionRef.current === undefined) setDraft(null);
      lastFileVersionRef.current = versionKey;
    }
  }, [awaitingRefresh, currentMode, currentRootPath, selectedFileDetail, selectedFileExists, selectedOrEntryFile]);

  useEffect(() => {
    if (!bundle) return;
    setBundleDraft((current) => {
      if (current) return current;
      return {
        mode: persistedMode,
        rootPath: persistedRootPath,
        entryFile: bundle.entryFile,
      };
    });
  }, [bundle, persistedMode, persistedRootPath]);

  useEffect(() => {
    if (!bundle || currentMode !== "external") return;
    externalBundleRef.current = {
      rootPath: currentRootPath,
      entryFile: currentEntryFile,
      selectedFile: selectedOrEntryFile,
    };
  }, [bundle, currentEntryFile, currentMode, currentRootPath, selectedOrEntryFile]);

  const currentContent = selectedFileExists ? (selectedFileDetail?.content ?? "") : "";
  const displayValue = draft ?? currentContent;
  const useMarkdownEditor = shouldUseMarkdownInstructionsEditor({
    selectedFileExists,
    selectedPath: selectedOrEntryFile,
    detail: selectedFileDetail,
    summary: selectedFileSummary,
  });
  const bundleDirty = Boolean(
    bundleDraft &&
      (
        bundleDraft.mode !== persistedMode ||
        bundleDraft.rootPath !== persistedRootPath ||
        bundleDraft.entryFile !== (bundle?.entryFile ?? "AGENTS.md")
      ),
  );
  const fileDirty = draft !== null && draft !== currentContent;
  const isDirty = bundleDirty || fileDirty || candidateRunId !== null;
  const isSaving = updateBundle.isPending || saveFile.isPending || resolveCandidate.isPending || loadCandidate.isPending || refreshCandidateBase.isPending || deleteFile.isPending || awaitingRefresh;

  useEffect(() => { onSavingChange(isSaving); }, [onSavingChange, isSaving]);
  useEffect(() => { onDirtyChange(isDirty); }, [onDirtyChange, isDirty]);

  useEffect(() => () => {
    onSaveActionChange(null);
    onCancelActionChange(null);
    onDirtyChange(false);
    onSavingChange(false);
  }, [onCancelActionChange, onDirtyChange, onSaveActionChange, onSavingChange]);

  useEffect(() => {
    onSaveActionChange(isDirty ? () => {
      const save = async () => {
        const shouldClearLegacy =
          Boolean(bundle?.legacyPromptTemplateActive) || Boolean(bundle?.legacyBootstrapPromptTemplateActive);
        if (bundleDirty && bundleDraft) {
          await updateBundle.mutateAsync({
            mode: bundleDraft.mode,
            rootPath: bundleDraft.mode === "external" ? bundleDraft.rootPath : null,
            entryFile: bundleDraft.entryFile,
          });
        }
        if (candidateRunId) {
          await resolveCandidate.mutateAsync({ runId: candidateRunId, content: displayValue,
            baseRevisionId: draftBaseRevisionRef.current ?? null });
        } else if (fileDirty) {
          await saveFile.mutateAsync({
            path: selectedOrEntryFile,
            content: displayValue,
            ...(bundle?.persistence === "agent_files" ? { baseHash: draftBaseHashRef.current !== undefined ? draftBaseHashRef.current : selectedFileDetail?.contentHash ?? null } : {}),
            ...(selectedOrEntryFile === currentEntryFile && currentMode === "managed" ? { baseRevisionId: draftBaseRevisionRef.current !== undefined ? draftBaseRevisionRef.current : selectedFileDetail?.revision?.id ?? null } : {}),
            clearLegacyPromptTemplate: shouldClearLegacy,
          });
        }
      };
      void save().catch(() => undefined);
    } : null);
  }, [
    bundle,
    bundleDirty,
    bundleDraft,
    candidateRunId,
    resolveCandidate,
    displayValue,
    fileDirty,
    isDirty,
    onSaveActionChange,
    selectedFileDetail?.revision?.id,
    currentEntryFile,
    currentMode,
    saveFile,
    selectedOrEntryFile,
    updateBundle,
  ]);

  useEffect(() => {
    onCancelActionChange(isDirty ? () => {
      draftBaseRevisionRef.current = undefined;
      draftBaseHashRef.current = undefined;
      setCandidateRunId(null);
      resolveCandidate.reset();
      setDraft(null);
      if (bundle) {
        setBundleDraft({
          mode: persistedMode,
          rootPath: persistedRootPath,
          entryFile: bundle.entryFile,
        });
      }
    } : null);
  }, [bundle, isDirty, onCancelActionChange, persistedMode, persistedRootPath, resolveCandidate]);

  const handleSeparatorDrag = useCallback((event: React.MouseEvent) => {
    event.preventDefault();
    const startX = event.clientX;
    const startWidth = filePanelWidth;
    const onMouseMove = (moveEvent: MouseEvent) => {
      const delta = moveEvent.clientX - startX;
      const next = Math.max(180, Math.min(500, startWidth + delta));
      setFilePanelWidth(next);
    };
    const onMouseUp = () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    };
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
  }, [filePanelWidth]);

  const instructionsSideBySide =
    !isMobile && instructionPaneWidth !== null && instructionPaneWidth >= filePanelWidth + 520;

  if (!isLocal) {
    return (
      <div className="max-w-3xl">
        <p className="text-sm text-muted-foreground">
          Instructions bundles are only available for local adapters.
        </p>
      </div>
    );
  }

  if (bundleLoading && !bundle) {
    return <PromptsTabSkeleton />;
  }

  return (
    <div className="space-y-6">
      {(bundle?.warnings ?? []).length > 0 && (
        <div className="space-y-2">
          {(bundle?.warnings ?? []).map((warning) => (
            <div key={warning} className="rounded-md border border-sky-500/25 bg-sky-500/10 px-3 py-2 text-xs text-sky-900 dark:text-sky-100">
              {warning}
            </div>
          ))}
        </div>
      )}
      {showSaveNotice && <p className="text-xs text-muted-foreground">
        Saved instructions affect the next run. Active runs keep the instructions they started with, and instruction changes may start a fresh adapter session.
      </p>}

      <Collapsible defaultOpen={currentMode === "external"}>
        <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors group">
          <ChevronRight className="h-3 w-3 transition-transform group-data-[state=open]:rotate-90" />
          Advanced
        </CollapsibleTrigger>
        <CollapsibleContent className="pt-4 pb-6">
          <TooltipProvider>
            <div className="grid gap-x-6 gap-y-4 md:grid-cols-(--gtc-18)">
              <label className="space-y-1.5 min-w-0">
                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
                  Mode
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent side="right" sideOffset={4}>
                      Managed: Paperclip stores and serves the instructions bundle. External: you provide a path on disk where the instructions live.
                    </TooltipContent>
                  </Tooltip>
                </span>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={currentMode === "managed" ? "default" : "outline"}
                    onClick={() => {
                      if (currentMode === "external") {
                        externalBundleRef.current = {
                          rootPath: currentRootPath,
                          entryFile: currentEntryFile,
                          selectedFile: selectedOrEntryFile,
                        };
                      }
                      const nextEntryFile = currentEntryFile || "AGENTS.md";
                      setBundleDraft({
                        mode: "managed",
                        rootPath: bundle?.managedRootPath ?? currentRootPath,
                        entryFile: nextEntryFile,
                      });
                      setSelectedFile(nextEntryFile);
                    }}
                  >
                    Managed
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={currentMode === "external" ? "default" : "outline"}
                    onClick={() => {
                      const externalBundle = externalBundleRef.current;
                      const nextEntryFile = externalBundle?.entryFile ?? currentEntryFile ?? "AGENTS.md";
                      setBundleDraft({
                        mode: "external",
                        rootPath: externalBundle?.rootPath ?? (bundle?.mode === "external" ? (bundle.rootPath ?? "") : ""),
                        entryFile: nextEntryFile,
                      });
                      setSelectedFile(externalBundle?.selectedFile ?? nextEntryFile);
                    }}
                  >
                    External
                  </Button>
                </div>
              </label>
              <label className="space-y-1.5 min-w-0">
                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
                  Root path
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent side="right" sideOffset={4}>
                      The absolute directory on disk where the instructions bundle lives. In managed mode this is set by Paperclip automatically.
                    </TooltipContent>
                  </Tooltip>
                </span>
                {currentMode === "managed" ? (
                  <div className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground pt-1.5">
                    <span className="min-w-0 truncate" title={currentRootPath || undefined}>{currentRootPath || "(managed)"}</span>
                    {currentRootPath && (
                      <CopyText text={currentRootPath} className="shrink-0">
                        <Copy className="h-3.5 w-3.5" />
                      </CopyText>
                    )}
                  </div>
                ) : (
                  <div className="flex items-center gap-1.5">
                    <Input
                      value={currentRootPath}
                      onChange={(event) => {
                        const nextRootPath = event.target.value;
                        externalBundleRef.current = {
                          rootPath: nextRootPath,
                          entryFile: currentEntryFile,
                          selectedFile: selectedOrEntryFile,
                        };
                        setBundleDraft({
                          mode: "external",
                          rootPath: nextRootPath,
                          entryFile: currentEntryFile,
                        });
                      }}
                      className="font-mono text-sm"
                      placeholder="/absolute/path/to/agent/prompts"
                    />
                    {currentRootPath && (
                      <CopyText text={currentRootPath} className="shrink-0">
                        <Copy className="h-3.5 w-3.5" />
                      </CopyText>
                    )}
                  </div>
                )}
              </label>
              <label className="space-y-1.5">
                <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
                  Entry file
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent side="right" sideOffset={4}>
                      The main file the agent reads first when loading instructions. Defaults to AGENTS.md.
                    </TooltipContent>
                  </Tooltip>
                </span>
                <Input
                  value={currentEntryFile}
                  onChange={(event) => {
                    const nextEntryFile = event.target.value || "AGENTS.md";
                    const nextSelectedFile = selectedOrEntryFile === currentEntryFile
                      ? nextEntryFile
                      : selectedOrEntryFile;
                    if (currentMode === "external") {
                      externalBundleRef.current = {
                        rootPath: currentRootPath,
                        entryFile: nextEntryFile,
                        selectedFile: nextSelectedFile,
                      };
                    }
                    if (selectedOrEntryFile === currentEntryFile) setSelectedFile(nextEntryFile);
                    setBundleDraft({
                      mode: currentMode,
                      rootPath: currentRootPath,
                      entryFile: nextEntryFile,
                    });
                  }}
                  className="font-mono text-sm"
                />
              </label>
            </div>
          </TooltipProvider>
        </CollapsibleContent>
      </Collapsible>

      <div
        ref={containerRef}
        className="grid min-w-0 gap-3"
        style={
          instructionsSideBySide
            ? { gridTemplateColumns: `${filePanelWidth}px 0.5rem minmax(0, 1fr)` }
            : undefined
        }
      >
        <div className={cn(
          "min-w-0 w-full border border-border rounded-lg p-3 space-y-3",
          isMobile && showFilePanel && "block",
          isMobile && !showFilePanel && "hidden",
        )}>
          <div className="flex items-center justify-between">
            <h4 className="text-sm font-medium">Files</h4>
            <div className="flex items-center gap-1">
              {!showNewFileInput && (
                <Button
                  type="button"
                  size="icon"
                  variant="outline"
                  className="h-7 w-7"
                  aria-label="Add agent file"
                  onClick={() => setShowNewFileInput(true)}
                >
                  +
                </Button>
              )}
              {isMobile && (
                <Button
                  type="button"
                  size="icon"
                  variant="ghost"
                  className="h-7 w-7"
                  onClick={() => setShowFilePanel(false)}
                >
                  ✕
                </Button>
              )}
            </div>
          </div>
          {showNewFileInput && (
            <div className="space-y-2">
              <Input
                value={newFilePath}
                onChange={(event) => setNewFilePath(event.target.value)}
                placeholder="TOOLS.md"
                className="font-mono text-sm"
                autoFocus
                onKeyDown={(event) => {
                  if (event.key === "Escape") {
                    setShowNewFileInput(false);
                    setNewFilePath("");
                  }
                }}
              />
              <div className="flex gap-2">
                <Button
                  type="button"
                  size="sm"
                  variant="default"
                  className="flex-1"
                  disabled={!newFilePath.trim() || newFilePath.includes("..")}
                  onClick={() => {
                    const candidate = newFilePath.trim();
                    if (!candidate || candidate.includes("..")) return;
                    setPendingFiles((prev) => prev.includes(candidate) ? prev : [...prev, candidate]);
                    setSelectedFile(candidate);
                    setDraft("");
                    setNewFilePath("");
                    setShowNewFileInput(false);
                  }}
                >
                  Create
                </Button>
                <Button
                  type="button"
                  size="sm"
                  variant="outline"
                  className="flex-1"
                  onClick={() => {
                    setShowNewFileInput(false);
                    setNewFilePath("");
                  }}
                >
                  Cancel
                </Button>
              </div>
            </div>
          )}
          <FileTree
            nodes={fileTree}
            selectedFile={selectedOrEntryFile}
            expandedDirs={expandedDirs}
            checkedFiles={new Set()}
            onToggleDir={(dirPath) => setExpandedDirs((current) => {
              const next = new Set(current);
              if (next.has(dirPath)) next.delete(dirPath);
              else next.add(dirPath);
              return next;
            })}
            onSelectFile={(filePath) => {
              setSelectedFile(filePath);
              setInstructionMode("read");
              if (!fileOptions.includes(filePath)) setDraft("");
              if (isMobile) setShowFilePanel(false);
            }}
            onToggleCheck={() => {}}
            showCheckboxes={false}
            wrapLabels
            renderFileExtra={(node) => {
              const file = bundle?.files.find((entry) => entry.path === node.path);
              if (!file) return null;
              if (file.deprecated) {
                return (
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span className="ml-3 shrink-0 rounded border border-amber-500/40 bg-amber-500/10 text-amber-800 dark:text-amber-200 px-1.5 py-0.5 text-(length:--text-nano) uppercase tracking-wide cursor-help">
                        virtual file
                      </span>
                    </TooltipTrigger>
                    <TooltipContent side="right" sideOffset={4}>
                      Legacy inline prompt — this deprecated virtual file preserves the old promptTemplate content
                    </TooltipContent>
                  </Tooltip>
                );
              }
              return (
                <span className="ml-3 shrink-0 rounded border border-border text-muted-foreground px-1.5 py-0.5 text-(length:--text-nano) uppercase tracking-wide">
                  {file.isEntryFile ? "entry" : `${file.size}b`}
                </span>
              );
            }}
          />
        </div>

        {/* Draggable separator */}
        {instructionsSideBySide && (
          <div
            className="w-1 cursor-col-resize rounded transition-colors hover:bg-border active:bg-primary/50"
            onMouseDown={handleSeparatorDrag}
          />
        )}

        <div className={cn("min-w-0 w-full overflow-hidden border border-border rounded-lg p-4 space-y-3", isMobile && showFilePanel && "hidden")}>
          <div className="flex items-center justify-between gap-3">
            <div className="flex items-center gap-2 min-w-0">
              {isMobile && (
                <Button
                  type="button"
                  size="icon"
                  variant="outline"
                  className="h-7 w-7 shrink-0"
                  onClick={() => setShowFilePanel(true)}
                >
                  <FolderOpen className="h-3.5 w-3.5" />
                </Button>
              )}
              <div className="min-w-0">
                <h4 className="text-sm font-medium font-mono truncate">{selectedOrEntryFile}</h4>
                <p className="text-xs text-muted-foreground">
                  {selectedFileExists
                    ? selectedFileSummary?.deprecated
                      ? "Deprecated virtual file"
                      : `${selectedFileDetail?.language ?? "text"} file`
                    : "New file in this bundle"}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <div className="flex items-center rounded-md border border-border p-0.5" role="group" aria-label="Instruction file view">
                {(["read", "edit", "raw"] as const).map((mode) => (
                  <Button
                    key={mode}
                    type="button"
                    size="sm"
                    variant={instructionMode === mode ? "secondary" : "ghost"}
                    className="capitalize"
                    aria-pressed={instructionMode === mode}
                    onClick={() => setInstructionMode(mode)}
                  >
                    {mode}
                  </Button>
                ))}
              </div>
              {!fileLoading && (
                <CopyText
                  text={displayValue}
                  ariaLabel="Copy instructions file as markdown"
                  title="Copy as markdown"
                  copiedLabel="Copied"
                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  <Copy className="h-3.5 w-3.5" />
                </CopyText>
              )}
              {selectedFileExists && !selectedFileSummary?.deprecated && selectedOrEntryFile !== currentEntryFile && (
                <Button
                  type="button"
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    if (confirm(`Delete ${selectedOrEntryFile}?`)) {
                      deleteFile.mutate(selectedOrEntryFile, {
                        onSuccess: () => {
                          setSelectedFile(currentEntryFile);
                          setDraft(null);
                        },
                      });
                    }
                  }}
                  disabled={deleteFile.isPending}
                >
                  Delete
                </Button>
              )}
            </div>
          </div>

          {currentMode === "managed" && preservedCandidates.length > 0 && (
            <div className="space-y-3">
              <p className="text-sm font-medium">Preserved instruction edits</p>
              <p className="text-sm text-muted-foreground">Older instruction-only sessions have edits to review.</p>
              {preservedCandidates.map((candidate) => (
                <div key={candidate.runId} className="flex flex-wrap items-center gap-3">
                  <span className="font-mono text-xs text-muted-foreground">{candidate.runId.slice(0, 8)}</span>
                  <span className="text-sm text-muted-foreground">{candidate.entryFile} · {formatDate(candidate.createdAt)}</span>
                  <Button type="button" variant="outline" size="sm"
                    disabled={candidate.content === null || (candidate.entryFile === currentEntryFile && (isDirty || isSaving))}
                    aria-expanded={candidate.entryFile !== currentEntryFile ? readOnlyCandidateRunId === candidate.runId : undefined}
                    onClick={() => {
                      if (candidate.entryFile !== currentEntryFile) {
                        setReadOnlyCandidateRunId((current) => current === candidate.runId ? null : candidate.runId);
                      } else {
                        loadCandidate.mutate(candidate);
                      }
                    }}>Review preserved edits</Button>
                  {candidate.errorMessage && <p className="text-sm text-muted-foreground">{candidate.errorMessage}</p>}
                  {candidate.entryFile !== currentEntryFile && <p className="text-sm text-muted-foreground">The instruction entry changed. These edits remain preserved for the original file.</p>}
                  {candidate.entryFile !== currentEntryFile && candidate.content !== null && readOnlyCandidateRunId === candidate.runId && (
                    <div role="region" aria-label={`Preserved edits for ${candidate.entryFile}`} className="w-full space-y-3">
                      <p className="text-sm text-muted-foreground">Read only: {candidate.entryFile}. To keep any of these edits in {currentEntryFile}, copy them and edit the current entry explicitly.</p>
                      <CopyText text={candidate.content} ariaLabel={`Copy preserved edits for ${candidate.entryFile}`}
                        className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">
                        <Copy className="h-3.5 w-3.5" />Copy preserved edits
                      </CopyText>
                      <pre className="overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-3 font-mono text-sm">{candidate.content}</pre>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
          {candidateRunId && <div role="status" className="space-y-3">
            <p className="text-sm text-muted-foreground">Reviewing preserved edits. Save to apply your resolved draft and close this preserved edit.</p>
            <details><summary className="cursor-pointer text-sm text-muted-foreground">Compare current instructions</summary>
              <pre className="whitespace-pre-wrap break-words rounded-md border border-border p-3 font-mono text-sm">{currentContent}</pre>
            </details>
            {draftBaseRevisionRef.current !== (selectedFileDetail?.revision?.id ?? null) && <p className="text-sm text-destructive">The current instructions changed after this draft was loaded. Refresh the current revision, compare the instructions, and save your resolved draft again.</p>}
            {(resolveCandidate.error || draftBaseRevisionRef.current !== (selectedFileDetail?.revision?.id ?? null)) && <Button type="button" variant="outline" size="sm" disabled={isSaving} onClick={() => refreshCandidateBase.mutate()}>Refresh current revision</Button>}
          </div>}
          {(candidates.error || loadCandidate.error || resolveCandidate.error || refreshCandidateBase.error) && <p role="alert" className="text-sm text-destructive">{(candidates.error ?? loadCandidate.error ?? resolveCandidate.error ?? refreshCandidateBase.error)?.message} Your preserved edits remain available.</p>}
          {(saveFile.error || fileError || updateBundle.error) && <p role="alert" className="text-sm text-destructive">{(saveFile.error ?? fileError ?? updateBundle.error)?.message} Your unsaved edits are retained.</p>}
          {selectedFileDetail?.receipt?.materialization === "pending" && <p role="status" className="text-sm text-muted-foreground">Revision saved. The instruction file still needs to be rebuilt from the saved revision.</p>}
          {selectedFileDetail?.revision && currentMode === "managed" && bundle?.persistence !== "agent_files" && <InstructionHistory
            key={selectedOrEntryFile} agentId={agent.id} companyId={companyId} path={selectedOrEntryFile}
            currentRevisionId={selectedFileDetail.revision.id} disabled={isDirty || isSaving}
            onRestored={(file) => {
              setDraft(null);
              draftBaseRevisionRef.current = undefined;
              draftBaseHashRef.current = undefined;
              queryClient.setQueryData(queryKeys.agents.instructionsFile(agent.id, selectedOrEntryFile), file);
              queryClient.invalidateQueries({ queryKey: queryKeys.agents.instructionsBundle(agent.id) });
            }}
          />}
          {selectedFileDetail?.binary ? (
            <div className="space-y-3 rounded-md border border-border p-4">
              <p className="text-sm text-muted-foreground">This file is preserved with the agent directory. Download it to view its contents.</p>
              <a className="text-sm text-primary underline" href={agentsApi.downloadInstructionsFile(agent.id, selectedOrEntryFile, companyId)} download>Download {selectedOrEntryFile}</a>
            </div>
          ) : selectedFileExists && fileLoading && !selectedFileDetail ? (
            <PromptEditorSkeleton />
          ) : instructionMode === "read" ? (
            <div className="min-h-(--sz-420px) rounded-md border border-border bg-background p-4">
              {displayValue.trim() ? (
                useMarkdownEditor ? (
                  <MarkdownBody className="max-w-none text-sm leading-7 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
                    {displayValue}
                  </MarkdownBody>
                ) : (
                  <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-7">{displayValue}</pre>
                )
              ) : (
                <p className="text-sm text-muted-foreground">This instruction file is empty.</p>
              )}
            </div>
          ) : instructionMode === "raw" ? (
            <pre
              data-testid="instructions-raw-source"
              className="min-h-(--sz-420px) overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-4 font-mono text-sm leading-7"
            >
              {displayValue}
            </pre>
          ) : useMarkdownEditor ? (
            <div
              onBeforeInputCapture={markEditorInteracted}
              onDropCapture={markEditorInteracted}
              onInput={markEditorInteracted}
              onKeyDownCapture={markEditorInteracted}
              onPasteCapture={markEditorInteracted}
              onPointerDownCapture={markEditorInteracted}
            >
              <MarkdownEditor
                key={selectedOrEntryFile}
                value={displayValue}
                onChange={(value) => {
                  if (!editorInteractedRef.current) return;
                  if (draftBaseRevisionRef.current === undefined) draftBaseRevisionRef.current = selectedFileDetail?.revision?.id ?? null;
                  if (draftBaseHashRef.current === undefined) draftBaseHashRef.current = selectedFileDetail?.contentHash ?? null;
                  setDraft(value ?? "");
                }}
                placeholder="# Agent instructions"
                className="min-w-0 overflow-hidden"
                contentClassName="min-h-(--sz-420px) max-w-full break-words text-sm leading-7"
                imageUploadHandler={async (file) => {
                  const namespace = `agents/${agent.id}/instructions/${selectedOrEntryFile.replaceAll("/", "-")}`;
                  const asset = await uploadMarkdownImage.mutateAsync({ file, namespace });
                  return asset.contentPath;
                }}
              />
            </div>
          ) : (
            <textarea
              aria-label="Instruction file editor"
              value={displayValue}
              onChange={(event) => {
                if (draftBaseRevisionRef.current === undefined) draftBaseRevisionRef.current = selectedFileDetail?.revision?.id ?? null;
                  if (draftBaseHashRef.current === undefined) draftBaseHashRef.current = selectedFileDetail?.contentHash ?? null;
                setDraft(event.target.value);
              }}
              className="min-h-(--sz-420px) w-full min-w-0 rounded-md border border-border bg-transparent px-3 py-2 font-mono text-sm outline-none"
              placeholder="File contents"
            />
          )}
        </div>
      </div>

    </div>
  );
}

function PromptsTabSkeleton() {
  return (
    <div className="max-w-5xl space-y-4">
      <div className="rounded-lg border border-border p-4 space-y-4">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-2">
            <Skeleton className="h-4 w-40" />
            <Skeleton className="h-4 w-(--sz-30rem) max-w-full" />
          </div>
          <Skeleton className="h-4 w-16" />
        </div>
        <div className="grid gap-3 md:grid-cols-3">
          {Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className="space-y-2">
              <Skeleton className="h-3 w-20" />
              <Skeleton className="h-10 w-full" />
            </div>
          ))}
        </div>
      </div>
      <div className="grid gap-4 lg:grid-cols-(--gtc-19)">
        <div className="rounded-lg border border-border p-3 space-y-3">
          <div className="flex items-center justify-between">
            <Skeleton className="h-4 w-12" />
            <Skeleton className="h-8 w-16" />
          </div>
          <Skeleton className="h-10 w-full" />
          <div className="space-y-2">
            {Array.from({ length: 5 }).map((_, index) => (
              <Skeleton key={index} className="h-9 w-full rounded-none" />
            ))}
          </div>
        </div>
        <div className="rounded-lg border border-border p-4 space-y-3">
          <div className="space-y-2">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-3 w-28" />
          </div>
          <PromptEditorSkeleton />
        </div>
      </div>
    </div>
  );
}

function PromptEditorSkeleton() {
  return (
    <div className="space-y-3">
      <Skeleton className="h-10 w-full" />
      <Skeleton className="h-(--sz-420px) w-full" />
    </div>
  );
}

/* ---- Runs Tab ---- */

function RunListItem({ run, isSelected, agentId }: { run: HeartbeatRun; isSelected: boolean; agentId: string }) {
  const statusInfo = runStatusIcons[run.status] ?? { icon: Clock, color: "text-neutral-400" };
  const StatusIcon = statusInfo.icon;
  const metrics = runMetrics(run);
  const summary = run.resultJson
    ? String((run.resultJson as Record<string, unknown>).summary ?? (run.resultJson as Record<string, unknown>).result ?? "")
    : run.error ?? "";
  const sourceResolvedFold = readSourceResolvedWatchdogFold(run.resultJson);

  return (
    <Link
      to={isSelected ? `/agents/${agentId}/runs` : `/agents/${agentId}/runs/${run.id}`}
      className={cn(
        "flex flex-col gap-1 w-full px-3 py-2.5 text-left border-b border-border last:border-b-0 transition-colors no-underline text-inherit",
        isSelected ? "bg-accent/40" : "hover:bg-accent/20",
      )}
    >
      <div className="flex items-center gap-2">
        <StatusIcon className={cn("h-3.5 w-3.5 shrink-0", statusInfo.color, run.status === "running" && "animate-spin")} />
        <span className="font-mono text-xs text-muted-foreground">
          {run.id.slice(0, 8)}
        </span>
        <Badge variant="ghost" className={cn(
          "px-1.5 text-(length:--text-nano)",
          run.invocationSource === "timer" ? "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
            : run.invocationSource === "assignment" ? "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300"
            : run.invocationSource === "on_demand" ? "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300"
            : "bg-muted text-muted-foreground"
        )}>
          {sourceLabels[run.invocationSource] ?? run.invocationSource}
        </Badge>
        {sourceResolvedFold ? <SourceResolvedFoldBadge showIcon={false} className="shrink-0 text-(length:--text-nano) py-0" /> : null}
        <span className="ml-auto text-(length:--text-micro) text-muted-foreground shrink-0">
          {relativeTime(run.createdAt)}
        </span>
      </div>
      {summary && (
        <span className="text-xs text-muted-foreground truncate pl-5.5">
          {summary.slice(0, 60)}
        </span>
      )}
      {(metrics.usageUnavailable || (metrics.totalTokens ?? 0) > 0 || (metrics.cost ?? 0) > 0) && (
        <div className="flex items-center gap-2 pl-5.5 text-(length:--text-micro) text-muted-foreground tabular-nums">
          {metrics.usageUnavailable && <span>Usage and cost unavailable</span>}
          {metrics.totalTokens !== null && metrics.totalTokens > 0 && <span>{formatTokens(metrics.totalTokens)} tok</span>}
          {metrics.cost !== null && metrics.cost > 0 && <span>${metrics.cost.toFixed(3)}</span>}
        </div>
      )}
    </Link>
  );
}

export function RunsTab({
  runs,
  companyId,
  agentId,
  agentRouteId,
  selectedRunId,
  adapterType,
  adapterConfig,
}: {
  runs: HeartbeatRun[];
  companyId: string;
  agentId: string;
  agentRouteId: string;
  selectedRunId: string | null;
  adapterType: string;
  adapterConfig: Record<string, unknown>;
}) {
  const { isMobile } = useSidebar();

  // Sort by created descending
  const sorted = [...runs].sort(
    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  );

  // On mobile, don't auto-select so the list shows first; on desktop, auto-select latest
  const effectiveRunId = isMobile ? selectedRunId : (selectedRunId ?? sorted[0]?.id ?? null);
  const selection = useSelectedHeartbeatRun(sorted, effectiveRunId, companyId, agentId);
  const selectedRun = selection.run;
  if (selectedRunId && !selectedRun) {
    if (selection.loading) return <p className="text-sm text-muted-foreground">Loading run…</p>;
    return <div role="alert">
      <p className="text-sm text-destructive">{selection.error instanceof Error ? selection.error.message : "This run is unavailable for this agent."}</p>
      {selection.error && <Button variant="outline" onClick={() => { void selection.retry(); }}>Try again</Button>}
    </div>;
  }
  if (runs.length === 0 && !selectedRun) return <p className="text-sm text-muted-foreground">No runs yet.</p>;

  // Mobile: show either run list OR run detail with back button
  if (isMobile) {
    if (selectedRun) {
      return (
        <div className="space-y-3 min-w-0 overflow-x-hidden">
          <Link
            to={`/agents/${agentRouteId}/runs`}
            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors no-underline"
          >
            <ArrowLeft className="h-3.5 w-3.5" />
            Back to runs
          </Link>
          <RunDetail key={selectedRun.id} run={selectedRun} agentRouteId={agentRouteId} adapterType={adapterType} adapterConfig={adapterConfig} />
        </div>
      );
    }
    return (
      <div className="border border-border rounded-lg overflow-x-hidden">
        {sorted.map((run) => (
          <RunListItem key={run.id} run={run} isSelected={false} agentId={agentRouteId} />
        ))}
      </div>
    );
  }

  // Desktop: side-by-side layout
  return (
    <div className="flex gap-0">
      {/* Left: run list — border stretches full height, content sticks */}
      <div className={cn(
        "shrink-0 border border-border rounded-lg",
        selectedRun ? "w-72" : "w-full",
      )}>
        <div className="sticky top-4 overflow-y-auto" style={{ maxHeight: "calc(100vh - 2rem)" }}>
        {sorted.map((run) => (
          <RunListItem key={run.id} run={run} isSelected={run.id === effectiveRunId} agentId={agentRouteId} />
        ))}
        </div>
      </div>

      {/* Right: run detail — natural height, page scrolls */}
      {selectedRun && (
        <div className="flex-1 min-w-0 pl-4">
          <RunDetail key={selectedRun.id} run={selectedRun} agentRouteId={agentRouteId} adapterType={adapterType} adapterConfig={adapterConfig} />
        </div>
      )}
    </div>
  );
}

/* ---- Run Detail (expanded) ---- */

export function AgentFileRunNotice({ resultJson }: { resultJson: HeartbeatRun["resultJson"] }) {
  const save = asRecord(resultJson?.instructionSave);
  const storageWarning = asNonEmptyString(save?.storageWarning);
  const error = asNonEmptyString(save?.errorMessage);
  const syncFailure = save?.contract === "agent_files" && save.state === "unavailable" && error;
  // A quota rejection is already explained by the storage warning. A separate
  // I/O failure must stay visible even when storage was full at run start.
  const showSyncFailure = syncFailure && (!storageWarning || save?.errorCode !== "AGENT_FILES_LIMIT_EXCEEDED");
  return <>
    {storageWarning && <InlineBanner tone="warning" title="Agent storage warning" compact>{storageWarning}</InlineBanner>}
    {showSyncFailure && <InlineBanner tone="warning" title="Agent file sync failed for this run" compact>{error}</InlineBanner>}
  </>;
}

export function RunAccountingMetrics({ run }: { run: HeartbeatRun }) {
  const metrics = runMetrics(run);
  if (!metrics.usageUnavailable && ![metrics.input, metrics.output, metrics.cached, metrics.cost].some(value => (value ?? 0) > 0)) return null;
  const values = [
    ["Input", metrics.input === null ? "Unavailable" : formatTokens(metrics.input)],
    ["Output", metrics.output === null ? "Unavailable" : formatTokens(metrics.output)],
    ["Cached", metrics.cached === null ? "Unavailable" : formatTokens(metrics.cached)],
    ["Cost", metrics.cost === null ? "Unavailable" : metrics.cost > 0 ? `$${metrics.cost.toFixed(4)}` : "-"],
  ];
  return (
    <div className="border-t sm:border-t-0 sm:border-l border-border p-4 grid grid-cols-2 gap-x-4 sm:gap-x-8 gap-y-3 content-center tabular-nums">
      {values.map(([label, value]) => (
        <div key={label}>
          <div className="text-xs text-muted-foreground">{label}</div>
          <div className="text-sm font-medium font-mono">{value}</div>
        </div>
      ))}
    </div>
  );
}

function RunDetail({ run: initialRun, agentRouteId, adapterType, adapterConfig }: { run: HeartbeatRun; agentRouteId: string; adapterType: string; adapterConfig: Record<string, unknown> }) {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const { data: hydratedRun } = useQuery({
    queryKey: queryKeys.runDetail(initialRun.id),
    queryFn: () => heartbeatsApi.get(initialRun.id),
    enabled: Boolean(initialRun.id),
    refetchInterval: (query) => runDetailRefetchIntervalMs(
      (query.state.data ?? initialRun).status,
    ),
  });
  const run = hydratedRun ?? initialRun;
  const { data: boardAccess } = useQuery({
    queryKey: queryKeys.access.currentBoardAccess,
    queryFn: () => accessApi.getCurrentBoardAccess(),
  });
  const canUseProviderTrace =
    boardAccess?.source === "local_implicit" ||
    boardAccess?.isInstanceAdmin === true;
  const { data: experimentalSettings } = useQuery({
    queryKey: queryKeys.instance.experimentalSettings,
    queryFn: () => instanceSettingsApi.getExperimental(),
  });
  const paperclipDeveloperMode =
    experimentalSettings?.enablePaperclipDeveloperMode === true;
  const canRerunWithProviderTrace = canUseProviderTrace && supportsRawProviderTrace(adapterType, adapterConfig);
  const { data: providerTraceRows } = useQuery({
    queryKey: queryKeys.providerTraceMetadata(run.companyId, [run.id]),
    queryFn: () => heartbeatsApi.providerTraceMetadata(run.companyId, [run.id]),
    enabled: canUseProviderTrace,
    refetchInterval:
      run.status === "running" || run.status === "queued" ? 3000 : false,
  });
  const providerTraceMetadata = providerTraceRows?.[0] ?? null;
  const metrics = runMetrics(run);
  const { data: userDirectory } = useQuery({
    queryKey: queryKeys.access.companyUserDirectory(run.companyId),
    queryFn: () => accessApi.listUserDirectory(run.companyId),
    enabled: Boolean(run.companyId && run.responsibleUserId),
  });
  const responsibleUserName = useMemo(() => {
    if (!run.responsibleUserId) return null;
    const entry = userDirectory?.users.find(
      (candidate) => candidate.principalId === run.responsibleUserId,
    );
    return entry?.user?.name ?? entry?.user?.email ?? null;
  }, [run.responsibleUserId, userDirectory]);
  const responsibleDenialCode = isResponsibleUserDenialCode(run.errorCode) ? run.errorCode : null;
  const [sessionOpen, setSessionOpen] = useState(false);
  const [inspectorOpen, setInspectorOpen] = useState(false);
  const [claudeLoginResult, setClaudeLoginResult] = useState<ClaudeLoginResult | null>(null);

  useEffect(() => {
    setClaudeLoginResult(null);
  }, [run.id]);

  const grokWork = run.driverKind === "grok_bot_mcp";
  const cancelRun = useMutation({
    mutationFn: () => grokWork ? grokBotApi.stop(run.companyId, run.agentId, run.id) : heartbeatsApi.cancel(run.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(run.companyId, run.agentId) });
    },
  });
  const canResumeLostRun = run.errorCode === "process_lost" && run.status === "failed";
  const resumePayload = useMemo(() => {
    const payload: Record<string, unknown> = {
      resumeFromRunId: run.id,
    };
    const context = asRecord(run.contextSnapshot);
    if (!context) return payload;
    const issueId = asNonEmptyString(context.issueId);
    const taskId = asNonEmptyString(context.taskId);
    const taskKey = asNonEmptyString(context.taskKey);
    const commentId = asNonEmptyString(context.wakeCommentId) ?? asNonEmptyString(context.commentId);
    if (issueId) payload.issueId = issueId;
    if (taskId) payload.taskId = taskId;
    if (taskKey) payload.taskKey = taskKey;
    if (commentId) payload.commentId = commentId;
    return payload;
  }, [run.contextSnapshot, run.id]);
  const resumeRun = useMutation({
    mutationFn: async () => {
      const result = await agentsApi.wakeup(run.agentId, {
        source: "on_demand",
        triggerDetail: "manual",
        reason: "resume_process_lost_run",
        payload: resumePayload,
      }, run.companyId);
      if (!("id" in result)) {
        throw new Error(result.message ?? "Resume request was skipped.");
      }
      return result;
    },
    onSuccess: (resumedRun) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(run.companyId, run.agentId) });
      navigate(`/agents/${agentRouteId}/runs/${resumedRun.id}`);
    },
  });

  const canRetryRun = (run.status === "failed" || run.status === "timed_out")
    && run.execution?.phase !== "recovery_needed" && !run.execution?.successorRunId;
  const retryPayload = useMemo(() => {
    const payload: Record<string, unknown> = {};
    const context = asRecord(run.contextSnapshot);
    if (!context) return payload;
    const issueId = asNonEmptyString(context.issueId);
    const taskId = asNonEmptyString(context.taskId);
    const taskKey = asNonEmptyString(context.taskKey);
    if (issueId) payload.issueId = issueId;
    if (taskId) payload.taskId = taskId;
    if (taskKey) payload.taskKey = taskKey;
    return payload;
  }, [run.contextSnapshot]);
  const retryRun = useMutation({
    mutationFn: async () => {
      return agentsApi.retryFailedRun(run.agentId, run.id, run.companyId);
    },
    onSuccess: (newRun) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(run.companyId, run.agentId) });
      if (newRun.runId)
        navigate(`/agents/${agentRouteId}/runs/${newRun.runId}`);
      else if (newRun.issueId) navigate(`/issues/${newRun.issueId}`);
    },
  });

  const rerunWithTrace = useMutation({
    mutationFn: async () => {
      const result = await agentsApi.wakeup(run.agentId, {
        source: "on_demand",
        triggerDetail: "manual",
        reason: "rerun_with_provider_trace",
        payload: retryPayload,
        debug: { providerTrace: "raw" },
      }, run.companyId);
      if (!("id" in result)) {
        throw new Error(result.message ?? "Trace re-run was skipped.");
      }
      return result;
    },
    onSuccess: (newRun) => {
      setInspectorOpen(false);
      queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(run.companyId, run.agentId) });
      navigate(`/agents/${agentRouteId}/runs/${newRun.id}`);
    },
  });

  const { data: touchedIssues } = useQuery({
    queryKey: queryKeys.runIssues(run.id),
    queryFn: () => activityApi.issuesForRun(run.id),
  });
  const touchedIssueIds = useMemo(
    () => Array.from(new Set((touchedIssues ?? []).map((issue) => issue.issueId))),
    [touchedIssues],
  );

  const clearSessionsForTouchedIssues = useMutation({
    mutationFn: async () => {
      if (touchedIssueIds.length === 0) return 0;
      await Promise.all(touchedIssueIds.map((issueId) => agentsApi.resetSession(run.agentId, issueId, run.companyId)));
      return touchedIssueIds.length;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.runtimeState(run.agentId) });
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.taskSessions(run.agentId) });
      queryClient.invalidateQueries({ queryKey: queryKeys.runIssues(run.id) });
    },
  });

  const runClaudeLogin = useMutation({
    mutationFn: () => agentsApi.loginWithClaude(run.agentId, run.companyId),
    onSuccess: (data) => {
      setClaudeLoginResult(data);
    },
  });

  const isRunning = run.status === "running" && !!run.startedAt && !run.finishedAt;
  const [elapsedSec, setElapsedSec] = useState<number>(() => {
    if (!run.startedAt) return 0;
    return Math.max(0, Math.round((Date.now() - new Date(run.startedAt).getTime()) / 1000));
  });

  useEffect(() => {
    if (!isRunning || !run.startedAt) return;
    const startMs = new Date(run.startedAt).getTime();
    setElapsedSec(Math.max(0, Math.round((Date.now() - startMs) / 1000)));
    const id = setInterval(() => {
      setElapsedSec(Math.max(0, Math.round((Date.now() - startMs) / 1000)));
    }, 1000);
    return () => clearInterval(id);
  }, [isRunning, run.startedAt]);

  const timeFormat: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false };
  const startTime = run.startedAt ? new Date(run.startedAt).toLocaleTimeString("en-US", timeFormat) : null;
  const endTime = run.finishedAt ? new Date(run.finishedAt).toLocaleTimeString("en-US", timeFormat) : null;
  const durationSec = run.startedAt && run.finishedAt
    ? Math.round((new Date(run.finishedAt).getTime() - new Date(run.startedAt).getTime()) / 1000)
    : null;
  const displayDurationSec = durationSec ?? (isRunning ? elapsedSec : null);
  const hasSession = !!(run.sessionIdBefore || run.sessionIdAfter);
  const sessionChanged = run.sessionIdBefore && run.sessionIdAfter && run.sessionIdBefore !== run.sessionIdAfter;
  const sessionId = run.sessionIdAfter || run.sessionIdBefore;
  const hasNonZeroExit = run.exitCode !== null && run.exitCode !== 0;

  return (
    <div className="space-y-4 min-w-0">
      {/* Workspace-validation recovery: surfaces the recovery card when this run was declined over a
          git workspace it could not validate, wired to the same reconcile / repair / re-issue /
          break-glass handlers as the task detail page. */}
      <RunWorkspaceRecoverySurface run={run} />
      <AiConnectionPoolRunDetails context={run.contextSnapshot} />
      {grokWork && <p className="text-sm text-muted-foreground">Runs in Grok Bot. Usage not reported. Stopping this session revokes Paperclip authority; remote execution may continue. Open the Grok Bot desktop app to inspect it. This view contains Paperclip-reported activity.</p>}
      {/* Run summary card */}
      <div className="border border-border rounded-lg overflow-hidden">
        <div className="flex flex-col sm:flex-row">
          {/* Left column: status + timing */}
          <div className="flex-1 p-4 space-y-3">
            <div className="flex items-center gap-2 flex-wrap">
              <StatusBadge status={run.status} />
              <ProviderTraceStatusBadge
                trace={providerTraceMetadata}
                requested={runRequestedProviderTrace(run.contextSnapshot)}
                showOff
              />
              {(run.status === "running" || run.status === "queued") && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-destructive hover:text-destructive text-xs h-6 px-2"
                  onClick={() => cancelRun.mutate()}
                  disabled={cancelRun.isPending}
                >
                  {grokWork ? cancelRun.isPending ? "Stopping Paperclip work…" : "Stop Paperclip work" : cancelRun.isPending ? "Cancelling…" : "Cancel"}
                </Button>
              )}
              {canResumeLostRun && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs h-6 px-2"
                  onClick={() => resumeRun.mutate()}
                  disabled={resumeRun.isPending}
                >
                  <RotateCcw className="h-3.5 w-3.5 mr-1" />
                  {resumeRun.isPending ? "Resuming…" : "Resume"}
                </Button>
              )}
              {canRetryRun && !canResumeLostRun && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs h-6 px-2"
                  onClick={() => retryRun.mutate()}
                  disabled={retryRun.isPending}
                >
                  <RotateCcw className="h-3.5 w-3.5 mr-1" />
                  {retryRun.isPending ? "Retrying…" : "Retry"}
                </Button>
              )}
              <Button
                variant="ghost"
                size="sm"
                className="text-xs h-6 px-2"
                onClick={() => setInspectorOpen(true)}
              >
                <Eye className="h-3.5 w-3.5 mr-1" />
                Inspect run
              </Button>
              <HoneycombRunLink
                runId={run.id}
                enabled={paperclipDeveloperMode && canUseProviderTrace}
              />
              {canRerunWithProviderTrace && !["queued", "running"].includes(run.status) ? (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs h-6 px-2"
                  onClick={() => rerunWithTrace.mutate()}
                  disabled={rerunWithTrace.isPending}
                >
                  <RotateCcw className="h-3.5 w-3.5 mr-1" />
                  {rerunWithTrace.isPending ? "Starting…" : "Re-run with provider trace"}
                </Button>
              ) : null}
            </div>
            {/* Adapter type · provider · model */}
            {(() => {
              const displayProvider = metrics.provider
                ?? asNonEmptyString(adapterConfig?.provider);
              const displayModel = metrics.model
                ?? asNonEmptyString(adapterConfig?.model);
              if (!adapterType && !displayProvider && !displayModel) return null;
              return (
                <div className="text-(length:--text-micro) text-muted-foreground font-mono flex items-center gap-1.5 flex-wrap">
                  {adapterType && (
                    <span className="bg-muted rounded px-1.5 py-0.5 text-(length:--text-nano) font-medium uppercase tracking-wide">{adapterType.replace(/_/g, " ")}</span>
                  )}
                  {displayProvider && displayModel && (
                    <span>{displayProvider}/{displayModel}</span>
                  )}
                  {!displayProvider && displayModel && (
                    <span>{displayModel}</span>
                  )}
                </div>
              );
            })()}
            {run.responsibleUserId && (
              <div
                data-testid="run-detail-on-behalf-of"
                className="text-xs text-muted-foreground"
              >
                On behalf of{" "}
                <span className="text-foreground">
                  {responsibleUserName ?? responsibleUserLabel(null)}
                </span>
              </div>
            )}
            {Boolean(run.identityHistory?.length) && (
              <details className="text-xs text-muted-foreground" data-testid="run-identity-history">
                <summary className="cursor-pointer">GitHub identity history</summary>
                <ol className="mt-2 space-y-2">
                  {run.identityHistory!.map((identity) => {
                    const person = userDirectory?.users.find((entry) => entry.principalId === identity.responsibleUserId);
                    return (
                      <li key={identity.id}>
                        <span className="text-foreground">{person?.user?.name ?? person?.user?.email ?? identity.responsibleUserId ?? "No responsible person"}</span>
                        {" · "}{identity.cause}{" · "}{identity.status}
                        {identity.github ? (
                          <span className="block">
                            {identity.github.login ? `@${identity.github.login} · ` : ""}
                            {identity.github.source ? `${identity.github.source} · ` : ""}
                            {identity.github.status}{identity.github.reason ? `: ${identity.github.reason}` : ""}
                          </span>
                        ) : <span className="block">No GitHub operation recorded</span>}
                      </li>
                    );
                  })}
                </ol>
              </details>
            )}
            {resumeRun.isError && ( // query-error-ok: mutation result, not a query
              <div className="text-xs text-destructive">
                {resumeRun.error instanceof Error ? resumeRun.error.message : "Failed to resume run"}
              </div>
            )}
            {retryRun.isError && ( // query-error-ok: mutation result, not a query
              <div className="text-xs text-destructive">
                {retryRun.error instanceof Error ? retryRun.error.message : "Failed to retry run"}
              </div>
            )}
            {startTime && (
              <div className="space-y-0.5">
                <div className="text-sm font-mono">
                  {startTime}
                  {endTime && <span className="text-muted-foreground"> &rarr; </span>}
                  {endTime}
                </div>
                <div className="text-(length:--text-micro) text-muted-foreground">
                  {relativeTime(run.startedAt!)}
                  {run.finishedAt && <> &rarr; {relativeTime(run.finishedAt)}</>}
                </div>
                {displayDurationSec !== null && (
                  <div className="text-xs text-muted-foreground">
                    Duration: {displayDurationSec >= 60 ? `${Math.floor(displayDurationSec / 60)}m ${displayDurationSec % 60}s` : `${displayDurationSec}s`}
                  </div>
                )}
              </div>
            )}
            <AgentFileRunNotice resultJson={run.resultJson} />
            {run.error && (
              <div className="text-xs">
                <span className="text-red-600 dark:text-red-400">{run.error}</span>
                {run.errorCode && <span className="text-muted-foreground ml-1">({run.errorCode})</span>}
              </div>
            )}
            {run.errorCode === "claude_auth_required" && adapterType === "claude_local" && (
              <div className="space-y-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 px-2 text-xs"
                  onClick={() => runClaudeLogin.mutate()}
                  disabled={runClaudeLogin.isPending}
                >
                  {runClaudeLogin.isPending ? "Running claude login..." : "Login to Claude Code"}
                </Button>
                {runClaudeLogin.isError && ( // query-error-ok: mutation result, not a query
                  <p className="text-xs text-destructive">
                    {runClaudeLogin.error instanceof Error
                      ? runClaudeLogin.error.message
                      : "Failed to run Claude login"}
                  </p>
                )}
                {claudeLoginResult?.loginUrl && (
                  <p className="text-xs">
                    Login URL:
                    <a
                      href={claudeLoginResult.loginUrl}
                      className="text-blue-600 underline underline-offset-2 ml-1 break-all dark:text-blue-400"
                      target="_blank"
                      rel="noreferrer"
                    >
                      {claudeLoginResult.loginUrl}
                    </a>
                  </p>
                )}
                {claudeLoginResult && (
                  <>
                    {!!claudeLoginResult.stdout && (
                      <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-3 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap">
                        {claudeLoginResult.stdout}
                      </pre>
                    )}
                    {!!claudeLoginResult.stderr && (
                      <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-3 text-xs font-mono text-red-700 dark:text-red-300 overflow-x-auto whitespace-pre-wrap">
                        {claudeLoginResult.stderr}
                      </pre>
                    )}
                  </>
                )}
              </div>
            )}
            {responsibleDenialCode && (
              <ResponsibleUserDenialNotice
                code={responsibleDenialCode}
                userName={responsibleUserName}
              />
            )}
            {hasNonZeroExit && (
              <div className="text-xs text-red-600 dark:text-red-400">
                Exit code {run.exitCode}
                {run.signal && <span className="text-muted-foreground ml-1">(signal: {run.signal})</span>}
              </div>
            )}
            <RunRetryDetails run={run} agentRouteId={agentRouteId} />
          </div>

          <RunAccountingMetrics run={run} />
        </div>

        {/* Collapsible session row */}
        {hasSession && (
          <div className="border-t border-border">
            <button
              className="flex items-center gap-1.5 w-full px-4 py-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
              onClick={() => setSessionOpen((v) => !v)}
            >
              <ChevronRight className={cn("h-3 w-3 transition-transform", sessionOpen && "rotate-90")} />
              Session
              {sessionChanged && <span className="text-yellow-400 ml-1">(changed)</span>}
            </button>
            {sessionOpen && (
              <div className="px-4 pb-3 space-y-1 text-xs">
                {run.sessionIdBefore && (
                  <div className="flex items-center gap-2">
                    <span className="text-muted-foreground w-12">{sessionChanged ? "Before" : "ID"}</span>
                    <CopyText text={run.sessionIdBefore} className="font-mono" />
                  </div>
                )}
                {sessionChanged && run.sessionIdAfter && (
                  <div className="flex items-center gap-2">
                    <span className="text-muted-foreground w-12">After</span>
                    <CopyText text={run.sessionIdAfter} className="font-mono" />
                  </div>
                )}
                {touchedIssueIds.length > 0 && (
                  <div className="pt-1">
                    <button
                      type="button"
                      className="text-(length:--text-micro) text-muted-foreground underline underline-offset-2 hover:text-foreground disabled:opacity-60"
                      disabled={clearSessionsForTouchedIssues.isPending}
                      onClick={() => {
                        const issueCount = touchedIssueIds.length;
                        const confirmed = window.confirm(
                          `Clear session for ${issueCount} issue${issueCount === 1 ? "" : "s"} touched by this run?`,
                        );
                        if (!confirmed) return;
                        clearSessionsForTouchedIssues.mutate();
                      }}
                    >
                      {clearSessionsForTouchedIssues.isPending
                        ? "clearing session..."
                        : "clear session for these tasks"}
                    </button>
                    {clearSessionsForTouchedIssues.isError && ( // query-error-ok: mutation result, not a query
                      <p className="text-(length:--text-micro) text-destructive mt-1">
                        {clearSessionsForTouchedIssues.error instanceof Error
                          ? clearSessionsForTouchedIssues.error.message
                          : "Failed to clear sessions"}
                      </p>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Issues touched by this run */}
      {touchedIssues && touchedIssues.length > 0 && (
        <div className="space-y-2">
          <span className="text-xs font-medium text-muted-foreground">Tasks Touched ({touchedIssues.length})</span>
          <div className="border border-border rounded-lg divide-y divide-border">
            {touchedIssues.map((issue) => (
              <Link
                key={issue.issueId}
                to={`/issues/${issue.identifier ?? issue.issueId}`}
                className="flex items-center justify-between w-full px-3 py-2 text-xs hover:bg-accent/20 transition-colors text-left no-underline text-inherit"
              >
                <div className="flex items-center gap-2 min-w-0">
                  <StatusBadge status={issue.status} />
                  <span className="truncate">{issue.title}</span>
                </div>
                <span className="font-mono text-muted-foreground shrink-0 ml-2">{issue.identifier ?? issue.issueId.slice(0, 8)}</span>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* stderr excerpt for failed runs */}
      {run.stderrExcerpt && (
        <div className="space-y-1">
          <span className="text-xs font-medium text-red-600 dark:text-red-400">stderr</span>
          <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-3 text-xs font-mono text-red-700 dark:text-red-300 overflow-x-auto whitespace-pre-wrap">{run.stderrExcerpt}</pre>
        </div>
      )}

      {/* stdout excerpt when no log is available */}
      {run.stdoutExcerpt && !run.logRef && (
        <div className="space-y-1">
          <span className="text-xs font-medium text-muted-foreground">stdout</span>
          <pre className="bg-neutral-100 dark:bg-neutral-950 rounded-md p-3 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap">{run.stdoutExcerpt}</pre>
        </div>
      )}

      {(() => {
        const fold = readSourceResolvedWatchdogFold(run.resultJson);
        if (!fold) return null;
        if (run.status === "failed" || run.status === "timed_out") return null;
        return <SourceResolvedFoldCallout fold={fold} finalizedAt={run.finishedAt} />;
      })()}

      {/* Log viewer */}
      <LogViewer run={run} adapterType={adapterType} />
      <ScrollToBottom />
      <RunnerInspector
        runId={run.id}
        run={run}
        open={inspectorOpen}
        onOpenChange={setInspectorOpen}
        onRerunWithTrace={
          canRerunWithProviderTrace && !["queued", "running"].includes(run.status)
            ? () => rerunWithTrace.mutate()
            : undefined
        }
      />
    </div>
  );
}

/* ---- Log Viewer ---- */

export function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: string }) {
  const { visible } = usePageVisibility();
  const [events, setEvents] = useState<HeartbeatRunEvent[]>([]);
  const [hasMoreEvents, setHasMoreEvents] = useState(false);
  const [eventsError, setEventsError] = useState<string | null>(null);
  const hasMoreEventsRef = useRef(false);
  const [loadingMoreEvents, setLoadingMoreEvents] = useState(false);
  const loadMoreEventsRef = useRef<(() => void) | null>(null);
  const [logLines, setLogLines] = useState<RunLogChunk[]>([]);
  const [loading, setLoading] = useState(true);
  const [logLoading, setLogLoading] = useState(!!run.logRef);
  const [logError, setLogError] = useState<string | null>(null);
  const [logOffset, setLogOffsetState] = useState(0);
  const logOffsetRef = useRef(0);
  const setLogOffset = useCallback((next: number | ((previous: number) => number)) => {
    logOffsetRef.current = typeof next === "function" ? next(logOffsetRef.current) : next;
    setLogOffsetState(logOffsetRef.current);
  }, []);
  const logMergeRefs = useRef({ seenChunkKeys: new Set<string>(), trimmedSeqFloorByRun: new Map<string, number>() });
  const [hasMoreLog, setHasMoreLog] = useState(false);
  const [loadingMoreLog, setLoadingMoreLog] = useState(false);
  const [isFollowing, setIsFollowing] = useState(false);
  const [transcriptMode, setTranscriptMode] = useState<TranscriptMode>("nice");
  const logEndRef = useRef<HTMLDivElement>(null);
  const pendingLogLineRef = useRef("");
  const seenProgressLogLineKeysRef = useRef<Set<string>>(new Set());
  const scrollContainerRef = useRef<ScrollContainer | null>(null);
  const isFollowingRef = useRef(false);
  const lastMetricsRef = useRef<{ scrollHeight: number; distanceFromBottom: number }>({
    scrollHeight: 0,
    distanceFromBottom: Number.POSITIVE_INFINITY,
  });
  const isLive = run.status === "running" || run.status === "queued";
  const shouldPollShellLog = shouldPollRunShellLog(run.status);
  const { data: workspaceOperations = [] } = useQuery({
    queryKey: queryKeys.runWorkspaceOperations(run.id),
    queryFn: () => heartbeatsApi.workspaceOperations(run.id),
    refetchInterval: isLive ? 2000 : false,
  });

  function isRunLogUnavailable(err: unknown): boolean {
    return err instanceof ApiError && err.status === 404;
  }

  function appendLogLines(incoming: RunLogChunk[]) {
    setLogLines((previous) => mergeRunLogChunks(run.id, previous, incoming.map((line) => ({
      ...line, dedupeKey: `log:${run.id}:${line.ts}:${line.stream}:${line.chunk}`,
    })), logMergeRefs.current, isLive ? MAX_LIVE_LOG_LINES : Number.POSITIVE_INFINITY).chunks);
  }

  function appendLogContent(content: string, finalize = false) {
    if (!content && !finalize) return;
    const combined = `${pendingLogLineRef.current}${content}`;
    const split = combined.split("\n");
    pendingLogLineRef.current = split.pop() ?? "";
    if (finalize && pendingLogLineRef.current) {
      split.push(pendingLogLineRef.current);
      pendingLogLineRef.current = "";
    }

    const parsed: RunLogChunk[] = [];
    for (const line of split) {
      const trimmed = line.trim();
      if (!trimmed) continue;
      try {
        const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown; seq?: unknown };
        const stream =
          raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
        const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
        const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
        if (!chunk) continue;
        const seq = readChunkSeq(raw.seq);
        logSequenceRef.current.confirm(seq);
        parsed.push({ ts, stream, chunk, seq });
      } catch {
        // ignore malformed lines
      }
    }

    if (parsed.length > 0) {
      // Live runs stream forever, so cap the retained tail. Terminated runs are
      // paginated by the user via "Load more log" and keep their full history.
      appendLogLines(parsed);
    }
  }

  const refreshEventsRef = useRef<((force?: boolean) => void) | null>(null);
  const refreshLogRef = useRef<((force?: boolean) => void) | null>(null);
  const eventSequenceRef = useRef(new TranscriptSequence());
  const logSequenceRef = useRef(new TranscriptSequence());
  const eventsReadCursorRef = useRef(0);
  const eventsCatchupCursorRef = useRef(0);
  const retainedEventHistoryThroughRef = useRef(0);
  const logIdentityRef = useRef<string | null>(run.logRef ?? null);
  const retiredLogRefs = useRef(new Set<string>());
  const wasLiveRef = useRef(isLive);
  const bindLog = (ref: unknown): "same" | "changed" | "stale" => {
    if (typeof ref !== "string" || !ref || ref === logIdentityRef.current) return "same";
    if (retiredLogRefs.current.has(ref)) return "stale";
    const prior = logIdentityRef.current;
    logIdentityRef.current = ref;
    if (!prior) return "same";
    retiredLogRefs.current.add(prior);
    if (retiredLogRefs.current.size > 8) retiredLogRefs.current.delete(retiredLogRefs.current.values().next().value!);
    pendingLogLineRef.current = "";
    logMergeRefs.current = { seenChunkKeys: new Set(), trimmedSeqFloorByRun: new Map() };
    logSequenceRef.current = new TranscriptSequence();
    setLogLines([]); setLogOffset(0);
    return "changed";
  };
  useEffect(() => {
    eventsReadCursorRef.current = 0; eventsCatchupCursorRef.current = 0; retainedEventHistoryThroughRef.current = 0; eventSequenceRef.current = new TranscriptSequence(); logSequenceRef.current = new TranscriptSequence();
    wasLiveRef.current = isLive;
    logIdentityRef.current = run.logRef ?? null; retiredLogRefs.current.clear();
    hasMoreEventsRef.current = false; setHasMoreEvents(false); setLoadingMoreEvents(false); setEventsError(null);
    setEvents([]); setLoading(true);
  }, [run.id, run.companyId]);
  useEffect(() => { if (isLive) wasLiveRef.current = true; }, [isLive]);

  function appendEvents(rows: HeartbeatRunEvent[], retainHistory = false) {
    if (retainHistory) retainedEventHistoryThroughRef.current = Math.max(
      retainedEventHistoryThroughRef.current, rows.at(-1)?.seq ?? 0,
    );
    setEvents(previous => {
      const merged = mergeRunEvents(previous, rows);
      if (!isLive && !wasLiveRef.current) return merged;
      const retainedThrough = Math.max(200, retainedEventHistoryThroughRef.current);
      const prefix = merged.filter(row => row.seq <= retainedThrough);
      const tail = merged.filter(row => row.seq > retainedThrough);
      return [...prefix, ...tail.slice(-MAX_LIVE_EVENTS)];
    });
  }

  const stream = useTranscriptLiveStream(isLive ? [run.id] : [], { companyId: run.companyId, enabled: visible }, event => {
    if (event.companyId !== run.companyId) return;
    const payload = asRecord(event.payload);
    if (!payload || payload.runId !== run.id) return;
    if (event.type === "heartbeat.run.log") {
      const binding = bindLog(payload.logRef);
      if (binding === "stale") return;
      const seq = readChunkSeq(payload.seq);
      if (payload.truncated === true) logSequenceRef.current.requireHistory(seq);
      const gap = logSequenceRef.current.observe(seq);
      if (binding === "changed" || payload.truncated === true || gap) refreshLogRef.current?.();
      if (payload.truncated === true) return;
      const chunk = typeof payload.chunk === "string" ? payload.chunk : "";
      if (!chunk) return;
      const channel = payload.stream === "stderr" || payload.stream === "system" ? payload.stream : "stdout";
      appendLogLines([{ ts: asNonEmptyString(payload.ts) ?? event.createdAt, stream: channel, chunk, seq }]);
      return;
    }
    if (event.type === "heartbeat.run.progress") {
      const line = buildHeartbeatProgressLogLine(payload, event.createdAt);
      if (!line) return;
      const key = heartbeatProgressLogLineKey(line);
      if (seenProgressLogLineKeysRef.current.has(key)) return;
      seenProgressLogLineKeysRef.current.add(key); appendLogLines([line]);
      return;
    }
    if (event.type === "heartbeat.run.status") {
      refreshEventsRef.current?.(true); refreshLogRef.current?.(true); return;
    }
    const row = liveRunEvent(event);
    if (!row) return;
    const commitSignal = row.message === null && row.payload === null;
    if (commitSignal) eventSequenceRef.current.requireHistory(row.seq);
    if (eventSequenceRef.current.observe(row.seq)) refreshEventsRef.current?.();
    if (commitSignal) return;
    appendEvents([row]);
  });

  useEffect(() => {
    setLoadingMoreEvents(false);
    if (!visible) return;
    let cancelled = false;
    let timer: number | undefined;
    const abort = new AbortController();
    let reading = false;
    let pendingRefresh = false;
    let failedRead: { requested: boolean; catchup: boolean } | null = null;
    const read = async (requested = false, catchup = false) => {
      if (cancelled) return;
      if (reading) { if (catchup) pendingRefresh = true; return; }
      if (hasMoreEventsRef.current && !requested && !catchup) return;
      reading = true; pendingRefresh = false; setLoadingMoreEvents(true); setEventsError(null);
      window.clearTimeout(timer); timer = undefined;
      let failed = false;
      try {
        const cursor = catchup ? Math.max(eventsCatchupCursorRef.current, eventsReadCursorRef.current) : eventsReadCursorRef.current;
        const initializesHistory = eventsReadCursorRef.current === 0;
        const rows = await readTranscriptRequest(signal => heartbeatsApi.events(run.id, cursor, 1000, { signal }), abort.signal);
        if (cancelled) return;
        appendEvents(rows, !catchup || initializesHistory);
        const next = Math.max(cursor, rows.at(-1)?.seq ?? cursor);
        eventsCatchupCursorRef.current = Math.max(eventsCatchupCursorRef.current, next);
        eventSequenceRef.current.confirm(next);
        if (catchup) {
          if (rows.length === 1000 && next > cursor) pendingRefresh = true;
        }
        if (!catchup || initializesHistory) {
          eventsReadCursorRef.current = next;
          hasMoreEventsRef.current = rows.length === 1000 && next > cursor;
          setHasMoreEvents(hasMoreEventsRef.current);
        }
        failed = eventSequenceRef.current.needsCatchup;
        failedRead = null;
      } catch {
        failed = true; failedRead = { requested, catchup };
        if (!cancelled) setEventsError("Could not load events. Try again.");
      }
      if (cancelled) return;
      reading = false; setLoadingMoreEvents(false); setLoading(false);
      if (pendingRefresh) void read(false, true);
      else if (failed || (isLive && !stream.healthy && !hasMoreEventsRef.current)) {
        timer = window.setTimeout(() => void read(requested, catchup || eventSequenceRef.current.needsCatchup), 2000);
      }
    };
    refreshEventsRef.current = () => { void read(false, wasLiveRef.current); };
    loadMoreEventsRef.current = () => { void read(failedRead?.requested ?? true, failedRead?.catchup ?? false); };
    void read(false, wasLiveRef.current && (stream.healthy || eventsReadCursorRef.current > 0));
    return () => {
      cancelled = true; refreshEventsRef.current = null; loadMoreEventsRef.current = null;
      abort.abort(); if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [visible, run.id, run.companyId, run.status, stream.healthy, stream.epoch]);

  const getScrollContainer = useCallback((): ScrollContainer => {
    if (scrollContainerRef.current) return scrollContainerRef.current;
    const container = findScrollContainer(logEndRef.current);
    scrollContainerRef.current = container;
    return container;
  }, []);

  const updateFollowingState = useCallback(() => {
    const container = getScrollContainer();
    const metrics = readScrollMetrics(container);
    lastMetricsRef.current = metrics;
    const nearBottom = metrics.distanceFromBottom <= LIVE_SCROLL_BOTTOM_TOLERANCE_PX;
    isFollowingRef.current = nearBottom;
    setIsFollowing((prev) => (prev === nearBottom ? prev : nearBottom));
  }, [getScrollContainer]);

  useEffect(() => {
    scrollContainerRef.current = null;
    lastMetricsRef.current = {
      scrollHeight: 0,
      distanceFromBottom: Number.POSITIVE_INFINITY,
    };

    if (!isLive) {
      isFollowingRef.current = false;
      setIsFollowing(false);
      return;
    }

    updateFollowingState();
  }, [isLive, run.id, updateFollowingState]);

  useEffect(() => {
    if (!isLive) return;
    const container = getScrollContainer();
    updateFollowingState();

    if (container === window) {
      window.addEventListener("scroll", updateFollowingState, { passive: true });
    } else {
      container.addEventListener("scroll", updateFollowingState, { passive: true });
    }
    window.addEventListener("resize", updateFollowingState);
    return () => {
      if (container === window) {
        window.removeEventListener("scroll", updateFollowingState);
      } else {
        container.removeEventListener("scroll", updateFollowingState);
      }
      window.removeEventListener("resize", updateFollowingState);
    };
  }, [isLive, run.id, getScrollContainer, updateFollowingState]);

  // Auto-scroll only for live runs when following
  useEffect(() => {
    if (!isLive || !isFollowingRef.current) return;

    const container = getScrollContainer();
    const previous = lastMetricsRef.current;
    const current = readScrollMetrics(container);
    const growth = Math.max(0, current.scrollHeight - previous.scrollHeight);
    const expectedDistance = previous.distanceFromBottom + growth;
    const movedAwayBy = current.distanceFromBottom - expectedDistance;

    // If user moved away from bottom between updates, release auto-follow immediately.
    if (movedAwayBy > LIVE_SCROLL_BOTTOM_TOLERANCE_PX) {
      isFollowingRef.current = false;
      setIsFollowing(false);
      lastMetricsRef.current = current;
      return;
    }

    scrollToContainerBottom(container, "auto");
    const after = readScrollMetrics(container);
    lastMetricsRef.current = after;
    if (!isFollowingRef.current) {
      isFollowingRef.current = true;
    }
    setIsFollowing((prev) => (prev ? prev : true));
  }, [events.length, logLines.length, isLive, getScrollContainer]);

  // Reset only when the log source changes, never when visibility changes.
  useEffect(() => {
    pendingLogLineRef.current = "";
    logMergeRefs.current = { seenChunkKeys: new Set(), trimmedSeqFloorByRun: new Map() };
    seenProgressLogLineKeysRef.current = new Set();
    setLogLines([]);
    setLogOffset(0);
    setHasMoreLog(false);
    setLoadingMoreLog(false);
    setLogError(null);
  }, [run.id, run.logRef, setLogOffset]);

  useEffect(() => {
    if (!visible) return;
    if (!run.logRef && !shouldPollShellLog) { setLogLoading(false); return; }
    let cancelled = false;
    let timer: number | undefined;
    const abort = new AbortController();
    setLogLoading(true);
    let reading = false;
    let pendingRefresh = false;
    const load = async () => {
      if (cancelled || reading) return;
      reading = true; pendingRefresh = false;
      window.clearTimeout(timer); timer = undefined;
      let failed = false;
      try {
        for (;;) {
          const offset = logOffsetRef.current;
          const result = await readTranscriptRequest(signal => heartbeatsApi.log(run.id, offset, RUN_LOG_PAGE_BYTES, { signal }), abort.signal);
          if (cancelled) return;
          const binding = bindLog(result.logRef);
          if (binding === "stale") { failed = true; break; }
          if (binding === "changed" && offset !== 0) continue;
          appendLogContent(result.content, result.nextOffset === undefined);
          const next = result.nextOffset ?? offset + new TextEncoder().encode(result.content).byteLength;
          setLogOffset(next); setLogError(null);
          setHasMoreLog(!wasLiveRef.current && result.nextOffset !== undefined && !!result.content);
          if (!wasLiveRef.current || result.nextOffset === undefined || !result.content || next <= offset) break;
        }
        failed ||= logSequenceRef.current.needsCatchup;
      } catch (err) {
        if (cancelled) return;
        failed = shouldPollShellLog || !isRunLogUnavailable(err);
        if (!isRunLogUnavailable(err)) setLogError(err instanceof Error ? err.message : "Failed to load run log");
      }
      if (cancelled) return;
      reading = false;
      setLogLoading(false);
      if (pendingRefresh) void load();
      else if (failed || (shouldPollShellLog && !stream.healthy)) timer = window.setTimeout(() => void load(), 2000);
    };
    refreshLogRef.current = (force = false) => { if (force) pendingRefresh = true; void load(); };
    void load();
    return () => { cancelled = true; refreshLogRef.current = null; abort.abort(); if (timer !== undefined) window.clearTimeout(timer); };
  }, [visible, run.id, run.companyId, run.logRef, isLive ? null : run.logBytes, shouldPollShellLog, stream.healthy, stream.epoch]);

  async function loadMorePersistedLog() {
    if (loadingMoreLog || !hasMoreLog) return;
    setLoadingMoreLog(true);
    setLogError(null);
    try {
      const result = await heartbeatsApi.log(run.id, logOffset, RUN_LOG_PAGE_BYTES);
      appendLogContent(result.content, result.nextOffset === undefined);
      const next = result.nextOffset ?? logOffset + new TextEncoder().encode(result.content).byteLength;
      setLogOffset(next);
      setHasMoreLog(result.nextOffset !== undefined);
    } catch (err) {
      setLogError(err instanceof Error ? err.message : "Failed to load more run log");
    } finally {
      setLoadingMoreLog(false);
    }
  }

  const censorUsernameInLogs = useQuery({
    queryKey: queryKeys.instance.generalSettings,
    queryFn: () => instanceSettingsApi.getGeneral(),
  }).data?.censorUsernameInLogs === true;

  const adapterInvokePayload = useMemo(() => {
    const evt = events.find((e) => e.eventType === "adapter.invoke");
    return redactPathValue(asRecord(evt?.payload ?? null), censorUsernameInLogs);
  }, [censorUsernameInLogs, events]);

  // NOTE: adapter is NOT memoized because external adapters replace their
  // parseStdoutLine asynchronously after dynamic parser loading. Memoizing
  // on adapterType alone would stale the transcript with the fallback parser.
  // We subscribe to adapter registry changes to force transcript recomputation.
  const [parserTick, setParserTick] = useState(0);
  const adapter = getUIAdapter(adapterType);

  useEffect(() => {
    return onAdapterChange(() => setParserTick((t) => t + 1));
  }, []);

  const transcript = useMemo(
    () => buildTranscript(logLines, adapter, { censorUsernameInLogs }),
    [adapter, censorUsernameInLogs, logLines, parserTick],
  );
  const toolDecisionLookup = useQuery({
    queryKey: queryKeys.tools.runDecisions(run.companyId, run.id),
    queryFn: () => toolsApi.getRunDecisionLookup(run.companyId, run.id),
    enabled: Boolean(run.companyId && run.id),
    refetchInterval: isLive ? 3000 : false,
    staleTime: isLive ? 1000 : 30_000,
  });

  useEffect(() => {
    setTranscriptMode("nice");
  }, [run.id]);

  if (loading && logLoading) {
    return <p className="text-xs text-muted-foreground">Loading run logs...</p>;
  }

  if (events.length === 0 && logLines.length === 0 && !logError && !eventsError) {
    return <p className="text-xs text-muted-foreground">No log events.</p>;
  }

  const levelColors: Record<string, string> = {
    info: "text-foreground",
    warn: "text-yellow-600 dark:text-yellow-400",
    error: "text-red-600 dark:text-red-400",
  };

  const streamColors: Record<string, string> = {
    stdout: "text-foreground",
    stderr: "text-red-600 dark:text-red-300",
    system: "text-blue-600 dark:text-blue-300",
  };

  return (
    <div className="space-y-3">
      <WorkspaceOperationsSection
        operations={workspaceOperations}
        censorUsernameInLogs={censorUsernameInLogs}
      />
      {adapterInvokePayload && (
        <RunInvocationCard payload={adapterInvokePayload} censorUsernameInLogs={censorUsernameInLogs} />
      )}

      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-muted-foreground">
          Transcript ({transcript.length})
        </span>
        <div className="flex items-center gap-2">
          <div className="inline-flex rounded-lg border border-border/70 bg-background/70 p-0.5">
            {(["nice", "raw"] as const).map((mode) => (
              <button
                key={mode}
                type="button"
                className={cn(
                  "rounded-md px-2.5 py-1 text-(length:--text-micro) font-medium capitalize transition-colors",
                  transcriptMode === mode
                    ? "bg-accent text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground",
                )}
                onClick={() => setTranscriptMode(mode)}
              >
                {mode}
              </button>
            ))}
          </div>
          {isLive && !isFollowing && (
            <Button
              variant="ghost"
              size="xs"
              onClick={() => {
                const container = getScrollContainer();
                isFollowingRef.current = true;
                setIsFollowing(true);
                scrollToContainerBottom(container, "auto");
                lastMetricsRef.current = readScrollMetrics(container);
              }}
            >
              Jump to live
            </Button>
          )}
          {isLive && (
            <span className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
              <span className="relative flex h-2 w-2">
                <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
              </span>
              Live
            </span>
          )}
        </div>
      </div>
      <div className="max-h-(--sz-38rem) overflow-y-auto rounded-2xl border border-border/70 bg-background/40 p-3 sm:p-4">
        <RunTranscriptView
          entries={transcript}
          toolDecisions={toolDecisionLookup.data?.decisions ?? []}
          mode={transcriptMode}
          streaming={isLive}
          limit={isLive ? LIVE_TRANSCRIPT_RENDER_LIMIT : undefined}
          emptyMessage={run.logRef ? "Waiting for transcript..." : "No persisted transcript for this run."}
        />
        {hasMoreLog && (
          <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-border/60 pt-3">
            <Button
              type="button"
              variant="outline"
              size="xs"
              onClick={loadMorePersistedLog}
              disabled={loadingMoreLog}
            >
              {loadingMoreLog ? "Loading..." : "Load more log"}
            </Button>
            <span className="text-xs text-muted-foreground">
              Showing the first {Math.round(logOffset / 1024).toLocaleString("en-US")} KB
              {typeof run.logBytes === "number" && run.logBytes > 0
                ? ` of ${Math.round(run.logBytes / 1024).toLocaleString("en-US")} KB`
                : ""}
            </span>
          </div>
        )}
        {logError && (
          <div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/[0.06] px-3 py-2 text-xs text-red-700 dark:text-red-300">
            {logError}
          </div>
        )}
        <div ref={logEndRef} />
      </div>

      {(run.status === "failed" || run.status === "timed_out") && (
        <div className="rounded-lg border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/20 p-3 space-y-2">
          <div className="text-xs font-medium text-red-700 dark:text-red-300">Failure details</div>
          {run.error && (
            <div className="text-xs text-red-600 dark:text-red-200">
              <span className="text-red-700 dark:text-red-300">Error: </span>
              {redactPathText(run.error, censorUsernameInLogs)}
            </div>
          )}
          {run.stderrExcerpt && run.stderrExcerpt.trim() && (
            <div>
              <div className="text-xs text-red-700 dark:text-red-300 mb-1">stderr excerpt</div>
              <pre className="bg-red-50 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap text-red-800 dark:text-red-100">
                {redactPathText(run.stderrExcerpt, censorUsernameInLogs)}
              </pre>
            </div>
          )}
          {run.resultJson && (
            <div>
              <div className="text-xs text-red-700 dark:text-red-300 mb-1">adapter result JSON</div>
              <pre className="bg-red-50 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap text-red-800 dark:text-red-100">
                {JSON.stringify(redactPathValue(run.resultJson, censorUsernameInLogs), null, 2)}
              </pre>
            </div>
          )}
          {run.stdoutExcerpt && run.stdoutExcerpt.trim() && !run.resultJson && (
            <div>
              <div className="text-xs text-red-700 dark:text-red-300 mb-1">stdout excerpt</div>
              <pre className="bg-red-50 dark:bg-neutral-950 rounded-md p-2 text-xs overflow-x-auto whitespace-pre-wrap text-red-800 dark:text-red-100">
                {redactPathText(run.stdoutExcerpt, censorUsernameInLogs)}
              </pre>
            </div>
          )}
        </div>
      )}

      {(events.length > 0 || eventsError) && (
        <div>
          <div className="mb-2 text-xs font-medium text-muted-foreground">Events ({events.length})</div>
          {eventsError && <p className="text-sm text-destructive">{eventsError}</p>}
          {(hasMoreEvents || eventsError) && (
            <Button variant="outline" size="sm" disabled={loadingMoreEvents} onClick={() => loadMoreEventsRef.current?.()}>
              {loadingMoreEvents ? "Loading..." : eventsError ? "Retry events" : "Load more events"}
            </Button>
          )}
          <div className="bg-neutral-100 dark:bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5">
            {events.map((evt) => {
              const color = evt.color
                ?? (evt.level ? levelColors[evt.level] : null)
                ?? (evt.stream ? streamColors[evt.stream] : null)
                ?? "text-foreground";

              return (
                <div key={`${evt.runId}:${evt.seq}`} className="flex gap-2">
                  <span className="text-neutral-400 dark:text-neutral-600 shrink-0 select-none w-16">
                    {new Date(evt.createdAt).toLocaleTimeString("en-US", { hour12: false })}
                  </span>
                  <span className={cn("shrink-0 w-14", evt.stream ? (streamColors[evt.stream] ?? "text-neutral-500") : "text-neutral-500")}>
                    {evt.stream ? `[${evt.stream}]` : ""}
                  </span>
                  <span className={cn("break-all", color)}>
                    {evt.message
                      ? redactPathText(evt.message, censorUsernameInLogs)
                      : evt.payload
                        ? JSON.stringify(redactPathValue(evt.payload, censorUsernameInLogs))
                        : ""}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---- Keys Tab ---- */

export function KeysTab({ agentId, companyId }: { agentId: string; companyId?: string }) {
  const queryClient = useQueryClient();
  const { pushToast } = useToastActions();
  const [newKeyName, setNewKeyName] = useState("");
  const [newToken, setNewToken] = useState<string | null>(null);
  const [tokenVisible, setTokenVisible] = useState(false);
  const [copied, setCopied] = useState(false);

  const { data: keys, isLoading } = useQuery({
    queryKey: queryKeys.agents.keys(agentId),
    queryFn: () => agentsApi.listKeys(agentId, companyId),
  });

  const createKey = useMutation({
    mutationFn: () => agentsApi.createKey(agentId, newKeyName.trim() || "Default", companyId),
    onSuccess: (data) => {
      setNewToken(data.token);
      setTokenVisible(true);
      setNewKeyName("");
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.keys(agentId) });
    },
  });

  const revokeKey = useMutation({
    mutationFn: (keyId: string) => agentsApi.revokeKey(agentId, keyId, companyId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.keys(agentId) });
    },
  });

  function copyToken() {
    if (!newToken) return;
    void copyTextToClipboard(newToken)
      .then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      })
      .catch(() => {
        pushToast({ title: "Copy failed", body: "Clipboard access is unavailable.", tone: "error" });
      });
  }

  const activeKeys = (keys ?? []).filter((k: AgentKey) => !k.revokedAt);
  const revokedKeys = (keys ?? []).filter((k: AgentKey) => k.revokedAt);

  return (
    <div className="space-y-6">
      {/* New token banner */}
      {newToken && (
        <div className="border border-yellow-300 dark:border-yellow-600/40 bg-yellow-50 dark:bg-yellow-500/5 rounded-lg p-4 space-y-2">
          <p className="text-sm font-medium text-yellow-700 dark:text-yellow-400">
            API key created — copy it now, it will not be shown again.
          </p>
          <div className="flex items-center gap-2">
            <code className="flex-1 bg-neutral-100 dark:bg-neutral-950 rounded px-3 py-1.5 text-xs font-mono text-green-700 dark:text-green-300 truncate">
              {tokenVisible ? newToken : newToken.replace(/./g, "•")}
            </code>
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={() => setTokenVisible((v) => !v)}
              title={tokenVisible ? "Hide" : "Show"}
            >
              {tokenVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={copyToken}
              title="Copy"
            >
              <Copy className="h-3.5 w-3.5" />
            </Button>
            {copied && <span className="text-xs text-green-400">Copied!</span>}
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="text-muted-foreground text-xs"
            onClick={() => setNewToken(null)}
          >
            Dismiss
          </Button>
        </div>
      )}

      {/* Create new key */}
      <div className="border border-border rounded-lg p-4 space-y-3">
        <h3 className="text-xs font-medium text-muted-foreground flex items-center gap-2">
          <Key className="h-3.5 w-3.5" />
          Create API Key
        </h3>
        <p className="text-xs text-muted-foreground">
          API keys allow this agent to authenticate calls to the Paperclip server.
        </p>
        <div className="flex items-center gap-2">
          <Input
            placeholder="Key name (e.g. production)"
            value={newKeyName}
            onChange={(e) => setNewKeyName(e.target.value)}
            className="h-8 text-sm"
            onKeyDown={(e) => {
              if (e.key === "Enter") createKey.mutate();
            }}
          />
          <Button
            size="sm"
            onClick={() => createKey.mutate()}
            disabled={createKey.isPending}
          >
            <Plus className="h-3.5 w-3.5 mr-1" />
            Create
          </Button>
        </div>
      </div>

      {/* Active keys */}
      {isLoading && <p className="text-sm text-muted-foreground">Loading keys...</p>}

      {!isLoading && activeKeys.length === 0 && !newToken && (
        <p className="text-sm text-muted-foreground">No active API keys.</p>
      )}

      {activeKeys.length > 0 && (
        <div>
          <h3 className="text-xs font-medium text-muted-foreground mb-2">
            Active Keys
          </h3>
          <div className="border border-border rounded-lg divide-y divide-border">
            {activeKeys.map((key: AgentKey) => (
              <div key={key.id} className="flex items-center justify-between px-4 py-2.5">
                <div>
                  <span className="text-sm font-medium">{key.name}</span>
                  <span className="text-xs text-muted-foreground ml-3">
                    Created {formatDate(key.createdAt)}
                  </span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-destructive hover:text-destructive text-xs"
                  onClick={() => revokeKey.mutate(key.id)}
                  disabled={revokeKey.isPending}
                >
                  Revoke
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Revoked keys */}
      {revokedKeys.length > 0 && (
        <div>
          <h3 className="text-xs font-medium text-muted-foreground mb-2">
            Revoked Keys
          </h3>
          <div className="border border-border rounded-lg divide-y divide-border opacity-50">
            {revokedKeys.map((key: AgentKey) => (
              <div key={key.id} className="flex items-center justify-between px-4 py-2.5">
                <div>
                  <span className="text-sm line-through">{key.name}</span>
                  <span className="text-xs text-muted-foreground ml-3">
                    Revoked {key.revokedAt ? formatDate(key.revokedAt) : ""}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}