Merge pull request #103 from lien-dev/feature/2-update-prettier

update prettier

.prettierignore

@@ -1 +1,6 @@
-pnpm-lock.yaml
+# Ignore artifacts:
+build
+coverage
+
+#
+pnpm-lock.yaml

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false
-}

package.json

@@ -41,7 +41,6 @@
     "lucide-react": "^0.476.0",
     "next-themes": "^0.4.4",
     "nuqs": "^2.4.1",
-    "prettier": "^3.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.1",
@@ -74,6 +73,8 @@
     "globals": "^15.14.0",
     "next": "^15.2.3",
     "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "^4.0.13",
     "typescript": "~5.7.2",

pnpm-lock.yaml

@@ -74,9 +74,6 @@ importers:
       nuqs:
         specifier: ^2.4.1
         version: 2.4.1(next@15.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-router-dom@6.30.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-router@6.30.0(react@19.0.0))(react@19.0.0)
-      prettier:
-        specifier: ^3.5.2
-        version: 3.5.2
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -168,6 +165,12 @@ importers:
       postcss:
         specifier: ^8.5.3
         version: 8.5.3
+      prettier:
+        specifier: ^3.5.3
+        version: 3.5.3
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.11(prettier@3.5.3)
       tailwind-scrollbar:
         specifier: ^4.0.1
         version: 4.0.1(react@19.0.0)(tailwindcss@4.1.3)
@@ -2790,8 +2793,63 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier@3.5.2:
-    resolution: {integrity: sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==}
+  prettier-plugin-tailwindcss@0.6.11:
+    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -6248,7 +6306,11 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.5.2: {}
+  prettier-plugin-tailwindcss@0.6.11(prettier@3.5.3):
+    dependencies:
+      prettier: 3.5.3
+
+  prettier@3.5.3: {}
 
   prism-react-renderer@2.4.1(react@19.0.0):
     dependencies:

prettier.config.js

@@ -0,0 +1,11 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  endOfLine: "auto",
+  singleAttributePerLine: true,
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;

src/components/thread/agent-inbox/components/inbox-item-input.tsx

@@ -16,7 +16,7 @@ function ResetButton({ handleReset }: { handleReset: () => void }) {
       variant="ghost"
       className="flex items-center justify-center gap-2 text-gray-500 hover:text-red-500"
     >
-      <Undo2 className="w-4 h-4" />
+      <Undo2 className="h-4 w-4" />
       <span>Reset</span>
     </Button>
   );
@@ -24,7 +24,7 @@ function ResetButton({ handleReset }: { handleReset: () => void }) {
 
 function ArgsRenderer({ args }: { args: Record<string, any> }) {
   return (
-    <div className="flex flex-col gap-6 items-start w-full">
+    <div className="flex w-full flex-col items-start gap-6">
       {Object.entries(args).map(([k, v]) => {
         let value = "";
         if (["string", "number"].includes(typeof v)) {
@@ -34,11 +34,14 @@ function ArgsRenderer({ args }: { args: Record<string, any> }) {
         }
 
         return (
-          <div key={`args-${k}`} className="flex flex-col gap-1 items-start">
-            <p className="text-sm leading-[18px] text-gray-600 text-wrap">
+          <div
+            key={`args-${k}`}
+            className="flex flex-col items-start gap-1"
+          >
+            <p className="text-sm leading-[18px] text-wrap text-gray-600">
               {prettifyText(k)}:
             </p>
-            <span className="text-[13px] leading-[18px] text-black bg-zinc-100 rounded-xl p-3 w-full max-w-full">
+            <span className="w-full max-w-full rounded-xl bg-zinc-100 p-3 text-[13px] leading-[18px] text-black">
               <MarkdownText>{value}</MarkdownText>
             </span>
           </div>
@@ -104,9 +107,9 @@ function ResponseComponent({
   };
 
   return (
-    <div className="flex flex-col gap-4 p-6 items-start w-full rounded-xl border-[1px] border-gray-300">
-      <div className="flex items-center justify-between w-full">
-        <p className="font-semibold text-black text-base">
+    <div className="flex w-full flex-col items-start gap-4 rounded-xl border-[1px] border-gray-300 p-6">
+      <div className="flex w-full items-center justify-between">
+        <p className="text-base font-semibold text-black">
           Respond to assistant
         </p>
         <ResetButton
@@ -120,8 +123,8 @@ function ResponseComponent({
         <ArgsRenderer args={interruptValue.action_request.args} />
       )}
 
-      <div className="flex flex-col gap-[6px] items-start w-full">
-        <p className="text-sm min-w-fit font-medium">Response</p>
+      <div className="flex w-full flex-col items-start gap-[6px]">
+        <p className="min-w-fit text-sm font-medium">Response</p>
         <Textarea
           disabled={streaming}
           value={res.args}
@@ -132,8 +135,12 @@ function ResponseComponent({
         />
       </div>
 
-      <div className="flex items-center justify-end w-full gap-2">
-        <Button variant="brand" disabled={streaming} onClick={handleSubmit}>
+      <div className="flex w-full items-center justify-end gap-2">
+        <Button
+          variant="brand"
+          disabled={streaming}
+          onClick={handleSubmit}
+        >
           Send Response
         </Button>
       </div>
@@ -154,7 +161,7 @@ function AcceptComponent({
   ) => Promise<void>;
 }) {
   return (
-    <div className="flex flex-col gap-4 items-start w-full p-6 rounded-lg border-[1px] border-gray-300">
+    <div className="flex w-full flex-col items-start gap-4 rounded-lg border-[1px] border-gray-300 p-6">
       {actionRequestArgs && Object.keys(actionRequestArgs).length > 0 && (
         <ArgsRenderer args={actionRequestArgs} />
       )}
@@ -251,9 +258,9 @@ function EditAndOrAcceptComponent({
   };
 
   return (
-    <div className="flex flex-col gap-4 items-start w-full p-6 rounded-lg border-[1px] border-gray-300">
-      <div className="flex items-center justify-between w-full">
-        <p className="font-semibold text-black text-base">{header}</p>
+    <div className="flex w-full flex-col items-start gap-4 rounded-lg border-[1px] border-gray-300 p-6">
+      <div className="flex w-full items-center justify-between">
+        <p className="text-base font-semibold text-black">{header}</p>
         <ResetButton handleReset={handleReset} />
       </div>
 
@@ -276,11 +283,11 @@ function EditAndOrAcceptComponent({
 
         return (
           <div
-            className="flex flex-col gap-1 items-start w-full h-full px-[1px]"
+            className="flex h-full w-full flex-col items-start gap-1 px-[1px]"
             key={`allow-edit-args--${k}-${idx}`}
           >
-            <div className="flex flex-col gap-[6px] items-start w-full">
-              <p className="text-sm min-w-fit font-medium">{prettifyText(k)}</p>
+            <div className="flex w-full flex-col items-start gap-[6px]">
+              <p className="min-w-fit text-sm font-medium">{prettifyText(k)}</p>
               <Textarea
                 disabled={streaming}
                 className="h-full"
@@ -294,8 +301,12 @@ function EditAndOrAcceptComponent({
         );
       })}
 
-      <div className="flex items-center justify-end w-full gap-2">
-        <Button variant="brand" disabled={streaming} onClick={handleSubmit}>
+      <div className="flex w-full items-center justify-end gap-2">
+        <Button
+          variant="brand"
+          disabled={streaming}
+          onClick={handleSubmit}
+        >
           {buttonText}
         </Button>
       </div>
@@ -480,12 +491,12 @@ export function InboxItemInput({
   };
 
   return (
-    <div className="w-full flex flex-col items-start justify-start gap-2">
+    <div className="flex w-full flex-col items-start justify-start gap-2">
       {showArgsOutsideActionCards && (
         <ArgsRenderer args={interruptValue.action_request.args} />
       )}
 
-      <div className="flex flex-col gap-2 items-start w-full">
+      <div className="flex w-full flex-col items-start gap-2">
         <EditAndOrAccept
           humanResponse={humanResponse}
           streaming={streaming}
@@ -495,7 +506,7 @@ export function InboxItemInput({
           handleSubmit={handleSubmit}
         />
         {supportsMultipleMethods ? (
-          <div className="flex gap-3 items-center mx-auto mt-3">
+          <div className="mx-auto mt-3 flex items-center gap-3">
             <Separator className="w-[full]" />
             <p className="text-sm text-gray-500">Or</p>
             <Separator className="w-full" />
@@ -511,7 +522,7 @@ export function InboxItemInput({
         />
         {streaming && <p className="text-sm text-gray-600">Running...</p>}
         {streamFinished && (
-          <p className="text-base text-green-600 font-medium">
+          <p className="text-base font-medium text-green-600">
             Successfully finished Graph invocation.
           </p>
         )}

src/components/thread/agent-inbox/components/state-view.tsx

@@ -43,7 +43,7 @@ const messageTypeToLabel = (message: BaseMessage) => {
 
 function MessagesRenderer({ messages }: { messages: BaseMessage[] }) {
   return (
-    <div className="flex flex-col gap-1 w-full">
+    <div className="flex w-full flex-col gap-1">
       {messages.map((msg, idx) => {
         const messageTypeLabel = messageTypeToLabel(msg);
         const content =
@@ -53,12 +53,12 @@ function MessagesRenderer({ messages }: { messages: BaseMessage[] }) {
         return (
           <div
             key={msg.id ?? `message-${idx}`}
-            className="flex flex-col gap-[2px] ml-2 w-full"
+            className="ml-2 flex w-full flex-col gap-[2px]"
           >
             <p className="font-medium text-gray-700">{messageTypeLabel}:</p>
             {content && <MarkdownText>{content}</MarkdownText>}
             {"tool_calls" in msg && msg.tool_calls ? (
-              <div className="flex flex-col gap-1 items-start w-full">
+              <div className="flex w-full flex-col items-start gap-1">
                 {(msg.tool_calls as ToolCall[]).map((tc, idx) => (
                   <ToolCallTable
                     key={tc.id ?? `tool-call-${idx}`}
@@ -89,7 +89,7 @@ function StateViewRecursive(props: StateViewRecursiveProps) {
   }
 
   if (props.value == null) {
-    return <p className="font-light text-gray-600 whitespace-pre-wrap">null</p>;
+    return <p className="font-light whitespace-pre-wrap text-gray-600">null</p>;
   }
 
   if (Array.isArray(props.value)) {
@@ -99,18 +99,18 @@ function StateViewRecursive(props: StateViewRecursiveProps) {
 
     const valueArray = props.value as unknown[];
     return (
-      <div className="flex flex-row gap-1 items-start justify-start w-full">
+      <div className="flex w-full flex-row items-start justify-start gap-1">
         <span className="font-normal text-black">[</span>
         {valueArray.map((item, idx) => {
           const itemRenderValue = baseMessageObject(item);
           return (
             <div
               key={`state-view-${idx}`}
-              className="flex flex-row items-start whitespace-pre-wrap w-full"
+              className="flex w-full flex-row items-start whitespace-pre-wrap"
             >
               <StateViewRecursive value={itemRenderValue} />
               {idx < valueArray?.length - 1 && (
-                <span className="text-black font-normal">,&nbsp;</span>
+                <span className="font-normal text-black">,&nbsp;</span>
               )}
             </div>
           );
@@ -125,9 +125,9 @@ function StateViewRecursive(props: StateViewRecursiveProps) {
       return <p className="font-light text-gray-600">{"{}"}</p>;
     }
     return (
-      <div className="flex flex-col gap-1 items-start justify-start ml-6 relative w-full">
+      <div className="relative ml-6 flex w-full flex-col items-start justify-start gap-1">
         {/* Vertical line */}
-        <div className="absolute left-[-24px] top-0 h-full w-[1px] bg-gray-200" />
+        <div className="absolute top-0 left-[-24px] h-full w-[1px] bg-gray-200" />
 
         {Object.entries(props.value).map(([key, value], idx) => (
           <div
@@ -135,7 +135,7 @@ function StateViewRecursive(props: StateViewRecursiveProps) {
             className="relative w-full"
           >
             {/* Horizontal connector line */}
-            <div className="absolute left-[-20px] top-[10px] h-[1px] w-[18px] bg-gray-200" />
+            <div className="absolute top-[10px] left-[-20px] h-[1px] w-[18px] bg-gray-200" />
             <StateViewObject
               expanded={props.expanded}
               keyName={key}
@@ -153,10 +153,10 @@ function HasContentsEllipsis({ onClick }: { onClick?: () => void }) {
     <span
       onClick={onClick}
       className={cn(
-        "font-mono text-[10px] leading-3 p-[2px] rounded-md",
-        "bg-gray-50 hover:bg-gray-100 text-gray-600 hover:text-gray-800",
-        "transition-colors ease-in-out cursor-pointer",
-        "-translate-y-[2px] inline-block",
+        "rounded-md p-[2px] font-mono text-[10px] leading-3",
+        "bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-800",
+        "cursor-pointer transition-colors ease-in-out",
+        "inline-block -translate-y-[2px]",
       )}
     >
       {"{...}"}
@@ -184,7 +184,7 @@ export function StateViewObject(props: StateViewProps) {
   }, [props.expanded]);
 
   return (
-    <div className="flex flex-row gap-2 items-start justify-start relative text-sm">
+    <div className="relative flex flex-row items-start justify-start gap-2 text-sm">
       <motion.div
         initial={false}
         animate={{ rotate: expanded ? 90 : 0 }}
@@ -192,13 +192,13 @@ export function StateViewObject(props: StateViewProps) {
       >
         <div
           onClick={() => setExpanded((prev) => !prev)}
-          className="w-5 h-5 flex items-center justify-center hover:bg-gray-100 text-gray-500 hover:text-black rounded-md transition-colors ease-in-out cursor-pointer"
+          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-md text-gray-500 transition-colors ease-in-out hover:bg-gray-100 hover:text-black"
         >
-          <ChevronRight className="w-4 h-4" />
+          <ChevronRight className="h-4 w-4" />
         </div>
       </motion.div>
-      <div className="flex flex-col gap-1 items-start justify-start w-full">
-        <p className="text-black font-normal">
+      <div className="flex w-full flex-col items-start justify-start gap-1">
+        <p className="font-normal text-black">
           {prettifyText(props.keyName)}{" "}
           {!expanded && (
             <HasContentsEllipsis onClick={() => setExpanded((prev) => !prev)} />
@@ -217,7 +217,10 @@ export function StateViewObject(props: StateViewProps) {
           style={{ overflow: "hidden" }}
           className="relative w-full"
         >
-          <StateViewRecursive expanded={props.expanded} value={props.value} />
+          <StateViewRecursive
+            expanded={props.expanded}
+            value={props.value}
+          />
         </motion.div>
       </div>
     </div>
@@ -246,9 +249,9 @@ export function StateView({
   return (
     <div
       className={cn(
-        "flex flex-row gap-0 w-full",
+        "flex w-full flex-row gap-0",
         view === "state" &&
-          "border-t-[1px] lg:border-t-[0px] lg:border-l-[1px] border-gray-100 ",
+          "border-t-[1px] border-gray-100 lg:border-t-[0px] lg:border-l-[1px]",
       )}
     >
       {view === "description" && (
@@ -270,7 +273,7 @@ export function StateView({
           ))}
         </div>
       )}
-      <div className="flex gap-2 items-start justify-end">
+      <div className="flex items-start justify-end gap-2">
         {view === "state" && (
           <Button
             onClick={() => setExpanded((prev) => !prev)}
@@ -279,9 +282,9 @@ export function StateView({
             size="sm"
           >
             {expanded ? (
-              <ChevronsUpDown className="w-4 h-4" />
+              <ChevronsUpDown className="h-4 w-4" />
             ) : (
-              <ChevronsDownUp className="w-4 h-4" />
+              <ChevronsDownUp className="h-4 w-4" />
             )}
           </Button>
         )}
@@ -292,7 +295,7 @@ export function StateView({
           className="text-gray-600"
           size="sm"
         >
-          <X className="w-4 h-4" />
+          <X className="h-4 w-4" />
         </Button>
       </div>
     </div>

src/components/thread/agent-inbox/components/thread-actions-view.tsx

@@ -27,7 +27,7 @@ function ButtonGroup({
   showingDescription: boolean;
 }) {
   return (
-    <div className="flex flex-row gap-0 items-center justify-center">
+    <div className="flex flex-row items-center justify-center gap-0">
       <Button
         variant="outline"
         className={cn(
@@ -103,14 +103,14 @@ export function ThreadActionsView({
   const ignoreAllowed = interrupt.config.allow_ignore;
 
   return (
-    <div className="flex flex-col min-h-full w-full gap-9">
+    <div className="flex min-h-full w-full flex-col gap-9">
       {/* Header */}
-      <div className="flex flex-wrap items-center justify-between w-full gap-3">
+      <div className="flex w-full flex-wrap items-center justify-between gap-3">
         <div className="flex items-center justify-start gap-3">
           <p className="text-2xl tracking-tighter text-pretty">{threadTitle}</p>
           {threadId && <ThreadIdCopyable threadId={threadId} />}
         </div>
-        <div className="flex flex-row gap-2 items-center justify-start">
+        <div className="flex flex-row items-center justify-start gap-2">
           {apiUrl && (
             <Button
               size="sm"
@@ -130,10 +130,10 @@ export function ThreadActionsView({
         </div>
       </div>
 
-      <div className="flex flex-row gap-2 items-center justify-start w-full">
+      <div className="flex w-full flex-row items-center justify-start gap-2">
         <Button
           variant="outline"
-          className="text-gray-800 border-gray-500 font-normal bg-white"
+          className="border-gray-500 bg-white font-normal text-gray-800"
           onClick={handleResolve}
           disabled={actionsDisabled}
         >
@@ -142,7 +142,7 @@ export function ThreadActionsView({
         {ignoreAllowed && (
           <Button
             variant="outline"
-            className="text-gray-800 border-gray-500 font-normal bg-white"
+            className="border-gray-500 bg-white font-normal text-gray-800"
             onClick={handleIgnore}
             disabled={actionsDisabled}
           >

src/components/thread/agent-inbox/components/thread-id.tsx

@@ -17,7 +17,7 @@ export function ThreadIdTooltip({ threadId }: { threadId: string }) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger>
-          <p className="font-mono tracking-tighter text-[10px] leading-[12px] px-1 py-[2px] bg-gray-100 rounded-md">
+          <p className="rounded-md bg-gray-100 px-1 py-[2px] font-mono text-[10px] leading-[12px] tracking-tighter">
             {firstThreeChars}...{lastThreeChars}
           </p>
         </TooltipTrigger>
@@ -50,10 +50,13 @@ export function ThreadIdCopyable({
       onClick={(e) => handleCopy(e)}
       variant="ghost"
       tooltip="Copy thread ID"
-      className="flex flex-grow-0 gap-1 items-center p-1 rounded-md border-[1px] cursor-pointer hover:bg-gray-50/90 border-gray-200 w-fit"
+      className="flex w-fit flex-grow-0 cursor-pointer items-center gap-1 rounded-md border-[1px] border-gray-200 p-1 hover:bg-gray-50/90"
     >
       <p className="font-mono text-xs">{showUUID ? threadId : "ID"}</p>
-      <AnimatePresence mode="wait" initial={false}>
+      <AnimatePresence
+        mode="wait"
+        initial={false}
+      >
         {copied ? (
           <motion.div
             key="check"
@@ -62,7 +65,7 @@ export function ThreadIdCopyable({
             exit={{ opacity: 0, scale: 0.8 }}
             transition={{ duration: 0.15 }}
           >
-            <CopyCheck className="text-green-500 max-w-3 w-3 max-h-3 h-3" />
+            <CopyCheck className="h-3 max-h-3 w-3 max-w-3 text-green-500" />
           </motion.div>
         ) : (
           <motion.div
@@ -72,7 +75,7 @@ export function ThreadIdCopyable({
             exit={{ opacity: 0, scale: 0.8 }}
             transition={{ duration: 0.15 }}
           >
-            <Copy className="text-gray-500 max-w-3 w-3 max-h-3 h-3" />
+            <Copy className="h-3 max-h-3 w-3 max-w-3 text-gray-500" />
           </motion.div>
         )}
       </AnimatePresence>

src/components/thread/agent-inbox/components/tool-call-table.tsx

@@ -3,11 +3,14 @@ import { unknownToPrettyDate } from "../utils";
 
 export function ToolCallTable({ toolCall }: { toolCall: ToolCall }) {
   return (
-    <div className="min-w-[300px] max-w-full border rounded-lg overflow-hidden">
+    <div className="max-w-full min-w-[300px] overflow-hidden rounded-lg border">
       <table className="w-full border-collapse">
         <thead>
           <tr>
-            <th className="text-left px-2 py-0 bg-gray-100 text-sm" colSpan={2}>
+            <th
+              className="bg-gray-100 px-2 py-0 text-left text-sm"
+              colSpan={2}
+            >
               {toolCall.name}
             </th>
           </tr>
@@ -32,8 +35,11 @@ export function ToolCallTable({ toolCall }: { toolCall: ToolCall }) {
             }
 
             return (
-              <tr key={key} className="border-t">
-                <td className="px-2 py-1 font-medium w-1/3 text-xs">{key}</td>
+              <tr
+                key={key}
+                className="border-t"
+              >
+                <td className="w-1/3 px-2 py-1 text-xs font-medium">{key}</td>
                 <td className="px-2 py-1 font-mono text-xs">{valueStr}</td>
               </tr>
             );

src/components/thread/agent-inbox/index.tsx

@@ -36,7 +36,7 @@ export function ThreadView({ interrupt }: ThreadViewProps) {
   };
 
   return (
-    <div className="flex flex-col lg:flex-row w-full h-[80vh] p-8 bg-gray-50/50 rounded-2xl overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+    <div className="flex h-[80vh] w-full flex-col overflow-y-scroll rounded-2xl bg-gray-50/50 p-8 lg:flex-row [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
       {showSidePanel ? (
         <StateView
           handleShowSidePanel={handleShowSidePanel}

src/components/thread/history/index.tsx

@@ -25,7 +25,7 @@ function ThreadList({
   const [threadId, setThreadId] = useQueryState("threadId");
 
   return (
-    <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">
+    <div className="flex h-full w-full flex-col items-start justify-start gap-2 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
       {threads.map((t) => {
         let itemText = t.thread_id;
         if (
@@ -39,10 +39,13 @@ function ThreadList({
           itemText = getContentString(firstMessage.content);
         }
         return (
-          <div key={t.thread_id} className="w-full px-1">
+          <div
+            key={t.thread_id}
+            className="w-full px-1"
+          >
             <Button
               variant="ghost"
-              className="text-left items-start justify-start font-normal w-[280px]"
+              className="w-[280px] items-start justify-start text-left font-normal"
               onClick={(e) => {
                 e.preventDefault();
                 onThreadClick?.(t.thread_id);
@@ -61,9 +64,12 @@ function ThreadList({
 
 function ThreadHistoryLoading() {
   return (
-    <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">
+    <div className="flex h-full w-full flex-col items-start justify-start gap-2 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
       {Array.from({ length: 30 }).map((_, i) => (
-        <Skeleton key={`skeleton-${i}`} className="w-[280px] h-10" />
+        <Skeleton
+          key={`skeleton-${i}`}
+          className="h-10 w-[280px]"
+        />
       ))}
     </div>
   );
@@ -90,8 +96,8 @@ export default function ThreadHistory() {
 
   return (
     <>
-      <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">
-        <div className="flex items-center justify-between w-full pt-1.5 px-4">
+      <div className="shadow-inner-right hidden h-screen w-[300px] shrink-0 flex-col items-start justify-start gap-6 border-r-[1px] border-slate-300 lg:flex">
+        <div className="flex w-full items-center justify-between px-4 pt-1.5">
           <Button
             className="hover:bg-gray-100"
             variant="ghost"
@@ -121,7 +127,10 @@ export default function ThreadHistory() {
             setChatHistoryOpen(open);
           }}
         >
-          <SheetContent side="left" className="lg:hidden flex">
+          <SheetContent
+            side="left"
+            className="flex lg:hidden"
+          >
             <SheetHeader>
               <SheetTitle>Thread History</SheetTitle>
             </SheetHeader>

src/components/thread/index.tsx

@@ -49,7 +49,10 @@ function StickyToBottomContent(props: {
       style={{ width: "100%", height: "100%" }}
       className={props.className}
     >
-      <div ref={context.contentRef} className={props.contentClassName}>
+      <div
+        ref={context.contentRef}
+        className={props.contentClassName}
+      >
         {props.content}
       </div>
 
@@ -68,7 +71,7 @@ function ScrollToBottom(props: { className?: string }) {
       className={props.className}
       onClick={() => scrollToBottom()}
     >
-      <ArrowDown className="w-4 h-4" />
+      <ArrowDown className="h-4 w-4" />
       <span>Scroll to bottom</span>
     </Button>
   );
@@ -84,7 +87,10 @@ function OpenGitHubRepo() {
             target="_blank"
             className="flex items-center justify-center"
           >
-            <GitHubSVG width="24" height="24" />
+            <GitHubSVG
+              width="24"
+              height="24"
+            />
           </a>
         </TooltipTrigger>
         <TooltipContent side="left">
@@ -205,10 +211,10 @@ export function Thread() {
   );
 
   return (
-    <div className="flex w-full h-screen overflow-hidden">
-      <div className="relative lg:flex hidden">
+    <div className="flex h-screen w-full overflow-hidden">
+      <div className="relative hidden lg:flex">
         <motion.div
-          className="absolute h-full border-r bg-white overflow-hidden z-20"
+          className="absolute z-20 h-full overflow-hidden border-r bg-white"
           style={{ width: 300 }}
           animate={
             isLargeScreen
@@ -222,14 +228,17 @@ export function Thread() {
               : { duration: 0 }
           }
         >
-          <div className="relative h-full" style={{ width: 300 }}>
+          <div
+            className="relative h-full"
+            style={{ width: 300 }}
+          >
             <ThreadHistory />
           </div>
         </motion.div>
       </div>
       <motion.div
         className={cn(
-          "flex-1 flex flex-col min-w-0 overflow-hidden relative",
+          "relative flex min-w-0 flex-1 flex-col overflow-hidden",
           !chatStarted && "grid-rows-[1fr]",
         )}
         layout={isLargeScreen}
@@ -248,7 +257,7 @@ export function Thread() {
         }
       >
         {!chatStarted && (
-          <div className="absolute top-0 left-0 w-full flex items-center justify-between gap-3 p-2 pl-4 z-10">
+          <div className="absolute top-0 left-0 z-10 flex w-full items-center justify-between gap-3 p-2 pl-4">
             <div>
               {(!chatHistoryOpen || !isLargeScreen) && (
                 <Button
@@ -270,8 +279,8 @@ export function Thread() {
           </div>
         )}
         {chatStarted && (
-          <div className="flex items-center justify-between gap-3 p-2 z-10 relative">
-            <div className="flex items-center justify-start gap-2 relative">
+          <div className="relative z-10 flex items-center justify-between gap-3 p-2">
+            <div className="relative flex items-center justify-start gap-2">
               <div className="absolute left-0 z-10">
                 {(!chatHistoryOpen || !isLargeScreen) && (
                   <Button
@@ -288,7 +297,7 @@ export function Thread() {
                 )}
               </div>
               <motion.button
-                className="flex gap-2 items-center cursor-pointer"
+                className="flex cursor-pointer items-center gap-2"
                 onClick={() => setThreadId(null)}
                 animate={{
                   marginLeft: !chatHistoryOpen ? 48 : 0,
@@ -299,7 +308,10 @@ export function Thread() {
                   damping: 30,
                 }}
               >
-                <LangGraphLogoSVG width={32} height={32} />
+                <LangGraphLogoSVG
+                  width={32}
+                  height={32}
+                />
                 <span className="text-xl font-semibold tracking-tight">
                   Agent Chat
                 </span>
@@ -321,15 +333,15 @@ export function Thread() {
               </TooltipIconButton>
             </div>
 
-            <div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" />
+            <div className="from-background to-background/0 absolute inset-x-0 top-full h-5 bg-gradient-to-b" />
           </div>
         )}
 
         <StickToBottom className="relative flex-1 overflow-hidden">
           <StickyToBottomContent
             className={cn(
-              "absolute px-4 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",
-              !chatStarted && "flex flex-col items-stretch mt-[25vh]",
+              "absolute inset-0 overflow-y-scroll px-4 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
+              !chatStarted && "mt-[25vh] flex flex-col items-stretch",
               chatStarted && "grid grid-rows-[1fr_auto]",
             )}
             contentClassName="pt-8 pb-16  max-w-3xl mx-auto flex flex-col gap-4 w-full"
@@ -369,22 +381,22 @@ export function Thread() {
               </>
             }
             footer={
-              <div className="sticky flex flex-col items-center gap-8 bottom-0 bg-white">
+              <div className="sticky bottom-0 flex flex-col items-center gap-8 bg-white">
                 {!chatStarted && (
-                  <div className="flex gap-3 items-center">
-                    <LangGraphLogoSVG className="flex-shrink-0 h-8" />
+                  <div className="flex items-center gap-3">
+                    <LangGraphLogoSVG className="h-8 flex-shrink-0" />
                     <h1 className="text-2xl font-semibold tracking-tight">
                       Agent Chat
                     </h1>
                   </div>
                 )}
 
-                <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
+                <ScrollToBottom className="animate-in fade-in-0 zoom-in-95 absolute bottom-full left-1/2 mb-4 -translate-x-1/2" />
 
-                <div className="bg-muted rounded-2xl border shadow-xs mx-auto mb-8 w-full max-w-3xl relative z-10">
+                <div className="bg-muted relative z-10 mx-auto mb-8 w-full max-w-3xl rounded-2xl border shadow-xs">
                   <form
                     onSubmit={handleSubmit}
-                    className="grid grid-rows-[1fr_auto] gap-2 max-w-3xl mx-auto"
+                    className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2"
                   >
                     <textarea
                       value={input}
@@ -403,7 +415,7 @@ export function Thread() {
                         }
                       }}
                       placeholder="Type your message..."
-                      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"
+                      className="field-sizing-content resize-none border-none bg-transparent p-3.5 pb-0 shadow-none ring-0 outline-none focus:ring-0 focus:outline-none"
                     />
 
                     <div className="flex items-center justify-between p-2 pt-4">
@@ -423,14 +435,17 @@ export function Thread() {
                         </div>
                       </div>
                       {stream.isLoading ? (
-                        <Button key="stop" onClick={() => stream.stop()}>
-                          <LoaderCircle className="w-4 h-4 animate-spin" />
+                        <Button
+                          key="stop"
+                          onClick={() => stream.stop()}
+                        >
+                          <LoaderCircle className="h-4 w-4 animate-spin" />
                           Cancel
                         </Button>
                       ) : (
                         <Button
                           type="submit"
-                          className="transition-all shadow-md"
+                          className="shadow-md transition-all"
                           disabled={isLoading || !input.trim()}
                         >
                           Send

src/components/thread/markdown-text.tsx

@@ -49,7 +49,10 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   return (
     <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">
       <span className="lowercase [&>span]:text-xs">{language}</span>
-      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+      <TooltipIconButton
+        tooltip="Copy"
+        onClick={onCopy}
+      >
         {!isCopied && <CopyIcon />}
         {isCopied && <CheckIcon />}
       </TooltipIconButton>
@@ -70,7 +73,7 @@ const defaultComponents: any = {
   h2: ({ className, ...props }: { className?: string }) => (
     <h2
       className={cn(
-        "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -79,7 +82,7 @@ const defaultComponents: any = {
   h3: ({ className, ...props }: { className?: string }) => (
     <h3
       className={cn(
-        "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -88,7 +91,7 @@ const defaultComponents: any = {
   h4: ({ className, ...props }: { className?: string }) => (
     <h4
       className={cn(
-        "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -111,7 +114,7 @@ const defaultComponents: any = {
   ),
   p: ({ className, ...props }: { className?: string }) => (
     <p
-      className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)}
+      className={cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className)}
       {...props}
     />
   ),
@@ -143,7 +146,10 @@ const defaultComponents: any = {
     />
   ),
   hr: ({ className, ...props }: { className?: string }) => (
-    <hr className={cn("my-5 border-b", className)} {...props} />
+    <hr
+      className={cn("my-5 border-b", className)}
+      {...props}
+    />
   ),
   table: ({ className, ...props }: { className?: string }) => (
     <table
@@ -190,7 +196,7 @@ const defaultComponents: any = {
   pre: ({ className, ...props }: { className?: string }) => (
     <pre
       className={cn(
-        "overflow-x-auto rounded-lg bg-black text-white max-w-4xl",
+        "max-w-4xl overflow-x-auto rounded-lg bg-black text-white",
         className,
       )}
       {...props}
@@ -212,8 +218,14 @@ const defaultComponents: any = {
 
       return (
         <>
-          <CodeHeader language={language} code={code} />
-          <SyntaxHighlighter language={language} className={className}>
+          <CodeHeader
+            language={language}
+            code={code}
+          />
+          <SyntaxHighlighter
+            language={language}
+            className={className}
+          >
             {code}
           </SyntaxHighlighter>
         </>
@@ -221,7 +233,10 @@ const defaultComponents: any = {
     }
 
     return (
-      <code className={cn("rounded font-semibold", className)} {...props}>
+      <code
+        className={cn("rounded font-semibold", className)}
+        {...props}
+      >
         {children}
       </code>
     );

src/components/thread/messages/ai.tsx

@@ -113,7 +113,7 @@ export function AssistantMessage({
   }
 
   return (
-    <div className="flex items-start mr-auto gap-2 group">
+    <div className="group mr-auto flex items-start gap-2">
       {isToolResult ? (
         <ToolResult message={message} />
       ) : (
@@ -136,7 +136,12 @@ export function AssistantMessage({
             </>
           )}
 
-          {message && <CustomComponent message={message} thread={thread} />}
+          {message && (
+            <CustomComponent
+              message={message}
+              thread={thread}
+            />
+          )}
           {isAgentInboxInterruptSchema(threadInterrupt?.value) &&
             (isLastMessage || hasNoAIOrToolMessages) && (
               <ThreadView interrupt={threadInterrupt.value} />
@@ -148,7 +153,7 @@ export function AssistantMessage({
           ) : null}
           <div
             className={cn(
-              "flex gap-2 items-center mr-auto transition-opacity",
+              "mr-auto flex items-center gap-2 transition-opacity",
               "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
             )}
           >
@@ -173,11 +178,11 @@ export function AssistantMessage({
 
 export function AssistantMessageLoading() {
   return (
-    <div className="flex items-start mr-auto gap-2">
-      <div className="flex items-center gap-1 rounded-2xl bg-muted px-4 py-2 h-8">
-        <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_infinite]"></div>
-        <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_0.5s_infinite]"></div>
-        <div className="w-1.5 h-1.5 rounded-full bg-foreground/50 animate-[pulse_1.5s_ease-in-out_1s_infinite]"></div>
+    <div className="mr-auto flex items-start gap-2">
+      <div className="bg-muted flex h-8 items-center gap-1 rounded-2xl px-4 py-2">
+        <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_infinite] rounded-full"></div>
+        <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_0.5s_infinite] rounded-full"></div>
+        <div className="bg-foreground/50 h-1.5 w-1.5 animate-[pulse_1.5s_ease-in-out_1s_infinite] rounded-full"></div>
       </div>
     </div>
   );

src/components/thread/messages/generic-interrupt.tsx

@@ -55,9 +55,9 @@ export function GenericInterruptView({
   const displayEntries = processEntries();
 
   return (
-    <div className="border border-gray-200 rounded-lg overflow-hidden">
-      <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
-        <div className="flex items-center justify-between gap-2 flex-wrap">
+    <div className="overflow-hidden rounded-lg border border-gray-200">
+      <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           <h3 className="font-medium text-gray-900">Human Interrupt</h3>
         </div>
       </div>
@@ -68,7 +68,10 @@ export function GenericInterruptView({
         transition={{ duration: 0.3 }}
       >
         <div className="p-3">
-          <AnimatePresence mode="wait" initial={false}>
+          <AnimatePresence
+            mode="wait"
+            initial={false}
+          >
             <motion.div
               key={isExpanded ? "expanded" : "collapsed"}
               initial={{ opacity: 0, y: 20 }}
@@ -88,12 +91,12 @@ export function GenericInterruptView({
                       : (item as [string, any]);
                     return (
                       <tr key={argIdx}>
-                        <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                        <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
                           {key}
                         </td>
                         <td className="px-4 py-2 text-sm text-gray-500">
                           {isComplexValue(value) ? (
-                            <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                            <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm">
                               {JSON.stringify(value, null, 2)}
                             </code>
                           ) : (
@@ -112,7 +115,7 @@ export function GenericInterruptView({
           (Array.isArray(interrupt) && interrupt.length > 5)) && (
           <motion.button
             onClick={() => setIsExpanded(!isExpanded)}
-            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"
+            className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
             initial={{ scale: 1 }}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}

src/components/thread/messages/human.tsx

@@ -72,7 +72,7 @@ export function HumanMessage({
   return (
     <div
       className={cn(
-        "flex items-center ml-auto gap-2 group",
+        "group ml-auto flex items-center gap-2",
         isEditing && "w-full max-w-xl",
       )}
     >
@@ -84,14 +84,14 @@ export function HumanMessage({
             onSubmit={handleSubmitEdit}
           />
         ) : (
-          <p className="px-4 py-2 rounded-3xl bg-muted w-fit ml-auto whitespace-pre-wrap">
+          <p className="bg-muted ml-auto w-fit rounded-3xl px-4 py-2 whitespace-pre-wrap">
             {contentString}
           </p>
         )}
 
         <div
           className={cn(
-            "flex gap-2 items-center ml-auto transition-opacity",
+            "ml-auto flex items-center gap-2 transition-opacity",
             "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
             isEditing && "opacity-100",
           )}

src/components/thread/messages/shared.tsx

@@ -36,7 +36,10 @@ function ContentCopyable({
       tooltip="Copy content"
       disabled={disabled}
     >
-      <AnimatePresence mode="wait" initial={false}>
+      <AnimatePresence
+        mode="wait"
+        initial={false}
+      >
         {copied ? (
           <motion.div
             key="check"
@@ -187,7 +190,10 @@ export function CommandBar({
 
   return (
     <div className="flex items-center gap-2">
-      <ContentCopyable content={content} disabled={isLoading} />
+      <ContentCopyable
+        content={content}
+        disabled={isLoading}
+      />
       {isAiMessage && !!handleRegenerate && (
         <TooltipIconButton
           disabled={isLoading}

src/components/thread/messages/tool-calls.tsx

@@ -15,20 +15,20 @@ export function ToolCalls({
   if (!toolCalls || toolCalls.length === 0) return null;
 
   return (
-    <div className="space-y-4 w-full max-w-4xl">
+    <div className="w-full max-w-4xl space-y-4">
       {toolCalls.map((tc, idx) => {
         const args = tc.args as Record<string, any>;
         const hasArgs = Object.keys(args).length > 0;
         return (
           <div
             key={idx}
-            className="border border-gray-200 rounded-lg overflow-hidden"
+            className="overflow-hidden rounded-lg border border-gray-200"
           >
-            <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
+            <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
               <h3 className="font-medium text-gray-900">
                 {tc.name}
                 {tc.id && (
-                  <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
+                  <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
                     {tc.id}
                   </code>
                 )}
@@ -39,12 +39,12 @@ export function ToolCalls({
                 <tbody className="divide-y divide-gray-200">
                   {Object.entries(args).map(([key, value], argIdx) => (
                     <tr key={argIdx}>
-                      <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                      <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
                         {key}
                       </td>
                       <td className="px-4 py-2 text-sm text-gray-500">
                         {isComplexValue(value) ? (
-                          <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm break-all">
+                          <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
                             {JSON.stringify(value, null, 2)}
                           </code>
                         ) : (
@@ -56,7 +56,7 @@ export function ToolCalls({
                 </tbody>
               </table>
             ) : (
-              <code className="text-sm block p-3">{"{}"}</code>
+              <code className="block p-3 text-sm">{"{}"}</code>
             )}
           </div>
         );
@@ -94,13 +94,13 @@ export function ToolResult({ message }: { message: ToolMessage }) {
       : contentStr;
 
   return (
-    <div className="border border-gray-200 rounded-lg overflow-hidden">
-      <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
-        <div className="flex items-center justify-between gap-2 flex-wrap">
+    <div className="overflow-hidden rounded-lg border border-gray-200">
+      <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           {message.name ? (
             <h3 className="font-medium text-gray-900">
               Tool Result:{" "}
-              <code className="bg-gray-100 px-2 py-1 rounded">
+              <code className="rounded bg-gray-100 px-2 py-1">
                 {message.name}
               </code>
             </h3>
@@ -108,7 +108,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
             <h3 className="font-medium text-gray-900">Tool Result</h3>
           )}
           {message.tool_call_id && (
-            <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
+            <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
               {message.tool_call_id}
             </code>
           )}
@@ -121,7 +121,10 @@ export function ToolResult({ message }: { message: ToolMessage }) {
         transition={{ duration: 0.3 }}
       >
         <div className="p-3">
-          <AnimatePresence mode="wait" initial={false}>
+          <AnimatePresence
+            mode="wait"
+            initial={false}
+          >
             <motion.div
               key={isExpanded ? "expanded" : "collapsed"}
               initial={{ opacity: 0, y: 20 }}
@@ -143,12 +146,12 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                         : [item[0], item[1]];
                       return (
                         <tr key={argIdx}>
-                          <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                          <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
                             {key}
                           </td>
                           <td className="px-4 py-2 text-sm text-gray-500">
                             {isComplexValue(value) ? (
-                              <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm break-all">
+                              <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
                                 {JSON.stringify(value, null, 2)}
                               </code>
                             ) : (
@@ -161,7 +164,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                   </tbody>
                 </table>
               ) : (
-                <code className="text-sm block">{displayedContent}</code>
+                <code className="block text-sm">{displayedContent}</code>
               )}
             </motion.div>
           </AnimatePresence>
@@ -172,7 +175,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
             parsedContent.length > 5)) && (
           <motion.button
             onClick={() => setIsExpanded(!isExpanded)}
-            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"
+            className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
             initial={{ scale: 1 }}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}

src/components/ui/password-input.tsx

@@ -25,13 +25,19 @@ export const PasswordInput = React.forwardRef<
         type="button"
         variant="ghost"
         size="sm"
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
         onClick={() => setShowPassword((prev) => !prev)}
       >
         {showPassword ? (
-          <EyeIcon className="h-4 w-4" aria-hidden="true" />
+          <EyeIcon
+            className="h-4 w-4"
+            aria-hidden="true"
+          />
         ) : (
-          <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+          <EyeOffIcon
+            className="h-4 w-4"
+            aria-hidden="true"
+          />
         )}
         <span className="sr-only">
           {showPassword ? "Hide password" : "Show password"}

src/components/ui/sheet.tsx

@@ -5,25 +5,45 @@ import { XIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return (
+    <SheetPrimitive.Root
+      data-slot="sheet"
+      {...props}
+    />
+  );
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+  return (
+    <SheetPrimitive.Trigger
+      data-slot="sheet-trigger"
+      {...props}
+    />
+  );
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+  return (
+    <SheetPrimitive.Close
+      data-slot="sheet-close"
+      {...props}
+    />
+  );
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+  return (
+    <SheetPrimitive.Portal
+      data-slot="sheet-portal"
+      {...props}
+    />
+  );
 }
 
 function SheetOverlay({

src/components/ui/switch.tsx

@@ -19,7 +19,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "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",
+          "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
         )}
       />
     </SwitchPrimitive.Root>

src/components/ui/tooltip.tsx

@@ -21,7 +21,10 @@ function Tooltip({
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        {...props}
+      />
     </TooltipProvider>
   );
 }
@@ -29,7 +32,12 @@ function Tooltip({
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      {...props}
+    />
+  );
 }
 
 function TooltipContent({

src/providers/Stream.tsx

@@ -158,10 +158,10 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   // Show the form if we: don't have an API URL, or don't have an assistant ID
   if (!finalApiUrl || !finalAssistantId) {
     return (
-      <div className="flex items-center justify-center min-h-screen w-full p-4">
-        <div className="animate-in fade-in-0 zoom-in-95 flex flex-col border bg-background shadow-lg rounded-lg max-w-3xl">
-          <div className="flex flex-col gap-2 mt-14 p-6 border-b">
-            <div className="flex items-start flex-col gap-2">
+      <div className="flex min-h-screen w-full items-center justify-center p-4">
+        <div className="animate-in fade-in-0 zoom-in-95 bg-background flex max-w-3xl flex-col rounded-lg border shadow-lg">
+          <div className="mt-14 flex flex-col gap-2 border-b p-6">
+            <div className="flex flex-col items-start gap-2">
               <LangGraphLogoSVG className="h-7" />
               <h1 className="text-xl font-semibold tracking-tight">
                 Agent Chat
@@ -188,7 +188,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
 
               form.reset();
             }}
-            className="flex flex-col gap-6 p-6 bg-muted/50"
+            className="bg-muted/50 flex flex-col gap-6 p-6"
           >
             <div className="flex flex-col gap-2">
               <Label htmlFor="apiUrl">
@@ -242,8 +242,11 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
               />
             </div>
 
-            <div className="flex justify-end mt-2">
-              <Button type="submit" size="lg">
+            <div className="mt-2 flex justify-end">
+              <Button
+                type="submit"
+                size="lg"
+              >
                 Continue
                 <ArrowRight className="size-5" />
               </Button>
@@ -255,7 +258,11 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   }
 
   return (
-    <StreamSession apiKey={apiKey} apiUrl={apiUrl} assistantId={assistantId}>
+    <StreamSession
+      apiKey={apiKey}
+      apiUrl={apiUrl}
+      assistantId={assistantId}
+    >
       {children}
     </StreamSession>
   );