@agent-native/core 0.153.9 → 0.154.0

package/corpus/templates/slides/actions/index-design-system-with-builder.ts

@@ -32,6 +32,30 @@ const codeFileSchema = z.object({
     ),
 });
 
+const githubSourceSchema = z.object({
+  repoUrl: z.string().trim().min(1).describe("GitHub repository URL"),
+  ref: z
+    .string()
+    .trim()
+    .min(1)
+    .optional()
+    .describe("Optional branch, tag, or commit"),
+  include: z
+    .array(z.string().trim().min(1))
+    .optional()
+    .describe("Optional repository-relative files or folders to include"),
+  exclude: z
+    .array(z.string().trim().min(1))
+    .optional()
+    .describe("Optional repository-relative files or folders to exclude"),
+  instructions: z
+    .string()
+    .trim()
+    .min(1)
+    .optional()
+    .describe("Optional indexing guidance for this repository"),
+});
+
 export default defineAction({
   description:
     "Start Builder DSI design-system indexing from connected code, a GitHub repository, code/design files, and optional design.md guidance. " +
@@ -49,7 +73,15 @@ export default defineAction({
     githubRepoUrl: z
       .string()
       .optional()
-      .describe("GitHub repository URL to index with Builder"),
+      .describe("Legacy single GitHub repository URL to index with Builder"),
+    githubSources: z
+      .array(githubSourceSchema)
+      .min(1)
+      .max(20)
+      .optional()
+      .describe(
+        "GitHub repositories to index in one design system. Each source may specify a branch/tag/commit and repository-relative files or folders.",
+      ),
     connectedProjectId: z
       .string()
       .optional()
@@ -69,6 +101,7 @@ export default defineAction({
     projectName,
     description,
     githubRepoUrl,
+    githubSources,
     connectedProjectId,
     codeFiles,
     designMd,
@@ -81,6 +114,7 @@ export default defineAction({
       projectName,
       description,
       githubRepoUrl,
+      githubRepos: githubSources,
       connectedProjectId,
       files,
     });
@@ -93,10 +127,13 @@ export default defineAction({
       orgId: getRequestOrgId(),
       projectName,
       description,
+      githubSources:
+        githubSources ?? (githubRepoUrl ? [{ repoUrl: githubRepoUrl }] : []),
       sourceKind:
-        githubRepoUrl && (codeFiles?.length || designMd)
+        (githubSources?.length || githubRepoUrl) &&
+        (codeFiles?.length || designMd)
           ? "mixed"
-          : githubRepoUrl
+          : githubSources?.length || githubRepoUrl
             ? "github"
             : codeFiles?.length || designMd
               ? "code"
@@ -107,6 +144,7 @@ export default defineAction({
       ...result,
       ...proxy,
       uploadedFileCount: files.length,
+      githubSourceCount: githubSources?.length ?? (githubRepoUrl ? 1 : 0),
     };
   },
 });

package/corpus/templates/slides/actions/sync-design-system-with-builder.ts

@@ -0,0 +1,64 @@
+import { defineAction } from "@agent-native/core";
+import {
+  parseBuilderDesignSystemProxyReference,
+  startBuilderDesignSystemIndex,
+} from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+import "../server/db/index.js";
+import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
+
+export default defineAction({
+  description:
+    "Re-index a Builder-backed GitHub design system using its persisted repository, ref, and file/folder scope. Requires editor access.",
+  schema: z.object({
+    id: z.string().min(1).describe("Local design system id"),
+  }),
+  run: async ({ id }) => {
+    await assertAccess("design-system", id, "editor");
+    const access = await resolveAccess("design-system", id);
+    if (!access) throw new Error("Design system not found");
+
+    const reference = parseBuilderDesignSystemProxyReference(
+      access.resource.data,
+    );
+    if (!reference?.githubSources?.length) {
+      throw new Error(
+        "This design system has no persisted GitHub source scope to sync.",
+      );
+    }
+    if (reference.sourceKind === "mixed") {
+      throw new Error(
+        "This design system combines GitHub with non-replayable sources. Re-import all sources before syncing it.",
+      );
+    }
+
+    const result = await startBuilderDesignSystemIndex({
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      githubRepos: reference.githubSources,
+    });
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const proxy = await upsertBuilderProxyDesignSystem({
+      result,
+      ownerEmail: access.resource.ownerEmail,
+      orgId: access.resource.orgId,
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      sourceKind: reference.sourceKind,
+      githubSources: reference.githubSources,
+      localDesignSystemId: id,
+    });
+
+    return {
+      ...result,
+      ...proxy,
+      synced: true,
+      githubSourceCount: reference.githubSources.length,
+    };
+  },
+});

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -189,7 +189,7 @@ export default function DeckCard({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            className="w-40"
+            className="w-56"
             onCloseAutoFocus={(e) => {
               if (pendingRenameRef.current) {
                 e.preventDefault();

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -19,6 +19,7 @@ import {
   IconCheck,
   IconExternalLink,
   IconChevronDown,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { toast } from "sonner";
@@ -59,6 +60,8 @@ interface DesignSystemSetupProps {
 interface GitHubLink {
   id: string;
   url: string;
+  ref?: string;
+  include?: string[];
 }
 
 interface UploadedFile {
@@ -81,6 +84,13 @@ interface BuilderSourceDetails {
   tokenValues?: Record<string, string>;
   docCount?: number;
   warning?: string;
+  githubSources?: Array<{
+    repoUrl: string;
+    ref?: string;
+    include?: string[];
+    exclude?: string[];
+  }>;
+  syncedAt?: string;
 }
 
 interface ExistingDesignSystem {
@@ -91,6 +101,25 @@ interface ExistingDesignSystem {
   builder?: BuilderSourceDetails | null;
 }
 
+interface BuilderIndexInput {
+  projectName?: string;
+  description?: string;
+  githubSources?: Array<{
+    repoUrl: string;
+    ref?: string;
+    include?: string[];
+    exclude?: string[];
+  }>;
+  githubRepoUrl?: string;
+  codeFiles?: Array<{
+    filename: string;
+    content: string;
+    mimeType?: string;
+    encoding?: "utf8" | "base64";
+  }>;
+  designMd?: string;
+}
+
 type OtherSource = "brand" | "code" | "files" | "existing" | "context";
 
 function normalizeWebsiteUrlInput(input: string): string | null {
@@ -134,6 +163,8 @@ export function DesignSystemSetup({
   const [websiteUrl, setWebsiteUrl] = useState("");
   const [websiteUrls, setWebsiteUrls] = useState<string[]>([]);
   const [githubUrl, setGithubUrl] = useState("");
+  const [githubRef, setGithubRef] = useState("");
+  const [githubPaths, setGithubPaths] = useState("");
   const [githubLinks, setGithubLinks] = useState<GitHubLink[]>([]);
   const [codeFiles, setCodeFiles] = useState<UploadedFile[]>([]);
   const [docFiles, setDocFiles] = useState<UploadedFile[]>([]);
@@ -211,6 +242,13 @@ export function DesignSystemSetup({
   const imageInputRef = useRef<HTMLInputElement>(null);
   const figInputRef = useRef<HTMLInputElement>(null);
   const updateSystemMutation = useActionMutation("update-design-system");
+  const syncSystemMutation = useActionMutation(
+    "sync-design-system-with-builder",
+  );
+  const indexSystemMutation = useActionMutation<
+    BuilderIndexResult,
+    BuilderIndexInput
+  >("index-design-system-with-builder");
 
   const {
     data: existingDs,
@@ -267,6 +305,8 @@ export function DesignSystemSetup({
       setWebsiteUrl("");
       setWebsiteUrls([]);
       setGithubUrl("");
+      setGithubRef("");
+      setGithubPaths("");
       setGithubLinks([]);
       setCodeFiles([]);
       setDocFiles([]);
@@ -323,9 +363,23 @@ export function DesignSystemSetup({
   const addGithubLink = useCallback(() => {
     const url = githubUrl.trim();
     if (!url) return;
-    setGithubLinks((prev) => [...prev, { id: crypto.randomUUID(), url }]);
+    const include = githubPaths
+      .split(/[\n,]/)
+      .map((path) => path.trim().replace(/^\/+|\/+$/g, ""))
+      .filter(Boolean);
+    setGithubLinks((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        url,
+        ...(githubRef.trim() ? { ref: githubRef.trim() } : {}),
+        ...(include.length > 0 ? { include: [...new Set(include)] } : {}),
+      },
+    ]);
     setGithubUrl("");
-  }, [githubUrl]);
+    setGithubRef("");
+    setGithubPaths("");
+  }, [githubPaths, githubRef, githubUrl]);
 
   const readTextFiles = useCallback(
     (
@@ -432,12 +486,66 @@ export function DesignSystemSetup({
     }
   };
 
+  const handleSync = useCallback(async () => {
+    if (!editingId || !existingDs?.builder?.githubSources?.length) return;
+    setGenerating(true);
+    try {
+      await syncSystemMutation.mutateAsync({ id: editingId });
+      toast.success(t("designSystemSetup.syncStarted"));
+    } catch (error) {
+      toast.error(t("designSystemSetup.syncFailed"), {
+        description:
+          error instanceof Error
+            ? error.message
+            : t("designSystemSetup.syncFailed"),
+      });
+    } finally {
+      setGenerating(false);
+    }
+  }, [editingId, existingDs, syncSystemMutation, t]);
+
   const handleGenerate = useCallback(async () => {
     if (editingId) {
       await handleEditSave();
       return;
     }
 
+    const isGithubOnlySource =
+      githubLinks.length > 0 &&
+      websiteUrls.length === 0 &&
+      codeFiles.length === 0 &&
+      !builderIndexResult &&
+      docFiles.length === 0 &&
+      imageFiles.length === 0 &&
+      !selectedSystemId &&
+      !brandNotes.trim() &&
+      !customInstructions.trim();
+    if (isGithubOnlySource) {
+      setGenerating(true);
+      try {
+        await indexSystemMutation.mutateAsync({
+          projectName: companyName.trim() || undefined,
+          githubSources: githubLinks.map((link) => ({
+            repoUrl: link.url,
+            ...(link.ref ? { ref: link.ref } : {}),
+            ...(link.include?.length ? { include: link.include } : {}),
+          })),
+        });
+        toast.success(t("designSystemSetup.generationStarted"));
+        onComplete();
+      } catch (error) {
+        toast.error(t("designSystemSetup.updateFailed"), {
+          description:
+            error instanceof Error
+              ? error.message
+              : t("designSystemSetup.updateFailed"),
+        });
+      } finally {
+        setGenerating(false);
+      }
+      return;
+    }
+
     const requestedTitle = companyName.trim();
     const localDesignSystemId = builderIndexResult?.localDesignSystemId;
     if (requestedTitle && localDesignSystemId) {
@@ -485,7 +593,15 @@ export function DesignSystemSetup({
 
     if (githubLinks.length > 0) {
       parts.push(
-        `\n## Connect Code: GitHub Repositories\nStart Builder DSI indexing for each repository with \`index-design-system-with-builder\`:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder (free tier available) from Settings.`,
+        `\n## Connect Code: GitHub Repositories\nMake one call to \`index-design-system-with-builder\` with \`githubSources\` set to this JSON array:\n\n\`\`\`json\n${JSON.stringify(
+          githubLinks.map((link) => ({
+            repoUrl: link.url,
+            ...(link.ref ? { ref: link.ref } : {}),
+            ...(link.include?.length ? { include: link.include } : {}),
+          })),
+          null,
+          2,
+        )}\n\`\`\`\n\nBuilder is the source of truth for repo/code design-system indexing. The action creates one local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder (free tier available) from Settings.`,
       );
     }
 
@@ -610,6 +726,7 @@ export function DesignSystemSetup({
     onComplete,
     t,
     updateSystemMutation,
+    indexSystemMutation,
     existingDs,
   ]);
 
@@ -651,7 +768,16 @@ export function DesignSystemSetup({
               </div>
 
               {editingId && existingDs?.builder ? (
-                <BuilderSourceStatus builder={existingDs.builder} />
+                <BuilderSourceStatus
+                  builder={existingDs.builder}
+                  onSync={
+                    existingDs.builder.githubSources?.length &&
+                    existingDs.builder.sourceKind !== "mixed"
+                      ? handleSync
+                      : undefined
+                  }
+                  syncing={syncSystemMutation.isPending}
+                />
               ) : null}
 
               {!editingId && (
@@ -895,8 +1021,28 @@ export function DesignSystemSetup({
                         {t("designSystemSetup.add")}
                       </Button>
                     </div>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <Input
+                        value={githubRef}
+                        onChange={(e) => setGithubRef(e.target.value)}
+                        placeholder={t("designSystemSetup.githubRef")}
+                        aria-label={t("designSystemSetup.githubRef")}
+                        className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
+                      />
+                      <Input
+                        value={githubPaths}
+                        onChange={(e) => setGithubPaths(e.target.value)}
+                        placeholder={t("designSystemSetup.githubPaths")}
+                        aria-label={t("designSystemSetup.githubPaths")}
+                        className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
+                      />
+                    </div>
                     <TagList
-                      items={githubLinks.map((l) => l.url)}
+                      items={githubLinks.map((l) =>
+                        [l.url, l.ref, l.include?.join(", ")]
+                          .filter(Boolean)
+                          .join(" · "),
+                      )}
                       onRemove={(i) =>
                         setGithubLinks((p) => p.filter((_, j) => j !== i))
                       }
@@ -1253,7 +1399,15 @@ function SourceAccordionRow({
   );
 }
 
-function BuilderSourceStatus({ builder }: { builder: BuilderSourceDetails }) {
+function BuilderSourceStatus({
+  builder,
+  onSync,
+  syncing = false,
+}: {
+  builder: BuilderSourceDetails;
+  onSync?: () => void;
+  syncing?: boolean;
+}) {
   const t = useT();
   const docs = builder.docCount ?? builder.docs?.length ?? 0;
   const tokens = Object.keys(builder.tokenValues ?? {}).length;
@@ -1357,20 +1511,39 @@ function BuilderSourceStatus({ builder }: { builder: BuilderSourceDetails }) {
           {statusTitle}
         </div>
       </div>
-      {builder.builderUrl ? (
-        <div className="mt-3 border-t border-border pt-3">
-          <a
-            href={withBuilderUtmTrackingParams(builder.builderUrl, {
-              campaign: "product",
-              content: "design_system_intelligence",
-            })}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground underline-offset-4 hover:underline"
-          >
-            {t("designSystemSetup.sourceOpenInBuilder")}
-            <IconExternalLink className="size-3.5" />
-          </a>
+      {builder.builderUrl || onSync ? (
+        <div className="mt-3 flex flex-wrap items-center gap-3 border-t border-border pt-3">
+          {builder.builderUrl ? (
+            <a
+              href={withBuilderUtmTrackingParams(builder.builderUrl, {
+                campaign: "product",
+                content: "design_system_intelligence",
+              })}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground underline-offset-4 hover:underline"
+            >
+              {t("designSystemSetup.sourceOpenInBuilder")}
+              <IconExternalLink className="size-3.5" />
+            </a>
+          ) : null}
+          {onSync ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onSync}
+              disabled={syncing}
+              className="h-7 gap-1.5 px-2 text-xs"
+            >
+              <IconRefresh
+                className={cn("size-3.5", syncing && "animate-spin")}
+              />
+              {syncing
+                ? t("designSystemSetup.syncingSource")
+                : t("designSystemSetup.syncSource")}
+            </Button>
+          ) : null}
         </div>
       ) : null}
     </section>

package/corpus/templates/slides/app/components/editor/EditorSidebar.tsx

@@ -17,8 +17,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
-import { useRef, useEffect } from "react";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
@@ -34,6 +33,7 @@ import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
 import type { DesignSystemData } from "../../../shared/api";
+import { isSlideTextEditingTarget } from "./slide-text-targets";
 
 interface EditorSidebarProps {
   slides: Slide[];
@@ -317,6 +317,7 @@ export default function EditorSidebar({
   generatingSlideSelected = false,
   onSelectGeneratingSlide,
 }: EditorSidebarProps) {
+  const [thumbnailListScrolled, setThumbnailListScrolled] = useState(false);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const measurementsRef = useRef(
     new Map<
@@ -391,6 +392,10 @@ export default function EditorSidebar({
     measurementsRef.current.clear();
   }, [deckId, aspectRatio]);
 
+  useEffect(() => {
+    setThumbnailListScrolled(false);
+  }, [deckId]);
+
   useEffect(() => {
     return () => {
       if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
@@ -419,12 +424,20 @@ export default function EditorSidebar({
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-      // Don't intercept if user is typing in an input/textarea or contenteditable
+      // Text editing and selected canvas objects own arrow keys. The marker
+      // query also covers a transient focus loss after a native selection.
       const tag = (e.target as HTMLElement)?.tagName;
       if (
         tag === "INPUT" ||
         tag === "TEXTAREA" ||
-        (e.target as HTMLElement)?.isContentEditable
+        isSlideTextEditingTarget(
+          e.target,
+          document.activeElement,
+          document.querySelector(
+            '[contenteditable="true"], [data-editing-block="true"]',
+          ),
+        ) ||
+        document.querySelector('[data-slide-element-selected="true"]')
       )
         return;
 
@@ -454,39 +467,51 @@ export default function EditorSidebar({
 
   return (
     <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
-      <div className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
-        <SortableContext
-          items={slides.map((s) => s.id)}
-          strategy={verticalListSortingStrategy}
+      <div
+        className="relative min-h-0 flex-1"
+        data-slides-thumbnail-scroll={
+          thumbnailListScrolled ? "scrolled" : "top"
+        }
+      >
+        <div
+          className="h-full min-h-0 space-y-1 overflow-y-auto overscroll-contain p-2"
+          onScroll={(event) => {
+            setThumbnailListScrolled(event.currentTarget.scrollTop > 1);
+          }}
         >
-          {slides.map((slide, index) => (
-            <SortableSlideThumb
-              key={slide.id}
-              slide={slide}
-              index={index}
-              isActive={slide.id === activeSlideId}
-              onSelect={() => onSelectSlide(slide.id)}
-              readOnly={readOnly}
-              registerButtonRef={registerSlideButton}
-              presenceUsers={slidePresence?.get(slide.id) ?? []}
+          <SortableContext
+            items={slides.map((s) => s.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {slides.map((slide, index) => (
+              <SortableSlideThumb
+                key={slide.id}
+                slide={slide}
+                index={index}
+                isActive={slide.id === activeSlideId}
+                onSelect={() => onSelectSlide(slide.id)}
+                readOnly={readOnly}
+                registerButtonRef={registerSlideButton}
+                presenceUsers={slidePresence?.get(slide.id) ?? []}
+                aspectRatio={aspectRatio}
+                designSystem={designSystem}
+                aiEditing={aiEditedSlideIds.has(slide.id)}
+                onOverflowChange={(info) =>
+                  handleSlideOverflowChange(slide, info)
+                }
+              />
+            ))}
+          </SortableContext>
+          {generatingSlide && (
+            <GeneratingSlideSkeleton
+              index={generatingSlide.index}
               aspectRatio={aspectRatio}
               designSystem={designSystem}
-              aiEditing={aiEditedSlideIds.has(slide.id)}
-              onOverflowChange={(info) =>
-                handleSlideOverflowChange(slide, info)
-              }
+              selected={generatingSlideSelected}
+              onSelect={onSelectGeneratingSlide}
             />
-          ))}
-        </SortableContext>
-        {generatingSlide && (
-          <GeneratingSlideSkeleton
-            index={generatingSlide.index}
-            aspectRatio={aspectRatio}
-            designSystem={designSystem}
-            selected={generatingSlideSelected}
-            onSelect={onSelectGeneratingSlide}
-          />
-        )}
+          )}
+        </div>
       </div>
     </div>
   );