@useatlas/create 0.0.6 → 0.0.7

package/templates/docker/src/ui/components/chat/share-dialog.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Share2, Copy, Check, Link2Off, AlertCircle, Code, RefreshCw, Globe, Lock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import type { ShareStatus, ShareMode, ShareExpiryKey } from "../../lib/types";
+import { SHARE_EXPIRY_OPTIONS } from "../../lib/types";
+
+const EXPIRY_LABELS: Record<ShareExpiryKey, string> = {
+  "1h": "1 hour",
+  "24h": "24 hours",
+  "7d": "7 days",
+  "30d": "30 days",
+  never: "Never",
+};
+
+interface ShareDialogProps {
+  conversationId: string;
+  onShare: (id: string, opts?: { expiresIn?: ShareExpiryKey; shareMode?: ShareMode }) => Promise<{ token: string; url: string }>;
+  onUnshare: (id: string) => Promise<void>;
+  onGetShareStatus: (id: string) => Promise<ShareStatus>;
+}
+
+export function ShareDialog({ conversationId, onShare, onUnshare, onGetShareStatus }: ShareDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [shareUrl, setShareUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [fetchingStatus, setFetchingStatus] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [copiedEmbed, setCopiedEmbed] = useState(false);
+  const [shared, setShared] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [expiresIn, setExpiresIn] = useState<ShareExpiryKey>("7d");
+  const [shareMode, setShareMode] = useState<ShareMode>("public");
+  const [currentShareMode, setCurrentShareMode] = useState<ShareMode>("public");
+  const [expiresAt, setExpiresAt] = useState<string | null>(null);
+
+  // Reset state when conversation changes
+  useEffect(() => {
+    setShareUrl(null);
+    setShared(false);
+    setLoading(false);
+    setFetchingStatus(false);
+    setCopied(false);
+    setCopiedEmbed(false);
+    setError(null);
+    setOpen(false);
+    setExpiresIn("7d");
+    setShareMode("public");
+    setCurrentShareMode("public");
+    setExpiresAt(null);
+  }, [conversationId]);
+
+  // Fetch share status when dialog opens
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+
+    async function fetchStatus() {
+      setFetchingStatus(true);
+      setError(null);
+      try {
+        const status = await onGetShareStatus(conversationId);
+        if (cancelled) return;
+        if (status.shared) {
+          setShared(true);
+          setShareUrl(status.url);
+          setCurrentShareMode(status.shareMode);
+          setExpiresAt(status.expiresAt);
+        } else {
+          setShared(false);
+          setShareUrl(null);
+          setExpiresAt(null);
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          console.warn("getShareStatus: fetch failed", err instanceof Error ? err.message : String(err));
+          setError("Could not check existing share status. You can still create a new share link.");
+        }
+      } finally {
+        if (!cancelled) setFetchingStatus(false);
+      }
+    }
+    fetchStatus();
+
+    return () => { cancelled = true; };
+  }, [open, conversationId, onGetShareStatus]);
+
+  function computeDisplayExpiry(key: ShareExpiryKey): string | null {
+    const seconds = SHARE_EXPIRY_OPTIONS[key];
+    if (seconds === null) return null;
+    return new Date(Date.now() + seconds * 1000).toISOString();
+  }
+
+  async function handleShare() {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await onShare(conversationId, { expiresIn, shareMode });
+      setShareUrl(result.url);
+      setShared(true);
+      setCurrentShareMode(shareMode);
+      setExpiresAt(computeDisplayExpiry(expiresIn));
+    } catch (err: unknown) {
+      console.warn("handleShare error:", err instanceof Error ? err.message : String(err));
+      setError("Failed to create share link. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUnshare() {
+    setLoading(true);
+    setError(null);
+    try {
+      await onUnshare(conversationId);
+      setShareUrl(null);
+      setShared(false);
+      setExpiresAt(null);
+    } catch (err: unknown) {
+      console.warn("handleUnshare error:", err instanceof Error ? err.message : String(err));
+      setError("Failed to remove share link. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleRegenerate() {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await onShare(conversationId, { expiresIn, shareMode });
+      setShareUrl(result.url);
+      setShared(true);
+      setCurrentShareMode(shareMode);
+      setExpiresAt(computeDisplayExpiry(expiresIn));
+    } catch (err: unknown) {
+      console.warn("handleRegenerate error:", err instanceof Error ? err.message : String(err));
+      setError("Failed to regenerate share link. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function copyToClipboard(
+    text: string,
+    onSuccess: () => void,
+  ): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(text);
+      onSuccess();
+    } catch (clipErr) {
+      // Fallback for insecure contexts (e.g. non-HTTPS iframes)
+      try {
+        const input = document.createElement("input");
+        input.value = text;
+        document.body.appendChild(input);
+        input.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(input);
+        if (ok) {
+          onSuccess();
+        } else {
+          setError("Could not copy to clipboard. Please select and copy manually.");
+        }
+      } catch (fallbackErr) {
+        console.warn("copyToClipboard: both methods failed", clipErr, fallbackErr);
+        setError("Could not copy to clipboard. Please select and copy manually.");
+      }
+    }
+  }
+
+  function flashCopied(setter: (v: boolean) => void): void {
+    setter(true);
+    setTimeout(() => setter(false), 2000);
+  }
+
+  async function handleCopy(): Promise<void> {
+    if (!shareUrl) return;
+    await copyToClipboard(shareUrl, () => flashCopied(setCopied));
+  }
+
+  async function handleCopyEmbed(): Promise<void> {
+    if (!shareUrl) return;
+    const escaped = shareUrl.replace(/"/g, "&quot;");
+    const code = `<iframe src="${escaped}/embed" width="100%" height="500" frameborder="0" style="border:0;border-radius:8px"></iframe>`;
+    await copyToClipboard(code, () => flashCopied(setCopiedEmbed));
+  }
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next);
+    if (!next) {
+      setCopied(false);
+      setCopiedEmbed(false);
+      setError(null);
+    }
+  }
+
+  function formatExpiresAt(dateStr: string): string {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    if (diffMs <= 0) return "Expired";
+    const hours = Math.floor(diffMs / (1000 * 60 * 60));
+    if (hours < 1) return `${Math.ceil(diffMs / (1000 * 60))}m remaining`;
+    if (hours < 24) return `${hours}h remaining`;
+    const days = Math.floor(hours / 24);
+    return `${days}d remaining`;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="xs"
+          className={
+            shared
+              ? "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+              : "text-zinc-400 hover:text-blue-500 dark:text-zinc-500 dark:hover:text-blue-400"
+          }
+          aria-label={shared ? "Manage share link" : "Share conversation"}
+        >
+          <Share2 className="h-3.5 w-3.5" />
+          <span>{shared ? "Shared" : "Share"}</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share conversation</DialogTitle>
+          <DialogDescription>
+            {shared
+              ? currentShareMode === "org"
+                ? "Only authenticated users in your organization can view this conversation."
+                : "Anyone with the link can view this conversation."
+              : "Create a link to share this conversation."}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          {error && (
+            <div className="flex items-center gap-2 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              {error}
+            </div>
+          )}
+          {fetchingStatus ? (
+            <div className="flex items-center justify-center py-4 text-sm text-zinc-500">
+              Loading share status...
+            </div>
+          ) : shared && shareUrl ? (
+            <>
+              <div className="flex items-center gap-2">
+                <Input
+                  readOnly
+                  value={shareUrl}
+                  className="flex-1"
+                />
+                <Button size="sm" variant="outline" onClick={handleCopy}>
+                  {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                  <span className="ml-1">{copied ? "Copied" : "Copy"}</span>
+                </Button>
+              </div>
+              <div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-zinc-400">
+                <span className="flex items-center gap-1">
+                  {currentShareMode === "org" ? <Lock className="h-3.5 w-3.5" /> : <Globe className="h-3.5 w-3.5" />}
+                  {currentShareMode === "org" ? "Organization only" : "Public"}
+                </span>
+                {expiresAt && (
+                  <span className="text-zinc-400 dark:text-zinc-500">
+                    {formatExpiresAt(expiresAt)}
+                  </span>
+                )}
+                {!expiresAt && (
+                  <span className="text-zinc-400 dark:text-zinc-500">
+                    No expiry
+                  </span>
+                )}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyEmbed}
+              >
+                {copiedEmbed ? <Check className="h-4 w-4" /> : <Code className="h-4 w-4" />}
+                <span className="ml-1">{copiedEmbed ? "Copied" : "Copy embed code"}</span>
+              </Button>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleRegenerate}
+                  disabled={loading}
+                  className="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
+                >
+                  <RefreshCw className="mr-1 h-4 w-4" />
+                  {loading ? "Regenerating..." : "Regenerate link"}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleUnshare}
+                  disabled={loading}
+                  className="text-red-500 hover:text-red-600 dark:text-red-400"
+                >
+                  <Link2Off className="mr-1 h-4 w-4" />
+                  Remove share link
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex flex-col gap-3">
+                <div className="flex items-center gap-3">
+                  <div className="flex-1">
+                    <Label htmlFor="share-expiry" className="text-sm font-medium">
+                      Link expires
+                    </Label>
+                    <Select value={expiresIn} onValueChange={(v) => setExpiresIn(v as ShareExpiryKey)}>
+                      <SelectTrigger id="share-expiry" className="mt-1">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(Object.keys(EXPIRY_LABELS) as ShareExpiryKey[]).map((key) => (
+                          <SelectItem key={key} value={key}>{EXPIRY_LABELS[key]}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    {shareMode === "org" ? <Lock className="h-4 w-4 text-zinc-500" /> : <Globe className="h-4 w-4 text-zinc-500" />}
+                    <Label htmlFor="share-mode" className="text-sm font-medium">
+                      {shareMode === "org" ? "Organization only" : "Public link"}
+                    </Label>
+                  </div>
+                  <Switch
+                    id="share-mode"
+                    checked={shareMode === "org"}
+                    onCheckedChange={(checked) => setShareMode(checked ? "org" : "public")}
+                  />
+                </div>
+                <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                  {shareMode === "org"
+                    ? "Only authenticated users can view this shared conversation."
+                    : "Anyone with the link can view this shared conversation."}
+                </p>
+              </div>
+              <Button onClick={handleShare} disabled={loading}>
+                <Share2 className="mr-2 h-4 w-4" />
+                {loading ? "Creating link..." : "Create share link"}
+              </Button>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useContext, useMemo, useState } from "react";
-import { getToolArgs, getToolResult, isToolComplete, downloadCSV, toCsvString } from "../../lib/helpers";
+import { getToolArgs, getToolResult, isToolComplete, downloadCSV, downloadExcel, toCsvString } from "../../lib/helpers";
+import { FileDown, FileSpreadsheet } from "lucide-react";
 import { DarkModeContext } from "../../hooks/use-dark-mode";
 import { detectCharts } from "../chart/chart-detection";
 import dynamic from "next/dynamic";
@@ -13,6 +14,7 @@ const ResultChart = dynamic(
 import { LoadingCard } from "./loading-card";
 import { DataTable } from "./data-table";
 import { SQLBlock } from "./sql-block";
+import { ResultCardBase, ResultCardErrorBoundary } from "./result-card-base";
 
 /** Convert structured rows (Record<string, unknown>[]) to string[][] for chart detection. */
 function toStringRows(columns: string[], rows: Record<string, unknown>[]): string[][] {
@@ -21,13 +23,21 @@ function toStringRows(columns: string[], rows: Record<string, unknown>[]): strin
 
 
 export function SQLResultCard({ part }: { part: unknown }) {
+  return (
+    <ResultCardErrorBoundary label="SQL">
+      <SQLResultCardInner part={part} />
+    </ResultCardErrorBoundary>
+  );
+}
+
+function SQLResultCardInner({ 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 [excelError, setExcelError] = useState(false);
 
   const columns = useMemo(
     () => (done && result?.success ? ((result.columns as string[]) ?? []) : []),
@@ -68,82 +78,93 @@ export function SQLResultCard({ part }: { part: unknown }) {
   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>
+    <ResultCardBase
+      badge="SQL"
+      badgeClassName="bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
+      title={String(args.explanation ?? "Query result")}
+      headerExtra={
         <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>
-          )}
+      }
+    >
+      {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.5 py-1 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 flex-wrap items-center gap-2 px-3 py-2">
+        {sql && (
+          <button
+            onClick={() => setSqlOpen(!sqlOpen)}
+            className="rounded border border-zinc-200 px-2 py-1.5 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="inline-flex items-center gap-1.5 rounded border border-zinc-200 px-2 py-1.5 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"
+            title="Download CSV"
+          >
+            <FileDown className="size-3.5" />
+            <span className="hidden sm:inline">CSV</span>
+          </button>
+        )}
+        {hasData && (
+          <button
+            onClick={() => {
+              setExcelError(false);
+              downloadExcel(columns, rows).catch((err: unknown) => {
+                console.warn("Excel download failed:", err);
+                setExcelError(true);
+              });
+            }}
+            className="inline-flex items-center gap-1.5 rounded border border-zinc-200 px-2 py-1.5 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"
+            title="Download Excel"
+          >
+            <FileSpreadsheet className="size-3.5" />
+            <span className="hidden sm:inline">Excel</span>
+          </button>
+        )}
+        {excelError && (
+          <span className="text-xs text-red-500 dark:text-red-400">Excel download failed</span>
+        )}
+      </div>
+      {sqlOpen && sql && (
+        <div className="px-3 pb-2">
+          <SQLBlock sql={sql} />
         </div>
       )}
-    </div>
+    </ResultCardBase>
   );
 }

package/templates/docker/src/ui/components/chat/suggestion-chips.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Sparkles } from "lucide-react";
+import type { QuerySuggestion } from "@/ui/lib/types";
+
+export function SuggestionChips({
+  suggestions,
+  onSelect,
+  loading = false,
+  label,
+}: {
+  suggestions: QuerySuggestion[];
+  onSelect: (text: string, id: string) => void;
+  loading?: boolean;
+  label?: string;
+}) {
+  if (!loading && suggestions.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <p className="text-xs text-muted-foreground">{label}</p>
+      )}
+      <div className="flex flex-wrap gap-2" role="group" aria-label={label ?? "Suggested queries"}>
+        {loading
+          ? Array.from({ length: 3 }, (_, i) => (
+              <Skeleton key={i} className="h-8 w-32 rounded-md" />
+            ))
+          : suggestions.map((s) => (
+              <Button
+                key={s.id}
+                variant="outline"
+                size="sm"
+                className="gap-1.5"
+                onClick={() => onSelect(s.description, s.id)}
+              >
+                <Sparkles className="h-3 w-3" />
+                {s.description}
+              </Button>
+            ))}
+      </div>
+    </div>
+  );
+}

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

@@ -7,9 +7,16 @@ import { isActionToolResult } from "../../lib/action-types";
 import { ExploreCard } from "./explore-card";
 import { SQLResultCard } from "./sql-result-card";
 import { ActionApprovalCard } from "../actions/action-approval-card";
-import { PythonResultCard } from "./python-result-card";
+import { PythonResultCard, type PythonProgressData } from "./python-result-card";
 
-export const ToolPart = memo(function ToolPart({ part }: { part: unknown }) {
+/** Extract the tool invocation ID from an AI SDK tool part. */
+function getToolInvocationId(part: unknown): string | undefined {
+  if (part == null || typeof part !== "object") return undefined;
+  const p = part as Record<string, unknown>;
+  return typeof p.toolInvocationId === "string" ? p.toolInvocationId : undefined;
+}
+
+export const ToolPart = memo(function ToolPart({ part, pythonProgress }: { part: unknown; pythonProgress?: Map<string, PythonProgressData[]> }) {
   let name: string;
   try {
     name = getToolName(part as Parameters<typeof getToolName>[0]);
@@ -27,8 +34,11 @@ export const ToolPart = memo(function ToolPart({ part }: { part: unknown }) {
       return <ExploreCard part={part} />;
     case "executeSQL":
       return <SQLResultCard part={part} />;
-    case "executePython":
-      return <PythonResultCard part={part} />;
+    case "executePython": {
+      const invocationId = getToolInvocationId(part);
+      const events = invocationId ? pythonProgress?.get(invocationId) : undefined;
+      return <PythonResultCard part={part} progressEvents={events} />;
+    }
     default: {
       const result = getToolResult(part);
       if (isActionToolResult(result)) {
@@ -45,5 +55,7 @@ export const ToolPart = memo(function ToolPart({ part }: { part: unknown }) {
   // Once a tool part is complete, its output won't change — skip re-renders.
   // This prevents the Recharts render tree from contributing to React's update depth limit.
   if (isToolComplete(prev.part) && isToolComplete(next.part)) return true;
+  // Re-render if progress events changed (for streaming Python output)
+  if (prev.pythonProgress !== next.pythonProgress) return false;
   return false;
 });