import { useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react";import { Link } from "@tanstack/react-router";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import * as Exit from "effect/Exit";import { toast } from "sonner";import type { ArtifactId, ArtifactPreview as ArtifactPreviewValue } from "@executor-js/sdk/shared"; import { trackEvent } from "../api/analytics";import { usePreloadArtifactRenderer } from "../api/artifact-renderer";import {  artifactsOptimisticAtom,  removeArtifactOptimistic,  renameArtifactOptimistic,} from "../api/atoms";import { artifactWriteKeys } from "../api/reactivity-keys";import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "../components/alert-dialog";import { Button } from "../components/button";import { ArtifactPreview } from "../components/artifact-preview";import { ErrorState } from "../components/error-state";import { PageContainer, PageHeader } from "../components/page";import { isAsyncResultLoading } from "../lib/async-result";import { useExecutorDocumentTitle } from "../lib/document-title";import { formatRelativeTime } from "../lib/relative-time";import { RenameArtifactDialog } from "./artifact-rename-dialog"; /** The wire row `artifacts.list` returns — no `code`, so the list stays cheap. *  The preview is the exception: the gallery is what draws it. */interface ArtifactSummary {  readonly id: ArtifactId;  readonly title: string;  readonly description: string | null;  readonly preview: ArtifactPreviewValue | null;  readonly updatedAt: number;} const LoadingState = () => (  <div className="flex items-center gap-2 py-8">    <div className="size-1.5 animate-pulse rounded-full bg-muted-foreground/30" />    <p className="text-sm text-muted-foreground">Loading artifacts…</p>  </div>); /** * Artifacts are never created here — a model makes them by calling `create-artifact` * over MCP — so the empty state teaches that path rather than offering a button * that cannot exist. */const EmptyState = () => (  <div    data-slot="artifact-empty"    className="rounded-lg border border-dashed border-border px-6 py-16 text-center"  >    <p className="text-sm text-muted-foreground">      No artifacts yet. Ask an agent to render a UI and it appears here, ready to reopen.    </p>  </div>); /** * One artifact, as a gallery card. * * The whole card is the link — the preview is the biggest, most obvious target, * and a title-only hit area would waste it. The row actions therefore cannot be * nested inside it (a button inside an anchor is invalid, and the click would * navigate through them), so the link is a full-bleed overlay and the actions * sit above it on the z-axis. That keeps one accessible name for the card and * one focus stop, with the actions as their own stops after it. */function ArtifactCard(props: {  readonly artifact: ArtifactSummary;  readonly onRename: (title: string) => void;  readonly onRemove: () => void;}) {  const { artifact } = props;  return (    <div      data-slot="artifact-card"      className="group/artifact-card relative isolate flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:border-input hover:border-input"    >      {/* 16:10 preview, on its own plane, separated by the same hairline the          rest of the console uses. */}      <div className="relative aspect-[16/10] overflow-hidden border-b border-border bg-muted/40">        <ArtifactPreview artifactId={artifact.id} preview={artifact.preview} />      </div>       <div className="flex min-w-0 flex-col gap-1 px-4 py-3">        <h3 className="truncate text-sm font-medium text-foreground">          <Link            to="/{-$orgSlug}/artifacts/$artifactId"            params={{ artifactId: artifact.id }}            aria-label={`Open artifact ${artifact.title}`}            className="outline-none after:absolute after:inset-0 after:content-[''] focus-visible:underline"            onClick={() => trackEvent("artifact_opened", { surface: "list" })}          >            {artifact.title}          </Link>        </h3>        {artifact.description ? (          <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">            {artifact.description}          </p>        ) : null}        <span className="mt-1 font-mono text-[11px] text-muted-foreground">          {formatRelativeTime(artifact.updatedAt)}        </span>      </div>       {/* Above the link overlay, so these stay clickable. Revealed on hover or          focus, and pinned open while their own dialog is. */}      <div className="absolute right-2 top-2 z-10 flex items-center gap-1 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/artifact-card:opacity-100 has-[[data-state=open]]:opacity-100">        <RenameArtifactDialog          currentTitle={artifact.title}          onRename={props.onRename}          trigger={            <Button              type="button"              variant="secondary"              size="xs"              className="bg-card text-muted-foreground hover:text-foreground"            >              Rename            </Button>          }        />        <AlertDialog>          <AlertDialogTrigger asChild>            <Button              type="button"              variant="secondary"              size="xs"              className="bg-card text-muted-foreground hover:text-destructive"            >              Delete            </Button>          </AlertDialogTrigger>          <AlertDialogContent size="sm">            <AlertDialogHeader>              <AlertDialogTitle>Delete {artifact.title}?</AlertDialogTitle>              <AlertDialogDescription>                This removes the artifact for good. Agents will no longer find it by name.              </AlertDialogDescription>            </AlertDialogHeader>            <AlertDialogFooter>              <AlertDialogCancel>Cancel</AlertDialogCancel>              <AlertDialogAction variant="destructive" onClick={props.onRemove}>                Delete Artifact              </AlertDialogAction>            </AlertDialogFooter>          </AlertDialogContent>        </AlertDialog>      </div>    </div>  );} export function ArtifactsPage() {  useExecutorDocumentTitle("Artifacts");  // Opening a card is the only thing this page is for, and the renderer chunk is  // the slowest part of doing so. Fetching it while the user is still choosing  // means the detail page never has to wait for it — the renderer's own  // placeholder simply stops existing for anyone arriving from here.  usePreloadArtifactRenderer();  const artifacts = useAtomValue(artifactsOptimisticAtom);  const refreshArtifacts = useAtomRefresh(artifactsOptimisticAtom);  const doRename = useAtomSet(renameArtifactOptimistic, { mode: "promiseExit" });  const doRemove = useAtomSet(removeArtifactOptimistic, { mode: "promiseExit" });   const handleRename = async (artifactId: ArtifactId, title: string) => {    const exit = await doRename({      params: { artifactId },      payload: { title },      reactivityKeys: artifactWriteKeys,    });    trackEvent("artifact_renamed", { success: Exit.isSuccess(exit) });    if (Exit.isFailure(exit)) toast.error("Couldn't rename the artifact. Try again.");  };   const handleRemove = async (artifactId: ArtifactId) => {    const exit = await doRemove({      params: { artifactId },      reactivityKeys: artifactWriteKeys,    });    trackEvent("artifact_removed", { success: Exit.isSuccess(exit) });    if (Exit.isFailure(exit)) toast.error("Couldn't delete the artifact. Try again.");  };   return (    // Wider than the settings column: three preview cards need the room, and    // this page is a gallery rather than a form.    <PageContainer className="max-w-6xl">      <PageHeader        title="Artifacts"        description="Interactive components your agents generated. Ask an agent to render a UI and it is saved here — reopen it any time, or have the agent bring it back by name."      />       {isAsyncResultLoading(artifacts) ? (        <LoadingState />      ) : (        AsyncResult.match(artifacts, {          onInitial: () => <LoadingState />,          onFailure: () => (            <ErrorState message="Failed to load artifacts" onRetry={refreshArtifacts} />          ),          onSuccess: ({ value }) => {            // Most-recently-updated first: an artifact just generated by an            // agent is the one the user is most likely coming here to open.            const rows = [...value].sort((a, b) => b.updatedAt - a.updatedAt);            return (              <section>                <h2 className="mb-3 flex items-center font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">                  Saved artifacts                  {rows.length > 0 ? (                    <span className="ml-2 font-normal tabular-nums">{rows.length}</span>                  ) : null}                </h2>                {rows.length === 0 ? (                  <EmptyState />                ) : (                  <div                    data-slot="artifact-grid"                    className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"                  >                    {rows.map((artifact) => (                      <ArtifactCard                        key={artifact.id}                        artifact={artifact}                        onRename={(title) => void handleRename(artifact.id, title)}                        onRemove={() => void handleRemove(artifact.id)}                      />                    ))}                  </div>                )}              </section>            );          },        })      )}    </PageContainer>  );} export type { ArtifactSummary };