@useatlas/create 0.0.5 → 0.0.7

package/templates/nextjs-standalone/src/ui/components/notebook/notebook-shell.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import { Plus, Download } from "lucide-react";
+import type { UseNotebookReturn } from "./use-notebook";
+import { useKeyboardNav } from "./use-keyboard-nav";
+import { NotebookCell } from "./notebook-cell";
+import { NotebookTextCell } from "./notebook-text-cell";
+import { NotebookEmptyState } from "./notebook-empty-state";
+import { NotebookInputBar } from "./notebook-input-bar";
+import { DeleteCellDialog } from "./delete-cell-dialog";
+import { ForkBranchSelector } from "./fork-branch-selector";
+import { exportToMarkdown, exportToHTML, downloadFile } from "./notebook-export";
+import { ErrorBoundary } from "@/ui/components/error-boundary";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableOverlay,
+} from "@/components/ui/sortable";
+
+interface NotebookShellProps {
+  notebook: UseNotebookReturn;
+  focusCellId?: string;
+}
+
+export function NotebookShell({ notebook, focusCellId }: NotebookShellProps) {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const anyRunning = notebook.cells.some((c) => c.status === "running");
+  const editingCellId = notebook.cells.find((c) => c.editing)?.id ?? null;
+  const [pendingDeleteIndex, setPendingDeleteIndex] = useState<number | null>(null);
+  const [dismissedError, setDismissedError] = useState<Error | null>(null);
+
+  const { setRef, focusCell } = useKeyboardNav({
+    cellCount: notebook.cells.length,
+    onEnterEdit: (index) => {
+      const cell = notebook.cells[index];
+      if (cell && !cell.editing) notebook.toggleEdit(cell.id);
+    },
+    onExitEdit: () => {
+      if (editingCellId) notebook.toggleEdit(editingCellId);
+    },
+    onDelete: (index) => {
+      setPendingDeleteIndex(index);
+    },
+    onInsertTextCell: (index) => {
+      const cell = notebook.cells[index];
+      notebook.insertTextCell(cell?.id);
+    },
+    editing: editingCellId !== null,
+  });
+
+  // Focus the deep-linked cell on mount (browser will scroll it into view)
+  useEffect(() => {
+    if (!focusCellId) return;
+    const idx = notebook.cells.findIndex((c) => c.id === focusCellId);
+    if (idx !== -1) focusCell(idx);
+  }, [focusCellId]); // Only scroll on mount/deep-link change
+
+  // Scroll to bottom when a new cell is appended
+  const prevCellCount = useRef(notebook.cells.length);
+  useEffect(() => {
+    if (notebook.cells.length > prevCellCount.current) {
+      const lastEl = scrollAreaRef.current?.querySelector("[role='region']:last-of-type");
+      lastEl?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+    prevCellCount.current = notebook.cells.length;
+  }, [notebook.cells.length]);
+
+  const pendingDeleteCell = pendingDeleteIndex !== null ? notebook.cells[pendingDeleteIndex] : null;
+
+  return (
+    <div className="flex h-full flex-col">
+      <div ref={scrollAreaRef} className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="mx-auto max-w-5xl space-y-4">
+          {notebook.error && notebook.error !== dismissedError && (
+            <div className="flex items-start justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+              <div>
+                <p className="font-medium">Request failed</p>
+                <p>{notebook.error.message}</p>
+                <p className="mt-1 text-xs text-red-500 dark:text-red-400">Try re-running the last cell or refreshing the page.</p>
+              </div>
+              <Button variant="ghost" size="sm" onClick={() => setDismissedError(notebook.error)} className="shrink-0 text-red-600 dark:text-red-400">
+                Dismiss
+              </Button>
+            </div>
+          )}
+          {notebook.warning && !notebook.error && (
+            <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300">
+              <p>{notebook.warning}</p>
+              <Button variant="ghost" size="sm" onClick={notebook.clearWarning} className="shrink-0 text-amber-600 dark:text-amber-400">
+                Dismiss
+              </Button>
+            </div>
+          )}
+
+          {notebook.forkInfo && notebook.forkInfo.branches.length > 0 && (
+            <ForkBranchSelector
+              forkInfo={notebook.forkInfo}
+              onSwitchBranch={notebook.switchBranch}
+            />
+          )}
+
+          {/* Notebook toolbar — insert text cell + export */}
+          {notebook.cells.length > 0 && (
+            <div className="flex items-center justify-between">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 gap-1.5 text-xs"
+                onClick={() => notebook.insertTextCell()}
+              >
+                <Plus className="size-3" />
+                Text Cell
+              </Button>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1.5 text-xs"
+                  >
+                    <Download className="size-3" />
+                    Export
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      try {
+                        downloadFile(
+                          exportToMarkdown(notebook.cells),
+                          "notebook.md",
+                          "text/markdown",
+                        );
+                      } catch (err: unknown) {
+                        console.error(
+                          "Export to Markdown failed:",
+                          err instanceof Error ? err.message : String(err),
+                        );
+                      }
+                    }}
+                  >
+                    Markdown (.md)
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      try {
+                        downloadFile(
+                          exportToHTML(notebook.cells),
+                          "notebook.html",
+                          "text/html",
+                        );
+                      } catch (err: unknown) {
+                        console.error(
+                          "Export to HTML failed:",
+                          err instanceof Error ? err.message : String(err),
+                        );
+                      }
+                    }}
+                  >
+                    HTML (.html)
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+
+          {notebook.cells.length === 0 ? (
+            <NotebookEmptyState />
+          ) : (
+            <Sortable
+              value={notebook.cells}
+              onValueChange={(newCells) =>
+                notebook.reorderCells(newCells.map((c) => c.id))
+              }
+              getItemValue={(cell) => cell.id}
+              orientation="vertical"
+            >
+              <SortableContent className="space-y-4">
+                {notebook.cells.map((cell, i) => (
+                  <SortableItem key={cell.id} value={cell.id}>
+                    <ErrorBoundary
+                      fallbackRender={(error, reset) => (
+                        <div role="alert" className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400">
+                          <p className="font-medium">Cell {cell.number} failed to render</p>
+                          <p className="mt-1 text-xs">This cell encountered a rendering error. Other cells should be unaffected.</p>
+                          <p className="mt-1 text-xs opacity-60">{error.message}</p>
+                          <Button variant="outline" size="sm" onClick={reset} className="mt-2 text-xs">
+                            Retry
+                          </Button>
+                        </div>
+                      )}
+                    >
+                      {cell.type === "text" ? (
+                        <NotebookTextCell
+                          ref={setRef(i)}
+                          cell={cell}
+                          onUpdateContent={notebook.updateTextCell}
+                          onDelete={notebook.deleteCell}
+                          onToggleEdit={notebook.toggleEdit}
+                        />
+                      ) : (
+                        <NotebookCell
+                          ref={setRef(i)}
+                          cell={cell}
+                          anyRunning={anyRunning}
+                          onRerun={notebook.rerunCell}
+                          onDelete={notebook.deleteCell}
+                          onToggleEdit={notebook.toggleEdit}
+                          onToggleCollapse={notebook.toggleCollapse}
+                          onCopy={notebook.copyCell}
+                          onFork={notebook.forkCell}
+                        />
+                      )}
+                    </ErrorBoundary>
+                  </SortableItem>
+                ))}
+              </SortableContent>
+              <SortableOverlay />
+            </Sortable>
+          )}
+        </div>
+      </div>
+
+      <NotebookInputBar
+        value={notebook.input}
+        onChange={notebook.setInput}
+        onSubmit={() => {
+          if (notebook.input.trim()) {
+            notebook.appendCell(notebook.input.trim());
+          }
+        }}
+        disabled={anyRunning}
+      />
+
+      <DeleteCellDialog
+        open={pendingDeleteIndex !== null}
+        onOpenChange={(open) => { if (!open) setPendingDeleteIndex(null); }}
+        cellNumber={pendingDeleteCell?.number ?? 0}
+        isTextCell={pendingDeleteCell?.type === "text"}
+        onConfirm={() => {
+          if (pendingDeleteIndex !== null) {
+            const cell = notebook.cells[pendingDeleteIndex];
+            if (cell) {
+              notebook.deleteCell(cell.id);
+            } else {
+              console.warn(
+                `Delete failed: cell at index ${pendingDeleteIndex} no longer exists (cells length: ${notebook.cells.length})`,
+              );
+            }
+          }
+          setPendingDeleteIndex(null);
+        }}
+      />
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/notebook/notebook-text-cell.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { GripVertical, Type, Pencil, Check, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { SortableItemHandle } from "@/components/ui/sortable";
+import { cn } from "@/lib/utils";
+import { Markdown } from "@/ui/components/chat/markdown";
+import type { ResolvedCell } from "./types";
+
+interface NotebookTextCellProps {
+  cell: ResolvedCell;
+  onUpdateContent: (cellId: string, content: string) => void;
+  onDelete: (cellId: string) => void;
+  onToggleEdit: (cellId: string) => void;
+}
+
+export const NotebookTextCell = forwardRef<HTMLElement, NotebookTextCellProps>(
+  function NotebookTextCell({ cell, onUpdateContent, onDelete, onToggleEdit }, ref) {
+    const [draft, setDraft] = useState(cell.content ?? "");
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    // Sync draft when cell content changes externally
+    useEffect(() => {
+      if (!cell.editing) {
+        setDraft(cell.content ?? "");
+      }
+    }, [cell.content, cell.editing]);
+
+    // Focus and auto-expand textarea when entering edit mode
+    useEffect(() => {
+      if (cell.editing) {
+        requestAnimationFrame(() => {
+          const el = textareaRef.current;
+          if (el) {
+            el.focus();
+            el.style.height = "auto";
+            el.style.height = `${el.scrollHeight}px`;
+          }
+        });
+      }
+    }, [cell.editing]);
+
+    function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+      const value = e.target.value;
+      setDraft(value);
+      onUpdateContent(cell.id, value);
+
+      // Auto-expand
+      const el = textareaRef.current;
+      if (el) {
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+      }
+    }
+
+    function handleDone() {
+      onUpdateContent(cell.id, draft);
+      onToggleEdit(cell.id);
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleDone();
+      }
+    }
+
+    const hasContent = (cell.content ?? "").trim().length > 0;
+
+    return (
+      <section
+        ref={ref}
+        role="region"
+        aria-label={`Text cell ${cell.number}`}
+        tabIndex={0}
+        className={cn(
+          "group rounded-lg border border-dashed border-zinc-300 bg-zinc-50/50 transition-shadow focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-900/30",
+        )}
+      >
+        <div className="flex items-start gap-3 border-b border-dashed border-zinc-200 px-4 py-2 dark:border-zinc-800/50">
+          <SortableItemHandle asChild>
+            <button
+              className="mt-0.5 flex size-6 shrink-0 cursor-grab items-center justify-center rounded text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+              aria-label="Drag to reorder"
+            >
+              <GripVertical className="size-3.5" />
+            </button>
+          </SortableItemHandle>
+          <span className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded bg-zinc-100 dark:bg-zinc-800">
+            <Type className="size-3 text-zinc-500 dark:text-zinc-400" />
+          </span>
+          <span className="mt-1 text-xs font-medium text-zinc-500 dark:text-zinc-400">
+            Text
+          </span>
+          <div className="ml-auto flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              onClick={() => (cell.editing ? handleDone() : onToggleEdit(cell.id))}
+              aria-label={cell.editing ? "Done editing" : "Edit text cell"}
+            >
+              {cell.editing ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Pencil className="size-3.5" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 text-red-500 hover:text-red-600"
+              onClick={() => onDelete(cell.id)}
+              aria-label="Delete text cell"
+            >
+              <Trash2 className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="px-4 py-3">
+          {cell.editing ? (
+            <Textarea
+              ref={textareaRef}
+              value={draft}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              className="min-h-[80px] resize-y overflow-hidden border-none bg-transparent p-0 shadow-none focus-visible:ring-0"
+              placeholder="Write markdown text..."
+            />
+          ) : hasContent ? (
+            <div
+              className="cursor-pointer text-sm"
+              onDoubleClick={() => onToggleEdit(cell.id)}
+            >
+              <Markdown content={cell.content ?? ""} />
+            </div>
+          ) : (
+            <p
+              className="cursor-pointer text-xs italic text-zinc-400 dark:text-zinc-500"
+              onDoubleClick={() => onToggleEdit(cell.id)}
+            >
+              Double-click to edit
+            </p>
+          )}
+        </div>
+      </section>
+    );
+  },
+);

package/templates/nextjs-standalone/src/ui/components/notebook/types.ts

@@ -0,0 +1,39 @@
+import type { UIMessage } from "@ai-sdk/react";
+import type { ForkBranchWire } from "@/ui/lib/types";
+
+export type CellStatus = "idle" | "running" | "error";
+export type CellType = "query" | "text";
+
+export interface NotebookCell {
+  id: string;
+  /** Message ID for query cells; empty string for text cells. */
+  messageId: string;
+  number: number;
+  collapsed: boolean;
+  editing: boolean;
+  status: CellStatus;
+  /** Cell type — undefined treated as "query" for backwards compatibility. */
+  type?: CellType;
+  /** Markdown content for text cells. */
+  content?: string;
+}
+
+export interface NotebookState {
+  conversationId: string;
+  cells: NotebookCell[];
+  version: 1 | 2 | 3;
+  cellOrder?: string[];
+}
+
+/** A cell with its resolved messages attached. For query cells, these are real conversation messages; for text cells, userMessage is synthetic and assistantMessage is always null. */
+export interface ResolvedCell extends NotebookCell {
+  userMessage: UIMessage;
+  assistantMessage: UIMessage | null;
+}
+
+/** Fork info passed to UI for branch display. */
+export interface ForkInfo {
+  rootId: string;
+  currentId: string;
+  branches: ForkBranchWire[];
+}

package/templates/nextjs-standalone/src/ui/components/notebook/use-keyboard-nav.ts

@@ -0,0 +1,109 @@
+import { useCallback, useRef, useEffect } from "react";
+
+export interface UseKeyboardNavOptions {
+  cellCount: number;
+  onEnterEdit: (index: number) => void;
+  onExitEdit: () => void;
+  onDelete: (index: number) => void;
+  onInsertTextCell?: (index: number) => void;
+  editing: boolean;
+}
+
+/**
+ * Keyboard navigation for notebook cells.
+ *
+ * Bindings (when focus is on a cell, not in an input/textarea):
+ *   ArrowUp/Down         — navigate between cells
+ *   Enter                — enter edit mode for focused cell
+ *   Escape               — exit edit mode, return focus to cell
+ *   Ctrl+Shift+Backspace — delete focused cell (shows confirmation dialog)
+ *   Ctrl+Shift+T         — insert text cell after focused cell
+ *
+ * When inside an INPUT/TEXTAREA, only Escape is handled (exits edit mode).
+ * In-editor key handling (Enter to submit, Shift+Enter for newline) is
+ * managed by NotebookCellInput, not this hook.
+ */
+export function useKeyboardNav({
+  cellCount,
+  onEnterEdit,
+  onExitEdit,
+  onDelete,
+  onInsertTextCell,
+  editing,
+}: UseKeyboardNavOptions) {
+  const focusedIndex = useRef(0);
+  const cellRefs = useRef<(HTMLElement | null)[]>([]);
+
+  const setRef = useCallback(
+    (index: number) => (el: HTMLElement | null) => {
+      cellRefs.current[index] = el;
+    },
+    [],
+  );
+
+  const focusCell = useCallback((index: number) => {
+    const clamped = Math.max(0, Math.min(index, cellRefs.current.length - 1));
+    focusedIndex.current = clamped;
+    cellRefs.current[clamped]?.focus();
+  }, []);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          onExitEdit();
+          focusCell(focusedIndex.current);
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowUp":
+          if (cellCount > 0) {
+            e.preventDefault();
+            focusCell(focusedIndex.current - 1);
+          }
+          break;
+        case "ArrowDown":
+          if (cellCount > 0) {
+            e.preventDefault();
+            focusCell(focusedIndex.current + 1);
+          }
+          break;
+        case "Enter":
+          if (!editing && cellCount > 0) {
+            e.preventDefault();
+            onEnterEdit(focusedIndex.current);
+          }
+          break;
+        case "Escape":
+          if (editing) {
+            e.preventDefault();
+            onExitEdit();
+            focusCell(focusedIndex.current);
+          }
+          break;
+        case "Backspace":
+          if (e.ctrlKey && e.shiftKey && cellCount > 0) {
+            e.preventDefault();
+            onDelete(focusedIndex.current);
+          }
+          break;
+        case "t":
+        case "T":
+          if (e.ctrlKey && e.shiftKey && onInsertTextCell) {
+            e.preventDefault();
+            onInsertTextCell(focusedIndex.current);
+          }
+          break;
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [cellCount, editing, focusCell, onEnterEdit, onExitEdit, onDelete, onInsertTextCell]);
+
+  return { setRef, focusCell, focusedIndex };
+}