@agent-native/toolkit 0.15.1 → 0.16.0

package/dist/sharing/index.js

@@ -1,3 +1,3 @@
-export { ShareAgentsSection, ShareCopyRow, ShareTrigger, } from "./SharePrimitives.js";
+export { ShareAgentsSection, ShareCopyRow, ShareDisclosureSection, SharePeopleSection, ShareTrigger, } from "./SharePrimitives.js";
 export { VisibilityBadge, } from "./VisibilityBadge.js";
 //# sourceMappingURL=index.js.map

package/dist/sharing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/sharing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAElB,YAAY,EAEZ,YAAY,GAEb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,eAAe,GAEhB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/sharing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAElB,YAAY,EAEZ,sBAAsB,EAEtB,kBAAkB,EAElB,YAAY,GAEb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,eAAe,GAEhB,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -75,6 +75,20 @@
       "import": "./dist/dashboard/*.js",
       "default": "./dist/dashboard/*.js"
     },
+    "./data-grid": {
+      "types": "./dist/data-grid/index.d.ts",
+      "browser": "./dist/data-grid/index.js",
+      "development": "./dist/data-grid/index.js",
+      "import": "./dist/data-grid/index.js",
+      "default": "./dist/data-grid/index.js"
+    },
+    "./data-grid/*": {
+      "types": "./dist/data-grid/*.d.ts",
+      "browser": "./dist/data-grid/*.js",
+      "development": "./dist/data-grid/*.js",
+      "import": "./dist/data-grid/*.js",
+      "default": "./dist/data-grid/*.js"
+    },
     "./chat-history": {
       "types": "./dist/chat-history/index.d.ts",
       "browser": "./dist/chat-history/index.js",

package/src/composer/PromptComposer.tsx

@@ -47,6 +47,7 @@ import {
 import {
   DEFAULT_VOICE_DICTATION_ENABLED,
   TiptapComposer,
+  type ComposerAgentOption,
   type ComposerSubmitIntent,
   type TiptapComposerHandle,
   type TiptapComposerSubmitOptions,
@@ -149,6 +150,12 @@ export interface PromptComposerProps {
   selectedEffort?: ReasoningEffort;
   onModelChange?: (model: string, engine: string) => void;
   onEffortChange?: (effort: ReasoningEffort) => void;
+  /** Local or hosted agent runtimes shown above the model list. */
+  availableAgents?: ComposerAgentOption[];
+  /** Selected agent runtime identifier. */
+  selectedAgent?: string;
+  /** Callback when the user picks an agent runtime. */
+  onAgentChange?: (agent: string) => void;
   /**
    * Enable server-backed model/provider status checks. Defaults off when the
    * host supplies model state and callbacks, otherwise on.
@@ -515,6 +522,9 @@ function PromptComposerInner({
   selectedEffort,
   onModelChange,
   onEffortChange,
+  availableAgents,
+  selectedAgent,
+  onAgentChange,
   modelStatusChecksEnabled,
   onTextChange,
   onConnectProvider,
@@ -689,10 +699,13 @@ function PromptComposerInner({
           selectedModel={composerModel}
           selectedEffort={composerEffort}
           availableModels={composerModelGroups}
+          availableAgents={availableAgents}
+          selectedAgent={selectedAgent}
           showAutoModelOption={showAutoModelOption}
           modelListLoading={composerModelListLoading}
           onModelChange={handleModelChange}
           onEffortChange={handleEffortChange}
+          onAgentChange={onAgentChange}
           providerConnectStatusEnabled={resolvedModelStatusChecksEnabled}
           onConnectProvider={onConnectProvider}
           onConnectLocalRuntime={onConnectLocalRuntime}

package/src/composer/TiptapComposer.tsx

@@ -652,6 +652,19 @@ function ComposerModeChip({
 
 type ExecMode = "build" | "plan";
 
+export interface ComposerAgentOption {
+  /** Stable host-defined identifier for the agent runtime. */
+  id: string;
+  /** Human-readable runtime name shown in the picker. */
+  label: string;
+  /** Optional short detail shown below the runtime name. */
+  description?: string;
+  /** Whether this runtime can be selected right now. */
+  configured?: boolean;
+  /** Optional status text such as "Installed" or "Sign in". */
+  statusLabel?: string;
+}
+
 export interface TiptapComposerProps {
   placeholder?: string;
   disabled?: boolean;
@@ -744,6 +757,12 @@ export interface TiptapComposerProps {
   onModelChange?: (model: string, engine: string) => void;
   /** Callback when user picks an effort */
   onEffortChange?: (effort: ReasoningEffort) => void;
+  /** Local or hosted agent runtimes shown above the model list. */
+  availableAgents?: ComposerAgentOption[];
+  /** Selected agent runtime identifier. Defaults to the built-in agent. */
+  selectedAgent?: string;
+  /** Callback when the user picks an agent runtime. */
+  onAgentChange?: (agent: string) => void;
   /**
    * Disable Builder/provider status polling for hosts that supply provider
    * state through another channel, such as Electron IPC.
@@ -1225,10 +1244,13 @@ function ModelSelector({
   model,
   effort,
   engines,
+  agents,
+  selectedAgent,
   showAutoModelOption = true,
   modelListLoading = false,
   onChange,
   onEffortChange,
+  onAgentChange,
   providerConnectStatusEnabled = true,
   onConnectProvider,
   onConnectLocalRuntime,
@@ -1236,6 +1258,8 @@ function ModelSelector({
 }: {
   model: string;
   effort?: ReasoningEffort;
+  agents?: ComposerAgentOption[];
+  selectedAgent?: string;
   engines: Array<{
     engine: string;
     label: string;
@@ -1248,6 +1272,7 @@ function ModelSelector({
   modelListLoading?: boolean;
   onChange: (model: string, engine: string) => void;
   onEffortChange?: (effort: ReasoningEffort) => void;
+  onAgentChange?: (agent: string) => void;
   providerConnectStatusEnabled?: boolean;
   onConnectProvider?: () => void;
   onConnectLocalRuntime?: (engine: string) => void;
@@ -1286,6 +1311,10 @@ function ModelSelector({
       ),
     [reasoning?.label, t],
   );
+  const selectedAgentOption = agents?.find(
+    (agent) => agent.id === (selectedAgent ?? "default"),
+  );
+  const selectedAgentLabel = selectedAgentOption?.label ?? "Default";
 
   // Collapse non-selected families by default. The family containing the
   // currently-selected model stays expanded so the user sees their pick at
@@ -1391,11 +1420,17 @@ function ModelSelector({
                   defaultValue: "Reasoning",
                 })}: ${effortLabel(selectedEffort)}`
               : ""
+          }${
+            selectedAgentOption && selectedAgentOption.id !== "default"
+              ? `. Agent: ${selectedAgentLabel}`
+              : ""
           }`}
           className="agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
         >
           <span className="min-w-0 truncate">
-            {compactComposerModelName(model, t)}
+            {selectedAgentOption && selectedAgentOption.id !== "default"
+              ? selectedAgentLabel
+              : compactComposerModelName(model, t)}
           </span>
           {effortOptions.length > 0 && (
             <span className="agent-composer-model-effort min-w-0 shrink truncate text-muted-foreground/70">
@@ -1414,6 +1449,71 @@ function ModelSelector({
         className="z-[260] box-border w-72 overflow-y-auto rounded-lg border-border p-0 py-1 shadow-lg"
         style={MODEL_SELECTOR_POPOVER_STYLE}
       >
+        {agents && agents.length > 0 && (
+          <>
+            <div className="px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              Agents
+            </div>
+            {agents.map((agent) => {
+              const isSelected = agent.id === (selectedAgent ?? "default");
+              const isConfigured = agent.configured !== false;
+              const canConnect =
+                !isConfigured && Boolean(onConnectLocalRuntime);
+              const statusLabel =
+                agent.statusLabel ??
+                (!isConfigured ? "Unavailable" : undefined);
+              return (
+                <div
+                  key={agent.id}
+                  className="flex items-center hover:bg-accent/30"
+                >
+                  <button
+                    type="button"
+                    disabled={!isConfigured || !onAgentChange}
+                    aria-current={isSelected ? "true" : undefined}
+                    onClick={() => {
+                      if (!isConfigured) return;
+                      onAgentChange?.(agent.id);
+                      setOpen(false);
+                    }}
+                    className={`flex min-w-0 flex-1 items-center gap-3 px-3 py-1.5 text-start ${
+                      isConfigured
+                        ? "hover:bg-accent/50"
+                        : "cursor-default opacity-50"
+                    }`}
+                  >
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-[13px] text-foreground">
+                        {agent.label}
+                      </span>
+                      {agent.description && (
+                        <span className="block truncate text-[11px] text-muted-foreground">
+                          {agent.description}
+                        </span>
+                      )}
+                    </span>
+                    {isSelected && isConfigured && (
+                      <IconCheck className="h-3.5 w-3.5 shrink-0 text-primary" />
+                    )}
+                  </button>
+                  {!isConfigured && statusLabel && (
+                    <button
+                      type="button"
+                      disabled={!canConnect}
+                      className="ms-auto max-w-[6rem] shrink-0 truncate px-3 py-1.5 text-end text-[10px] text-muted-foreground/70 hover:text-foreground disabled:cursor-default"
+                      onClick={() => {
+                        if (canConnect) connectLocalRuntime(agent.id);
+                      }}
+                    >
+                      {statusLabel}
+                    </button>
+                  )}
+                </div>
+              );
+            })}
+            <div className="my-1 border-t border-border" />
+          </>
+        )}
         {showBuilderCta && (
           <>
             <button
@@ -1771,6 +1871,9 @@ export function TiptapComposer({
   modelListLoading,
   onModelChange,
   onEffortChange,
+  availableAgents,
+  selectedAgent,
+  onAgentChange,
   providerConnectStatusEnabled,
   onConnectProvider,
   onConnectLocalRuntime,
@@ -3276,10 +3379,13 @@ export function TiptapComposer({
             model={selectedModel}
             effort={selectedEffort}
             engines={availableModels}
+            agents={availableAgents}
+            selectedAgent={selectedAgent}
             showAutoModelOption={showAutoModelOption}
             modelListLoading={modelListLoading}
             onChange={onModelChange}
             onEffortChange={onEffortChange}
+            onAgentChange={onAgentChange}
             providerConnectStatusEnabled={providerConnectStatusEnabled}
             onConnectProvider={onConnectProvider}
             onConnectLocalRuntime={onConnectLocalRuntime}

package/src/data-grid/DataGrid.spec.tsx

@@ -0,0 +1,243 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  DataGrid,
+  dataGridColumnTemplate,
+  type DataGridColumn,
+} from "./index.js";
+
+interface Row {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const columns: readonly DataGridColumn<Row>[] = [
+  {
+    id: "name",
+    label: "Name",
+    width: 180,
+    getValue: (row) => row.name,
+    renderCell: ({ value }) => String(value ?? ""),
+  },
+  {
+    id: "status",
+    label: "Status",
+    width: 120,
+    getValue: (row) => row.status,
+    renderCell: ({ value }) => String(value ?? ""),
+    renderEditor: ({ value, onCommit }) => (
+      <input
+        aria-label="Status editor"
+        defaultValue={String(value ?? "")}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") onCommit(event.currentTarget.value);
+        }}
+      />
+    ),
+  },
+];
+
+const rows: readonly Row[] = [
+  { id: "row-1", name: "First", status: "Open" },
+  { id: "row-2", name: "Second", status: "Closed" },
+];
+
+describe("data-grid", () => {
+  it("builds a bounded template and includes the selection column only when requested", () => {
+    expect(dataGridColumnTemplate(columns, { name: 40 }, "none")).toBe(
+      "96px 120px",
+    );
+    expect(dataGridColumnTemplate(columns, { name: 220 }, "multiple")).toBe(
+      "40px 220px 120px",
+    );
+  });
+
+  describe("DataGrid", () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+      vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+      container = document.createElement("div");
+      document.body.appendChild(container);
+      root = createRoot(container);
+    });
+
+    afterEach(() => {
+      act(() => root.unmount());
+      container.remove();
+      vi.restoreAllMocks();
+      vi.unstubAllGlobals();
+    });
+
+    it("moves the active cell with arrows and commits an editor value", () => {
+      const onActiveCellChange = vi.fn();
+      const onCellCommit = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            onActiveCellChange={onActiveCellChange}
+            onCellCommit={onCellCommit}
+          />,
+        );
+      });
+
+      const firstNameCell = container.querySelector<HTMLElement>(
+        '[data-data-grid-row-id="row-1"][data-data-grid-column-id="name"]',
+      );
+      expect(firstNameCell?.getAttribute("tabindex")).toBe("0");
+
+      act(() => {
+        firstNameCell?.dispatchEvent(
+          new KeyboardEvent("keydown", { bubbles: true, key: "ArrowRight" }),
+        );
+      });
+      expect(onActiveCellChange).toHaveBeenCalledWith({
+        rowId: "row-1",
+        columnId: "status",
+        editing: false,
+      });
+
+      const statusCell = container.querySelector<HTMLElement>(
+        '[data-data-grid-row-id="row-1"][data-data-grid-column-id="status"]',
+      );
+      act(() => {
+        statusCell?.dispatchEvent(
+          new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }),
+        );
+      });
+      expect(
+        container.querySelector('input[aria-label="Status editor"]'),
+      ).not.toBeNull();
+
+      const input = container.querySelector<HTMLInputElement>(
+        'input[aria-label="Status editor"]',
+      );
+      expect(input).not.toBeNull();
+      if (input) {
+        input.value = "In progress";
+        act(() => {
+          input.dispatchEvent(
+            new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }),
+          );
+        });
+      }
+      expect(onCellCommit).toHaveBeenCalledWith({
+        row: rows[0],
+        rowIndex: 0,
+        column: columns[1],
+        previousValue: "Open",
+        value: "In progress",
+      });
+    });
+
+    it("supports controlled multi-row selection", () => {
+      const onSelectedRowIdsChange = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            selection="multiple"
+            onSelectedRowIdsChange={onSelectedRowIdsChange}
+          />,
+        );
+      });
+
+      const rowCheckbox = container.querySelector<HTMLInputElement>(
+        '[aria-label="Select row row-1"]',
+      );
+      act(() => rowCheckbox?.click());
+      expect(onSelectedRowIdsChange).toHaveBeenCalledTimes(1);
+      expect(Array.from(onSelectedRowIdsChange.mock.calls[0][0])).toEqual([
+        "row-1",
+      ]);
+    });
+
+    it("reports pointer-based column resizing through the app callback", () => {
+      const onColumnWidthsChange = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            onColumnWidthsChange={onColumnWidthsChange}
+          />,
+        );
+      });
+
+      const resizeHandle = container.querySelector<HTMLButtonElement>(
+        '[aria-label="Resize name column"]',
+      );
+      expect(resizeHandle).not.toBeNull();
+
+      act(() => {
+        resizeHandle?.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            bubbles: true,
+            button: 0,
+            clientX: 100,
+          }),
+        );
+        document.dispatchEvent(
+          new PointerEvent("pointermove", {
+            bubbles: true,
+            clientX: 180,
+          }),
+        );
+        document.dispatchEvent(
+          new PointerEvent("pointerup", { bubbles: true, clientX: 180 }),
+        );
+      });
+
+      expect(onColumnWidthsChange).toHaveBeenLastCalledWith({ name: 260 });
+    });
+
+    it("lets an app own the outer header and body while sharing the grid template", () => {
+      const renderHeader = vi.fn(({ gridTemplateColumns }) => (
+        <div data-testid="custom-header" style={{ gridTemplateColumns }} />
+      ));
+      const renderBody = vi.fn(({ gridTemplateColumns }) => (
+        <div data-testid="custom-body" style={{ gridTemplateColumns }} />
+      ));
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            renderHeader={renderHeader}
+            renderBody={renderBody}
+          />,
+        );
+      });
+
+      expect(
+        container.querySelector("[data-testid=custom-header]"),
+      ).not.toBeNull();
+      expect(
+        container.querySelector("[data-testid=custom-body]"),
+      ).not.toBeNull();
+      expect(renderHeader).toHaveBeenCalledWith(
+        expect.objectContaining({ gridTemplateColumns: "180px 120px" }),
+      );
+      expect(renderBody).toHaveBeenCalledWith(
+        expect.objectContaining({ rows, columns }),
+      );
+    });
+  });
+});