@stigmer/react 3.1.1 → 3.1.3

package/src/session/NewSessionViewer.tsx

@@ -5,13 +5,19 @@ 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";
+import type { WorkspaceFileReader } from "../workspace/WorkspaceFileReader.js";
+import type { WorkspaceContentSearcher } from "../workspace/WorkspaceContentSearcher.js";
 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 { SessionInspector } from "./inspector/SessionInspector.js";
-import type { SetupTabProps } from "./inspector/SetupTab.js";
+import { useWorkspaceEditors } from "../internal/store/index.js";
+import { WorkspaceSurface } from "../workspace/WorkspaceSurface.js";
+import type { SetupTabProps } from "./facets/SetupTab.js";
 import { useNewSessionFlow } from "./useNewSessionFlow.js";
+import { useSessionPanel } from "./useSessionPanel.js";
+import { useSessionRailViews } from "./useSessionRailViews.js";
+import { SessionPanelChip } from "./SessionPanelChip.js";
 import type { RuntimeEnvProvider } from "./runtime-env.js";
 import type { SessionAudience } from "./audience.js";
 
@@ -47,6 +53,20 @@ export interface NewSessionViewerProps {
    */
   readonly workspaceFileLister?: WorkspaceFileLister;
 
+  /**
+   * Platform-injected content reader for the read-only file viewer. When set,
+   * clicking a file in the Workspace tree opens it in a contextual "Viewer"
+   * tab — the same capability `SessionViewer` accepts (DD-016 parity).
+   */
+  readonly workspaceFileReader?: WorkspaceFileReader;
+
+  /**
+   * Platform-injected content (text) searcher — the same capability
+   * `SessionViewer` accepts (DD-016 parity). Desktop injects a native
+   * ripgrep-backed searcher; web leaves it undefined (DD-09).
+   */
+  readonly workspaceContentSearcher?: WorkspaceContentSearcher;
+
   /**
    * Supplies host-app environment variables for the session's first
    * execution (e.g. short-lived credentials for MCP tools, minted as
@@ -119,9 +139,10 @@ export interface NewSessionViewerProps {
  * Owns `useNewSessionFlow` internally and composes:
  * - **Centered composer** (primary pane): `SessionComposer` with all
  *   context pickers (agent, workspace, MCP servers, skills)
- * - **SessionInspector** (secondary pane): progressively revealed when
- *   context is attached (workspace/agent/MCP/skills/vars non-empty),
- *   showing only the Setup tab with interactive workspace actions.
+ * - **Session panel** (secondary pane): the unified `WorkspaceSurface` with a
+ *   Config rail view — collapsed by default behind a persistent top-right chip
+ *   and homing on the Config facet when opened. Same layout model as
+ *   `SessionViewer` (DD-016).
  *
  * Framework-agnostic — no Next.js, no Tauri, no routing deps. Host
  * apps inject platform-specific values via props (DD-004/DD-016).
@@ -156,6 +177,8 @@ export function NewSessionViewer({
   enableLocal = false,
   onBrowseLocalFolder,
   workspaceFileLister,
+  workspaceFileReader,
+  workspaceContentSearcher,
   getRuntimeEnv,
   audience = "integrator",
   defaultHarness,
@@ -179,12 +202,25 @@ export function NewSessionViewer({
   const [interactionMode, setInteractionMode] = useState<InteractionModeOption>("agent");
   const isEndUser = audience === "endUser";
 
-  const hasContext =
-    flow.workspace.hasEntries ||
-    flow.agentRef !== null ||
-    flow.mcpServerUsages.length > 0 ||
-    flow.skillRefs.length > 0 ||
-    (flow.sessionVariables != null && !flow.sessionVariables.isEmpty);
+  // The unified-panel controller (shared with SessionViewer, DD-016). The
+  // launcher has no execution yet, so the FSM inputs are static. It has no
+  // streaming column to isolate either, so subscribing to the editor group in
+  // the body is harmless — unlike `SessionViewer`, which subscribes one level
+  // down. Homes on Config: pre-session the Explorer is empty, while Config
+  // carries the run defaults (harness/model) worth seeing before starting.
+  const panel = useSessionPanel({
+    phase: null,
+    hasChanges: false,
+    defaultView: "configure",
+  });
+  const { editors, activeKey, activeFile, reveal } = useWorkspaceEditors(
+    panel.editorsStore,
+  );
+
+  // Honor a jump-to-line reveal only while it targets the active editor
+  // (DD-016 parity with SessionViewer).
+  const activeReveal =
+    reveal && reveal.key === activeKey ? reveal : undefined;
 
   const handleRemoveAgent = useCallback(() => {
     flow.setAgentRef(null);
@@ -240,26 +276,34 @@ export function NewSessionViewer({
     ],
   );
 
-  const workspaceConfig = useMemo(
-    () => ({
-      actions: {
-        workspace: flow.workspace,
-        enableGitHub,
-        enableLocal,
-        gitHubConnection,
-        onBrowseLocalFolder,
-        workspaceFileLister,
-      },
-    }),
-    [flow.workspace, enableGitHub, enableLocal, gitHubConnection, onBrowseLocalFolder, workspaceFileLister],
-  );
+  // Launcher facets: Config only — no executions exist yet, so the
+  // execution-derived facets (Changes/Artifacts/Usage) don't apply.
+  const railViews = useSessionRailViews({
+    allExecutions: [],
+    org,
+    sessionConfig,
+    selectedItem: null,
+    includeExecutionFacets: false,
+  });
+
+  // Explorer-footer folder attach (desktop only — needs the native picker).
+  const canAddLocalFolder = enableLocal && !!onBrowseLocalFolder;
+  const handleAddLocalFolder = useCallback(async () => {
+    const path = await onBrowseLocalFolder?.();
+    if (path) flow.workspace.addLocalPath(path);
+  }, [onBrowseLocalFolder, flow.workspace.addLocalPath]);
 
   const composerNode = (
-    <div className="flex h-full flex-col items-center overflow-y-auto px-4">
-      <div className={cn(
-        "w-full max-w-2xl space-y-6",
-        hasContext ? "my-6" : "my-auto",
-      )}>
+    // `my-auto` centers the composer vertically whether or not context is
+    // attached — safe-centering, not a special case: auto margins absorb free
+    // space when the composer is shorter than the pane and collapse to zero
+    // when it outgrows it, degrading to a normal top-aligned scroll. The
+    // scroll container's `py-6` keeps breathing room in that overflow case.
+    // Do NOT reintroduce a context-driven position flip: the composer must not
+    // move as context is attached (DD-16's layout-stability rationale — chrome
+    // that shifts with attached context reads as instability).
+    <div className="flex h-full flex-col items-center overflow-y-auto px-4 py-6">
+      <div className="my-auto w-full max-w-2xl space-y-6">
         <h1 className="text-center text-lg font-medium text-foreground">
           {heading}
         </h1>
@@ -308,38 +352,62 @@ export function NewSessionViewer({
     </div>
   );
 
-  if (!hasContext) {
-    return (
-      <div className={cn("flex h-full w-full flex-col", className)}>
-        {composerNode}
+  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. */}
+      <div className="absolute top-2 right-6 z-10">
+        <SessionPanelChip
+          isOpen={panel.isOpen}
+          onToggle={panel.isOpen ? panel.closePanel : panel.openPanel}
+        />
       </div>
-    );
-  }
 
-  return (
-    <div className={cn("flex h-full w-full flex-col", className)}>
+      {/* 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
-        defaultSize={320}
-        minSize={240}
-        maxSize={480}
-        storageKey="stgm-new-session-inspector-width"
-        className={cn(
-          "min-h-0 flex-1",
-          "[&>*:nth-child(2)]:max-lg:hidden [&>*:nth-child(3)]:max-lg:hidden",
-        )}
+        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={
-          <aside className="flex h-full flex-col overflow-hidden">
-            <SessionInspector
-              displayExecution={null}
-              allExecutions={[]}
-              org={org}
-              selectedItem={null}
-              sessionConfig={sessionConfig}
-              workspaceConfig={workspaceConfig}
-              className="min-h-0 flex-1"
+          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"
             />
-          </aside>
+          ) : null
         }
       />
     </div>

package/src/session/PlanEditor.tsx

@@ -0,0 +1,361 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Markdown from "react-markdown";
+import { cn } from "@stigmer/theme";
+import {
+  PLAN_DOCUMENT_MARKDOWN_COMPONENTS,
+  REMARK_PLUGINS,
+  extractLeadingH1,
+  unwrapEnclosingMarkdownFence,
+} from "../internal/markdown-components.js";
+import { useArtifactContent } from "../execution/useArtifactContent.js";
+import { useBuildFromPlanHotkey } from "../execution/use-build-from-plan-hotkey.js";
+import { formatArtifactSize } from "../execution/artifact-utils.js";
+import type { SessionPlan } from "../library/detect-plan-artifact.js";
+import type { PlanDraftController } from "./usePlanDraft.js";
+
+/** Props for {@link PlanEditor}. */
+export interface PlanEditorProps {
+  /** The plan to display (latest, or a superseded plan opened from its card). */
+  readonly plan: SessionPlan;
+  /**
+   * Draft controller owned by the viewer (survives panel collapse/unmounts).
+   * Consulted only when editable — a read-only (superseded) plan renders its
+   * own artifact text, never the current plan's draft.
+   */
+  readonly draft?: PlanDraftController;
+  /** Builds from the plan — the same action as the thread card's primary. */
+  readonly onBuildFromPlan?: () => void;
+  /** Disables the Build action (execution in flight, or build submitting). */
+  readonly buildDisabled?: boolean;
+  /**
+   * Renders the plan as a historical, read-only document: no Edit view, no
+   * Build action, and a "superseded" notice. Used when the user opens a plan
+   * that a newer plan has since replaced.
+   */
+  readonly readOnly?: boolean;
+}
+
+type PlanEditorView = "rendered" | "source" | "edit";
+
+/**
+ * The plan document for the workspace surface's editor area — the wide-pane
+ * successor of the retired Plan sidebar facet, mounted as a virtual document
+ * (`SurfaceVirtualDocument`) under the {@link PLAN_DOCUMENT_ENTRY_ID} tab.
+ *
+ * Three views over one text:
+ * - **Rendered** — the plan as a document (same typography as the thread's
+ *   plan rendering, title lifted from the leading H1).
+ * - **Source** — the raw markdown.
+ * - **Edit** — a plain-textarea editor over a LOCAL draft
+ *   ({@link PlanDraftController}); the published artifact is never mutated.
+ *   Building from an edited plan delivers the draft to the implement
+ *   execution (edit-as-input).
+ *
+ * All views show the *effective* plan — the draft when one exists, the
+ * published artifact otherwise — so what the user reviews is exactly what
+ * Build will implement. An "Edited" indicator plus Revert makes the overlay
+ * visible and reversible.
+ *
+ * Editing is disabled for truncated content (the content RPC caps at 512 KB):
+ * editing a truncated plan would silently drop its tail on handoff. The
+ * document still renders read-only with the truncation notice.
+ *
+ * Holds no must-survive local state: the panel region unmounts wholesale on
+ * collapse, so anything that must outlive it (the draft, the fetched content
+ * cache) is owned above. The view pick resetting to Rendered on reopen is
+ * deliberate.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export function PlanEditor({
+  plan,
+  draft,
+  onBuildFromPlan,
+  buildDisabled,
+  readOnly,
+}: PlanEditorProps) {
+  const [view, setView] = useState<PlanEditorView>("rendered");
+  const canBuild = !readOnly && onBuildFromPlan !== undefined;
+  const handleKeyDown = useBuildFromPlanHotkey(
+    canBuild ? onBuildFromPlan : undefined,
+    buildDisabled,
+  );
+
+  const { content, isTruncated, isLoading, error, refetch } =
+    useArtifactContent(
+      plan.executionId,
+      plan.artifact.storageKey,
+      undefined,
+      plan.artifact.contentHash,
+    );
+
+  const activeDraft = readOnly ? undefined : draft;
+  const effectiveText = activeDraft?.draftText ?? content;
+  // A read-only plan (or one without a draft controller) never offers Edit;
+  // a truncated plan only keeps it while an existing draft needs rescuing.
+  const canEdit = activeDraft !== undefined && (!isTruncated || activeDraft.isEdited);
+  const activeView: PlanEditorView = view === "edit" && !canEdit ? "rendered" : view;
+
+  if (isLoading) {
+    return (
+      <PlanEditorFrame>
+        <PlanEditorSkeleton />
+      </PlanEditorFrame>
+    );
+  }
+
+  if (error || effectiveText === null) {
+    return (
+      <PlanEditorFrame>
+        <div className="flex flex-col items-center gap-2 px-4 py-8 text-center">
+          <p className="text-xs text-muted-foreground">
+            Couldn&rsquo;t load the plan{error ? `: ${error.message}` : "."}
+          </p>
+          <button
+            type="button"
+            onClick={refetch}
+            className="rounded text-xs font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Retry
+          </button>
+        </div>
+      </PlanEditorFrame>
+    );
+  }
+
+  return (
+    <PlanEditorFrame onKeyDown={handleKeyDown}>
+      {/* Toolbar: view tabs lead; state + the one primary action trail.
+          Narrow panes are first-class: rows wrap (flex-wrap) and every item
+          can shrink (min-w-0 + truncating labels), so the toolbar reflows
+          instead of forcing the document pane to scroll sideways. */}
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <div
+          className="inline-flex shrink-0 rounded-md bg-muted p-0.5"
+          role="tablist"
+          aria-label="Plan view"
+        >
+          <ViewTab
+            active={activeView === "rendered"}
+            onClick={() => setView("rendered")}
+            label="Rendered"
+          />
+          <ViewTab
+            active={activeView === "source"}
+            onClick={() => setView("source")}
+            label="Source"
+          />
+          {activeDraft !== undefined && (
+            <ViewTab
+              active={activeView === "edit"}
+              onClick={() => setView("edit")}
+              label="Edit"
+              disabled={!canEdit}
+              title={
+                !canEdit
+                  ? "This plan is too large to edit in place — download it instead."
+                  : undefined
+              }
+            />
+          )}
+        </div>
+        <span className="text-[0.65rem] tabular-nums text-muted-foreground-faint">
+          {formatArtifactSize(plan.artifact.sizeBytes)}
+        </span>
+
+        <div className="ml-auto flex min-w-0 flex-wrap items-center gap-3">
+          {activeDraft?.isEdited && (
+            <span className="inline-flex items-center gap-2">
+              <span className="rounded-md bg-accent px-1.5 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+                Edited
+              </span>
+              <button
+                type="button"
+                onClick={() => activeDraft.setDraft(null)}
+                className="rounded text-[0.65rem] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                Revert
+              </button>
+            </span>
+          )}
+          {readOnly ? (
+            <span
+              role="status"
+              className="rounded-md bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground"
+            >
+              Superseded by a newer plan
+            </span>
+          ) : (
+            onBuildFromPlan && (
+              <button
+                type="button"
+                disabled={buildDisabled}
+                onClick={onBuildFromPlan}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1.5 rounded-md px-3 py-1.5",
+                  "text-xs font-medium transition-colors",
+                  "bg-primary text-primary-foreground hover:bg-primary-hover",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                )}
+              >
+                <ImplementIcon />
+                <span className="truncate">
+                  {buildDisabled ? "Starting build…" : "Build"}
+                </span>
+              </button>
+            )
+          )}
+        </div>
+      </div>
+
+      {activeView === "rendered" && <RenderedPlan text={effectiveText} />}
+      {activeView === "source" && (
+        <pre className="overflow-x-auto rounded-md bg-muted p-3 font-mono text-xs whitespace-pre-wrap text-foreground">
+          {effectiveText}
+        </pre>
+      )}
+      {activeView === "edit" && activeDraft !== undefined && (
+        <textarea
+          value={effectiveText}
+          onChange={(e) => activeDraft.setDraft(e.target.value)}
+          aria-label="Edit plan"
+          spellCheck={false}
+          rows={28}
+          className={cn(
+            "w-full flex-1 resize-y rounded-md border border-border bg-card p-3",
+            "font-mono text-xs leading-relaxed text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        />
+      )}
+
+      {isTruncated && (
+        <p role="status" className="text-[0.65rem] text-muted-foreground">
+          Preview truncated — download the artifact for the full plan.
+        </p>
+      )}
+    </PlanEditorFrame>
+  );
+}
+
+/**
+ * The editor-area envelope: a centered document column so the plan reads as a
+ * page rather than stretching across the full pane width.
+ */
+function PlanEditorFrame({
+  children,
+  onKeyDown,
+}: {
+  readonly children: React.ReactNode;
+  readonly onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}) {
+  return (
+    <div
+      role="article"
+      aria-label="Plan document"
+      onKeyDown={onKeyDown}
+      className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-3"
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The plan document: title lifted from the leading H1, body in the shared
+ * plan-document typography — identical treatment to the thread's plan
+ * rendering, so the plan reads the same on every surface.
+ */
+function RenderedPlan({ text }: { readonly text: string }) {
+  const { title, body } = useMemo(
+    () => extractLeadingH1(unwrapEnclosingMarkdownFence(text, true)),
+    [text],
+  );
+
+  return (
+    <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">
+        <Markdown
+          remarkPlugins={REMARK_PLUGINS}
+          components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
+        >
+          {body}
+        </Markdown>
+      </div>
+    </div>
+  );
+}
+
+function PlanEditorSkeleton() {
+  return (
+    <div className="space-y-2 py-2" aria-hidden="true">
+      <div className="h-8 w-full animate-pulse rounded-md bg-muted" />
+      <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+      <div className="h-4 w-full animate-pulse rounded bg-muted" />
+      <div className="h-4 w-5/6 animate-pulse rounded bg-muted" />
+    </div>
+  );
+}
+
+function ViewTab({
+  active,
+  onClick,
+  label,
+  disabled,
+  title,
+}: {
+  readonly active: boolean;
+  readonly onClick: () => void;
+  readonly label: string;
+  readonly disabled?: boolean;
+  readonly title?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={cn(
+        "rounded px-2 py-0.5 text-[0.65rem] font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        active
+          ? "bg-card text-foreground shadow-sm"
+          : "text-muted-foreground hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+function ImplementIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 6h8M7 3l3 3-3 3" />
+    </svg>
+  );
+}