@useatlas/create 0.0.5 → 0.0.7

package/templates/docker/src/ui/components/conversations/conversation-item.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Star, Trash2 } from "lucide-react";
+import { Loader2, NotebookPen, Star, Trash2 } from "lucide-react";
+import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import type { Conversation } from "../../lib/types";
 import { DeleteConfirmation } from "./delete-confirmation";
@@ -22,7 +23,7 @@ function relativeTime(dateStr: string): string {
   const days = Math.floor(hours / 24);
   if (days < 7) return `${days}d ago`;
 
-  return new Date(dateStr).toLocaleDateString();
+  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
 export function ConversationItem({
@@ -35,24 +36,31 @@ export function ConversationItem({
   conversation: Conversation;
   isActive: boolean;
   onSelect: () => void;
-  onDelete: () => Promise<boolean>;
-  onStar: (starred: boolean) => Promise<boolean>;
+  onDelete: () => Promise<void>;
+  onStar: (starred: boolean) => Promise<void>;
 }) {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [starPending, setStarPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   if (confirmDelete) {
     return (
       <div className="rounded-lg border border-red-200 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/10">
         <DeleteConfirmation
+          deleting={deleting}
           onCancel={() => setConfirmDelete(false)}
           onConfirm={async () => {
             setDeleting(true);
-            const success = await onDelete();
-            setDeleting(false);
-            if (success) {
+            try {
+              await onDelete();
               setConfirmDelete(false);
+            } catch (err: unknown) {
+              console.warn("Failed to delete conversation:", err instanceof Error ? err.message : String(err));
+              setError("Failed to delete conversation. Please try again.");
+              setTimeout(() => setError(null), 3000);
+            } finally {
+              setDeleting(false);
             }
           }}
         />
@@ -71,7 +79,7 @@ export function ConversationItem({
           onSelect();
         }
       }}
-      className={`group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+      className={`group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 ${
         isActive
           ? "bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400"
           : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
@@ -81,9 +89,13 @@ export function ConversationItem({
         <p className="truncate text-sm font-medium">
           {conversation.title || "New conversation"}
         </p>
-        <p className="text-xs text-zinc-400 dark:text-zinc-500">
-          {relativeTime(conversation.updatedAt)}
-        </p>
+        {error ? (
+          <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+        ) : (
+          <p className="text-xs text-zinc-400 dark:text-zinc-500">
+            {relativeTime(conversation.updatedAt)}
+          </p>
+        )}
       </div>
       <div className="flex shrink-0 items-center gap-0.5">
         <Button
@@ -93,19 +105,38 @@ export function ConversationItem({
             e.stopPropagation();
             if (starPending) return;
             setStarPending(true);
-            await onStar(!conversation.starred);
-            setStarPending(false);
+            try {
+              await onStar(!conversation.starred);
+            } catch (err: unknown) {
+              console.warn("Failed to update star:", err instanceof Error ? err.message : String(err));
+              setError("Failed to update. Please try again.");
+              setTimeout(() => setError(null), 3000);
+            } finally {
+              setStarPending(false);
+            }
           }}
           disabled={starPending}
-          className={`h-6 w-6 transition-all ${
+          className={`size-8 transition-all ${
             conversation.starred
               ? "text-amber-400 opacity-100 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300"
-              : "text-zinc-400 opacity-0 hover:text-amber-400 group-hover:opacity-100 dark:hover:text-amber-400"
+              : "text-zinc-400 opacity-100 md:opacity-0 hover:text-amber-400 md:group-hover:opacity-100 dark:hover:text-amber-400"
           } ${starPending ? "opacity-50" : ""}`}
           aria-label={conversation.starred ? "Unstar conversation" : "Star conversation"}
         >
-          <Star className="h-3.5 w-3.5" fill={conversation.starred ? "currentColor" : "none"} />
+          {starPending ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Star className="h-3.5 w-3.5" fill={conversation.starred ? "currentColor" : "none"} />
+          )}
         </Button>
+        <Link
+          href={`/notebook?id=${conversation.id}`}
+          className="rounded p-1 text-zinc-400 opacity-100 md:opacity-0 transition-all hover:text-zinc-600 md:group-hover:opacity-100 dark:hover:text-zinc-300"
+          aria-label="Open in notebook"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <NotebookPen className="size-3.5" />
+        </Link>
         <Button
           variant="ghost"
           size="icon"
@@ -114,7 +145,7 @@ export function ConversationItem({
             setConfirmDelete(true);
           }}
           disabled={deleting}
-          className="h-6 w-6 shrink-0 text-zinc-400 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400"
+          className="size-8 shrink-0 text-zinc-400 opacity-100 md:opacity-0 transition-all hover:bg-red-50 hover:text-red-500 md:group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400"
           aria-label="Delete conversation"
         >
           <Trash2 className="h-3.5 w-3.5" />

package/templates/docker/src/ui/components/conversations/conversation-list.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { MessageSquare, Star } from "lucide-react";
 import type { Conversation } from "../../lib/types";
 import { ConversationItem } from "./conversation-item";
 
@@ -9,21 +10,52 @@ export function ConversationList({
   onSelect,
   onDelete,
   onStar,
+  showSections = true,
+  emptyMessage,
 }: {
   conversations: Conversation[];
   selectedId: string | null;
   onSelect: (id: string) => void;
-  onDelete: (id: string) => Promise<boolean>;
-  onStar: (id: string, starred: boolean) => Promise<boolean>;
+  onDelete: (id: string) => Promise<void>;
+  onStar: (id: string, starred: boolean) => Promise<void>;
+  showSections?: boolean;
+  emptyMessage?: string;
 }) {
   if (conversations.length === 0) {
+    const isSaved = !!emptyMessage;
+    const Icon = isSaved ? Star : MessageSquare;
     return (
-      <div className="px-3 py-6 text-center text-xs text-zinc-400 dark:text-zinc-500">
-        No conversations yet
+      <div className="flex flex-col items-center px-3 py-8 text-center">
+        <Icon className="size-8 text-zinc-300 dark:text-zinc-600" />
+        <p className="mt-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">
+          {emptyMessage ?? "No conversations yet"}
+        </p>
+        {!isSaved && (
+          <p className="mt-0.5 text-[11px] text-zinc-400 dark:text-zinc-500">
+            Ask a question to get started
+          </p>
+        )}
       </div>
     );
   }
 
+  function renderItems(items: Conversation[]) {
+    return items.map((c) => (
+      <ConversationItem
+        key={c.id}
+        conversation={c}
+        isActive={c.id === selectedId}
+        onSelect={() => onSelect(c.id)}
+        onDelete={() => onDelete(c.id)}
+        onStar={(s) => onStar(c.id, s)}
+      />
+    ));
+  }
+
+  if (!showSections) {
+    return <div className="space-y-1">{renderItems(conversations)}</div>;
+  }
+
   const starred = conversations.filter((c) => c.starred);
   const unstarred = conversations.filter((c) => !c.starred);
 
@@ -34,16 +66,7 @@ export function ConversationList({
           <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
             Starred
           </div>
-          {starred.map((c) => (
-            <ConversationItem
-              key={c.id}
-              conversation={c}
-              isActive={c.id === selectedId}
-              onSelect={() => onSelect(c.id)}
-              onDelete={() => onDelete(c.id)}
-              onStar={(s) => onStar(c.id, s)}
-            />
-          ))}
+          {renderItems(starred)}
           {unstarred.length > 0 && (
             <div className="px-3 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
               Recent
@@ -51,16 +74,7 @@ export function ConversationList({
           )}
         </>
       )}
-      {unstarred.map((c) => (
-        <ConversationItem
-          key={c.id}
-          conversation={c}
-          isActive={c.id === selectedId}
-          onSelect={() => onSelect(c.id)}
-          onDelete={() => onDelete(c.id)}
-          onStar={(s) => onStar(c.id, s)}
-        />
-      ))}
+      {renderItems(unstarred)}
     </div>
   );
 }

package/templates/docker/src/ui/components/conversations/conversation-sidebar.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import { useState, useEffect } from "react";
+import { Star } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { Conversation } from "../../lib/types";
 import { ConversationList } from "./conversation-list";
+import { OrgSwitcher } from "../org-switcher";
+import { ErrorBoundary } from "../error-boundary";
+
+type SidebarFilter = "all" | "saved";
 
 export function ConversationSidebar({
   conversations,
@@ -18,36 +27,86 @@ export function ConversationSidebar({
   selectedId: string | null;
   loading: boolean;
   onSelect: (id: string) => void;
-  onDelete: (id: string) => Promise<boolean>;
-  onStar: (id: string, starred: boolean) => Promise<boolean>;
+  onDelete: (id: string) => Promise<void>;
+  onStar: (id: string, starred: boolean) => Promise<void>;
   onNewChat: () => void;
   mobileOpen: boolean;
   onMobileClose: () => void;
 }) {
+  const [filter, setFilter] = useState<SidebarFilter>("all");
+
+  // Close mobile sidebar on Escape
+  useEffect(() => {
+    if (!mobileOpen) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onMobileClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, onMobileClose]);
+
+  const starredConversations = conversations.filter((c) => c.starred);
+  const filteredConversations = filter === "saved" ? starredConversations : conversations;
+
   const sidebar = (
-    <div className="flex h-full flex-col border-r border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-950/50">
+    <div className="flex h-full flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+      <ErrorBoundary fallback={<></>}>
+        <OrgSwitcher />
+      </ErrorBoundary>
       <div className="flex items-center justify-between border-b border-zinc-200 px-3 py-3 dark:border-zinc-800">
         <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">History</span>
         <button
           onClick={onNewChat}
-          className="rounded-lg border border-zinc-200 px-2.5 py-1 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+          className="min-h-11 rounded-lg border border-zinc-200 px-3 py-2.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
         >
           + New
         </button>
       </div>
 
+      <div className="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={filter}
+          onValueChange={(val) => { if (val) setFilter(val as SidebarFilter); }}
+          className="gap-1"
+        >
+          <ToggleGroupItem value="all" className="px-2.5 text-xs">
+            All
+          </ToggleGroupItem>
+          <ToggleGroupItem value="saved" className="gap-1.5 px-2.5 text-xs">
+            <Star className="h-3 w-3" fill={filter === "saved" ? "currentColor" : "none"} />
+            Saved
+            {starredConversations.length > 0 && (
+              <Badge variant="secondary" className="h-4 px-1.5 text-[10px] font-semibold">
+                {starredConversations.length}
+              </Badge>
+            )}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
       <div className="flex-1 overflow-y-auto p-2">
         {loading && conversations.length === 0 ? (
-          <div className="flex items-center justify-center py-8">
-            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-600 dark:border-t-zinc-300" />
+          <div className="space-y-2 p-1">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="flex items-center gap-2 rounded-lg px-3 py-2.5">
+                <div className="min-w-0 flex-1 space-y-2">
+                  <Skeleton className="h-3.5 w-3/4" />
+                  <Skeleton className="h-2.5 w-1/3" />
+                </div>
+              </div>
+            ))}
           </div>
         ) : (
           <ConversationList
-            conversations={conversations}
+            conversations={filteredConversations}
             selectedId={selectedId}
             onSelect={onSelect}
             onDelete={onDelete}
             onStar={onStar}
+            showSections={filter === "all"}
+            emptyMessage={filter === "saved" ? "Star conversations to save them here" : undefined}
           />
         )}
       </div>

package/templates/docker/src/ui/components/conversations/delete-confirmation.tsx

@@ -1,25 +1,32 @@
 "use client";
 
+import { Loader2 } from "lucide-react";
+
 export function DeleteConfirmation({
   onConfirm,
   onCancel,
+  deleting = false,
 }: {
   onConfirm: () => void;
   onCancel: () => void;
+  deleting?: boolean;
 }) {
   return (
     <div className="flex items-center gap-2 px-3 py-2 text-xs">
       <span className="text-zinc-500 dark:text-zinc-400">Delete?</span>
       <button
         onClick={onCancel}
-        className="rounded px-2 py-0.5 text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+        disabled={deleting}
+        className="rounded px-2 py-0.5 text-zinc-500 transition-colors hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 dark:text-zinc-400 dark:hover:text-zinc-200"
       >
         Cancel
       </button>
       <button
         onClick={onConfirm}
-        className="rounded bg-red-600 px-2 py-0.5 text-white transition-colors hover:bg-red-500"
+        disabled={deleting}
+        className="inline-flex items-center gap-1 rounded bg-red-600 px-2 py-0.5 text-white transition-colors hover:bg-red-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-red-500/50 disabled:opacity-50"
       >
+        {deleting && <Loader2 className="size-3 animate-spin" />}
         Delete
       </button>
     </div>

package/templates/docker/src/ui/components/error-boundary.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Component, type ReactNode, type ErrorInfo } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  fallbackRender?: (error: Error, reset: () => void) => ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[ErrorBoundary]", error, info.componentStack);
+    this.props.onError?.(error, info);
+  }
+
+  resetErrorBoundary = () => {
+    this.setState({ error: null });
+  };
+
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+
+    if (this.props.fallbackRender) {
+      return this.props.fallbackRender(error, this.resetErrorBoundary);
+    }
+
+    if (this.props.fallback) {
+      return this.props.fallback;
+    }
+
+    return (
+      <div
+        role="alert"
+        className={cn(
+          "flex flex-col items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-4 text-center",
+          "dark:border-red-900/50 dark:bg-red-950/20",
+        )}
+      >
+        <p className="text-sm text-red-700 dark:text-red-400">
+          This section failed to render. Try again or reload the page.
+        </p>
+        <Button variant="outline" size="sm" onClick={this.resetErrorBoundary}>
+          Try again
+        </Button>
+      </div>
+    );
+  }
+}

package/templates/docker/src/ui/components/notebook/delete-cell-dialog.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface DeleteCellDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cellNumber: number;
+  isTextCell?: boolean;
+  onConfirm: () => void;
+}
+
+export function DeleteCellDialog({ open, onOpenChange, cellNumber, isTextCell, onConfirm }: DeleteCellDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Delete {isTextCell ? "Text Cell" : `Cell ${cellNumber}`}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {isTextCell
+              ? "This will remove this text cell. This action cannot be undone."
+              : "This will remove this cell and all subsequent query cells. Text cells are preserved. This action cannot be undone."}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className="bg-red-600 text-white hover:bg-red-700"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/templates/docker/src/ui/components/notebook/fork-branch-selector.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { GitBranch, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ForkInfo } from "./types";
+
+interface ForkBranchSelectorProps {
+  forkInfo: ForkInfo;
+  onSwitchBranch: (conversationId: string) => void;
+}
+
+export function ForkBranchSelector({ forkInfo, onSwitchBranch }: ForkBranchSelectorProps) {
+  const isRoot = forkInfo.currentId === forkInfo.rootId;
+  const totalBranches = forkInfo.branches.length + 1; // +1 for the root
+  const branchIdx = forkInfo.branches.findIndex((b) => b.conversationId === forkInfo.currentId);
+  const currentLabel = isRoot
+    ? "Main"
+    : branchIdx >= 0
+      ? (forkInfo.branches[branchIdx].label || `Branch ${branchIdx + 1}`)
+      : "Branch";
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900">
+      <GitBranch className="size-4 text-zinc-500" />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-auto gap-1 px-2 py-1 text-sm font-medium"
+          >
+            {currentLabel}
+            <span className="text-zinc-400">({totalBranches} total)</span>
+            <ChevronDown className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            onClick={() => onSwitchBranch(forkInfo.rootId)}
+            className={isRoot ? "bg-zinc-100 dark:bg-zinc-800" : ""}
+          >
+            <GitBranch className="mr-2 size-3.5" />
+            Main (root)
+          </DropdownMenuItem>
+          {forkInfo.branches.map((branch, i) => {
+            const isCurrent = branch.conversationId === forkInfo.currentId;
+            return (
+              <DropdownMenuItem
+                key={branch.conversationId}
+                onClick={() => onSwitchBranch(branch.conversationId)}
+                className={isCurrent ? "bg-zinc-100 dark:bg-zinc-800" : ""}
+              >
+                <GitBranch className="mr-2 size-3.5" />
+                {branch.label || `Branch ${i + 1}`}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/notebook/notebook-cell-input.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface CellInputProps {
+  question: string;
+  editing: boolean;
+  onSubmit: (newQuestion: string) => void;
+  onCancel: () => void;
+}
+
+export function NotebookCellInput({ question, editing, onSubmit, onCancel }: CellInputProps) {
+  const [draft, setDraft] = useState(question);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  function autoExpand() {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }
+
+  useEffect(() => {
+    if (editing) {
+      setDraft(question);
+      requestAnimationFrame(() => {
+        textareaRef.current?.focus();
+        autoExpand();
+      });
+    }
+  }, [editing, question]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit(draft);
+    }
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    setDraft(e.target.value);
+    autoExpand();
+  }
+
+  if (!editing) {
+    return (
+      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+        {question}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Textarea
+        ref={textareaRef}
+        value={draft}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className="min-h-[60px] resize-y overflow-hidden"
+        placeholder="Edit your question..."
+      />
+      <div className="flex items-center gap-2">
+        <Button size="sm" onClick={() => onSubmit(draft)}>
+          Run
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <span className="text-xs text-zinc-500">Enter to run, Shift+Enter for newline</span>
+      </div>
+    </div>
+  );
+}