@agent-native/core 0.92.12 → 0.93.0

package/corpus/templates/design/app/lib/figma-url.ts

@@ -0,0 +1,77 @@
+import { parseFigmaUrl } from "@shared/figma-url";
+
+const FIGMA_URL_RE = /https?:\/\/[^\s<>"']+/gi;
+
+export interface FigmaLink {
+  url: string;
+  fileKey: string;
+  nodeId: string | null;
+  kind: "file" | "frame";
+}
+
+function trimTrailingPunctuation(value: string): string {
+  return value.replace(/[),.;!?]+$/g, "");
+}
+
+/**
+ * Extract the first Figma file/frame URL from arbitrary composer text.
+ * The shared parser validates the hostname, effective branch file key, and
+ * optional node id so lookalike hosts cannot trigger the integration UI.
+ */
+export function extractFigmaLink(text: string): FigmaLink | null {
+  const candidates = text.match(FIGMA_URL_RE) ?? [];
+  for (const candidate of candidates) {
+    const raw = trimTrailingPunctuation(candidate);
+    if (raw.length > 2_048) continue;
+
+    let parsed: URL;
+    try {
+      parsed = new URL(raw);
+    } catch {
+      continue;
+    }
+
+    const parsedFigma = parseFigmaUrl(parsed.toString());
+    if (!parsedFigma.fileKey) continue;
+
+    const nodeId = parsedFigma.nodeId;
+    return {
+      url: raw,
+      fileKey: parsedFigma.fileKey,
+      nodeId,
+      kind: nodeId ? "frame" : "file",
+    };
+  }
+  return null;
+}
+
+export type FigmaLinkChatAction = "import" | "inspect" | "export-svg";
+
+export function buildFigmaLinkChatPrompt(
+  action: FigmaLinkChatAction,
+  link: FigmaLink,
+  designId?: string | null,
+): { message: string } {
+  if (action === "import") {
+    const destination = designId
+      ? "the current Design"
+      : "a Design (ask me which Design to use if needed)";
+    return {
+      message:
+        link.kind === "frame"
+          ? `Import this Figma frame into ${destination} and report any fidelity differences: ${link.url}`
+          : `Open this Figma file, list its top-level frames, and ask me which frame to import: ${link.url}`,
+    };
+  }
+
+  if (action === "inspect") {
+    return {
+      message: `Inspect this Figma ${link.kind} and summarize its structure, components, styles, and reusable tokens: ${link.url}`,
+    };
+  }
+
+  return {
+    message:
+      "Export the current Design screen as Figma-compatible SVG and explain which text, auto-layout, component, variable, and prototype behavior will not stay live in Figma.",
+  };
+}

package/corpus/templates/design/app/lib/pending-generation.ts

@@ -1,4 +1,5 @@
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client";
+import { sourceContentHash } from "@shared/source-workspace";
 
 import type { UploadedFile } from "@/components/editor/PromptDialog";
 
@@ -11,6 +12,7 @@ export interface PendingGeneration {
   files?: UploadedFile[];
   title?: string;
   source?: string;
+  templateId?: string;
   designSystemId?: string | null;
   model?: PromptComposerSubmitOptions["model"];
   engine?: PromptComposerSubmitOptions["engine"];
@@ -21,6 +23,39 @@ export interface PendingGeneration {
   createdAt?: number;
   startedAt?: number;
   runTabId?: string;
+  templateBaselineFiles?: Array<{ id: string; contentHash: string }>;
+}
+
+export function hasPendingGenerationOutput(
+  pending: PendingGeneration | null,
+  files: readonly {
+    id: string;
+    content: string;
+    createdAt?: string | null;
+    updatedAt?: string | null;
+  }[],
+): boolean {
+  if (!pending?.templateId) return files.length > 0;
+
+  if (pending.templateBaselineFiles?.length) {
+    const baseline = new Map(
+      pending.templateBaselineFiles.map((file) => [file.id, file.contentHash]),
+    );
+    return files.some(
+      (file) =>
+        !baseline.has(file.id) ||
+        baseline.get(file.id) !== sourceContentHash(file.content),
+    );
+  }
+
+  // Recovery for template refinements started before baseline hashes were
+  // recorded. Freshly copied files have matching creation/update revisions;
+  // only a later write is evidence that refinement produced output.
+  return files.some(
+    (file) =>
+      Boolean(file.createdAt && file.updatedAt) &&
+      file.createdAt !== file.updatedAt,
+  );
 }
 
 export function pendingGenerationKey(id: string): string {

package/corpus/templates/design/app/pages/DesignSystems.tsx

@@ -70,6 +70,9 @@ import {
   getCssColorToken,
 } from "@/lib/design-system-preview";
 
+import type { DesignSystemTemplateId } from "../../shared/design-system-templates";
+import { ProductionDesignSystemShowcase } from "../components/design-system/ProductionDesignSystemShowcase";
+
 interface DesignSystem {
   id: string;
   title: string;
@@ -119,6 +122,8 @@ export default function DesignSystems() {
   const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const [pendingTemplateId, setPendingTemplateId] =
+    useState<DesignSystemTemplateId | null>(null);
 
   const { data, isLoading } = useActionQuery<{
     designSystems: DesignSystem[];
@@ -127,6 +132,7 @@ export default function DesignSystems() {
   const setDefaultMutation = useActionMutation("set-default-design-system");
   const deleteMutation = useActionMutation("delete-design-system");
   const updateMutation = useActionMutation("update-design-system");
+  const createMutation = useActionMutation("create-design-system");
 
   const designSystems = data?.designSystems ?? [];
   const selectedDesignSystemId = searchParams.get("designSystemId");
@@ -240,6 +246,33 @@ export default function DesignSystems() {
     [queryClient, setDefaultMutation],
   );
 
+  const handleAddProductionTemplate = useCallback(
+    (templateId: DesignSystemTemplateId) => {
+      setPendingTemplateId(templateId);
+      createMutation.mutate({ templateId } as any, {
+        onSuccess: (result: any) => {
+          setPendingTemplateId(null);
+          toast.success(t("designSystems.showcase.addSuccess"));
+          const id =
+            result && typeof result.id === "string" ? result.id : undefined;
+          navigate(
+            id
+              ? `/design-systems?designSystemId=${encodeURIComponent(id)}`
+              : "/design-systems",
+          );
+        },
+        onError: (error) => {
+          setPendingTemplateId(null);
+          toast.error(t("designSystems.showcase.addError"), {
+            description:
+              error instanceof Error ? error.message : t("common.genericError"),
+          });
+        },
+      });
+    },
+    [createMutation, navigate, t],
+  );
+
   const handleDelete = useCallback(() => {
     if (!deleteId) return;
     const id = deleteId;
@@ -396,7 +429,15 @@ export default function DesignSystems() {
           {isLoading ? (
             <LoadingSkeleton />
           ) : designSystems.length === 0 ? (
-            <EmptyState />
+            <>
+              <EmptyState />
+              <div className="border-t border-border pt-8">
+                <ProductionDesignSystemShowcase
+                  pendingTemplateId={pendingTemplateId}
+                  onAdd={handleAddProductionTemplate}
+                />
+              </div>
+            </>
           ) : (
             <>
               {isSelectionMode ? (
@@ -453,196 +494,214 @@ export default function DesignSystems() {
                   </div>
                 </div>
               ) : null}
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                {/* New design system card */}
-                <button
-                  onClick={() => navigate("/design-systems/setup")}
-                  className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
+              <section aria-labelledby="your-design-systems-heading">
+                <h2
+                  id="your-design-systems-heading"
+                  className="mb-4 text-base font-semibold text-foreground"
                 >
-                  <div className="aspect-video flex items-center justify-center bg-muted/30">
-                    <div className="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center group-hover:bg-accent">
-                      <IconPlus className="w-6 h-6 text-muted-foreground/70 group-hover:text-muted-foreground" />
+                  {t("designSystems.yoursTitle")}
+                </h2>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  {/* New design system card */}
+                  <button
+                    onClick={() => navigate("/design-systems/setup")}
+                    className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
+                  >
+                    <div className="aspect-video flex items-center justify-center bg-muted/30">
+                      <div className="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center group-hover:bg-accent">
+                        <IconPlus className="w-6 h-6 text-muted-foreground/70 group-hover:text-muted-foreground" />
+                      </div>
                     </div>
-                  </div>
-                  <div className="p-4">
-                    <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground/70">
-                      {t("designSystems.actions.new")}
-                    </h3>
-                    <div className="text-xs text-muted-foreground/70 mt-1">
-                      {t("designSystems.newCardDescription")}
+                    <div className="p-4">
+                      <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground/70">
+                        {t("designSystems.actions.new")}
+                      </h3>
+                      <div className="text-xs text-muted-foreground/70 mt-1">
+                        {t("designSystems.newCardDescription")}
+                      </div>
                     </div>
-                  </div>
-                </button>
-
-                {/* Design system cards */}
-                {designSystems.map((ds) => {
-                  const parsed = parseData(ds.data);
-                  const colors = parsed?.colors;
-                  const primaryColor = getCssColorToken(colors?.primary);
-                  const secondaryColor = getCssColorToken(colors?.secondary);
-                  const accentColor = getCssColorToken(colors?.accent);
-                  const headingFont = formatDesignTokenValue(
-                    parsed?.typography?.headingFont,
-                  );
-                  const isSelected = selectedSystemIds.has(ds.id);
-                  return (
-                    <div
-                      key={ds.id}
-                      aria-selected={isSelected}
-                      className={`group relative rounded-xl border bg-card overflow-hidden ${
-                        isSelected
-                          ? "border-[#609FF8]/70 ring-2 ring-[#609FF8]/40"
-                          : "border-border"
-                      }`}
-                    >
-                      <button
-                        onClick={() => {
-                          if (isSelectionMode) {
-                            if (ds.canManage) toggleSystemSelection(ds.id);
-                            return;
-                          }
-                          openDesignSystemDetails(ds.id);
-                        }}
-                        aria-pressed={isSelectionMode ? isSelected : undefined}
-                        className="block w-full text-start cursor-pointer"
+                  </button>
+
+                  {/* Design system cards */}
+                  {designSystems.map((ds) => {
+                    const parsed = parseData(ds.data);
+                    const colors = parsed?.colors;
+                    const primaryColor = getCssColorToken(colors?.primary);
+                    const secondaryColor = getCssColorToken(colors?.secondary);
+                    const accentColor = getCssColorToken(colors?.accent);
+                    const headingFont = formatDesignTokenValue(
+                      parsed?.typography?.headingFont,
+                    );
+                    const isSelected = selectedSystemIds.has(ds.id);
+                    return (
+                      <div
+                        key={ds.id}
+                        aria-selected={isSelected}
+                        className={`group relative rounded-xl border bg-card overflow-hidden ${
+                          isSelected
+                            ? "border-[#609FF8]/70 ring-2 ring-[#609FF8]/40"
+                            : "border-border"
+                        }`}
                       >
-                        {/* Color preview */}
-                        <div className="aspect-video bg-muted/50 flex items-center justify-center gap-2 p-4">
-                          {primaryColor && (
-                            <div
-                              className="w-10 h-10 rounded-lg"
-                              style={{ backgroundColor: primaryColor }}
-                            />
-                          )}
-                          {secondaryColor && (
-                            <div
-                              className="w-10 h-10 rounded-lg"
-                              style={{ backgroundColor: secondaryColor }}
-                            />
-                          )}
-                          {accentColor && (
-                            <div
-                              className="w-10 h-10 rounded-lg"
-                              style={{ backgroundColor: accentColor }}
-                            />
-                          )}
-                          {!primaryColor && !secondaryColor && !accentColor && (
-                            <IconPalette className="w-8 h-8 text-muted-foreground/40" />
-                          )}
-                        </div>
-                        <div className="p-4 pb-3">
-                          <div className="flex items-center gap-2 mb-1">
-                            <h3 className="font-medium text-sm text-foreground/90 truncate flex-1">
-                              {ds.title}
-                            </h3>
-                            {ds.isDefault && (
-                              <span className="text-[10px] text-[#609FF8] font-medium">
-                                {t("designSystems.defaultBadge")}
-                              </span>
+                        <button
+                          onClick={() => {
+                            if (isSelectionMode) {
+                              if (ds.canManage) toggleSystemSelection(ds.id);
+                              return;
+                            }
+                            openDesignSystemDetails(ds.id);
+                          }}
+                          aria-pressed={
+                            isSelectionMode ? isSelected : undefined
+                          }
+                          className="block w-full text-start cursor-pointer"
+                        >
+                          {/* Color preview */}
+                          <div className="aspect-video bg-muted/50 flex items-center justify-center gap-2 p-4">
+                            {primaryColor && (
+                              <div
+                                className="w-10 h-10 rounded-lg"
+                                style={{ backgroundColor: primaryColor }}
+                              />
+                            )}
+                            {secondaryColor && (
+                              <div
+                                className="w-10 h-10 rounded-lg"
+                                style={{ backgroundColor: secondaryColor }}
+                              />
                             )}
+                            {accentColor && (
+                              <div
+                                className="w-10 h-10 rounded-lg"
+                                style={{ backgroundColor: accentColor }}
+                              />
+                            )}
+                            {!primaryColor &&
+                              !secondaryColor &&
+                              !accentColor && (
+                                <IconPalette className="w-8 h-8 text-muted-foreground/40" />
+                              )}
                           </div>
-                          {headingFont && (
-                            <div className="text-xs text-muted-foreground/70">
-                              {headingFont}
+                          <div className="p-4 pb-3">
+                            <div className="flex items-center gap-2 mb-1">
+                              <h3 className="font-medium text-sm text-foreground/90 truncate flex-1">
+                                {ds.title}
+                              </h3>
+                              {ds.isDefault && (
+                                <span className="text-[10px] text-[#609FF8] font-medium">
+                                  {t("designSystems.defaultBadge")}
+                                </span>
+                              )}
                             </div>
-                          )}
-                        </div>
-                      </button>
-                      <div className="flex flex-wrap items-center justify-between gap-2 px-4 pb-4">
-                        <VisibilityBadge
-                          visibility={ds.visibility}
-                          className="!text-[11px]"
-                        />
-                        <ShareButton
-                          resourceType="design-system"
-                          resourceId={ds.id}
-                          resourceTitle={ds.title}
-                        />
-                      </div>
-                      {isSelectionMode && ds.canManage ? (
-                        <div className="absolute top-2 start-2 z-10">
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Checkbox
-                                checked={isSelected}
-                                onCheckedChange={() =>
-                                  toggleSystemSelection(ds.id)
-                                }
-                                onClick={(event) => event.stopPropagation()}
-                                aria-label={t("designSystems.selectAria", {
-                                  title: ds.title,
-                                })}
-                                className="h-5 w-5 border-white/60 bg-black/60 text-white data-[state=checked]:border-[#609FF8] data-[state=checked]:bg-[#609FF8]"
-                              />
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              {t("designSystems.selectAria", {
-                                title: ds.title,
-                              })}
-                            </TooltipContent>
-                          </Tooltip>
+                            {headingFont && (
+                              <div className="text-xs text-muted-foreground/70">
+                                {headingFont}
+                              </div>
+                            )}
+                          </div>
+                        </button>
+                        <div className="flex flex-wrap items-center justify-between gap-2 px-4 pb-4">
+                          <VisibilityBadge
+                            visibility={ds.visibility}
+                            className="!text-[11px]"
+                          />
+                          <ShareButton
+                            resourceType="design-system"
+                            resourceId={ds.id}
+                            resourceTitle={ds.title}
+                          />
                         </div>
-                      ) : (
-                        <>
-                          {/* Star button */}
-                          {ds.accessRole === "owner" && (
+                        {isSelectionMode && ds.canManage ? (
+                          <div className="absolute top-2 start-2 z-10">
                             <Tooltip>
                               <TooltipTrigger asChild>
-                                <button
-                                  onClick={() => handleSetDefault(ds.id)}
-                                  className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 w-7 h-7 flex items-center justify-center rounded-md bg-black/60 hover:bg-black/80 cursor-pointer"
-                                >
-                                  {ds.isDefault ? (
-                                    <IconStarFilled className="w-3.5 h-3.5 text-yellow-400" />
-                                  ) : (
-                                    <IconStar className="w-3.5 h-3.5 text-muted-foreground" />
-                                  )}
-                                </button>
+                                <Checkbox
+                                  checked={isSelected}
+                                  onCheckedChange={() =>
+                                    toggleSystemSelection(ds.id)
+                                  }
+                                  onClick={(event) => event.stopPropagation()}
+                                  aria-label={t("designSystems.selectAria", {
+                                    title: ds.title,
+                                  })}
+                                  className="h-5 w-5 border-white/60 bg-black/60 text-white data-[state=checked]:border-[#609FF8] data-[state=checked]:bg-[#609FF8]"
+                                />
                               </TooltipTrigger>
                               <TooltipContent>
-                                {ds.isDefault
-                                  ? t("designSystems.currentlyDefault")
-                                  : t("designSystems.actions.setDefault")}
+                                {t("designSystems.selectAria", {
+                                  title: ds.title,
+                                })}
                               </TooltipContent>
                             </Tooltip>
-                          )}
-                          {ds.canManage && (
-                            <div
-                              className={`absolute top-2 z-10 opacity-0 group-hover:opacity-100 ${
-                                ds.accessRole === "owner" ? "end-10" : "end-2"
-                              }`}
-                            >
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-7 w-7 bg-black/60 hover:bg-black/80 cursor-pointer"
-                                    aria-label={t(
-                                      "designSystems.moreActionsAria",
-                                      { title: ds.title },
-                                    )}
-                                  >
-                                    <IconDots className="w-3.5 h-3.5 text-foreground/70" />
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                  <DropdownMenuItem
-                                    onClick={() => setDeleteId(ds.id)}
-                                    className="text-red-400 focus:text-red-400 cursor-pointer"
+                          </div>
+                        ) : (
+                          <>
+                            {/* Star button */}
+                            {ds.accessRole === "owner" && (
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={() => handleSetDefault(ds.id)}
+                                    className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 w-7 h-7 flex items-center justify-center rounded-md bg-black/60 hover:bg-black/80 cursor-pointer"
                                   >
-                                    <IconTrash className="w-3.5 h-3.5 me-2" />
-                                    {t("designSystems.actions.delete")}
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  );
-                })}
+                                    {ds.isDefault ? (
+                                      <IconStarFilled className="w-3.5 h-3.5 text-yellow-400" />
+                                    ) : (
+                                      <IconStar className="w-3.5 h-3.5 text-muted-foreground" />
+                                    )}
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  {ds.isDefault
+                                    ? t("designSystems.currentlyDefault")
+                                    : t("designSystems.actions.setDefault")}
+                                </TooltipContent>
+                              </Tooltip>
+                            )}
+                            {ds.canManage && (
+                              <div
+                                className={`absolute top-2 z-10 opacity-0 group-hover:opacity-100 ${
+                                  ds.accessRole === "owner" ? "end-10" : "end-2"
+                                }`}
+                              >
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-7 w-7 bg-black/60 hover:bg-black/80 cursor-pointer"
+                                      aria-label={t(
+                                        "designSystems.moreActionsAria",
+                                        { title: ds.title },
+                                      )}
+                                    >
+                                      <IconDots className="w-3.5 h-3.5 text-foreground/70" />
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                      onClick={() => setDeleteId(ds.id)}
+                                      className="text-red-400 focus:text-red-400 cursor-pointer"
+                                    >
+                                      <IconTrash className="w-3.5 h-3.5 me-2" />
+                                      {t("designSystems.actions.delete")}
+                                    </DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </section>
+              <div className="mt-12 border-t border-border pt-8">
+                <ProductionDesignSystemShowcase
+                  pendingTemplateId={pendingTemplateId}
+                  onAdd={handleAddProductionTemplate}
+                />
               </div>
             </>
           )}
@@ -1158,7 +1217,7 @@ function LoadingSkeleton() {
 function EmptyState() {
   const t = useT();
   return (
-    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+    <div className="flex flex-col items-center justify-center py-10 sm:py-14 text-center">
       <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#609FF8]/20 to-[#4080E0]/20 border border-[#609FF8]/20 flex items-center justify-center mb-6">
         <IconPalette className="w-7 h-7 text-[#609FF8]" />
       </div>