@useatlas/create 0.0.1

package/templates/nextjs-standalone/src/ui/components/chart/result-chart.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { Component, type ReactNode, type ErrorInfo, useMemo, useState } from "react";
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+} from "recharts";
+import {
+  detectCharts,
+  transformData,
+  CHART_COLORS_LIGHT,
+  CHART_COLORS_DARK,
+  type ChartRecommendation,
+  type ChartType,
+  type RechartsRow,
+  type ChartDetectionResult,
+} from "./chart-detection";
+
+/* ------------------------------------------------------------------ */
+/*  Error boundary                                                       */
+/* ------------------------------------------------------------------ */
+
+class ChartErrorBoundary extends Component<
+  { children: ReactNode; fallback?: ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: ReactNode; fallback?: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): { hasError: boolean } {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("Chart rendering failed:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? (
+        <div className="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">
+          Chart could not be rendered. Switch to Table view to see your data.
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Theme helpers                                                       */
+/* ------------------------------------------------------------------ */
+
+function getColors(dark: boolean) {
+  return dark ? CHART_COLORS_DARK : CHART_COLORS_LIGHT;
+}
+
+function themeTokens(dark: boolean) {
+  return {
+    grid: dark ? "#3f3f46" : "#e4e4e7",
+    axis: dark ? "#a1a1aa" : "#71717a",
+    tooltipBg: dark ? "#18181b" : "#ffffff",
+    tooltipBorder: dark ? "#3f3f46" : "#e4e4e7",
+    tooltipText: dark ? "#e4e4e7" : "#27272a",
+    legendText: dark ? "#a1a1aa" : "#71717a",
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Number formatter for axis / tooltip                                 */
+/* ------------------------------------------------------------------ */
+
+function formatNumber(value: unknown): string {
+  const num = Number(value);
+  if (!isFinite(num)) return String(value ?? "");
+  if (Math.abs(num) >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+  if (Math.abs(num) >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return Number.isInteger(num) ? num.toLocaleString() : num.toFixed(2);
+}
+
+function truncateLabel(label: unknown, maxLen = 12): string {
+  const str = String(label ?? "");
+  return str.length > maxLen ? str.slice(0, maxLen) + "\u2026" : str;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tooltip                                                             */
+/* ------------------------------------------------------------------ */
+
+function ChartTooltip({ active, payload, label, dark }: {
+  active?: boolean;
+  payload?: Array<{ name: string; value: number; color: string }>;
+  label?: string;
+  dark: boolean;
+}) {
+  if (!active || !payload?.length) return null;
+  const t = themeTokens(dark);
+  return (
+    <div
+      style={{
+        background: t.tooltipBg,
+        border: `1px solid ${t.tooltipBorder}`,
+        borderRadius: 6,
+        padding: "8px 12px",
+        fontSize: 12,
+        color: t.tooltipText,
+      }}
+    >
+      <p style={{ fontWeight: 600, marginBottom: 4 }}>{label}</p>
+      {payload.map((entry, i) => (
+        <p key={i} style={{ color: entry.color }}>
+          {entry.name}: {typeof entry.value === "number" ? formatNumber(entry.value) : entry.value}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sub-chart components                                                */
+/* ------------------------------------------------------------------ */
+
+function BarChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const catKey = rec.categoryColumn.header;
+  const valKeys = rec.valueColumns.map((c) => c.header);
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <BarChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+        <XAxis
+          dataKey={catKey}
+          tick={{ fill: t.axis, fontSize: 11 }}
+          tickFormatter={(v: string) => truncateLabel(v)}
+          angle={-45}
+          textAnchor="end"
+          height={60}
+        />
+        <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+        <Tooltip content={<ChartTooltip dark={dark} />} />
+        {valKeys.length > 1 && (
+          <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+        )}
+        {valKeys.map((key, i) => (
+          <Bar
+            key={key}
+            dataKey={key}
+            fill={colors[i % colors.length]}
+            radius={[4, 4, 0, 0]}
+          />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
+
+function LineChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const catKey = rec.categoryColumn.header;
+  const valKeys = rec.valueColumns.map((c) => c.header);
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+        <XAxis
+          dataKey={catKey}
+          tick={{ fill: t.axis, fontSize: 11 }}
+          tickFormatter={(v: string) => truncateLabel(v)}
+          angle={-45}
+          textAnchor="end"
+          height={60}
+        />
+        <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+        <Tooltip content={<ChartTooltip dark={dark} />} />
+        {valKeys.length > 1 && (
+          <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+        )}
+        {valKeys.map((key, i) => (
+          <Line
+            key={key}
+            type="monotone"
+            dataKey={key}
+            stroke={colors[i % colors.length]}
+            strokeWidth={2}
+            dot={{ r: 3, fill: colors[i % colors.length] }}
+            activeDot={{ r: 5 }}
+          />
+        ))}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
+function PieChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const catKey = rec.categoryColumn.header;
+  const valKey = rec.valueColumns[0].header;
+
+  const total = data.reduce((sum, d) => sum + (typeof d[valKey] === "number" ? (d[valKey] as number) : 0), 0);
+
+  const hasNegative = data.some(d => typeof d[valKey] === "number" && (d[valKey] as number) < 0);
+  if (total <= 0 || hasNegative) {
+    return (
+      <div className="flex h-[300px] items-center justify-center text-xs text-zinc-400">
+        Pie chart is not suitable for this data.
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey={valKey}
+          nameKey={catKey}
+          cx="50%"
+          cy="50%"
+          innerRadius={40}
+          outerRadius={100}
+          label={({ name, value }: { name?: string; value?: number }) =>
+            `${truncateLabel(String(name ?? ""), 10)} ${total > 0 && value != null ? ((value / total) * 100).toFixed(0) : 0}%`
+          }
+          labelLine={{ stroke: t.axis }}
+          fontSize={11}
+        >
+          {data.map((_, i) => (
+            <Cell key={i} fill={colors[i % colors.length]} />
+          ))}
+        </Pie>
+        <Tooltip content={<ChartTooltip dark={dark} />} />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Chart type selector                                                 */
+/* ------------------------------------------------------------------ */
+
+const CHART_LABELS: Record<ChartType, string> = { bar: "Bar", line: "Line", pie: "Pie" };
+
+function ChartTypeSelector({
+  recommendations,
+  active,
+  onChange,
+}: {
+  recommendations: ChartRecommendation[];
+  active: ChartType;
+  onChange: (t: ChartType) => void;
+}) {
+  if (recommendations.length <= 1) return null;
+
+  const seen = new Set<ChartType>();
+  const unique = recommendations.filter((r) => {
+    if (seen.has(r.type)) return false;
+    seen.add(r.type);
+    return true;
+  });
+
+  if (unique.length <= 1) return null;
+
+  return (
+    <div className="flex gap-1">
+      {unique.map((rec) => (
+        <button
+          key={rec.type}
+          onClick={() => onChange(rec.type)}
+          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+            active === rec.type
+              ? "bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
+              : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+          }`}
+        >
+          {CHART_LABELS[rec.type]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main ResultChart component                                          */
+/* ------------------------------------------------------------------ */
+
+export function ResultChart({
+  headers,
+  rows,
+  dark,
+  detectionResult,
+}: {
+  headers: string[];
+  rows: string[][];
+  dark: boolean;
+  detectionResult?: ChartDetectionResult;
+}) {
+  const result = useMemo(
+    () => detectionResult ?? detectCharts(headers, rows),
+    [headers, rows, detectionResult],
+  );
+
+  const [activeType, setActiveType] = useState<ChartType | null>(null);
+
+  if (!result.chartable) return null;
+
+  const currentType = activeType ?? result.recommendations[0].type;
+  const currentRec = result.recommendations.find((r) => r.type === currentType) ?? result.recommendations[0];
+
+  // Re-transform data when switching chart type (category axis may differ)
+  const chartData = currentRec === result.recommendations[0]
+    ? result.data
+    : transformData(rows, currentRec);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
+      <div className="flex items-center justify-between border-b border-zinc-100 bg-zinc-50/50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/50">
+        <span className="text-xs text-zinc-500 dark:text-zinc-400">{currentRec.reason}</span>
+        <ChartTypeSelector
+          recommendations={result.recommendations}
+          active={currentType}
+          onChange={setActiveType}
+        />
+      </div>
+      <ChartErrorBoundary key={currentType}>
+        <div className="p-2">
+          {currentType === "bar" && <BarChartView data={chartData} rec={currentRec} dark={dark} />}
+          {currentType === "line" && <LineChartView data={chartData} rec={currentRec} dark={dark} />}
+          {currentType === "pie" && <PieChartView data={chartData} rec={currentRec} dark={dark} />}
+        </div>
+      </ChartErrorBoundary>
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/api-key-bar.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+
+export function ApiKeyBar({
+  apiKey,
+  onSave,
+}: {
+  apiKey: string;
+  onSave: (key: string) => void;
+}) {
+  const [editing, setEditing] = useState(!apiKey);
+  const [draft, setDraft] = useState(apiKey);
+
+  if (!editing && apiKey) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs dark:border-zinc-700 dark:bg-zinc-900">
+        <span className="text-zinc-500 dark:text-zinc-400">API key configured</span>
+        <button
+          onClick={() => { setDraft(apiKey); setEditing(true); }}
+          className="rounded border border-zinc-200 px-2 py-0.5 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"
+        >
+          Change
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (draft.trim()) {
+          onSave(draft.trim());
+          setEditing(false);
+        }
+      }}
+      className="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-700 dark:bg-zinc-900"
+    >
+      <input
+        type="password"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        placeholder="Enter your API key..."
+        className="flex-1 bg-transparent text-xs text-zinc-900 placeholder-zinc-400 outline-none dark:text-zinc-100 dark:placeholder-zinc-600"
+        autoFocus
+      />
+      <button
+        type="submit"
+        disabled={!draft.trim()}
+        className="rounded border border-zinc-200 px-2 py-0.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 disabled:opacity-40 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+      >
+        Save
+      </button>
+      {apiKey && (
+        <button
+          type="button"
+          onClick={() => setEditing(false)}
+          className="text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+        >
+          Cancel
+        </button>
+      )}
+    </form>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/copy-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+
+export function CopyButton({ text, label = "Copy" }: { text: string; label?: string }) {
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  return (
+    <button
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          setState("copied");
+          setTimeout(() => setState("idle"), 2000);
+        } catch (err) {
+          console.warn("Clipboard write failed:", err);
+          setState("failed");
+          setTimeout(() => setState("idle"), 2000);
+        }
+      }}
+      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"
+    >
+      {state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label}
+    </button>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/data-table.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { formatCell } from "../../lib/helpers";
+
+export function DataTable({
+  columns,
+  rows,
+  maxRows = 10,
+}: {
+  columns: string[];
+  rows: (Record<string, unknown> | unknown[])[];
+  maxRows?: number;
+}) {
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+
+  const hasMore = rows.length > maxRows;
+
+  const cell = (row: Record<string, unknown> | unknown[], colIdx: number): unknown => {
+    if (Array.isArray(row)) return row[colIdx];
+    return (row as Record<string, unknown>)[columns[colIdx]];
+  };
+
+  const handleSort = (colIdx: number) => {
+    if (sortCol === colIdx) {
+      if (sortDir === "asc") {
+        setSortDir("desc");
+      } else {
+        setSortCol(null);
+        setSortDir("asc");
+      }
+    } else {
+      setSortCol(colIdx);
+      setSortDir("asc");
+    }
+  };
+
+  const sorted = sortCol !== null
+    ? [...rows].sort((a, b) => {
+        const av = cell(a, sortCol);
+        const bv = cell(b, sortCol);
+        if (av == null && bv == null) return 0;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        const aStr = String(av).trim();
+        const bStr = String(bv).trim();
+        if (aStr === "" && bStr === "") return 0;
+        if (aStr === "") return 1;
+        if (bStr === "") return -1;
+        const an = Number(aStr), bn = Number(bStr);
+        if (!isNaN(an) && !isNaN(bn)) {
+          return sortDir === "asc" ? an - bn : bn - an;
+        }
+        const cmp = aStr.localeCompare(bStr);
+        return sortDir === "asc" ? cmp : -cmp;
+      })
+    : rows;
+  const display = sorted.slice(0, maxRows);
+
+  return (
+    <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-700">
+      <table className="min-w-full text-xs">
+        <thead>
+          <tr className="border-b border-zinc-200 bg-zinc-100/80 dark:border-zinc-700 dark:bg-zinc-800/80">
+            {columns.map((col, i) => (
+              <th
+                key={i}
+                onClick={() => handleSort(i)}
+                className="group cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+              >
+                {col}
+                {sortCol === i
+                  ? sortDir === "asc" ? " \u25B2" : " \u25BC"
+                  : ""}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {display.map((row, i) => (
+            <tr
+              key={i}
+              className={i % 2 === 0 ? "bg-zinc-100/60 dark:bg-zinc-900/60" : "bg-zinc-50/30 dark:bg-zinc-900/30"}
+            >
+              {columns.map((_, j) => (
+                <td key={j} className="whitespace-nowrap px-3 py-1.5 text-zinc-700 dark:text-zinc-300">
+                  {formatCell(cell(row, j))}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {hasMore && (
+        <div className="border-t border-zinc-200 px-3 py-1.5 text-xs text-zinc-500 dark:border-zinc-700">
+          Showing {maxRows} of {rows.length} rows
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/error-banner.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { parseChatError, type AuthMode } from "../../lib/types";
+
+export function ErrorBanner({ error, authMode }: { error: Error; authMode: AuthMode }) {
+  const info = useMemo(() => parseChatError(error, authMode), [error, authMode]);
+  const [countdown, setCountdown] = useState(info.retryAfterSeconds ?? 0);
+
+  useEffect(() => {
+    if (!info.retryAfterSeconds) return;
+    setCountdown(info.retryAfterSeconds);
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) { clearInterval(interval); return 0; }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [info.retryAfterSeconds]);
+
+  const detail = info.retryAfterSeconds && countdown > 0
+    ? `Try again in ${countdown} second${countdown !== 1 ? "s" : ""}.`
+    : info.detail;
+
+  return (
+    <div className="mb-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-4 py-3 text-sm">
+      <p className="font-medium">{info.title}</p>
+      {detail && <p className="mt-1 text-xs opacity-80">{detail}</p>}
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/explore-card.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+
+export function ExploreCard({ part }: { part: unknown }) {
+  const args = getToolArgs(part);
+  const result = getToolResult(part);
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(false);
+
+  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={() => done && 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="font-mono text-green-400">$</span>
+        <span className="flex-1 truncate font-mono text-zinc-700 dark:text-zinc-300">
+          {String(args.command ?? "")}
+        </span>
+        {done ? (
+          <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+        ) : (
+          <span className="animate-pulse text-zinc-500">running...</span>
+        )}
+      </button>
+      {open && done && (
+        <div className="border-t border-zinc-100 bg-white px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950">
+          <pre className="max-h-60 overflow-auto whitespace-pre-wrap font-mono text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+            {result != null
+              ? typeof result === "string"
+                ? result
+                : JSON.stringify(result, null, 2)
+              : "(no output received)"}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs-standalone/src/ui/components/chat/loading-card.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export function LoadingCard({ label }: { label: string }) {
+  return (
+    <div className="my-2 flex items-center gap-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">
+      <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-600 dark:border-t-zinc-300" />
+      {label}
+    </div>
+  );
+}