@stigmer/react 3.4.1 → 3.5.0

package/sidebar/chrome.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+/** Props shared by both sidebar variants' outer chrome. */
+export interface SidebarChromeProps {
+    /** Accessible name for the `<nav>` landmark. */
+    readonly ariaLabel: string;
+    /**
+     * Whether the sidebar is currently expanded, reflected as
+     * `aria-expanded` on the collapse toggle. @default true
+     */
+    readonly isOpen?: boolean;
+    /**
+     * Called when the collapse toggle is pressed. The sidebar renders the
+     * toggle either way (it is part of the depicted chrome); hosts that
+     * cannot collapse (fixed embeds) simply omit the handler.
+     */
+    readonly onCollapse?: () => void;
+    /** Passed through to {@link OrgSwitcher}. */
+    readonly onOrgChanged?: (org: Organization) => void;
+    /**
+     * Footer content — typically the host app's `UserMenu` wrapper, which
+     * bridges auth, theming, and routing. A slot rather than a built-in
+     * because every host wires those systems differently (DD-004).
+     */
+    readonly footer: ReactNode;
+    readonly children: ReactNode;
+}
+/**
+ * Outer sidebar frame: `<nav>` container, top row, content, footer band.
+ *
+ * The `id="sidebar"` / `aria-controls` pairing matches the console's DOM
+ * contract (the app shell's floating "Open sidebar" button targets it);
+ * only one sidebar renders at a time, so the id cannot collide.
+ */
+export declare function SidebarChrome({ ariaLabel, isOpen, onCollapse, onOrgChanged, footer, children, }: SidebarChromeProps): import("react/jsx-runtime").JSX.Element;
+/** Hairline separator between sidebar sections. */
+export declare function SidebarSeparator(): import("react/jsx-runtime").JSX.Element;
+/**
+ * The one nav-row class recipe both sidebars share: 14px medium labels,
+ * 16px icons (sized by callers), 8px/6px padding, rounded row highlight.
+ *
+ * `muted` renders the resting label in the muted sidebar tone — used by
+ * "Back to Sessions", which is an exit, not a destination.
+ */
+export declare function navRowClassName(active: boolean, { muted }?: {
+    muted?: boolean;
+}): string;
+//# sourceMappingURL=chrome.d.ts.map

package/sidebar/chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../src/sidebar/chrome.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2DAA2D,CAAC;AAc9F,2DAA2D;AAC3D,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,MAAa,EACb,UAAU,EACV,YAAY,EACZ,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,2CAsCpB;AAED,mDAAmD;AACnD,wBAAgB,gBAAgB,4CAM/B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,EAAE,KAAa,EAAE,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GAC1C,MAAM,CAUR"}

package/sidebar/chrome.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeft } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { OrgSwitcher } from "../organization/OrgSwitcher.js";
+/**
+ * Outer sidebar frame: `<nav>` container, top row, content, footer band.
+ *
+ * The `id="sidebar"` / `aria-controls` pairing matches the console's DOM
+ * contract (the app shell's floating "Open sidebar" button targets it);
+ * only one sidebar renders at a time, so the id cannot collide.
+ */
+export function SidebarChrome({ ariaLabel, isOpen = true, onCollapse, onOrgChanged, footer, children, }) {
+    return (_jsxs("nav", { id: "sidebar", "aria-label": ariaLabel, className: "bg-sidebar text-sidebar-foreground flex h-full flex-col", children: [_jsxs("div", { className: "flex flex-none items-center gap-1 px-2 py-2", children: [_jsx("button", { type: "button", onClick: onCollapse, "aria-expanded": isOpen, "aria-controls": "sidebar", "aria-label": "Collapse sidebar", className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded-md", "text-sidebar-foreground transition-colors motion-reduce:transition-none", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground", "focus-visible:ring-sidebar-ring focus-visible:ring-2 focus-visible:outline-none"), children: _jsx(PanelLeft, { className: "size-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(OrgSwitcher, { onOrgChanged: onOrgChanged }) })] }), children, _jsx("div", { className: "border-sidebar-border flex-none border-t px-3 py-2", children: footer })] }));
+}
+/** Hairline separator between sidebar sections. */
+export function SidebarSeparator() {
+    return (_jsx("div", { className: "px-3 py-1", children: _jsx("div", { className: "bg-sidebar-border h-px" }) }));
+}
+/**
+ * The one nav-row class recipe both sidebars share: 14px medium labels,
+ * 16px icons (sized by callers), 8px/6px padding, rounded row highlight.
+ *
+ * `muted` renders the resting label in the muted sidebar tone — used by
+ * "Back to Sessions", which is an exit, not a destination.
+ */
+export function navRowClassName(active, { muted = false } = {}) {
+    return cn("flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors", active
+        ? "bg-sidebar-accent text-sidebar-accent-foreground"
+        : cn(muted ? "text-sidebar-muted-foreground" : "text-sidebar-foreground", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"));
+}
+//# sourceMappingURL=chrome.js.map

package/sidebar/chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome.js","sourceRoot":"","sources":["../../src/sidebar/chrome.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAuC7D;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,MAAM,GAAG,IAAI,EACb,UAAU,EACV,YAAY,EACZ,MAAM,EACN,QAAQ,GACW;IACnB,OAAO,CACL,eACE,EAAE,EAAC,SAAS,gBACA,SAAS,EACrB,SAAS,EAAC,yDAAyD,aAGnE,eAAK,SAAS,EAAC,6CAA6C,aAC1D,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,mBACJ,MAAM,mBACP,SAAS,gBACZ,kBAAkB,EAC7B,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,yEAAyE,EACzE,8DAA8D,EAC9D,8EAA8E,EAC9E,iFAAiF,CAClF,YAED,KAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,GAAG,GACzB,EACT,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,GACvC,IACF,EAEL,QAAQ,EAGT,cAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,GACH,IACF,CACP,CAAC;AACJ,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,gBAAgB;IAC9B,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACxB,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,CACP,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAC7B,MAAe,EACf,EAAE,KAAK,GAAG,KAAK,KAA0B,EAAE;IAE3C,OAAO,EAAE,CACP,sFAAsF,EACtF,MAAM;QACJ,CAAC,CAAC,kDAAkD;QACpD,CAAC,CAAC,EAAE,CACA,KAAK,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,yBAAyB,EACnE,8DAA8D,CAC/D,CACN,CAAC;AACJ,CAAC"}

package/sidebar/index.d.ts

@@ -0,0 +1,6 @@
+export { WorkspaceSidebar } from "./WorkspaceSidebar.js";
+export type { WorkspaceSidebarProps, WorkspaceSidebarActivity, WorkspaceNavId, } from "./WorkspaceSidebar.js";
+export { SettingsSidebar } from "./SettingsSidebar.js";
+export type { SettingsSidebarProps } from "./SettingsSidebar.js";
+export type { SidebarLinkRenderProps, RenderSidebarLink } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sidebar/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,cAAc,GACf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/sidebar/index.js

@@ -0,0 +1,9 @@
+// Sidebar — the console's navigation chrome as shared SDK components.
+//
+// One source of truth for the sidebar the web console, desktop app, and
+// documentation tours all render (stigmer/stigmer#317): hosts inject their
+// router via `renderLink`, their data via props, and their user menu via
+// the `footer` slot.
+export { WorkspaceSidebar } from "./WorkspaceSidebar.js";
+export { SettingsSidebar } from "./SettingsSidebar.js";
+//# sourceMappingURL=index.js.map

package/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/sidebar/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,yEAAyE;AACzE,qBAAqB;AAErB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/sidebar/types.d.ts

@@ -0,0 +1,54 @@
+import type { ReactElement, ReactNode } from "react";
+import type { RecentActivityEntry } from "../activity/types.js";
+/**
+ * Everything a sidebar hands to {@link RenderSidebarLink} to draw one
+ * interactive row.
+ *
+ * The sidebar owns the row's look (`className`, `children`) and state
+ * (`active`, `aria-current`); the consumer owns only the interactive
+ * element wrapping them. That split is what keeps one component serving
+ * three very different hosts: the web console returns `next/link`, the
+ * desktop app returns a `react-router` link, and documentation embeds
+ * return inert rows decorated with capture markers.
+ */
+export interface SidebarLinkRenderProps {
+    /**
+     * Stable row identifier, for consumers that vary behavior per row:
+     * `"new-session"` / `"dashboard"` / `"library"` in the workspace
+     * sidebar, `"back-to-sessions"` or the settings route basename (e.g.
+     * `"api-keys"`) in the settings sidebar, and the entry id for recent
+     * activity rows.
+     */
+    readonly id: string;
+    /** Console route this row targets (e.g. `/library`, `/sessions/<id>`). */
+    readonly href: string;
+    /** Whether the row is the current location. */
+    readonly active: boolean;
+    /**
+     * Fully-styled row classes computed by the sidebar. Apply verbatim —
+     * the row's geometry and type scale are the product surface tours and
+     * embeds depict, so consumers must not restyle them.
+     */
+    readonly className: string;
+    /** `"page"` when active, for assistive tech. Spread onto the element. */
+    readonly "aria-current": "page" | undefined;
+    /** Row content (icon, label, timestamps). Render inside the element. */
+    readonly children: ReactNode;
+    /**
+     * The recent-activity entry behind this row. Present only for recents
+     * rows in the workspace sidebar — consumers use it to pick the right
+     * navigation flow (session viewer vs. execution viewer) without
+     * parsing `href`.
+     */
+    readonly entry?: RecentActivityEntry;
+}
+/**
+ * Renders one sidebar row as the consumer's interactive element.
+ *
+ * Must return a single element that spreads unknown props onto its
+ * underlying DOM node (all DOM elements, `next/link`, and `react-router`
+ * links qualify): the sidebar composes tooltip triggers around recents
+ * rows by cloning the returned element with merged event handlers.
+ */
+export type RenderSidebarLink = (props: SidebarLinkRenderProps) => ReactElement;
+//# sourceMappingURL=types.d.ts.map

package/sidebar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/sidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC"}

package/sidebar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/sidebar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/sidebar/types.ts"],"names":[],"mappings":""}

package/src/agent/AgentDetailView.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type {
+  DatastoreUsage,
   McpServerUsage,
   SubAgent,
 } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/spec_pb";
@@ -14,7 +15,9 @@ import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/
 import { useAgent } from "./useAgent.js";
 import { useUpdateAgent } from "./useUpdateAgent.js";
 import { agentToInput } from "./internal/agentToInput.js";
+import { toError } from "../internal/toError.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
+import { DatastoreIcon } from "../datastore/DatastoreDetailView.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
 import { useManageAccess } from "../access/useManageAccess.js";
 import { AgentShareList } from "../sharing/AgentShareList.js";
@@ -58,6 +61,13 @@ export interface AgentDetailViewProps {
    * Provides `org` and `slug` of the referenced skill.
    */
   readonly onSkillClick?: (ref: { org: string; slug: string }) => void;
+  /**
+   * Called when a datastore reference is clicked.
+   * Provides `org` and `slug` of the referenced datastore so the
+   * consumer can wire navigation. When the reference has no explicit
+   * org, the agent's own org is used as fallback.
+   */
+  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
   /**
    * Called once when the agent resource has been fetched successfully.
    * Provides the resource display name for use cases like breadcrumbs,
@@ -176,9 +186,9 @@ export interface AgentDetailViewProps {
  * Fetches the agent via {@link useAgent} internally and renders its
  * full configuration inside a {@link ResourceDetailShell}: a
  * standardized header with action bar, followed by structured content
- * sections (instructions, MCP server usages, skills, sub-agents, and
- * environment variables). Sections with no data are omitted entirely
- * — reducing visual noise per Nielsen heuristic #8.
+ * sections (instructions, MCP server usages, skills, datastores,
+ * sub-agents, and environment variables). Sections with no data are
+ * omitted entirely — reducing visual noise per Nielsen heuristic #8.
  *
  * The action bar transforms this from a read-only view into an
  * operational hub. Actions are provided by the consumer via
@@ -215,6 +225,7 @@ export function AgentDetailView({
   slug,
   onMcpServerClick,
   onSkillClick,
+  onDatastoreClick,
   onResourceLoad,
   primaryAction,
   actions,
@@ -236,12 +247,22 @@ export function AgentDetailView({
   const { agent, isLoading, error, refetch } = useAgent(org, slug);
   const { update, isUpdating } = useUpdateAgent();
 
+  // Last failed inline save, attributed to the field that was edited so
+  // only that section shows the message. The backend's message is the
+  // UX (DD-006): e.g. the datastore exposure guard refuses public +
+  // datastore_usages with an actionable FAILED_PRECONDITION message.
+  const [saveError, setSaveError] = useState<{
+    field: string;
+    message: string;
+  } | null>(null);
+
   const saveField = useCallback(
     async <K extends keyof import("@stigmer/sdk").AgentInput>(
       field: K,
       value: import("@stigmer/sdk").AgentInput[K],
     ): Promise<boolean> => {
       if (!agent) return false;
+      setSaveError(null);
       const input = agentToInput(agent);
       (input as unknown as Record<string, unknown>)[field] = value;
       try {
@@ -249,13 +270,16 @@ export function AgentDetailView({
         onResourceUpdated?.(updated);
         refetch();
         return true;
-      } catch {
+      } catch (err) {
+        setSaveError({ field, message: toError(err).message });
         return false;
       }
     },
     [agent, update, onResourceUpdated, refetch],
   );
 
+  const clearSaveError = useCallback(() => setSaveError(null), []);
+
   const { tree, isEmpty: noDeps } = useDependencyGraph({
     agentName: agent?.metadata?.name || agent?.metadata?.slug || slug,
     agentOrg: agent?.metadata?.org || org,
@@ -290,9 +314,11 @@ export function AgentDetailView({
         onMcpServerClick?.(node.ref);
       } else if (node.kind === "skill") {
         onSkillClick?.(node.ref);
+      } else if (node.kind === "datastore") {
+        onDatastoreClick?.(node.ref);
       }
     },
-    [onMcpServerClick, onSkillClick],
+    [onMcpServerClick, onSkillClick, onDatastoreClick],
   );
 
   const onResourceLoadRef = useRef(onResourceLoad);
@@ -430,9 +456,12 @@ export function AgentDetailView({
         description={spec?.description}
         onMcpServerClick={onMcpServerClick}
         onSkillClick={onSkillClick}
+        onDatastoreClick={onDatastoreClick}
         editable={editable}
         isSaving={isUpdating}
         saveField={saveField}
+        saveError={saveError}
+        clearSaveError={clearSaveError}
       />
     );
   }
@@ -467,22 +496,33 @@ function AgentOverview({
   description,
   onMcpServerClick,
   onSkillClick,
+  onDatastoreClick,
   editable,
   isSaving,
   saveField,
+  saveError,
+  clearSaveError,
 }: {
   readonly spec: NonNullable<ReturnType<typeof useAgent>["agent"]>["spec"];
   readonly agentOrg: string;
   readonly description?: string;
   readonly onMcpServerClick?: (ref: { org: string; slug: string }) => void;
   readonly onSkillClick?: (ref: { org: string; slug: string }) => void;
+  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
   readonly editable?: boolean;
   readonly isSaving?: boolean;
   readonly saveField?: <K extends keyof import("@stigmer/sdk").AgentInput>(
     field: K,
     value: import("@stigmer/sdk").AgentInput[K],
   ) => Promise<boolean>;
+  readonly saveError?: { field: string; message: string } | null;
+  readonly clearSaveError?: () => void;
 }) {
+  // The failed save's message, shown only under the section that owns
+  // the field — a rejection of a datastore edit must not appear under
+  // the skills editor.
+  const errorFor = (field: keyof import("@stigmer/sdk").AgentInput) =>
+    saveError?.field === field ? saveError.message : undefined;
   const handleInstructionsSave = useCallback(
     async (v: string) => saveField?.("instructions", v || undefined) ?? false,
     [saveField],
@@ -508,6 +548,15 @@ function AgentOverview({
     [saveField],
   );
 
+  const handleDatastoresSave = useCallback(
+    async (refs: ResourceRefRow[]) =>
+      saveField?.(
+        "datastoreUsages",
+        refs.map((r) => ({ datastoreRef: { org: r.org, slug: r.slug } })),
+      ) ?? false,
+    [saveField],
+  );
+
   const handleEnvSave = useCallback(
     async (rows: KeyValueRow[]) => {
       const env: Record<string, { isSecret?: boolean; description?: string; optional?: boolean }> = {};
@@ -551,6 +600,19 @@ function AgentOverview({
     [spec?.skillRefs, agentOrg],
   );
 
+  const datastoreRefRows: ResourceRefRow[] = useMemo(
+    () =>
+      (spec?.datastoreUsages ?? []).map((usage) => ({
+        org: usage.datastoreRef?.org || agentOrg,
+        slug: usage.datastoreRef?.slug ?? "",
+        label:
+          usage.datastoreRef?.org && usage.datastoreRef.org !== agentOrg
+            ? `${usage.datastoreRef.org}/${usage.datastoreRef.slug}`
+            : usage.datastoreRef?.slug ?? "",
+      })),
+    [spec?.datastoreUsages, agentOrg],
+  );
+
   const envRows: KeyValueRow[] = useMemo(
     () =>
       Object.entries(spec?.env ?? {})
@@ -569,13 +631,46 @@ function AgentOverview({
   const showInstructions = editable || !!spec?.instructions;
   const showMcpServers = editable || (spec && spec.mcpServerUsages.length > 0);
   const showSkills = editable || (spec && spec.skillRefs.length > 0);
+  const showDatastores = editable || (spec && spec.datastoreUsages.length > 0);
   const showSubAgents = editable || (spec && spec.subAgents.length > 0);
   const showEnv = editable || (spec?.env && Object.keys(spec.env).length > 0);
 
   const [mcpEditing, setMcpEditing] = useState(false);
   const [skillsEditing, setSkillsEditing] = useState(false);
+  const [datastoresEditing, setDatastoresEditing] = useState(false);
   const [envEditing, setEnvEditing] = useState(false);
 
+  // Entering edit mode discards the previous attempt's error — the
+  // message describes a stale draft, not the one being composed.
+  const handleMcpEditingChange = useCallback(
+    (editing: boolean) => {
+      if (editing) clearSaveError?.();
+      setMcpEditing(editing);
+    },
+    [clearSaveError],
+  );
+  const handleSkillsEditingChange = useCallback(
+    (editing: boolean) => {
+      if (editing) clearSaveError?.();
+      setSkillsEditing(editing);
+    },
+    [clearSaveError],
+  );
+  const handleDatastoresEditingChange = useCallback(
+    (editing: boolean) => {
+      if (editing) clearSaveError?.();
+      setDatastoresEditing(editing);
+    },
+    [clearSaveError],
+  );
+  const handleEnvEditingChange = useCallback(
+    (editing: boolean) => {
+      if (editing) clearSaveError?.();
+      setEnvEditing(editing);
+    },
+    [clearSaveError],
+  );
+
   return (
     <div className="flex flex-col gap-6">
       {showDescription && (
@@ -586,6 +681,7 @@ function AgentOverview({
                 value={spec?.description || ""}
                 onSave={(v) => saveField?.("description", v || undefined) ?? Promise.resolve(false)}
                 isSaving={isSaving}
+                error={errorFor("description")}
                 placeholder="Add a description"
                 minRows={2}
               />
@@ -608,6 +704,7 @@ function AgentOverview({
                 value={spec?.instructions ?? ""}
                 onSave={handleInstructionsSave}
                 isSaving={isSaving}
+                error={errorFor("instructions")}
                 placeholder="Add instructions for the agent"
                 minRows={4}
               />
@@ -619,14 +716,15 @@ function AgentOverview({
       )}
 
       {showMcpServers && (
-        <Section title="MCP Servers" count={spec?.mcpServerUsages.length} onEdit={editable ? () => setMcpEditing((v) => !v) : undefined}>
+        <Section title="MCP Servers" count={spec?.mcpServerUsages.length} onEdit={editable ? () => handleMcpEditingChange(!mcpEditing) : undefined}>
           {editable ? (
             <InlineEditResourceList
               value={mcpRefRows}
               onSave={handleMcpServersSave}
               isSaving={isSaving}
+              error={errorFor("mcpServerUsages")}
               editing={mcpEditing}
-              onEditingChange={setMcpEditing}
+              onEditingChange={handleMcpEditingChange}
               onItemClick={onMcpServerClick ? (ref) => onMcpServerClick({ org: ref.org, slug: ref.slug }) : undefined}
               itemIcon={<McpServerIcon className="size-4" />}
               resourceLabel="MCP server"
@@ -643,14 +741,15 @@ function AgentOverview({
       )}
 
       {showSkills && (
-        <Section title="Skills" count={spec?.skillRefs.length} onEdit={editable ? () => setSkillsEditing((v) => !v) : undefined}>
+        <Section title="Skills" count={spec?.skillRefs.length} onEdit={editable ? () => handleSkillsEditingChange(!skillsEditing) : undefined}>
           {editable ? (
             <InlineEditResourceList
               value={skillRefRows}
               onSave={handleSkillsSave}
               isSaving={isSaving}
+              error={errorFor("skillRefs")}
               editing={skillsEditing}
-              onEditingChange={setSkillsEditing}
+              onEditingChange={handleSkillsEditingChange}
               onItemClick={onSkillClick ? (ref) => onSkillClick({ org: ref.org, slug: ref.slug }) : undefined}
               itemIcon={<SkillIcon className="size-4" />}
               resourceLabel="skill"
@@ -666,24 +765,51 @@ function AgentOverview({
         </Section>
       )}
 
+      {showDatastores && (
+        <Section title="Datastores" count={spec?.datastoreUsages.length} onEdit={editable ? () => handleDatastoresEditingChange(!datastoresEditing) : undefined}>
+          {editable ? (
+            <InlineEditResourceList
+              value={datastoreRefRows}
+              onSave={handleDatastoresSave}
+              isSaving={isSaving}
+              error={errorFor("datastoreUsages")}
+              editing={datastoresEditing}
+              onEditingChange={handleDatastoresEditingChange}
+              onItemClick={onDatastoreClick ? (ref) => onDatastoreClick({ org: ref.org, slug: ref.slug }) : undefined}
+              itemIcon={<DatastoreIcon className="size-4" />}
+              resourceLabel="datastore"
+              defaultOrg={agentOrg}
+            />
+          ) : (
+            <DatastoresContent
+              usages={spec?.datastoreUsages ?? []}
+              defaultOrg={agentOrg}
+              onDatastoreClick={onDatastoreClick}
+            />
+          )}
+        </Section>
+      )}
+
       {showSubAgents && (
         <SubAgentsSection
           subAgents={spec?.subAgents ?? []}
           editable={editable}
           isSaving={isSaving}
+          error={errorFor("subAgents")}
           onSave={(subs) => saveField?.("subAgents", subs.length > 0 ? subs : undefined) ?? Promise.resolve(false)}
         />
       )}
 
       {showEnv && (
-        <Section title="Environment Variables" count={Object.keys(spec?.env ?? {}).length} onEdit={editable ? () => setEnvEditing((v) => !v) : undefined}>
+        <Section title="Environment Variables" count={Object.keys(spec?.env ?? {}).length} onEdit={editable ? () => handleEnvEditingChange(!envEditing) : undefined}>
           {editable ? (
             <InlineEditKeyValue
               value={envRows}
               onSave={handleEnvSave}
               isSaving={isSaving}
+              error={errorFor("env")}
               editing={envEditing}
-              onEditingChange={setEnvEditing}
+              onEditingChange={handleEnvEditingChange}
               showSecretToggle
               showOptionalToggle
               showDescription
@@ -860,6 +986,59 @@ function SkillsContent({
   );
 }
 
+function DatastoresContent({
+  usages,
+  defaultOrg,
+  onDatastoreClick,
+}: {
+  readonly usages: readonly DatastoreUsage[];
+  readonly defaultOrg: string;
+  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
+}) {
+  return (
+    <div className="flex flex-col">
+      {usages.map((usage, index) => {
+        const ref = usage.datastoreRef;
+        if (!ref) return null;
+
+        const refOrg = ref.org || defaultOrg;
+        const label =
+          ref.org && ref.org !== defaultOrg
+            ? `${ref.org}/${ref.slug}`
+            : ref.slug;
+
+        const row = (
+          <div className="flex items-center gap-3">
+            <DatastoreIcon className="size-4 shrink-0 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">
+              {label}
+            </span>
+          </div>
+        );
+
+        return onDatastoreClick ? (
+          <button
+            key={ref.slug || index}
+            type="button"
+            onClick={() => onDatastoreClick({ org: refOrg, slug: ref.slug })}
+            className={cn(
+              "w-full rounded-md px-3 py-2 text-left transition-colors",
+              "hover:bg-accent-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            )}
+          >
+            {row}
+          </button>
+        ) : (
+          <div key={ref.slug || index} className="px-3 py-2">
+            {row}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 interface SubAgentDraft {
   name: string;
   description: string;
@@ -870,11 +1049,13 @@ function SubAgentsSection({
   subAgents,
   editable,
   isSaving,
+  error,
   onSave,
 }: {
   readonly subAgents: readonly SubAgent[];
   readonly editable?: boolean;
   readonly isSaving?: boolean;
+  readonly error?: string | null;
   readonly onSave?: (subs: import("@stigmer/sdk").SubAgentInput[]) => Promise<boolean>;
 }) {
   const [expanded, setExpanded] = useState<Set<number>>(new Set());
@@ -1025,6 +1206,12 @@ function SubAgentsSection({
           </div>
         )}
 
+        {error && (
+          <p className="border-t border-border px-3 py-2 text-xs text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+
         {editable && showAddForm && (
           <div className="border-t border-border p-3 space-y-2">
             <input