@stigmer/react 0.2.3 → 0.3.0

package/src/execution/MessageEntry.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Markdown from "react-markdown";
 import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
@@ -20,9 +21,11 @@ export interface MessageEntryProps {
  * - `MESSAGE_HUMAN` — plain text with muted background
  * - `MESSAGE_AI` — markdown-rendered via `react-markdown` + `remark-gfm`,
  *   with a blinking cursor while streaming
+ * - `MESSAGE_THINKING` — collapsible thinking block with subdued styling,
+ *   collapsed by default showing a brief summary
  * - `MESSAGE_SYSTEM` — small muted text
  * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results are
- *   consumed by {@link ToolCallGroup} in SP4)
+ *   consumed by {@link ToolCallGroup})
  *
  * Purely presentational — no data fetching, no state.
  * All visual properties flow through `--stgm-*` tokens.
@@ -44,6 +47,14 @@ export function MessageEntry({ message, className }: MessageEntryProps) {
           className={className}
         />
       );
+    case MessageType.MESSAGE_THINKING:
+      return (
+        <ThinkingMessage
+          content={message.content}
+          isStreaming={message.isStreaming}
+          className={className}
+        />
+      );
     case MessageType.MESSAGE_SYSTEM:
       return <SystemMessage content={message.content} className={className} />;
     default:
@@ -103,6 +114,69 @@ function AiMessage({
   );
 }
 
+const THINKING_PREVIEW_LENGTH = 80;
+
+function ThinkingMessage({
+  content,
+  isStreaming,
+  className,
+}: {
+  content: string;
+  isStreaming: boolean;
+  className?: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hasContent = content.trim().length > 0;
+
+  if (!hasContent && !isStreaming) return null;
+
+  const preview = content.length > THINKING_PREVIEW_LENGTH
+    ? content.slice(0, THINKING_PREVIEW_LENGTH).trimEnd() + "..."
+    : content;
+
+  return (
+    <div
+      role="article"
+      aria-label="Model thinking"
+      className={cn("px-4 py-1.5", className)}
+    >
+      <button
+        type="button"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((v) => !v)}
+        className={cn(
+          "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors",
+          "hover:text-foreground cursor-pointer",
+        )}
+      >
+        <ThinkingIcon isStreaming={isStreaming} />
+        <span className="min-w-0 truncate">
+          {isStreaming && !hasContent
+            ? "Thinking..."
+            : expanded
+              ? "Thinking"
+              : preview}
+        </span>
+        {hasContent && <ChevronIcon expanded={expanded} />}
+      </button>
+
+      {expanded && hasContent && (
+        <div className="mt-1.5 border-l-2 border-muted-foreground/20 pl-3">
+          <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">
+            {content}
+            {isStreaming && (
+              <span
+                className="inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5"
+                aria-hidden="true"
+              />
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SystemMessage({
   content,
   className,
@@ -121,3 +195,62 @@ function SystemMessage({
   );
 }
 
+function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
+  if (isStreaming) {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="shrink-0 animate-spin"
+        aria-hidden="true"
+      >
+        <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <circle cx="6" cy="5" r="3.5" />
+      <path d="M4.5 9.5C4.5 8.5 5 8 6 8s1.5.5 1.5 1.5" />
+      <circle cx="5" cy="4.5" r="0.5" fill="currentColor" />
+      <circle cx="7" cy="4.5" r="0.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        "shrink-0 transition-transform duration-150",
+        expanded && "rotate-90",
+      )}
+      aria-hidden="true"
+    >
+      <path d="M3.5 2L6.5 5L3.5 8" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -18,19 +18,32 @@ export {
 export { type DeploymentMode, isResourceAvailable, ApiResourceKind } from "@stigmer/sdk";
 export { CloudFeatureNotice, type CloudFeatureNoticeProps } from "./internal/CloudFeatureNotice";
 
-// Models — data hook, styled component, and registry data
+// Models — data hook, styled components, and registry data
 export {
   MODEL_REGISTRY,
   DEFAULT_MODEL_ID,
+  DEFAULT_CURSOR_MODEL_ID,
+  DISABLED_PROVIDERS,
+  modelKey,
+  parseModelKey,
   useModelRegistry,
   ModelSelector,
+  HarnessSelector,
+  DEFAULT_HARNESS,
+  HARNESS_LABELS,
+  toProtoHarness,
+  fromProtoHarness,
 } from "./models";
 export type {
   ModelInfo,
+  ParsedModelKey,
   Provider,
   CostTier,
   UseModelRegistryReturn,
+  UseModelRegistryOptions,
   ModelSelectorProps,
+  HarnessSelectorProps,
+  HarnessOption,
 } from "./models";
 
 // Workspace — behavior hooks and styled components
@@ -92,6 +105,7 @@ export type {
   UseNewSessionFlowReturn,
   UseSessionPageFlowOptions,
   UseSessionPageFlowReturn,
+  UsePersistedModelOptions,
   UsePersistedModelReturn,
   UseEditSessionPrepReturn,
   DraftResourceType,

package/src/models/HarnessSelector.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useRef, type KeyboardEvent } from "react";
+import { HARNESS_LABELS, type HarnessOption } from "./harness";
+
+const OPTIONS: readonly HarnessOption[] = ["native", "cursor"];
+
+/** Props for {@link HarnessSelector}. */
+export interface HarnessSelectorProps {
+  /** Currently selected harness. */
+  readonly value: HarnessOption;
+  /** Called when the user picks a different harness. */
+  readonly onValueChange: (harness: HarnessOption) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+  /** When true, disables the selector. */
+  readonly disabled?: boolean;
+}
+
+/**
+ * Compact segmented control for choosing the session execution engine.
+ *
+ * Renders two mutually exclusive options — "Stigmer" (native) and
+ * "Cursor" (premium) — as adjacent pill segments. The Cursor segment
+ * carries a subtle premium tier indicator.
+ *
+ * Built as a `radiogroup` with full arrow-key navigation and ARIA
+ * semantics. All visual properties flow through `--stgm-*` tokens.
+ *
+ * Platform builders who need different rendering use
+ * {@link HarnessOption} and {@link HARNESS_LABELS} directly.
+ *
+ * @deprecated Use {@link ModelSelector} in unified mode (without the
+ * `harness` prop) instead. The unified model picker embeds an engine
+ * tag on each model row, eliminating the need for a separate harness
+ * control. This component is kept for backward compatibility.
+ *
+ * @example
+ * ```tsx
+ * function LauncherToolbar() {
+ *   const [harness, setHarness] = useState<HarnessOption>("native");
+ *
+ *   return <HarnessSelector value={harness} onValueChange={setHarness} />;
+ * }
+ * ```
+ */
+export function HarnessSelector({
+  value,
+  onValueChange,
+  className,
+  disabled,
+}: HarnessSelectorProps) {
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+
+      const idx = OPTIONS.indexOf(value);
+      let next: number | undefined;
+
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        next = (idx + 1) % OPTIONS.length;
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        next = (idx - 1 + OPTIONS.length) % OPTIONS.length;
+      }
+
+      if (next !== undefined) {
+        e.preventDefault();
+        onValueChange(OPTIONS[next]);
+        const buttons = groupRef.current?.querySelectorAll<HTMLButtonElement>("[role=radio]");
+        buttons?.[next]?.focus();
+      }
+    },
+    [value, onValueChange, disabled],
+  );
+
+  return (
+    <div
+      ref={groupRef}
+      role="radiogroup"
+      aria-label="Execution engine"
+      onKeyDown={handleKeyDown}
+      className={[
+        "inline-flex items-center rounded-md border border-border bg-background p-0.5",
+        disabled ? "pointer-events-none opacity-50" : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {OPTIONS.map((option) => {
+        const isActive = value === option;
+
+        return (
+          <button
+            key={option}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={HARNESS_LABELS[option]}
+            tabIndex={isActive ? 0 : -1}
+            disabled={disabled}
+            onClick={() => {
+              if (!isActive) onValueChange(option);
+            }}
+            className={[
+              "inline-flex items-center gap-1 rounded-[5px] px-2 py-1 text-xs transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none",
+              isActive
+                ? "bg-accent font-medium text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            ].join(" ")}
+          >
+            {HARNESS_LABELS[option]}
+            {option === "cursor" && (
+              <span
+                aria-label="premium"
+                className="text-[0.6rem] text-muted-foreground"
+              >
+                $$$
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}