@stigmer/react 0.5.1 → 1.0.1

package/src/resource-detail/types.ts

@@ -84,12 +84,23 @@ export interface DetailAction {
 export interface ResourceHeaderMeta {
   /** Display name of the resource. */
   readonly name: string;
+  /**
+   * Custom element for the name area. When provided, replaces the
+   * default `<h2>` rendering — useful for inline-editable names.
+   */
+  readonly nameElement?: ReactNode;
   /** Resource ID (opaque string). */
   readonly id: string;
   /** Organization slug that owns the resource. */
   readonly org?: string;
   /** URL-friendly slug. */
   readonly slug?: string;
+  /**
+   * Qualified path shown as a monospace line below the title
+   * (e.g., `"acme/my-server"`). When provided, renders beneath the
+   * title row — unlike `slug` which appears as a chip beside the name.
+   */
+  readonly qualifiedSlug?: string;
   /** Resource description. */
   readonly description?: string;
   /** Optional icon URL (e.g. agent icon). */
@@ -145,6 +156,20 @@ export interface ResourceDetailShellProps {
    */
   readonly visibilityControl?: ReactNode;
 
+  /**
+   * Additional content rendered in the header's metadata line
+   * (between org and timestamps). Use for resource-specific
+   * indicators like validation state or discovery timestamps.
+   */
+  readonly headerMetaExtra?: ReactNode;
+
+  /**
+   * Banner content rendered above the header row.
+   * Use for validation warnings or other full-width alerts
+   * that should appear before the resource title.
+   */
+  readonly headerBanner?: ReactNode;
+
   /**
    * Primary action rendered as a visible button in the header area.
    * Use for the most common action (e.g. "Edit" for agents).

package/src/resource-detail/useDeleteResource.ts

@@ -6,7 +6,7 @@ import { toError } from "../internal/toError";
 import { toast } from "../feedback/toast";
 
 /** Resource types that support deletion from detail pages. */
-export type DeletableResourceKind = "agent" | "skill" | "mcpServer" | "runner";
+export type DeletableResourceKind = "agent" | "skill" | "mcpServer" | "runner" | "workflow";
 
 export interface UseDeleteResourceReturn {
   /**
@@ -74,6 +74,9 @@ export function useDeleteResource(
         case "runner":
           await stigmer.runner.delete(resourceId);
           break;
+        case "workflow":
+          await stigmer.workflow.delete(resourceId);
+          break;
       }
       toast.success(
         resourceName
@@ -106,5 +109,7 @@ function kindLabel(kind: DeletableResourceKind): string {
       return "MCP server";
     case "runner":
       return "runner";
+    case "workflow":
+      return "workflow";
   }
 }

package/src/resource-workbench/components/ResourceWorkbench.tsx

@@ -26,6 +26,7 @@ import { BulkActionBar } from "./BulkActionBar";
 import { ResourceInspector } from "./ResourceInspector";
 import { EmptyState } from "../../empty-state";
 import { ResourceAvatar } from "./ResourceAvatar";
+import { ScopeToggle } from "../../library/ScopeToggle";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -306,6 +307,9 @@ export function ResourceWorkbench<TData = SearchResult>({
             )}
           />
         </div>
+        {onScopeChange && (
+          <ScopeToggle value={controlledScope} onChange={onScopeChange} />
+        )}
         {viewModes.length > 1 && (
           <ViewSwitcher
             value={viewMode}

package/src/session/useNewSessionFlow.ts

@@ -275,6 +275,7 @@ export function useNewSessionFlow(
           modelName: selectedModel ?? validModelId,
           runtimeEnv: context?.runtimeEnv,
           attachments: context?.attachments,
+          interactionMode: context?.interactionMode,
         };
 
         let sessionId: string;

package/src/session/useSessionConversation.ts

@@ -76,6 +76,13 @@ export interface SendFollowUpOptions {
    * @see {@link CreateAgentExecutionInput.attachments}
    */
   readonly attachments?: AttachmentInput[];
+  /**
+   * Interaction mode for this execution.
+   *
+   * - `"agent"` (default): full tool access.
+   * - `"plan"`: read-only analysis, no file mutations.
+   */
+  readonly interactionMode?: "agent" | "plan";
 }
 
 /**
@@ -365,6 +372,7 @@ export function useSessionConversation(
           modelName: options?.modelName,
           runtimeEnv: options?.runtimeEnv,
           attachments: options?.attachments,
+          interactionMode: options?.interactionMode,
         });
         setPendingExecutionId(result.executionId);
         refetch();

package/src/session/useSessionPageFlow.ts

@@ -269,6 +269,7 @@ export function useSessionPageFlow(
         skillRefs: skillRefs.length > 0 ? skillRefs : undefined,
         runtimeEnv: context?.runtimeEnv,
         attachments: context?.attachments,
+        interactionMode: context?.interactionMode,
       });
 
       sessionVariables.clear();

package/src/session/useSessionUsage.ts

@@ -7,7 +7,7 @@ import {
   GetSessionUsageReportInputSchema,
   type GetSessionUsageReportOutput,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import type { ModelUsage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
+import type { ModelUsage, RunnerUsageSummary } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
 import { useStigmer } from "../hooks";
 import { useFetch } from "../internal/useFetch";
 
@@ -109,6 +109,66 @@ function mapReport(report: GetSessionUsageReportOutput): UseSessionUsageReturn {
   };
 }
 
+/**
+ * Aggregate runner-reported usage from execution status objects.
+ * Used as a fallback when the server-side session usage report is empty
+ * (e.g., Cursor harness where the proxy does not capture main agent turns).
+ */
+function aggregateRunnerUsage(
+  executions: readonly AgentExecution[],
+): UseSessionUsageReturn {
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let cacheReadTokens = 0;
+  let cacheCreationTokens = 0;
+  let totalTokens = 0;
+  let turnCount = 0;
+  let estimatedCost = 0;
+  let model = "";
+
+  for (const exec of executions) {
+    const ru = exec.status?.runnerUsage;
+    if (!ru || ru.turnCount === 0) continue;
+    inputTokens += Number(ru.inputTokens);
+    outputTokens += Number(ru.outputTokens);
+    cacheReadTokens += Number(ru.cacheReadTokens);
+    cacheCreationTokens += Number(ru.cacheWriteTokens);
+    totalTokens += Number(ru.totalTokens);
+    turnCount += ru.turnCount;
+    estimatedCost += ru.estimatedCostUsd;
+    if (!model && ru.model) model = ru.model;
+  }
+
+  if (turnCount === 0) return EMPTY;
+
+  return {
+    totalCostUsd: estimatedCost,
+    totalTokens,
+    inputTokens,
+    outputTokens,
+    cacheReadTokens,
+    cacheCreationTokens,
+    llmCallCount: turnCount,
+    modelBreakdown: model
+      ? [
+          {
+            model,
+            provider: "cursor",
+            estimatedCostUsd: estimatedCost,
+            inputTokens,
+            outputTokens,
+            cacheCreationTokens,
+            cacheReadTokens,
+            callCount: turnCount,
+          },
+        ]
+      : [],
+    primaryModel: model,
+    primaryProvider: model ? "cursor" : "",
+    hasUsage: true,
+  };
+}
+
 /**
  * Usage hook for session-level cost and token aggregation.
  *
@@ -140,8 +200,16 @@ export function useSessionUsage(
     { cacheKey: sessionId ? `session-usage:${sessionId}` : undefined },
   );
 
+  const runnerFallback = useMemo(
+    () => aggregateRunnerUsage(executions),
+    [executions],
+  );
+
   return useMemo(() => {
-    if (!report) return EMPTY;
-    return mapReport(report);
-  }, [report]);
+    if (report) {
+      const mapped = mapReport(report);
+      if (mapped.hasUsage) return mapped;
+    }
+    return runnerFallback;
+  }, [report, runnerFallback]);
 }

package/src/settings/UsageSection.tsx

@@ -1,14 +1,11 @@
 "use client";
 
 import { OrgUsagePanel } from "../usage/OrgUsagePanel";
-import { useDeploymentMode } from "../deployment-mode";
-import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
 import { useOrg } from "../organization/OrgProvider";
 
 /** Settings section for organization usage and cost reporting. */
 export function UsageSection() {
   const { activeOrg } = useOrg();
-  const mode = useDeploymentMode();
   const orgId = activeOrg?.metadata?.id ?? "";
 
   return (
@@ -24,12 +21,7 @@ export function UsageSection() {
         your organization.
       </p>
 
-      {mode === "local" ? (
-        <CloudFeatureNotice>
-          Usage reports are not available in local mode. Connect to Stigmer
-          Cloud to view organization-level cost and token analytics.
-        </CloudFeatureNotice>
-      ) : !orgId ? (
+      {!orgId ? (
         <p className="text-muted-foreground py-4 text-center text-xs">
           Select an organization to view usage.
         </p>

package/src/skill/SkillPicker.tsx

@@ -15,6 +15,8 @@ import { cn } from "@stigmer/theme";
 import { useSkillSearch } from "./useSkillSearch";
 import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
+import { ScopeToggle } from "../library/ScopeToggle";
+import type { ResourceListScope } from "../search";
 
 /** Props for {@link SkillPicker}. */
 export interface SkillPickerProps {
@@ -83,7 +85,8 @@ export function SkillPicker({
   disabled,
   className,
 }: SkillPickerProps) {
-  const { results, isLoading, error, query, setQuery } = useSkillSearch(org, { scope });
+  const [activeScope, setActiveScope] = useState<ResourceListScope>(scope ?? "org");
+  const { results, isLoading, error, query, setQuery } = useSkillSearch(org, { scope: activeScope });
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const searchRef = useRef<HTMLInputElement>(null);
@@ -217,6 +220,8 @@ export function SkillPicker({
         autoFocus
       />
 
+      <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
+
       {error && <p className="text-xs text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}