@stigmer/react 0.0.51 → 0.0.53

package/src/execution/tool-rendering-primitives.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Shared truncation threshold for all collapsible tool rendering
+ * primitives. Applied consistently across detail views and approval
+ * card previews.
+ */
+export const TRUNCATION_LINE_LIMIT = 10;
+
+// ---------------------------------------------------------------------------
+// CollapsibleCode — labeled code block with line-based truncation
+// ---------------------------------------------------------------------------
+
+export interface CollapsibleCodeProps {
+  readonly label: string;
+  readonly content: string;
+  readonly className?: string;
+}
+
+/**
+ * A labeled `<pre>` block with automatic line-based truncation and
+ * an expand/collapse toggle.
+ *
+ * Used for tool arguments, file content previews, and result blocks
+ * across both the detail view and the approval card.
+ */
+export function CollapsibleCode({ label, content, className }: CollapsibleCodeProps) {
+  const lines = content.split("\n");
+  const needsTruncation = lines.length > TRUNCATION_LINE_LIMIT;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const displayContent =
+    needsTruncation && !isExpanded
+      ? lines.slice(0, TRUNCATION_LINE_LIMIT).join("\n") + "\n\u2026"
+      : content;
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="font-medium text-muted-foreground">{label}</span>
+      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 p-2 font-mono text-foreground">
+        {displayContent}
+      </pre>
+      {needsTruncation && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded((v) => !v)}
+          className="text-xs font-medium text-primary transition-colors hover:text-primary/80"
+        >
+          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsiblePre — raw pre with line-based truncation (no label/border)
+// ---------------------------------------------------------------------------
+
+export interface CollapsiblePreProps {
+  readonly content: string;
+  readonly className?: string;
+}
+
+/**
+ * A bare `<pre>` element with line-based truncation. Unlike
+ * {@link CollapsibleCode}, this has no label, border, or background
+ * — the caller controls container styling via `className`.
+ *
+ * Pass container styles (border, background, max-height) through
+ * `className` when rendering standalone; omit when the parent
+ * already provides a styled container (e.g. terminal blocks).
+ */
+export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
+  const lines = content.split("\n");
+  const needsTruncation = lines.length > TRUNCATION_LINE_LIMIT;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const displayContent =
+    needsTruncation && !isExpanded
+      ? lines.slice(0, TRUNCATION_LINE_LIMIT).join("\n") + "\n\u2026"
+      : content;
+
+  return (
+    <>
+      <pre className={cn("whitespace-pre-wrap break-words font-mono", className)}>
+        {displayContent}
+      </pre>
+      {needsTruncation && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded((v) => !v)}
+          className="mt-1 text-xs font-medium text-primary transition-colors hover:text-primary/80"
+        >
+          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
+        </button>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleJsonBlock — chevron-toggled JSON section
+// ---------------------------------------------------------------------------
+
+export interface CollapsibleJsonBlockProps {
+  readonly label: string;
+  readonly content: string;
+}
+
+/**
+ * A collapsible JSON section with a chevron toggle. Initially
+ * collapsed, showing the label and line count. Useful for complex
+ * (non-scalar) tool arguments.
+ */
+export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const lines = content.split("\n");
+  const isLong = lines.length > 3;
+
+  return (
+    <div className="space-y-1">
+      <button
+        type="button"
+        onClick={() => setIsExpanded((v) => !v)}
+        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(
+            "shrink-0 transition-transform duration-150",
+            isExpanded && "rotate-90",
+          )}
+          aria-hidden="true"
+        >
+          <path d="M2 1L6 4L2 7" />
+        </svg>
+        {label}
+        {!isExpanded && isLong && (
+          <span className="font-normal text-muted-foreground/60">
+            ({lines.length} lines)
+          </span>
+        )}
+      </button>
+      {isExpanded && (
+        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 p-2 font-mono text-foreground">
+          {content}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons
+// ---------------------------------------------------------------------------
+
+/** Small document icon for file path displays (10x10). */
+export function FilePathIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
+      <path d="M7 1V4H10" />
+    </svg>
+  );
+}
+
+/** MCP server node/link icon (10x10). */
+export function McpServerIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <circle cx="6" cy="3" r="1.5" />
+      <circle cx="6" cy="9" r="1.5" />
+      <path d="M6 4.5V7.5" />
+      <path d="M3 6H4.5" />
+      <path d="M7.5 6H9" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared utilities
+// ---------------------------------------------------------------------------
+
+/** Safely serialise an object to pretty JSON. */
+export function formatJson(obj: unknown): string {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(obj);
+  }
+}
+
+/** Pretty-print a result string if it's valid JSON, otherwise return as-is. */
+export function formatResult(result: string): string {
+  try {
+    const parsed = JSON.parse(result);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return result;
+  }
+}
+
+/** Detect scalar values (string, number, boolean). */
+export function isScalar(value: unknown): value is string | number | boolean {
+  const t = typeof value;
+  return t === "string" || t === "number" || t === "boolean";
+}
+
+/**
+ * Title-case a snake_case or camelCase argument key for display.
+ *
+ * @example
+ * humanizeArgKey("mcp_server_slug") // "Mcp Server Slug"
+ */
+export function humanizeArgKey(key: string): string {
+  return key
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b[a-z]/g, (c) => c.toUpperCase());
+}

package/src/index.ts

@@ -5,6 +5,11 @@ export { StigmerContext } from "./context";
 // Hooks
 export { useStigmer } from "./hooks";
 
+// Deployment mode and resource availability
+export { useDeploymentMode, useResourceAvailable } from "./deployment-mode";
+export { type DeploymentMode, isResourceAvailable, ApiResourceKind } from "@stigmer/sdk";
+export { CloudFeatureNotice, type CloudFeatureNoticeProps } from "./internal/CloudFeatureNotice";
+
 // Models — data hook, styled component, and registry data
 export {
   MODEL_REGISTRY,
@@ -81,7 +86,10 @@ export {
   ExecutionCostSummary,
   ToolCallGroup,
   ToolCallDetail,
+  McpToolDetail,
+  parseMcpResult,
   formatDuration,
+  humanizeToolName,
   ToolCallItem,
   SubAgentSection,
   MessageEntry,
@@ -92,6 +100,9 @@ export {
   ArtifactContentRenderer,
   ArtifactPreviewModal,
   ArtifactsWidget,
+  ToolArgsView,
+  McpArgsView,
+  McpMetadataRow,
   FilePathLink,
   FilePathContext,
   classifyPath,
@@ -121,6 +132,8 @@ export type {
   ExecutionCostSummaryProps,
   ToolCallGroupProps,
   ToolCallDetailProps,
+  McpToolDetailProps,
+  ToolArgsViewProps,
   ToolCallItemProps,
   SubAgentSectionProps,
   MessageEntryProps,

package/src/internal/CloudFeatureNotice.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@stigmer/theme";
+
+export interface CloudFeatureNoticeProps {
+  /** Explanation of why the feature is unavailable and what to do instead. */
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+/**
+ * Subdued info notice displayed in place of cloud-only feature content
+ * when the connected Stigmer backend does not support the feature.
+ *
+ * Renders an inline box with an info icon and the provided message.
+ * The parent section provides its own heading and description — this
+ * component is purely the "why it's absent" explanation.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ * No Console-specific dependencies — safe for platform builder embedding.
+ */
+export function CloudFeatureNotice({
+  children,
+  className,
+}: CloudFeatureNoticeProps) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "bg-muted/50 text-muted-foreground flex items-start gap-2.5 rounded-lg border border-transparent px-4 py-3",
+        className,
+      )}
+    >
+      <InfoIcon className="mt-0.5 size-4 shrink-0" />
+      <p className="text-xs leading-relaxed">{children}</p>
+    </div>
+  );
+}
+
+function InfoIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <circle cx="8" cy="8" r="6.25" />
+      <path d="M8 7v4" />
+      <circle cx="8" cy="5" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}

package/src/mcp-server/McpServerDetailView.tsx

@@ -46,6 +46,20 @@ export interface McpServerDetailViewProps {
   readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
   /** `true` while a visibility update RPC is in flight. */
   readonly isVisibilityPending?: boolean;
+  /**
+   * Called after the approval-policy generation session and execution
+   * have been created successfully.
+   *
+   * When provided, the component delegates post-trigger behavior to the
+   * consumer (e.g. navigating to a session page) instead of rendering
+   * the inline {@link ApprovalPolicyGeneratorPanel}.
+   *
+   * When omitted, the inline panel is shown as a fallback.
+   */
+  readonly onPolicySessionCreated?: (info: {
+    sessionId: string;
+    executionId: string;
+  }) => void;
   /** Additional CSS classes for the root container. */
   readonly className?: string;
 }
@@ -78,6 +92,7 @@ export function McpServerDetailView({
   onResourceLoad,
   onVisibilityChange,
   isVisibilityPending,
+  onPolicySessionCreated,
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
@@ -149,11 +164,18 @@ export function McpServerDetailView({
     try {
       const yaml = serializeMcpServerYaml(mcpServer);
       const result = await policySession.trigger(yaml, org, slug);
-      setPolicyPanelExecutionId(result.executionId);
+      if (onPolicySessionCreated) {
+        onPolicySessionCreated({
+          sessionId: result.sessionId,
+          executionId: result.executionId,
+        });
+      } else {
+        setPolicyPanelExecutionId(result.executionId);
+      }
     } catch {
       // error state is managed by the hook
     }
-  }, [mcpServer, org, slug, policySession]);
+  }, [mcpServer, org, slug, policySession, onPolicySessionCreated]);
 
   const handlePolicyPanelComplete = useCallback(() => {
     refetch();

package/src/provider.tsx

@@ -1,15 +1,28 @@
 "use client";
 
 import type { ReactNode } from "react";
-import type { Stigmer } from "@stigmer/sdk";
+import type { Stigmer, DeploymentMode } from "@stigmer/sdk";
 import { cn, resolvePresetClass } from "@stigmer/theme";
 import type { ThemePresetId } from "@stigmer/theme";
 import { StigmerContext } from "./context";
+import { DeploymentModeContext } from "./deployment-mode";
 
 export interface StigmerProviderProps {
   /** A configured {@link Stigmer} client instance. */
   readonly client: Stigmer;
   readonly children: ReactNode;
+  /**
+   * Deployment mode of the connected Stigmer backend.
+   *
+   * - `"local"` — local Go CLI server (OSS). Cloud-only resources
+   *   (API keys, IAM, identity management) are unavailable.
+   * - `"cloud"` — Stigmer Cloud. All resources are available.
+   *
+   * Defaults to `"cloud"` so existing consumers see no change.
+   * The Stigmer Console derives this from the API URL hostname.
+   * Platform builders pass it based on their deployment context.
+   */
+  readonly deploymentMode?: DeploymentMode;
   /**
    * Built-in theme preset to apply.
    *
@@ -60,6 +73,7 @@ export interface StigmerProviderProps {
 export function StigmerProvider({
   client,
   children,
+  deploymentMode = "cloud",
   preset,
   className,
 }: StigmerProviderProps) {
@@ -67,7 +81,9 @@ export function StigmerProvider({
 
   return (
     <StigmerContext.Provider value={client}>
-      <div className={cn("stgm", presetClass, className)}>{children}</div>
+      <DeploymentModeContext.Provider value={deploymentMode}>
+        <div className={cn("stgm", presetClass, className)}>{children}</div>
+      </DeploymentModeContext.Provider>
     </StigmerContext.Provider>
   );
 }