@agent-native/core 0.152.1 → 0.153.0

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

@@ -21,8 +21,8 @@ import {
   IconPhoto,
   IconComponents,
   IconCheck,
-  IconExternalLink,
   IconChevronDown,
+  IconExternalLink,
 } from "@tabler/icons-react";
 import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router";
@@ -69,6 +69,20 @@ interface BuilderIndexResult {
   instructions?: string;
 }
 
+interface BuilderIndexInput {
+  projectName?: string;
+  description?: string;
+  githubRepoUrl?: string;
+  connectedProjectId?: string;
+  codeFiles?: Array<{
+    filename: string;
+    content: string;
+    mimeType?: string;
+    encoding?: "utf8" | "base64";
+  }>;
+  designMd?: string;
+}
+
 export default function DesignSystemSetup() {
   const t = useT();
   const navigate = useNavigate();
@@ -88,7 +102,7 @@ export default function DesignSystemSetup() {
   const [notes, setNotes] = useState("");
   const [customInstructions, setCustomInstructions] = useState("");
   const [validationError, setValidationError] = useState<string | null>(null);
-  const [sourcePanel, setSourcePanel] = useState<"figma" | "other">("figma");
+  const [sourcePanel, setSourcePanel] = useState<"figma" | "other">("other");
   const [otherSource, setOtherSource] = useState<OtherSource | null>(null);
 
   const docInputRef = useRef<HTMLInputElement>(null);
@@ -105,6 +119,10 @@ export default function DesignSystemSetup() {
     designSystems: Array<{ id: string; title: string }>;
   }>("list-design-systems");
   const updateSystemMutation = useActionMutation("update-design-system");
+  const indexSystemMutation = useActionMutation<
+    BuilderIndexResult,
+    BuilderIndexInput
+  >("index-design-system-with-builder");
 
   const existingProjects = designsData?.designs ?? [];
   const existingSystems = designSystemsData?.designSystems ?? [];
@@ -223,11 +241,13 @@ export default function DesignSystemSetup() {
       existingProjects.some((project) => project.id === sourceId);
     if (!sourceExists) return;
     setSelectedProjectId(sourceId);
+    setSourcePanel("other");
+    setOtherSource("existing");
     appliedSourceIdRef.current = sourceId;
   }, [sourceId, existingProjects, existingSystems]);
 
   const hasAnySources = useMemo(() => {
-    return (
+    return Boolean(
       companyInfo.trim() ||
       websiteUrl.trim() ||
       websiteUrls.length > 0 ||
@@ -240,7 +260,7 @@ export default function DesignSystemSetup() {
       assets.length > 0 ||
       selectedProjectId ||
       notes.trim() ||
-      customInstructions.trim()
+      customInstructions.trim(),
     );
   }, [
     companyInfo,
@@ -260,7 +280,7 @@ export default function DesignSystemSetup() {
 
   const selectOtherSource = useCallback((source: OtherSource) => {
     setSourcePanel("other");
-    setOtherSource((current) => (current === source ? null : source));
+    setOtherSource(source);
   }, []);
 
   const addWebsiteUrl = useCallback(() => {
@@ -424,6 +444,43 @@ export default function DesignSystemSetup() {
     const normalizedGithubLinks = pendingGithubUrl
       ? [...githubLinks, { id: "pending", url: pendingGithubUrl }]
       : githubLinks;
+
+    const isSingleGithubSource =
+      normalizedGithubLinks.length === 1 &&
+      normalizedWebsiteUrls.length === 0 &&
+      codeFiles.length === 0 &&
+      !builderIndexResult &&
+      docFiles.length === 0 &&
+      imageFiles.length === 0 &&
+      assets.length === 0 &&
+      !selectedProjectId;
+
+    if (isSingleGithubSource) {
+      const githubRepoUrl = normalizedGithubLinks[0]?.url;
+      if (!githubRepoUrl) return;
+
+      setValidationError(null);
+      try {
+        await indexSystemMutation.mutateAsync({
+          projectName: companyInfo.trim() || undefined,
+          description:
+            [notes.trim(), customInstructions.trim()]
+              .filter(Boolean)
+              .join("\n\n") || undefined,
+          githubRepoUrl,
+        });
+        toast.success(t("designSystemSetup.githubIndexStarted"));
+        navigate("/design-systems");
+      } catch (error) {
+        setValidationError(
+          error instanceof Error
+            ? error.message
+            : t("designSystemSetup.errors.githubIndex"),
+        );
+      }
+      return;
+    }
+
     const readableCodeFiles = codeFiles.filter((f) => f.textContent);
     const designMdFiles = readableCodeFiles.filter(isDesignMdFile);
     const builderCodeFiles = readableCodeFiles.filter(
@@ -586,8 +643,11 @@ export default function DesignSystemSetup() {
     navigate,
     t,
     updateSystemMutation,
+    indexSystemMutation,
   ]);
 
+  const isSubmitting = builderIndexing || indexSystemMutation.isPending;
+
   useSetPageTitle(
     <div className="flex items-center gap-2 min-w-0">
       <Link
@@ -607,10 +667,18 @@ export default function DesignSystemSetup() {
     <Button
       size="sm"
       onClick={handleContinue}
-      aria-disabled={!hasAnySources}
-      className="cursor-pointer aria-disabled:opacity-50"
+      disabled={!hasAnySources || isSubmitting}
+      aria-busy={isSubmitting}
+      className="cursor-pointer"
     >
-      {t("designSystemSetup.continue")}
+      {isSubmitting ? (
+        <>
+          <Spinner className="size-3.5" />
+          {t("designSystemSetup.starting")}
+        </>
+      ) : (
+        t("designSystemSetup.continue")
+      )}
     </Button>,
   );
 
@@ -637,15 +705,61 @@ export default function DesignSystemSetup() {
           )}
 
           <div className="space-y-5">
+            <section className="rounded-lg border border-border bg-card p-4">
+              <div className="mb-3">
+                <h2 className="text-sm font-medium text-foreground/90">
+                  {t("designSystemSetup.chooseSourcePrompt")}
+                </h2>
+              </div>
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                <SourceChoice
+                  icon={IconBrandFigma}
+                  title={t("designSystemSetup.sections.figma.title")}
+                  selected={sourcePanel === "figma"}
+                  onClick={() => {
+                    setSourcePanel("figma");
+                    setOtherSource(null);
+                  }}
+                />
+                <SourceChoice
+                  icon={IconWorld}
+                  title={t("designSystemSetup.sections.company.title")}
+                  selected={sourcePanel === "other" && otherSource === "brand"}
+                  onClick={() => selectOtherSource("brand")}
+                />
+                <SourceChoice
+                  icon={IconBrandGithub}
+                  title={t("designSystemSetup.sections.code.title")}
+                  selected={sourcePanel === "other" && otherSource === "code"}
+                  onClick={() => selectOtherSource("code")}
+                />
+                <SourceChoice
+                  icon={IconFileDescription}
+                  title={t("designSystemSetup.sections.designFiles.title")}
+                  selected={sourcePanel === "other" && otherSource === "files"}
+                  onClick={() => selectOtherSource("files")}
+                />
+                {(existingProjects.length > 0 ||
+                  existingSystems.length > 0) && (
+                  <SourceChoice
+                    icon={IconComponents}
+                    title={t("designSystemSetup.sections.importExisting.title")}
+                    selected={
+                      sourcePanel === "other" && otherSource === "existing"
+                    }
+                    onClick={() => selectOtherSource("existing")}
+                  />
+                )}
+                <SourceChoice
+                  icon={IconFileDescription}
+                  title={t("designSystemSetup.sections.notes.title")}
+                  selected={sourcePanel === "other" && otherSource === "notes"}
+                  onClick={() => selectOtherSource("notes")}
+                />
+              </div>
+            </section>
+
             {/* Start from a Figma file via Builder DSI. */}
-            <SourceAccordionRow
-              icon={IconBrandFigma}
-              title={t("designSystemSetup.sections.figma.title")}
-              description={t("designSystemSetup.sections.figma.description")}
-              expanded={sourcePanel === "figma"}
-              onClick={() => setSourcePanel("figma")}
-              panelId="design-system-figma-source"
-            />
             <Section
               title={t("designSystemSetup.sections.figma.title")}
               description={t("designSystemSetup.sections.figma.description")}
@@ -717,89 +831,6 @@ export default function DesignSystemSetup() {
               )}
             </Section>
 
-            <SourceAccordionRow
-              icon={IconComponents}
-              title={t("designSystemSetup.otherSources")}
-              description={t("designSystemSetup.otherSourcesDescription")}
-              expanded={sourcePanel === "other"}
-              onClick={() => setSourcePanel("other")}
-              panelId="design-system-other-sources"
-            />
-            {sourcePanel === "other" && (
-              <div
-                id="design-system-other-sources"
-                className="overflow-hidden rounded-lg border border-border"
-              >
-                <div className="border-b border-border px-4 py-3">
-                  <p className="text-xs font-medium text-foreground/70">
-                    {t("designSystemSetup.chooseSourcePrompt")}
-                  </p>
-                </div>
-                <div className="divide-y divide-border">
-                  <SourceAccordionRow
-                    className="rounded-none border-0"
-                    icon={IconComponents}
-                    title={t("designSystemSetup.sections.company.title")}
-                    description={t(
-                      "designSystemSetup.sections.company.description",
-                    )}
-                    expanded={otherSource === "brand"}
-                    onClick={() => selectOtherSource("brand")}
-                    panelId="design-system-brand-source"
-                  />
-                  <SourceAccordionRow
-                    className="rounded-none border-0"
-                    icon={IconBrandGithub}
-                    title={t("designSystemSetup.sections.code.title")}
-                    description={t(
-                      "designSystemSetup.sections.code.description",
-                    )}
-                    expanded={otherSource === "code"}
-                    onClick={() => selectOtherSource("code")}
-                    panelId="design-system-code-source"
-                  />
-                  <SourceAccordionRow
-                    className="rounded-none border-0"
-                    icon={IconFileDescription}
-                    title={t("designSystemSetup.sections.designFiles.title")}
-                    description={t(
-                      "designSystemSetup.sections.designFiles.description",
-                    )}
-                    expanded={otherSource === "files"}
-                    onClick={() => selectOtherSource("files")}
-                    panelId="design-system-file-source"
-                  />
-                  {(existingProjects.length > 0 ||
-                    existingSystems.length > 0) && (
-                    <SourceAccordionRow
-                      className="rounded-none border-0"
-                      icon={IconComponents}
-                      title={t(
-                        "designSystemSetup.sections.importExisting.title",
-                      )}
-                      description={t(
-                        "designSystemSetup.sections.importExisting.description",
-                      )}
-                      expanded={otherSource === "existing"}
-                      onClick={() => selectOtherSource("existing")}
-                      panelId="design-system-existing-source"
-                    />
-                  )}
-                  <SourceAccordionRow
-                    className="rounded-none border-0"
-                    icon={IconFileDescription}
-                    title={t("designSystemSetup.sections.notes.title")}
-                    description={t(
-                      "designSystemSetup.sections.notes.description",
-                    )}
-                    expanded={otherSource === "notes"}
-                    onClick={() => selectOtherSource("notes")}
-                    panelId="design-system-notes-source"
-                  />
-                </div>
-              </div>
-            )}
-
             {/* Company / Brand */}
             <Section
               title={t("designSystemSetup.sections.company.title")}
@@ -1217,11 +1248,19 @@ export default function DesignSystemSetup() {
             <div className="pt-4">
               <Button
                 onClick={handleContinue}
-                aria-disabled={!hasAnySources}
-                className="w-full cursor-pointer aria-disabled:opacity-50"
+                disabled={!hasAnySources || isSubmitting}
+                aria-busy={isSubmitting}
+                className="w-full cursor-pointer"
                 size="lg"
               >
-                {t("designSystemSetup.continue")}
+                {isSubmitting ? (
+                  <>
+                    <Spinner className="size-4" />
+                    {t("designSystemSetup.starting")}
+                  </>
+                ) : (
+                  t("designSystemSetup.continue")
+                )}
               </Button>
             </div>
           </div>
@@ -1264,50 +1303,33 @@ function Section({
   );
 }
 
-function SourceAccordionRow({
+function SourceChoice({
   icon: Icon,
   title,
-  description,
-  expanded,
+  selected,
   onClick,
-  panelId,
-  className,
 }: {
   icon: React.ComponentType<{ className?: string }>;
   title: string;
-  description: string;
-  expanded: boolean;
+  selected: boolean;
   onClick: () => void;
-  panelId: string;
-  className?: string;
 }) {
   return (
     <button
       type="button"
-      aria-controls={panelId}
-      aria-expanded={expanded}
+      aria-pressed={selected}
       onClick={onClick}
-      className={cn(
-        "flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left transition-[background-color,border-color] duration-150 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        expanded && "bg-accent/40",
-        className,
-      )}
+      className={`flex min-h-16 items-center gap-2 rounded-lg border px-3 py-2 text-start transition-[background-color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        selected
+          ? "border-primary/50 bg-primary/5 text-foreground"
+          : "border-border hover:bg-accent/50"
+      }`}
     >
       <Icon className="size-4 shrink-0 text-muted-foreground" />
-      <span className="min-w-0 flex-1">
-        <span className="block text-sm font-medium text-foreground/90">
-          {title}
-        </span>
-        <span className="mt-0.5 block truncate text-xs text-muted-foreground">
-          {description}
-        </span>
+      <span className="min-w-0 flex-1 truncate text-sm font-medium">
+        {title}
       </span>
-      <IconChevronDown
-        className={cn(
-          "size-4 shrink-0 text-muted-foreground transition-transform duration-150",
-          expanded && "rotate-180",
-        )}
-      />
+      {selected ? <IconCheck className="size-4 shrink-0 text-primary" /> : null}
     </button>
   );
 }

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

@@ -71,8 +71,6 @@ import {
   getCssColorToken,
 } from "@/lib/design-system-preview";
 
-import type { DesignSystemTemplateId } from "../../shared/design-system-templates";
-import { ProductionDesignSystemShowcase } from "../components/design-system/ProductionDesignSystemShowcase";
 import { QueryErrorState } from "../components/QueryErrorState";
 
 interface DesignSystem {
@@ -84,7 +82,7 @@ interface DesignSystem {
   customInstructions?: string | null;
   isDefault: boolean;
   visibility?: "private" | "org" | "public" | null;
-  accessRole?: "owner" | "viewer" | "editor" | "admin";
+  accessRole?: "owner" | "viewer" | "commenter" | "editor" | "admin";
   canManage?: boolean;
   createdAt: string;
   updatedAt?: string;
@@ -124,8 +122,6 @@ export default function DesignSystems() {
   const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
     () => new Set(),
   );
-  const [pendingTemplateId, setPendingTemplateId] =
-    useState<DesignSystemTemplateId | null>(null);
 
   const { data, isLoading, isError, isFetching, refetch } = useActionQuery<{
     designSystems: DesignSystem[];
@@ -134,7 +130,6 @@ 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");
@@ -252,33 +247,6 @@ 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;
@@ -438,15 +406,7 @@ export default function DesignSystems() {
               retrying={isFetching}
             />
           ) : designSystems.length === 0 ? (
-            <>
-              <EmptyState />
-              <div className="border-t border-border pt-8">
-                <ProductionDesignSystemShowcase
-                  pendingTemplateId={pendingTemplateId}
-                  onAdd={handleAddProductionTemplate}
-                />
-              </div>
-            </>
+            <EmptyState />
           ) : (
             <>
               {isSelectionMode ? (
@@ -503,14 +463,8 @@ export default function DesignSystems() {
                   </div>
                 </div>
               ) : null}
-              <section aria-labelledby="your-design-systems-heading">
-                <h2
-                  id="your-design-systems-heading"
-                  className="mb-4 text-base font-semibold text-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">
+              <section aria-label={t("designSystems.yoursTitle")}>
+                <div className="grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-3">
                   {/* New design system card */}
                   <Link
                     to="/design-systems/setup"
@@ -521,13 +475,10 @@ export default function DesignSystems() {
                         <IconPlus className="w-6 h-6 text-muted-foreground/70 group-hover:text-muted-foreground" />
                       </div>
                     </div>
-                    <div className="p-4">
+                    <div className="p-3">
                       <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>
                   </Link>
 
@@ -617,6 +568,7 @@ export default function DesignSystems() {
                           <ShareButton
                             resourceType="design-system"
                             resourceId={ds.id}
+                            allowedRoles={["viewer", "editor", "admin"]}
                             resourceTitle={ds.title}
                           />
                         </div>
@@ -708,12 +660,6 @@ export default function DesignSystems() {
                   })}
                 </div>
               </section>
-              <div className="mt-12 border-t border-border pt-8">
-                <ProductionDesignSystemShowcase
-                  pendingTemplateId={pendingTemplateId}
-                  onAdd={handleAddProductionTemplate}
-                />
-              </div>
             </>
           )}
         </main>
@@ -1207,7 +1153,7 @@ function LoadingSkeleton() {
         <div className="h-5 w-40 rounded-md bg-muted animate-pulse" />
         <div className="h-3 w-16 rounded bg-muted animate-pulse" />
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-3">
         {Array.from({ length: 4 }).map((_, i) => (
           <div
             key={i}

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

@@ -45,7 +45,7 @@ interface DesignData {
   id: string;
   title: string;
   files: DesignFile[];
-  accessRole?: "viewer" | "editor" | "admin" | "owner";
+  accessRole?: "viewer" | "commenter" | "editor" | "admin" | "owner";
 }
 
 export default function Present() {
@@ -77,7 +77,13 @@ export default function Present() {
     },
     { enabled: Boolean(id) },
   );
-  const canPost = Boolean(session?.email);
+  const canPost = Boolean(
+    session?.email &&
+    (design?.accessRole === "owner" ||
+      design?.accessRole === "admin" ||
+      design?.accessRole === "editor" ||
+      design?.accessRole === "commenter"),
+  );
   const canResolve = Boolean(
     design?.accessRole === "owner" ||
     design?.accessRole === "admin" ||

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

@@ -524,6 +524,7 @@ function TemplateCard({
                   <ShareButton
                     resourceType="design-template"
                     resourceId={template.id}
+                    allowedRoles={["viewer", "editor", "admin"]}
                     resourceTitle={template.title}
                     trigger="label"
                     triggerClassName="w-full justify-start"

package/corpus/templates/design/app/pages/design-editor/tool-state.ts

@@ -124,9 +124,12 @@ export type DesignBottomToolbarMode = "editor" | "commenter" | "hidden";
 export function getDesignBottomToolbarMode(args: {
   isSignedIn: boolean;
   canEditDesign: boolean;
+  canCommentDesign: boolean;
   hasActiveFile: boolean;
 }): DesignBottomToolbarMode {
-  if (!args.isSignedIn || !args.hasActiveFile) return "hidden";
+  if (!args.isSignedIn || !args.hasActiveFile || !args.canCommentDesign) {
+    return "hidden";
+  }
   return args.canEditDesign ? "editor" : "commenter";
 }
 

package/corpus/templates/design/app/pages/design-editor/types.ts

@@ -47,7 +47,12 @@ export interface DesignFile {
   updatedAt: string;
 }
 
-export type DesignAccessRole = "owner" | "admin" | "editor" | "viewer";
+export type DesignAccessRole =
+  | "owner"
+  | "admin"
+  | "editor"
+  | "commenter"
+  | "viewer";
 
 export interface DesignData {
   id: string;

package/corpus/templates/design/changelog/2026-08-12-viewers-are-read-only-and-commenters-can-comment.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-12
+---
+
+Shared designs now keep viewers read-only and let commenters add review comments without editing the design.