@stigmer/react 3.3.0 → 3.4.1

package/src/{billing → pricing-governance}/PricingGovernanceConsole.tsx

@@ -11,7 +11,7 @@ import { RetireConfirm } from "./RetireConfirm.js";
 import { ModelGovernanceDetail } from "./ModelGovernanceDetail.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
-import { INPUT_CLASSES } from "./form-primitives.js";
+import { INPUT_CLASSES } from "../internal/form-primitives.js";
 import { ZERO } from "./pricing-format.js";
 import { useDecidePricingOverride } from "./useDecidePricingOverride.js";
 import { useRetireModelPricingBaseline } from "./useRetireModelPricingBaseline.js";

package/src/{billing → pricing-governance}/RetireConfirm.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ModelPricingBaseline } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
 import { Button } from "../button/index.js";
-import { INPUT_CLASSES } from "./form-primitives.js";
+import { INPUT_CLASSES } from "../internal/form-primitives.js";
 
 // ---------------------------------------------------------------------------
 // RetireConfirm — typed confirmation for retiring a catalog entry (a

package/src/pricing-governance/index.ts

@@ -0,0 +1,50 @@
+// Pricing governance — the platform-operator surface for the model
+// registry baseline and the reconciliation-driven pricing feedback loop.
+// Every export here is gated on `can_manage_model_pricing` on
+// `platform:stigmer`; nothing in this module is customer-facing (customer
+// billing lives in ../billing). The module boundary is deliberate: the
+// docs generator excludes operator-only domains wholesale, so operator
+// exports must never be mixed into customer modules.
+
+// Data hooks
+export { usePricingGovernance } from "./usePricingGovernance.js";
+export type { UsePricingGovernanceReturn } from "./usePricingGovernance.js";
+export { useModelPricingBaselines } from "./useModelPricingBaselines.js";
+export type {
+  UseModelPricingBaselinesOptions,
+  UseModelPricingBaselinesReturn,
+} from "./useModelPricingBaselines.js";
+export { useModelGovernanceView } from "./useModelGovernanceView.js";
+export type {
+  GovernanceFlow,
+  ModelGovernanceRow,
+  UseModelGovernanceViewReturn,
+} from "./useModelGovernanceView.js";
+
+// Behavior hooks
+export { useDecidePricingOverride } from "./useDecidePricingOverride.js";
+export type {
+  DecidePricingOverrideInput,
+  UseDecidePricingOverrideReturn,
+} from "./useDecidePricingOverride.js";
+export { useUpsertModelPricingBaseline } from "./useUpsertModelPricingBaseline.js";
+export type {
+  UpsertModelPricingBaselineInput,
+  UseUpsertModelPricingBaselineReturn,
+} from "./useUpsertModelPricingBaseline.js";
+export { useRetireModelPricingBaseline } from "./useRetireModelPricingBaseline.js";
+export type {
+  RetireModelPricingBaselineInput,
+  UseRetireModelPricingBaselineReturn,
+} from "./useRetireModelPricingBaseline.js";
+
+// Styled components
+export { PricingGovernancePanel } from "./PricingGovernancePanel.js";
+export type { PricingGovernancePanelProps } from "./PricingGovernancePanel.js";
+export { ModelCatalogPanel } from "./ModelCatalogPanel.js";
+export type { ModelCatalogPanelProps } from "./ModelCatalogPanel.js";
+export { PricingGovernanceConsole } from "./PricingGovernanceConsole.js";
+export type {
+  PricingGovernanceConsoleProps,
+  PricingGovernanceTab,
+} from "./PricingGovernanceConsole.js";

package/src/resource-creation/CreationPicker.tsx

@@ -140,6 +140,7 @@ export function CreationPicker<TData>({
           description={`Create a blank ${resourceLabel} and configure it step by step.`}
           icon={<BlankPageIcon />}
           onClick={() => onSelect({ kind: "scratch" })}
+          cursorTarget="creation-path-scratch"
         />
 
         {/* Browse templates */}
@@ -150,6 +151,7 @@ export function CreationPicker<TData>({
             icon={<GridIcon />}
             onClick={() => setView("gallery")}
             badge={`${templates.length} available`}
+            cursorTarget="creation-path-template"
           />
         )}
 
@@ -159,6 +161,7 @@ export function CreationPicker<TData>({
           description="Upload a YAML or JSON configuration file."
           icon={<UploadIcon />}
           onClick={() => onSelect({ kind: "import" })}
+          cursorTarget="creation-path-import"
         />
       </div>
     </div>
@@ -175,17 +178,21 @@ function OptionCard({
   icon,
   onClick,
   badge,
+  cursorTarget,
 }: {
   readonly title: string;
   readonly description: string;
   readonly icon: React.ReactNode;
   readonly onClick: () => void;
   readonly badge?: string;
+  /** `data-cursor-target` hook for guided tours and demo playbacks. */
+  readonly cursorTarget?: string;
 }) {
   return (
     <button
       type="button"
       onClick={onClick}
+      data-cursor-target={cursorTarget}
       className={cn(
         "group flex flex-col items-center gap-3 rounded-lg border border-border bg-card p-6 text-center",
         "transition-colors hover:border-primary hover:bg-accent",

package/src/resource-creation/WizardNav.tsx

@@ -90,6 +90,7 @@ export function WizardNav({
           type="button"
           onClick={onNext}
           disabled={nextDisabled || isSubmitting}
+          data-cursor-target="wizard-next"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors",
             "hover:bg-primary-hover",

package/src/resource-detail/Section.tsx

@@ -9,6 +9,13 @@ export interface SectionProps {
   /** Arbitrary action elements rendered in the header row (e.g. expand, share). */
   readonly headerActions?: ReactNode;
   readonly onEdit?: () => void;
+  /**
+   * Stable id emitted as `data-scroll-target` on the section element, so
+   * guided tours and demos can scroll the section into view by name (the
+   * same convention as `data-cursor-target`). Purely an annotation — no
+   * behavior attaches to it here.
+   */
+  readonly scrollTarget?: string;
   readonly children: ReactNode;
   readonly className?: string;
 }
@@ -26,11 +33,12 @@ export function Section({
   count,
   headerActions,
   onEdit,
+  scrollTarget,
   children,
   className,
 }: SectionProps) {
   return (
-    <section className={className}>
+    <section className={className} data-scroll-target={scrollTarget}>
       <div className="mb-2 flex items-center gap-2">
         <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
           {title}

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

@@ -112,6 +112,17 @@ export interface ResourceWorkbenchProps<TData = SearchResult> {
   /** Extracts a unique ID from an item (for selection tracking). */
   readonly getItemId?: (item: TData) => string;
 
+  // --- Refresh -----------------------------------------------------------
+
+  /**
+   * Opaque token that forces a background refetch of the list whenever
+   * its value changes — the current view stays rendered with a refetch
+   * shimmer (no remount flash), and pagination and sort are preserved.
+   * Bump it after an out-of-band mutation (applying a manifest, deleting
+   * a row) so the change appears without a reload.
+   */
+  readonly refetchToken?: unknown;
+
   // --- Empty & error states ----------------------------------------------
 
   /** Icon for the empty state. */
@@ -210,6 +221,7 @@ export function ResourceWorkbench<TData = SearchResult>({
   onStateChange,
   enableSelection = false,
   getItemId = defaultGetId as (item: TData) => string,
+  refetchToken,
   emptyIcon,
   emptyTitle = "No resources found",
   emptyDescription = "Try adjusting your search or filters.",
@@ -255,6 +267,7 @@ export function ResourceWorkbench<TData = SearchResult>({
     onSortChange: filtersHook.setSort,
     columns: columns as WorkbenchColumnDef<TData>[],
     enableSelection,
+    refetchToken,
   });
 
   // --- Selection ---------------------------------------------------------

package/src/resource-workbench/hooks/useResourceCollection.ts

@@ -57,6 +57,15 @@ export interface UseResourceCollectionOptions<TData = SearchResult> {
   readonly columns?: readonly WorkbenchColumnDef<TData>[];
   /** Enable row selection state tracking. @default false */
   readonly enableSelection?: boolean;
+  /**
+   * Opaque token that forces a background refetch whenever its value
+   * changes. Use it to re-read the list after an out-of-band mutation
+   * (e.g. applying a manifest or deleting a row) without remounting:
+   * bump a counter and pass it here. The current page stays rendered
+   * with an `isRefetching` shimmer — no full-list flash. A change to
+   * this token alone never resets pagination or sort.
+   */
+  readonly refetchToken?: unknown;
 }
 
 // ---------------------------------------------------------------------------
@@ -148,6 +157,7 @@ export function useResourceCollection<TData = SearchResult>(
     onSortChange,
     columns = [],
     enableSelection = false,
+    refetchToken,
   } = options;
 
   // --- Data fetching via useFetch -----------------------------------------
@@ -169,7 +179,7 @@ export function useResourceCollection<TData = SearchResult>(
           };
         }
       : null,
-    [listFn, org, query, scope, page, pageSize],
+    [listFn, org, query, scope, page, pageSize, refetchToken],
     INITIAL_DATA,
   );
 

package/src/search/useResourceCount.ts

@@ -16,6 +16,13 @@ export interface UseResourceCountOptions {
    * @default "org"
    */
   readonly scope?: ResourceListScope;
+  /**
+   * Opaque token that forces a recount whenever its value changes. Use
+   * it to refresh the count after an out-of-band mutation (e.g. applying
+   * a manifest) without remounting. Mirrors the `refetchToken` on
+   * {@link useResourceCollection}.
+   */
+  readonly refetchToken?: unknown;
 }
 
 export interface UseResourceCountReturn {
@@ -52,6 +59,7 @@ export function useResourceCount(
 ): UseResourceCountReturn {
   const query = options?.query;
   const scope = options?.scope ?? "org";
+  const refetchToken = options?.refetchToken;
 
   const { data: count, isLoading, isRefetching, error, refetch } = useFetch<number | undefined>(
     org
@@ -66,7 +74,7 @@ export function useResourceCount(
           return result.totalCount;
         }
       : null,
-    [listFn, org, query, scope],
+    [listFn, org, query, scope, refetchToken],
     undefined,
   );
 

package/src/session/NewSessionViewer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { cn } from "@stigmer/theme";
 import type { ResourceRef } from "@stigmer/sdk";
 import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js";
 import type { WorkspaceFileLister } from "../workspace/WorkspaceFileLister.js";
@@ -10,7 +9,7 @@ import type { WorkspaceContentSearcher } from "../workspace/WorkspaceContentSear
 import type { InteractionModeOption } from "../composer/index.js";
 import { SessionComposer } from "../composer/index.js";
 import type { HarnessOption } from "../models/harness.js";
-import { ResizableSplit } from "../internal/ResizableSplit.js";
+import { SessionViewerLayout } from "./SessionViewerLayout.js";
 import { useWorkspaceEditors } from "../internal/store/index.js";
 import { WorkspaceSurface } from "../workspace/WorkspaceSurface.js";
 import type { SetupTabProps } from "./facets/SetupTab.js";
@@ -383,68 +382,56 @@ export function NewSessionViewer({
   );
 
   return (
-    <div className={cn("relative flex h-full w-full flex-col", className)}>
-      {/* Persistent chrome: the chip is always mounted, matching SessionViewer
-          (DD-016) rather than the launcher's earlier progressively-revealed
-          inspector. A toggle that appears/disappears with attached context
-          reads as instability and, worse, unmounts the open panel's only
-          collapse control when the last context item is removed. Always-on is
-          the predictable, discoverable shape; opening homes on the Config
-          facet, which carries useful defaults (harness/model) pre-session.
-          Guests are the exception: the panel exposes configuration a visitor
-          has no business with, so the chip (the panel's only toggle) is
-          simply absent and the panel can never open. */}
-      {!isGuest && (
-        <div className="absolute top-2 right-6 z-10">
+    // The launcher renders the same SessionViewerLayout as SessionViewer
+    // (DD-016) — the shared frame is what makes "the two viewers behave
+    // identically" structural rather than hand-synchronized.
+    <SessionViewerLayout
+      className={className}
+      resizeAriaLabel="Resize composer panel"
+      splitStorageKey="stgm-new-session-chat-width"
+      // Persistent chrome: the chip is always mounted, matching SessionViewer
+      // (DD-016) rather than the launcher's earlier progressively-revealed
+      // inspector. A toggle that appears/disappears with attached context
+      // reads as instability and, worse, unmounts the open panel's only
+      // collapse control when the last context item is removed. Always-on is
+      // the predictable, discoverable shape; opening homes on the Config
+      // facet, which carries useful defaults (harness/model) pre-session.
+      // Guests are the exception: the panel exposes configuration a visitor
+      // has no business with, so the chip (the panel's only toggle) is
+      // simply absent and the panel can never open.
+      chip={
+        !isGuest ? (
           <SessionPanelChip
             isOpen={panel.isOpen}
             onToggle={panel.isOpen ? panel.closePanel : panel.openPanel}
           />
-        </div>
-      )}
-
-      {/* Same unified-panel layout as SessionViewer (DD-016): collapsed by
-          default (composer fills the row); opening makes the composer the
-          fixed narrow pane and hands the flexible region to the surface.
-          Collapse goes through the split's `collapsedPane` (CSS, not
-          conditional structure), so the composer never remounts across an
-          open/close toggle. */}
-      <ResizableSplit
-        resizablePane="primary"
-        collapsedPane={panel.isOpen ? "none" : "secondary"}
-        defaultSize={420}
-        minSize={320}
-        maxSize={640}
-        storageKey="stgm-new-session-chat-width"
-        responsiveCollapse={panel.isOpen ? "primary" : "none"}
-        ariaLabel="Resize composer panel"
-        className="min-h-0 flex-1"
-        primary={composerNode}
-        secondary={
-          panel.isOpen ? (
-            <WorkspaceSurface
-              entries={flow.workspace.entries}
-              lister={workspaceFileLister}
-              reader={workspaceFileReader}
-              searcher={workspaceContentSearcher}
-              view={panel.view}
-              onViewChange={panel.setView}
-              extraViews={railViews}
-              onRemoveEntry={flow.workspace.remove}
-              onAddLocalFolder={canAddLocalFolder ? handleAddLocalFolder : undefined}
-              editors={editors}
-              selectedFile={activeFile}
-              onOpenFile={panel.openFile}
-              onActivateEditor={panel.activateEditor}
-              onPinEditor={panel.pinEditor}
-              onCloseEditor={panel.closeEditor}
-              onCollapse={panel.closePanel}
-              reveal={activeReveal}
-              className="h-full"
-            />
-          ) : null
-        }
-      />
-    </div>
+        ) : undefined
+      }
+      conversation={composerNode}
+      panel={
+        panel.isOpen ? (
+          <WorkspaceSurface
+            entries={flow.workspace.entries}
+            lister={workspaceFileLister}
+            reader={workspaceFileReader}
+            searcher={workspaceContentSearcher}
+            view={panel.view}
+            onViewChange={panel.setView}
+            extraViews={railViews}
+            onRemoveEntry={flow.workspace.remove}
+            onAddLocalFolder={canAddLocalFolder ? handleAddLocalFolder : undefined}
+            editors={editors}
+            selectedFile={activeFile}
+            onOpenFile={panel.openFile}
+            onActivateEditor={panel.activateEditor}
+            onPinEditor={panel.pinEditor}
+            onCloseEditor={panel.closeEditor}
+            onCollapse={panel.closePanel}
+            reveal={activeReveal}
+            className="h-full"
+          />
+        ) : null
+      }
+    />
   );
 }

package/src/session/SessionViewer.tsx

@@ -19,7 +19,7 @@ import {
 } from "../workspace/WorkspaceSurface.js";
 import type { InteractionModeOption, SessionComposerHandle, SessionComposerSubmitContext } from "../composer/index.js";
 import type { ApplyResourceResult } from "../library/useApplyResource.js";
-import { ResizableSplit } from "../internal/ResizableSplit.js";
+import { SessionViewerLayout } from "./SessionViewerLayout.js";
 import { useWorkspaceEditors, isVirtualEntryId } from "../internal/store/index.js";
 import { isTerminalPhase } from "../execution/execution-phases.js";
 import { MessageThread, type MessageThreadSlots } from "../execution/MessageThread.js";
@@ -267,7 +267,8 @@ export interface SessionViewerProps {
  *   to a top-right chip; opening a file (tree, search, or a transcript path)
  *   expands it.
  *
- * Connected via `ResizableSplit` with persisted chat width.
+ * Both regions render inside {@link SessionViewerLayout} — the frame shared
+ * with {@link NewSessionViewer} — with the chat width persisted per viewer.
  *
  * Framework-agnostic — no Next.js, no Tauri, no routing deps. Host
  * apps inject platform-specific values via props (DD-004/DD-016).
@@ -552,101 +553,85 @@ export function SessionViewer({
   }
 
   return (
-    <div className={cn("relative flex h-full w-full flex-col", className)}>
-      {/* Top-right controls: host actions + the panel chip. The chip is the
-          panel's always-mounted toggle; while collapsed it carries only the
-          pending-item count. Execution status is never surfaced as header
-          chrome — the thread itself communicates run state. Guests get no
-          chip: the panel exposes session configuration a visitor has no
-          business with, so its only toggle is simply absent. */}
-      <div className="absolute top-2 right-6 z-10 flex items-center gap-2">
-        {headerActions}
-        {!isGuest && (
+    <SessionViewerLayout
+      className={className}
+      // Top-right controls: host actions + the panel chip. The chip is the
+      // panel's always-mounted toggle; while collapsed it carries only the
+      // pending-item count. Execution status is never surfaced as header
+      // chrome — the thread itself communicates run state. Guests get no
+      // chip: the panel exposes session configuration a visitor has no
+      // business with, so its only toggle is simply absent.
+      headerActions={headerActions}
+      chip={
+        !isGuest ? (
           <SessionPanelChip
             isOpen={panel.isOpen}
             onToggle={panel.isOpen ? panel.closePanel : panel.openPanel}
             badgeCount={writeBackCount + artifactCount}
           />
-        )}
-      </div>
-
-      {/* One layout, collapsed by default: chat fills the row until the panel
-          opens, then becomes the fixed narrow pane on the left while the
-          panel takes the flexible region. Collapsing goes through the
-          split's `collapsedPane` (CSS, not conditional structure), so the
-          conversation is always the same first child and an open/close never
-          remounts it (invariant 1). */}
-      <ResizableSplit
-        resizablePane="primary"
-        collapsedPane={panel.isOpen ? "none" : "secondary"}
-        defaultSize={420}
-        minSize={320}
-        maxSize={640}
-        storageKey="stgm-session-chat-width"
-        responsiveCollapse={panel.isOpen ? "primary" : "none"}
-        ariaLabel="Resize chat panel"
-        className="min-h-0 flex-1"
-        primary={
-          <ConversationColumn
+        ) : undefined
+      }
+      splitStorageKey="stgm-session-chat-width"
+      conversation={
+        <ConversationColumn
+          flow={flow}
+          modelId={modelId}
+          setModelId={setModelId}
+          interactionMode={interactionMode}
+          setInteractionMode={setInteractionMode}
+          composerRef={composerRef}
+          org={org}
+          gitHubConnection={gitHubConnection}
+          enableGitHub={enableGitHub}
+          enableLocal={enableLocal}
+          onBrowseLocalFolder={onBrowseLocalFolder}
+          onBuildFromPlan={handleBuildFromPlan}
+          onOpenPlan={handleOpenPlan}
+          isBuildingFromPlan={isBuildingFromPlan}
+          planAttachFailed={planAttachFailed}
+          onDismissPlanAttachFailed={() => setPlanAttachFailed(false)}
+          onFilePathClick={handleTranscriptFilePathClick}
+          isCurated={isCurated}
+          isGuest={isGuest}
+          isObserver={isObserver}
+          threadSlots={threadSlots}
+        />
+      }
+      panel={
+        panel.isOpen && !isGuest ? (
+          <SessionPanelRegion
             flow={flow}
-            modelId={modelId}
-            setModelId={setModelId}
-            interactionMode={interactionMode}
-            setInteractionMode={setInteractionMode}
-            composerRef={composerRef}
             org={org}
-            gitHubConnection={gitHubConnection}
-            enableGitHub={enableGitHub}
+            panel={panel}
+            // Observers cannot manage access (no can_grant_access /
+            // can_view_access on a channel session) — the control is
+            // withheld rather than left to fail server-side.
+            accessSlot={isObserver ? undefined : accessSlot}
+            onApplied={onApplied}
+            // Implementing a plan submits an execution — a write an
+            // observer cannot make (can_create_execution_in is
+            // owner/viewer-only).
+            onImplementPlan={isObserver ? undefined : handleBuildFromPlan}
+            implementPlanDisabled={
+              isObserver || !conv.canSendFollowUp || isBuildingFromPlan
+            }
+            sessionPlan={sessionPlan}
+            streamingPlan={streamingPlan}
+            planDraft={planDraft}
+            openPlanExecutionId={openPlanExecutionId}
+            onOpenPlan={handleOpenPlan}
+            onOpenArtifact={handleOpenArtifact}
+            onActivateArtifact={handleActivateArtifact}
             enableLocal={enableLocal}
             onBrowseLocalFolder={onBrowseLocalFolder}
-            onBuildFromPlan={handleBuildFromPlan}
-            onOpenPlan={handleOpenPlan}
-            isBuildingFromPlan={isBuildingFromPlan}
-            planAttachFailed={planAttachFailed}
-            onDismissPlanAttachFailed={() => setPlanAttachFailed(false)}
-            onFilePathClick={handleTranscriptFilePathClick}
+            workspaceFileLister={workspaceFileLister}
+            workspaceFileReader={workspaceFileReader}
+            workspaceContentSearcher={workspaceContentSearcher}
             isCurated={isCurated}
-            isGuest={isGuest}
-            isObserver={isObserver}
-            threadSlots={threadSlots}
           />
-        }
-        secondary={
-          panel.isOpen && !isGuest ? (
-            <SessionPanelRegion
-              flow={flow}
-              org={org}
-              panel={panel}
-              // Observers cannot manage access (no can_grant_access /
-              // can_view_access on a channel session) — the control is
-              // withheld rather than left to fail server-side.
-              accessSlot={isObserver ? undefined : accessSlot}
-              onApplied={onApplied}
-              // Implementing a plan submits an execution — a write an
-              // observer cannot make (can_create_execution_in is
-              // owner/viewer-only).
-              onImplementPlan={isObserver ? undefined : handleBuildFromPlan}
-              implementPlanDisabled={
-                isObserver || !conv.canSendFollowUp || isBuildingFromPlan
-              }
-              sessionPlan={sessionPlan}
-              streamingPlan={streamingPlan}
-              planDraft={planDraft}
-              openPlanExecutionId={openPlanExecutionId}
-              onOpenPlan={handleOpenPlan}
-              onOpenArtifact={handleOpenArtifact}
-              onActivateArtifact={handleActivateArtifact}
-              enableLocal={enableLocal}
-              onBrowseLocalFolder={onBrowseLocalFolder}
-              workspaceFileLister={workspaceFileLister}
-              workspaceFileReader={workspaceFileReader}
-              workspaceContentSearcher={workspaceContentSearcher}
-              isCurated={isCurated}
-            />
-          ) : null
-        }
-      />
-    </div>
+        ) : null
+      }
+    />
   );
 }