feat(agent): implement phase 2 runtime and inline clarification

components/canvas/nodes/agent-output-node.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+
+import BaseNodeWrapper from "./base-node-wrapper";
+
+type AgentOutputNodeData = {
+  title?: string;
+  channel?: string;
+  outputType?: string;
+  body?: string;
+  _status?: string;
+  _statusMessage?: string;
+};
+
+type AgentOutputNodeType = Node<AgentOutputNodeData, "agent-output">;
+
+export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutputNodeType>) {
+  const nodeData = data as AgentOutputNodeData;
+
+  return (
+    <BaseNodeWrapper
+      nodeType="agent-output"
+      selected={selected}
+      status={nodeData._status}
+      statusMessage={nodeData._statusMessage}
+      className="min-w-[300px] border-amber-500/30"
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="agent-output-in"
+        className="!h-3 !w-3 !bg-amber-500 !border-2 !border-background"
+      />
+
+      <div className="flex h-full flex-col gap-3 p-3">
+        <header className="space-y-1">
+          <p className="truncate text-xs font-semibold text-foreground" title={nodeData.title}>
+            {nodeData.title ?? "Agent output"}
+          </p>
+        </header>
+
+        <section className="space-y-1">
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Channel
+          </p>
+          <p className="truncate text-xs text-foreground/90" title={nodeData.channel}>
+            {nodeData.channel ?? "-"}
+          </p>
+        </section>
+
+        <section className="space-y-1">
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Output Type
+          </p>
+          <p className="truncate text-xs text-foreground/90" title={nodeData.outputType}>
+            {nodeData.outputType ?? "-"}
+          </p>
+        </section>
+
+        <section className="space-y-1">
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Body
+          </p>
+          <p className="line-clamp-6 whitespace-pre-wrap text-xs text-foreground/90">
+            {nodeData.body ?? ""}
+          </p>
+        </section>
+      </div>
+    </BaseNodeWrapper>
+  );
+}