@stigmer/react 3.1.1 → 3.1.3

package/src/session/PlanStreamingDocument.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useMemo } from "react";
+import { Streamdown } from "streamdown";
+import {
+  PLAN_DOCUMENT_MARKDOWN_COMPONENTS,
+  extractLeadingH1,
+} from "../internal/markdown-components.js";
+
+/** Props for {@link PlanStreamingDocument}. */
+export interface PlanStreamingDocumentProps {
+  /**
+   * The live plan text, already fence-stripped by `findStreamingPlan`
+   * (`StreamingPlan.displayText`). Grows on every stream commit.
+   */
+  readonly displayText: string;
+}
+
+/**
+ * The plan document tab's LIVE view: renders the plan as it streams, before
+ * any artifact exists. The streaming counterpart of {@link PlanEditor} — same
+ * centered document column, same header-lifted title, same plan-document
+ * typography — so the moment the turn completes and the artifact-backed
+ * editor takes over, the document simply stops moving rather than changing
+ * shape.
+ *
+ * Deliberately capability-free: no view tabs, no Edit, no Build — a plan in
+ * flight cannot be edited or implemented, and offering dead controls would
+ * misstate the turn's state. A "Writing…" status pill stands where the
+ * editor's toolbar will appear.
+ *
+ * Rendering goes through `Streamdown` (the same streaming-aware renderer the
+ * thread's `AiMessage` uses: block-level memoization, incomplete-syntax
+ * healing, animated caret) rather than `PlanEditor`'s static markdown — this
+ * component re-renders on every stream commit by design.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export function PlanStreamingDocument({
+  displayText,
+}: PlanStreamingDocumentProps) {
+  const { title, body } = useMemo(
+    () => extractLeadingH1(displayText),
+    [displayText],
+  );
+
+  return (
+    <div
+      role="article"
+      aria-label="Plan document"
+      aria-busy="true"
+      className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-3"
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <span
+          role="status"
+          className="inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground"
+        >
+          <WritingDot />
+          Writing…
+        </span>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-border-muted bg-card">
+        {title && (
+          <header className="border-b border-border-muted bg-muted-faint px-4 py-2.5">
+            <span className="block truncate text-sm font-semibold text-foreground">
+              {title}
+            </span>
+          </header>
+        )}
+        <div className="stgm-prose px-4 py-4">
+          <Streamdown
+            components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
+            isAnimating
+            caret="block"
+          >
+            {body}
+          </Streamdown>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The pill's pulsing dot — a CSS animation inside `.stgm`, covered by the
+ * stylesheet's global `prefers-reduced-motion` rule (DD-015).
+ */
+function WritingDot() {
+  return (
+    <span
+      aria-hidden="true"
+      className="size-1.5 animate-pulse rounded-full bg-primary"
+    />
+  );
+}

package/src/session/SessionPanelChip.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link SessionPanelChip}. */
+export interface SessionPanelChipProps {
+  /** Whether the panel is currently expanded. */
+  readonly isOpen: boolean;
+  /** Toggles the panel open/collapsed. */
+  readonly onToggle: () => void;
+  /**
+   * Aggregate count of facet items (write-backs + artifacts) awaiting the
+   * user. Rendered as a dot-count while collapsed — the panel's only "something
+   * arrived" signal, since arrivals never auto-open the panel.
+   */
+  readonly badgeCount?: number;
+}
+
+/**
+ * The always-mounted top-right toggle for the unified session panel — the
+ * Cursor "Show panel" chip. Collapsed, it carries the pending-item count;
+ * open, it is the hide affordance. Being a small leaf, it is also the one
+ * place that may safely carry per-arrival re-renders while the panel subtree
+ * is unmounted. Execution status deliberately does not surface here (or
+ * anywhere else in the viewer chrome) — the thread itself communicates run
+ * state.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function SessionPanelChip({
+  isOpen,
+  onToggle,
+  badgeCount,
+}: SessionPanelChipProps) {
+  const showCount = !isOpen && badgeCount != null && badgeCount > 0;
+
+  // Focus restoration: collapsing unmounts the panel subtree, so keyboard
+  // focus that lived inside it (rail, tabs, viewer) falls to <body>. Reclaim
+  // it here — the chip is the collapse's logical origin. Focus resting
+  // anywhere else (e.g. the composer) is respected. Opening deliberately does
+  // NOT move focus: the chip is a standard disclosure trigger.
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const prevOpenRef = useRef(isOpen);
+  useEffect(() => {
+    if (prevOpenRef.current && !isOpen && document.activeElement === document.body) {
+      buttonRef.current?.focus();
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      onClick={onToggle}
+      aria-expanded={isOpen}
+      aria-label={isOpen ? "Hide panel" : "Show panel"}
+      title={isOpen ? "Hide panel" : "Show panel"}
+      className={cn(
+        "flex items-center gap-1.5 rounded-md border border-border bg-card px-1.5 py-1",
+        "text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      )}
+    >
+      {showCount && (
+        <span
+          aria-label={`${badgeCount} new items`}
+          className="inline-flex min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 py-px text-[10px] font-medium leading-none text-primary-foreground"
+        >
+          {badgeCount}
+        </span>
+      )}
+      <PanelIcon open={isOpen} />
+    </button>
+  );
+}
+
+/**
+ * Panel-layout glyph: a frame with its right region filled while the panel is
+ * open, hollow while collapsed — mirroring the state it toggles to at a glance.
+ */
+function PanelIcon({ open }: { readonly open: boolean }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+      <path d="M9.5 2.5v11" />
+      {open && (
+        <rect x="9.5" y="2.5" width="5" height="11" rx="1.5" fill="currentColor" stroke="none" />
+      )}
+    </svg>
+  );
+}