@useatlas/create 0.0.5 → 0.0.7

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

@@ -0,0 +1,58 @@
+"use client";
+
+import type { UIMessage } from "@ai-sdk/react";
+import type { CellStatus } from "./types";
+import { ToolPart } from "@/ui/components/chat/tool-part";
+import { Markdown } from "@/ui/components/chat/markdown";
+import { TypingIndicator } from "@/ui/components/chat/typing-indicator";
+import { parseSuggestions } from "@/ui/lib/helpers";
+
+interface CellOutputProps {
+  assistantMessage: UIMessage | null;
+  status: CellStatus;
+  collapsed: boolean;
+}
+
+export function NotebookCellOutput({ assistantMessage, status, collapsed }: CellOutputProps) {
+  if (status === "running" && !assistantMessage) {
+    return <TypingIndicator />;
+  }
+
+  if (!assistantMessage) {
+    return (
+      <p className="text-xs italic text-zinc-400 dark:text-zinc-500">
+        No output yet
+      </p>
+    );
+  }
+
+  if (collapsed) {
+    const preview = assistantMessage.parts
+      .filter((p): p is Extract<typeof p, { type: "text" }> => p.type === "text")
+      .map((p) => parseSuggestions(p.text).text)
+      .join(" ")
+      .slice(0, 120);
+
+    return (
+      <p className="truncate text-xs text-zinc-500 dark:text-zinc-400">
+        {preview || "Tool output"}
+        {preview.length >= 120 && "..."}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2 text-sm">
+      {assistantMessage.parts.map((part, i) => {
+        if (part.type === "text") {
+          const displayText = parseSuggestions(part.text).text;
+          return <Markdown key={i} content={displayText} />;
+        }
+        if (part.type === "tool-invocation") {
+          return <ToolPart key={i} part={part} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { Pencil, Play, Copy, GitFork, Trash2, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { CellStatus } from "./types";
+
+interface CellToolbarProps {
+  status: CellStatus;
+  editing: boolean;
+  disabled: boolean;
+  onEdit: () => void;
+  onRun: () => void;
+  onCopy: () => void;
+  onFork: () => void;
+  onDelete: () => void;
+}
+
+export function NotebookCellToolbar({
+  status,
+  editing,
+  disabled,
+  onEdit,
+  onRun,
+  onCopy,
+  onFork,
+  onDelete,
+}: CellToolbarProps) {
+  const isRunning = status === "running";
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Cell actions"
+      className="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={onEdit}
+        disabled={isRunning || disabled}
+        aria-label={editing ? "Cancel edit" : "Edit cell"}
+      >
+        <Pencil className="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-7"
+        onClick={onRun}
+        disabled={isRunning || disabled}
+        aria-label="Run cell"
+      >
+        {isRunning ? (
+          <Loader2 className="size-3.5 animate-spin" />
+        ) : (
+          <Play className="size-3.5" />
+        )}
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-7"
+        onClick={onCopy}
+        aria-label="Copy cell"
+      >
+        <Copy className="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-7"
+        onClick={onFork}
+        disabled={isRunning || disabled}
+        aria-label="Fork from this cell"
+      >
+        <GitFork className="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-7 text-red-500 hover:text-red-600"
+        onClick={onDelete}
+        disabled={isRunning || disabled}
+        aria-label="Delete cell"
+      >
+        <Trash2 className="size-3.5" />
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import { ChevronDown, ChevronRight, GripVertical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SortableItemHandle } from "@/components/ui/sortable";
+import { cn } from "@/lib/utils";
+import type { ResolvedCell } from "./types";
+import { NotebookCellToolbar } from "./notebook-cell-toolbar";
+import { NotebookCellInput } from "./notebook-cell-input";
+import { NotebookCellOutput } from "./notebook-cell-output";
+import { DeleteCellDialog } from "./delete-cell-dialog";
+import { extractTextContent } from "./use-notebook";
+
+interface NotebookCellProps {
+  cell: ResolvedCell;
+  anyRunning: boolean;
+  onRerun: (cellId: string, newQuestion: string) => void;
+  onDelete: (cellId: string) => void;
+  onToggleEdit: (cellId: string) => void;
+  onToggleCollapse: (cellId: string) => void;
+  onCopy: (cellId: string) => Promise<void>;
+  onFork: (cellId: string) => Promise<void>;
+}
+
+export const NotebookCell = forwardRef<HTMLElement, NotebookCellProps>(
+  function NotebookCell(
+    { cell, anyRunning, onRerun, onDelete, onToggleEdit, onToggleCollapse, onCopy, onFork },
+    ref,
+  ) {
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const question = extractTextContent(cell.userMessage);
+    const isRunning = cell.status === "running";
+
+    return (
+      <>
+        <section
+          ref={ref}
+          role="region"
+          aria-label={`Cell ${cell.number}`}
+          tabIndex={0}
+          className={cn(
+            "group rounded-lg border border-zinc-200 bg-white transition-shadow focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-800 dark:bg-zinc-950",
+            isRunning && "ring-2 ring-blue-400/50",
+          )}
+        >
+          <div className="flex items-start gap-3 border-b border-zinc-100 px-4 py-3 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 font-mono text-xs font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
+              {cell.number}
+            </span>
+            <div className="min-w-0 flex-1">
+              <h3 className="sr-only">
+                Cell {cell.number}: {question}
+              </h3>
+              <NotebookCellInput
+                question={question}
+                editing={cell.editing}
+                onSubmit={(newQ) => onRerun(cell.id, newQ)}
+                onCancel={() => onToggleEdit(cell.id)}
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                onClick={() => onToggleCollapse(cell.id)}
+                aria-label={cell.collapsed ? "Expand output" : "Collapse output"}
+              >
+                {cell.collapsed ? (
+                  <ChevronRight className="size-3.5" />
+                ) : (
+                  <ChevronDown className="size-3.5" />
+                )}
+              </Button>
+              <NotebookCellToolbar
+                status={cell.status}
+                editing={cell.editing}
+                disabled={anyRunning && !isRunning}
+                onEdit={() => onToggleEdit(cell.id)}
+                onRun={() => onRerun(cell.id, question)}
+                onCopy={() => onCopy(cell.id)}
+                onFork={() => onFork(cell.id)}
+                onDelete={() => setShowDeleteDialog(true)}
+              />
+            </div>
+          </div>
+
+          <div
+            role="region"
+            aria-label={`Cell ${cell.number} output`}
+            className={cn("px-4 py-3", cell.editing && "opacity-50")}
+          >
+            <NotebookCellOutput
+              assistantMessage={cell.assistantMessage}
+              status={cell.status}
+              collapsed={cell.collapsed}
+            />
+          </div>
+        </section>
+
+        <DeleteCellDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          cellNumber={cell.number}
+          onConfirm={() => onDelete(cell.id)}
+        />
+      </>
+    );
+  },
+);

package/templates/docker/src/ui/components/notebook/notebook-empty-state.tsx

@@ -0,0 +1,19 @@
+import { NotebookPen } from "lucide-react";
+
+export function NotebookEmptyState() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+      <div className="flex size-16 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
+        <NotebookPen className="size-8 text-zinc-400" />
+      </div>
+      <div>
+        <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          Start your analysis
+        </h2>
+        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+          Ask a question below to create your first cell.
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/notebook/notebook-export.ts

@@ -0,0 +1,287 @@
+import type { UIMessage } from "@ai-sdk/react";
+import type { ResolvedCell } from "./types";
+import { extractTextContent } from "./use-notebook";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+
+/** Escape &, <, >, ", and ' for safe embedding in HTML element content and attributes. */
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+/** Escape pipe and newline characters for safe embedding in Markdown table cells. */
+function escapeMarkdownTableCell(str: string): string {
+  return str.replace(/\|/g, "\\|").replace(/\n/g, " ");
+}
+
+/** Format column/row data as a Markdown table. Caps output at 100 rows for readability. */
+function toMarkdownTable(
+  columns: string[],
+  rows: Record<string, unknown>[],
+): string {
+  if (columns.length === 0) return "";
+  const header = `| ${columns.map(escapeMarkdownTableCell).join(" | ")} |`;
+  const divider = `| ${columns.map(() => "---").join(" | ")} |`;
+  const body = rows
+    .slice(0, 100) // Cap at 100 rows for readability
+    .map((row) => `| ${columns.map((c) => escapeMarkdownTableCell(String(row[c] ?? ""))).join(" | ")} |`)
+    .join("\n");
+  const truncation =
+    rows.length > 100 ? `\n\n*...and ${rows.length - 100} more rows*` : "";
+  return `${header}\n${divider}\n${body}${truncation}`;
+}
+
+/** Format column/row data as an HTML table. Caps output at 100 rows for readability. */
+function toHtmlTable(
+  columns: string[],
+  rows: Record<string, unknown>[],
+): string {
+  if (columns.length === 0) return "";
+  const ths = columns.map((c) => `<th>${escapeHtml(c)}</th>`).join("");
+  const trs = rows
+    .slice(0, 100)
+    .map(
+      (row) =>
+        `<tr>${columns.map((c) => `<td>${escapeHtml(String(row[c] ?? ""))}</td>`).join("")}</tr>`,
+    )
+    .join("\n      ");
+  const truncation =
+    rows.length > 100
+      ? `<tr><td colspan="${columns.length}" style="text-align:center;font-style:italic">...and ${rows.length - 100} more rows</td></tr>`
+      : "";
+  return `<table>
+    <thead><tr>${ths}</tr></thead>
+    <tbody>
+      ${trs}
+      ${truncation}
+    </tbody>
+  </table>`;
+}
+
+/** Extract tool-specific data (SQL query/results, Python code/stdout) from a tool invocation part. */
+function extractToolData(part: unknown): {
+  toolName: string;
+  sql?: string;
+  columns?: string[];
+  rows?: Record<string, unknown>[];
+  code?: string;
+  stdout?: string;
+} {
+  const args = getToolArgs(part);
+  const result = isToolComplete(part) ? getToolResult(part) : null;
+  const p = part as Record<string, unknown> | null;
+  const toolName = typeof p?.toolName === "string" ? p.toolName : "unknown";
+
+  const data: ReturnType<typeof extractToolData> = { toolName };
+
+  if (toolName === "executeSQL") {
+    if (typeof args.sql === "string") data.sql = args.sql;
+    if (result && typeof result === "object") {
+      const r = result as Record<string, unknown>;
+      if (Array.isArray(r.columns)) data.columns = r.columns as string[];
+      if (Array.isArray(r.rows))
+        data.rows = r.rows as Record<string, unknown>[];
+    }
+  }
+
+  if (toolName === "executePython") {
+    if (typeof args.code === "string") data.code = args.code;
+    if (result && typeof result === "object") {
+      const r = result as Record<string, unknown>;
+      if (typeof r.stdout === "string") data.stdout = r.stdout;
+    }
+  }
+
+  return data;
+}
+
+/** Serialize all parts of an assistant message (text and tool invocations) into Markdown sections. */
+function serializeToolPartsMarkdown(message: UIMessage): string {
+  const sections: string[] = [];
+  for (const part of message.parts) {
+    if (part.type === "text") {
+      sections.push(part.text);
+    } else if (part.type === "tool-invocation") {
+      const data = extractToolData(part);
+      if (data.sql) sections.push(`\`\`\`sql\n${data.sql}\n\`\`\``);
+      if (data.columns && data.rows) {
+        sections.push(toMarkdownTable(data.columns, data.rows));
+      }
+      if (data.code) sections.push(`\`\`\`python\n${data.code}\n\`\`\``);
+      if (data.stdout) sections.push(`\`\`\`\n${data.stdout}\n\`\`\``);
+    }
+  }
+  return sections.join("\n\n");
+}
+
+/** Serialize all parts of an assistant message (text and tool invocations) into HTML sections. */
+function serializeToolPartsHtml(message: UIMessage): string {
+  const sections: string[] = [];
+  for (const part of message.parts) {
+    if (part.type === "text") {
+      const paragraphs = part.text
+        .split("\n\n")
+        .map((p) => `<p>${escapeHtml(p)}</p>`)
+        .join("\n");
+      sections.push(paragraphs);
+    } else if (part.type === "tool-invocation") {
+      const data = extractToolData(part);
+      if (data.sql) {
+        sections.push(
+          `<pre class="code sql"><code>${escapeHtml(data.sql)}</code></pre>`,
+        );
+      }
+      if (data.columns && data.rows) {
+        sections.push(toHtmlTable(data.columns, data.rows));
+      }
+      if (data.code) {
+        sections.push(
+          `<pre class="code python"><code>${escapeHtml(data.code)}</code></pre>`,
+        );
+      }
+      if (data.stdout) {
+        sections.push(
+          `<pre class="stdout"><code>${escapeHtml(data.stdout)}</code></pre>`,
+        );
+      }
+    }
+  }
+  return sections.join("\n");
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/** Export notebook cells as a Markdown string. Starts with an H1 header; text cells render as-is, query cells as H2 with cell number. */
+export function exportToMarkdown(cells: ResolvedCell[]): string {
+  const sections: string[] = ["# Atlas Notebook Export\n"];
+
+  for (const cell of cells) {
+    try {
+      if (cell.type === "text") {
+        sections.push(cell.content ?? "");
+        continue;
+      }
+
+      // Query cell
+      const question = extractTextContent(cell.userMessage);
+      sections.push(`## [${cell.number}] ${question}`);
+
+      if (cell.assistantMessage) {
+        sections.push(serializeToolPartsMarkdown(cell.assistantMessage));
+      }
+    } catch (err: unknown) {
+      console.warn(
+        `Export: skipped cell ${cell.number} due to error:`,
+        err instanceof Error ? err.message : String(err),
+      );
+      sections.push(`## [${cell.number}] (export error — cell data could not be serialized)`);
+    }
+  }
+
+  return sections.join("\n\n");
+}
+
+/** Export notebook cells as a self-contained HTML document with inline CSS. No external dependencies. */
+export function exportToHTML(cells: ResolvedCell[]): string {
+  const bodyParts: string[] = [];
+
+  for (const cell of cells) {
+    try {
+      if (cell.type === "text") {
+        const paragraphs = (cell.content ?? "")
+          .split("\n\n")
+          .map((p) => `<p>${escapeHtml(p)}</p>`)
+          .join("\n");
+        bodyParts.push(`<section class="text-cell">${paragraphs}</section>`);
+        continue;
+      }
+
+      // Query cell
+      const question = extractTextContent(cell.userMessage);
+      let content = `<h2><span class="cell-num">[${cell.number}]</span> ${escapeHtml(question)}</h2>`;
+      if (cell.assistantMessage) {
+        content += `<div class="response">${serializeToolPartsHtml(cell.assistantMessage)}</div>`;
+      }
+      bodyParts.push(`<section class="cell">${content}</section>`);
+    } catch (err: unknown) {
+      console.warn(
+        `Export: skipped cell ${cell.number} due to error:`,
+        err instanceof Error ? err.message : String(err),
+      );
+      bodyParts.push(`<section class="cell"><h2>[${cell.number}]</h2><p><em>Export error — cell data could not be serialized.</em></p></section>`);
+    }
+  }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Atlas Notebook Export</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.6;
+      color: #18181b;
+      max-width: 860px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
+      background: #fff;
+    }
+    h1 { font-size: 1.5rem; border-bottom: 2px solid #e4e4e7; padding-bottom: 0.5rem; margin-bottom: 2rem; }
+    h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: #27272a; }
+    .cell-num { color: #71717a; font-weight: normal; }
+    section { border: 1px solid #e4e4e7; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
+    section.text-cell { border-style: dashed; background: #fafafa; }
+    .response { margin-top: 0.5rem; }
+    p { margin: 0 0 0.75rem; }
+    p:last-child { margin-bottom: 0; }
+    pre { background: #f4f4f5; border-radius: 6px; padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.8rem; margin: 0.5rem 0; }
+    pre.stdout { background: #fefce8; border: 1px solid #fef08a; }
+    code { font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.5rem 0; }
+    th, td { text-align: left; padding: 0.4rem 0.6rem; border: 1px solid #e4e4e7; }
+    th { background: #f4f4f5; font-weight: 600; font-size: 0.8rem; color: #52525b; }
+    footer { text-align: center; color: #a1a1aa; font-size: 0.75rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e4e4e7; }
+  </style>
+</head>
+<body>
+  <h1>Atlas Notebook Export</h1>
+  ${bodyParts.join("\n  ")}
+  <footer>Exported from Atlas</footer>
+</body>
+</html>`;
+}
+
+/** Trigger a file download in the browser. */
+export function downloadFile(
+  content: string,
+  filename: string,
+  mimeType = "text/plain",
+): void {
+  let url: string | null = null;
+  try {
+    const blob = new Blob([content], { type: mimeType });
+    url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    console.error("Download failed:", detail);
+    window.alert(`Download failed: ${detail}. Try again or copy the content manually.`);
+  } finally {
+    if (url) {
+      const blobUrl = url;
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 10_000);
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface InputBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  disabled: boolean;
+}
+
+export function NotebookInputBar({ value, onChange, onSubmit, disabled }: InputBarProps) {
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (value.trim()) onSubmit();
+    }
+  }
+
+  return (
+    <div className="sticky bottom-0 border-t border-zinc-200 bg-white/80 px-4 py-3 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/80">
+      <div className="mx-auto flex max-w-5xl items-end gap-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <Textarea
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask a question to add a new cell..."
+            disabled={disabled}
+            rows={1}
+            className="min-h-[40px] flex-1 resize-none"
+          />
+          <span className="text-xs text-zinc-500">Enter to send, Shift+Enter for newline</span>
+        </div>
+        <Button
+          size="icon"
+          onClick={onSubmit}
+          disabled={disabled || !value.trim()}
+          aria-label="Send"
+          className="size-10 shrink-0"
+        >
+          <Send className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}