@agent-native/core 0.80.7 → 0.80.9

package/src/templates/default/app/global.css

@@ -8,63 +8,63 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 

package/corpus/templates/design/app/components/design/VariantGrid.tsx

@@ -1,189 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconCheck } from "@tabler/icons-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-interface Variant {
-  id: string;
-  label: string;
-  content: string;
-}
-
-interface VariantGridProps {
-  variants: Variant[];
-  selectedId?: string;
-  onSelect: (id: string) => void;
-  onUse: (id: string) => void;
-  compact?: boolean;
-}
-
-export function VariantGrid({
-  variants,
-  selectedId,
-  onSelect,
-  onUse,
-  compact = false,
-}: VariantGridProps) {
-  const t = useT();
-  const [hoveredId, setHoveredId] = useState<string | null>(null);
-  const [internalSelectedId, setInternalSelectedId] = useState<
-    string | undefined
-  >(selectedId);
-  const activeSelectedId = selectedId ?? internalSelectedId;
-  const previewScale = compact ? 0.36 : 0.5;
-  const previewSize = `${100 / previewScale}%`;
-
-  // The same grid renders both in the full editor and in compact MCP App
-  // embeds, so it needs to wrap instead of squeezing previews into slivers.
-  const gridClass = compact
-    ? variants.length <= 1
-      ? "grid-cols-1"
-      : variants.length === 2
-        ? "grid-cols-1 min-[520px]:grid-cols-2"
-        : variants.length === 3
-          ? "grid-cols-1 min-[520px]:grid-cols-2 min-[820px]:grid-cols-3"
-          : "grid-cols-1 min-[520px]:grid-cols-2 min-[880px]:grid-cols-3"
-    : variants.length <= 1
-      ? "grid-cols-1"
-      : variants.length === 2
-        ? "grid-cols-1 sm:grid-cols-2"
-        : variants.length === 3
-          ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
-          : "grid-cols-1 sm:grid-cols-2";
-
-  return (
-    <div
-      className={cn(
-        "flex h-full w-full flex-col overflow-y-auto bg-background",
-        compact ? "p-3" : "p-3 sm:p-4 lg:p-6",
-      )}
-    >
-      <div
-        className={cn(
-          "grid min-h-0 flex-1 gap-3 sm:gap-4",
-          compact
-            ? "auto-rows-[minmax(190px,1fr)]"
-            : "auto-rows-[minmax(260px,1fr)]",
-          gridClass,
-        )}
-      >
-        {variants.map((variant) => {
-          const isSelected = activeSelectedId === variant.id;
-          const isHovered = hoveredId === variant.id;
-          const showAction = isSelected || isHovered;
-          const selectVariant = () => {
-            setInternalSelectedId(variant.id);
-            onSelect(variant.id);
-          };
-
-          return (
-            <div
-              key={variant.id}
-              className="flex flex-col gap-2"
-              onMouseEnter={() => setHoveredId(variant.id)}
-              onMouseLeave={() => setHoveredId(null)}
-            >
-              {/* Preview frame */}
-              <div
-                onClick={selectVariant}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter" && event.key !== " ") return;
-                  event.preventDefault();
-                  selectVariant();
-                }}
-                role="button"
-                tabIndex={0}
-                aria-label={t("home.designPreview")}
-                className={cn(
-                  "relative flex-1 cursor-pointer overflow-hidden rounded-lg border-2 bg-muted/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                  isSelected
-                    ? "border-primary"
-                    : "border-transparent hover:border-muted-foreground/30",
-                )}
-              >
-                {/* Scaled iframe preview */}
-                <iframe
-                  srcDoc={wrapContent(variant.content)}
-                  className="pointer-events-none h-full w-full origin-top-left"
-                  style={{
-                    width: previewSize,
-                    height: previewSize,
-                    transform: `scale(${previewScale})`,
-                  }}
-                  sandbox="allow-scripts"
-                  title={variant.label}
-                />
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <div className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
-                    <IconCheck className="h-3 w-3 text-primary-foreground" />
-                  </div>
-                )}
-
-                {/* Commit action appears after hover or selection, including touch. */}
-                {showAction && (
-                  <div className="absolute inset-0 flex items-center justify-center bg-black/40">
-                    <Button
-                      size="sm"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onUse(variant.id);
-                      }}
-                      aria-label={t("designEditor.useThisDirection")}
-                    >
-                      {t("designEditor.useThisDirection")}
-                    </Button>
-                  </div>
-                )}
-              </div>
-
-              {/* Label */}
-              <span
-                className={cn(
-                  "text-center text-xs",
-                  isSelected
-                    ? "font-medium text-foreground"
-                    : "text-muted-foreground",
-                )}
-              >
-                {variant.label}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/** Prepare generated HTML for the iframe preview without changing full docs. */
-function wrapContent(content: string): string {
-  const previewStyle = `<style data-agent-native-preview>
-    *, *::before, *::after { box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; }
-    body { margin: 0; background: #fff; }
-  </style>`;
-  const trimmed = content.trim();
-
-  if (/<!doctype\s+html|<html[\s>]/i.test(trimmed)) {
-    if (/<\/head>/i.test(trimmed)) {
-      return trimmed.replace(/<\/head>/i, `${previewStyle}</head>`);
-    }
-    return trimmed.replace(
-      /<html([^>]*)>/i, // i18n-ignore HTML parser regex, not UI copy
-      `<html$1><head>${previewStyle}</head>`,
-    );
-  }
-
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  ${previewStyle}
-</head>
-<body>${trimmed}</body>
-</html>`;
-}

package/corpus/templates/design/app/components/design/VariantHandoffCard.tsx

@@ -1,115 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import type { StandalonePick } from "@/hooks/use-variant-flow";
-
-interface VariantHandoffCardProps {
-  pick: StandalonePick;
-  onDismiss: () => void;
-}
-
-/**
- * Shown after a pick (or dismiss) when the editor was opened from a link-only
- * host (CLI / Codex / Claude Code) that can't relay the choice over a chat
- * bridge. The card owns the clipboard write so its "Copied" state stays
- * truthful even when the browser blocks programmatic copy.
- */
-export function VariantHandoffCard({
-  pick,
-  onDismiss,
-}: VariantHandoffCardProps) {
-  const t = useT();
-  const [copied, setCopied] = useState(false);
-
-  const writeClipboard = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(pick.text);
-      return true;
-    } catch {
-      return false;
-    }
-  }, [pick.text]);
-
-  // Auto-copy on mount, but reflect what actually happened: if the browser
-  // blocks the write, leave the button on "Copy summary" so the user knows to
-  // copy (or select) it themselves.
-  useEffect(() => {
-    let active = true;
-    void writeClipboard().then((ok) => {
-      if (active) setCopied(ok);
-    });
-    return () => {
-      active = false;
-    };
-  }, [writeClipboard]);
-
-  const onCopyClick = async () => {
-    const ok = await writeClipboard();
-    setCopied(ok);
-    toast[ok ? "success" : "info"](
-      ok
-        ? t("designEditor.summaryCopied")
-        : t("designEditor.selectSummaryToCopy"),
-    );
-  };
-
-  return (
-    <div className="absolute inset-0 z-40 grid place-items-center bg-background/80 p-4 backdrop-blur-sm">
-      <div className="w-full max-w-md rounded-xl border border-border bg-card p-5 shadow-lg">
-        <div className="flex items-center gap-2.5">
-          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary">
-            <IconCheck className="h-3.5 w-3.5 text-primary-foreground" />
-          </span>
-          <div className="min-w-0">
-            <div className="text-sm font-medium leading-tight">
-              {pick.heading}
-            </div>
-            {pick.label && (
-              <div className="truncate text-xs text-muted-foreground">
-                “{pick.label}”
-              </div>
-            )}
-          </div>
-        </div>
-
-        <p className="mt-3 text-sm text-muted-foreground">
-          {t("designEditor.variantHandoffHelp")}
-        </p>
-
-        <Textarea
-          readOnly
-          value={pick.text}
-          className="mt-3 h-28 resize-none border-border/70 bg-muted/40 font-mono text-[11px] leading-relaxed"
-          onFocus={(event) => event.currentTarget.select()}
-        />
-
-        <div className="mt-3 flex justify-end gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="cursor-pointer"
-            onClick={onDismiss}
-          >
-            {t("designEditor.dismiss")}
-          </Button>
-          <Button
-            size="sm"
-            className="cursor-pointer gap-1.5"
-            onClick={onCopyClick}
-          >
-            {copied ? (
-              <IconCheck className="h-3.5 w-3.5" />
-            ) : (
-              <IconCopy className="h-3.5 w-3.5" />
-            )}
-            {copied ? t("designEditor.copied") : t("designEditor.copySummary")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/corpus/templates/design/app/hooks/use-variant-flow.ts

@@ -1,258 +0,0 @@
-import {
-  sendToAgentChat,
-  agentNativePath,
-  callAction,
-  isEmbedAuthActive,
-} from "@agent-native/core/client";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useCallback, useState } from "react";
-
-export const DESIGN_VARIANT_PICKED_EVENT = "agent-native-design-variant-picked";
-
-export interface VariantCandidate {
-  id: string;
-  label: string;
-  content: string;
-}
-
-interface VariantState {
-  designId: string;
-  variants: VariantCandidate[];
-  /** Optional caption above the grid, e.g. "Pick a direction". */
-  prompt?: string;
-}
-
-/** A pick/dismiss surfaced as a copyable handoff for link-only hosts. */
-export interface StandalonePick {
-  /** Card heading, e.g. "Direction selected" or "Closed without picking". */
-  heading: string;
-  /** Chosen variant name, when a direction was picked. */
-  label?: string;
-  /** Paste-back text the user copies into their coding agent's chat. */
-  text: string;
-}
-
-/**
- * True when this editor was opened from a link-only host (CLI / Codex / Claude
- * Code) that can't render the inline MCP app — the deep link carries
- * `handoff=chat`. There's no host chat bridge to receive the pick, so after the
- * user chooses we show a copyable summary to paste back into their agent.
- */
-function isLinkOnlyHandoff(): boolean {
-  if (typeof window === "undefined") return false;
-  try {
-    return (
-      new URLSearchParams(window.location.search).get("handoff") === "chat"
-    );
-  } catch {
-    return false;
-  }
-}
-
-function variantHandoffText(
-  designId: string,
-  variant: VariantCandidate,
-  persisted: boolean,
-): string {
-  const context = {
-    selectedDesign: {
-      designId,
-      variantId: variant.id,
-      label: variant.label,
-      file: "index.html",
-    },
-  };
-  return [
-    "Paste this back into your chat so your agent continues from the chosen design.",
-    "",
-    `I picked the "${variant.label}" design direction.`,
-    persisted
-      ? `It's saved as index.html in design ${designId}. Refine from here with get-design-snapshot + generate-design, or export-coding-handoff to bring it into code. Don't show new variants unless I ask.`
-      : `Saving didn't finish — re-run present-design-variants or generate-design for design ${designId} before refining.`,
-    "",
-    "Design selection context:",
-    JSON.stringify(context, null, 2),
-  ].join("\n");
-}
-
-function variantDismissText(): string {
-  return [
-    "Paste this back into your chat to keep going.",
-    "",
-    "I closed the design directions without picking one. Show me a different direction.",
-  ].join("\n");
-}
-
-/**
- * Polls `application-state/design-variants`. When the agent generates 2-5
- * candidate variations, it writes them here; the editor surfaces a
- * full-canvas grid (Claude Design-style: pick a direction before refining).
- *
- * On "Use this one", the chosen variant's HTML is persisted to the design as
- * `index.html` via `generate-design`, and the pick is reported back through the
- * right channel for the host: an embedded MCP host gets a chat message over the
- * bridge; the first-party app posts to its own sidebar; a link-only host (CLI)
- * gets a copyable summary to paste back. The variant state is then cleared.
- */
-export function useVariantFlow(designId: string | undefined) {
-  const qc = useQueryClient();
-  const [state, setState] = useState<VariantState | null>(null);
-  const [standalonePick, setStandalonePick] = useState<StandalonePick | null>(
-    null,
-  );
-
-  const { data } = useQuery({
-    queryKey: ["design-variants"],
-    queryFn: async () => {
-      const res = await fetch(
-        agentNativePath("/_agent-native/application-state/design-variants"),
-      );
-      if (!res.ok) return null;
-      const text = await res.text();
-      if (!text) return null;
-      try {
-        return JSON.parse(text) as VariantState;
-      } catch {
-        return null;
-      }
-    },
-    refetchInterval: 2_000,
-    structuralSharing: false,
-  });
-
-  useEffect(() => {
-    if (
-      data?.variants &&
-      data.variants.length > 0 &&
-      data.designId === designId
-    ) {
-      setState(data);
-    } else {
-      setState(null);
-    }
-  }, [data, designId]);
-
-  const clear = useCallback(() => {
-    setState(null);
-    qc.setQueryData(["design-variants"], null);
-    fetch(agentNativePath("/_agent-native/application-state/design-variants"), {
-      method: "DELETE",
-    }).catch(() => {});
-  }, [qc]);
-
-  const dismissStandalonePick = useCallback(() => setStandalonePick(null), []);
-
-  const useVariant = useCallback(
-    async (variantId: string) => {
-      if (!state || !designId) return;
-      const chosen = state.variants.find((v) => v.id === variantId);
-      if (!chosen) return;
-
-      // Persist the chosen variant as the design's primary file via the
-      // agent's own action endpoint so every host lands on the same design.
-      let persisted = false;
-      try {
-        await callAction(
-          "generate-design" as any,
-          {
-            designId,
-            prompt: `User picked variant "${chosen.label}"`,
-            files: [
-              {
-                filename: "index.html",
-                content: chosen.content,
-                fileType: "html",
-              },
-            ],
-          } as any,
-        );
-        await Promise.all([
-          qc.invalidateQueries({
-            queryKey: ["action", "get-design", { id: designId }],
-          }),
-          qc.invalidateQueries({ queryKey: ["action", "get-design"] }),
-          qc.invalidateQueries({ queryKey: ["action", "list-designs"] }),
-        ]);
-        persisted = true;
-        if (typeof window !== "undefined") {
-          window.dispatchEvent(
-            new CustomEvent(DESIGN_VARIANT_PICKED_EVENT, {
-              detail: { designId, content: chosen.content },
-            }),
-          );
-        }
-      } catch {
-        // Network error: report the choice below so the agent still records it;
-        // the grid still clears so the user isn't stuck.
-      }
-
-      const refineHint = persisted
-        ? `Its content has been saved as index.html. Continue refining from there if the user asks.`
-        : `Saving the chosen variant did not complete. Ask the user whether to retry before refining it.`;
-      const guardHint = persisted
-        ? `Do not show further variants unless the user explicitly asks for "more options" or "alternatives".`
-        : `Do not claim the design file was updated until generate-design succeeds.`;
-
-      if (isEmbedAuthActive()) {
-        // Embedded MCP host (ChatGPT / Claude): the pick rides the host chat
-        // bridge straight into the conversation.
-        sendToAgentChat({
-          message: `I picked "${chosen.label}".`,
-          context: [
-            `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId} inside the embedded Design app.`,
-            refineHint,
-            guardHint,
-          ].join("\n"),
-          submit: true,
-          openSidebar: false,
-        });
-      } else if (isLinkOnlyHandoff()) {
-        // Link-only host (CLI / Codex / Claude Code): no chat bridge — show a
-        // copyable summary the user pastes back into their coding agent. The
-        // card owns the clipboard write so its "Copied" state stays truthful.
-        setStandalonePick({
-          heading: "Direction selected",
-          label: chosen.label,
-          text: variantHandoffText(designId, chosen, persisted),
-        });
-      } else {
-        // First-party app: post the pick to its own agent sidebar composer.
-        sendToAgentChat({
-          message: `I picked "${chosen.label}".`,
-          context: [
-            `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId}.`,
-            refineHint,
-            guardHint,
-          ].join("\n"),
-          submit: false,
-        });
-      }
-
-      clear();
-    },
-    [state, designId, qc, clear],
-  );
-
-  const dismiss = useCallback(() => {
-    const embedded = isEmbedAuthActive();
-    clear();
-    if (isLinkOnlyHandoff() && !isEmbedAuthActive()) {
-      // No chat bridge to relay the dismissal — give the user a copyable note
-      // so their coding agent doesn't wait on a pick that isn't coming.
-      setStandalonePick({
-        heading: "Closed without picking",
-        text: variantDismissText(),
-      });
-      return;
-    }
-    sendToAgentChat({
-      message: "Close the variants — none of these.",
-      context:
-        "User dismissed the variant grid without picking. Ask what direction they want instead.",
-      submit: embedded,
-      ...(embedded ? { openSidebar: false } : {}),
-    });
-  }, [clear]);
-
-  return { state, useVariant, dismiss, standalonePick, dismissStandalonePick };
-}