├── .codespellignore
├── .prettierignore
├── .yarnrc.yml
├── .dockerignore
├── .prettierrc
├── src
    ├── lib
    │   ├── constants.ts
    │   ├── utils.ts
    │   └── local-storage.ts
    ├── app
    │   ├── favicon.ico
    │   ├── api
    │   │   ├── [..._path]
    │   │   │   └── route.ts
    │   │   └── instance
    │   │   │   ├── status
    │   │   │       └── route.ts
    │   │   │   ├── stop
    │   │   │       └── route.ts
    │   │   │   ├── pause
    │   │   │       └── route.ts
    │   │   │   └── resume
    │   │   │       └── route.ts
    │   ├── page.tsx
    │   ├── layout.tsx
    │   └── globals.css
    ├── providers
    │   ├── client.ts
    │   ├── Thread.tsx
    │   └── Stream.tsx
    ├── components
    │   ├── ui
    │   │   ├── skeleton.tsx
    │   │   ├── label.tsx
    │   │   ├── separator.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── sonner.tsx
    │   │   ├── switch.tsx
    │   │   ├── avatar.tsx
    │   │   ├── password-input.tsx
    │   │   ├── card.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── button.tsx
    │   │   ├── alert-dialog.tsx
    │   │   └── sheet.tsx
    │   ├── thread
    │   │   ├── utils.ts
    │   │   ├── markdown-styles.css
    │   │   ├── tooltip-icon-button.tsx
    │   │   ├── syntax-highlighter.tsx
    │   │   ├── messages
    │   │   │   ├── human.tsx
    │   │   │   ├── ai.tsx
    │   │   │   ├── shared.tsx
    │   │   │   └── tool-calls.tsx
    │   │   ├── history
    │   │   │   └── index.tsx
    │   │   ├── markdown-text.tsx
    │   │   └── index.tsx
    │   └── icons
    │   │   └── langgraph.tsx
    ├── agent
    │   ├── ui
    │   │   ├── index.tsx
    │   │   ├── render-vm-button.tsx
    │   │   ├── instance
    │   │   │   ├── instance-view.tsx
    │   │   │   ├── window-manager-buttons.tsx
    │   │   │   ├── useInstanceActions.tsx
    │   │   │   └── index.tsx
    │   │   ├── computer-use-tool-output.tsx
    │   │   ├── styles.css
    │   │   └── computer-use-tool-call.tsx
    │   ├── styles.css
    │   └── index.ts
    └── hooks
    │   └── useMediaQuery.tsx
├── postcss.config.mjs
├── public
    ├── gen_ui_diagram.png
    └── logo.svg
├── next.config.mjs
├── langgraph.json
├── .gitignore
├── components.json
├── .env.example
├── tsconfig.json
├── eslint.config.js
├── LICENSE
├── README.md
├── .github
    └── workflows
    │   └── ci.yml
├── tailwind.config.js
└── package.json


/.codespellignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | pnpm-lock.yaml


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | .git
4 | .env


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false
4 | }
5 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const DO_NOT_RENDER_ID_PREFIX = "do-not-render-";
2 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     "@tailwindcss/postcss": {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bracesproul/gen-ui-computer-use/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/gen_ui_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bracesproul/gen-ui-computer-use/HEAD/public/gen_ui_diagram.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/src/providers/client.ts:
--------------------------------------------------------------------------------
1 | import { Client } from "@langchain/langgraph-sdk";
2 | 
3 | export function createClient(apiUrl: string) {
4 |   return new Client({
5 |     apiUrl,
6 |   });
7 | }
8 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/api/[..._path]/route.ts:
--------------------------------------------------------------------------------
1 | import { initApiPassthrough } from "langgraph-nextjs-api-passthrough";
2 | 
3 | export const { GET, POST, PUT, PATCH, DELETE, OPTIONS, runtime } =
4 |   initApiPassthrough({
5 |     apiUrl: process.env.LANGGRAPH_API_URL,
6 |     apiKey: process.env.LANGCHAIN_API_KEY,
7 |     runtime: "edge" as const, // default
8 |   });
9 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 4 |   return (
 5 |     <div
 6 |       data-slot="skeleton"
 7 |       className={cn("bg-primary/10 animate-pulse rounded-md", className)}
 8 |       {...props}
 9 |     />
10 |   );
11 | }
12 | 
13 | export { Skeleton };
14 | 


--------------------------------------------------------------------------------
/src/components/thread/utils.ts:
--------------------------------------------------------------------------------
 1 | import type { Message } from "@langchain/langgraph-sdk";
 2 | 
 3 | export function getContentString(content: Message["content"]): string {
 4 |   if (typeof content === "string") return content;
 5 |   const texts = content
 6 |     .filter((c): c is { type: "text"; text: string } => c.type === "text")
 7 |     .map((c) => c.text);
 8 |   return texts.join(" ");
 9 | }
10 | 


--------------------------------------------------------------------------------
/langgraph.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "node_version": "20",
 3 |   "graphs": {
 4 |     "agent": "./src/agent/index.ts:graph"
 5 |   },
 6 |   "ui": {
 7 |     "agent": "./src/agent/ui/index.tsx"
 8 |   },
 9 |   "ui_config": {
10 |     "shared": [
11 |       "nuqs",
12 |       "nuqs/adapters/next/app",
13 |       "@/components/ui/sonner",
14 |       "sonner"
15 |     ]
16 |   },
17 |   "env": ".env",
18 |   "dependencies": ["."]
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # LangGraph API
27 | .langgraph_api
28 | .env
29 | .yarn/
30 | !.yarn/install-state.gz
31 | .next/
32 | next-env.d.ts


--------------------------------------------------------------------------------
/src/agent/ui/index.tsx:
--------------------------------------------------------------------------------
 1 | import { ComputerUseToolCall } from "./computer-use-tool-call";
 2 | import { ComputerUseToolOutput } from "./computer-use-tool-output";
 3 | import { RenderVMButton } from "./render-vm-button";
 4 | import { InstanceFrame } from "./instance";
 5 | 
 6 | const ComponentMap = {
 7 |   "computer-use-tool-output": ComputerUseToolOutput,
 8 |   "computer-use-tool-call": ComputerUseToolCall,
 9 |   "render-vm-button": RenderVMButton,
10 |   instance: InstanceFrame,
11 | } as const;
12 | export default ComponentMap;
13 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/hooks/useMediaQuery.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export function useMediaQuery(query: string) {
 4 |   const [matches, setMatches] = useState(false);
 5 | 
 6 |   useEffect(() => {
 7 |     const media = window.matchMedia(query);
 8 |     setMatches(media.matches);
 9 | 
10 |     const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
11 |     media.addEventListener("change", listener);
12 |     return () => media.removeEventListener("change", listener);
13 |   }, [query]);
14 | 
15 |   return matches;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/lib/local-storage.ts:
--------------------------------------------------------------------------------
 1 | export const USER_ID_KEY = "gen_ui_cua_user_id";
 2 | 
 3 | export function setItem(key: string, value: string) {
 4 |   if (typeof window === "undefined") {
 5 |     return;
 6 |   }
 7 |   localStorage.setItem(key, value);
 8 | }
 9 | 
10 | export function getItem(key: string) {
11 |   if (typeof window === "undefined") {
12 |     return undefined;
13 |   }
14 |   return localStorage.getItem(key) ?? undefined;
15 | }
16 | 
17 | export function removeItem(key: string) {
18 |   if (typeof window === "undefined") {
19 |     return;
20 |   }
21 |   localStorage.removeItem(key);
22 | }
23 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | # ------------------LangSmith tracing------------------
 2 | # LANGCHAIN_PROJECT="default"
 3 | # LANGCHAIN_API_KEY=""
 4 | # LANGCHAIN_TRACING_V2=true
 5 | # -----------------------------------------------------
 6 | 
 7 | OPENAI_API_KEY=""
 8 | SCRAPYBARA_API_KEY=""
 9 | 
10 | # Local URL for development. This should be your LangGraph Cloud URL
11 | # when setting this value in production.
12 | LANGGRAPH_API_URL="http://localhost:2024"
13 | 
14 | # Local URL for development. This should be your domain name + "/api"
15 | # when setting this value in production.
16 | NEXT_PUBLIC_API_URL="http://localhost:3000/api"
17 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Thread } from "@/components/thread";
 4 | import { StreamProvider } from "@/providers/Stream";
 5 | import { ThreadProvider } from "@/providers/Thread";
 6 | import { Toaster } from "@/components/ui/sonner";
 7 | import React from "react";
 8 | 
 9 | export default function DemoPage(): React.ReactNode {
10 |   return (
11 |     <React.Suspense fallback={<div>Loading (layout)...</div>}>
12 |       <Toaster />
13 |       <ThreadProvider>
14 |         <StreamProvider>
15 |           <Thread />
16 |         </StreamProvider>
17 |       </ThreadProvider>
18 |     </React.Suspense>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as LabelPrimitive from "@radix-ui/react-label";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Label({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10 |   return (
11 |     <LabelPrimitive.Root
12 |       data-slot="label"
13 |       className={cn(
14 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15 |         className,
16 |       )}
17 |       {...props}
18 |     />
19 |   );
20 | }
21 | 
22 | export { Label };
23 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import "./globals.css";
 3 | import { Inter } from "next/font/google";
 4 | import React from "react";
 5 | import { NuqsAdapter } from "nuqs/adapters/next/app";
 6 | 
 7 | const inter = Inter({
 8 |   subsets: ["latin"],
 9 |   preload: true,
10 |   display: "swap",
11 | });
12 | 
13 | export const metadata: Metadata = {
14 |   title: "Generative UI CUA",
15 |   description: "Generative UI Computer Use Agent by LangChain",
16 | };
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: Readonly<{
21 |   children: React.ReactNode;
22 | }>) {
23 |   return (
24 |     <html lang="en">
25 |       <body className={inter.className}>
26 |         <NuqsAdapter>{children}</NuqsAdapter>
27 |       </body>
28 |     </html>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Separator({
 7 |   className,
 8 |   orientation = "horizontal",
 9 |   decorative = true,
10 |   ...props
11 | }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
12 |   return (
13 |     <SeparatorPrimitive.Root
14 |       data-slot="separator-root"
15 |       decorative={decorative}
16 |       orientation={orientation}
17 |       className={cn(
18 |         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
19 |         className,
20 |       )}
21 |       {...props}
22 |     />
23 |   );
24 | }
25 | 
26 | export { Separator };
27 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11 |         className,
12 |       )}
13 |       {...props}
14 |     />
15 |   );
16 | }
17 | 
18 | export { Textarea };
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     },
23 |     "target": "ES2017"
24 |   },
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     ".next/types/**/*.ts",
30 |     "src/hooks/use-threads",
31 |     "src/app/thread/[threadId]"
32 |   ],
33 |   "exclude": ["node_modules"]
34 | }
35 | 


--------------------------------------------------------------------------------
/src/agent/ui/render-vm-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import "./styles.css";
 4 | import { Button } from "@/components/ui/button";
 5 | import { ComputerIcon } from "lucide-react";
 6 | import { useQueryState, parseAsBoolean } from "nuqs";
 7 | 
 8 | export function RenderVMButton() {
 9 |   const [isShowingInstanceFrame, setIsShowingInstanceFrame] = useQueryState(
10 |     "isShowingInstanceFrame",
11 |     parseAsBoolean,
12 |   );
13 | 
14 |   const onClick = () => {
15 |     setIsShowingInstanceFrame((p) => !p);
16 |   };
17 | 
18 |   return (
19 |     <Button
20 |       onClick={onClick}
21 |       variant="secondary"
22 |       className="-full min-w-[320px] max-w-[360px] sm:max-w-[536px] sm:min-w-[500px]"
23 |     >
24 |       <ComputerIcon className="w-3 h-3" />
25 |       <span className="mr-1">
26 |         {isShowingInstanceFrame ? "Close" : "Open"} Virtual Machine View
27 |       </span>
28 |     </Button>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
13 |         className,
14 |       )}
15 |       {...props}
16 |     />
17 |   );
18 | }
19 | 
20 | export { Input };
21 | 


--------------------------------------------------------------------------------
/src/components/thread/markdown-styles.css:
--------------------------------------------------------------------------------
 1 | /* Base markdown styles */
 2 | .markdown-content code:not(pre code) {
 3 |   background-color: rgba(0, 0, 0, 0.05);
 4 |   padding: 0.2em 0.4em;
 5 |   border-radius: 3px;
 6 |   font-size: 0.9em;
 7 | }
 8 | 
 9 | .markdown-content a {
10 |   color: #0070f3;
11 |   text-decoration: none;
12 | }
13 | 
14 | .markdown-content a:hover {
15 |   text-decoration: underline;
16 | }
17 | 
18 | .markdown-content blockquote {
19 |   border-left: 4px solid #ddd;
20 |   padding-left: 1rem;
21 |   color: #666;
22 | }
23 | 
24 | .markdown-content pre {
25 |   overflow-x: auto;
26 | }
27 | 
28 | .markdown-content table {
29 |   border-collapse: collapse;
30 |   width: 100%;
31 | }
32 | 
33 | .markdown-content th,
34 | .markdown-content td {
35 |   border: 1px solid #ddd;
36 |   padding: 8px;
37 | }
38 | 
39 | .markdown-content th {
40 |   background-color: #f2f2f2;
41 | }
42 | 
43 | .markdown-content tr:nth-child(even) {
44 |   background-color: #f9f9f9;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes";
 2 | import { Toaster as Sonner, ToasterProps } from "sonner";
 3 | 
 4 | const Toaster = ({ ...props }: ToasterProps) => {
 5 |   const { theme = "system" } = useTheme();
 6 | 
 7 |   return (
 8 |     <Sonner
 9 |       theme={theme as ToasterProps["theme"]}
10 |       className="toaster group"
11 |       toastOptions={{
12 |         classNames: {
13 |           toast:
14 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
15 |           description: "group-[.toast]:text-muted-foreground",
16 |           actionButton:
17 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
18 |           cancelButton:
19 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
20 |         },
21 |       }}
22 |       {...props}
23 |     />
24 |   );
25 | };
26 | 
27 | export { Toaster };
28 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "@typescript-eslint/no-explicit-any": 0,
23 |       "@typescript-eslint/no-unused-vars": [
24 |         "warn",
25 |         { args: "none", argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
26 |       ],
27 |       "react-refresh/only-export-components": [
28 |         "warn",
29 |         { allowConstantExport: true },
30 |       ],
31 |     },
32 |   },
33 | );
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Brace Sproul
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SwitchPrimitive from "@radix-ui/react-switch";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Switch({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
10 |   return (
11 |     <SwitchPrimitive.Root
12 |       data-slot="switch"
13 |       className={cn(
14 |         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
15 |         className,
16 |       )}
17 |       {...props}
18 |     >
19 |       <SwitchPrimitive.Thumb
20 |         data-slot="switch-thumb"
21 |         className={cn(
22 |           "bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
23 |         )}
24 |       />
25 |     </SwitchPrimitive.Root>
26 |   );
27 | }
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/src/app/api/instance/status/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { ScrapybaraClient } from "scrapybara";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const body = await req.json();
 7 |     const { instanceId } = body as { instanceId: string };
 8 | 
 9 |     if (!instanceId) {
10 |       return NextResponse.json(
11 |         { error: "`instanceId` is required." },
12 |         { status: 400 },
13 |       );
14 |     }
15 | 
16 |     if (!process.env.SCRAPYBARA_API_KEY) {
17 |       return NextResponse.json(
18 |         {
19 |           error: "Scrapybara API key is missing",
20 |         },
21 |         { status: 400 },
22 |       );
23 |     }
24 |     const client = new ScrapybaraClient({
25 |       apiKey: process.env.SCRAPYBARA_API_KEY,
26 |     });
27 | 
28 |     const instance = await client.get(instanceId);
29 | 
30 |     return NextResponse.json({ status: instance.status }, { status: 200 });
31 |   } catch (error: any) {
32 |     console.error("Failed to process stop instance request:", error);
33 | 
34 |     return NextResponse.json(
35 |       { error: "Failed to stop instance." + error.message },
36 |       { status: 500 },
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app/api/instance/stop/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { ScrapybaraClient } from "scrapybara";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const body = await req.json();
 7 |     const { instanceId } = body as { instanceId: string };
 8 | 
 9 |     if (!instanceId) {
10 |       return NextResponse.json(
11 |         { error: "`instanceId` is required." },
12 |         { status: 400 },
13 |       );
14 |     }
15 | 
16 |     if (!process.env.SCRAPYBARA_API_KEY) {
17 |       return NextResponse.json(
18 |         {
19 |           error: "Scrapybara API key is missing",
20 |         },
21 |         { status: 400 },
22 |       );
23 |     }
24 |     const client = new ScrapybaraClient({
25 |       apiKey: process.env.SCRAPYBARA_API_KEY,
26 |     });
27 | 
28 |     const instance = await client.get(instanceId);
29 |     await instance.stop();
30 | 
31 |     return NextResponse.json({ success: true }, { status: 200 });
32 |   } catch (error: any) {
33 |     console.error("Failed to process stop instance request:", error);
34 | 
35 |     return NextResponse.json(
36 |       { error: "Failed to stop instance." + error.message },
37 |       { status: 500 },
38 |     );
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/app/api/instance/pause/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { ScrapybaraClient } from "scrapybara";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const body = await req.json();
 7 |     const { instanceId } = body as { instanceId: string };
 8 | 
 9 |     if (!instanceId) {
10 |       return NextResponse.json(
11 |         { error: "`instanceId` is required." },
12 |         { status: 400 },
13 |       );
14 |     }
15 | 
16 |     if (!process.env.SCRAPYBARA_API_KEY) {
17 |       return NextResponse.json(
18 |         {
19 |           error: "Scrapybara API key is missing",
20 |         },
21 |         { status: 400 },
22 |       );
23 |     }
24 |     const client = new ScrapybaraClient({
25 |       apiKey: process.env.SCRAPYBARA_API_KEY,
26 |     });
27 | 
28 |     const instance = await client.get(instanceId);
29 |     await instance.pause();
30 | 
31 |     return NextResponse.json({ success: true }, { status: 200 });
32 |   } catch (error: any) {
33 |     console.error("Failed to process pause instance request:", error);
34 | 
35 |     return NextResponse.json(
36 |       { error: "Failed to pause instance." + error.message },
37 |       { status: 500 },
38 |     );
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/app/api/instance/resume/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { ScrapybaraClient } from "scrapybara";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const body = await req.json();
 7 |     const { instanceId } = body as { instanceId: string };
 8 | 
 9 |     if (!instanceId) {
10 |       return NextResponse.json(
11 |         { error: "`instanceId` is required." },
12 |         { status: 400 },
13 |       );
14 |     }
15 | 
16 |     if (!process.env.SCRAPYBARA_API_KEY) {
17 |       return NextResponse.json(
18 |         {
19 |           error: "Scrapybara API key is missing",
20 |         },
21 |         { status: 400 },
22 |       );
23 |     }
24 |     const client = new ScrapybaraClient({
25 |       apiKey: process.env.SCRAPYBARA_API_KEY,
26 |     });
27 | 
28 |     const instance = await client.get(instanceId);
29 |     await instance.resume();
30 | 
31 |     return NextResponse.json({ success: true }, { status: 200 });
32 |   } catch (error: any) {
33 |     console.error("Failed to process resume instance request:", error);
34 | 
35 |     return NextResponse.json(
36 |       { error: "Failed to resume instance." + error.message },
37 |       { status: 500 },
38 |     );
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/thread/tooltip-icon-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { forwardRef } from "react";
 4 | 
 5 | import {
 6 |   Tooltip,
 7 |   TooltipContent,
 8 |   TooltipProvider,
 9 |   TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 | import { Button, ButtonProps } from "@/components/ui/button";
12 | import { cn } from "@/lib/utils";
13 | 
14 | export type TooltipIconButtonProps = ButtonProps & {
15 |   tooltip: string;
16 |   side?: "top" | "bottom" | "left" | "right";
17 | };
18 | 
19 | export const TooltipIconButton = forwardRef<
20 |   HTMLButtonElement,
21 |   TooltipIconButtonProps
22 | >(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
23 |   return (
24 |     <TooltipProvider>
25 |       <Tooltip>
26 |         <TooltipTrigger asChild>
27 |           <Button
28 |             variant="ghost"
29 |             size="icon"
30 |             {...rest}
31 |             className={cn("size-6 p-1", className)}
32 |             ref={ref}
33 |           >
34 |             {children}
35 |             <span className="sr-only">{tooltip}</span>
36 |           </Button>
37 |         </TooltipTrigger>
38 |         <TooltipContent side={side}>{tooltip}</TooltipContent>
39 |       </Tooltip>
40 |     </TooltipProvider>
41 |   );
42 | });
43 | 
44 | TooltipIconButton.displayName = "TooltipIconButton";
45 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function Avatar({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
10 |   return (
11 |     <AvatarPrimitive.Root
12 |       data-slot="avatar"
13 |       className={cn(
14 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
15 |         className,
16 |       )}
17 |       {...props}
18 |     />
19 |   );
20 | }
21 | 
22 | function AvatarImage({
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
26 |   return (
27 |     <AvatarPrimitive.Image
28 |       data-slot="avatar-image"
29 |       className={cn("aspect-square size-full", className)}
30 |       {...props}
31 |     />
32 |   );
33 | }
34 | 
35 | function AvatarFallback({
36 |   className,
37 |   ...props
38 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
39 |   return (
40 |     <AvatarPrimitive.Fallback
41 |       data-slot="avatar-fallback"
42 |       className={cn(
43 |         "bg-muted flex size-full items-center justify-center rounded-full",
44 |         className,
45 |       )}
46 |       {...props}
47 |     />
48 |   );
49 | }
50 | 
51 | export { Avatar, AvatarImage, AvatarFallback };
52 | 


--------------------------------------------------------------------------------
/src/components/thread/syntax-highlighter.tsx:
--------------------------------------------------------------------------------
 1 | import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
 2 | import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 3 | import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
 4 | import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 5 | import { FC } from "react";
 6 | 
 7 | // Register languages you want to support
 8 | SyntaxHighlighterPrism.registerLanguage("js", tsx);
 9 | SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
10 | SyntaxHighlighterPrism.registerLanguage("ts", tsx);
11 | SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
12 | SyntaxHighlighterPrism.registerLanguage("python", python);
13 | 
14 | interface SyntaxHighlighterProps {
15 |   children: string;
16 |   language: string;
17 |   className?: string;
18 | }
19 | 
20 | export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
21 |   children,
22 |   language,
23 |   className,
24 | }) => {
25 |   return (
26 |     <SyntaxHighlighterPrism
27 |       language={language}
28 |       style={coldarkDark}
29 |       customStyle={{
30 |         margin: 0,
31 |         width: "100%",
32 |         background: "transparent",
33 |         padding: "1.5rem 1rem",
34 |       }}
35 |       className={className}
36 |     >
37 |       {children}
38 |     </SyntaxHighlighterPrism>
39 |   );
40 | };
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Computer Use Agent Generative UI
 2 | 
 3 | A Generative UI web app for interacting with Computer Use Agents (CUA) via the `@langchain/langgraph-cua` prebuilt package.
 4 | 
 5 | ![Gen UI Diagram](./public/gen_ui_diagram.png)
 6 | 
 7 | ## Quickstart
 8 | 
 9 | The following API keys are required to run this app:
10 | 
11 | - [OpenAI API Key](https://platform.openai.com/) - Calling the computer use model
12 | - [Scrapybara API Key](https://scrapybara.com/) - Running the VM
13 | 
14 | Once you have both API keys, you can clone the repo:
15 | 
16 | ```bash
17 | git clone https://github.com/bracesproul/gen-ui-computer-use.git
18 | ```
19 | 
20 | Navigate to the project directory:
21 | 
22 | ```bash
23 | cd gen-ui-computer-use
24 | ```
25 | 
26 | Copy the `.env.example` file to `.env` and add your API keys:
27 | 
28 | ```bash
29 | cp .env.example .env
30 | ```
31 | 
32 | Add your OpenAI API key and Scrapybara API key to the `.env` file:
33 | 
34 | ```bash
35 | OPENAI_API_KEY=your_openai_api_key
36 | SCrapybara_API_KEY=your_scrapybara_api_key
37 | ```
38 | 
39 | Install dependencies:
40 | 
41 | ```bash
42 | pnpm install
43 | ```
44 | 
45 | Run both the agent and the app:
46 | 
47 | ```bash
48 | # Run the web server
49 | pnpm run dev
50 | ```
51 | 
52 | In another terminal window:
53 | 
54 | ```bash
55 | # Run the agent
56 | pnpm run agent
57 | ```
58 | 
59 | The app will be available at `http://localhost:3000`.
60 | 
61 | ## License
62 | 
63 | [MIT](./LICENSE)
64 | 


--------------------------------------------------------------------------------
/src/components/ui/password-input.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { Input } from "./input";
 7 | import { Button } from "./button";
 8 | import { EyeIcon, EyeOffIcon } from "lucide-react";
 9 | 
10 | export const PasswordInput = React.forwardRef<
11 |   HTMLInputElement,
12 |   React.ComponentProps<"input">
13 | >(({ className, ...props }, ref) => {
14 |   const [showPassword, setShowPassword] = React.useState(false);
15 | 
16 |   return (
17 |     <div className="relative w-full">
18 |       <Input
19 |         type={showPassword ? "text" : "password"}
20 |         className={cn("hide-password-toggle pr-10", className)}
21 |         ref={ref}
22 |         {...props}
23 |       />
24 |       <Button
25 |         type="button"
26 |         variant="ghost"
27 |         size="sm"
28 |         className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
29 |         onClick={() => setShowPassword((prev) => !prev)}
30 |       >
31 |         {showPassword ? (
32 |           <EyeIcon className="h-4 w-4" aria-hidden="true" />
33 |         ) : (
34 |           <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
35 |         )}
36 |         <span className="sr-only">
37 |           {showPassword ? "Hide password" : "Show password"}
38 |         </span>
39 |       </Button>
40 | 
41 |       {/* hides browsers password toggles */}
42 |       <style>{`
43 | 					.hide-password-toggle::-ms-reveal,
44 | 					.hide-password-toggle::-ms-clear {
45 | 						visibility: hidden;
46 | 						pointer-events: none;
47 | 						display: none;
48 | 					}
49 | 				`}</style>
50 |     </div>
51 |   );
52 | });
53 | 
54 | PasswordInput.displayName = "PasswordInput";
55 | 


--------------------------------------------------------------------------------
/src/agent/ui/instance/instance-view.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { ReactNode } from "react";
 3 | import { WindowManagerButtons } from "./window-manager-buttons";
 4 | 
 5 | export function InstanceView({
 6 |   children,
 7 |   handleStop,
 8 |   handlePause,
 9 |   isStopping,
10 |   isStopped,
11 |   allDisabled,
12 |   handleExpand,
13 |   isExpanded,
14 | }: {
15 |   children: ReactNode;
16 |   handleStop: () => void;
17 |   handlePause: () => void;
18 |   isStopping: boolean;
19 |   isStopped: boolean;
20 |   allDisabled: boolean;
21 |   handleExpand: () => void;
22 |   isExpanded?: boolean;
23 | }) {
24 |   return (
25 |     <div
26 |       className={cn(
27 |         "w-full h-full flex items-center justify-center my-auto",
28 |         isExpanded
29 |           ? "fixed inset-0 z-50 bg-background/95 backdrop-blur-sm p-2"
30 |           : "max-w-4xl p-4 pb-20",
31 |       )}
32 |     >
33 |       <div
34 |         className={cn(
35 |           "w-full overflow-hidden rounded-lg border border-border shadow-sm bg-card relative",
36 |           isExpanded && "mx-auto transition-all duration-300 ease-in-out",
37 |           isExpanded && "aspect-[4/3] max-h-[90vh] max-w-[calc(90vh*1.33)]",
38 |         )}
39 |       >
40 |         <div className="sticky top-0 left-0 right-0 h-8 bg-muted/30 backdrop-blur-sm flex items-center px-3 z-10">
41 |           <WindowManagerButtons
42 |             onCancel={handleStop}
43 |             onMinimize={handlePause}
44 |             onExpand={handleExpand}
45 |             isStopping={isStopping}
46 |             isStopped={isStopped}
47 |             allDisabled={allDisabled}
48 |           />
49 |         </div>
50 |         <div className="relative w-full">{children}</div>
51 |       </div>
52 |     </div>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className,
12 |       )}
13 |       {...props}
14 |     />
15 |   );
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn("flex flex-col gap-1.5 px-6", className)}
23 |       {...props}
24 |     />
25 |   );
26 | }
27 | 
28 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
29 |   return (
30 |     <div
31 |       data-slot="card-title"
32 |       className={cn("leading-none font-semibold", className)}
33 |       {...props}
34 |     />
35 |   );
36 | }
37 | 
38 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
39 |   return (
40 |     <div
41 |       data-slot="card-description"
42 |       className={cn("text-muted-foreground text-sm", className)}
43 |       {...props}
44 |     />
45 |   );
46 | }
47 | 
48 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
49 |   return (
50 |     <div
51 |       data-slot="card-content"
52 |       className={cn("px-6", className)}
53 |       {...props}
54 |     />
55 |   );
56 | }
57 | 
58 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
59 |   return (
60 |     <div
61 |       data-slot="card-footer"
62 |       className={cn("flex items-center px-6", className)}
63 |       {...props}
64 |     />
65 |   );
66 | }
67 | 
68 | export {
69 |   Card,
70 |   CardHeader,
71 |   CardFooter,
72 |   CardTitle,
73 |   CardDescription,
74 |   CardContent,
75 | };
76 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | function TooltipProvider({
 7 |   delayDuration = 0,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
10 |   return (
11 |     <TooltipPrimitive.Provider
12 |       data-slot="tooltip-provider"
13 |       delayDuration={delayDuration}
14 |       {...props}
15 |     />
16 |   );
17 | }
18 | 
19 | function Tooltip({
20 |   ...props
21 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
22 |   return (
23 |     <TooltipProvider>
24 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
25 |     </TooltipProvider>
26 |   );
27 | }
28 | 
29 | function TooltipTrigger({
30 |   ...props
31 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
32 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
33 | }
34 | 
35 | function TooltipContent({
36 |   className,
37 |   sideOffset = 0,
38 |   children,
39 |   ...props
40 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
41 |   return (
42 |     <TooltipPrimitive.Portal>
43 |       <TooltipPrimitive.Content
44 |         data-slot="tooltip-content"
45 |         sideOffset={sideOffset}
46 |         className={cn(
47 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
48 |           className,
49 |         )}
50 |         {...props}
51 |       >
52 |         {children}
53 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
54 |       </TooltipPrimitive.Content>
55 |     </TooltipPrimitive.Portal>
56 |   );
57 | }
58 | 
59 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
60 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | # Run formatting on all PRs
 2 | 
 3 | name: CI
 4 | 
 5 | on:
 6 |   push:
 7 |     branches: ["main"]
 8 |   pull_request:
 9 |   workflow_dispatch: # Allows triggering the workflow manually in GitHub UI
10 | 
11 | # If another push to the same PR or branch happens while this workflow is still running,
12 | # cancel the earlier run in favor of the next run.
13 | #
14 | # There's no point in testing an outdated version of the code. GitHub only allows
15 | # a limited number of job runners to be active at the same time, so it's better to cancel
16 | # pointless jobs early so that more useful jobs can run sooner.
17 | concurrency:
18 |   group: ${{ github.workflow }}-${{ github.ref }}
19 |   cancel-in-progress: true
20 | 
21 | jobs:
22 |   format:
23 |     name: Check formatting
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@v4
27 |       - uses: pnpm/action-setup@v4
28 |         with:
29 |           version: 10.6.3
30 |       - uses: actions/setup-node@v4
31 |         with:
32 |           node-version: "18.x"
33 |           cache: "pnpm"
34 |       - name: Install dependencies
35 |         run: pnpm install
36 |       - name: Check formatting
37 |         run: pnpm format:check
38 | 
39 |   lint:
40 |     name: Check linting
41 |     runs-on: ubuntu-latest
42 |     steps:
43 |       - uses: actions/checkout@v4
44 |       - uses: pnpm/action-setup@v4
45 |         with:
46 |           version: 10.6.3
47 |       - uses: actions/setup-node@v4
48 |         with:
49 |           node-version: "18.x"
50 |           cache: "pnpm"
51 |       - name: Install dependencies
52 |         run: pnpm install
53 |       - name: Check linting
54 |         run: pnpm lint
55 | 
56 |   readme-spelling:
57 |     name: Check README spelling
58 |     runs-on: ubuntu-latest
59 |     steps:
60 |       - uses: actions/checkout@v4
61 |       - uses: codespell-project/actions-codespell@v2
62 |         with:
63 |           ignore_words_file: .codespellignore
64 |           path: README.md
65 | 
66 |   check-spelling:
67 |     name: Check code spelling
68 |     runs-on: ubuntu-latest
69 |     steps:
70 |       - uses: actions/checkout@v4
71 |       - uses: codespell-project/actions-codespell@v2
72 |         with:
73 |           ignore_words_file: .codespellignore
74 |           path: src
75 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     "./index.html",
 6 |     "./src/**/*.{ts,tsx,js,jsx}",
 7 |     "./agent/**/*.{ts,tsx,js,jsx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       borderRadius: {
12 |         lg: "var(--radius)",
13 |         md: "calc(var(--radius) - 2px)",
14 |         sm: "calc(var(--radius) - 4px)",
15 |       },
16 |       components: {
17 |         ".scrollbar-pretty":
18 |           "overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
19 |       },
20 |       colors: {
21 |         background: "hsl(var(--background))",
22 |         foreground: "hsl(var(--foreground))",
23 |         card: {
24 |           DEFAULT: "hsl(var(--card))",
25 |           foreground: "hsl(var(--card-foreground))",
26 |         },
27 |         popover: {
28 |           DEFAULT: "hsl(var(--popover))",
29 |           foreground: "hsl(var(--popover-foreground))",
30 |         },
31 |         primary: {
32 |           DEFAULT: "hsl(var(--primary))",
33 |           foreground: "hsl(var(--primary-foreground))",
34 |         },
35 |         secondary: {
36 |           DEFAULT: "hsl(var(--secondary))",
37 |           foreground: "hsl(var(--secondary-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         destructive: {
48 |           DEFAULT: "hsl(var(--destructive))",
49 |           foreground: "hsl(var(--destructive-foreground))",
50 |         },
51 |         border: "hsl(var(--border))",
52 |         input: "hsl(var(--input))",
53 |         ring: "hsl(var(--ring))",
54 |         chart: {
55 |           1: "hsl(var(--chart-1))",
56 |           2: "hsl(var(--chart-2))",
57 |           3: "hsl(var(--chart-3))",
58 |           4: "hsl(var(--chart-4))",
59 |           5: "hsl(var(--chart-5))",
60 |         },
61 |       },
62 |     },
63 |   },
64 |   plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar")],
65 | };
66 | 


--------------------------------------------------------------------------------
/src/providers/Thread.tsx:
--------------------------------------------------------------------------------
 1 | import { validate } from "uuid";
 2 | import { Thread } from "@langchain/langgraph-sdk";
 3 | import {
 4 |   createContext,
 5 |   useContext,
 6 |   ReactNode,
 7 |   useCallback,
 8 |   useState,
 9 |   Dispatch,
10 |   SetStateAction,
11 |   useEffect,
12 | } from "react";
13 | import { createClient } from "./client";
14 | import { getItem, USER_ID_KEY } from "@/lib/local-storage";
15 | 
16 | interface ThreadContextType {
17 |   getThreads: (userId: string) => Promise<Thread[]>;
18 |   threads: Thread[];
19 |   setThreads: Dispatch<SetStateAction<Thread[]>>;
20 |   threadsLoading: boolean;
21 |   setThreadsLoading: Dispatch<SetStateAction<boolean>>;
22 | }
23 | 
24 | const ThreadContext = createContext<ThreadContextType | undefined>(undefined);
25 | 
26 | function getThreadSearchMetadata(
27 |   assistantId: string,
28 | ): { graph_id: string } | { assistant_id: string } {
29 |   if (validate(assistantId)) {
30 |     return { assistant_id: assistantId };
31 |   } else {
32 |     return { graph_id: assistantId };
33 |   }
34 | }
35 | 
36 | export function ThreadProvider({ children }: { children: ReactNode }) {
37 |   const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000/api";
38 |   const assistantId = "agent";
39 | 
40 |   const [threads, setThreads] = useState<Thread[]>([]);
41 |   const [threadsLoading, setThreadsLoading] = useState(false);
42 | 
43 |   const getThreads = useCallback(
44 |     async (userId: string): Promise<Thread[]> => {
45 |       const client = createClient(apiUrl);
46 | 
47 |       const threads = await client.threads.search({
48 |         metadata: {
49 |           ...getThreadSearchMetadata(assistantId),
50 |           user_id: userId,
51 |         },
52 |         limit: 100,
53 |       });
54 | 
55 |       return threads;
56 |     },
57 |     [apiUrl, assistantId],
58 |   );
59 | 
60 |   const value = {
61 |     getThreads,
62 |     threads,
63 |     setThreads,
64 |     threadsLoading,
65 |     setThreadsLoading,
66 |   };
67 | 
68 |   return (
69 |     <ThreadContext.Provider value={value}>{children}</ThreadContext.Provider>
70 |   );
71 | }
72 | 
73 | export function useThreads() {
74 |   const context = useContext(ThreadContext);
75 |   if (context === undefined) {
76 |     throw new Error("useThreads must be used within a ThreadProvider");
77 |   }
78 |   return context;
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
16 |         outline:
17 |           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |         brand: "bg-[#2F6868] hover:bg-[#2F6868]/90 border-[#2F6868] text-white",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   },
36 | );
37 | 
38 | type ButtonProps = React.ComponentProps<"button"> &
39 |   VariantProps<typeof buttonVariants> & {
40 |     asChild?: boolean;
41 |   };
42 | 
43 | function Button({
44 |   className,
45 |   variant,
46 |   size,
47 |   asChild = false,
48 |   ...props
49 | }: ButtonProps) {
50 |   const Comp = asChild ? Slot : "button";
51 | 
52 |   return (
53 |     <Comp
54 |       data-slot="button"
55 |       className={cn(buttonVariants({ variant, size, className }))}
56 |       {...props}
57 |     />
58 |   );
59 | }
60 | 
61 | export { Button, buttonVariants, type ButtonProps };
62 | 


--------------------------------------------------------------------------------
/src/agent/ui/computer-use-tool-output.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import "./styles.css";
 4 | import { ChevronDown, ChevronUp } from "lucide-react";
 5 | import { useState } from "react";
 6 | 
 7 | interface ComputerUseToolOutputProps {
 8 |   toolCallId: string;
 9 |   /**
10 |    * The base64 encoded screenshot of the computer
11 |    */
12 |   screenshot: string;
13 | }
14 | 
15 | export function ComputerUseToolOutput(props: ComputerUseToolOutputProps) {
16 |   const { screenshot, toolCallId } = props;
17 |   const [isExpanded, setIsExpanded] = useState(false);
18 | 
19 |   return (
20 |     <div className="flex flex-col gap-2 items-start justify-start w-full min-w-[320px] max-w-[360px] p-3 border rounded-md bg-gray-50 sm:max-w-[536px] sm:min-w-[500px]">
21 |       {/* Desktop and mobile header row */}
22 |       <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center w-full gap-1 lg:gap-0">
23 |         {/* Mobile layout: Title and toggle button in first row */}
24 |         <div className="flex justify-between items-center w-full lg:hidden">
25 |           <p className="text-sm font-medium">Computer Output</p>
26 |           <button
27 |             onClick={() => setIsExpanded(!isExpanded)}
28 |             className="flex items-center text-xs text-blue-500 hover:text-blue-700 transition-colors"
29 |           >
30 |             <span className="mr-1">
31 |               {isExpanded ? "Hide" : "Show"} screenshot
32 |             </span>
33 |             {isExpanded ? (
34 |               <ChevronUp className="w-3 h-3" />
35 |             ) : (
36 |               <ChevronDown className="w-3 h-3" />
37 |             )}
38 |           </button>
39 |         </div>
40 | 
41 |         {/* Desktop layout: Title and ID on left, button on right */}
42 |         <div className="hidden lg:flex lg:items-center lg:gap-2 lg:flex-grow">
43 |           <p className="text-sm font-medium">Computer Output</p>
44 |           <p className="text-xs font-light text-gray-500">{toolCallId}</p>
45 |         </div>
46 | 
47 |         <button
48 |           onClick={() => setIsExpanded(!isExpanded)}
49 |           className="hidden lg:flex items-center text-xs text-blue-500 hover:text-blue-700 transition-colors"
50 |         >
51 |           <span className="mr-1">
52 |             {isExpanded ? "Hide" : "Show"} screenshot
53 |           </span>
54 |           {isExpanded ? (
55 |             <ChevronUp className="w-3 h-3" />
56 |           ) : (
57 |             <ChevronDown className="w-3 h-3" />
58 |           )}
59 |         </button>
60 | 
61 |         {/* Mobile only: Tool call ID in second row */}
62 |         <p className="text-xs font-light text-gray-500 w-full lg:hidden">
63 |           {toolCallId}
64 |         </p>
65 |       </div>
66 | 
67 |       {/* Screenshot container */}
68 |       {isExpanded && (
69 |         <div className="w-full mt-2 border border-gray-200 rounded overflow-hidden lg:max-w-[536px]">
70 |           <img
71 |             src={screenshot}
72 |             alt="Computer screenshot"
73 |             className="w-full h-auto lg:h-[384px] lg:max-w-[536px]"
74 |           />
75 |         </div>
76 |       )}
77 |     </div>
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gen-ui-computer-use",
 3 |   "readme": "https://github.com/bracesproul/gen-ui-computer-use/blob/main/README.md",
 4 |   "homepage": "https://gen-ui-computer-use.vercel.app",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/bracesproul/gen-ui-computer-use.git"
 8 |   },
 9 |   "private": true,
10 |   "version": "0.0.0",
11 |   "type": "module",
12 |   "scripts": {
13 |     "dev": "next dev",
14 |     "agent": "npx @langchain/langgraph-cli dev",
15 |     "build": "next build",
16 |     "start": "next start",
17 |     "lint": "next lint",
18 |     "format": "prettier --write .",
19 |     "format:check": "prettier --check ."
20 |   },
21 |   "dependencies": {
22 |     "@langchain/core": "^0.3.43",
23 |     "@langchain/langgraph": "^0.2.60",
24 |     "@langchain/langgraph-api": "^0.0.19",
25 |     "@langchain/langgraph-cli": "^0.0.19",
26 |     "@langchain/langgraph-cua": "^0.0.5",
27 |     "@langchain/langgraph-sdk": "^0.0.61",
28 |     "@langchain/openai": "^0.5.1",
29 |     "@radix-ui/react-alert-dialog": "^1.1.6",
30 |     "@radix-ui/react-avatar": "^1.1.3",
31 |     "@radix-ui/react-dialog": "^1.1.6",
32 |     "@radix-ui/react-label": "^2.1.2",
33 |     "@radix-ui/react-separator": "^1.1.2",
34 |     "@radix-ui/react-slot": "^1.1.2",
35 |     "@radix-ui/react-switch": "^1.1.3",
36 |     "@radix-ui/react-tooltip": "^1.1.8",
37 |     "@supabase/supabase-js": "^2.49.4",
38 |     "class-variance-authority": "^0.7.1",
39 |     "clsx": "^2.1.1",
40 |     "date-fns": "^4.1.0",
41 |     "esbuild": "^0.25.0",
42 |     "esbuild-plugin-tailwindcss": "^2.0.1",
43 |     "framer-motion": "^12.4.9",
44 |     "katex": "^0.16.21",
45 |     "langgraph-nextjs-api-passthrough": "^0.0.4",
46 |     "lodash": "^4.17.21",
47 |     "lucide-react": "^0.476.0",
48 |     "next-themes": "^0.4.4",
49 |     "nuqs": "^2.4.1",
50 |     "prettier": "^3.5.2",
51 |     "react": "^19.0.0",
52 |     "react-dom": "^19.0.0",
53 |     "react-markdown": "^10.0.1",
54 |     "react-syntax-highlighter": "^15.5.0",
55 |     "recharts": "^2.15.1",
56 |     "rehype-katex": "^7.0.1",
57 |     "remark-gfm": "^4.0.1",
58 |     "remark-math": "^6.0.0",
59 |     "scrapybara": "^2.4.4",
60 |     "sonner": "^2.0.1",
61 |     "tailwind-merge": "^3.0.2",
62 |     "tailwindcss-animate": "^1.0.7",
63 |     "use-stick-to-bottom": "^1.0.46",
64 |     "uuid": "^11.0.5",
65 |     "zod": "^3.24.2"
66 |   },
67 |   "devDependencies": {
68 |     "@eslint/js": "^9.19.0",
69 |     "@tailwindcss/postcss": "^4.0.13",
70 |     "@types/lodash": "^4.17.16",
71 |     "@types/node": "^22.13.5",
72 |     "@types/react": "^19.0.8",
73 |     "@types/react-dom": "^19.0.3",
74 |     "@types/react-syntax-highlighter": "^15.5.13",
75 |     "autoprefixer": "^10.4.20",
76 |     "dotenv": "^16.4.7",
77 |     "eslint": "^9.19.0",
78 |     "eslint-config-next": "15.2.2",
79 |     "eslint-plugin-react-hooks": "^5.0.0",
80 |     "eslint-plugin-react-refresh": "^0.4.18",
81 |     "globals": "^15.14.0",
82 |     "next": "^15.2.4",
83 |     "openai": "^4.87.3",
84 |     "postcss": "^8.5.3",
85 |     "tailwind-scrollbar": "^4.0.1",
86 |     "tailwindcss": "^4.0.13",
87 |     "turbo": "latest",
88 |     "typescript": "~5.7.2",
89 |     "typescript-eslint": "^8.22.0"
90 |   },
91 |   "overrides": {
92 |     "react-is": "^19.0.0-rc-69d4b800-20241021"
93 |   },
94 |   "packageManager": "pnpm@10.6.3"
95 | }
96 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/human.tsx:
--------------------------------------------------------------------------------
  1 | import { useStreamContext } from "@/providers/Stream";
  2 | import { Message } from "@langchain/langgraph-sdk";
  3 | import { useState } from "react";
  4 | import { getContentString } from "../utils";
  5 | import { cn } from "@/lib/utils";
  6 | import { Textarea } from "@/components/ui/textarea";
  7 | import { BranchSwitcher, CommandBar } from "./shared";
  8 | 
  9 | function EditableContent({
 10 |   value,
 11 |   setValue,
 12 |   onSubmit,
 13 | }: {
 14 |   value: string;
 15 |   setValue: React.Dispatch<React.SetStateAction<string>>;
 16 |   onSubmit: () => void;
 17 | }) {
 18 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 19 |     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
 20 |       e.preventDefault();
 21 |       onSubmit();
 22 |     }
 23 |   };
 24 | 
 25 |   return (
 26 |     <Textarea
 27 |       value={value}
 28 |       onChange={(e) => setValue(e.target.value)}
 29 |       onKeyDown={handleKeyDown}
 30 |       className="focus-visible:ring-0"
 31 |     />
 32 |   );
 33 | }
 34 | 
 35 | export function HumanMessage({
 36 |   message,
 37 |   isLoading,
 38 | }: {
 39 |   message: Message;
 40 |   isLoading: boolean;
 41 | }) {
 42 |   const thread = useStreamContext();
 43 |   const meta = thread.getMessagesMetadata(message);
 44 |   const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
 45 | 
 46 |   const [isEditing, setIsEditing] = useState(false);
 47 |   const [value, setValue] = useState("");
 48 |   const contentString = getContentString(message.content);
 49 | 
 50 |   const handleSubmitEdit = () => {
 51 |     setIsEditing(false);
 52 | 
 53 |     const newMessage: Message = { type: "human", content: value };
 54 |     thread.submit(
 55 |       { messages: [newMessage] },
 56 |       {
 57 |         checkpoint: parentCheckpoint,
 58 |         streamMode: ["values"],
 59 |         optimisticValues: (prev) => {
 60 |           const values = meta?.firstSeenState?.values;
 61 |           if (!values) return prev;
 62 | 
 63 |           return {
 64 |             ...values,
 65 |             messages: [...(values.messages ?? []), newMessage],
 66 |           };
 67 |         },
 68 |       },
 69 |     );
 70 |   };
 71 | 
 72 |   return (
 73 |     <div
 74 |       className={cn(
 75 |         "flex items-center ml-auto gap-2 group",
 76 |         isEditing && "w-full max-w-xl",
 77 |       )}
 78 |     >
 79 |       <div className={cn("flex flex-col gap-2", isEditing && "w-full")}>
 80 |         {isEditing ? (
 81 |           <EditableContent
 82 |             value={value}
 83 |             setValue={setValue}
 84 |             onSubmit={handleSubmitEdit}
 85 |           />
 86 |         ) : (
 87 |           <p className="text-right px-4 py-2 rounded-3xl bg-muted">
 88 |             {contentString}
 89 |           </p>
 90 |         )}
 91 | 
 92 |         <div
 93 |           className={cn(
 94 |             "flex gap-2 items-center ml-auto transition-opacity",
 95 |             "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
 96 |             isEditing && "opacity-100",
 97 |           )}
 98 |         >
 99 |           <BranchSwitcher
100 |             branch={meta?.branch}
101 |             branchOptions={meta?.branchOptions}
102 |             onSelect={(branch) => thread.setBranch(branch)}
103 |             isLoading={isLoading}
104 |           />
105 |           <CommandBar
106 |             isLoading={isLoading}
107 |             content={contentString}
108 |             isEditing={isEditing}
109 |             setIsEditing={(c) => {
110 |               if (c) {
111 |                 setValue(contentString);
112 |               }
113 |               setIsEditing(c);
114 |             }}
115 |             handleSubmitEdit={handleSubmitEdit}
116 |             isHumanMessage={true}
117 |           />
118 |         </div>
119 |       </div>
120 |     </div>
121 |   );
122 | }
123 | 


--------------------------------------------------------------------------------
/src/providers/Stream.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { v4 as uuidv4 } from "uuid";
  4 | import React, {
  5 |   createContext,
  6 |   useContext,
  7 |   ReactNode,
  8 |   useState,
  9 |   useEffect,
 10 | } from "react";
 11 | import { useStream } from "@langchain/langgraph-sdk/react";
 12 | import { type Message } from "@langchain/langgraph-sdk";
 13 | import {
 14 |   uiMessageReducer,
 15 |   type UIMessage,
 16 |   type RemoveUIMessage,
 17 | } from "@langchain/langgraph-sdk/react-ui";
 18 | import { parseAsBoolean, useQueryState } from "nuqs";
 19 | import { useThreads } from "./Thread";
 20 | import { getItem, setItem, USER_ID_KEY } from "@/lib/local-storage";
 21 | import { createClient } from "./client";
 22 | 
 23 | export type StateType = {
 24 |   messages: Message[];
 25 |   ui?: UIMessage[];
 26 |   streamUrl?: string;
 27 |   instanceId?: string;
 28 |   environment?: string;
 29 | };
 30 | 
 31 | const useTypedStream = useStream<
 32 |   StateType,
 33 |   {
 34 |     UpdateType: {
 35 |       messages?: Message[] | Message | string;
 36 |       ui?: (UIMessage | RemoveUIMessage)[] | UIMessage | RemoveUIMessage;
 37 |       streamUrl?: string;
 38 |       instanceId?: string;
 39 |       environment?: string;
 40 |     };
 41 |     CustomEventType: UIMessage | RemoveUIMessage;
 42 |   }
 43 | >;
 44 | 
 45 | type StreamContextType = ReturnType<typeof useTypedStream>;
 46 | const StreamContext = createContext<StreamContextType | undefined>(undefined);
 47 | 
 48 | async function sleep(ms = 4000) {
 49 |   return new Promise((resolve) => setTimeout(resolve, ms));
 50 | }
 51 | 
 52 | const StreamSession = ({
 53 |   children,
 54 |   apiUrl,
 55 |   assistantId,
 56 | }: {
 57 |   children: ReactNode;
 58 |   apiUrl: string;
 59 |   assistantId: string;
 60 | }) => {
 61 |   const [threadId, setThreadId] = useQueryState("threadId");
 62 |   const client = createClient(apiUrl);
 63 |   const { getThreads, setThreads } = useThreads();
 64 |   const [userId, setUserId] = useState<string>();
 65 |   const [_isShowingInstanceFrame, setIsShowingInstanceFrame] = useQueryState(
 66 |     "isShowingInstanceFrame",
 67 |     parseAsBoolean,
 68 |   );
 69 |   const streamValue = useTypedStream({
 70 |     apiUrl,
 71 |     assistantId,
 72 |     threadId: threadId ?? null,
 73 |     onCustomEvent: (event, options) => {
 74 |       options.mutate((prev) => {
 75 |         const ui = uiMessageReducer(prev.ui ?? [], event);
 76 |         return { ...prev, ui };
 77 |       });
 78 |     },
 79 |     onThreadId: (id) => {
 80 |       setThreadId(id);
 81 |       setIsShowingInstanceFrame(null);
 82 |       // Refetch threads list when thread ID changes.
 83 |       // Wait for some seconds before fetching so we're able to get the new thread that was created.
 84 |       if (userId) {
 85 |         client.threads
 86 |           .update(id, {
 87 |             metadata: {
 88 |               user_id: userId,
 89 |             },
 90 |           })
 91 |           .then(() => {
 92 |             // After updating, re-fetch threads so the title is up to date.
 93 |             sleep().then(() =>
 94 |               getThreads(userId).then(setThreads).catch(console.error),
 95 |             );
 96 |           })
 97 |           .catch(console.error);
 98 |       }
 99 |     },
100 |   });
101 | 
102 |   useEffect(() => {
103 |     if (typeof window === "undefined" || userId) return;
104 |     const storedUserId = getItem(USER_ID_KEY);
105 |     if (storedUserId) {
106 |       setUserId(storedUserId);
107 |     } else {
108 |       const newUserId = uuidv4();
109 |       setUserId(newUserId);
110 |       setItem(USER_ID_KEY, newUserId);
111 |     }
112 |   }, []);
113 | 
114 |   return (
115 |     <StreamContext.Provider value={streamValue}>
116 |       {children}
117 |     </StreamContext.Provider>
118 |   );
119 | };
120 | 
121 | export const StreamProvider: React.FC<{ children: ReactNode }> = ({
122 |   children,
123 | }) => {
124 |   const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000/api";
125 |   const assistantId = "agent";
126 | 
127 |   return (
128 |     <StreamSession apiUrl={apiUrl} assistantId={assistantId}>
129 |       {children}
130 |     </StreamSession>
131 |   );
132 | };
133 | 
134 | // Create a custom hook to use the context
135 | export const useStreamContext = (): StreamContextType => {
136 |   const context = useContext(StreamContext);
137 |   if (context === undefined) {
138 |     throw new Error("useStreamContext must be used within a StreamProvider");
139 |   }
140 |   return context;
141 | };
142 | 
143 | export default StreamContext;
144 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/ai.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useStreamContext } from "@/providers/Stream";
  4 | import { AIMessage, Checkpoint, Message } from "@langchain/langgraph-sdk";
  5 | import { getContentString } from "../utils";
  6 | import { BranchSwitcher, CommandBar } from "./shared";
  7 | import { MarkdownText } from "../markdown-text";
  8 | import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
  9 | import { cn } from "@/lib/utils";
 10 | import { Fragment } from "react/jsx-runtime";
 11 | 
 12 | export function hasToolOutputs(message: AIMessage): boolean {
 13 |   const toolOutputs = message.additional_kwargs?.tool_outputs
 14 |     ? message.additional_kwargs?.tool_outputs
 15 |     : message.response_metadata?.output;
 16 | 
 17 |   if (!toolOutputs || !Array.isArray(toolOutputs) || !toolOutputs?.length) {
 18 |     return false;
 19 |   }
 20 | 
 21 |   return toolOutputs.some(
 22 |     (output: Record<string, unknown>) => output.type === "computer_call",
 23 |   );
 24 | }
 25 | 
 26 | function CustomComponent({
 27 |   message,
 28 |   thread,
 29 | }: {
 30 |   message: Message;
 31 |   thread: ReturnType<typeof useStreamContext>;
 32 | }) {
 33 |   const { values } = useStreamContext();
 34 |   const customComponents = values.ui?.filter(
 35 |     (ui) => ui.metadata?.message_id === message.id && ui.name !== "instance",
 36 |   );
 37 | 
 38 |   if (!customComponents?.length) return null;
 39 |   return (
 40 |     <Fragment key={message.id}>
 41 |       {customComponents.map((customComponent) => (
 42 |         <LoadExternalComponent
 43 |           key={customComponent.id}
 44 |           stream={thread}
 45 |           message={customComponent}
 46 |           meta={{ ui: customComponent }}
 47 |         />
 48 |       ))}
 49 |     </Fragment>
 50 |   );
 51 | }
 52 | 
 53 | export function AssistantMessage({
 54 |   message,
 55 |   isLoading,
 56 |   handleRegenerate,
 57 | }: {
 58 |   message: Message;
 59 |   isLoading: boolean;
 60 |   handleRegenerate: (parentCheckpoint: Checkpoint | null | undefined) => void;
 61 | }) {
 62 |   const contentString = getContentString(message.content);
 63 | 
 64 |   const thread = useStreamContext();
 65 |   const isLastMessage =
 66 |     thread.messages[thread.messages.length - 1].id === message.id;
 67 |   const meta = thread.getMessagesMetadata(message);
 68 |   const interrupt = thread.interrupt;
 69 |   const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
 70 |   const isToolMessage = message.type === "tool";
 71 |   const isToolCallMsg =
 72 |     message.type === "ai" &&
 73 |     (message.tool_calls?.length || hasToolOutputs(message));
 74 | 
 75 |   return (
 76 |     <div className="flex items-start mr-auto gap-2 group">
 77 |       <div className="flex flex-col gap-2">
 78 |         {contentString.length > 0 && !isToolMessage && (
 79 |           <div className="py-1">
 80 |             <MarkdownText>{contentString}</MarkdownText>
 81 |           </div>
 82 |         )}
 83 | 
 84 |         <CustomComponent message={message} thread={thread} />
 85 |         {!isToolCallMsg && !isToolMessage && (
 86 |           <div
 87 |             className={cn(
 88 |               "flex gap-2 items-center mr-auto transition-opacity",
 89 |               "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
 90 |             )}
 91 |           >
 92 |             <BranchSwitcher
 93 |               branch={meta?.branch}
 94 |               branchOptions={meta?.branchOptions}
 95 |               onSelect={(branch) => thread.setBranch(branch)}
 96 |               isLoading={isLoading}
 97 |             />
 98 |             <CommandBar
 99 |               content={contentString}
100 |               isLoading={isLoading}
101 |               isAiMessage={true}
102 |               handleRegenerate={() => handleRegenerate(parentCheckpoint)}
103 |             />
104 |           </div>
105 |         )}
106 |       </div>
107 |     </div>
108 |   );
109 | }
110 | 
111 | export function AssistantMessageLoading() {
112 |   return (
113 |     <div className="flex items-start mr-auto gap-2">
114 |       <div className="flex items-center gap-1 rounded-2xl bg-muted px-4 py-2 h-8">
115 |         <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_infinite]"></div>
116 |         <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_0.5s_infinite]"></div>
117 |         <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_1s_infinite]"></div>
118 |       </div>
119 |     </div>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
  3 | 
  4 | import { cn } from "@/lib/utils";
  5 | import { buttonVariants } from "@/components/ui/button";
  6 | 
  7 | function AlertDialog({
  8 |   ...props
  9 | }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
 10 |   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 11 | }
 12 | 
 13 | function AlertDialogTrigger({
 14 |   ...props
 15 | }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
 16 |   return (
 17 |     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 18 |   );
 19 | }
 20 | 
 21 | function AlertDialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
 24 |   return (
 25 |     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 26 |   );
 27 | }
 28 | 
 29 | function AlertDialogOverlay({
 30 |   className,
 31 |   ...props
 32 | }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
 33 |   return (
 34 |     <AlertDialogPrimitive.Overlay
 35 |       data-slot="alert-dialog-overlay"
 36 |       className={cn(
 37 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 38 |         className,
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   );
 43 | }
 44 | 
 45 | function AlertDialogContent({
 46 |   className,
 47 |   ...props
 48 | }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
 49 |   return (
 50 |     <AlertDialogPortal>
 51 |       <AlertDialogOverlay />
 52 |       <AlertDialogPrimitive.Content
 53 |         data-slot="alert-dialog-content"
 54 |         className={cn(
 55 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 56 |           className,
 57 |         )}
 58 |         {...props}
 59 |       />
 60 |     </AlertDialogPortal>
 61 |   );
 62 | }
 63 | 
 64 | function AlertDialogHeader({
 65 |   className,
 66 |   ...props
 67 | }: React.ComponentProps<"div">) {
 68 |   return (
 69 |     <div
 70 |       data-slot="alert-dialog-header"
 71 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 72 |       {...props}
 73 |     />
 74 |   );
 75 | }
 76 | 
 77 | function AlertDialogFooter({
 78 |   className,
 79 |   ...props
 80 | }: React.ComponentProps<"div">) {
 81 |   return (
 82 |     <div
 83 |       data-slot="alert-dialog-footer"
 84 |       className={cn(
 85 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 86 |         className,
 87 |       )}
 88 |       {...props}
 89 |     />
 90 |   );
 91 | }
 92 | 
 93 | function AlertDialogTitle({
 94 |   className,
 95 |   ...props
 96 | }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
 97 |   return (
 98 |     <AlertDialogPrimitive.Title
 99 |       data-slot="alert-dialog-title"
100 |       className={cn("text-lg font-semibold", className)}
101 |       {...props}
102 |     />
103 |   );
104 | }
105 | 
106 | function AlertDialogDescription({
107 |   className,
108 |   ...props
109 | }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
110 |   return (
111 |     <AlertDialogPrimitive.Description
112 |       data-slot="alert-dialog-description"
113 |       className={cn("text-muted-foreground text-sm", className)}
114 |       {...props}
115 |     />
116 |   );
117 | }
118 | 
119 | function AlertDialogAction({
120 |   className,
121 |   ...props
122 | }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
123 |   return (
124 |     <AlertDialogPrimitive.Action
125 |       className={cn(buttonVariants(), className)}
126 |       {...props}
127 |     />
128 |   );
129 | }
130 | 
131 | function AlertDialogCancel({
132 |   className,
133 |   ...props
134 | }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
135 |   return (
136 |     <AlertDialogPrimitive.Cancel
137 |       className={cn(buttonVariants({ variant: "outline" }), className)}
138 |       {...props}
139 |     />
140 |   );
141 | }
142 | 
143 | export {
144 |   AlertDialog,
145 |   AlertDialogPortal,
146 |   AlertDialogOverlay,
147 |   AlertDialogTrigger,
148 |   AlertDialogContent,
149 |   AlertDialogHeader,
150 |   AlertDialogFooter,
151 |   AlertDialogTitle,
152 |   AlertDialogDescription,
153 |   AlertDialogAction,
154 |   AlertDialogCancel,
155 | };
156 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog";
  3 | import { XIcon } from "lucide-react";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  8 |   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
  9 | }
 10 | 
 11 | function SheetTrigger({
 12 |   ...props
 13 | }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 14 |   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 15 | }
 16 | 
 17 | function SheetClose({
 18 |   ...props
 19 | }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 20 |   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 21 | }
 22 | 
 23 | function SheetPortal({
 24 |   ...props
 25 | }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 26 |   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 27 | }
 28 | 
 29 | function SheetOverlay({
 30 |   className,
 31 |   ...props
 32 | }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 33 |   return (
 34 |     <SheetPrimitive.Overlay
 35 |       data-slot="sheet-overlay"
 36 |       className={cn(
 37 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 38 |         className,
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   );
 43 | }
 44 | 
 45 | function SheetContent({
 46 |   className,
 47 |   children,
 48 |   side = "right",
 49 |   ...props
 50 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 51 |   side?: "top" | "right" | "bottom" | "left";
 52 | }) {
 53 |   return (
 54 |     <SheetPortal>
 55 |       <SheetOverlay />
 56 |       <SheetPrimitive.Content
 57 |         data-slot="sheet-content"
 58 |         className={cn(
 59 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 60 |           side === "right" &&
 61 |             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 62 |           side === "left" &&
 63 |             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 64 |           side === "top" &&
 65 |             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 66 |           side === "bottom" &&
 67 |             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 68 |           className,
 69 |         )}
 70 |         {...props}
 71 |       >
 72 |         {children}
 73 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 74 |           <XIcon className="size-4" />
 75 |           <span className="sr-only">Close</span>
 76 |         </SheetPrimitive.Close>
 77 |       </SheetPrimitive.Content>
 78 |     </SheetPortal>
 79 |   );
 80 | }
 81 | 
 82 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
 83 |   return (
 84 |     <div
 85 |       data-slot="sheet-header"
 86 |       className={cn("flex flex-col gap-1.5 p-4", className)}
 87 |       {...props}
 88 |     />
 89 |   );
 90 | }
 91 | 
 92 | function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 93 |   return (
 94 |     <div
 95 |       data-slot="sheet-footer"
 96 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 97 |       {...props}
 98 |     />
 99 |   );
100 | }
101 | 
102 | function SheetTitle({
103 |   className,
104 |   ...props
105 | }: React.ComponentProps<typeof SheetPrimitive.Title>) {
106 |   return (
107 |     <SheetPrimitive.Title
108 |       data-slot="sheet-title"
109 |       className={cn("text-foreground font-semibold", className)}
110 |       {...props}
111 |     />
112 |   );
113 | }
114 | 
115 | function SheetDescription({
116 |   className,
117 |   ...props
118 | }: React.ComponentProps<typeof SheetPrimitive.Description>) {
119 |   return (
120 |     <SheetPrimitive.Description
121 |       data-slot="sheet-description"
122 |       className={cn("text-muted-foreground text-sm", className)}
123 |       {...props}
124 |     />
125 |   );
126 | }
127 | 
128 | export {
129 |   Sheet,
130 |   SheetTrigger,
131 |   SheetClose,
132 |   SheetContent,
133 |   SheetHeader,
134 |   SheetFooter,
135 |   SheetTitle,
136 |   SheetDescription,
137 | };
138 | 


--------------------------------------------------------------------------------
/src/agent/ui/instance/window-manager-buttons.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AlertDialog,
  3 |   AlertDialogAction,
  4 |   AlertDialogCancel,
  5 |   AlertDialogContent,
  6 |   AlertDialogDescription,
  7 |   AlertDialogFooter,
  8 |   AlertDialogHeader,
  9 |   AlertDialogTitle,
 10 |   AlertDialogTrigger,
 11 | } from "@/components/ui/alert-dialog";
 12 | import { cn } from "@/lib/utils";
 13 | import { Maximize, Minus, X } from "lucide-react";
 14 | import { useQueryState, parseAsBoolean } from "nuqs";
 15 | import { useState } from "react";
 16 | 
 17 | function StopInstanceDialog({
 18 |   isHovered,
 19 |   isStopping,
 20 |   isStopped,
 21 |   onCancel,
 22 |   disabled,
 23 | }: {
 24 |   isHovered: boolean;
 25 |   isStopping: boolean;
 26 |   isStopped: boolean;
 27 |   onCancel: () => void;
 28 |   disabled: boolean;
 29 | }) {
 30 |   const [open, setOpen] = useState(false);
 31 | 
 32 |   if (disabled) {
 33 |     return (
 34 |       <div className="w-[14px] h-[14px] rounded-full flex items-center justify-center relative bg-destructive/80" />
 35 |     );
 36 |   }
 37 | 
 38 |   return (
 39 |     <AlertDialog open={open} onOpenChange={setOpen}>
 40 |       <AlertDialogTrigger asChild>
 41 |         <div
 42 |           className={cn(
 43 |             "w-[14px] h-[14px] rounded-full flex items-center justify-center relative",
 44 |             "bg-destructive/80",
 45 |             isStopping || isStopped ? "cursor-not-allowed" : "cursor-pointer",
 46 |           )}
 47 |           onClick={isStopping || isStopped ? undefined : () => setOpen(true)}
 48 |           role="button"
 49 |           aria-label="Stop instance"
 50 |         >
 51 |           {isHovered && (
 52 |             <X
 53 |               className={cn(
 54 |                 "absolute text-black",
 55 |                 "w-[10px] h-[10px]",
 56 |                 isStopping || isStopped ? "opacity-50" : "opacity-100",
 57 |               )}
 58 |             />
 59 |           )}
 60 |         </div>
 61 |       </AlertDialogTrigger>
 62 |       <AlertDialogContent>
 63 |         <AlertDialogHeader>
 64 |           <AlertDialogTitle>Stop Instance</AlertDialogTitle>
 65 |           <AlertDialogDescription>
 66 |             Are you sure you want to stop this instance? All progress will be
 67 |             lost.
 68 |           </AlertDialogDescription>
 69 |         </AlertDialogHeader>
 70 |         <p className="text-muted-foreground text-sm">
 71 |           You may pause the instance instead to save progress.
 72 |         </p>
 73 |         <AlertDialogFooter>
 74 |           <AlertDialogCancel>Cancel</AlertDialogCancel>
 75 |           <AlertDialogAction
 76 |             onClick={onCancel}
 77 |             className="bg-destructive hover:bg-destructive/80 transition-colors duration-200 ease-in-out"
 78 |           >
 79 |             Stop
 80 |           </AlertDialogAction>
 81 |         </AlertDialogFooter>
 82 |       </AlertDialogContent>
 83 |     </AlertDialog>
 84 |   );
 85 | }
 86 | 
 87 | interface WindowManagerButtonsProps {
 88 |   onCancel: () => void;
 89 |   onMinimize: () => void;
 90 |   onExpand: () => void;
 91 |   isStopping: boolean;
 92 |   isStopped: boolean;
 93 |   allDisabled: boolean;
 94 | }
 95 | 
 96 | export function WindowManagerButtons({
 97 |   onCancel,
 98 |   onMinimize,
 99 |   onExpand,
100 |   isStopping,
101 |   isStopped,
102 |   allDisabled,
103 | }: WindowManagerButtonsProps) {
104 |   const [isHovered, setIsHovered] = useState(false);
105 |   const [_isShowingInstanceFrame, setIsShowingInstanceFrame] = useQueryState(
106 |     "isShowingInstanceFrame",
107 |     parseAsBoolean,
108 |   );
109 | 
110 |   return (
111 |     <div
112 |       className="flex space-x-1.5"
113 |       onMouseEnter={() => setIsHovered(true)}
114 |       onMouseLeave={() => setIsHovered(false)}
115 |     >
116 |       <StopInstanceDialog
117 |         disabled={allDisabled}
118 |         isHovered={isHovered}
119 |         isStopping={isStopping}
120 |         isStopped={isStopped}
121 |         onCancel={onCancel}
122 |       />
123 |       <div
124 |         className="w-[14px] h-[14px] rounded-full bg-yellow-500/80 flex items-center justify-center relative cursor-pointer"
125 |         onClick={() => {
126 |           if (allDisabled) {
127 |             setIsShowingInstanceFrame(null);
128 |             return;
129 |           }
130 |           if (isStopping || isStopped) {
131 |             return;
132 |           }
133 |           onMinimize();
134 |         }}
135 |         role="button"
136 |         aria-label="Minimize instance"
137 |       >
138 |         {isHovered && (
139 |           <Minus
140 |             className={cn(
141 |               "absolute text-black w-[10px] h-[10px]",
142 |               isStopping || isStopped ? "opacity-50" : "opacity-100",
143 |             )}
144 |           />
145 |         )}
146 |       </div>
147 |       <div
148 |         className="w-[14px] h-[14px] rounded-full bg-green-500/80 flex items-center justify-center relative cursor-pointer"
149 |         onClick={onExpand}
150 |         role="button"
151 |         aria-label="Expand instance"
152 |       >
153 |         {isHovered && (
154 |           <Maximize
155 |             className={cn(
156 |               "absolute text-black w-[10px] h-[10px]",
157 |               isStopping || isStopped ? "opacity-50" : "opacity-100",
158 |             )}
159 |           />
160 |         )}
161 |       </div>
162 |     </div>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/src/components/thread/history/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button";
  2 | import { useThreads } from "@/providers/Thread";
  3 | import { Thread } from "@langchain/langgraph-sdk";
  4 | import { useEffect, useState } from "react";
  5 | 
  6 | import { getContentString } from "../utils";
  7 | import { useQueryState, parseAsBoolean } from "nuqs";
  8 | import {
  9 |   Sheet,
 10 |   SheetContent,
 11 |   SheetHeader,
 12 |   SheetTitle,
 13 | } from "@/components/ui/sheet";
 14 | import { Skeleton } from "@/components/ui/skeleton";
 15 | import { PanelRightOpen, PanelRightClose } from "lucide-react";
 16 | import { useMediaQuery } from "@/hooks/useMediaQuery";
 17 | import { getItem, USER_ID_KEY } from "@/lib/local-storage";
 18 | 
 19 | function ThreadList({
 20 |   threads,
 21 |   onThreadClick,
 22 | }: {
 23 |   threads: Thread[];
 24 |   onThreadClick?: (threadId: string) => void;
 25 | }) {
 26 |   const [threadId, setThreadId] = useQueryState("threadId");
 27 | 
 28 |   return (
 29 |     <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
 30 |       {threads.map((t) => {
 31 |         let itemText = t.thread_id;
 32 |         if (
 33 |           typeof t.values === "object" &&
 34 |           t.values &&
 35 |           "messages" in t.values &&
 36 |           Array.isArray(t.values.messages) &&
 37 |           t.values.messages?.length > 0
 38 |         ) {
 39 |           const firstMessage = t.values.messages[0];
 40 |           itemText = getContentString(firstMessage.content);
 41 |         }
 42 |         return (
 43 |           <div key={t.thread_id} className="w-full px-1">
 44 |             <Button
 45 |               variant="ghost"
 46 |               className="text-left items-start justify-start font-normal w-[280px]"
 47 |               onClick={(e) => {
 48 |                 e.preventDefault();
 49 |                 onThreadClick?.(t.thread_id);
 50 |                 if (t.thread_id === threadId) return;
 51 |                 setThreadId(t.thread_id);
 52 |               }}
 53 |             >
 54 |               <p className="truncate text-ellipsis">{itemText}</p>
 55 |             </Button>
 56 |           </div>
 57 |         );
 58 |       })}
 59 |     </div>
 60 |   );
 61 | }
 62 | 
 63 | function ThreadHistoryLoading() {
 64 |   return (
 65 |     <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
 66 |       {Array.from({ length: 30 }).map((_, i) => (
 67 |         <Skeleton key={`skeleton-${i}`} className="w-[280px] h-10" />
 68 |       ))}
 69 |     </div>
 70 |   );
 71 | }
 72 | 
 73 | export default function ThreadHistory() {
 74 |   const isLargeScreen = useMediaQuery("(min-width: 1024px)");
 75 |   const [chatHistoryOpen, setChatHistoryOpen] = useQueryState(
 76 |     "chatHistoryOpen",
 77 |     parseAsBoolean.withDefault(false),
 78 |   );
 79 |   const { getThreads, threads, setThreads, threadsLoading, setThreadsLoading } =
 80 |     useThreads();
 81 | 
 82 |   useEffect(() => {
 83 |     if (typeof window === "undefined") return;
 84 |     const storedUserId = getItem(USER_ID_KEY);
 85 |     if (storedUserId) {
 86 |       setThreadsLoading(true);
 87 |       getThreads(storedUserId)
 88 |         .then(setThreads)
 89 |         .catch(console.error)
 90 |         .finally(() => setThreadsLoading(false));
 91 |     }
 92 |   }, []);
 93 | 
 94 |   return (
 95 |     <>
 96 |       <div className="hidden lg:flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 shadow-inner-right">
 97 |         <div className="flex items-center justify-between w-full pt-1.5 px-4">
 98 |           <Button
 99 |             className="hover:bg-gray-100"
100 |             variant="ghost"
101 |             onClick={() => setChatHistoryOpen((p) => !p)}
102 |           >
103 |             {chatHistoryOpen ? (
104 |               <PanelRightOpen className="size-5" />
105 |             ) : (
106 |               <PanelRightClose className="size-5" />
107 |             )}
108 |           </Button>
109 |           <h1 className="text-xl font-semibold tracking-tight">
110 |             Thread History
111 |           </h1>
112 |         </div>
113 |         {threadsLoading ? (
114 |           <ThreadHistoryLoading />
115 |         ) : (
116 |           <ThreadList threads={threads} />
117 |         )}
118 |       </div>
119 |       <div className="lg:hidden">
120 |         <Sheet
121 |           open={!!chatHistoryOpen && !isLargeScreen}
122 |           onOpenChange={(open) => {
123 |             if (isLargeScreen) return;
124 |             setChatHistoryOpen(open);
125 |           }}
126 |         >
127 |           <SheetContent side="left" className="lg:hidden flex">
128 |             <SheetHeader>
129 |               <SheetTitle>Thread History</SheetTitle>
130 |             </SheetHeader>
131 |             <ThreadList
132 |               threads={threads}
133 |               onThreadClick={() => setChatHistoryOpen((o) => !o)}
134 |             />
135 |           </SheetContent>
136 |         </Sheet>
137 |       </div>
138 |     </>
139 |   );
140 | }
141 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | :root {
  8 |   --background: oklch(1 0 0);
  9 |   --foreground: oklch(0.145 0 0);
 10 |   --card: oklch(1 0 0);
 11 |   --card-foreground: oklch(0.145 0 0);
 12 |   --popover: oklch(1 0 0);
 13 |   --popover-foreground: oklch(0.145 0 0);
 14 |   --primary: oklch(0.205 0 0);
 15 |   --primary-foreground: oklch(0.985 0 0);
 16 |   --secondary: oklch(0.97 0 0);
 17 |   --secondary-foreground: oklch(0.205 0 0);
 18 |   --muted: oklch(0.97 0 0);
 19 |   --muted-foreground: oklch(0.556 0 0);
 20 |   --accent: oklch(0.97 0 0);
 21 |   --accent-foreground: oklch(0.205 0 0);
 22 |   --destructive: oklch(0.577 0.245 27.325);
 23 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 24 |   --border: oklch(0.922 0 0);
 25 |   --input: oklch(0.922 0 0);
 26 |   --ring: oklch(0.87 0 0);
 27 |   --chart-1: oklch(0.646 0.222 41.116);
 28 |   --chart-2: oklch(0.6 0.118 184.704);
 29 |   --chart-3: oklch(0.398 0.07 227.392);
 30 |   --chart-4: oklch(0.828 0.189 84.429);
 31 |   --chart-5: oklch(0.769 0.188 70.08);
 32 |   --radius: 0.625rem;
 33 |   --sidebar: oklch(0.985 0 0);
 34 |   --sidebar-foreground: oklch(0.145 0 0);
 35 |   --sidebar-primary: oklch(0.205 0 0);
 36 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 37 |   --sidebar-accent: oklch(0.97 0 0);
 38 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 39 |   --sidebar-border: oklch(0.922 0 0);
 40 |   --sidebar-ring: oklch(0.87 0 0);
 41 | }
 42 | 
 43 | .dark {
 44 |   --background: oklch(0.145 0 0);
 45 |   --foreground: oklch(0.985 0 0);
 46 |   --card: oklch(0.145 0 0);
 47 |   --card-foreground: oklch(0.985 0 0);
 48 |   --popover: oklch(0.145 0 0);
 49 |   --popover-foreground: oklch(0.985 0 0);
 50 |   --primary: oklch(0.985 0 0);
 51 |   --primary-foreground: oklch(0.205 0 0);
 52 |   --secondary: oklch(0.269 0 0);
 53 |   --secondary-foreground: oklch(0.985 0 0);
 54 |   --muted: oklch(0.269 0 0);
 55 |   --muted-foreground: oklch(0.708 0 0);
 56 |   --accent: oklch(0.269 0 0);
 57 |   --accent-foreground: oklch(0.985 0 0);
 58 |   --destructive: oklch(0.396 0.141 25.723);
 59 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 60 |   --border: oklch(0.269 0 0);
 61 |   --input: oklch(0.269 0 0);
 62 |   --ring: oklch(0.439 0 0);
 63 |   --chart-1: oklch(0.488 0.243 264.376);
 64 |   --chart-2: oklch(0.696 0.17 162.48);
 65 |   --chart-3: oklch(0.769 0.188 70.08);
 66 |   --chart-4: oklch(0.627 0.265 303.9);
 67 |   --chart-5: oklch(0.645 0.246 16.439);
 68 |   --sidebar: oklch(0.205 0 0);
 69 |   --sidebar-foreground: oklch(0.985 0 0);
 70 |   --sidebar-primary: oklch(0.488 0.243 264.376);
 71 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 72 |   --sidebar-accent: oklch(0.269 0 0);
 73 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 74 |   --sidebar-border: oklch(0.269 0 0);
 75 |   --sidebar-ring: oklch(0.439 0 0);
 76 | }
 77 | 
 78 | @theme inline {
 79 |   --color-background: var(--background);
 80 |   --color-foreground: var(--foreground);
 81 |   --color-card: var(--card);
 82 |   --color-card-foreground: var(--card-foreground);
 83 |   --color-popover: var(--popover);
 84 |   --color-popover-foreground: var(--popover-foreground);
 85 |   --color-primary: var(--primary);
 86 |   --color-primary-foreground: var(--primary-foreground);
 87 |   --color-secondary: var(--secondary);
 88 |   --color-secondary-foreground: var(--secondary-foreground);
 89 |   --color-muted: var(--muted);
 90 |   --color-muted-foreground: var(--muted-foreground);
 91 |   --color-accent: var(--accent);
 92 |   --color-accent-foreground: var(--accent-foreground);
 93 |   --color-destructive: var(--destructive);
 94 |   --color-destructive-foreground: var(--destructive-foreground);
 95 |   --color-border: var(--border);
 96 |   --color-input: var(--input);
 97 |   --color-ring: var(--ring);
 98 |   --color-chart-1: var(--chart-1);
 99 |   --color-chart-2: var(--chart-2);
100 |   --color-chart-3: var(--chart-3);
101 |   --color-chart-4: var(--chart-4);
102 |   --color-chart-5: var(--chart-5);
103 |   --radius-sm: calc(var(--radius) - 4px);
104 |   --radius-md: calc(var(--radius) - 2px);
105 |   --radius-lg: var(--radius);
106 |   --radius-xl: calc(var(--radius) + 4px);
107 |   --color-sidebar: var(--sidebar);
108 |   --color-sidebar-foreground: var(--sidebar-foreground);
109 |   --color-sidebar-primary: var(--sidebar-primary);
110 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
111 |   --color-sidebar-accent: var(--sidebar-accent);
112 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
113 |   --color-sidebar-border: var(--sidebar-border);
114 |   --color-sidebar-ring: var(--sidebar-ring);
115 | }
116 | 
117 | @layer base {
118 |   * {
119 |     @apply border-border outline-ring/50;
120 |   }
121 | 
122 |   body {
123 |     @apply bg-background text-foreground;
124 |   }
125 | 
126 |   :root {
127 |     --chart-1: 12 76% 61%;
128 |     --chart-2: 173 58% 39%;
129 |     --chart-3: 197 37% 24%;
130 |     --chart-4: 43 74% 66%;
131 |     --chart-5: 27 87% 67%;
132 |   }
133 | 
134 |   .dark {
135 |     --chart-1: 220 70% 50%;
136 |     --chart-2: 160 60% 45%;
137 |     --chart-3: 30 80% 55%;
138 |     --chart-4: 280 65% 60%;
139 |     --chart-5: 340 75% 55%;
140 |   }
141 | }
142 | 
143 | @layer utilities {
144 |   .shadow-inner-right {
145 |     box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
146 |   }
147 | 
148 |   .shadow-inner-left {
149 |     box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/agent/styles.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | :root {
  8 |   --background: oklch(1 0 0);
  9 |   --foreground: oklch(0.145 0 0);
 10 |   --card: oklch(1 0 0);
 11 |   --card-foreground: oklch(0.145 0 0);
 12 |   --popover: oklch(1 0 0);
 13 |   --popover-foreground: oklch(0.145 0 0);
 14 |   --primary: oklch(0.205 0 0);
 15 |   --primary-foreground: oklch(0.985 0 0);
 16 |   --secondary: oklch(0.97 0 0);
 17 |   --secondary-foreground: oklch(0.205 0 0);
 18 |   --muted: oklch(0.97 0 0);
 19 |   --muted-foreground: oklch(0.556 0 0);
 20 |   --accent: oklch(0.97 0 0);
 21 |   --accent-foreground: oklch(0.205 0 0);
 22 |   --destructive: oklch(0.577 0.245 27.325);
 23 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 24 |   --border: oklch(0.922 0 0);
 25 |   --input: oklch(0.922 0 0);
 26 |   --ring: oklch(0.87 0 0);
 27 |   --chart-1: oklch(0.646 0.222 41.116);
 28 |   --chart-2: oklch(0.6 0.118 184.704);
 29 |   --chart-3: oklch(0.398 0.07 227.392);
 30 |   --chart-4: oklch(0.828 0.189 84.429);
 31 |   --chart-5: oklch(0.769 0.188 70.08);
 32 |   --radius: 0.625rem;
 33 |   --sidebar: oklch(0.985 0 0);
 34 |   --sidebar-foreground: oklch(0.145 0 0);
 35 |   --sidebar-primary: oklch(0.205 0 0);
 36 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 37 |   --sidebar-accent: oklch(0.97 0 0);
 38 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 39 |   --sidebar-border: oklch(0.922 0 0);
 40 |   --sidebar-ring: oklch(0.87 0 0);
 41 | }
 42 | 
 43 | .dark {
 44 |   --background: oklch(0.145 0 0);
 45 |   --foreground: oklch(0.985 0 0);
 46 |   --card: oklch(0.145 0 0);
 47 |   --card-foreground: oklch(0.985 0 0);
 48 |   --popover: oklch(0.145 0 0);
 49 |   --popover-foreground: oklch(0.985 0 0);
 50 |   --primary: oklch(0.985 0 0);
 51 |   --primary-foreground: oklch(0.205 0 0);
 52 |   --secondary: oklch(0.269 0 0);
 53 |   --secondary-foreground: oklch(0.985 0 0);
 54 |   --muted: oklch(0.269 0 0);
 55 |   --muted-foreground: oklch(0.708 0 0);
 56 |   --accent: oklch(0.269 0 0);
 57 |   --accent-foreground: oklch(0.985 0 0);
 58 |   --destructive: oklch(0.396 0.141 25.723);
 59 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 60 |   --border: oklch(0.269 0 0);
 61 |   --input: oklch(0.269 0 0);
 62 |   --ring: oklch(0.439 0 0);
 63 |   --chart-1: oklch(0.488 0.243 264.376);
 64 |   --chart-2: oklch(0.696 0.17 162.48);
 65 |   --chart-3: oklch(0.769 0.188 70.08);
 66 |   --chart-4: oklch(0.627 0.265 303.9);
 67 |   --chart-5: oklch(0.645 0.246 16.439);
 68 |   --sidebar: oklch(0.205 0 0);
 69 |   --sidebar-foreground: oklch(0.985 0 0);
 70 |   --sidebar-primary: oklch(0.488 0.243 264.376);
 71 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 72 |   --sidebar-accent: oklch(0.269 0 0);
 73 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 74 |   --sidebar-border: oklch(0.269 0 0);
 75 |   --sidebar-ring: oklch(0.439 0 0);
 76 | }
 77 | 
 78 | @theme inline {
 79 |   --color-background: var(--background);
 80 |   --color-foreground: var(--foreground);
 81 |   --color-card: var(--card);
 82 |   --color-card-foreground: var(--card-foreground);
 83 |   --color-popover: var(--popover);
 84 |   --color-popover-foreground: var(--popover-foreground);
 85 |   --color-primary: var(--primary);
 86 |   --color-primary-foreground: var(--primary-foreground);
 87 |   --color-secondary: var(--secondary);
 88 |   --color-secondary-foreground: var(--secondary-foreground);
 89 |   --color-muted: var(--muted);
 90 |   --color-muted-foreground: var(--muted-foreground);
 91 |   --color-accent: var(--accent);
 92 |   --color-accent-foreground: var(--accent-foreground);
 93 |   --color-destructive: var(--destructive);
 94 |   --color-destructive-foreground: var(--destructive-foreground);
 95 |   --color-border: var(--border);
 96 |   --color-input: var(--input);
 97 |   --color-ring: var(--ring);
 98 |   --color-chart-1: var(--chart-1);
 99 |   --color-chart-2: var(--chart-2);
100 |   --color-chart-3: var(--chart-3);
101 |   --color-chart-4: var(--chart-4);
102 |   --color-chart-5: var(--chart-5);
103 |   --radius-sm: calc(var(--radius) - 4px);
104 |   --radius-md: calc(var(--radius) - 2px);
105 |   --radius-lg: var(--radius);
106 |   --radius-xl: calc(var(--radius) + 4px);
107 |   --color-sidebar: var(--sidebar);
108 |   --color-sidebar-foreground: var(--sidebar-foreground);
109 |   --color-sidebar-primary: var(--sidebar-primary);
110 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
111 |   --color-sidebar-accent: var(--sidebar-accent);
112 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
113 |   --color-sidebar-border: var(--sidebar-border);
114 |   --color-sidebar-ring: var(--sidebar-ring);
115 | }
116 | 
117 | @layer base {
118 |   * {
119 |     @apply border-border outline-ring/50;
120 |   }
121 | 
122 |   body {
123 |     @apply bg-background text-foreground;
124 |   }
125 | 
126 |   :root {
127 |     --chart-1: 12 76% 61%;
128 |     --chart-2: 173 58% 39%;
129 |     --chart-3: 197 37% 24%;
130 |     --chart-4: 43 74% 66%;
131 |     --chart-5: 27 87% 67%;
132 |   }
133 | 
134 |   .dark {
135 |     --chart-1: 220 70% 50%;
136 |     --chart-2: 160 60% 45%;
137 |     --chart-3: 30 80% 55%;
138 |     --chart-4: 280 65% 60%;
139 |     --chart-5: 340 75% 55%;
140 |   }
141 | }
142 | 
143 | @layer utilities {
144 |   .shadow-inner-right {
145 |     box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
146 |   }
147 | 
148 |   .shadow-inner-left {
149 |     box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/agent/ui/styles.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | :root {
  8 |   --background: oklch(1 0 0);
  9 |   --foreground: oklch(0.145 0 0);
 10 |   --card: oklch(1 0 0);
 11 |   --card-foreground: oklch(0.145 0 0);
 12 |   --popover: oklch(1 0 0);
 13 |   --popover-foreground: oklch(0.145 0 0);
 14 |   --primary: oklch(0.205 0 0);
 15 |   --primary-foreground: oklch(0.985 0 0);
 16 |   --secondary: oklch(0.97 0 0);
 17 |   --secondary-foreground: oklch(0.205 0 0);
 18 |   --muted: oklch(0.97 0 0);
 19 |   --muted-foreground: oklch(0.556 0 0);
 20 |   --accent: oklch(0.97 0 0);
 21 |   --accent-foreground: oklch(0.205 0 0);
 22 |   --destructive: oklch(0.577 0.245 27.325);
 23 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 24 |   --border: oklch(0.922 0 0);
 25 |   --input: oklch(0.922 0 0);
 26 |   --ring: oklch(0.87 0 0);
 27 |   --chart-1: oklch(0.646 0.222 41.116);
 28 |   --chart-2: oklch(0.6 0.118 184.704);
 29 |   --chart-3: oklch(0.398 0.07 227.392);
 30 |   --chart-4: oklch(0.828 0.189 84.429);
 31 |   --chart-5: oklch(0.769 0.188 70.08);
 32 |   --radius: 0.625rem;
 33 |   --sidebar: oklch(0.985 0 0);
 34 |   --sidebar-foreground: oklch(0.145 0 0);
 35 |   --sidebar-primary: oklch(0.205 0 0);
 36 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 37 |   --sidebar-accent: oklch(0.97 0 0);
 38 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 39 |   --sidebar-border: oklch(0.922 0 0);
 40 |   --sidebar-ring: oklch(0.87 0 0);
 41 | }
 42 | 
 43 | .dark {
 44 |   --background: oklch(0.145 0 0);
 45 |   --foreground: oklch(0.985 0 0);
 46 |   --card: oklch(0.145 0 0);
 47 |   --card-foreground: oklch(0.985 0 0);
 48 |   --popover: oklch(0.145 0 0);
 49 |   --popover-foreground: oklch(0.985 0 0);
 50 |   --primary: oklch(0.985 0 0);
 51 |   --primary-foreground: oklch(0.205 0 0);
 52 |   --secondary: oklch(0.269 0 0);
 53 |   --secondary-foreground: oklch(0.985 0 0);
 54 |   --muted: oklch(0.269 0 0);
 55 |   --muted-foreground: oklch(0.708 0 0);
 56 |   --accent: oklch(0.269 0 0);
 57 |   --accent-foreground: oklch(0.985 0 0);
 58 |   --destructive: oklch(0.396 0.141 25.723);
 59 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 60 |   --border: oklch(0.269 0 0);
 61 |   --input: oklch(0.269 0 0);
 62 |   --ring: oklch(0.439 0 0);
 63 |   --chart-1: oklch(0.488 0.243 264.376);
 64 |   --chart-2: oklch(0.696 0.17 162.48);
 65 |   --chart-3: oklch(0.769 0.188 70.08);
 66 |   --chart-4: oklch(0.627 0.265 303.9);
 67 |   --chart-5: oklch(0.645 0.246 16.439);
 68 |   --sidebar: oklch(0.205 0 0);
 69 |   --sidebar-foreground: oklch(0.985 0 0);
 70 |   --sidebar-primary: oklch(0.488 0.243 264.376);
 71 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 72 |   --sidebar-accent: oklch(0.269 0 0);
 73 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 74 |   --sidebar-border: oklch(0.269 0 0);
 75 |   --sidebar-ring: oklch(0.439 0 0);
 76 | }
 77 | 
 78 | @theme inline {
 79 |   --color-background: var(--background);
 80 |   --color-foreground: var(--foreground);
 81 |   --color-card: var(--card);
 82 |   --color-card-foreground: var(--card-foreground);
 83 |   --color-popover: var(--popover);
 84 |   --color-popover-foreground: var(--popover-foreground);
 85 |   --color-primary: var(--primary);
 86 |   --color-primary-foreground: var(--primary-foreground);
 87 |   --color-secondary: var(--secondary);
 88 |   --color-secondary-foreground: var(--secondary-foreground);
 89 |   --color-muted: var(--muted);
 90 |   --color-muted-foreground: var(--muted-foreground);
 91 |   --color-accent: var(--accent);
 92 |   --color-accent-foreground: var(--accent-foreground);
 93 |   --color-destructive: var(--destructive);
 94 |   --color-destructive-foreground: var(--destructive-foreground);
 95 |   --color-border: var(--border);
 96 |   --color-input: var(--input);
 97 |   --color-ring: var(--ring);
 98 |   --color-chart-1: var(--chart-1);
 99 |   --color-chart-2: var(--chart-2);
100 |   --color-chart-3: var(--chart-3);
101 |   --color-chart-4: var(--chart-4);
102 |   --color-chart-5: var(--chart-5);
103 |   --radius-sm: calc(var(--radius) - 4px);
104 |   --radius-md: calc(var(--radius) - 2px);
105 |   --radius-lg: var(--radius);
106 |   --radius-xl: calc(var(--radius) + 4px);
107 |   --color-sidebar: var(--sidebar);
108 |   --color-sidebar-foreground: var(--sidebar-foreground);
109 |   --color-sidebar-primary: var(--sidebar-primary);
110 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
111 |   --color-sidebar-accent: var(--sidebar-accent);
112 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
113 |   --color-sidebar-border: var(--sidebar-border);
114 |   --color-sidebar-ring: var(--sidebar-ring);
115 | }
116 | 
117 | @layer base {
118 |   * {
119 |     @apply border-border outline-ring/50;
120 |   }
121 | 
122 |   body {
123 |     @apply bg-background text-foreground;
124 |   }
125 | 
126 |   :root {
127 |     --chart-1: 12 76% 61%;
128 |     --chart-2: 173 58% 39%;
129 |     --chart-3: 197 37% 24%;
130 |     --chart-4: 43 74% 66%;
131 |     --chart-5: 27 87% 67%;
132 |   }
133 | 
134 |   .dark {
135 |     --chart-1: 220 70% 50%;
136 |     --chart-2: 160 60% 45%;
137 |     --chart-3: 30 80% 55%;
138 |     --chart-4: 280 65% 60%;
139 |     --chart-5: 340 75% 55%;
140 |   }
141 | }
142 | 
143 | @layer utilities {
144 |   .shadow-inner-right {
145 |     box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
146 |   }
147 | 
148 |   .shadow-inner-left {
149 |     box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 98 51">
2 | <path
3 |   fillRule="evenodd"
4 |   clipRule="evenodd"
5 |   d="M25.5144 0.394531H73.3011C86.9178 0.394531 97.9949 11.5154 97.9949 25.1847C97.9949 38.8539 86.9178 49.9748 73.3011 49.9748H25.5144C11.8977 49.9748 0.820557 38.8539 0.820557 25.1847C0.820557 11.5154 11.8977 0.394531 25.5144 0.394531ZM47.4544 38.8228C48.0543 39.454 48.9423 39.4228 49.7291 39.2592L49.7369 39.2631C50.1021 38.9659 49.583 38.5896 49.0873 38.2302C48.79 38.0146 48.5012 37.8052 48.4165 37.6226C48.6908 37.2878 47.8793 36.5277 47.2475 35.936C46.9822 35.6875 46.7487 35.4688 46.6404 35.3236C46.1908 34.8341 46.0101 34.2163 45.8283 33.5949C45.7077 33.1826 45.5866 32.7687 45.3862 32.3895C44.1516 29.5216 42.7377 26.6771 40.7552 24.2495C39.4811 22.636 38.027 21.1911 36.5723 19.7457C35.6346 18.8139 34.6967 17.8819 33.8066 16.9044C32.8908 15.9585 32.3396 14.7932 31.7874 13.6259C31.3252 12.6488 30.8624 11.6702 30.1844 10.8179C28.1317 7.77859 21.6506 6.94861 20.7002 11.2427C20.7041 11.3751 20.6613 11.4609 20.5444 11.5466C20.0186 11.9324 19.5512 12.3688 19.1578 12.8987C18.1958 14.243 18.0478 16.5225 19.2474 17.7305C19.2492 17.7046 19.2508 17.6787 19.2525 17.653C19.2926 17.043 19.3301 16.4729 19.8122 16.0355C20.7392 16.8343 22.1452 17.1187 23.2202 16.5225C24.5164 18.3826 24.9292 20.6311 25.3435 22.8873C25.6886 24.7667 26.0347 26.6515 26.8931 28.3214C26.9109 28.351 26.9286 28.3805 26.9464 28.4101C27.451 29.2506 27.9637 30.1046 28.6108 30.8386C28.8459 31.2032 29.3286 31.5967 29.8104 31.9895C30.4462 32.5079 31.0805 33.025 31.1425 33.4727C31.1453 33.6676 31.1445 33.865 31.1436 34.0636C31.1386 35.2395 31.1334 36.4572 31.8864 37.4239C32.3032 38.2695 31.2827 39.1189 30.4609 39.0137C30.0103 39.0762 29.518 38.9574 29.0292 38.8395C28.3604 38.6781 27.6981 38.5182 27.158 38.8267C27.0065 38.9907 26.7889 38.9965 26.5702 39.0022C26.311 39.0091 26.0503 39.016 25.896 39.2865C25.8644 39.3669 25.7903 39.4577 25.7133 39.5521C25.5443 39.7594 25.3611 39.9841 25.5806 40.1554C25.6002 40.1405 25.6198 40.1255 25.6393 40.1106C25.9718 39.8568 26.2885 39.6149 26.7374 39.7658C26.6777 40.0975 26.8918 40.1863 27.1058 40.2751C27.1432 40.2906 27.1805 40.3062 27.2164 40.323C27.2141 40.4 27.199 40.4777 27.1839 40.5548C27.1479 40.739 27.1126 40.9196 27.2554 41.0789C27.3232 41.0099 27.3831 40.9325 27.4431 40.8548C27.5901 40.6649 27.7378 40.4739 28.0032 40.4048C28.5871 41.1849 29.1753 40.8609 29.9134 40.4543C30.7458 39.9958 31.7688 39.4322 33.1912 40.2294C32.646 40.2022 32.1591 40.2684 31.793 40.7204C31.7034 40.8217 31.6255 40.9386 31.7852 41.0711C32.6268 40.5256 32.9769 40.7217 33.3065 40.9062C33.5444 41.0394 33.7715 41.1666 34.165 41.0049C34.258 40.9563 34.351 40.9062 34.4441 40.8559C35.0759 40.5149 35.7167 40.169 36.4669 40.2879C35.9065 40.4496 35.7072 40.8049 35.4896 41.1928C35.382 41.3845 35.2699 41.5843 35.1075 41.7725C35.0219 41.8582 34.9829 41.9595 35.0803 42.1037C36.2536 42.0061 36.6969 41.7085 37.2959 41.3064C37.5817 41.1145 37.903 40.8989 38.3559 40.6698C38.8566 40.3614 39.3573 40.5586 39.8425 40.7498C40.3689 40.9571 40.877 41.1573 41.3472 40.697C41.4957 40.557 41.6819 40.5553 41.8675 40.5536C41.9349 40.553 42.0023 40.5523 42.0678 40.5451C41.9215 39.7609 41.0961 39.7702 40.2582 39.7795C39.2891 39.7903 38.3033 39.8014 38.3325 38.5851C39.233 37.9699 39.2413 36.9021 39.2492 35.8929C39.2511 35.6493 39.2529 35.4091 39.2673 35.1795C39.9296 35.5489 40.6302 35.8376 41.3264 36.1246C41.9813 36.3945 42.6323 36.6628 43.244 36.9953C43.8828 38.024 44.8799 39.3878 46.2081 39.2982C46.2431 39.193 46.2743 39.1033 46.3132 38.9981C46.3898 39.0115 46.4706 39.032 46.5529 39.0528C46.9014 39.1412 47.2748 39.2358 47.4544 38.8228ZM73.48 27.1315C74.249 27.899 75.2921 28.3302 76.3797 28.3302C77.4673 28.3302 78.5103 27.899 79.2794 27.1315C80.0484 26.364 80.4804 25.323 80.4804 24.2375C80.4804 23.1521 80.0484 22.1111 79.2794 21.3436C78.5103 20.5761 77.4673 20.1449 76.3797 20.1449C75.871 20.1449 75.3721 20.2392 74.9064 20.4181L72.5533 16.9819L70.9152 18.1046L73.28 21.558C72.6365 22.2995 72.2789 23.2501 72.2789 24.2375C72.2789 25.323 72.711 26.364 73.48 27.1315ZM66.1213 16.0159C66.6967 16.3004 67.331 16.446 67.9731 16.441C68.8492 16.4343 69.7002 16.1477 70.4012 15.6232C71.1022 15.0987 71.6165 14.3639 71.8687 13.5265C72.1209 12.6891 72.0977 11.7931 71.8025 10.9698C71.5074 10.1465 70.9558 9.43917 70.2285 8.95149C69.6956 8.59407 69.0859 8.36657 68.4487 8.28729C67.8115 8.20802 67.1646 8.27919 66.56 8.49509C65.9554 8.71098 65.4101 9.06555 64.9679 9.53025C64.5257 9.99495 64.1991 10.5568 64.0142 11.1705C63.8294 11.7843 63.7916 12.4327 63.9038 13.0637C64.016 13.6947 64.2751 14.2906 64.6603 14.8034C65.0455 15.3161 65.5459 15.7315 66.1213 16.0159ZM66.1213 39.7813C66.6967 40.0657 67.331 40.2113 67.9731 40.2064C68.8492 40.1996 69.7002 39.913 70.4012 39.3885C71.1022 38.864 71.6165 38.1292 71.8687 37.2918C72.1209 36.4544 72.0977 35.5584 71.8025 34.7351C71.5074 33.9118 70.9558 33.2045 70.2285 32.7168C69.6956 32.3594 69.0859 32.1319 68.4487 32.0526C67.8115 31.9734 67.1646 32.0445 66.56 32.2604C65.9554 32.4763 65.4101 32.8309 64.9679 33.2956C64.5257 33.7603 64.1991 34.3221 64.0142 34.9359C63.8294 35.5496 63.7916 36.1981 63.9038 36.8291C64.016 37.4601 64.2751 38.0559 64.6603 38.5687C65.0455 39.0815 65.5459 39.4968 66.1213 39.7813ZM69.8934 25.2555V23.2207H63.6171C63.4592 22.6038 63.1581 22.0323 62.738 21.5523L65.0993 18.0525L63.382 16.9131L61.0207 20.4128C60.5879 20.2564 60.1317 20.1738 59.6714 20.1686C58.5869 20.1686 57.5469 20.5974 56.7801 21.3606C56.0133 22.1237 55.5825 23.1588 55.5825 24.2381C55.5825 25.3174 56.0133 26.3525 56.7801 27.1156C57.5469 27.8788 58.5869 28.3076 59.6714 28.3076C60.1317 28.3024 60.5879 28.2198 61.0207 28.0634L63.382 31.5631L65.0788 30.4237L62.738 26.9239C63.1581 26.4439 63.4592 25.8724 63.6171 25.2555H69.8934Z"
6 |   fill="#264849"
7 | />
8 | </svg>


--------------------------------------------------------------------------------
/src/agent/ui/instance/useInstanceActions.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { toast } from "sonner";
  3 | import { useStreamContext } from "@langchain/langgraph-sdk/react-ui";
  4 | 
  5 | export function useInstanceActions({ instanceId }: { instanceId: string }) {
  6 |   const stream = useStreamContext();
  7 |   const [isStopping, setIsStopping] = useState(false);
  8 |   const [isStopped, setIsStopped] = useState(false);
  9 |   const [status, setStatus] = useState<
 10 |     "running" | "terminated" | "paused" | "unknown"
 11 |   >("unknown");
 12 |   const [screenshot, setScreenshot] = useState<string>();
 13 |   const [isScreenshotHovered, setIsScreenshotHovered] = useState(false);
 14 |   const [isLoading, setIsLoading] = useState(true);
 15 |   const [isExpanded, setIsExpanded] = useState(false);
 16 | 
 17 |   const handleStop = async () => {
 18 |     if (!instanceId) {
 19 |       toast.warning("Instance not found", {
 20 |         richColors: true,
 21 |         closeButton: true,
 22 |         duration: 5000,
 23 |       });
 24 |       return;
 25 |     }
 26 | 
 27 |     let loadingToastId: string | number | undefined;
 28 |     try {
 29 |       setIsStopping(true);
 30 |       loadingToastId = toast.loading("Stopping instance...", {
 31 |         richColors: true,
 32 |         closeButton: true,
 33 |         duration: 10000,
 34 |       });
 35 |       await fetch("/api/instance/stop", {
 36 |         method: "POST",
 37 |         headers: {
 38 |           "Content-Type": "application/json",
 39 |         },
 40 |         body: JSON.stringify({ instanceId }),
 41 |       });
 42 |       // Update the graph state to remove the instanceId and streamUrl, so that if
 43 |       // the graph is re-invoked, it will be forced to create a new instance instead of
 44 |       // attempting to use the terminated instance.
 45 |       stream.submit(null, {
 46 |         command: {
 47 |           update: {
 48 |             instanceId: null,
 49 |             streamUrl: null,
 50 |           },
 51 |           goto: "__end__",
 52 |         },
 53 |       });
 54 |       setIsStopped(true);
 55 |       toast.dismiss(loadingToastId);
 56 |       toast.success("Instance stopped successfully", {
 57 |         richColors: true,
 58 |         closeButton: true,
 59 |         duration: 5000,
 60 |       });
 61 |       setStatus("terminated");
 62 |     } catch (e) {
 63 |       console.error(e);
 64 |       if (loadingToastId) {
 65 |         toast.dismiss(loadingToastId);
 66 |       }
 67 |       toast.error("Failed to stop instance", {
 68 |         richColors: true,
 69 |         closeButton: true,
 70 |         duration: 5000,
 71 |       });
 72 |     } finally {
 73 |       setIsStopping(false);
 74 |     }
 75 |   };
 76 | 
 77 |   const handlePause = async () => {
 78 |     if (!instanceId) {
 79 |       toast.warning("Instance not found", {
 80 |         richColors: true,
 81 |         closeButton: true,
 82 |         duration: 5000,
 83 |       });
 84 |       return;
 85 |     }
 86 | 
 87 |     let loadingToastId: string | number | undefined;
 88 |     try {
 89 |       setIsStopping(true);
 90 |       loadingToastId = toast.loading("Pausing instance...", {
 91 |         richColors: true,
 92 |         closeButton: true,
 93 |         duration: 10000,
 94 |       });
 95 |       await fetch("/api/instance/pause", {
 96 |         method: "POST",
 97 |         headers: {
 98 |           "Content-Type": "application/json",
 99 |         },
100 |         body: JSON.stringify({ instanceId }),
101 |       });
102 |       setStatus("paused");
103 |       toast.dismiss(loadingToastId);
104 |       toast.success("Instance paused successfully", {
105 |         richColors: true,
106 |         closeButton: true,
107 |         duration: 5000,
108 |       });
109 |     } catch (e) {
110 |       console.error(e);
111 |       if (loadingToastId) {
112 |         toast.dismiss(loadingToastId);
113 |       }
114 |       toast.error("Failed to pause instance", {
115 |         richColors: true,
116 |         closeButton: true,
117 |         duration: 5000,
118 |       });
119 |     } finally {
120 |       setIsStopping(false);
121 |     }
122 |   };
123 | 
124 |   const handleResume = async () => {
125 |     if (!instanceId) {
126 |       toast.warning("Instance not found", {
127 |         richColors: true,
128 |         closeButton: true,
129 |         duration: 5000,
130 |       });
131 |       return;
132 |     }
133 | 
134 |     let loadingToastId: string | number | undefined;
135 |     try {
136 |       loadingToastId = toast.loading("Resuming instance...", {
137 |         richColors: true,
138 |         closeButton: true,
139 |         duration: 10000,
140 |       });
141 |       await fetch("/api/instance/resume", {
142 |         method: "POST",
143 |         headers: {
144 |           "Content-Type": "application/json",
145 |         },
146 |         body: JSON.stringify({ instanceId }),
147 |       });
148 |       setStatus("running");
149 |       setScreenshot(undefined);
150 |       toast.dismiss(loadingToastId);
151 |       toast.success("Instance resumed successfully", {
152 |         richColors: true,
153 |         closeButton: true,
154 |         duration: 5000,
155 |       });
156 |     } catch (e) {
157 |       console.error(e);
158 |       if (loadingToastId) {
159 |         toast.dismiss(loadingToastId);
160 |       }
161 |       toast.error("Failed to resume instance", {
162 |         richColors: true,
163 |         closeButton: true,
164 |         duration: 5000,
165 |       });
166 |     }
167 |   };
168 | 
169 |   const handleExpand = () => {
170 |     setIsExpanded((e) => !e);
171 |   };
172 | 
173 |   return {
174 |     handleStop,
175 |     handlePause,
176 |     handleResume,
177 |     handleExpand,
178 |     isStopping,
179 |     setIsStopped,
180 |     isStopped,
181 |     setStatus,
182 |     status,
183 |     setScreenshot,
184 |     screenshot,
185 |     setIsScreenshotHovered,
186 |     isScreenshotHovered,
187 |     setIsLoading,
188 |     isLoading,
189 |     isExpanded,
190 |   };
191 | }
192 | 


--------------------------------------------------------------------------------
/src/components/icons/langgraph.tsx:
--------------------------------------------------------------------------------
 1 | export function LangGraphLogoSVG({
 2 |   className,
 3 |   width,
 4 |   height,
 5 | }: {
 6 |   width?: number;
 7 |   height?: number;
 8 |   className?: string;
 9 | }) {
10 |   return (
11 |     <svg
12 |       width={width}
13 |       height={height}
14 |       viewBox="0 0 98 51"
15 |       fill="none"
16 |       xmlns="http://www.w3.org/2000/svg"
17 |       className={className}
18 |     >
19 |       <path
20 |         fillRule="evenodd"
21 |         clipRule="evenodd"
22 |         d="M25.5144 0.394531H73.3011C86.9178 0.394531 97.9949 11.5154 97.9949 25.1847C97.9949 38.8539 86.9178 49.9748 73.3011 49.9748H25.5144C11.8977 49.9748 0.820557 38.8539 0.820557 25.1847C0.820557 11.5154 11.8977 0.394531 25.5144 0.394531ZM47.4544 38.8228C48.0543 39.454 48.9423 39.4228 49.7291 39.2592L49.7369 39.2631C50.1021 38.9659 49.583 38.5896 49.0873 38.2302C48.79 38.0146 48.5012 37.8052 48.4165 37.6226C48.6908 37.2878 47.8793 36.5277 47.2475 35.936C46.9822 35.6875 46.7487 35.4688 46.6404 35.3236C46.1908 34.8341 46.0101 34.2163 45.8283 33.5949C45.7077 33.1826 45.5866 32.7687 45.3862 32.3895C44.1516 29.5216 42.7377 26.6771 40.7552 24.2495C39.4811 22.636 38.027 21.1911 36.5723 19.7457C35.6346 18.8139 34.6967 17.8819 33.8066 16.9044C32.8908 15.9585 32.3396 14.7932 31.7874 13.6259C31.3252 12.6488 30.8624 11.6702 30.1844 10.8179C28.1317 7.77859 21.6506 6.94861 20.7002 11.2427C20.7041 11.3751 20.6613 11.4609 20.5444 11.5466C20.0186 11.9324 19.5512 12.3688 19.1578 12.8987C18.1958 14.243 18.0478 16.5225 19.2474 17.7305C19.2492 17.7046 19.2508 17.6787 19.2525 17.653C19.2926 17.043 19.3301 16.4729 19.8122 16.0355C20.7392 16.8343 22.1452 17.1187 23.2202 16.5225C24.5164 18.3826 24.9292 20.6311 25.3435 22.8873C25.6886 24.7667 26.0347 26.6515 26.8931 28.3214C26.9109 28.351 26.9286 28.3805 26.9464 28.4101C27.451 29.2506 27.9637 30.1046 28.6108 30.8386C28.8459 31.2032 29.3286 31.5967 29.8104 31.9895C30.4462 32.5079 31.0805 33.025 31.1425 33.4727C31.1453 33.6676 31.1445 33.865 31.1436 34.0636C31.1386 35.2395 31.1334 36.4572 31.8864 37.4239C32.3032 38.2695 31.2827 39.1189 30.4609 39.0137C30.0103 39.0762 29.518 38.9574 29.0292 38.8395C28.3604 38.6781 27.6981 38.5182 27.158 38.8267C27.0065 38.9907 26.7889 38.9965 26.5702 39.0022C26.311 39.0091 26.0503 39.016 25.896 39.2865C25.8644 39.3669 25.7903 39.4577 25.7133 39.5521C25.5443 39.7594 25.3611 39.9841 25.5806 40.1554C25.6002 40.1405 25.6198 40.1255 25.6393 40.1106C25.9718 39.8568 26.2885 39.6149 26.7374 39.7658C26.6777 40.0975 26.8918 40.1863 27.1058 40.2751C27.1432 40.2906 27.1805 40.3062 27.2164 40.323C27.2141 40.4 27.199 40.4777 27.1839 40.5548C27.1479 40.739 27.1126 40.9196 27.2554 41.0789C27.3232 41.0099 27.3831 40.9325 27.4431 40.8548C27.5901 40.6649 27.7378 40.4739 28.0032 40.4048C28.5871 41.1849 29.1753 40.8609 29.9134 40.4543C30.7458 39.9958 31.7688 39.4322 33.1912 40.2294C32.646 40.2022 32.1591 40.2684 31.793 40.7204C31.7034 40.8217 31.6255 40.9386 31.7852 41.0711C32.6268 40.5256 32.9769 40.7217 33.3065 40.9062C33.5444 41.0394 33.7715 41.1666 34.165 41.0049C34.258 40.9563 34.351 40.9062 34.4441 40.8559C35.0759 40.5149 35.7167 40.169 36.4669 40.2879C35.9065 40.4496 35.7072 40.8049 35.4896 41.1928C35.382 41.3845 35.2699 41.5843 35.1075 41.7725C35.0219 41.8582 34.9829 41.9595 35.0803 42.1037C36.2536 42.0061 36.6969 41.7085 37.2959 41.3064C37.5817 41.1145 37.903 40.8989 38.3559 40.6698C38.8566 40.3614 39.3573 40.5586 39.8425 40.7498C40.3689 40.9571 40.877 41.1573 41.3472 40.697C41.4957 40.557 41.6819 40.5553 41.8675 40.5536C41.9349 40.553 42.0023 40.5523 42.0678 40.5451C41.9215 39.7609 41.0961 39.7702 40.2582 39.7795C39.2891 39.7903 38.3033 39.8014 38.3325 38.5851C39.233 37.9699 39.2413 36.9021 39.2492 35.8929C39.2511 35.6493 39.2529 35.4091 39.2673 35.1795C39.9296 35.5489 40.6302 35.8376 41.3264 36.1246C41.9813 36.3945 42.6323 36.6628 43.244 36.9953C43.8828 38.024 44.8799 39.3878 46.2081 39.2982C46.2431 39.193 46.2743 39.1033 46.3132 38.9981C46.3898 39.0115 46.4706 39.032 46.5529 39.0528C46.9014 39.1412 47.2748 39.2358 47.4544 38.8228ZM73.48 27.1315C74.249 27.899 75.2921 28.3302 76.3797 28.3302C77.4673 28.3302 78.5103 27.899 79.2794 27.1315C80.0484 26.364 80.4804 25.323 80.4804 24.2375C80.4804 23.1521 80.0484 22.1111 79.2794 21.3436C78.5103 20.5761 77.4673 20.1449 76.3797 20.1449C75.871 20.1449 75.3721 20.2392 74.9064 20.4181L72.5533 16.9819L70.9152 18.1046L73.28 21.558C72.6365 22.2995 72.2789 23.2501 72.2789 24.2375C72.2789 25.323 72.711 26.364 73.48 27.1315ZM66.1213 16.0159C66.6967 16.3004 67.331 16.446 67.9731 16.441C68.8492 16.4343 69.7002 16.1477 70.4012 15.6232C71.1022 15.0987 71.6165 14.3639 71.8687 13.5265C72.1209 12.6891 72.0977 11.7931 71.8025 10.9698C71.5074 10.1465 70.9558 9.43917 70.2285 8.95149C69.6956 8.59407 69.0859 8.36657 68.4487 8.28729C67.8115 8.20802 67.1646 8.27919 66.56 8.49509C65.9554 8.71098 65.4101 9.06555 64.9679 9.53025C64.5257 9.99495 64.1991 10.5568 64.0142 11.1705C63.8294 11.7843 63.7916 12.4327 63.9038 13.0637C64.016 13.6947 64.2751 14.2906 64.6603 14.8034C65.0455 15.3161 65.5459 15.7315 66.1213 16.0159ZM66.1213 39.7813C66.6967 40.0657 67.331 40.2113 67.9731 40.2064C68.8492 40.1996 69.7002 39.913 70.4012 39.3885C71.1022 38.864 71.6165 38.1292 71.8687 37.2918C72.1209 36.4544 72.0977 35.5584 71.8025 34.7351C71.5074 33.9118 70.9558 33.2045 70.2285 32.7168C69.6956 32.3594 69.0859 32.1319 68.4487 32.0526C67.8115 31.9734 67.1646 32.0445 66.56 32.2604C65.9554 32.4763 65.4101 32.8309 64.9679 33.2956C64.5257 33.7603 64.1991 34.3221 64.0142 34.9359C63.8294 35.5496 63.7916 36.1981 63.9038 36.8291C64.016 37.4601 64.2751 38.0559 64.6603 38.5687C65.0455 39.0815 65.5459 39.4968 66.1213 39.7813ZM69.8934 25.2555V23.2207H63.6171C63.4592 22.6038 63.1581 22.0323 62.738 21.5523L65.0993 18.0525L63.382 16.9131L61.0207 20.4128C60.5879 20.2564 60.1317 20.1738 59.6714 20.1686C58.5869 20.1686 57.5469 20.5974 56.7801 21.3606C56.0133 22.1237 55.5825 23.1588 55.5825 24.2381C55.5825 25.3174 56.0133 26.3525 56.7801 27.1156C57.5469 27.8788 58.5869 28.3076 59.6714 28.3076C60.1317 28.3024 60.5879 28.2198 61.0207 28.0634L63.382 31.5631L65.0788 30.4237L62.738 26.9239C63.1581 26.4439 63.4592 25.8724 63.6171 25.2555H69.8934Z"
23 |         fill="#264849"
24 |       />
25 |     </svg>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/shared.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   XIcon,
  3 |   SendHorizontal,
  4 |   RefreshCcw,
  5 |   Pencil,
  6 |   Copy,
  7 |   CopyCheck,
  8 |   ChevronLeft,
  9 |   ChevronRight,
 10 | } from "lucide-react";
 11 | import { TooltipIconButton } from "../tooltip-icon-button";
 12 | import { AnimatePresence, motion } from "framer-motion";
 13 | import { useState } from "react";
 14 | import { Button } from "@/components/ui/button";
 15 | 
 16 | function ContentCopyable({
 17 |   content,
 18 |   disabled,
 19 | }: {
 20 |   content: string;
 21 |   disabled: boolean;
 22 | }) {
 23 |   const [copied, setCopied] = useState(false);
 24 | 
 25 |   const handleCopy = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 26 |     e.stopPropagation();
 27 |     navigator.clipboard.writeText(content);
 28 |     setCopied(true);
 29 |     setTimeout(() => setCopied(false), 2000);
 30 |   };
 31 | 
 32 |   return (
 33 |     <TooltipIconButton
 34 |       onClick={(e) => handleCopy(e)}
 35 |       variant="ghost"
 36 |       tooltip="Copy content"
 37 |       disabled={disabled}
 38 |     >
 39 |       <AnimatePresence mode="wait" initial={false}>
 40 |         {copied ? (
 41 |           <motion.div
 42 |             key="check"
 43 |             initial={{ opacity: 0, scale: 0.8 }}
 44 |             animate={{ opacity: 1, scale: 1 }}
 45 |             exit={{ opacity: 0, scale: 0.8 }}
 46 |             transition={{ duration: 0.15 }}
 47 |           >
 48 |             <CopyCheck className="text-green-500" />
 49 |           </motion.div>
 50 |         ) : (
 51 |           <motion.div
 52 |             key="copy"
 53 |             initial={{ opacity: 0, scale: 0.8 }}
 54 |             animate={{ opacity: 1, scale: 1 }}
 55 |             exit={{ opacity: 0, scale: 0.8 }}
 56 |             transition={{ duration: 0.15 }}
 57 |           >
 58 |             <Copy />
 59 |           </motion.div>
 60 |         )}
 61 |       </AnimatePresence>
 62 |     </TooltipIconButton>
 63 |   );
 64 | }
 65 | 
 66 | export function BranchSwitcher({
 67 |   branch,
 68 |   branchOptions,
 69 |   onSelect,
 70 |   isLoading,
 71 | }: {
 72 |   branch: string | undefined;
 73 |   branchOptions: string[] | undefined;
 74 |   onSelect: (branch: string) => void;
 75 |   isLoading: boolean;
 76 | }) {
 77 |   if (!branchOptions || !branch) return null;
 78 |   const index = branchOptions.indexOf(branch);
 79 | 
 80 |   return (
 81 |     <div className="flex items-center gap-2">
 82 |       <Button
 83 |         variant="ghost"
 84 |         size="icon"
 85 |         className="size-6 p-1"
 86 |         onClick={() => {
 87 |           const prevBranch = branchOptions[index - 1];
 88 |           if (!prevBranch) return;
 89 |           onSelect(prevBranch);
 90 |         }}
 91 |         disabled={isLoading}
 92 |       >
 93 |         <ChevronLeft />
 94 |       </Button>
 95 |       <span className="text-sm">
 96 |         {index + 1} / {branchOptions.length}
 97 |       </span>
 98 |       <Button
 99 |         variant="ghost"
100 |         size="icon"
101 |         className="size-6 p-1"
102 |         onClick={() => {
103 |           const nextBranch = branchOptions[index + 1];
104 |           if (!nextBranch) return;
105 |           onSelect(nextBranch);
106 |         }}
107 |         disabled={isLoading}
108 |       >
109 |         <ChevronRight />
110 |       </Button>
111 |     </div>
112 |   );
113 | }
114 | 
115 | export function CommandBar({
116 |   content,
117 |   isHumanMessage,
118 |   isAiMessage,
119 |   isEditing,
120 |   setIsEditing,
121 |   handleSubmitEdit,
122 |   handleRegenerate,
123 |   isLoading,
124 | }: {
125 |   content: string;
126 |   isHumanMessage?: boolean;
127 |   isAiMessage?: boolean;
128 |   isEditing?: boolean;
129 |   setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
130 |   handleSubmitEdit?: () => void;
131 |   handleRegenerate?: () => void;
132 |   isLoading: boolean;
133 | }) {
134 |   if (isHumanMessage && isAiMessage) {
135 |     throw new Error(
136 |       "Can only set one of isHumanMessage or isAiMessage to true, not both.",
137 |     );
138 |   }
139 | 
140 |   if (!isHumanMessage && !isAiMessage) {
141 |     throw new Error(
142 |       "One of isHumanMessage or isAiMessage must be set to true.",
143 |     );
144 |   }
145 | 
146 |   if (
147 |     isHumanMessage &&
148 |     (isEditing === undefined ||
149 |       setIsEditing === undefined ||
150 |       handleSubmitEdit === undefined)
151 |   ) {
152 |     throw new Error(
153 |       "If isHumanMessage is true, all of isEditing, setIsEditing, and handleSubmitEdit must be set.",
154 |     );
155 |   }
156 | 
157 |   const showEdit =
158 |     isHumanMessage &&
159 |     isEditing !== undefined &&
160 |     !!setIsEditing &&
161 |     !!handleSubmitEdit;
162 | 
163 |   if (isHumanMessage && isEditing && !!setIsEditing && !!handleSubmitEdit) {
164 |     return (
165 |       <div className="flex items-center gap-2">
166 |         <TooltipIconButton
167 |           disabled={isLoading}
168 |           tooltip="Cancel edit"
169 |           variant="ghost"
170 |           onClick={() => {
171 |             setIsEditing(false);
172 |           }}
173 |         >
174 |           <XIcon />
175 |         </TooltipIconButton>
176 |         <TooltipIconButton
177 |           disabled={isLoading}
178 |           tooltip="Submit"
179 |           variant="secondary"
180 |           onClick={handleSubmitEdit}
181 |         >
182 |           <SendHorizontal />
183 |         </TooltipIconButton>
184 |       </div>
185 |     );
186 |   }
187 | 
188 |   return (
189 |     <div className="flex items-center gap-2">
190 |       <ContentCopyable content={content} disabled={isLoading} />
191 |       {isAiMessage && !!handleRegenerate && (
192 |         <TooltipIconButton
193 |           disabled={isLoading}
194 |           tooltip="Refresh"
195 |           variant="ghost"
196 |           onClick={handleRegenerate}
197 |         >
198 |           <RefreshCcw />
199 |         </TooltipIconButton>
200 |       )}
201 |       {showEdit && (
202 |         <TooltipIconButton
203 |           disabled={isLoading}
204 |           tooltip="Edit"
205 |           variant="ghost"
206 |           onClick={() => {
207 |             setIsEditing?.(true);
208 |           }}
209 |         >
210 |           <Pencil />
211 |         </TooltipIconButton>
212 |       )}
213 |     </div>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/src/agent/ui/computer-use-tool-call.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import "./styles.css";
  4 | import type { ResponseComputerToolCall } from "openai/resources/responses/responses";
  5 | import {
  6 |   ArrowLeftRight,
  7 |   ArrowDownUp,
  8 |   Camera,
  9 |   Clock,
 10 |   MousePointer,
 11 |   Pointer,
 12 |   Type as TypeIcon,
 13 |   Mouse,
 14 |   KeyRound,
 15 | } from "lucide-react";
 16 | import { useState, useEffect } from "react";
 17 | import { useStreamContext } from "@langchain/langgraph-sdk/react-ui";
 18 | 
 19 | interface ComputerUseToolCallProps {
 20 |   toolCallId: string;
 21 |   action: ResponseComputerToolCall["action"];
 22 | }
 23 | 
 24 | function WaitCountdown({ toolCallId }: { toolCallId: string }) {
 25 |   const [isMostRecent, setIsMostRecent] = useState(true);
 26 |   const [timeLeft, setTimeLeft] = useState(2000); // Start at 2000ms
 27 |   const state = useStreamContext();
 28 | 
 29 |   useEffect(() => {
 30 |     if (!isMostRecent) return;
 31 |     const mostRecentToolCall = state.messages[state.messages.length - 1];
 32 |     if (
 33 |       mostRecentToolCall.type !== "tool" ||
 34 |       mostRecentToolCall.tool_call_id !== toolCallId
 35 |     ) {
 36 |       setIsMostRecent(false);
 37 |       setTimeLeft(0); // Set timeLeft to 0 when no longer the most recent
 38 |     }
 39 |   }, [state.messages]);
 40 | 
 41 |   useEffect(() => {
 42 |     // Don't set up the interval if we've already counted down to zero
 43 |     if (timeLeft <= 0) return;
 44 | 
 45 |     // Set up interval to update every 100ms
 46 |     const intervalId = setInterval(() => {
 47 |       setTimeLeft((prevTime) => {
 48 |         const newTime = prevTime - 100;
 49 |         return newTime < 0 ? 0 : newTime;
 50 |       });
 51 |     }, 100);
 52 | 
 53 |     // Clean up the interval when component unmounts or when timeLeft reaches 0
 54 |     return () => clearInterval(intervalId);
 55 |   }, [timeLeft]);
 56 | 
 57 |   // Format the time to display with 1 decimal place
 58 |   const displayTime = (timeLeft / 1000).toFixed(1);
 59 | 
 60 |   return (
 61 |     <div className="flex items-center justify-start gap-2">
 62 |       <Clock className="w-4 h-4 text-gray-400" />
 63 |       <p>Wait: {displayTime}s</p>
 64 |     </div>
 65 |   );
 66 | }
 67 | 
 68 | export function ComputerUseToolCall(props: ComputerUseToolCallProps) {
 69 |   const { toolCallId, action } = props;
 70 | 
 71 |   const renderActionContent = () => {
 72 |     switch (action.type) {
 73 |       case "click":
 74 |         return (
 75 |           <div className="flex items-center justify-start gap-2">
 76 |             <Mouse className="w-4 h-4 text-blue-500" />
 77 |             <p>
 78 |               Click ({action.button}) at x: {action.x}, y: {action.y}
 79 |             </p>
 80 |           </div>
 81 |         );
 82 |       case "double_click":
 83 |         return (
 84 |           <div className="flex items-center justify-start gap-2">
 85 |             <Pointer className="w-4 h-4 text-blue-500" />
 86 |             <p>
 87 |               Double click at x: {action.x}, y: {action.y}
 88 |             </p>
 89 |           </div>
 90 |         );
 91 |       case "drag":
 92 |         return (
 93 |           <div className="flex items-center justify-start gap-2">
 94 |             <MousePointer className="w-4 h-4 text-purple-500" />
 95 |             <p>
 96 |               Drag from ({action.path[0]?.x}, {action.path[0]?.y}) to (
 97 |               {action.path[action.path.length - 1]?.x},{" "}
 98 |               {action.path[action.path.length - 1]?.y})
 99 |             </p>
100 |           </div>
101 |         );
102 |       case "keypress":
103 |         return (
104 |           <div className="flex items-center justify-start gap-2">
105 |             <KeyRound className="w-4 h-4 text-green-500" />
106 |             <p>Keypress: {action.keys.join(" + ")}</p>
107 |           </div>
108 |         );
109 |       case "move":
110 |         return (
111 |           <div className="flex items-center justify-start gap-2">
112 |             <MousePointer className="w-4 h-4 text-gray-500" />
113 |             <p>
114 |               Move to x: {action.x}, y: {action.y}
115 |             </p>
116 |           </div>
117 |         );
118 |       case "screenshot":
119 |         return (
120 |           <div className="flex items-center justify-start gap-2">
121 |             <Camera className="w-4 h-4 text-indigo-500" />
122 |             <p>Take screenshot</p>
123 |           </div>
124 |         );
125 |       case "scroll":
126 |         return (
127 |           <div className="flex items-center justify-start gap-2">
128 |             <div className="flex flex-col">
129 |               <ArrowLeftRight className="w-4 h-4 text-amber-500" />
130 |               <ArrowDownUp className="w-4 h-4 text-amber-500" />
131 |             </div>
132 |             <p>
133 |               Scroll x: {action.scroll_x}, y: {action.scroll_y} at position (
134 |               {action.x}, {action.y})
135 |             </p>
136 |           </div>
137 |         );
138 |       case "type":
139 |         return (
140 |           <div className="flex items-center justify-start gap-2">
141 |             <TypeIcon className="w-4 h-4 text-teal-500" />
142 |             <p>Type: "{action.text}"</p>
143 |           </div>
144 |         );
145 |       case "wait":
146 |         return <WaitCountdown toolCallId={toolCallId} />;
147 |       default: {
148 |         // Handle PendingSafetyCheck or any other cases
149 |         const pendingCheck =
150 |           action as unknown as ResponseComputerToolCall.PendingSafetyCheck;
151 |         if ("code" in pendingCheck && "message" in pendingCheck) {
152 |           return (
153 |             <div className="flex items-center justify-start gap-2">
154 |               <span className="text-yellow-500">⚠️</span>
155 |               <p>Safety check: {pendingCheck.message}</p>
156 |             </div>
157 |           );
158 |         }
159 |         return <span>Unknown action</span>;
160 |       }
161 |     }
162 |   };
163 | 
164 |   return (
165 |     <div className="flex flex-col gap-2 items-start justify-start w-full min-w-[320px] max-w-[360px] border rounded-md bg-gray-50 sm:max-w-[536px] sm:min-w-[500px]">
166 |       {/* Desktop and mobile header row */}
167 |       <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center w-full gap-1 lg:gap-0 px-3 py-2 border-b-[1px] border-gray-200">
168 |         {/* Mobile layout: Title in first row */}
169 |         <div className="flex justify-between items-center w-full lg:hidden">
170 |           <p className="text-sm font-medium">Computer Action</p>
171 |         </div>
172 | 
173 |         {/* Desktop layout: Title and ID on left */}
174 |         <div className="hidden lg:flex lg:items-center lg:gap-2 lg:flex-grow">
175 |           <p className="text-sm font-medium">Computer Action</p>
176 |           <p className="text-xs font-light text-gray-500 truncate">
177 |             {toolCallId}
178 |           </p>
179 |         </div>
180 | 
181 |         {/* Mobile only: Tool call ID in second row */}
182 |         <p className="text-xs font-light text-gray-500 w-full truncate lg:hidden">
183 |           {toolCallId}
184 |         </p>
185 |       </div>
186 |       <div className="w-full px-3 pb-2">{renderActionContent()}</div>
187 |     </div>
188 |   );
189 | }
190 | 


--------------------------------------------------------------------------------
/src/agent/index.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   createCua,
  3 |   CUAAnnotation,
  4 |   CUAState,
  5 |   CUAUpdate,
  6 |   getToolOutputs,
  7 |   isComputerCallToolMessage,
  8 | } from "@langchain/langgraph-cua";
  9 | import {
 10 |   typedUi,
 11 |   uiMessageReducer,
 12 | } from "@langchain/langgraph-sdk/react-ui/server";
 13 | import type ComponentMap from "./ui/index";
 14 | import { Annotation, LangGraphRunnableConfig } from "@langchain/langgraph";
 15 | import {
 16 |   type UIMessage,
 17 |   type RemoveUIMessage,
 18 | } from "@langchain/langgraph-sdk/react-ui";
 19 | import { createClient } from "@supabase/supabase-js";
 20 | import { v4 as uuidv4 } from "uuid";
 21 | 
 22 | const GraphAnnotation = Annotation.Root({
 23 |   ...CUAAnnotation.spec,
 24 |   ui: Annotation<
 25 |     UIMessage[],
 26 |     UIMessage | RemoveUIMessage | (UIMessage | RemoveUIMessage)[]
 27 |   >({ default: () => [], reducer: uiMessageReducer }),
 28 | });
 29 | 
 30 | type GraphState = typeof GraphAnnotation.State & CUAState;
 31 | 
 32 | function convertBase64ToBlob(screenshot: string): Blob | null {
 33 |   let base64Data = screenshot;
 34 |   if (screenshot.startsWith("data:image/png;base64,")) {
 35 |     base64Data = screenshot.slice("data:image/png;base64,".length);
 36 |   }
 37 | 
 38 |   try {
 39 |     // Decode the base64 string
 40 |     const byteCharacters = atob(base64Data);
 41 |     // Create an array of byte values
 42 |     const byteNumbers = new Array(byteCharacters.length);
 43 |     for (let i = 0; i < byteCharacters.length; i++) {
 44 |       byteNumbers[i] = byteCharacters.charCodeAt(i);
 45 |     }
 46 |     // Convert to a typed array
 47 |     const byteArray = new Uint8Array(byteNumbers);
 48 |     // Create and return the Blob
 49 |     return new Blob([byteArray], { type: "image/png" });
 50 |   } catch (error) {
 51 |     console.error("Failed to convert base64 to Blob:", error);
 52 |     // Return null or handle the error as appropriate
 53 |     return null;
 54 |   }
 55 | }
 56 | 
 57 | async function uploadScreenshot(screenshot: string): Promise<string> {
 58 |   const supabaseUrl = process.env.SUPABASE_URL;
 59 |   const supabaseApiKey = process.env.SUPABASE_API_KEY;
 60 |   if (!supabaseUrl || !supabaseApiKey) {
 61 |     throw new Error("Missing Supabase credentials");
 62 |   }
 63 | 
 64 |   const bucketName = "cua-screenshots";
 65 | 
 66 |   const client = createClient(supabaseUrl, supabaseApiKey);
 67 | 
 68 |   const fileName = `${uuidv4()}.png`;
 69 | 
 70 |   const blob = convertBase64ToBlob(screenshot);
 71 |   if (!blob) {
 72 |     console.error("Failed to convert screenshot to blob. Aborting upload.");
 73 |     throw new Error("Failed to process screenshot for upload.");
 74 |   }
 75 | 
 76 |   const { error: uploadError } = await client.storage
 77 |     .from(bucketName)
 78 |     .upload(fileName, blob, {
 79 |       contentType: "image/png",
 80 |       duplex: "half",
 81 |       upsert: false,
 82 |     });
 83 | 
 84 |   if (uploadError) {
 85 |     throw new Error(`Failed to upload screenshot: ${uploadError.message}`);
 86 |   }
 87 | 
 88 |   const expiresIn = 60 * 60 * 24 * 90; // 90 days
 89 | 
 90 |   const { data, error: signedUrlError } = await client.storage
 91 |     .from(bucketName)
 92 |     .createSignedUrl(fileName, expiresIn);
 93 | 
 94 |   if (signedUrlError) {
 95 |     throw new Error(`Failed to create signed URL: ${signedUrlError.message}`);
 96 |   }
 97 | 
 98 |   return data.signedUrl;
 99 | }
100 | 
101 | async function beforeNode(
102 |   state: GraphState,
103 |   config: LangGraphRunnableConfig,
104 | ): Promise<CUAUpdate> {
105 |   const ui = typedUi<typeof ComponentMap>(config);
106 |   const lastMessage = state.messages[state.messages.length - 1];
107 |   const toolCalls = getToolOutputs(lastMessage);
108 | 
109 |   const renderVMButton = state.ui.find(
110 |     (message) => message.name === "render-vm-button",
111 |   );
112 |   const instanceFrame = state.ui.find((message) => message.name === "instance");
113 | 
114 |   if (state.instanceId && state.streamUrl) {
115 |     if (!instanceFrame) {
116 |       ui.push(
117 |         {
118 |           name: "instance",
119 |           props: {
120 |             instanceId: state.instanceId,
121 |             streamUrl: state.streamUrl,
122 |           },
123 |         },
124 |         {
125 |           message: lastMessage,
126 |         },
127 |       );
128 |     } else if (
129 |       instanceFrame.props.instanceId !== state.instanceId ||
130 |       instanceFrame.props.streamUrl !== state.streamUrl
131 |     ) {
132 |       // First, remove the existing instance frame
133 |       ui.delete(instanceFrame.id);
134 |       // Then, add the new instance frame
135 |       ui.push(
136 |         {
137 |           name: "instance",
138 |           props: {
139 |             instanceId: state.instanceId,
140 |             streamUrl: state.streamUrl,
141 |           },
142 |         },
143 |         {
144 |           message: lastMessage,
145 |         },
146 |       );
147 |     }
148 | 
149 |     // Check if there are any UI messages in state. If there are not, we can assume the UI button for rendering the VM is not visible
150 |     if (!renderVMButton) {
151 |       ui.push(
152 |         {
153 |           name: "render-vm-button",
154 |           props: {},
155 |           metadata: {
156 |             instanceId: state.instanceId,
157 |             streamUrl: state.streamUrl,
158 |           },
159 |         },
160 |         {
161 |           message: lastMessage,
162 |         },
163 |       );
164 |     } else if (
165 |       renderVMButton.metadata.instanceId !== state.instanceId ||
166 |       renderVMButton.metadata.streamUrl !== state.streamUrl
167 |     ) {
168 |       // There is a render VM button, but it's tied to an old instance. Push a new one.
169 |       // This will improve the UX so the render button is "closer" in the UI to the new request
170 |       ui.delete(renderVMButton.id);
171 |       ui.push(
172 |         {
173 |           name: "render-vm-button",
174 |           props: {},
175 |           metadata: {
176 |             instanceId: state.instanceId,
177 |             streamUrl: state.streamUrl,
178 |           },
179 |         },
180 |         {
181 |           message: lastMessage,
182 |         },
183 |       );
184 |     }
185 |   }
186 | 
187 |   if (toolCalls?.length) {
188 |     toolCalls.map((tc) => {
189 |       ui.push(
190 |         {
191 |           name: "computer-use-tool-call",
192 |           props: {
193 |             toolCallId: tc.id,
194 |             action: tc.action,
195 |           },
196 |         },
197 |         {
198 |           message: lastMessage,
199 |         },
200 |       );
201 |     });
202 |   }
203 | 
204 |   return {};
205 | }
206 | 
207 | async function afterNode(
208 |   state: GraphState,
209 |   config: LangGraphRunnableConfig,
210 | ): Promise<CUAUpdate> {
211 |   const ui = typedUi<typeof ComponentMap>(config);
212 |   const lastMessage = state.messages[state.messages.length - 1];
213 |   if (isComputerCallToolMessage(lastMessage)) {
214 |     ui.push(
215 |       {
216 |         name: "computer-use-tool-output",
217 |         props: {
218 |           toolCallId: lastMessage.tool_call_id,
219 |           screenshot: lastMessage.content as string,
220 |         },
221 |       },
222 |       {
223 |         message: lastMessage,
224 |       },
225 |     );
226 |   }
227 | 
228 |   return {};
229 | }
230 | 
231 | export const graph = createCua({
232 |   nodeBeforeAction: beforeNode,
233 |   nodeAfterAction: afterNode,
234 |   stateModifier: GraphAnnotation,
235 |   recursionLimit: 150,
236 |   timeoutHours: 0.1,
237 |   uploadScreenshot,
238 | });
239 | 


--------------------------------------------------------------------------------
/src/agent/ui/instance/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef } from "react";
  2 | import { cn } from "@/lib/utils";
  3 | import { LoaderCircle } from "lucide-react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { useInstanceActions } from "./useInstanceActions";
  6 | import { InstanceView } from "./instance-view";
  7 | import { useStreamContext } from "@langchain/langgraph-sdk/react-ui";
  8 | import { useQueryState, parseAsBoolean } from "nuqs";
  9 | 
 10 | interface InstanceFrameProps {
 11 |   streamUrl: string;
 12 |   instanceId: string;
 13 | }
 14 | 
 15 | export function InstanceFrame({ streamUrl, instanceId }: InstanceFrameProps) {
 16 |   const [isShowingInstanceFrame, setIsShowingInstanceFrame] = useQueryState(
 17 |     "isShowingInstanceFrame",
 18 |     parseAsBoolean,
 19 |   );
 20 |   const [_threadId, setThreadId] = useQueryState("threadId");
 21 |   const stream = useStreamContext();
 22 |   const {
 23 |     handleStop,
 24 |     handlePause,
 25 |     handleResume,
 26 |     handleExpand,
 27 |     isStopping,
 28 |     setIsStopped,
 29 |     isStopped,
 30 |     setStatus,
 31 |     status,
 32 |     setScreenshot,
 33 |     screenshot,
 34 |     setIsScreenshotHovered,
 35 |     isScreenshotHovered,
 36 |     setIsLoading,
 37 |     isLoading,
 38 |     isExpanded,
 39 |   } = useInstanceActions({ instanceId });
 40 | 
 41 |   const isCheckingStatus = useRef(false);
 42 | 
 43 |   useEffect(() => {
 44 |     if (
 45 |       typeof window === "undefined" ||
 46 |       !instanceId ||
 47 |       !stream.messages?.length ||
 48 |       !isShowingInstanceFrame
 49 |     ) {
 50 |       return;
 51 |     }
 52 | 
 53 |     const findAndSetScreenshot = () => {
 54 |       const lastScreenshot = stream.messages.findLast(
 55 |         (m) =>
 56 |           m.type === "tool" &&
 57 |           m.additional_kwargs?.type === "computer_call_output",
 58 |       );
 59 |       if (lastScreenshot) {
 60 |         setScreenshot(lastScreenshot.content as string);
 61 |       }
 62 |     };
 63 | 
 64 |     const checkStatus = async () => {
 65 |       try {
 66 |         const response = await fetch(`/api/instance/status`, {
 67 |           method: "POST",
 68 |           headers: {
 69 |             "Content-Type": "application/json",
 70 |           },
 71 |           body: JSON.stringify({ instanceId }),
 72 |         });
 73 |         const data = await response.json();
 74 |         if (["terminated", "paused", "running"].includes(data.status)) {
 75 |           setStatus(data.status);
 76 |         }
 77 | 
 78 |         if (data.status === "terminated") {
 79 |           setIsStopped(true);
 80 |         }
 81 | 
 82 |         if (["paused", "terminated"].includes(data.status)) {
 83 |           findAndSetScreenshot();
 84 |         }
 85 |       } catch (error) {
 86 |         console.error("Failed to check instance status:", error);
 87 |       }
 88 |     };
 89 | 
 90 |     if (status === "unknown" && !isCheckingStatus.current) {
 91 |       isCheckingStatus.current = true;
 92 |       checkStatus().finally(() => setIsLoading(false));
 93 |     }
 94 | 
 95 |     if (["paused", "terminated"].includes(status)) {
 96 |       findAndSetScreenshot();
 97 |       setIsLoading(false);
 98 |     }
 99 |   }, [instanceId, status, stream.messages, isShowingInstanceFrame]);
100 | 
101 |   useEffect(() => {
102 |     if (isShowingInstanceFrame) return;
103 |     // Set to true on the first page load.
104 |     setIsShowingInstanceFrame(true);
105 |   }, []);
106 | 
107 |   if (!isShowingInstanceFrame) {
108 |     return null;
109 |   }
110 | 
111 |   if (isLoading) {
112 |     return (
113 |       <InstanceView
114 |         handleStop={handleStop}
115 |         handlePause={handlePause}
116 |         handleExpand={handleExpand}
117 |         isStopping={isStopping}
118 |         isStopped={isStopped}
119 |         allDisabled={false}
120 |         isExpanded={isExpanded}
121 |       >
122 |         <div className="w-[630px] h-[420px] lg:w-[830px] lg:h-[620px] flex items-center justify-center p-4 my-auto">
123 |           <LoaderCircle className="w-8 h-8 animate-spin" />
124 |         </div>
125 |       </InstanceView>
126 |     );
127 |   }
128 | 
129 |   if (status === "terminated" && screenshot) {
130 |     return (
131 |       <InstanceView
132 |         handleStop={handleStop}
133 |         handlePause={handlePause}
134 |         handleExpand={handleExpand}
135 |         isStopping={isStopping}
136 |         isStopped={isStopped}
137 |         allDisabled={true}
138 |         isExpanded={isExpanded}
139 |       >
140 |         <img
141 |           src={screenshot}
142 |           alt="Terminated instance screenshot"
143 |           className="w-full object-contain opacity-70"
144 |         />
145 |         <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/30">
146 |           <div className="bg-card/90 p-6 rounded-lg shadow-lg text-center max-w-xs">
147 |             <h3 className="text-lg font-semibold mb-2">Instance Terminated</h3>
148 |             <p className="text-muted-foreground text-sm mb-4">
149 |               All progress has been lost.
150 |             </p>
151 |             <Button
152 |               onClick={() => {
153 |                 setIsShowingInstanceFrame(null);
154 |                 setScreenshot(undefined);
155 |                 setStatus("unknown");
156 |                 setThreadId(null);
157 |               }}
158 |               className="px-6 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-all duration-200 ease-in-out w-full"
159 |             >
160 |               Create New Chat
161 |             </Button>
162 |           </div>
163 |         </div>
164 |       </InstanceView>
165 |     );
166 |   }
167 | 
168 |   if (status === "paused" && screenshot) {
169 |     return (
170 |       <InstanceView
171 |         handleStop={handleStop}
172 |         handlePause={handlePause}
173 |         handleExpand={handleExpand}
174 |         isStopping={isStopping}
175 |         isStopped={isStopped}
176 |         allDisabled={true}
177 |         isExpanded={isExpanded}
178 |       >
179 |         <div
180 |           onMouseEnter={() => setIsScreenshotHovered(true)}
181 |           onMouseLeave={() => setIsScreenshotHovered(false)}
182 |         >
183 |           <img
184 |             src={screenshot}
185 |             alt="Paused instance screenshot"
186 |             className="w-full object-contain"
187 |           />
188 |           <div
189 |             className={cn(
190 |               "absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out gap-3",
191 |               isScreenshotHovered
192 |                 ? "bg-black/40 opacity-100"
193 |                 : "bg-black/0 opacity-0",
194 |             )}
195 |           >
196 |             <Button onClick={handleStop} variant="destructive">
197 |               Terminate
198 |             </Button>
199 |             <Button onClick={handleResume}>Resume</Button>
200 |           </div>
201 |         </div>
202 |       </InstanceView>
203 |     );
204 |   }
205 | 
206 |   return (
207 |     <InstanceView
208 |       handleStop={handleStop}
209 |       handlePause={handlePause}
210 |       handleExpand={handleExpand}
211 |       isStopping={isStopping}
212 |       isStopped={isStopped}
213 |       allDisabled={false}
214 |       isExpanded={isExpanded}
215 |     >
216 |       {isStopping && <div className="absolute inset-0 bg-black/20 z-10" />}
217 |       <iframe
218 |         src={streamUrl}
219 |         className={cn(
220 |           "w-full h-full",
221 |           isExpanded ? "aspect-[4/3]" : "min-h-[400px] md:min-h-[632px]",
222 |         )}
223 |         title="Instance Frame"
224 |         allow="clipboard-write"
225 |       />
226 |     </InstanceView>
227 |   );
228 | }
229 | 


--------------------------------------------------------------------------------
/src/components/thread/messages/tool-calls.tsx:
--------------------------------------------------------------------------------
  1 | import { AIMessage, ToolMessage } from "@langchain/langgraph-sdk";
  2 | import { useState } from "react";
  3 | import { motion, AnimatePresence } from "framer-motion";
  4 | import { ChevronDown, ChevronUp } from "lucide-react";
  5 | 
  6 | function isComplexValue(value: any): boolean {
  7 |   return Array.isArray(value) || (typeof value === "object" && value !== null);
  8 | }
  9 | 
 10 | export function ToolCalls({
 11 |   toolCalls,
 12 | }: {
 13 |   toolCalls: AIMessage["tool_calls"];
 14 | }) {
 15 |   if (!toolCalls || toolCalls.length === 0) return null;
 16 | 
 17 |   return (
 18 |     <div className="space-y-4 w-full max-w-4xl">
 19 |       {toolCalls.map((tc, idx) => {
 20 |         const args = tc.args as Record<string, any>;
 21 |         const hasArgs = Object.keys(args).length > 0;
 22 |         return (
 23 |           <div
 24 |             key={idx}
 25 |             className="border border-gray-200 rounded-lg overflow-hidden"
 26 |           >
 27 |             <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
 28 |               <h3 className="font-medium text-gray-900">
 29 |                 {tc.name}
 30 |                 {tc.id && (
 31 |                   <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
 32 |                     {tc.id}
 33 |                   </code>
 34 |                 )}
 35 |               </h3>
 36 |             </div>
 37 |             {hasArgs ? (
 38 |               <table className="min-w-full divide-y divide-gray-200">
 39 |                 <tbody className="divide-y divide-gray-200">
 40 |                   {Object.entries(args).map(([key, value], argIdx) => (
 41 |                     <tr key={argIdx}>
 42 |                       <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
 43 |                         {key}
 44 |                       </td>
 45 |                       <td className="px-4 py-2 text-sm text-gray-500">
 46 |                         {isComplexValue(value) ? (
 47 |                           <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
 48 |                             {JSON.stringify(value, null, 2)}
 49 |                           </code>
 50 |                         ) : (
 51 |                           String(value)
 52 |                         )}
 53 |                       </td>
 54 |                     </tr>
 55 |                   ))}
 56 |                 </tbody>
 57 |               </table>
 58 |             ) : (
 59 |               <code className="text-sm block p-3">{"{}"}</code>
 60 |             )}
 61 |           </div>
 62 |         );
 63 |       })}
 64 |     </div>
 65 |   );
 66 | }
 67 | 
 68 | export function ToolResult({ message }: { message: ToolMessage }) {
 69 |   const [isExpanded, setIsExpanded] = useState(false);
 70 | 
 71 |   let parsedContent: any;
 72 |   let isJsonContent = false;
 73 | 
 74 |   try {
 75 |     if (typeof message.content === "string") {
 76 |       parsedContent = JSON.parse(message.content);
 77 |       isJsonContent = true;
 78 |     }
 79 |   } catch {
 80 |     // Content is not JSON, use as is
 81 |     parsedContent = message.content;
 82 |   }
 83 | 
 84 |   const contentStr = isJsonContent
 85 |     ? JSON.stringify(parsedContent, null, 2)
 86 |     : String(message.content);
 87 |   const contentLines = contentStr.split("\n");
 88 |   const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
 89 |   const displayedContent =
 90 |     shouldTruncate && !isExpanded
 91 |       ? contentStr.length > 500
 92 |         ? contentStr.slice(0, 500) + "..."
 93 |         : contentLines.slice(0, 4).join("\n") + "\n..."
 94 |       : contentStr;
 95 | 
 96 |   return (
 97 |     <div className="border border-gray-200 rounded-lg overflow-hidden">
 98 |       <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
 99 |         <div className="flex items-center justify-between gap-2 flex-wrap">
100 |           {message.name ? (
101 |             <h3 className="font-medium text-gray-900">
102 |               Tool Result:{" "}
103 |               <code className="bg-gray-100 px-2 py-1 rounded">
104 |                 {message.name}
105 |               </code>
106 |             </h3>
107 |           ) : (
108 |             <h3 className="font-medium text-gray-900">Tool Result</h3>
109 |           )}
110 |           {message.tool_call_id && (
111 |             <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
112 |               {message.tool_call_id}
113 |             </code>
114 |           )}
115 |         </div>
116 |       </div>
117 |       <motion.div
118 |         className="min-w-full bg-gray-100"
119 |         initial={false}
120 |         animate={{ height: "auto" }}
121 |         transition={{ duration: 0.3 }}
122 |       >
123 |         <div className="p-3">
124 |           <AnimatePresence mode="wait" initial={false}>
125 |             <motion.div
126 |               key={isExpanded ? "expanded" : "collapsed"}
127 |               initial={{ opacity: 0, y: 20 }}
128 |               animate={{ opacity: 1, y: 0 }}
129 |               exit={{ opacity: 0, y: -20 }}
130 |               transition={{ duration: 0.2 }}
131 |             >
132 |               {isJsonContent ? (
133 |                 <table className="min-w-full divide-y divide-gray-200">
134 |                   <tbody className="divide-y divide-gray-200">
135 |                     {(Array.isArray(parsedContent)
136 |                       ? isExpanded
137 |                         ? parsedContent
138 |                         : parsedContent.slice(0, 5)
139 |                       : Object.entries(parsedContent)
140 |                     ).map((item, argIdx) => {
141 |                       const [key, value] = Array.isArray(parsedContent)
142 |                         ? [argIdx, item]
143 |                         : [item[0], item[1]];
144 |                       return (
145 |                         <tr key={argIdx}>
146 |                           <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
147 |                             {key}
148 |                           </td>
149 |                           <td className="px-4 py-2 text-sm text-gray-500">
150 |                             {isComplexValue(value) ? (
151 |                               <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
152 |                                 {JSON.stringify(value, null, 2)}
153 |                               </code>
154 |                             ) : (
155 |                               String(value)
156 |                             )}
157 |                           </td>
158 |                         </tr>
159 |                       );
160 |                     })}
161 |                   </tbody>
162 |                 </table>
163 |               ) : (
164 |                 <code className="text-sm block">{displayedContent}</code>
165 |               )}
166 |             </motion.div>
167 |           </AnimatePresence>
168 |         </div>
169 |         {((shouldTruncate && !isJsonContent) ||
170 |           (isJsonContent &&
171 |             Array.isArray(parsedContent) &&
172 |             parsedContent.length > 5)) && (
173 |           <motion.button
174 |             onClick={() => setIsExpanded(!isExpanded)}
175 |             className="w-full py-2 flex items-center justify-center border-t-[1px] border-gray-200 text-gray-500 hover:text-gray-600 hover:bg-gray-50 transition-all ease-in-out duration-200 cursor-pointer"
176 |             initial={{ scale: 1 }}
177 |             whileHover={{ scale: 1.02 }}
178 |             whileTap={{ scale: 0.98 }}
179 |           >
180 |             {isExpanded ? <ChevronUp /> : <ChevronDown />}
181 |           </motion.button>
182 |         )}
183 |       </motion.div>
184 |     </div>
185 |   );
186 | }
187 | 


--------------------------------------------------------------------------------
/src/components/thread/markdown-text.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import "./markdown-styles.css";
  4 | 
  5 | import ReactMarkdown from "react-markdown";
  6 | import remarkGfm from "remark-gfm";
  7 | import rehypeKatex from "rehype-katex";
  8 | import remarkMath from "remark-math";
  9 | import { FC, memo, useState } from "react";
 10 | import { CheckIcon, CopyIcon } from "lucide-react";
 11 | import { SyntaxHighlighter } from "@/components/thread/syntax-highlighter";
 12 | 
 13 | import { TooltipIconButton } from "@/components/thread/tooltip-icon-button";
 14 | import { cn } from "@/lib/utils";
 15 | 
 16 | import "katex/dist/katex.min.css";
 17 | 
 18 | interface CodeHeaderProps {
 19 |   language?: string;
 20 |   code: string;
 21 | }
 22 | 
 23 | const useCopyToClipboard = ({
 24 |   copiedDuration = 3000,
 25 | }: {
 26 |   copiedDuration?: number;
 27 | } = {}) => {
 28 |   const [isCopied, setIsCopied] = useState<boolean>(false);
 29 | 
 30 |   const copyToClipboard = (value: string) => {
 31 |     if (!value) return;
 32 | 
 33 |     navigator.clipboard.writeText(value).then(() => {
 34 |       setIsCopied(true);
 35 |       setTimeout(() => setIsCopied(false), copiedDuration);
 36 |     });
 37 |   };
 38 | 
 39 |   return { isCopied, copyToClipboard };
 40 | };
 41 | 
 42 | const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
 43 |   const { isCopied, copyToClipboard } = useCopyToClipboard();
 44 |   const onCopy = () => {
 45 |     if (!code || isCopied) return;
 46 |     copyToClipboard(code);
 47 |   };
 48 | 
 49 |   return (
 50 |     <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
 51 |       <span className="lowercase [&>span]:text-xs">{language}</span>
 52 |       <TooltipIconButton tooltip="Copy" onClick={onCopy}>
 53 |         {!isCopied && <CopyIcon />}
 54 |         {isCopied && <CheckIcon />}
 55 |       </TooltipIconButton>
 56 |     </div>
 57 |   );
 58 | };
 59 | 
 60 | const defaultComponents: any = {
 61 |   h1: ({ className, ...props }: { className?: string }) => (
 62 |     <h1
 63 |       className={cn(
 64 |         "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
 65 |         className,
 66 |       )}
 67 |       {...props}
 68 |     />
 69 |   ),
 70 |   h2: ({ className, ...props }: { className?: string }) => (
 71 |     <h2
 72 |       className={cn(
 73 |         "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
 74 |         className,
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   ),
 79 |   h3: ({ className, ...props }: { className?: string }) => (
 80 |     <h3
 81 |       className={cn(
 82 |         "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
 83 |         className,
 84 |       )}
 85 |       {...props}
 86 |     />
 87 |   ),
 88 |   h4: ({ className, ...props }: { className?: string }) => (
 89 |     <h4
 90 |       className={cn(
 91 |         "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
 92 |         className,
 93 |       )}
 94 |       {...props}
 95 |     />
 96 |   ),
 97 |   h5: ({ className, ...props }: { className?: string }) => (
 98 |     <h5
 99 |       className={cn(
100 |         "my-4 text-lg font-semibold first:mt-0 last:mb-0",
101 |         className,
102 |       )}
103 |       {...props}
104 |     />
105 |   ),
106 |   h6: ({ className, ...props }: { className?: string }) => (
107 |     <h6
108 |       className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
109 |       {...props}
110 |     />
111 |   ),
112 |   p: ({ className, ...props }: { className?: string }) => (
113 |     <p
114 |       className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)}
115 |       {...props}
116 |     />
117 |   ),
118 |   a: ({ className, ...props }: { className?: string }) => (
119 |     <a
120 |       className={cn(
121 |         "text-primary font-medium underline underline-offset-4",
122 |         className,
123 |       )}
124 |       {...props}
125 |     />
126 |   ),
127 |   blockquote: ({ className, ...props }: { className?: string }) => (
128 |     <blockquote
129 |       className={cn("border-l-2 pl-6 italic", className)}
130 |       {...props}
131 |     />
132 |   ),
133 |   ul: ({ className, ...props }: { className?: string }) => (
134 |     <ul
135 |       className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
136 |       {...props}
137 |     />
138 |   ),
139 |   ol: ({ className, ...props }: { className?: string }) => (
140 |     <ol
141 |       className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
142 |       {...props}
143 |     />
144 |   ),
145 |   hr: ({ className, ...props }: { className?: string }) => (
146 |     <hr className={cn("my-5 border-b", className)} {...props} />
147 |   ),
148 |   table: ({ className, ...props }: { className?: string }) => (
149 |     <table
150 |       className={cn(
151 |         "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
152 |         className,
153 |       )}
154 |       {...props}
155 |     />
156 |   ),
157 |   th: ({ className, ...props }: { className?: string }) => (
158 |     <th
159 |       className={cn(
160 |         "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
161 |         className,
162 |       )}
163 |       {...props}
164 |     />
165 |   ),
166 |   td: ({ className, ...props }: { className?: string }) => (
167 |     <td
168 |       className={cn(
169 |         "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
170 |         className,
171 |       )}
172 |       {...props}
173 |     />
174 |   ),
175 |   tr: ({ className, ...props }: { className?: string }) => (
176 |     <tr
177 |       className={cn(
178 |         "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
179 |         className,
180 |       )}
181 |       {...props}
182 |     />
183 |   ),
184 |   sup: ({ className, ...props }: { className?: string }) => (
185 |     <sup
186 |       className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
187 |       {...props}
188 |     />
189 |   ),
190 |   pre: ({ className, ...props }: { className?: string }) => (
191 |     <pre
192 |       className={cn(
193 |         "overflow-x-auto rounded-lg bg-black text-white max-w-4xl",
194 |         className,
195 |       )}
196 |       {...props}
197 |     />
198 |   ),
199 |   code: ({
200 |     className,
201 |     children,
202 |     ...props
203 |   }: {
204 |     className?: string;
205 |     children: React.ReactNode;
206 |   }) => {
207 |     const match = /language-(\w+)/.exec(className || "");
208 | 
209 |     if (match) {
210 |       const language = match[1];
211 |       const code = String(children).replace(/\n$/, "");
212 | 
213 |       return (
214 |         <>
215 |           <CodeHeader language={language} code={code} />
216 |           <SyntaxHighlighter language={language} className={className}>
217 |             {code}
218 |           </SyntaxHighlighter>
219 |         </>
220 |       );
221 |     }
222 | 
223 |     return (
224 |       <code className={cn("rounded font-semibold", className)} {...props}>
225 |         {children}
226 |       </code>
227 |     );
228 |   },
229 | };
230 | 
231 | const MarkdownTextImpl: FC<{ children: string }> = ({ children }) => {
232 |   return (
233 |     <div className="markdown-content">
234 |       <ReactMarkdown
235 |         remarkPlugins={[remarkGfm, remarkMath]}
236 |         rehypePlugins={[rehypeKatex]}
237 |         components={defaultComponents}
238 |       >
239 |         {children}
240 |       </ReactMarkdown>
241 |     </div>
242 |   );
243 | };
244 | 
245 | export const MarkdownText = memo(MarkdownTextImpl);
246 | 


--------------------------------------------------------------------------------
/src/components/thread/index.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import * as nuqs from "nuqs";
  3 | import * as nuqsAdapters from "nuqs/adapters/next/app";
  4 | 
  5 | import { v4 as uuidv4 } from "uuid";
  6 | import { ReactNode, useEffect, useRef } from "react";
  7 | import { motion } from "framer-motion";
  8 | import { cn } from "@/lib/utils";
  9 | import { useStreamContext } from "@/providers/Stream";
 10 | import { useState, FormEvent } from "react";
 11 | import { Button } from "../ui/button";
 12 | import { Checkpoint, Message } from "@langchain/langgraph-sdk";
 13 | import { AssistantMessage, AssistantMessageLoading } from "./messages/ai";
 14 | import { HumanMessage } from "./messages/human";
 15 | import { DO_NOT_RENDER_ID_PREFIX } from "@/lib/constants";
 16 | import { LangGraphLogoSVG } from "../icons/langgraph";
 17 | import { TooltipIconButton } from "./tooltip-icon-button";
 18 | import {
 19 |   ArrowDown,
 20 |   LoaderCircle,
 21 |   PanelRightOpen,
 22 |   PanelRightClose,
 23 |   SquarePen,
 24 | } from "lucide-react";
 25 | import { useQueryState, parseAsBoolean } from "nuqs";
 26 | import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 27 | import ThreadHistory from "./history";
 28 | import { useMediaQuery } from "@/hooks/useMediaQuery";
 29 | import {
 30 |   experimental_loadShare,
 31 |   LoadExternalComponent,
 32 | } from "@langchain/langgraph-sdk/react-ui";
 33 | import * as Toaster from "@/components/ui/sonner";
 34 | import * as sonner from "sonner";
 35 | 
 36 | experimental_loadShare("nuqs", nuqs);
 37 | experimental_loadShare("nuqs/adapters/next/app", nuqsAdapters);
 38 | experimental_loadShare("@/components/ui/sonner", Toaster);
 39 | experimental_loadShare("sonner", sonner);
 40 | 
 41 | function StickyToBottomContent(props: {
 42 |   content: ReactNode;
 43 |   footer?: ReactNode;
 44 |   className?: string;
 45 |   contentClassName?: string;
 46 | }) {
 47 |   const context = useStickToBottomContext();
 48 |   return (
 49 |     <div
 50 |       ref={context.scrollRef}
 51 |       style={{ width: "100%", height: "100%" }}
 52 |       className={props.className}
 53 |     >
 54 |       <div ref={context.contentRef} className={props.contentClassName}>
 55 |         {props.content}
 56 |       </div>
 57 | 
 58 |       {props.footer}
 59 |     </div>
 60 |   );
 61 | }
 62 | 
 63 | function ScrollToBottom(props: { className?: string }) {
 64 |   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
 65 | 
 66 |   if (isAtBottom) return null;
 67 |   return (
 68 |     <Button
 69 |       variant="outline"
 70 |       className={props.className}
 71 |       onClick={() => scrollToBottom()}
 72 |     >
 73 |       <ArrowDown className="w-4 h-4" />
 74 |       <span>Scroll to bottom</span>
 75 |     </Button>
 76 |   );
 77 | }
 78 | 
 79 | interface ChatViewProps {
 80 |   chatStarted: boolean;
 81 |   isShowingInstance: boolean;
 82 |   firstTokenReceived: boolean;
 83 |   handleSubmit: (e: FormEvent) => void;
 84 |   input: string;
 85 |   setInput: (input: string) => void;
 86 |   handleRegenerate: (parentCheckpoint: Checkpoint | null | undefined) => void;
 87 | }
 88 | 
 89 | function ChatView({
 90 |   chatStarted,
 91 |   isShowingInstance,
 92 |   firstTokenReceived,
 93 |   handleSubmit,
 94 |   input,
 95 |   setInput,
 96 |   handleRegenerate,
 97 | }: ChatViewProps) {
 98 |   const stream = useStreamContext();
 99 | 
100 |   return (
101 |     <StickToBottom
102 |       className={cn(
103 |         "relative overflow-hidden",
104 |         chatStarted && isShowingInstance ? "flex-1" : "flex-1",
105 |       )}
106 |     >
107 |       <StickyToBottomContent
108 |         className={cn(
109 |           "absolute inset-0 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
110 |           !chatStarted && "flex flex-col items-stretch mt-[25vh]",
111 |           chatStarted && "grid grid-rows-[1fr_auto]",
112 |         )}
113 |         contentClassName={cn(
114 |           "flex flex-col md:max-w-3xl w-full pt-8 pb-16 mx-auto gap-4",
115 |           chatStarted && "px-5",
116 |         )}
117 |         content={
118 |           <>
119 |             {stream.messages
120 |               .filter((m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX))
121 |               .map((message, index) =>
122 |                 message.type === "human" ? (
123 |                   <HumanMessage
124 |                     key={message.id || `${message.type}-${index}`}
125 |                     message={message}
126 |                     isLoading={stream.isLoading}
127 |                   />
128 |                 ) : (
129 |                   <AssistantMessage
130 |                     key={message.id || `${message.type}-${index}`}
131 |                     message={message}
132 |                     isLoading={stream.isLoading}
133 |                     handleRegenerate={handleRegenerate}
134 |                   />
135 |                 ),
136 |               )}
137 |             {stream.isLoading && !firstTokenReceived && (
138 |               <AssistantMessageLoading />
139 |             )}
140 |           </>
141 |         }
142 |         footer={
143 |           <div className="sticky flex flex-col items-center gap-8 bottom-0 px-4 bg-white">
144 |             {!chatStarted && (
145 |               <div className="flex gap-3 items-center">
146 |                 <LangGraphLogoSVG className="flex-shrink-0 h-8" />
147 |                 <h1 className="text-2xl font-semibold tracking-tight">
148 |                   Generative UI Computer Use
149 |                 </h1>
150 |               </div>
151 |             )}
152 | 
153 |             <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
154 | 
155 |             <div className="bg-muted rounded-2xl border shadow-xs mx-auto mb-8 w-full max-w-3xl relative z-10">
156 |               <form
157 |                 onSubmit={handleSubmit}
158 |                 className="grid grid-rows-[1fr_auto] gap-2 max-w-3xl mx-auto"
159 |               >
160 |                 <textarea
161 |                   value={input}
162 |                   onChange={(e) => setInput(e.target.value)}
163 |                   onKeyDown={(e) => {
164 |                     if (e.key === "Enter" && !e.shiftKey && !e.metaKey) {
165 |                       e.preventDefault();
166 |                       const el = e.target as HTMLElement | undefined;
167 |                       const form = el?.closest("form");
168 |                       form?.requestSubmit();
169 |                     }
170 |                   }}
171 |                   placeholder="Type your message..."
172 |                   className="p-3.5 pb-0 border-none bg-transparent field-sizing-content shadow-none ring-0 outline-none focus:outline-none focus:ring-0 resize-none"
173 |                 />
174 | 
175 |                 <div className="flex items-center justify-end p-2 pt-4">
176 |                   {stream.isLoading ? (
177 |                     <Button key="stop" onClick={() => stream.stop()}>
178 |                       <LoaderCircle className="w-4 h-4 animate-spin" />
179 |                       Cancel
180 |                     </Button>
181 |                   ) : (
182 |                     <Button
183 |                       type="submit"
184 |                       className="transition-all shadow-md"
185 |                       disabled={stream.isLoading || !input.trim()}
186 |                     >
187 |                       Send
188 |                     </Button>
189 |                   )}
190 |                 </div>
191 |               </form>
192 |             </div>
193 |           </div>
194 |         }
195 |       />
196 |     </StickToBottom>
197 |   );
198 | }
199 | 
200 | export function Thread() {
201 |   const { toast } = sonner;
202 |   const [threadId, setThreadId] = useQueryState("threadId");
203 |   const [chatHistoryOpen, setChatHistoryOpen] = useQueryState(
204 |     "chatHistoryOpen",
205 |     parseAsBoolean.withDefault(false),
206 |   );
207 |   const [input, setInput] = useState("");
208 |   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
209 |   const [isShowingInstanceFrame, setIsShowingInstanceFrame] = useQueryState(
210 |     "isShowingInstanceFrame",
211 |     parseAsBoolean,
212 |   );
213 |   const isLargeScreen = useMediaQuery("(min-width: 1024px)");
214 | 
215 |   const stream = useStreamContext();
216 |   const messages = stream.messages;
217 |   const isLoading = stream.isLoading;
218 | 
219 |   const lastError = useRef<string | undefined>(undefined);
220 | 
221 |   useEffect(() => {
222 |     if (!stream.error) {
223 |       lastError.current = undefined;
224 |       return;
225 |     }
226 |     try {
227 |       const message = (stream.error as any).message;
228 |       if (!message || lastError.current === message) {
229 |         // Message has already been logged. do not modify ref, return early.
230 |         return;
231 |       }
232 | 
233 |       // Message is defined, and it has not been logged yet. Save it, and send the error
234 |       lastError.current = message;
235 |       toast.error("An error occurred. Please try again.", {
236 |         description: (
237 |           <p>
238 |             <strong>Error:</strong> <code>{message}</code>
239 |           </p>
240 |         ),
241 |         richColors: true,
242 |         closeButton: true,
243 |       });
244 |     } catch {
245 |       // no-op
246 |     }
247 |   }, [stream.error]);
248 | 
249 |   // TODO: this should be part of the useStream hook
250 |   const prevMessageLength = useRef(0);
251 |   useEffect(() => {
252 |     if (
253 |       messages.length !== prevMessageLength.current &&
254 |       messages?.length &&
255 |       messages[messages.length - 1].type === "ai"
256 |     ) {
257 |       setFirstTokenReceived(true);
258 |     }
259 | 
260 |     prevMessageLength.current = messages.length;
261 |   }, [messages]);
262 | 
263 |   const handleSubmit = (e: FormEvent) => {
264 |     e.preventDefault();
265 |     if (!input.trim() || isLoading) return;
266 |     setFirstTokenReceived(false);
267 | 
268 |     const newHumanMessage: Message = {
269 |       id: uuidv4(),
270 |       type: "human",
271 |       content: input,
272 |     };
273 | 
274 |     stream.submit(
275 |       { messages: [newHumanMessage] },
276 |       {
277 |         streamMode: ["values"],
278 |         config: {
279 |           recursion_limit: 150,
280 |           configurable: {
281 |             timeoutHours: 0.1,
282 |           },
283 |         },
284 |         optimisticValues: (prev) => ({
285 |           ...prev,
286 |           messages: [...(prev.messages ?? []), newHumanMessage],
287 |         }),
288 |       },
289 |     );
290 | 
291 |     setInput("");
292 |   };
293 | 
294 |   const handleRegenerate = (
295 |     parentCheckpoint: Checkpoint | null | undefined,
296 |   ) => {
297 |     // Do this so the loading state is correct
298 |     prevMessageLength.current = prevMessageLength.current - 1;
299 |     setFirstTokenReceived(false);
300 |     stream.submit(undefined, {
301 |       checkpoint: parentCheckpoint,
302 |       streamMode: ["values"],
303 |     });
304 |   };
305 | 
306 |   const chatStarted = !!threadId || !!messages.length;
307 | 
308 |   const newThread = () => {
309 |     setThreadId(null);
310 |     setIsShowingInstanceFrame(null);
311 |   };
312 | 
313 |   const customInstanceViewComponent = stream.values.ui?.find(
314 |     (ui) => ui.name === "instance",
315 |   );
316 |   const isShowingInstance = !!(
317 |     isShowingInstanceFrame && customInstanceViewComponent
318 |   );
319 | 
320 |   return (
321 |     <div className="flex w-full h-screen overflow-hidden">
322 |       <div className="relative lg:flex hidden">
323 |         <motion.div
324 |           className="absolute h-full border-r bg-white overflow-hidden z-20"
325 |           style={{ width: 300 }}
326 |           animate={
327 |             isLargeScreen
328 |               ? { x: chatHistoryOpen ? 0 : -300 }
329 |               : { x: chatHistoryOpen ? 0 : -300 }
330 |           }
331 |           initial={{ x: -300 }}
332 |           transition={
333 |             isLargeScreen
334 |               ? { type: "spring", stiffness: 300, damping: 30 }
335 |               : { duration: 0 }
336 |           }
337 |         >
338 |           <div className="relative h-full" style={{ width: 300 }}>
339 |             <ThreadHistory />
340 |           </div>
341 |         </motion.div>
342 |       </div>
343 |       <motion.div
344 |         className={cn(
345 |           "flex-1 flex flex-col min-w-0 overflow-hidden relative",
346 |           !chatStarted && "grid-rows-[1fr]",
347 |         )}
348 |         layout={isLargeScreen}
349 |         animate={{
350 |           marginLeft: chatHistoryOpen ? (isLargeScreen ? 300 : 0) : 0,
351 |           width: chatHistoryOpen
352 |             ? isLargeScreen
353 |               ? "calc(100% - 300px)"
354 |               : "100%"
355 |             : "100%",
356 |         }}
357 |         transition={
358 |           isLargeScreen
359 |             ? { type: "spring", stiffness: 300, damping: 30 }
360 |             : { duration: 0 }
361 |         }
362 |       >
363 |         {!chatStarted && (
364 |           <div className="absolute top-0 left-0 w-full flex items-center justify-between gap-3 p-2 pl-4 z-10">
365 |             {(!chatHistoryOpen || !isLargeScreen) && (
366 |               <Button
367 |                 className="hover:bg-gray-100"
368 |                 variant="ghost"
369 |                 onClick={() => setChatHistoryOpen((p) => !p)}
370 |               >
371 |                 {chatHistoryOpen ? (
372 |                   <PanelRightOpen className="size-5" />
373 |                 ) : (
374 |                   <PanelRightClose className="size-5" />
375 |                 )}
376 |               </Button>
377 |             )}
378 |           </div>
379 |         )}
380 |         {chatStarted && (
381 |           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
382 |             <div className="flex items-center justify-start gap-2 relative">
383 |               <div className="absolute left-0 z-10">
384 |                 {(!chatHistoryOpen || !isLargeScreen) && (
385 |                   <Button
386 |                     className="hover:bg-gray-100"
387 |                     variant="ghost"
388 |                     onClick={() => setChatHistoryOpen((p) => !p)}
389 |                   >
390 |                     {chatHistoryOpen ? (
391 |                       <PanelRightOpen className="size-5" />
392 |                     ) : (
393 |                       <PanelRightClose className="size-5" />
394 |                     )}
395 |                   </Button>
396 |                 )}
397 |               </div>
398 |               <motion.button
399 |                 className="flex gap-2 items-center cursor-pointer"
400 |                 onClick={() => newThread()}
401 |                 animate={{
402 |                   marginLeft: !chatHistoryOpen ? 48 : 0,
403 |                 }}
404 |                 transition={{
405 |                   type: "spring",
406 |                   stiffness: 300,
407 |                   damping: 30,
408 |                 }}
409 |               >
410 |                 <LangGraphLogoSVG width={32} height={32} />
411 |                 <span className="text-xl font-semibold tracking-tight">
412 |                   Generative UI Computer Use
413 |                 </span>
414 |               </motion.button>
415 |             </div>
416 | 
417 |             <TooltipIconButton
418 |               size="lg"
419 |               className="p-4"
420 |               tooltip="New thread"
421 |               variant="ghost"
422 |               onClick={() => newThread()}
423 |             >
424 |               <SquarePen className="size-5" />
425 |             </TooltipIconButton>
426 | 
427 |             <div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" />
428 |           </div>
429 |         )}
430 | 
431 |         <div
432 |           className={cn(
433 |             "flex items-center justify-center my-4 lg:hidden",
434 |             !chatStarted && "hidden",
435 |           )}
436 |         >
437 |           <motion.div
438 |             className="relative flex items-center p-1 rounded-lg bg-gray-200 shadow-inner border-[1px] border-slate-300"
439 |             style={{ width: "280px" }} // Fixed width to make it a bit wider
440 |           >
441 |             <motion.div
442 |               className="absolute inset-1 rounded-md shadow-sm z-0 bg-white h-[36px]"
443 |               animate={{
444 |                 x: isShowingInstance ? "95%" : "0%",
445 |               }}
446 |               style={{ width: "50%" }} // Fixed width at 50%
447 |               transition={{ type: "spring", stiffness: 300, damping: 30 }}
448 |               layout
449 |             />
450 |             <Button
451 |               variant="ghost"
452 |               className={cn(
453 |                 "relative z-10 transition-colors flex-1 justify-center",
454 |                 !isShowingInstance ? "text-black" : "text-muted-foreground",
455 |               )}
456 |               onClick={() => setIsShowingInstanceFrame(false)}
457 |               style={{ width: "50%" }} // Fixed width at 50%
458 |             >
459 |               Chat
460 |             </Button>
461 |             <Button
462 |               variant="ghost"
463 |               className={cn(
464 |                 "relative z-10 transition-colors flex-1 justify-center",
465 |                 isShowingInstance ? "text-black" : "text-muted-foreground",
466 |               )}
467 |               onClick={() => setIsShowingInstanceFrame(true)}
468 |               style={{ width: "50%" }} // Fixed width at 50%
469 |             >
470 |               Computer
471 |             </Button>
472 |           </motion.div>
473 |         </div>
474 | 
475 |         {/* Create a flex row container when both chatStarted and streamUrl are truthy */}
476 |         <div
477 |           className={cn(
478 |             "flex flex-1 overflow-hidden",
479 |             chatStarted && isShowingInstance ? "flex-row" : "flex-col",
480 |             isShowingInstance && "lg:flex hidden",
481 |           )}
482 |         >
483 |           <ChatView
484 |             chatStarted={chatStarted}
485 |             isShowingInstance={isShowingInstance}
486 |             firstTokenReceived={firstTokenReceived}
487 |             handleSubmit={handleSubmit}
488 |             input={input}
489 |             setInput={setInput}
490 |             handleRegenerate={handleRegenerate}
491 |           />
492 | 
493 |           {/* Render InstanceFrame inside the flex container when conditions are met */}
494 |           {chatStarted && customInstanceViewComponent && (
495 |             <div
496 |               className={cn(
497 |                 "overflow-hidden flex-1 my-auto",
498 |                 !isShowingInstance && "hidden",
499 |               )}
500 |             >
501 |               <LoadExternalComponent
502 |                 key={customInstanceViewComponent?.id}
503 |                 stream={stream}
504 |                 message={customInstanceViewComponent}
505 |                 meta={{ ui: customInstanceViewComponent }}
506 |               />
507 |             </div>
508 |           )}
509 |         </div>
510 |         {chatStarted && isShowingInstance && (
511 |           <div className={cn("overflow-hidden lg:hidden mx-auto my-auto")}>
512 |             <LoadExternalComponent
513 |               key={customInstanceViewComponent?.id}
514 |               stream={stream}
515 |               message={customInstanceViewComponent}
516 |               meta={{ ui: customInstanceViewComponent }}
517 |             />
518 |           </div>
519 |         )}
520 |       </motion.div>
521 |     </div>
522 |   );
523 | }
524 | 


--------------------------------------------------------------------------------