@agent-native/core 0.153.10 → 0.154.0

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>
   );

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

@@ -31,7 +31,6 @@ import {
   IconCode,
   IconCopy,
   IconFileTypePdf,
-  IconPlugConnected,
 } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -439,24 +438,14 @@ export default function EditorToolbar({
       },
     );
     if (onExportGoogleSlides) {
-      commands.push(
-        {
-          id: "connect-google",
-          group: "deck",
-          label: t("editorExport.connectGoogle"),
-          keywords: ["google", "drive", "connect"],
-          icon: IconPlugConnected,
-          run: () => void exportMenuRef.current?.connectGoogle(),
-        },
-        {
-          id: "open-in-google-slides",
-          group: "deck",
-          label: t("editorExport.openInGoogleSlides"),
-          keywords: ["google", "slides", "export"],
-          icon: IconBrandGoogle,
-          run: () => void exportMenuRef.current?.exportGoogleSlides(),
-        },
-      );
+      commands.push({
+        id: "export-to-google-slides",
+        group: "deck",
+        label: t("editorExport.openInGoogleSlides"),
+        keywords: ["google", "slides", "export"],
+        icon: IconBrandGoogle,
+        run: () => void exportMenuRef.current?.exportGoogleSlides(),
+      });
     }
     if (onDuplicateDeck) {
       commands.push({
@@ -632,7 +621,7 @@ export default function EditorToolbar({
         agentActive={agentActive}
         showAgentEditingDot={false}
         currentUserEmail={currentUserEmail}
-        className="flex-shrink-0 mr-0.5"
+        className="ml-auto flex-shrink-0 mr-0.5 pl-2"
       />
 
       {/* Consolidated editor menu */}
@@ -657,26 +646,8 @@ export default function EditorToolbar({
           </Tooltip>
           <DropdownMenuContent
             align="end"
-            className="max-h-[min(80vh,32rem)] w-64 overflow-y-auto"
+            className="max-h-[90vh] w-64 overflow-y-auto"
           >
-            {canEdit && (
-              <>
-                <DropdownMenuLabel>
-                  {t("editorToolbar.media")}
-                </DropdownMenuLabel>
-                <DropdownMenuGroup>
-                  <DropdownMenuItem onSelect={onGenerateImage}>
-                    <IconPhoto className="size-4" />
-                    {t("editorToolbar.generateImage")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={onOpenAssetLibrary}>
-                    <IconFolderOpen className="size-4" />
-                    {t("editorToolbar.assetLibrary")}
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </>
-            )}
-
             {((canEdit &&
               (onToggleAnimations || onToggleTweaks || onToggleDrawMode)) ||
               (canComment && onTogglePinMode)) && (
@@ -742,12 +713,28 @@ export default function EditorToolbar({
               </>
             )}
 
-            {onToggleComments && (
+            {canEdit && (
               <>
                 <DropdownMenuSeparator />
                 <DropdownMenuLabel>
-                  {t("editorToolbar.comments")}
+                  {t("editorToolbar.media")}
                 </DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem onSelect={onGenerateImage}>
+                    <IconPhoto className="size-4" />
+                    {t("editorToolbar.generateImage")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={onOpenAssetLibrary}>
+                    <IconFolderOpen className="size-4" />
+                    {t("editorToolbar.assetLibrary")}
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </>
+            )}
+
+            {onToggleComments && (
+              <>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem
                   onSelect={onToggleComments}
                   className={