cr

agent/uis/open-code/plan/index.tsx

@@ -2,19 +2,35 @@ import "./index.css";
 
 interface PlanProps {
   toolCallId: string;
-  plan: string[];
+  executedPlans: string[];
+  remainingPlans: string[];
 }
 
 export default function Plan(props: PlanProps) {
   return (
-    <div className="flex flex-col gap-4 w-full max-w-xl p-4 border-[1px] rounded-xl border-slate-500">
-      <p className="text-lg font-medium">Plan</p>
-      <div className="flex flex-col gap-2">
-        {props.plan.map((step, index) => (
-          <p key={index} className="font-mono">
-            {index + 1}. {step}
-          </p>
-        ))}
+    <div className="flex flex-col gap-4 w-full max-w-xl p-6 border-[1px] rounded-xl border-slate-500">
+      <h2 className="text-2xl font-semibold text-center mb-2">Code Plan</h2>
+      <div className="grid grid-cols-2 divide-x divide-slate-300">
+        <div className="flex flex-col gap-2 pr-6">
+          <h3 className="text-lg font-medium mb-4 text-slate-700">
+            Executed Plans
+          </h3>
+          {props.executedPlans.map((step, index) => (
+            <p key={index} className="font-mono text-sm">
+              {index + 1}. {step}
+            </p>
+          ))}
+        </div>
+        <div className="flex flex-col gap-2 pl-6">
+          <h3 className="text-lg font-medium mb-4 text-slate-700">
+            Remaining Plans
+          </h3>
+          {props.remainingPlans.map((step, index) => (
+            <p key={index} className="font-mono text-sm">
+              {props.executedPlans.length + index + 1}. {step}
+            </p>
+          ))}
+        </div>
       </div>
     </div>
   );

agent/uis/open-code/proposed-change/index.tsx

@@ -1,8 +1,13 @@
-import { Button } from "@/components/ui/button";
 import "./index.css";
+import { v4 as uuidv4 } from "uuid";
+import { Button } from "@/components/ui/button";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { UIMessage, useStreamContext } from "@langchain/langgraph-sdk/react-ui";
+import { Message } from "@langchain/langgraph-sdk";
+import { DO_NOT_RENDER_ID_PREFIX } from "@/lib/ensure-tool-responses";
+import { useState } from "react";
 
 interface ProposedChangeProps {
   toolCallId: string;
@@ -11,12 +16,72 @@ interface ProposedChangeProps {
 }
 
 export default function ProposedChange(props: ProposedChangeProps) {
-  const handleReject = () => {};
-  const handleAccept = () => {};
+  const [isAccepted, setIsAccepted] = useState(false);
+
+  const thread = useStreamContext<
+    { messages: Message[]; ui: UIMessage[] },
+    { MetaType: { ui: UIMessage | undefined } }
+  >();
+
+  const handleReject = () => {
+    alert("Rejected. (just kidding, you can't reject me silly!)");
+  };
+  const handleAccept = () => {
+    const content = "User accepted the proposed change. Please continue.";
+    thread.submit({
+      messages: [
+        {
+          type: "tool",
+          tool_call_id: props.toolCallId,
+          id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
+          name: "buy-stock",
+          content,
+        },
+        {
+          type: "human",
+          content: `Accepted change.`,
+        },
+      ],
+    });
+
+    setIsAccepted(true);
+  };
+
+  if (isAccepted) {
+    return (
+      <div className="flex flex-col gap-4 w-full max-w-xl p-4 border-[1px] rounded-xl border-green-300">
+        <div className="flex flex-col items-start justify-start gap-2">
+          <p className="text-lg font-medium">Accepted Change</p>
+          <p className="text-sm font-mono">{props.planItem}</p>
+        </div>
+        <ReactMarkdown
+          children={props.change}
+          components={{
+            code(props) {
+              const { children, className, node: _node } = props;
+              const match = /language-(\w+)/.exec(className || "");
+              return match ? (
+                <SyntaxHighlighter
+                  children={String(children).replace(/\n$/, "")}
+                  language={match[1]}
+                  style={coldarkDark}
+                />
+              ) : (
+                <code className={className}>{children}</code>
+              );
+            },
+          }}
+        />
+      </div>
+    );
+  }
 
   return (
-    <div className="flex flex-col gap-4 w-full max-w-xl p-4 border-[1px] rounded-xl border-slate-200">
-      <p className="text-lg font-medium">Proposed Change</p>
+    <div className="flex flex-col gap-4 w-full max-w-4xl p-4 border-[1px] rounded-xl border-slate-200">
+      <div className="flex flex-col items-start justify-start gap-2">
+        <p className="text-lg font-medium">Proposed Change</p>
+        <p className="text-sm font-mono">{props.planItem}</p>
+      </div>
       <ReactMarkdown
         children={props.change}
         components={{
@@ -36,10 +101,16 @@ export default function ProposedChange(props: ProposedChangeProps) {
         }}
       />
       <div className="flex gap-2 items-center w-full">
-        <Button variant="destructive" onClick={handleReject}>
+        <Button
+          className="cursor-pointer"
+          variant="destructive"
+          onClick={handleReject}
+        >
           Reject
         </Button>
-        <Button onClick={handleAccept}>Accept</Button>
+        <Button className="cursor-pointer" onClick={handleAccept}>
+          Accept
+        </Button>
       </div>
     </div>
   );