From 0ace16ede650dccc4d11e6e6262f02e0f005f42f Mon Sep 17 00:00:00 2001
From: Arjun <6592213+arkml@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:23:03 +0530
Subject: [PATCH] make the chat input box similar

---
 .../src/components/code/code-chat.tsx         | 99 +++++++++++--------
 1 file changed, 57 insertions(+), 42 deletions(-)

diff --git a/apps/x/apps/renderer/src/components/code/code-chat.tsx b/apps/x/apps/renderer/src/components/code/code-chat.tsx
index 934f5f84..8e9a9567 100644
--- a/apps/x/apps/renderer/src/components/code/code-chat.tsx
+++ b/apps/x/apps/renderer/src/components/code/code-chat.tsx
@@ -203,48 +203,63 @@ export function CodeChat({
         <ConversationScrollButton />
       </Conversation>
 
-      {/* Composer */}
-      <div className="border-t p-3">
-        <div className="mx-auto flex w-full max-w-3xl items-end gap-2">
-          <Textarea
-            ref={textareaRef}
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault()
-                void handleSend()
-              }
-            }}
-            placeholder={`Message ${AGENT_LABEL[session.agent]}…`}
-            className="max-h-40 min-h-[44px] flex-1 resize-none"
-            rows={1}
-          />
-          {busy ? (
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0"
-              onClick={() => void handleStop()}
-              disabled={stopping}
-              title="Stop the agent"
-            >
-              <Square className={cn('size-4', stopping && 'animate-pulse')} />
-            </Button>
-          ) : (
-            <Button
-              size="icon"
-              className="shrink-0"
-              onClick={() => void handleSend()}
-              disabled={!draft.trim()}
-              title="Send"
-            >
-              <ArrowUp className="size-4" />
-            </Button>
-          )}
-        </div>
-        <div className="mx-auto mt-1.5 w-full max-w-3xl text-[10px] text-muted-foreground">
-          Direct — messages go straight to {AGENT_LABEL[session.agent]}
+      {/* Composer — mirrors the assistant chat input's look (rounded card,
+          borderless textarea, round primary send / destructive stop). */}
+      <div className="p-3">
+        <div className="rowboat-chat-input mx-auto w-full max-w-3xl rounded-lg border border-border bg-background shadow-none">
+          <div className="px-4 pb-2 pt-4">
+            <Textarea
+              ref={textareaRef}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  void handleSend()
+                }
+              }}
+              placeholder="Type your message..."
+              className="max-h-40 min-h-[24px] w-full resize-none border-0 bg-transparent p-0 text-sm shadow-none outline-none focus-visible:ring-0"
+              rows={2}
+            />
+          </div>
+          <div className="flex items-center gap-2 px-3 pb-3">
+            <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+              <Terminal className="size-3.5 shrink-0" />
+              <span className="truncate">Direct — straight to {AGENT_LABEL[session.agent]}</span>
+            </span>
+            <div className="flex-1" />
+            {busy ? (
+              <Button
+                size="icon"
+                onClick={() => void handleStop()}
+                disabled={stopping}
+                title="Stop the agent"
+                className="h-7 w-7 shrink-0 rounded-full bg-destructive text-destructive-foreground transition-all hover:bg-destructive/90"
+              >
+                {stopping ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Square className="h-3 w-3 fill-current" />
+                )}
+              </Button>
+            ) : (
+              <Button
+                size="icon"
+                onClick={() => void handleSend()}
+                disabled={!draft.trim()}
+                title="Send"
+                className={cn(
+                  'h-7 w-7 shrink-0 rounded-full transition-all',
+                  draft.trim()
+                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                    : 'bg-muted text-muted-foreground',
+                )}
+              >
+                <ArrowUp className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
         </div>
       </div>
     </div>