@useatlas/create 0.0.1

package/templates/docker/src/ui/components/chat/managed-auth-card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState } from "react";
+import { useAtlasConfig } from "../../context";
+
+export function ManagedAuthCard() {
+  const { authClient } = useAtlasConfig();
+  const [view, setView] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const res = await authClient.signIn.email({ email, password });
+      if (res.error) setError(res.error.message ?? "Sign in failed");
+    } catch (err) {
+      console.error("Sign in error:", err);
+      setError(err instanceof TypeError ? "Unable to reach the server" : "Sign in failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSignup(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const res = await authClient.signUp.email({ email, password, name: name || email.split("@")[0] });
+      if (res.error) setError(res.error.message ?? "Sign up failed");
+    } catch (err) {
+      console.error("Sign up error:", err);
+      setError(err instanceof TypeError ? "Unable to reach the server" : "Sign up failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="w-full max-w-sm space-y-4 rounded-lg border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900">
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            {view === "login" ? "Sign in to Atlas" : "Create an account"}
+          </h2>
+          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+            {view === "login" ? "Enter your credentials to continue" : "Set up your Atlas account"}
+          </p>
+        </div>
+
+        <form onSubmit={view === "login" ? handleLogin : handleSignup} className="space-y-3">
+          {view === "signup" && (
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Name (optional)"
+              className="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+            />
+          )}
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Email"
+            required
+            className="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            required
+            minLength={8}
+            className="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+          />
+          {error && (
+            <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+          )}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40"
+          >
+            {loading ? "..." : view === "login" ? "Sign in" : "Create account"}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">
+          {view === "login" ? (
+            <>
+              No account?{" "}
+              <button onClick={() => { setView("signup"); setError(""); }} className="text-blue-600 hover:underline dark:text-blue-400">
+                Create one
+              </button>
+            </>
+          ) : (
+            <>
+              Already have an account?{" "}
+              <button onClick={() => { setView("login"); setError(""); }} className="text-blue-600 hover:underline dark:text-blue-400">
+                Sign in
+              </button>
+            </>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/chat/markdown.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useContext } from "react";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+
+export function Markdown({ content }: { content: string }) {
+  const dark = useContext(DarkModeContext);
+  return (
+    <ReactMarkdown
+      components={{
+        p: ({ children }) => (
+          <p className="mb-3 leading-relaxed last:mb-0">{children}</p>
+        ),
+        h1: ({ children }) => (
+          <h1 className="mb-2 mt-4 text-lg font-bold first:mt-0">{children}</h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="mb-2 mt-3 text-base font-semibold first:mt-0">{children}</h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="mb-1 mt-2 font-semibold first:mt-0">{children}</h3>
+        ),
+        ul: ({ children }) => (
+          <ul className="mb-3 list-disc space-y-1 pl-4">{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className="mb-3 list-decimal space-y-1 pl-4">{children}</ol>
+        ),
+        strong: ({ children }) => (
+          <strong className="font-semibold text-zinc-900 dark:text-zinc-50">{children}</strong>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="my-2 border-l-2 border-zinc-300 pl-3 text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
+            {children}
+          </blockquote>
+        ),
+        pre: ({ children }) => <>{children}</>,
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          if (match) {
+            return (
+              <SyntaxHighlighter
+                language={match[1]}
+                style={dark ? oneDark : oneLight}
+                customStyle={{
+                  margin: "0.5rem 0",
+                  borderRadius: "0.5rem",
+                  fontSize: "0.75rem",
+                }}
+              >
+                {String(children).replace(/\n$/, "")}
+              </SyntaxHighlighter>
+            );
+          }
+          return (
+            <code
+              className="rounded bg-zinc-200/50 px-1.5 py-0.5 text-xs text-zinc-800 dark:bg-zinc-700/50 dark:text-zinc-200"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

package/templates/docker/src/ui/components/chat/sql-block.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useContext } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import { CopyButton } from "./copy-button";
+
+export function SQLBlock({ sql }: { sql: string }) {
+  const dark = useContext(DarkModeContext);
+  return (
+    <div className="relative">
+      <SyntaxHighlighter
+        language="sql"
+        style={dark ? oneDark : oneLight}
+        customStyle={{
+          margin: 0,
+          borderRadius: "0.5rem",
+          fontSize: "0.75rem",
+          padding: "0.75rem 1rem",
+        }}
+      >
+        {sql}
+      </SyntaxHighlighter>
+      <div className="absolute right-2 top-2">
+        <CopyButton text={sql} label="Copy SQL" />
+      </div>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/chat/sql-result-card.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useContext, useMemo, useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete, downloadCSV, toCsvString } from "../../lib/helpers";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import { detectCharts } from "../chart/chart-detection";
+import { ResultChart } from "../chart/result-chart";
+import { LoadingCard } from "./loading-card";
+import { DataTable } from "./data-table";
+import { SQLBlock } from "./sql-block";
+
+/** Convert structured rows (Record<string, unknown>[]) to string[][] for chart detection. */
+function toStringRows(columns: string[], rows: Record<string, unknown>[]): string[][] {
+  return rows.map((row) => columns.map((col) => (row[col] == null ? "" : String(row[col]))));
+}
+
+
+export function SQLResultCard({ part }: { part: unknown }) {
+  const dark = useContext(DarkModeContext);
+  const args = getToolArgs(part);
+  const result = getToolResult(part) as Record<string, unknown> | null;
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(true);
+  const [sqlOpen, setSqlOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<"both" | "chart" | "table">("both");
+
+  const columns = useMemo(
+    () => (done && result?.success ? ((result.columns as string[]) ?? []) : []),
+    [done, result],
+  );
+  const rows = useMemo(
+    () => (done && result?.success ? ((result.rows as Record<string, unknown>[]) ?? []) : []),
+    [done, result],
+  );
+  const sql = String(args.sql ?? "");
+
+  const stringRows = useMemo(() => toStringRows(columns, rows), [columns, rows]);
+  const chartResult = useMemo(
+    () => (columns.length > 0 ? detectCharts(columns, stringRows) : { chartable: false as const, columns: [] }),
+    [columns, stringRows],
+  );
+
+  if (!done) return <LoadingCard label="Executing query..." />;
+
+  if (!result) {
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400 px-3 py-2 text-xs">
+        Query completed but no result was returned.
+      </div>
+    );
+  }
+
+  if (!result.success) {
+    return (
+      <div className="my-2 rounded-lg border border-red-300 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400 px-3 py-2 text-xs">
+        Query failed. Check the query and try again.
+      </div>
+    );
+  }
+
+  const hasData = columns.length > 0 && rows.length > 0;
+  const showChart = chartResult.chartable && (viewMode === "chart" || viewMode === "both");
+  const showTable = viewMode === "table" || viewMode === "both" || !chartResult.chartable;
+
+  return (
+    <div className="my-2 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60"
+      >
+        <span className="rounded bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400 px-1.5 py-0.5 font-medium">
+          SQL
+        </span>
+        <span className="flex-1 truncate text-zinc-500 dark:text-zinc-400">
+          {String(args.explanation ?? "Query result")}
+        </span>
+        <span className="text-zinc-500">
+          {rows.length} row{rows.length !== 1 ? "s" : ""}
+          {result.truncated ? "+" : ""}
+        </span>
+        <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-zinc-100 dark:border-zinc-800">
+          {hasData && chartResult.chartable && (
+            <div className="flex gap-1 px-3 pt-2">
+              {(["chart", "both", "table"] as const).map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => setViewMode(mode)}
+                  className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+                    viewMode === mode
+                      ? "bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200"
+                      : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                  }`}
+                >
+                  {mode === "chart" ? "Chart" : mode === "both" ? "Both" : "Table"}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {hasData && showChart && (
+            <div className="px-3 py-2">
+              <ResultChart headers={columns} rows={stringRows} dark={dark} detectionResult={chartResult} />
+            </div>
+          )}
+
+          {hasData && showTable && <DataTable columns={columns} rows={rows} />}
+
+          {!hasData && (
+            <div className="px-3 py-2 text-xs text-zinc-500 dark:text-zinc-400">
+              Query returned 0 rows.
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 px-3 py-2">
+            {sql && (
+              <button
+                onClick={() => setSqlOpen(!sqlOpen)}
+                className="rounded border border-zinc-200 px-2 py-1 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+              >
+                {sqlOpen ? "Hide SQL" : "Show SQL"}
+              </button>
+            )}
+            {hasData && (
+              <button
+                onClick={() => downloadCSV(toCsvString(columns, rows))}
+                className="rounded border border-zinc-200 px-2 py-1 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+              >
+                Download CSV
+              </button>
+            )}
+          </div>
+          {sqlOpen && sql && (
+            <div className="px-3 pb-2">
+              <SQLBlock sql={sql} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docker/src/ui/components/chat/starter-prompts.ts

@@ -0,0 +1,6 @@
+export const STARTER_PROMPTS = [
+  "What are the top 10 companies by revenue?",
+  "Show me the distribution of account types",
+  "What is the headcount breakdown by department?",
+  "What is total MRR by plan type?",
+];

package/templates/docker/src/ui/components/chat/tool-part.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { getToolName } from "ai";
+import { getToolResult } from "../../lib/helpers";
+import { isActionToolResult } from "../../lib/action-types";
+import { ExploreCard } from "./explore-card";
+import { SQLResultCard } from "./sql-result-card";
+import { ActionApprovalCard } from "../actions/action-approval-card";
+
+export function ToolPart({ part }: { part: unknown }) {
+  let name: string;
+  try {
+    name = getToolName(part as Parameters<typeof getToolName>[0]);
+  } catch (err) {
+    console.warn("Failed to determine tool name:", err);
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Tool result (unknown type)
+      </div>
+    );
+  }
+
+  switch (name) {
+    case "explore":
+      return <ExploreCard part={part} />;
+    case "executeSQL":
+      return <SQLResultCard part={part} />;
+    default: {
+      const result = getToolResult(part);
+      if (isActionToolResult(result)) {
+        return <ActionApprovalCard part={part} />;
+      }
+      return (
+        <div className="my-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900">
+          Tool: {name}
+        </div>
+      );
+    }
+  }
+}

package/templates/docker/src/ui/components/chat/typing-indicator.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+export function TypingIndicator() {
+  return (
+    <div className="flex justify-start">
+      <div className="flex items-center gap-1 rounded-xl bg-zinc-100 px-4 py-3 dark:bg-zinc-800">
+        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" />
+        <span
+          className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
+          style={{ animationDelay: "150ms" }}
+        />
+        <span
+          className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
+          style={{ animationDelay: "300ms" }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import type { Conversation } from "../../lib/types";
+import { DeleteConfirmation } from "./delete-confirmation";
+
+function relativeTime(dateStr: string): string {
+  const then = new Date(dateStr).getTime();
+  if (isNaN(then)) return "";
+  const now = Date.now();
+  const diff = now - then;
+
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+
+  return new Date(dateStr).toLocaleDateString();
+}
+
+export function ConversationItem({
+  conversation,
+  isActive,
+  onSelect,
+  onDelete,
+  onStar,
+}: {
+  conversation: Conversation;
+  isActive: boolean;
+  onSelect: () => void;
+  onDelete: () => Promise<boolean>;
+  onStar: (starred: boolean) => Promise<boolean>;
+}) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [starPending, setStarPending] = useState(false);
+
+  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
+          onCancel={() => setConfirmDelete(false)}
+          onConfirm={async () => {
+            setDeleting(true);
+            const success = await onDelete();
+            setDeleting(false);
+            if (success) {
+              setConfirmDelete(false);
+            }
+            // On failure, keep confirmation dialog open so user sees something is wrong
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={onSelect}
+      className={`group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+        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"
+      }`}
+    >
+      <div className="min-w-0 flex-1">
+        <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>
+      </div>
+      <div className="flex shrink-0 items-center gap-0.5">
+        <button
+          onClick={async (e) => {
+            e.stopPropagation();
+            if (starPending) return;
+            setStarPending(true);
+            await onStar(!conversation.starred);
+            setStarPending(false);
+          }}
+          disabled={starPending}
+          className={`rounded p-1 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"
+          } ${starPending ? "opacity-50" : ""}`}
+          aria-label={conversation.starred ? "Unstar conversation" : "Star conversation"}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+            {conversation.starred ? (
+              <path fillRule="evenodd" d="M8 1.75a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 13.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 7.874a.75.75 0 0 1 .416-1.28l4.21-.611L7.327 2.17A.75.75 0 0 1 8 1.75Z" clipRule="evenodd" />
+            ) : (
+              <path fillRule="evenodd" d="M8 1.75a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 13.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 7.874a.75.75 0 0 1 .416-1.28l4.21-.611L7.327 2.17A.75.75 0 0 1 8 1.75Zm0 2.445L6.615 7.05a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 4.196Z" clipRule="evenodd" />
+            )}
+          </svg>
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setConfirmDelete(true);
+          }}
+          disabled={deleting}
+          className="shrink-0 rounded p-1 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"
+          aria-label="Delete conversation"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+            <path fillRule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.286a1.5 1.5 0 0 0 1.492-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5A.75.75 0 0 1 9.95 6Z" clipRule="evenodd" />
+          </svg>
+        </button>
+      </div>
+    </button>
+  );
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+import type { Conversation } from "../../lib/types";
+import { ConversationItem } from "./conversation-item";
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  onDelete,
+  onStar,
+}: {
+  conversations: Conversation[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => Promise<boolean>;
+  onStar: (id: string, starred: boolean) => Promise<boolean>;
+}) {
+  if (conversations.length === 0) {
+    return (
+      <div className="px-3 py-6 text-center text-xs text-zinc-400 dark:text-zinc-500">
+        No conversations yet
+      </div>
+    );
+  }
+
+  const starred = conversations.filter((c) => c.starred);
+  const unstarred = conversations.filter((c) => !c.starred);
+
+  return (
+    <div className="space-y-1">
+      {starred.length > 0 && (
+        <>
+          <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)}
+            />
+          ))}
+          {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
+            </div>
+          )}
+        </>
+      )}
+      {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)}
+        />
+      ))}
+    </div>
+  );
+}