@stigmer/react 3.12.7 → 3.12.8

package/src/session/facets/primitives.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+// Shared visual vocabulary for the session-panel facets (Config / Changes /
+// Artifacts / Usage): one dense, VS Code-style row-and-section language so the
+// facets read as one surface instead of three eras of styling. The Artifacts
+// facet's `ArtifactRowView` set the idiom — compact rows, quiet metadata,
+// hover/focus-revealed actions — and these primitives carry it to the
+// non-file-list facets. All visual properties flow through `--stgm-*`
+// tokens (DD-005).
+
+import { cn } from "@stigmer/theme";
+
+/**
+ * A titled facet section: uppercase micro-heading over flush content.
+ * `count` renders the "(N)" suffix the retired inspector used; `annotation`
+ * renders a normal-case, muted trailing note (e.g. "next message only").
+ */
+export function FacetSection({
+  heading,
+  count,
+  annotation,
+  children,
+}: {
+  readonly heading: string;
+  readonly count?: number;
+  readonly annotation?: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <section className="stg:flex stg:flex-col stg:gap-1">
+      <h3 className="stg:px-2 stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
+        {heading}
+        {count != null && count > 0 && (
+          <span className="stg:ml-1 stg:text-muted-foreground-faint">({count})</span>
+        )}
+        {annotation && (
+          <span className="stg:ml-1 stg:font-normal stg:normal-case stg:tracking-normal stg:text-muted-foreground-faint">
+            ({annotation})
+          </span>
+        )}
+      </h3>
+      {children}
+    </section>
+  );
+}
+
+/**
+ * One dense, non-interactive facet row: leading content, optional
+ * right-aligned metadata, and hover/focus-revealed trailing actions
+ * (the `group` the actions' reveal keys on). Interactive rows (whole-row
+ * buttons) build on {@link FACET_ROW_BUTTON} instead.
+ */
+export function FacetRow({
+  children,
+  meta,
+  actions,
+  className,
+}: {
+  readonly children: React.ReactNode;
+  /** Right-aligned quiet metadata (counts, sizes, values). */
+  readonly meta?: React.ReactNode;
+  /** Hover/focus-revealed trailing controls — siblings, never nested. */
+  readonly actions?: React.ReactNode;
+  readonly className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "stg:group stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs",
+        className,
+      )}
+    >
+      <span className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:text-foreground">
+        {children}
+      </span>
+      {meta && (
+        <span className="stg:shrink-0 stg:text-[0.65rem] stg:text-muted-foreground">
+          {meta}
+        </span>
+      )}
+      {actions}
+    </div>
+  );
+}
+
+/**
+ * Class string for a whole-row interactive facet action (the
+ * `ArtifactRowView` open-button idiom): dense row metrics plus hover and
+ * focus-visible treatments. A string constant (not a component) so callers
+ * keep their own element type and extra classes.
+ */
+export const FACET_ROW_BUTTON = cn(
+  "stg:flex stg:w-full stg:min-w-0 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+  "stg:hover:bg-muted stg:hover:text-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+);
+
+/**
+ * Hover/focus-revealed remove control for a {@link FacetRow} — the
+ * `ArtifactRowView` download-button reveal pattern applied to removal.
+ * Always reachable by keyboard (focus reveals it without hover).
+ */
+export function FacetRemoveButton({
+  onClick,
+  label,
+}: {
+  readonly onClick: () => void;
+  readonly label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        "stg:flex stg:shrink-0 stg:items-center stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+        "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+        "stg:hover:text-destructive",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+      )}
+    >
+      <FacetXIcon />
+    </button>
+  );
+}
+
+/** Muted empty-state line for a facet section with nothing to list. */
+export function FacetEmptyHint({ children }: { readonly children: React.ReactNode }) {
+  return (
+    <p className="stg:px-2 stg:text-xs stg:text-muted-foreground-faint">{children}</p>
+  );
+}
+
+/**
+ * A key→value config row ("Harness  Native"): muted label left, value
+ * right — the dense inverse of a definition list, sized like every other
+ * facet row. `children` is the value; pass a control (e.g. a Switch) for
+ * interactive config rows.
+ */
+export function FacetKeyValueRow({
+  label,
+  labelId,
+  children,
+}: {
+  readonly label: string;
+  /** Optional id for the label span — point a control's `aria-labelledby` here. */
+  readonly labelId?: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:px-2 stg:py-1 stg:text-xs">
+      <span id={labelId} className="stg:shrink-0 stg:text-muted-foreground">
+        {label}
+      </span>
+      <span className="stg:flex stg:min-w-0 stg:items-center stg:gap-1.5 stg:truncate stg:text-foreground">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+function FacetXIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}

package/src/session/index.ts

@@ -170,6 +170,7 @@ export { SetupTab } from "./facets/index.js";
 export type {
   SetupTabProps,
   SetupTabMutationCallbacks,
+  SetupTabAutoApprove,
 } from "./facets/index.js";
 
 // Session utilities (re-exported from @stigmer/sdk)

package/src/session/useNewSessionFlow.ts

@@ -116,6 +116,9 @@ export interface UseNewSessionFlowOptions {
    * - model: stored per-harness choice > the account's model for the
    *   active harness (validated against the registry; a stale model
    *   silently falls through) > the harness default.
+   * - autoApprove: explicit in-session flip > the account's
+   *   `default_auto_approve` > the host's `approvalDefaults` (derived,
+   *   so a late-arriving value applies without a touched-ref effect).
    *
    * Seeded values are never persisted to localStorage — the account
    * preference keeps applying until the user decides. Ignored for the
@@ -221,10 +224,12 @@ export interface UseNewSessionFlowReturn {
   /**
    * Pre-arm "auto-approve tool calls" for the session this surface will
    * create (stigmer/stigmer#816, the walk-away scenario). Seeded from the
-   * host's `StigmerProvider` `approvalDefaults` (#302, guests excluded);
-   * the user's toggle wins from then on. Carried into the bootstrap create
-   * as `spec.auto_approve_all` — the whole-run server-side bypass — so the
-   * first run stays covered even if the user closes the tab.
+   * account's `default_auto_approve` preference and the host's
+   * `StigmerProvider` `approvalDefaults` (#302) — guests inherit neither;
+   * the user's explicit flip (the Config facet switch) wins from then on.
+   * Carried into the bootstrap create as `spec.auto_approve_all` — the
+   * whole-run server-side bypass — so the first run stays covered even if
+   * the user closes the tab.
    */
   readonly autoApproveAll: boolean;
   /** Set the user's explicit auto-approve choice for the created session. */
@@ -323,18 +328,28 @@ export function useNewSessionFlow(
   const contextTarget = useExecutionTarget();
   const executionTarget = options.executionTarget ?? contextTarget;
   const adapter = useRunnerAdapter();
-  // Auto-approve for the session about to be created (#816): the host
-  // approval default (#302) seeds the INITIAL state only; the user's
-  // composer toggle wins from then on. Guests never inherit the default
-  // and never see the toggle — a share-link visitor is not the operator
-  // the host's trust judgment covers (the GUEST_HARNESS
-  // fixed-platform-policy reasoning). Carried into the bootstrap create as
-  // spec.auto_approve_all, the whole-run server-side bypass — the created
-  // run stays covered even if this tab dies before its first gate.
+  // Auto-approve for the session about to be created (#816): derived like
+  // useSessionPageFlow's — the user's explicit flip wins, otherwise the
+  // truth is computed from its seeds:
+  //
+  //   effective = userChoice ?? (accountSeed || hostSeed)
+  //
+  // Derived rather than useState-initialized because the account preference
+  // (default_auto_approve) resolves async with whoAmI — a mount-time
+  // initializer would silently miss it (the harness seed's late-arrival
+  // problem, solved here by derivation instead of a touched-ref effect).
+  // Guests inherit neither seed — a share-link visitor is not the operator
+  // either trust judgment covers (the GUEST_HARNESS fixed-platform-policy
+  // reasoning). Carried into the bootstrap create as spec.auto_approve_all,
+  // the whole-run server-side bypass — the created run stays covered even
+  // if this tab dies before its first gate.
   const approvalDefaults = useApprovalDefaults();
-  const [autoApproveAll, setAutoApproveAll] = useState(
-    () => !isGuest && (approvalDefaults?.autoApproveAll ?? false),
-  );
+  const [autoApproveChoice, setAutoApproveAll] = useState<boolean | null>(null);
+  const autoApproveAll =
+    autoApproveChoice ??
+    (!isGuest &&
+      ((accountDefaults?.autoApprove ?? false) ||
+        (approvalDefaults?.autoApproveAll ?? false)));
 
   const [harness, setHarnessRaw] = useState<HarnessOption>(() => {
     // Guests get the fixed platform policy (see GUEST_HARNESS) and never

package/src/session/useSessionPageFlow.ts

@@ -22,6 +22,7 @@ import { toSessionUpdateInput } from "@stigmer/sdk";
 import type { SessionAudience } from "./audience.js";
 import { isChannelOriginSession } from "./channelOrigin.js";
 import { assertValidRunConfig, type SessionRunConfig } from "./run-config.js";
+import type { AccountExecutionDefaults } from "../identity-account/useAccountExecutionDefaults.js";
 
 /**
  * Well-known Daytona sandbox workspace root. Used as the SDK safety-net
@@ -69,6 +70,18 @@ export interface UseSessionPageFlowOptions {
    * config). See {@link SessionRunConfig}.
    */
   readonly runConfig?: SessionRunConfig;
+  /**
+   * The user's account-level execution defaults, typically from
+   * `useAccountExecutionDefaults()`. On the session page only
+   * `autoApprove` applies — it seeds the session-scoped auto-approve
+   * state so a user whose `default_auto_approve` preference is ON gets
+   * armed follow-ups on every session, not just newly created ones. An
+   * explicit in-session flip always wins for this session; the seed may
+   * arrive after mount (whoAmI resolves async) and still applies, being
+   * part of the derivation rather than an initializer. Ignored for the
+   * `"guest"` audience (guests inherit no identity-derived preference).
+   */
+  readonly accountDefaults?: AccountExecutionDefaults;
 }
 
 /** Return value of {@link useSessionPageFlow}. */
@@ -146,28 +159,33 @@ export interface UseSessionPageFlowReturn {
    * `false` by default. `true` when any of its sources arms it — the user's
    * explicit choice always winning:
    *
-   * 1. the user's composer toggle ({@link setAutoApproveAll});
+   * 1. the user's Config facet switch ({@link setAutoApproveAll});
    * 2. "Approve & don't ask again" at an approval gate (see
    *    {@link submitApproval});
-   * 3. the host's app-wide `StigmerProvider` `approvalDefaults` (#302,
+   * 3. the account's `default_auto_approve` preference
+   *    (`UseSessionPageFlowOptions.accountDefaults`, guests excluded);
+   * 4. the host's app-wide `StigmerProvider` `approvalDefaults` (#302,
    *    guests excluded);
-   * 4. the active in-flight execution having been created with
+   * 5. the active in-flight execution having been created with
    *    `spec.auto_approve_all` (e.g. armed on the new-session surface), so
    *    the state survives the launcher → session-page handoff.
    *
    * While `true`, follow-ups carry `auto_approve_all` ({@link handleSubmit})
    * and gates appearing in the in-flight run are auto-released (never for
-   * guest/observer/channel-origin surfaces). Held in memory only — reset on
-   * reload back to the host default, never persisted server-side.
+   * guest/observer/channel-origin surfaces). The explicit per-session flip is
+   * held in memory only — reset on reload back to the seeds; the account
+   * preference is the one persisted default, declared by the user in
+   * Account Preferences.
    */
   readonly autoApproveAll: boolean;
   /**
    * Set the user's explicit session-scoped auto-approve choice. Wired to the
-   * composer's always-visible toggle; an explicit `false` wins over the host
-   * default and over an armed in-flight run for everything the client
-   * controls (follow-up carry, gate auto-release) — an already-armed run's
-   * server-side bypass cannot be revoked mid-run, exactly as with today's
-   * gate-time "Approve & don't ask again".
+   * Config facet's switch; an explicit `false` wins over both seeds and over
+   * an armed in-flight run for everything the client controls (follow-up
+   * carry, gate auto-release) — an already-armed run's server-side bypass
+   * cannot be revoked mid-run, exactly as with today's gate-time "Approve &
+   * don't ask again". Never written back to the account preference: the
+   * flip is scoped to THIS conversation.
    */
   readonly setAutoApproveAll: (value: boolean) => void;
 
@@ -340,27 +358,33 @@ export function useSessionPageFlow(
   // the user's explicit in-session decision wins, otherwise the truth is
   // computed from its sources — never an effect-synced copy:
   //
-  //   effective = userChoice ?? (hostSeed || runArmed)
+  //   effective = userChoice ?? (accountSeed || hostSeed || runArmed)
   //
-  // - `userChoice`: the composer toggle, or the gate-time "Approve & don't
-  //   ask again" (which has always escalated the session preference).
+  // - `userChoice`: the Config facet's switch, or the gate-time "Approve &
+  //   don't ask again" (which has always escalated the session preference).
+  // - `accountSeed`: the account's default_auto_approve preference — the
+  //   user's own persisted walk-away default. Resolves async with whoAmI;
+  //   being part of the derivation (not an initializer), a late arrival
+  //   still applies unless the user has already flipped this session.
   // - `hostSeed`: the host's provider-level approvalDefaults (#302) — an
-  //   app-level trust judgment. Guests never inherit it (a share-link
-  //   visitor is not the operator the host's trust judgment covers).
+  //   app-level trust judgment. Guests inherit neither seed (a share-link
+  //   visitor is not the operator either trust judgment covers).
   // - `runArmed`: the ACTIVE execution was created with
-  //   spec.auto_approve_all, so the toggle reflects an armed in-flight run —
+  //   spec.auto_approve_all, so the switch reflects an armed in-flight run —
   //   this is what carries the state across the new-session → session-page
   //   handoff. Deliberately derived from the active execution ONLY, never
   //   from history: deriving from past executions would silently survive a
-  //   reload and change the reset-on-reload consent contract below.
+  //   reload independent of the seeds above.
   //
-  // Lives only in memory for the life of this page — reset on reload
-  // re-applies the host default, never a user choice.
+  // The explicit choice lives only in memory for the life of this page —
+  // reset on reload re-applies the seeds (the account preference now being
+  // the persisted one the user actually declared), never a per-session flip.
   const approvalDefaults = useApprovalDefaults();
   const [autoApproveChoice, setAutoApproveChoice] = useState<boolean | null>(null);
+  const accountSeed = !isGuest && (options.accountDefaults?.autoApprove ?? false);
   const hostSeed = !isGuest && (approvalDefaults?.autoApproveAll ?? false);
   const runArmed = conv.activeStreamExecution?.spec?.autoApproveAll === true;
-  const autoApproveAll = autoApproveChoice ?? (hostSeed || runArmed);
+  const autoApproveAll = autoApproveChoice ?? (accountSeed || hostSeed || runArmed);
   const setAutoApproveAll = useCallback((value: boolean) => {
     setAutoApproveChoice(value);
   }, []);

package/src/switch/Switch.tsx

@@ -17,6 +17,8 @@ export interface SwitchProps {
   readonly "aria-label"?: string;
   /** ID of the element that labels this switch. */
   readonly "aria-labelledby"?: string;
+  /** ID of the element that describes this switch (helper copy). */
+  readonly "aria-describedby"?: string;
   /** Element ID, for association with an external `<label htmlFor>`. */
   readonly id?: string;
   /** Additional CSS classes for the root button. */
@@ -54,6 +56,7 @@ export function Switch({
   disabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
   id,
   className,
 }: SwitchProps) {
@@ -65,6 +68,7 @@ export function Switch({
       aria-checked={checked}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
+      aria-describedby={ariaDescribedby}
       disabled={disabled}
       onClick={() => onCheckedChange(!checked)}
       className={cn(

package/src/workflow/__tests__/useWorkflowCanvas.dirty.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { ReactFlowProvider } from "@xyflow/react";
-import type { Node } from "@xyflow/react";
+import type { Node, OnNodeDrag } from "@xyflow/react";
 import { useWorkflowCanvas } from "../useWorkflowCanvas";
 
 // Regression tests for oss#609: isDirty was a model-reference comparison
@@ -54,7 +54,12 @@ function renderCanvas() {
 
 type CanvasResult = ReturnType<typeof renderCanvas>["result"];
 
-const DRAG_EVENT = {} as React.MouseEvent;
+// The drag fixture derives its type from the handler itself, so it tracks
+// whatever event type the installed @xyflow/react declares (the pinned
+// 12.10.2 takes the React synthetic event; newer majors take the native
+// event) — a dependency bump can never strand this cast again (#821's
+// hand-written native-MouseEvent cast did not compile under npm ci).
+const DRAG_EVENT = {} as Parameters<OnNodeDrag>[0];
 
 /** Drives one full drag gesture the way React Flow produces it. */
 function drag(result: CanvasResult, id: string, to: { x: number; y: number }) {

package/src/workflow/__tests__/useWorkflowCanvas.drag.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { ReactFlowProvider } from "@xyflow/react";
-import type { Node } from "@xyflow/react";
+import type { Node, OnNodeDrag } from "@xyflow/react";
 import { useWorkflowCanvas } from "../useWorkflowCanvas";
 
 // Regression tests for oss#602: node drags updated only React Flow's copy
@@ -51,7 +51,12 @@ function renderCanvas() {
 
 type CanvasResult = ReturnType<typeof renderCanvas>["result"];
 
-const DRAG_EVENT = {} as React.MouseEvent;
+// The drag fixture derives its type from the handler itself, so it tracks
+// whatever event type the installed @xyflow/react declares (the pinned
+// 12.10.2 takes the React synthetic event; newer majors take the native
+// event) — a dependency bump can never strand this cast again (#821's
+// hand-written native-MouseEvent cast did not compile under npm ci).
+const DRAG_EVENT = {} as Parameters<OnNodeDrag>[0];
 
 function canvasPosition(result: CanvasResult, id: string): { x: number; y: number } {
   const node = result.current.nodes.find((n) => n.id === id);

package/src/workspace/WorkspaceSurface.tsx

@@ -695,8 +695,16 @@ function EditorArea({
     <div className="stg:flex stg:h-full stg:min-h-0 stg:flex-col">
       {/* Collapse control + tab strip. The far right is kept clear (pr-24):
           the session viewer floats its top-right controls (host
-          `headerActions` and the panel chip) over this region. */}
-      <div className="stg:flex stg:shrink-0 stg:items-stretch stg:border-b stg:border-border stg:pr-24">
+          `headerActions` and the panel chip) over this region. Fixed to the
+          shared HEADER_ROW_HEIGHT so this row's bottom border stays flush
+          with the sidebar facet header's — and so an empty tab strip (no
+          open editors) cannot collapse the row. */}
+      <div
+        className={cn(
+          HEADER_ROW_HEIGHT,
+          "stg:flex stg:shrink-0 stg:items-stretch stg:border-b stg:border-border stg:pr-24",
+        )}
+      >
         <Tooltip>
           <TooltipTrigger
             render={
@@ -843,9 +851,24 @@ function Breadcrumbs({
 // Shared sidebar chrome
 // ---------------------------------------------------------------------------
 
+/**
+ * One fixed height for every header row across the surface — the sidebar
+ * facet header AND the editor area's tab-strip row — so their bottom borders
+ * form a single continuous line across the panel. Fixed rather than
+ * padding-derived: the two rows have different content (micro-caps title vs
+ * text-xs tabs, sometimes no tabs at all), so padding math can never keep
+ * them aligned.
+ */
+const HEADER_ROW_HEIGHT = "stg:h-8";
+
 function SidebarHeader({ title }: { readonly title: string }) {
   return (
-    <div className="stg:shrink-0 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-muted-foreground">
+    <div
+      className={cn(
+        HEADER_ROW_HEIGHT,
+        "stg:flex stg:shrink-0 stg:items-center stg:border-b stg:border-border stg:px-3 stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-muted-foreground",
+      )}
+    >
       {title}
     </div>
   );