@allbluecn/web-app 0.12.0 → 0.12.3

package/src/components/harness/harness-workbench-page.tsx

@@ -0,0 +1,467 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Link as RouterLink, useNavigate } from '@tanstack/react-router'
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Bot, AlertCircle, ListTodo, Puzzle } from 'lucide-react'
+import AIChatHistory from '@/components/harness/ai-chat-history'
+import type { Conversation } from '@/components/harness/ai-chat-history'
+import { useHarnessChat } from '@/components/harness/chat-ui'
+import { cancelRunFn } from '@/server/serverFns/harness/cancel-run'
+import {
+  attachLatestCitationsToMessageId,
+  clearHarnessCitations,
+  clearHarnessChatSlots,
+  registerHarnessChatSlots,
+  setLatestCitations,
+} from '@/components/harness/harness-chat-slots'
+import { AgentPresetPicker } from '@/components/harness/agent-preset-picker'
+import { Button } from '@/components/ui/button'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { useSession } from '@/lib/auth/auth-client'
+import { listConversationsFn, createConversationFn, updateConversationFn, deleteConversationFn, forkConversationFn } from '@/server/serverFns/chat/conversations'
+import { listAgentsFn } from '@/server/serverFns/agents/agent-crud'
+import { useSelectedModel } from '@/lib/ai/use-selected-model'
+import { useSearchCapability } from '@/lib/ai/use-search-capability'
+import { useCodeModeReadiness } from '@/lib/ai/use-code-mode-readiness'
+import {
+  consumePendingWorkspaceMessage,
+  consumeHandoffContext,
+  type HandoffConversation,
+} from '@/lib/ai/chat-handoff'
+import { resolveMountEffectPath } from '@/components/harness/harness-workbench-mount'
+import { m } from '@/paraglide/messages.js'
+import type { UIMessage } from '@tanstack/ai-react'
+import { WorkbenchShell } from '@/components/harness/workbench/workbench-shell'
+import { HarnessComposer } from '@/components/harness/composer/harness-composer'
+import { DockPanelContainer } from '@/components/harness/dock/dock-panel-container'
+import { decideSubmit, type BusyAction } from '@/components/harness/composer/submit-machine'
+import { WorkspaceProvider, useWorkspace } from '@/components/harness/code/workspace-context'
+import type { WorkspaceSource } from '@/components/harness/code/workspace-context'
+import { CodeWorkspaceSidebar } from '@/components/harness/code/code-workspace-sidebar'
+import { dockRegistry } from '@/components/harness/dock/dock-registry'
+
+export interface HarnessWorkbenchPageProps {
+  initialThreadId?: string
+  initialMessages?: UIMessage[]
+}
+
+export default function HarnessWorkbenchPage({ initialThreadId, initialMessages }: HarnessWorkbenchPageProps) {
+  const { data: session } = useSession()
+  const hasAiKey = session?.user?.hasAiKey
+  const navigate = useNavigate()
+  const [conversations, setConversations] = useState<Conversation[]>([])
+  const [activeConversationId, setActiveConversationId] = useState<string | null>(initialThreadId ?? null)
+  const [selectedModel, setSelectedModel] = useSelectedModel()
+  const [webSearchEnabled, setWebSearchEnabled] = useState(false)
+  const [codeModeEnabled, setCodeModeEnabled] = useState(false)
+  const [selectedAgentId, setSelectedAgentId] = useState<string | undefined>()
+  const [confirmSwitchOpen, setConfirmSwitchOpen] = useState(false)
+  const confirmSwitchPendingRef = useRef<string | undefined>(undefined)
+  const [dockOpen, setDockOpen] = useState(false)
+  const [mediaRoute, setMediaRoute] = useState<"code" | "spec">("code")
+  const [busyPreference, setBusyPreference] = useState<BusyAction>("queue")
+  const [sandboxPolicy, setSandboxPolicy] = useState<"readonly" | "workspace-write" | "full">("readonly")
+  const [handoffContext, setHandoffContext] = useState<{ board: string; entityId: string } | null>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { workspace } = useWorkspace()
+
+  const { data: agents } = useQuery({
+    queryKey: ['agents'],
+    queryFn: () => listAgentsFn(),
+    staleTime: 30_000,
+    enabled: initialThreadId == null,
+  })
+
+  const selectedAgent = agents?.find((a) => a.id === selectedAgentId)
+  const effectiveModel = selectedModel ?? selectedAgent?.model ?? undefined
+  const searchCapability = useSearchCapability(effectiveModel)
+  const codeModeReadiness = useCodeModeReadiness()
+  const adapterKind = searchCapability.adapterKind
+
+  const chat = useHarnessChat({
+    threadId: activeConversationId ?? initialThreadId ?? undefined,
+    initialMessages,
+    forwardedProps: {
+      webSearchEnabled,
+      codeModeEnabled,
+      model: effectiveModel,
+      provider: adapterKind,
+      agentId: selectedAgentId,
+      promptKey: 'chat.default',
+      sandbox: sandboxPolicy !== "readonly",
+      workspaceId: workspace?.type === "cloud" ? workspace.id : undefined,
+      workspaceContext: workspace?.type === "github"
+        ? { type: "github", owner: workspace.owner, repo: workspace.repo, defaultBranch: workspace.branch }
+        : workspace?.type === "local-fsap"
+        ? { type: "local", path: workspace.dirHandle.name }
+        : workspace?.type === "cloud"
+        ? { type: "cloud", workspaceId: workspace.id }
+        : undefined,
+    },
+  })
+
+  const activeIdRef = useRef(activeConversationId)
+  activeIdRef.current = activeConversationId
+  const loadingRef = useRef(false)
+
+  useEffect(() => {
+    registerHarnessChatSlots({
+      byokProvider: () => adapterKind,
+      onCustomEvent: (eventType, data) => {
+        if (eventType === 'citations') {
+          setLatestCitations(data as any)
+        }
+      },
+    })
+    return () => clearHarnessChatSlots()
+  }, [adapterKind])
+
+  useEffect(() => {
+    if (loadingRef.current && !chat.isLoading && chat.messages.length > 0) {
+      if (!chat.error) {
+        const last = chat.messages[chat.messages.length - 1]
+        if (last.role === 'assistant') {
+          attachLatestCitationsToMessageId(last.id)
+        }
+      }
+    }
+    loadingRef.current = chat.isLoading
+  }, [chat.isLoading, chat.messages, chat.error])
+
+  useEffect(() => {
+    if (chat.error) {
+      setLatestCitations(undefined)
+    }
+  }, [chat.error])
+
+  useEffect(() => {
+    return () => clearHarnessCitations()
+  }, [])
+
+  useEffect(() => {
+    if (initialThreadId != null) return
+    void listConversationsFn().then(setConversations)
+  }, [initialThreadId])
+
+  const mediaPanelRef = useRef({ mediaRoute, threadId: activeConversationId })
+  mediaPanelRef.current = { mediaRoute, threadId: activeConversationId }
+
+  useEffect(() => {
+    dockRegistry.registerPanel({
+      id: 'code-workspace',
+      title: m.harness_dock_codeWorkspace(),
+      render: () => <CodeWorkspaceSidebar mediaRoute={mediaPanelRef.current.mediaRoute} onMediaRouteChange={setMediaRoute} threadId={mediaPanelRef.current.threadId ?? undefined} />,
+    })
+    return () => {
+      // 清理：关闭所有 code-workspace 相关 tab
+      const state = dockRegistry.getState()
+      for (const tab of state.tabs) {
+        if (tab.id.startsWith('code-workspace') || tab.id === 'code-workspace') {
+          dockRegistry.closeTab(tab.id)
+        }
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    const applyConv = (conv: Conversation, pending: string) => {
+      setConversations((prev) =>
+        prev.find((c) => c.id === conv.id) ? prev : [conv, ...prev],
+      )
+      setActiveConversationId(conv.id)
+      activeIdRef.current = conv.id
+      clearHarnessCitations()
+      setLatestCitations(undefined)
+      chat.clear()
+      void chat.sendMessage(pending)
+    }
+
+  void (async () => {
+    try {
+      const ctx = consumeHandoffContext()
+      const pending = consumePendingWorkspaceMessage()
+      const path = resolveMountEffectPath(ctx, pending)
+      if (path === "prefill-only" || path === "both") {
+        setHandoffContext(ctx)
+      }
+      if (pending?.trim()) {
+        const conv = await createConversationFn({ data: { agentId: selectedAgentId } }) as Conversation & HandoffConversation
+        if (cancelled) return
+        applyConv(conv, pending)
+      }
+    } catch (e) {
+      console.error('[chat] Failed to process pending workspace message:', e instanceof Error ? e.message : String(e))
+    }
+  })()
+
+    return () => {
+      cancelled = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleNewConversation = useCallback(() => {
+    clearHarnessCitations()
+    setLatestCitations(undefined)
+    setActiveConversationId(null)
+    activeIdRef.current = null
+    chat.clear()
+    void createConversationFn({ data: { agentId: selectedAgentId } }).then((conv) => {
+      setConversations((prev) => [conv, ...prev])
+      navigate({ to: '/harness/$threadId', params: { threadId: conv.id } })
+    })
+  }, [chat, navigate, selectedAgentId])
+
+  const handleAgentChange = useCallback((newAgentId: string | undefined) => {
+    if (newAgentId === selectedAgentId) return
+    if (!selectedAgentId) {
+      setSelectedAgentId(newAgentId)
+      return
+    }
+    confirmSwitchPendingRef.current = newAgentId
+    setConfirmSwitchOpen(true)
+  }, [selectedAgentId])
+
+  const handleConfirmSwitch = useCallback(() => {
+    const pendingId = confirmSwitchPendingRef.current
+    setSelectedAgentId(pendingId)
+    chat.clear()
+    confirmSwitchPendingRef.current = undefined
+    setConfirmSwitchOpen(false)
+  }, [chat])
+
+  const handleSelect = useCallback((id: string) => {
+    clearHarnessCitations()
+    setLatestCitations(undefined)
+    navigate({ to: '/harness/$threadId', params: { threadId: id } })
+  }, [navigate])
+
+  const handleDelete = useCallback(async (id: string) => {
+    await deleteConversationFn({ data: { id } })
+    setConversations(prev => prev.filter(c => c.id !== id))
+    if (activeConversationId === id) {
+      setActiveConversationId(null)
+      clearHarnessCitations()
+      chat.clear()
+    }
+  }, [activeConversationId, chat])
+
+  const handleArchive = useCallback(async (id: string) => {
+    await updateConversationFn({ data: { id, isArchived: true } })
+    setConversations(prev => prev.map(c =>
+      c.id === id ? { ...c, isArchived: true } : c
+    ))
+  }, [])
+
+  const handleUnarchive = useCallback(async (id: string) => {
+    await updateConversationFn({ data: { id, isArchived: false } })
+    setConversations(prev => prev.map(c =>
+      c.id === id ? { ...c, isArchived: false } : c
+    ))
+  }, [])
+
+  const handleRename = useCallback(async (id: string, title: string) => {
+    await updateConversationFn({ data: { id, title } })
+    setConversations(prev => prev.map(c =>
+      c.id === id ? { ...c, title } : c
+    ))
+  }, [])
+
+  const handleFork = useCallback(async (id: string) => {
+    const forked = await forkConversationFn({ data: { threadId: id } })
+    setConversations(prev => [forked, ...prev])
+    navigate({ to: '/harness/$threadId', params: { threadId: forked.id } })
+  }, [navigate])
+
+  const handleSend = useCallback(async (val: string, opts?: { whenBusy?: "queue" | "interrupt"; knowledgeBaseIds?: string[]; attachments?: Array<{ type: "image"; source: { type: "data"; value: string; mimeType: string } }> }) => {
+    setLatestCitations(undefined)
+    if (!activeIdRef.current) {
+      try {
+        const conv = await createConversationFn({ data: { agentId: selectedAgentId } })
+        setConversations(prev => [conv, ...prev])
+        setActiveConversationId(conv.id)
+        activeIdRef.current = conv.id
+        clearHarnessCitations()
+      } catch (e) {
+        console.error('Failed to create conversation:', e)
+        return
+      }
+    }
+    // knowledgeBaseIds 通过 body 传递到 forwardedProps
+    const sendOptions = opts ? {
+      whenBusy: opts.whenBusy,
+      body: opts.knowledgeBaseIds ? { knowledgeBaseIds: opts.knowledgeBaseIds } : undefined,
+    } : undefined
+    if (opts?.attachments && opts.attachments.length > 0) {
+      // 多模态消息：文本 + 图片 parts
+      const content = {
+        content: [
+          { type: 'text' as const, content: val },
+          ...opts.attachments
+        ]
+      }
+      void chat.sendMessage(content, sendOptions)
+    } else {
+      void chat.sendMessage(val, sendOptions)
+    }
+  }, [chat, selectedAgentId])
+
+  const handleStop = useCallback(() => {
+    chat.stop()
+    const threadId = activeIdRef.current
+    if (!threadId) return
+    void cancelRunFn({ data: { threadId, runId: chat.runId ?? undefined } }).catch(() => {})
+  }, [chat])
+
+  const activeConversation = conversations.find(c => c.id === activeConversationId)
+
+  const centerContent = (
+    <div className="flex h-full flex-col">
+      <div className="flex shrink-0 items-center gap-2 border-b px-4 py-3">
+        <AgentPresetPicker
+          value={selectedAgentId}
+          onValueChange={handleAgentChange}
+          agents={agents ?? []}
+        />
+        <h2 className="truncate font-semibold">{activeConversation?.title ?? m.chat_newConversation()}</h2>
+        <div className="ml-auto flex items-center gap-1">
+          <Button
+            size="icon"
+            variant="ghost"
+            aria-label={m.harness_dock_codeWorkspace()}
+            onClick={() => {
+              if (!dockOpen) dockRegistry.openTab({ id: "code-workspace", title: m.harness_dock_codeWorkspace() })
+              setDockOpen(prev => !prev)
+            }}
+            className="size-8 shrink-0"
+          >
+            <ListTodo className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {!hasAiKey && (
+        <div className="mx-6 mt-3 flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+          <AlertCircle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
+            {m.chat_aiKeyRequired()}
+          </p>
+          <Button render={<RouterLink to="/settings/ai" />} size="sm" variant="outline" className="shrink-0 h-7 text-xs" nativeButton={false}>{m.chat_goToSettings()}</Button>
+        </div>
+      )}
+
+      {selectedAgent && chat.messages.length === 0 && (
+        <div className="mx-6 mt-4 flex flex-col items-center gap-4 rounded-lg border border-dashed p-6 text-center">
+          <span className="flex size-12 items-center justify-center rounded-full bg-muted text-2xl">
+            {selectedAgent.avatarEmoji || '🤖'}
+          </span>
+          <h3 className="text-lg font-semibold">{selectedAgent.name}</h3>
+          {selectedAgent.greeting && (
+            <p className="max-w-md text-sm text-muted-foreground">
+              {selectedAgent.greeting}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+        <chat.AppChat />
+      </div>
+
+      <div className="shrink-0 border-t p-3">
+        <div className="mx-auto w-full max-w-4xl xl:max-w-3xl 2xl:max-w-2xl">
+          <HarnessComposer
+            mediaRoute={mediaRoute}
+            onMediaRouteChange={setMediaRoute}
+            threadId={activeConversationId}
+            isRunning={chat.isLoading}
+            hasAiKey={!!hasAiKey}
+            isLoading={chat.isLoading}
+            busyPreference={busyPreference}
+            onBusyPreferenceChange={setBusyPreference}
+            onSend={handleSend}
+            onStop={handleStop}
+            messages={chat.messages}
+            model={effectiveModel}
+            onModelChange={setSelectedModel}
+            scrollContainerRef={scrollRef}
+            knowledgeBaseIds={selectedAgent?.knowledgeBaseIds}
+            interrupts={chat.interrupts}
+            sandboxPolicy={sandboxPolicy}
+            onSandboxPolicyChange={setSandboxPolicy}
+            handoffContext={handoffContext}
+          />
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <WorkspaceProvider>
+    <>
+    <WorkbenchShell
+      sidebar={
+        <AIChatHistory
+          activeConversationId={activeConversationId ?? undefined}
+          conversations={conversations}
+          onDelete={handleDelete}
+          onNewConversation={handleNewConversation}
+          onRename={handleRename}
+          onArchive={handleArchive}
+          onUnarchive={handleUnarchive}
+          onFork={handleFork}
+          onSelect={handleSelect}
+          className="h-full max-w-sm shrink-0"
+        />
+      }
+      center={centerContent}
+      rail={dockOpen ? <DockPanelContainer /> : null}
+    />
+
+    <AlertDialog open={confirmSwitchOpen} onOpenChange={setConfirmSwitchOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{m.chat_agentSelector_switchConfirmTitle()}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {m.chat_agentSelector_switchConfirmDesc()}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{m.chat_actions_cancel()}</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirmSwitch}>
+            {m.chat_agentSelector_switchConfirm()}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+    </>
+    </WorkspaceProvider>
+  )
+}

package/src/components/harness/image-lightbox.tsx

@@ -0,0 +1,51 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client"
+
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import { X } from "lucide-react"
+
+export interface ImageLightboxProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  src: string
+  alt?: string
+}
+
+export function ImageLightbox({ open, onOpenChange, src, alt }: ImageLightboxProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogTitle className="sr-only">{alt ?? "图片预览"}</DialogTitle>
+        <div className="relative aspect-auto">
+          <img
+            src={src}
+            alt={alt}
+            className="max-h-[70vh] w-full rounded-lg object-contain"
+          />
+          <button
+            onClick={() => onOpenChange(false)}
+            className="absolute right-2 top-2 rounded-full bg-background/80 p-1 hover:bg-muted"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/harness/interrupt-approval.tsx

@@ -0,0 +1,179 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react"
+import type { UseChatReturn } from "@tanstack/ai-react"
+import { AlertTriangle, Check, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { m } from "@/paraglide/messages.js"
+
+type ToolApprovalInterrupt = {
+  id: string
+  status: "pending" | "validating" | "staged" | "submitting" | "error"
+  toolName: string
+  originalArgs: unknown
+  resolveInterrupt: (approved: boolean, ...args: unknown[]) => void
+}
+
+function isToolApprovalInterrupt(
+  i: unknown,
+): i is ToolApprovalInterrupt {
+  return typeof i === "object" && i !== null && (i as { kind?: unknown }).kind === "tool-approval"
+}
+
+export function InterruptApproval({
+  interrupts,
+}: {
+  interrupts: NonNullable<UseChatReturn["interrupts"]>
+}) {
+  const pendingApprovals: ToolApprovalInterrupt[] = []
+  for (const i of interrupts) {
+    if (isToolApprovalInterrupt(i)) {
+      pendingApprovals.push(i)
+    }
+  }
+  const actionable = pendingApprovals.filter(
+    (i) => i.status === "pending" || i.status === "error",
+  )
+  if (actionable.length === 0) return null
+
+  return (
+    <div className="space-y-2 mb-2">
+      {actionable.map((interrupt) => (
+        <ApprovalCard key={interrupt.id} interrupt={interrupt} />
+      ))}
+      {actionable.length >= 2 && (
+        <div className="flex gap-2 pt-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-amber-700 dark:text-amber-300"
+            onClick={() => {
+              for (const i of actionable) {
+                if (i.status === "pending") i.resolveInterrupt(true)
+              }
+            }}
+          >
+            <Check className="size-3.5 mr-1" />
+            {m.harness_approval_approveAll()}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-amber-700 dark:text-amber-300"
+            onClick={() => {
+              for (const i of actionable) {
+                if (i.status === "pending")
+                  i.resolveInterrupt(false, { reason: "" })
+              }
+            }}
+          >
+            <X className="size-3.5 mr-1" />
+            {m.harness_approval_rejectAll()}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ApprovalCard({
+  interrupt,
+}: {
+  interrupt: ToolApprovalInterrupt
+}) {
+  const [rejecting, setRejecting] = useState(false)
+  const [reason, setReason] = useState("")
+
+  let displayArgs: string | null = null
+  try {
+    displayArgs = JSON.stringify(interrupt.originalArgs, null, 2)
+  } catch {
+    displayArgs = null
+  }
+
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+      <AlertTriangle className="size-5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
+      <div className="flex-1 min-w-0">
+        <p className="font-medium text-amber-900 dark:text-amber-100">
+          {m.chat_interrupt_title()}
+        </p>
+        <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
+          {m.chat_interrupt_descriptionStart()}{" "}
+          <code className="px-1 py-0.5 text-xs rounded bg-amber-200/50 dark:bg-amber-800/50">
+            {interrupt.toolName}
+          </code>{" "}
+          {m.chat_interrupt_descriptionEnd()}
+        </p>
+        {displayArgs && (
+          <pre className="mt-2 text-xs bg-white dark:bg-slate-900 p-2 rounded border border-amber-200 dark:border-amber-800 overflow-x-auto max-w-full">
+            {displayArgs}
+          </pre>
+        )}
+        {rejecting && (
+          <Textarea
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            placeholder={m.harness_approval_rejectReasonPlaceholder()}
+            className="mt-2 text-sm bg-white dark:bg-slate-900"
+            rows={2}
+            autoFocus
+          />
+        )}
+        <div className="flex gap-2 mt-3">
+          <Button
+            size="sm"
+            onClick={() => interrupt.resolveInterrupt(true)}
+          >
+            <Check className="size-4 mr-1" />
+            {m.chat_interrupt_approve()}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              if (rejecting) {
+                interrupt.resolveInterrupt(false, { reason })
+              } else {
+                setRejecting(true)
+              }
+            }}
+          >
+            <X className="size-4 mr-1" />
+            {rejecting
+              ? m.harness_approval_confirmReject()
+              : m.chat_interrupt_reject()}
+          </Button>
+          {rejecting && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                setRejecting(false)
+                setReason("")
+              }}
+            >
+              {m.harness_approval_cancelReject()}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}