@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

package/src/app/sharing/ShareDialog.tsx

@@ -27,6 +27,7 @@ import {
 } from "@tabler/icons-react";
 import { type ReactNode } from "react";
 
+import { AccessRequestsSection } from "./AccessRequestsSection.js";
 import { AgentShareSection } from "./AgentShareSection.js";
 
 export interface ShareDialogProps {
@@ -83,6 +84,12 @@ export function ShareDialog({
   });
   if (!open) return null;
   const dialogTitle = title ?? controller.title;
+  const accessRequests = controller.canManage ? (
+    <AccessRequestsSection
+      resourceType={resourceType}
+      resourceId={resourceId}
+    />
+  ) : null;
   const showTabList =
     controller.tabs.length > 1 || controller.tabs[0]?.value !== "link";
 
@@ -132,12 +139,17 @@ export function ShareDialog({
 
       <div className="px-5 py-4">
         {controller.tabsEnabled && controller.activeTab === "link" ? (
-          <LinkTab controller={controller} extras={linkTabExtras} />
+          <LinkTab
+            controller={controller}
+            extras={linkTabExtras}
+            accessRequests={accessRequests}
+          />
         ) : null}
         {!controller.tabsEnabled || controller.activeTab === "invite" ? (
           <InviteTab
             controller={controller}
             showVisibility={!controller.tabsEnabled}
+            accessRequests={accessRequests}
           />
         ) : null}
         {controller.tabsEnabled && controller.activeTab === "embed"
@@ -184,9 +196,11 @@ function TabTrigger({
 function LinkTab({
   controller,
   extras,
+  accessRequests,
 }: {
   controller: ShareDialogController;
   extras?: ReactNode;
+  accessRequests: ReactNode;
 }) {
   const Icon = VIS_ICONS[controller.visibility.value];
   return (
@@ -218,7 +232,11 @@ function LinkTab({
           </div>
         </div>
       </div>
-      <InviteTab controller={controller} showVisibility={false} />
+      <InviteTab
+        controller={controller}
+        showVisibility={false}
+        accessRequests={accessRequests}
+      />
       {extras}
     </div>
   );
@@ -227,9 +245,11 @@ function LinkTab({
 function InviteTab({
   controller,
   showVisibility,
+  accessRequests,
 }: {
   controller: ShareDialogController;
   showVisibility: boolean;
+  accessRequests: ReactNode;
 }) {
   const Icon = VIS_ICONS[controller.visibility.value];
   return (
@@ -256,6 +276,8 @@ function InviteTab({
         </div>
       ) : null}
 
+      {accessRequests}
+
       <div className="space-y-4">
         <div className="text-sm font-semibold">
           {controller.labels.peopleWithAccess}

package/src/app/sharing/index.ts

@@ -1,4 +1,6 @@
+export * from "./AccessRequestApprovalPage.js";
 export * from "./AgentShareSection.js";
+export * from "./ResourceAccessScreen.js";
 export * from "./ShareButton.js";
 export * from "./ShareDialog.js";
 export * from "./VisibilityBadge.js";

package/src/app/styles/agent-native.css

@@ -1065,6 +1065,19 @@
   z-index: 1;
   margin-bottom: -1.875rem;
   padding-bottom: 0 !important;
+  animation: agent-builder-setup-card-enter 220ms var(--ease-out-strong) both;
+}
+
+@keyframes agent-builder-setup-card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .agent-builder-setup-card--attached .agent-builder-setup-card__panel {
@@ -1241,6 +1254,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .agent-builder-setup-card--attached {
+    animation: none;
+  }
+
   .agent-builder-setup-card--attached.animate-bounce-once {
     animation: none;
   }
@@ -1250,7 +1267,10 @@
   min-height: var(--agent-kit-composer-min-height);
   border-radius: var(--agent-kit-composer-radius);
   border-color: var(--agent-kit-composer-border-color);
-  background: var(--agent-kit-raised-surface);
+  background: var(
+    --agent-kit-composer-surface,
+    var(--agent-kit-raised-surface)
+  );
   box-shadow: var(--agent-kit-composer-elevation);
 }
 

package/src/app/styles/agent-native.spec.ts

@@ -275,17 +275,30 @@ describe("agent-native shell surface tokens", () => {
     );
   });
 
-  it("gives the composer a quiet boundary in both themes", () => {
+  it("uses a subtle dark composer surface and a focused boundary", () => {
+    const css = readFileSync(new URL("./agent-native.css", import.meta.url), {
+      encoding: "utf8",
+    });
+    const agentkitCss = readFileSync(
+      new URL("../agentkit/react/styles.css", import.meta.url),
+      { encoding: "utf8" },
+    );
     const tokens = readFileSync(
       new URL("./tokens/agent-kit.css", import.meta.url),
       { encoding: "utf8" },
     );
 
     expect(tokens).toMatch(
-      /:root\s*\{[\s\S]*?--agent-kit-composer-border-mix: 82%;[\s\S]*?--agent-kit-composer-focus-border-mix: 100%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
+      /:root\s*\{[\s\S]*?--agent-kit-composer-surface: var\(--agent-kit-raised-surface\);[\s\S]*?--agent-kit-composer-border-mix: 82%;[\s\S]*?--agent-kit-composer-focus-border-mix: 100%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
     );
     expect(tokens).toMatch(
-      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-composer-border-mix: 40%;[\s\S]*?--agent-kit-composer-focus-border-mix: 65%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-composer-surface: var\(--agent-kit-subtle-surface\);[\s\S]*?--agent-kit-composer-border-mix: 0%;[\s\S]*?--agent-kit-composer-focus-border-mix: 65%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
+    );
+    expect(css).toMatch(
+      /background:\s*var\(\s*--agent-kit-composer-surface,\s*var\(--agent-kit-raised-surface\)\s*\);/,
+    );
+    expect(agentkitCss).toMatch(
+      /--agent-kit-composer-surface,\s*var\(--agentkit-surface\)/,
     );
   });
 

package/src/app/styles/tokens/agent-kit.css

@@ -43,6 +43,7 @@
   --agent-kit-composer-block-padding-end: 1rem;
   --agent-kit-composer-min-height: 4.75rem;
   --agent-kit-composer-radius: 1.25rem;
+  --agent-kit-composer-surface: var(--agent-kit-raised-surface);
   --agent-kit-composer-border-mix: 82%;
   --agent-kit-composer-focus-border-mix: 100%;
   --agent-kit-composer-border-color: color-mix(
@@ -101,7 +102,8 @@
 }
 
 :is(.dark, :root[data-theme="dark"]:not(.light)) {
-  --agent-kit-composer-border-mix: 40%;
+  --agent-kit-composer-surface: var(--agent-kit-subtle-surface);
+  --agent-kit-composer-border-mix: 0%;
   --agent-kit-composer-focus-border-mix: 65%;
   --agent-kit-composer-border-color: color-mix(
     in srgb,

package/src/composer/AgentSuggestionBar.overflow.spec.tsx

@@ -0,0 +1,277 @@
+// @vitest-environment happy-dom
+
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { ActionButtonProps } from "../design-system/types.js";
+import { ToolkitProvider } from "../provider.js";
+import { AgentSuggestionBar } from "./AgentSuggestionBar.js";
+
+const DOCUMENT_SUGGESTIONS = [
+  "Summarize this document",
+  "Improve this document",
+  "Find the action items",
+];
+const CHIP_WIDTHS: Record<string, number> = {
+  "Summarize this document": 155,
+  "Improve this document": 144,
+  "Find the action items": 144,
+};
+// A 280px agent panel minus the bar's and scroller's inline padding.
+const NARROWEST_SCROLLER_WIDTH = 252;
+
+describe("AgentSuggestionBar overflow", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let gapStyle: HTMLStyleElement;
+  let scrollerWidth: number;
+  let scrollOffset: number;
+  let resizeCallbacks: Array<() => void>;
+  let disconnectObserver: ReturnType<typeof vi.fn>;
+  const descriptors = new Map<string, PropertyDescriptor | undefined>();
+
+  const scroller = () =>
+    container.querySelector<HTMLElement>(
+      '[data-agent-suggestion-scroller="true"]',
+    )!;
+  const track = () =>
+    container.querySelector<HTMLElement>(
+      '[data-agent-suggestion-track="true"]',
+    )!;
+  const trackWidth = () =>
+    Number.parseFloat(
+      track().style.getPropertyValue("--agent-suggestion-track-width"),
+    );
+  const fadeEdges = () => ({
+    start: scroller().getAttribute("data-overflow-start"),
+    end: scroller().getAttribute("data-overflow-end"),
+  });
+
+  function defineLayout(name: string, descriptor: PropertyDescriptor) {
+    descriptors.set(
+      name,
+      Object.getOwnPropertyDescriptor(HTMLElement.prototype, name),
+    );
+    Object.defineProperty(HTMLElement.prototype, name, {
+      configurable: true,
+      ...descriptor,
+    });
+  }
+
+  function render(suggestions: string[]) {
+    act(() => {
+      root.render(
+        <AgentSuggestionBar
+          ariaLabel="Suggested prompts"
+          suggestions={suggestions}
+          onSelect={() => {}}
+        />,
+      );
+    });
+  }
+
+  function resizeScroller(width: number) {
+    scrollerWidth = width;
+    act(() => resizeCallbacks.forEach((callback) => callback()));
+  }
+
+  function scrollTo(offset: number) {
+    scrollOffset = offset;
+    act(() => {
+      scroller().dispatchEvent(new Event("scroll"));
+    });
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    scrollerWidth = NARROWEST_SCROLLER_WIDTH;
+    scrollOffset = 0;
+    resizeCallbacks = [];
+    disconnectObserver = vi.fn();
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        constructor(callback: () => void) {
+          resizeCallbacks.push(callback);
+        }
+        observe() {}
+        disconnect = disconnectObserver;
+      },
+    );
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+
+    gapStyle = document.createElement("style");
+    gapStyle.textContent =
+      '[data-agent-suggestion-track="true"] { column-gap: 4px; }';
+    document.head.appendChild(gapStyle);
+
+    defineLayout("getBoundingClientRect", {
+      value(this: HTMLElement) {
+        const width = CHIP_WIDTHS[this.textContent ?? ""] ?? 0;
+        return { width, height: 28, top: 0, left: 0, right: width, bottom: 28 };
+      },
+    });
+    defineLayout("clientWidth", {
+      get(this: HTMLElement) {
+        return this.dataset.agentSuggestionScroller ? scrollerWidth : 0;
+      },
+    });
+    defineLayout("scrollWidth", {
+      get(this: HTMLElement) {
+        if (!this.dataset.agentSuggestionScroller) return 0;
+        return Math.max(scrollerWidth, trackWidth());
+      },
+    });
+    defineLayout("scrollLeft", {
+      get() {
+        return scrollOffset;
+      },
+      set(value: number) {
+        scrollOffset = value;
+      },
+    });
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    gapStyle.remove();
+    for (const [name, descriptor] of descriptors) {
+      if (descriptor) {
+        Object.defineProperty(HTMLElement.prototype, name, descriptor);
+      } else {
+        delete (HTMLElement.prototype as unknown as Record<string, unknown>)[
+          name
+        ];
+      }
+    }
+    descriptors.clear();
+    vi.unstubAllGlobals();
+  });
+
+  it("wraps document suggestions onto two lines at the narrowest panel", () => {
+    render(DOCUMENT_SUGGESTIONS);
+
+    expect(
+      [...container.querySelectorAll("button")].map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(DOCUMENT_SUGGESTIONS);
+    expect(track().className).toContain("flex-wrap");
+    expect(track().className).toContain("min-w-full");
+    // The measured width only lays the chips out in two lines once the track
+    // is sized by it; the mocked geometry here cannot show that on its own.
+    expect(track().className).toContain("w-(--agent-suggestion-track-width)");
+    expect(trackWidth()).toBe(144 + 4 + 144);
+    expect(fadeEdges()).toEqual({ start: null, end: "true" });
+  });
+
+  it("fades only the edges that still hide suggestions", () => {
+    render(DOCUMENT_SUGGESTIONS);
+    const hidden = trackWidth() - NARROWEST_SCROLLER_WIDTH;
+
+    scrollTo(hidden / 2);
+    expect(fadeEdges()).toEqual({ start: "true", end: "true" });
+
+    scrollTo(hidden);
+    expect(fadeEdges()).toEqual({ start: "true", end: null });
+  });
+
+  it("drops the fade once a resize lets every suggestion fit", () => {
+    render(DOCUMENT_SUGGESTIONS);
+    expect(fadeEdges().end).toBe("true");
+
+    resizeScroller(480);
+    expect(fadeEdges()).toEqual({ start: null, end: null });
+
+    resizeScroller(NARROWEST_SCROLLER_WIDTH);
+    expect(fadeEdges()).toEqual({ start: null, end: "true" });
+
+    act(() => root.unmount());
+    expect(disconnectObserver).toHaveBeenCalled();
+    root = createRoot(container);
+  });
+
+  it("scrolls a keyboard-focused suggestion out from under the fade", () => {
+    const scrollIntoView = vi.fn();
+    defineLayout("scrollIntoView", { value: scrollIntoView });
+    render(DOCUMENT_SUGGESTIONS);
+    const lastChip = [...container.querySelectorAll("button")].at(-1)!;
+
+    act(() => lastChip.focus());
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+
+  it("reveals a keyboard-focused suggestion rendered by a host's ActionButton", () => {
+    const scrollIntoView = vi.fn();
+    defineLayout("scrollIntoView", { value: scrollIntoView });
+    // Adapters receive only the props Button forwards, which omit onFocus.
+    const HostActionButton = ({
+      label,
+      onClick,
+      elementRef,
+    }: ActionButtonProps) => (
+      <button ref={elementRef} type="button" onClick={onClick}>
+        {label}
+      </button>
+    );
+    act(() => {
+      root.render(
+        <ToolkitProvider
+          designSystem={{ components: { ActionButton: HostActionButton } }}
+        >
+          <AgentSuggestionBar
+            ariaLabel="Suggested prompts"
+            suggestions={DOCUMENT_SUGGESTIONS}
+            onSelect={() => {}}
+          />
+        </ToolkitProvider>,
+      );
+    });
+    const lastChip = [...container.querySelectorAll("button")].at(-1)!;
+
+    act(() => lastChip.focus());
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+
+  it("ships the fade and wrap styles for every host", () => {
+    const styles = readFileSync(
+      path.resolve(
+        path.dirname(fileURLToPath(import.meta.url)),
+        "../app/agentkit/react/styles.css",
+      ),
+      "utf8",
+    ).replace(/\r\n/g, "\n");
+
+    expect(styles).toMatch(
+      /\[data-agent-suggestion-scroller="true"\]:is\(\s*\[data-overflow-start\],\s*\[data-overflow-end\]\s*\) \{[\s\S]*?mask-image: linear-gradient\(/,
+    );
+    expect(styles).toMatch(
+      /\[data-agent-suggestion-scroller="true"\]\[data-overflow-end\] \{\n  --agent-suggestion-fade-end: 1\.5rem;/,
+    );
+    expect(styles).toMatch(
+      /\.agentkit-suggestions \[data-agent-suggestion-track="true"\] \{[\s\S]*?flex-wrap: wrap;[\s\S]*?inline-size: var\(--agent-suggestion-track-width\);[\s\S]*?min-inline-size: 100%;/,
+    );
+  });
+});

package/src/composer/AgentSuggestionBar.tsx

@@ -1,8 +1,18 @@
-import type { ReactNode } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type FocusEvent,
+  type ReactNode,
+} from "react";
 
 import { Button } from "../ui/button.js";
 import { cn } from "../utils.js";
 
+const useBrowserLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export interface AgentSuggestionItem {
   id: string;
   label: string;
@@ -41,6 +51,90 @@ export function agentSuggestionPrompt(
     : (suggestion.prompt ?? suggestion.label);
 }
 
+function twoLineTrackWidth(widths: readonly number[], gap: number): number {
+  const total =
+    widths.reduce((sum, width) => sum + width, 0) +
+    gap * Math.max(widths.length - 1, 0);
+  let narrowest = total;
+  let firstLine = -gap;
+  for (const width of widths.slice(0, -1)) {
+    firstLine += gap + width;
+    narrowest = Math.min(
+      narrowest,
+      Math.max(firstLine, total - firstLine - gap),
+    );
+  }
+  return narrowest;
+}
+
+// Chrome does not scroll a partly visible chip into view when it takes
+// keyboard focus, which leaves it under the edge fade. Listen on the track:
+// a host's ActionButton adapter receives only the props Button forwards, and
+// onFocus is not one of them.
+function revealKeyboardFocusedChip(event: FocusEvent<HTMLDivElement>) {
+  const chip = event.target;
+  if (!(chip instanceof HTMLElement) || !chip.matches(":focus-visible")) return;
+  chip.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+function useTwoLineSuggestionTrack(layoutKey: string) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = useState({ start: false, end: false });
+
+  useBrowserLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    const track = trackRef.current;
+    if (!scroller || !track) return;
+    const chips = Array.from(track.children);
+    const updateOverflow = () => {
+      const offset = Math.abs(scroller.scrollLeft);
+      const start = offset > 1;
+      const end = offset + scroller.clientWidth < scroller.scrollWidth - 1;
+      setOverflow((current) =>
+        current.start === start && current.end === end
+          ? current
+          : { start, end },
+      );
+    };
+    const update = () => {
+      const gap = Number.parseFloat(getComputedStyle(track).columnGap);
+      const width = twoLineTrackWidth(
+        chips.map((chip) => chip.getBoundingClientRect().width),
+        Number.isNaN(gap) ? 0 : gap,
+      );
+      track.style.setProperty(
+        "--agent-suggestion-track-width",
+        `${Math.ceil(width)}px`,
+      );
+      updateOverflow();
+    };
+    update();
+
+    // Resizing the track inside the observer callback resizes the observed
+    // scroller in the same frame, which the browser reports as a
+    // ResizeObserver loop error. Measure on the next frame instead.
+    let frame = 0;
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(update);
+          });
+    observer?.observe(scroller);
+    for (const chip of chips) observer?.observe(chip);
+    scroller.addEventListener("scroll", updateOverflow, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      scroller.removeEventListener("scroll", updateOverflow);
+    };
+  }, [layoutKey]);
+
+  return { scrollerRef, trackRef, overflow };
+}
+
 export function AgentSuggestionBar({
   suggestions,
   ariaLabel,
@@ -48,7 +142,11 @@ export function AgentSuggestionBar({
   renderSuggestion,
   className,
 }: AgentSuggestionBarProps) {
-  if (suggestions.length === 0) return null;
+  const items = suggestions.map(normalizeAgentSuggestion);
+  const { scrollerRef, trackRef, overflow } = useTwoLineSuggestionTrack(
+    items.map((item) => item.id).join("\n"),
+  );
+  if (items.length === 0) return null;
 
   return (
     <section
@@ -57,12 +155,19 @@ export function AgentSuggestionBar({
       className={cn("w-full min-w-0 overflow-hidden px-3 py-2", className)}
     >
       <div
+        ref={scrollerRef}
         data-agent-suggestion-scroller="true"
-        className="flex w-full min-w-0 snap-x snap-proximity gap-1 overflow-x-auto overscroll-x-contain px-0.5 py-px [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        data-overflow-start={overflow.start || undefined}
+        data-overflow-end={overflow.end || undefined}
+        className="w-full min-w-0 snap-x snap-proximity scroll-px-6 overflow-x-auto overscroll-x-contain px-0.5 py-px [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       >
-        {suggestions.map((input, index) => {
-          const suggestion = normalizeAgentSuggestion(input, index);
-          return (
+        <div
+          ref={trackRef}
+          data-agent-suggestion-track="true"
+          className="flex w-(--agent-suggestion-track-width) min-w-full flex-wrap gap-1"
+          onFocus={revealKeyboardFocusedChip}
+        >
+          {items.map((suggestion) => (
             <Button
               key={suggestion.id}
               type="button"
@@ -78,8 +183,8 @@ export function AgentSuggestionBar({
                   : suggestion.label}
               </span>
             </Button>
-          );
-        })}
+          ))}
+        </div>
       </div>
     </section>
   );

package/src/wgsl-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="@webgpu/types" />
+
+declare module "*.wgsl?raw" {
+  const source: string;
+  export default source;
+}