Merge refactored code

src/components/ChatPane/ProposalCard.tsx

@@ -0,0 +1,44 @@
+import type { ProposalPart } from "../../types/chat";
+
+export function ProposalCard({
+  part,
+  onLaunch,
+  onDismiss,
+}: {
+  part: ProposalPart;
+  onLaunch: () => void;
+  onDismiss: () => void;
+}) {
+  if (part.dismissed) return null;
+
+  return (
+    <div className={`chat-proposal-card${part.launched ? " chat-proposal-card--launched" : ""}`}>
+      <div className="chat-proposal-header">Agent proposal</div>
+      <div className="chat-proposal-field">
+        <span className="chat-proposal-label">Agent</span>
+        <span className="chat-proposal-value">
+          {part.agent}{part.model ? <span className="chat-proposal-model"> · {part.model}</span> : null}
+        </span>
+      </div>
+      <div className="chat-proposal-field">
+        <span className="chat-proposal-label">Task</span>
+        <span className="chat-proposal-value">{part.task}</span>
+      </div>
+      <div className="chat-proposal-reason">{part.reason}</div>
+      <div className="chat-proposal-actions">
+        <button
+          className="chat-proposal-btn chat-proposal-btn--launch"
+          onClick={onLaunch}
+          disabled={part.launched}
+        >
+          {part.launched ? "Launched" : "Launch agent"}
+        </button>
+        {!part.launched && (
+          <button className="chat-proposal-btn chat-proposal-btn--dismiss" onClick={onDismiss}>
+            Dismiss
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ChatPane/ToolCallCard.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { argsPreview, resultSummary } from "../../lib/chatTools";
+import { getToolIcon, getToolLabel } from "../../lib/chatModels";
+import type { ToolCallPart } from "../../types/chat";
+
+export function ToolCallCard({ part }: { part: ToolCallPart }) {
+  const [expanded, setExpanded] = useState(false);
+  const preview = argsPreview(part.toolName, part.args);
+  const Icon = getToolIcon(part.toolName);
+  const label = getToolLabel(part.toolName);
+  const canExpand = part.status === "complete" && part.result != null;
+  const dotState = part.status === "running" ? "running" : "complete";
+
+  return (
+    <div className="chat-step">
+      <button
+        className={`chat-step-trigger${canExpand ? " chat-step-trigger--clickable" : ""}`}
+        onClick={() => canExpand && setExpanded(e => !e)}
+        disabled={!canExpand}
+      >
+        <span className={`chat-step-dot chat-step-dot--${dotState}`} />
+        <span className="chat-step-icon">
+          <Icon size={13} />
+        </span>
+        <span className="chat-step-name">{label}</span>
+        {preview && <span className="chat-step-summary">{preview}</span>}
+        {canExpand && (
+          <ChevronDown
+            size={11}
+            className={`chat-step-chevron${expanded ? " chat-step-chevron--open" : ""}`}
+          />
+        )}
+      </button>
+      <div className={`chat-step-detail${expanded ? " chat-step-detail--open" : ""}`}>
+        <div className="chat-step-detail-overflow">
+          <div className="chat-step-detail-inner">
+            <pre>{resultSummary(part.result)}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}