@stigmer/react 0.0.91 → 0.0.93

package/src/execution/WriteBackCard.tsx

@@ -68,7 +68,7 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
             <div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
               {writeBack.branchName}
               {writeBack.baseBranch && (
-                <span className="text-muted-foreground/60">
+                <span className="text-muted-foreground-subtle">
                   {" \u2190 "}
                   {writeBack.baseBranch}
                 </span>
@@ -87,7 +87,7 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
 
       {/* Error message */}
       {isFailed && writeBack.error && (
-        <div className="mt-1.5 rounded bg-destructive/10 px-2 py-1 text-xs text-destructive">
+        <div className="mt-1.5 rounded bg-destructive-subtle px-2 py-1 text-xs text-destructive">
           {writeBack.error}
         </div>
       )}
@@ -100,7 +100,7 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
             target="_blank"
             rel="noopener noreferrer"
             className={cn(
-              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary/80",
+              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted",
               FOCUS_RING_CLASSES,
             )}
           >
@@ -131,11 +131,11 @@ const PHASE_CONFIG: Record<
   },
   [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED]: {
     label: "PR Created",
-    className: "bg-primary/10 text-primary",
+    className: "bg-primary-subtle text-primary",
   },
   [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED]: {
     label: "Failed",
-    className: "bg-destructive/10 text-destructive",
+    className: "bg-destructive-subtle text-destructive",
   },
 };
 

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

@@ -44,14 +44,14 @@ export function CollapsibleCode({ label, content, className }: CollapsibleCodePr
   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">
+      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle 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"
+          className="text-xs font-medium text-primary transition-colors hover:text-primary-muted"
         >
           {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
         </button>
@@ -100,7 +100,7 @@ export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
         <button
           type="button"
           onClick={() => setIsExpanded((v) => !v)}
-          className="mt-1 text-xs font-medium text-primary transition-colors hover:text-primary/80"
+          className="mt-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted"
         >
           {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
         </button>
@@ -157,13 +157,13 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
         </svg>
         {label}
         {!isExpanded && isLong && (
-          <span className="font-normal text-muted-foreground/60">
+          <span className="font-normal text-muted-foreground-subtle">
             ({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">
+        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
           {content}
         </pre>
       )}

package/src/github/GitHubRepoPicker.tsx

@@ -428,7 +428,7 @@ export function GitHubRepoPicker({
             type="button"
             onClick={handleAdd}
             disabled={!selectedBranch}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40"
+            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
           >
             Add
           </button>
@@ -479,7 +479,7 @@ export function GitHubRepoPicker({
             type="button"
             onClick={handleManualAdd}
             disabled={!manualUrl.trim()}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40"
+            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
           >
             Add
           </button>
@@ -502,7 +502,7 @@ export function GitHubRepoPicker({
       className={["space-y-1.5", className].filter(Boolean).join(" ")}
     >
       {/* Mode toggle */}
-      <div className="flex rounded-md border border-border bg-muted/30 p-0.5">
+      <div className="flex rounded-md border border-border bg-muted-faint p-0.5">
         <button
           type="button"
           onClick={() => handleModeSwitch("my-repos")}
@@ -672,7 +672,7 @@ function MyReposList({
     <>
       {groups.map((group, gi) => (
         <div key={group.key}>
-          <div className="sticky top-0 z-[1] bg-card/95 px-2 py-1 text-[0.65rem] font-medium text-muted-foreground backdrop-blur-sm">
+          <div className="sticky top-0 z-[1] bg-card px-2 py-1 text-[0.65rem] font-medium text-muted-foreground backdrop-blur-sm">
             {group.label}
             {!group.isRecent && (
               <span className="ml-1 opacity-50">
@@ -818,7 +818,7 @@ function RepoRow({
         "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
         flatIdx === focusIndex
           ? "bg-accent text-foreground"
-          : "text-foreground hover:bg-accent/50",
+          : "text-foreground hover:bg-accent-hover",
       ].join(" ")}
       role="option"
       aria-selected={flatIdx === focusIndex}

package/src/iam-policy/GrantAccessForm.tsx

@@ -152,7 +152,7 @@ export function GrantAccessForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -167,7 +167,7 @@ export function GrantAccessForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >

package/src/iam-policy/OrgMembersPanel.tsx

@@ -86,7 +86,7 @@ export function OrgMembersPanel({
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -215,7 +215,7 @@ function MemberRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 hover:border-border transition-colors"
+      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
     >
       {/* Avatar */}
       <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
@@ -255,7 +255,7 @@ function MemberRow({
             type="button"
             onClick={() => startAction("change-role")}
             aria-label={`Change role for ${name}`}
-            className="shrink-0 rounded p-1 text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+            className="shrink-0 rounded p-1 text-muted-foreground hover:text-foreground hover:bg-accent-hover transition-colors"
           >
             <EditIcon />
           </button>
@@ -263,7 +263,7 @@ function MemberRow({
             type="button"
             onClick={() => startAction("remove")}
             aria-label={`Remove ${name}`}
-            className="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            className="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive-subtle transition-colors"
           >
             <TrashIcon />
           </button>
@@ -284,7 +284,7 @@ function RoleBadge({ grant }: { grant: RoleGrant }) {
       className={cn(
         "inline-flex items-center rounded-md border px-2 py-0.5 text-[0.65rem] font-medium",
         grant.isInherited
-          ? "border-border/50 text-muted-foreground bg-muted/50 italic"
+          ? "border-border-muted text-muted-foreground bg-muted-subtle italic"
           : "border-border bg-muted text-foreground",
       )}
       title={
@@ -334,7 +334,7 @@ function RemoveConfirmation({
   return (
     <div
       role="listitem"
-      className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+      className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
     >
       <div className="min-w-0 flex-1">
         <p className="text-xs text-foreground">
@@ -355,7 +355,7 @@ function RemoveConfirmation({
           disabled={isRevoking}
           className={cn(
             "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-            "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -368,7 +368,7 @@ function RemoveConfirmation({
           disabled={isRevoking}
           className={cn(
             "rounded-md px-2.5 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -460,7 +460,7 @@ function ChangeRoleRow({
   return (
     <div
       role="listitem"
-      className="rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 space-y-2"
+      className="rounded-lg border border-primary/30 bg-primary-subtle px-3 py-2.5 space-y-2"
     >
       <p className="text-xs text-foreground">
         Change role for <span className="font-medium">{memberName}</span>
@@ -486,7 +486,7 @@ function ChangeRoleRow({
           disabled={!canConfirm}
           className={cn(
             "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -499,7 +499,7 @@ function ChangeRoleRow({
           disabled={isWorking}
           className={cn(
             "rounded-md px-2.5 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >

package/src/identity-provider/CreateIdentityProviderForm.tsx

@@ -261,7 +261,7 @@ export function CreateIdentityProviderForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -276,7 +276,7 @@ export function CreateIdentityProviderForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -374,7 +374,7 @@ function JitSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2">
+      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
         <p className="text-[0.65rem] text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
           <span className="font-medium text-foreground">viewer</span> role on
@@ -386,7 +386,7 @@ function JitSection({
 
   return (
     <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border/40" />
+      <hr className="border-border-muted" />
       <legend className="text-xs font-medium text-foreground">
         JIT provisioning
       </legend>

package/src/identity-provider/IdentityProviderDetailPanel.tsx

@@ -210,7 +210,7 @@ export function IdentityProviderDetailPanel({
             onClick={enterEdit}
             className={cn(
               "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
           >
@@ -341,7 +341,7 @@ export function IdentityProviderDetailPanel({
               disabled={!canSave}
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
+                "bg-primary text-primary-foreground hover:bg-primary-hover",
                 "disabled:pointer-events-none disabled:opacity-40",
               )}
             >
@@ -354,7 +354,7 @@ export function IdentityProviderDetailPanel({
               disabled={isUpdating}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >
@@ -414,7 +414,7 @@ function ViewMode({
       {/* JIT provisioning fields */}
       {!spec?.isSsoProvider && spec?.autoProvisionAccounts && (
         <>
-          <hr className="border-border/40" />
+          <hr className="border-border-muted" />
           <Field
             label="Auto-provision accounts"
             value={spec.autoProvisionAccounts ? "Enabled" : "Disabled"}
@@ -537,7 +537,7 @@ function CopyableField({
             onClick={handleCopy}
             className={cn(
               "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem]",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
             aria-label={`Copy ${label}`}
@@ -671,7 +671,7 @@ function JitEditSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2">
+      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
         <p className="text-[0.65rem] text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
           <span className="font-medium text-foreground">viewer</span> role on
@@ -683,7 +683,7 @@ function JitEditSection({
 
   return (
     <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border/40" />
+      <hr className="border-border-muted" />
       <legend className="text-xs font-medium text-foreground">
         JIT provisioning
       </legend>

package/src/identity-provider/IdentityProviderListPanel.tsx

@@ -71,7 +71,7 @@ export function IdentityProviderListPanel({
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -172,7 +172,7 @@ function IdpRow({
     return (
       <div
         role="listitem"
-        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
       >
         <div className="min-w-0 flex-1">
           <p className="text-xs text-foreground">
@@ -192,7 +192,7 @@ function IdpRow({
             disabled={isDeleting}
             className={cn(
               "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -205,7 +205,7 @@ function IdpRow({
             disabled={isDeleting}
             className={cn(
               "rounded-md px-2.5 py-1 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -219,7 +219,7 @@ function IdpRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 hover:border-border transition-colors"
+      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
     >
       <ShieldIcon />
 
@@ -260,7 +260,7 @@ function IdpRow({
             aria-label={`Edit ${name}`}
             className={cn(
               "shrink-0 rounded p-1",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
           >
@@ -273,7 +273,7 @@ function IdpRow({
           aria-label={`Delete ${name}`}
           className={cn(
             "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+            "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle",
             "transition-colors",
           )}
         >

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -294,7 +294,7 @@ function StepIndicator({ current }: { current: WizardStep }) {
               <span
                 className={cn(
                   "h-px w-4",
-                  state === "upcoming" ? "bg-border" : "bg-primary/40",
+                  state === "upcoming" ? "bg-border" : "bg-primary-subtle",
                 )}
               />
             )}
@@ -305,7 +305,7 @@ function StepIndicator({ current }: { current: WizardStep }) {
                   ? "text-primary"
                   : state === "done"
                     ? "text-muted-foreground"
-                    : "text-muted-foreground/50",
+                    : "text-muted-foreground-faint",
               )}
             >
               {s.label}
@@ -381,7 +381,7 @@ function ConfigureStep({
         />
       ))}
 
-      <hr className="border-border/40" />
+      <hr className="border-border-muted" />
 
       {/* Common fields */}
       <FieldInput
@@ -417,7 +417,7 @@ function ConfigureStep({
           disabled={!canContinue}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -590,7 +590,7 @@ function ReviewStep({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -718,7 +718,7 @@ function JitProvisioningSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2">
+      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
         <p className="text-[0.65rem] text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
           <span className="font-medium text-foreground">viewer</span> role on
@@ -730,7 +730,7 @@ function JitProvisioningSection({
 
   return (
     <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border/40" />
+      <hr className="border-border-muted" />
       <legend className="text-xs font-medium text-foreground">
         JIT provisioning
       </legend>
@@ -848,7 +848,7 @@ function TextButton({
       disabled={disabled}
       className={cn(
         "rounded-md px-2.5 py-1.5 text-xs",
-        "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+        "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
         "disabled:pointer-events-none disabled:opacity-50",
       )}
     >

package/src/identity-provider/ProviderPicker.tsx

@@ -45,11 +45,11 @@ export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
           onClick={() => onSelect(preset)}
           className={cn(
             "flex flex-col items-start gap-2 rounded-lg px-3 py-3 text-left transition-colors",
-            "border hover:border-primary/60 hover:bg-accent/30",
+            "border hover:border-primary/60 hover:bg-accent-hover",
             "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             preset.id === "custom"
               ? "border-dashed border-border"
-              : "border-border/60",
+              : "border-border-muted",
           )}
         >
           <ProviderIcon presetId={preset.id} />

package/src/index.ts

@@ -5,6 +5,10 @@ export { StigmerContext } from "./context";
 // Hooks
 export { useStigmer } from "./hooks";
 
+// Color mode
+export { ColorModeContext, useColorMode } from "./color-mode";
+export type { ColorMode, ResolvedColorMode } from "./color-mode";
+
 // Deployment mode and resource availability
 export {
   DeploymentModeContext,
@@ -29,22 +33,16 @@ export type {
   ModelSelectorProps,
 } from "./models";
 
-// Workspace — behavior hooks, data hook, and styled components
+// Workspace — behavior hooks and styled components
 export {
   useWorkspaceEntries,
   WorkspaceEditor,
-  useFolderListing,
-  FolderBrowser,
   WorkspaceSummary,
 } from "./workspace";
 export type {
   WorkspaceEntry,
   UseWorkspaceEntriesReturn,
   WorkspaceEditorProps,
-  FolderEntry,
-  FolderListing,
-  UseFolderListingReturn,
-  FolderBrowserProps,
   WorkspaceSummaryProps,
 } from "./workspace";
 
@@ -60,6 +58,13 @@ export {
   useSessionWriteBacks,
   useSessionUsage,
   useAgentRefFromSession,
+  useNewSessionFlow,
+  useSessionPageFlow,
+  usePersistedModel,
+  useEditSessionPrep,
+  CREATOR_AGENTS,
+  parseDraftType,
+  parseDraftParams,
   groupSessionsByTime,
   PENDING_SUBJECT,
   resolvedSubject,
@@ -83,6 +88,14 @@ export type {
   ModelCostEntry,
   UseSessionUsageReturn,
   UseAgentRefFromSessionReturn,
+  UseNewSessionFlowOptions,
+  UseNewSessionFlowReturn,
+  UseSessionPageFlowOptions,
+  UseSessionPageFlowReturn,
+  UsePersistedModelReturn,
+  UseEditSessionPrepReturn,
+  DraftResourceType,
+  DraftParams,
   SessionGroup,
 } from "./session";
 
@@ -633,3 +646,29 @@ export type {
   UsePersonalAgentInstanceReturn,
   UseCreateAgentInstanceReturn,
 } from "./agent-instance";
+
+// Runner — data hooks, action hooks, styled picker, admin list panel, and phase utilities
+export {
+  useRunnerList,
+  useLaunchLocalRunner,
+  useStopRunner,
+  useDeleteRunner,
+  RunnerPicker,
+  RunnerListPanel,
+  phaseLabel,
+  phaseDotColor,
+  isActivePhase,
+  PHASE_SORT_ORDER,
+} from "./runner";
+export type {
+  UseRunnerListOptions,
+  UseRunnerListReturn,
+  UseLaunchLocalRunnerOptions,
+  UseLaunchLocalRunnerReturn,
+  LaunchLocalRunnerResult,
+  StopRunnerInput,
+  UseStopRunnerReturn,
+  UseDeleteRunnerReturn,
+  RunnerPickerProps,
+  RunnerListPanelProps,
+} from "./runner";

package/src/internal/CloudFeatureNotice.tsx

@@ -42,7 +42,7 @@ export function CloudFeatureNotice({
     <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",
+        "bg-muted-subtle text-muted-foreground flex items-start gap-2.5 rounded-lg border border-transparent px-4 py-3",
         className,
       )}
     >

package/src/internal/Tabs.tsx

@@ -134,7 +134,7 @@ export function Tabs({
                   className={cn(
                     "inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none",
                     isActive
-                      ? "bg-primary/10 text-primary"
+                      ? "bg-primary-subtle text-primary"
                       : "bg-muted text-muted-foreground",
                   )}
                 >

package/src/internal/markdown-components.tsx

@@ -48,7 +48,7 @@ export const MARKDOWN_COMPONENTS: Components = {
     return (
       <a
         href={href}
-        className="text-primary underline underline-offset-2 hover:text-primary/80"
+        className="text-primary underline underline-offset-2 hover:text-primary-muted"
         target="_blank"
         rel="noopener noreferrer"
         {...props}
@@ -174,7 +174,7 @@ export const MARKDOWN_COMPONENTS: Components = {
   th({ children, ...props }: MdProps<"th">) {
     return (
       <th
-        className="border border-border px-3 py-1.5 text-left font-medium text-foreground bg-muted/50"
+        className="border border-border px-3 py-1.5 text-left font-medium text-foreground bg-muted-subtle"
         {...props}
       >
         {children}

package/src/invitation/InvitationCreatedAlert.tsx

@@ -89,7 +89,7 @@ export function InvitationCreatedAlert({
           aria-label="Dismiss"
           className={cn(
             "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "transition-colors",
           )}
         >
@@ -114,7 +114,7 @@ export function InvitationCreatedAlert({
           onClick={handleCopy}
           className={cn(
             "inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "transition-colors",
           )}
         >