@stigmer/react 3.4.1 → 3.5.0

package/src/dependency-graph/useDependencyGraph.ts

@@ -41,10 +41,12 @@ export function useDependencyGraph({
     if (!spec) return { tree: null, isEmpty: true };
 
     const { mcpServerUsages, skillRefs, subAgents } = spec;
+    const datastoreUsages = spec.datastoreUsages ?? [];
 
     const hasDeps =
       mcpServerUsages.length > 0 ||
       skillRefs.length > 0 ||
+      datastoreUsages.length > 0 ||
       subAgents.length > 0;
 
     if (!hasDeps) return { tree: null, isEmpty: true };
@@ -92,6 +94,24 @@ export function useDependencyGraph({
       };
     });
 
+    const datastoreNodes: DependencyNode[] = datastoreUsages
+      .filter((u) => u.datastoreRef)
+      .map((usage) => {
+        nodeCount++;
+        const ref = usage.datastoreRef!;
+        return {
+          id: `datastore:${ref.slug}`,
+          kind: "datastore" as const,
+          label: ref.slug,
+          qualifiedLabel:
+            ref.org && ref.org !== agentOrg
+              ? `${ref.org}/${ref.slug}`
+              : undefined,
+          children: [],
+          ref: { org: ref.org || agentOrg, slug: ref.slug },
+        };
+      });
+
     const subAgentNodes: DependencyNode[] = subAgents.map((sa) => {
       nodeCount++;
 
@@ -143,11 +163,13 @@ export function useDependencyGraph({
       };
     });
 
+    // Child ordering mirrors the Overview sections: MCP servers,
+    // skills, datastores, then sub-agents.
     const root: DependencyNode = {
       id: `agent:${agentName}`,
       kind: "agent",
       label: agentName,
-      children: [...mcpNodes, ...skillNodes, ...subAgentNodes],
+      children: [...mcpNodes, ...skillNodes, ...datastoreNodes, ...subAgentNodes],
     };
 
     return {

package/src/index.ts

@@ -1050,6 +1050,19 @@ export { UsageSection } from "./settings/index.js";
 export { UserMenu } from "./user/index.js";
 export type { UserMenuProps } from "./user/index.js";
 
+// Sidebar — the console's navigation chrome (workspace + settings zones).
+// The web console, desktop app, and documentation tours all render these;
+// hosts inject routing via `renderLink` and identity via the footer slot.
+export { WorkspaceSidebar, SettingsSidebar } from "./sidebar/index.js";
+export type {
+  WorkspaceSidebarProps,
+  WorkspaceSidebarActivity,
+  WorkspaceNavId,
+  SettingsSidebarProps,
+  SidebarLinkRenderProps,
+  RenderSidebarLink,
+} from "./sidebar/index.js";
+
 // API Key — data hooks, behavior hooks, and styled components for API key lifecycle
 export {
   useApiKeyList,

package/src/internal/scroll-area.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@stigmer/theme";
+
+// ---------------------------------------------------------------------------
+// SDK-internal thin-scrollbar scroll container.
+//
+// NOT exported from @stigmer/react. Plain CSS (no primitive library): a thin
+// token-colored scrollbar over native overflow, so long lists (sidebar
+// recents) scroll like the console everywhere the SDK renders.
+// ---------------------------------------------------------------------------
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative overflow-auto",
+        "[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent]",
+        "[&::-webkit-scrollbar]:w-2.5",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        "[&::-webkit-scrollbar-thumb]:bg-border",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { ScrollArea };

package/src/internal/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "@stigmer/theme";
+import { useStigmerPortalContainer } from "../portal-container.js";
+
+// ---------------------------------------------------------------------------
+// SDK-internal styled Tooltip primitives over @base-ui/react.
+//
+// Like ./menu.tsx, these are NOT exported from @stigmer/react. They give SDK
+// styled components (WorkspaceSidebar recents rows, and any future hover
+// hints) one source of truth for tooltip styling, portaled into the Stigmer
+// theme scope so tokens resolve in embeds.
+//
+// Portaled content uses popover-* / main-area tokens per DD-005; the ring
+// follows the menu popup's established `ring-foreground/10` hairline.
+// ---------------------------------------------------------------------------
+
+function TooltipProvider(props: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider {...props} />;
+}
+
+function Tooltip(props: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root {...props} />;
+}
+
+function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger {...props} />;
+}
+
+function TooltipContent({
+  side = "right",
+  sideOffset = 8,
+  className,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "side" | "sideOffset">) {
+  const portalContainer = useStigmerPortalContainer();
+
+  return (
+    <TooltipPrimitive.Portal container={portalContainer}>
+      <TooltipPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <TooltipPrimitive.Popup
+          className={cn(
+            "bg-popover text-popover-foreground ring-foreground/10 z-50 max-w-64 rounded-lg px-2.5 py-1.5 text-sm shadow-md ring-1",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "duration-100",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent };

package/src/mcp-server/StdioSandboxNotice.tsx

@@ -11,9 +11,10 @@ type McpServerType = McpServerSpec["serverType"];
 /**
  * Whether an MCP server's transport is stdio while connected to Stigmer Cloud.
  *
- * stdio servers run as a subprocess inside an isolated Daytona sandbox in the
- * cloud — not on the user's own computer. This predicate identifies exactly
- * that combination so the connect UI can set accurate expectations. HTTP
+ * stdio is local-runner-only: cloud-hosted sessions refuse stdio servers at
+ * execution create, and the cloud connect flow refuses to spawn them. This
+ * predicate identifies exactly that combination so the UI can explain the
+ * policy and its remediation (run the session on a local runner). HTTP
  * servers and any transport in local mode return `false`.
  *
  * Pure and framework-free so it can be unit-tested without rendering.
@@ -34,15 +35,15 @@ export interface StdioSandboxNoticeProps {
 }
 
 /**
- * Sets accurate expectations for connecting an **stdio** MCP server from
- * **Stigmer Cloud**.
+ * Explains the local-runner-only policy for an **stdio** MCP server viewed
+ * from **Stigmer Cloud**.
  *
- * stdio servers are a supported cloud capability — Stigmer runs them in an
- * isolated Daytona sandbox. But that sandbox is not the user's own machine,
- * so a server that expects access to local files, applications, or a private
- * network (e.g. a filesystem server) won't behave as the user intends. This
- * notice explains that up front; Connect itself stays enabled because
- * self-contained servers work fine.
+ * stdio servers spawn subprocesses on the machine that runs the agent, so
+ * they run only on local runners — Stigmer-managed cloud compute refuses
+ * them (at execution create, and in the connect flow). The server remains
+ * fully usable on sessions that execute on a local runner (desktop app,
+ * `stigmer server`), where tools are discovered automatically at session
+ * start. This notice states that up front so the refusal never surprises.
  *
  * Self-gating: reads the deployment mode from context and renders `null`
  * unless the server is stdio and the backend is cloud. Callers render it
@@ -68,9 +69,10 @@ export function StdioSandboxNotice({
     >
       <SandboxIcon className="mt-0.5 size-4 shrink-0" />
       <p className="text-xs leading-relaxed">
-        This stdio server runs in an isolated cloud sandbox, not on your own
-        computer. Tools that need access to your local files, applications, or
-        private network won&apos;t be available here.
+        This stdio server runs only on local runners — it won&apos;t be
+        available to sessions on Stigmer-managed cloud compute. Run the
+        session on a local runner (desktop app or CLI) to use it, or choose
+        a remote (HTTP) server instead.
       </p>
     </div>
   );

package/src/mcp-server/__tests__/StdioSandboxNotice.test.tsx

@@ -44,10 +44,11 @@ function withMode(mode: "cloud" | "local", children: ReactNode) {
 }
 
 describe("StdioSandboxNotice", () => {
-  it("renders the sandbox-isolation caveat for stdio in cloud", () => {
+  it("renders the local-runner-only policy for stdio in cloud", () => {
     render(withMode("cloud", <StdioSandboxNotice serverType={STDIO} />));
     expect(screen.getByRole("status")).toBeTruthy();
-    expect(screen.getByText(/isolated cloud sandbox/i)).toBeTruthy();
+    expect(screen.getByText(/only on local runners/i)).toBeTruthy();
+    expect(screen.getByText(/remote \(HTTP\) server/i)).toBeTruthy();
   });
 
   it("does not suggest the CLI (avoids inaccurate guidance)", () => {

package/src/mcp-server/steps/IdentityTransportStep.tsx

@@ -223,6 +223,13 @@ export function IdentityTransportStep({
             onChange={() => updateData({ transportType: "stdio" })}
           />
         </div>
+        {data.transportType === "stdio" && (
+          <p className="text-xs text-muted-foreground">
+            Stdio servers run only on local runners (desktop app or CLI).
+            Sessions on Stigmer-managed cloud compute require a remote (HTTP)
+            server.
+          </p>
+        )}
 
         {/* HTTP fields */}
         {data.transportType === "http" && (

package/src/resource-creation/templates/mcp-server-templates.ts

@@ -62,41 +62,44 @@ export const MCP_SERVER_TEMPLATES: readonly ResourceTemplate<McpServerWizardData
       },
     },
     {
-      id: "postgresql",
-      name: "PostgreSQL",
+      id: "neon",
+      name: "Neon",
       description:
-        "Connect to a PostgreSQL database for querying, schema inspection, and data management.",
+        "Connect to Neon's hosted MCP endpoint for serverless PostgreSQL — querying, schema inspection, and branch management.",
       category: "integration",
-      tags: ["postgres", "postgresql", "database", "sql", "data"],
+      tags: ["neon", "postgres", "postgresql", "database", "sql", "data"],
       data: {
-        name: "PostgreSQL",
+        name: "Neon",
         description:
-          "PostgreSQL database connection for querying, schema inspection, and data management.",
-        transportType: "stdio",
-        stdioCommand: "npx",
-        stdioArgs: "-y @modelcontextprotocol/server-postgres",
+          "Neon serverless PostgreSQL — querying, schema inspection, database provisioning, and branch management.",
+        transportType: "http",
+        httpUrl: "https://mcp.neon.tech/mcp",
         env: [
           {
-            key: "DATABASE_URL",
+            key: "NEON_API_KEY",
             description:
-              "PostgreSQL connection string (e.g. postgresql://user:pass@host:5432/db).",
+              "Neon API key (generate at console.neon.tech/app/settings/api-keys).",
             isSecret: true,
             optional: false,
           },
         ],
       },
     },
+    // Deliberately stdio: the canonical example of a tool that must run on
+    // the user's own machine. Stdio servers are local-runner-only — the
+    // wizard's transport step states this, and cloud-targeted sessions
+    // refuse them at execution create.
     {
       id: "filesystem",
-      name: "Filesystem",
+      name: "Filesystem (local runners)",
       description:
-        "Provide read and write access to a local directory for file management and content operations.",
+        "Provide read and write access to a local directory for file management and content operations. Runs on local runners only.",
       category: "general",
       tags: ["filesystem", "files", "local", "directory"],
       data: {
         name: "Filesystem",
         description:
-          "Local filesystem access for reading, writing, and managing files within a directory.",
+          "Local filesystem access for reading, writing, and managing files within a directory. Stdio transport — runs on local runners only.",
         transportType: "stdio",
         stdioCommand: "npx",
         stdioArgs:

package/src/sidebar/SettingsSidebar.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ArrowLeft } from "lucide-react";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import type { SettingsNavGroup } from "../settings/settings-nav.js";
+import { SidebarChrome, SidebarSeparator, navRowClassName } from "./chrome.js";
+import type { RenderSidebarLink } from "./types.js";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/** Props for {@link SettingsSidebar}. */
+export interface SettingsSidebarProps {
+  /**
+   * Grouped settings navigation to render. The console passes
+   * `useSettingsNavGroups()` (permission-aware); deterministic hosts
+   * pass `SETTINGS_NAV_GROUPS` or a fixture subset.
+   */
+  readonly groups: readonly SettingsNavGroup[];
+  /**
+   * Current pathname for active-row matching: a row is active when the
+   * path equals its `href` or sits under `href + "/"`. Omit for hosts
+   * with no location (deterministic embeds pass the depicted route).
+   */
+  readonly activePath?: string | null;
+  /** Renders each interactive row. See {@link RenderSidebarLink}. */
+  readonly renderLink: RenderSidebarLink;
+  /**
+   * "Back to Sessions" target — the last workspace-zone location, so
+   * leaving settings restores where the user was. @default "/"
+   */
+  readonly backHref?: string;
+  /** Footer content — typically the host app's `UserMenu` wrapper. */
+  readonly footer: ReactNode;
+  /** Reflected as `aria-expanded` on the collapse toggle. @default true */
+  readonly isOpen?: boolean;
+  /** Called when the collapse toggle is pressed. */
+  readonly onCollapse?: () => void;
+  /** Passed through to the embedded `OrgSwitcher`. */
+  readonly onOrgChanged?: (org: Organization) => void;
+}
+
+/**
+ * The console's settings-zone (management) sidebar: org switcher, a
+ * "Back to Sessions" exit, and grouped settings navigation driven by
+ * the SDK's settings-nav model, with a user footer.
+ *
+ * Like {@link WorkspaceSidebar}, this is the exact component the web
+ * console, desktop app, and documentation tours all render; hosts vary
+ * only `renderLink`, `groups`, and the `footer` slot.
+ *
+ * Row identifiers passed to `renderLink` are the settings route
+ * basenames (`"api-keys"`, `"members"`, …) plus `"back-to-sessions"`,
+ * so consumers can address specific rows without parsing hrefs.
+ *
+ * @example
+ * ```tsx
+ * <SettingsSidebar
+ *   groups={useSettingsNavGroups()}
+ *   activePath={usePathname()}
+ *   backHref={lastSessionZonePath ?? "/"}
+ *   renderLink={({ href, children, ...rest }) => (
+ *     <Link href={href} {...rest}>{children}</Link>
+ *   )}
+ *   footer={<UserMenu />}
+ * />
+ * ```
+ */
+export function SettingsSidebar({
+  groups,
+  activePath = null,
+  renderLink,
+  backHref = "/",
+  footer,
+  isOpen = true,
+  onCollapse,
+  onOrgChanged,
+}: SettingsSidebarProps) {
+  return (
+    <SidebarChrome
+      ariaLabel="Management navigation"
+      isOpen={isOpen}
+      onCollapse={onCollapse}
+      onOrgChanged={onOrgChanged}
+      footer={footer}
+    >
+      {/* Back to Sessions */}
+      <div className="flex-none px-3 py-1">
+        {renderLink({
+          id: "back-to-sessions",
+          href: backHref,
+          active: false,
+          className: navRowClassName(false, { muted: true }),
+          "aria-current": undefined,
+          children: (
+            <>
+              <ArrowLeft className="size-4 shrink-0" />
+              Back to Sessions
+            </>
+          ),
+        })}
+      </div>
+
+      <SidebarSeparator />
+
+      {/* Settings nav links — grouped, permission-aware via `groups` */}
+      <div className="flex flex-col gap-4 px-3 py-1">
+        {groups.map((group) => (
+          <div key={group.label} className="flex flex-col gap-0.5">
+            <span className="text-sidebar-muted-foreground px-2 pb-1 text-[11px] font-medium tracking-wider uppercase">
+              {group.label}
+            </span>
+            {group.items.map((item) => {
+              const active =
+                activePath != null &&
+                (activePath === item.href ||
+                  activePath.startsWith(`${item.href}/`));
+
+              return (
+                <SettingsNavRow
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  icon={<item.icon className="size-4 shrink-0" />}
+                  active={active}
+                  renderLink={renderLink}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+
+      {/* Spacer pushes the footer to the bottom (no scrollable middle). */}
+      <div className="flex-1" />
+    </SidebarChrome>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internals
+// ---------------------------------------------------------------------------
+
+function SettingsNavRow({
+  href,
+  label,
+  icon,
+  active,
+  renderLink,
+}: {
+  readonly href: string;
+  readonly label: string;
+  readonly icon: ReactNode;
+  readonly active: boolean;
+  readonly renderLink: RenderSidebarLink;
+}) {
+  return renderLink({
+    // Route basename as the stable id: "/settings/api-keys" → "api-keys".
+    id: href.slice(href.lastIndexOf("/") + 1),
+    href,
+    active,
+    className: navRowClassName(active),
+    "aria-current": active ? "page" : undefined,
+    children: (
+      <>
+        {icon}
+        {label}
+      </>
+    ),
+  });
+}