@stigmer/react 1.0.3 → 2.0.0

package/src/session/inspector/SetupTab.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import type { McpServerUsageInput, ResourceRef } from "@stigmer/sdk";
+import { cn } from "@stigmer/theme";
+import type { HarnessOption } from "../../models/harness";
+import { HARNESS_META } from "../../models/harness";
+import type { ExecutionTargetOption } from "../execution-target";
+import type { UseSessionVariablesReturn } from "../../execution/useSessionVariables";
+
+/** Interactive mutation callbacks for config items in SetupTab. */
+export interface SetupTabMutationCallbacks {
+  /** Remove the current agent. Absent = non-removable (e.g. default agent). */
+  readonly onRemoveAgent?: () => void;
+  /** Remove an MCP server by its org/slug ref. */
+  readonly onRemoveMcp?: (ref: ResourceRef) => void;
+  /** Remove a skill by its org/slug ref. */
+  readonly onRemoveSkill?: (ref: ResourceRef) => void;
+}
+
+/** Props for {@link SetupTab}. */
+export interface SetupTabProps {
+  readonly agentRef: ResourceRef | null;
+  readonly isDefaultAgent: boolean;
+  readonly mcpServerUsages: readonly McpServerUsageInput[];
+  readonly skillRefs: readonly ResourceRef[];
+  readonly sessionVariables: UseSessionVariablesReturn | null;
+  readonly harness: HarnessOption;
+  readonly executionTarget: ExecutionTargetOption | undefined;
+  readonly modelId: string | undefined;
+  /**
+   * Interactive mutation callbacks. When provided, items render remove
+   * buttons. When absent, sections are read-only (DD-011).
+   */
+  readonly mutations?: SetupTabMutationCallbacks;
+}
+
+/**
+ * Persistent session configuration panel (Configure tab) — shows agent,
+ * MCP servers, skills, run config, and session variables.
+ *
+ * Workspace management has moved to the dedicated Workspace tab.
+ *
+ * When mutation callbacks are provided via `mutations`, items render
+ * inline remove/reconfigure affordances. When callbacks are absent,
+ * sections render read-only (backward compatible, DD-011).
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function SetupTab({
+  agentRef,
+  isDefaultAgent,
+  mcpServerUsages,
+  skillRefs,
+  sessionVariables,
+  harness,
+  executionTarget,
+  modelId,
+  mutations,
+}: SetupTabProps) {
+  const hasSessionVars = sessionVariables != null && !sessionVariables.isEmpty;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <RunConfigSection
+        harness={harness}
+        executionTarget={executionTarget}
+        modelId={modelId}
+      />
+
+      <AgentSection
+        agentRef={agentRef}
+        isDefaultAgent={isDefaultAgent}
+        onRemove={mutations?.onRemoveAgent}
+      />
+
+      <McpSection
+        mcpServerUsages={mcpServerUsages}
+        onRemove={mutations?.onRemoveMcp}
+      />
+
+      <SkillsSection
+        skillRefs={skillRefs}
+        onRemove={mutations?.onRemoveSkill}
+      />
+
+      {hasSessionVars && (
+        <SessionVarsSection entries={sessionVariables.entries} />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared section primitives
+// ---------------------------------------------------------------------------
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground">
+      {children}
+    </h3>
+  );
+}
+
+function EmptyHint({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="text-xs text-muted-foreground/70">{children}</p>
+  );
+}
+
+function ItemPill({ children, className: cls }: { children: React.ReactNode; className?: string }) {
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-1.5 rounded-md bg-muted-subtle px-2 py-1 text-xs text-foreground",
+      cls,
+    )}>
+      {children}
+    </span>
+  );
+}
+
+function RemoveButton({ onClick, label }: { onClick: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+      aria-label={label}
+    >
+      <XIcon />
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Run config
+// ---------------------------------------------------------------------------
+
+function RunConfigSection({
+  harness,
+  executionTarget,
+  modelId,
+}: {
+  harness: HarnessOption;
+  executionTarget: ExecutionTargetOption | undefined;
+  modelId: string | undefined;
+}) {
+  return (
+    <section className="flex flex-col gap-1.5">
+      <SectionHeading>Run Config</SectionHeading>
+      <div className="flex flex-wrap gap-1.5">
+        <ItemPill>
+          <span className="text-muted-foreground">Harness</span>
+          {HARNESS_META[harness]?.label ?? harness}
+        </ItemPill>
+        {modelId && (
+          <ItemPill>
+            <span className="text-muted-foreground">Model</span>
+            {modelId}
+          </ItemPill>
+        )}
+        {executionTarget && (
+          <ItemPill>
+            <span className="text-muted-foreground">Target</span>
+            {executionTarget === "local" ? "Local" : "Cloud"}
+          </ItemPill>
+        )}
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Agent
+// ---------------------------------------------------------------------------
+
+function AgentSection({
+  agentRef,
+  isDefaultAgent,
+  onRemove,
+}: {
+  agentRef: ResourceRef | null;
+  isDefaultAgent: boolean;
+  onRemove?: () => void;
+}) {
+  return (
+    <section className="flex flex-col gap-1.5">
+      <SectionHeading>Agent</SectionHeading>
+      {agentRef ? (
+        <div className="flex items-center gap-1.5">
+          <ItemPill>
+            {agentRef.slug}
+            {onRemove && !isDefaultAgent && (
+              <RemoveButton onClick={onRemove} label={`Remove agent ${agentRef.slug}`} />
+            )}
+          </ItemPill>
+          {isDefaultAgent && (
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[0.6rem] font-medium text-primary">
+              default
+            </span>
+          )}
+        </div>
+      ) : (
+        <EmptyHint>No agent selected — using platform default.</EmptyHint>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MCP Servers
+// ---------------------------------------------------------------------------
+
+function McpSection({
+  mcpServerUsages,
+  onRemove,
+}: {
+  mcpServerUsages: readonly McpServerUsageInput[];
+  onRemove?: (ref: ResourceRef) => void;
+}) {
+  return (
+    <section className="flex flex-col gap-1.5">
+      <SectionHeading>
+        MCP Servers
+        {mcpServerUsages.length > 0 && (
+          <span className="ml-1 text-muted-foreground/60">({mcpServerUsages.length})</span>
+        )}
+      </SectionHeading>
+      {mcpServerUsages.length > 0 ? (
+        <div className="flex flex-col gap-1">
+          {mcpServerUsages.map((usage) => {
+            const slug = usage.mcpServerRef.slug;
+            const enabledCount = usage.enabledTools?.length;
+            return (
+              <ItemPill key={`${usage.mcpServerRef.org}/${slug}`}>
+                <span>{slug}</span>
+                {enabledCount != null && enabledCount > 0 && (
+                  <span className="text-muted-foreground">
+                    {enabledCount} tool{enabledCount !== 1 ? "s" : ""}
+                  </span>
+                )}
+                {onRemove && (
+                  <RemoveButton
+                    onClick={() => onRemove(usage.mcpServerRef)}
+                    label={`Remove MCP server ${slug}`}
+                  />
+                )}
+              </ItemPill>
+            );
+          })}
+        </div>
+      ) : (
+        <EmptyHint>No MCP servers attached.</EmptyHint>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Skills
+// ---------------------------------------------------------------------------
+
+function SkillsSection({
+  skillRefs,
+  onRemove,
+}: {
+  skillRefs: readonly ResourceRef[];
+  onRemove?: (ref: ResourceRef) => void;
+}) {
+  return (
+    <section className="flex flex-col gap-1.5">
+      <SectionHeading>
+        Skills
+        {skillRefs.length > 0 && (
+          <span className="ml-1 text-muted-foreground/60">({skillRefs.length})</span>
+        )}
+      </SectionHeading>
+      {skillRefs.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {skillRefs.map((ref) => (
+            <ItemPill key={`${ref.org}/${ref.slug}`}>
+              {ref.slug}
+              {onRemove && (
+                <RemoveButton
+                  onClick={() => onRemove(ref)}
+                  label={`Remove skill ${ref.slug}`}
+                />
+              )}
+            </ItemPill>
+          ))}
+        </div>
+      ) : (
+        <EmptyHint>No skills attached.</EmptyHint>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Session Variables (ephemeral, only shown when entries exist)
+// ---------------------------------------------------------------------------
+
+function SessionVarsSection({
+  entries,
+}: {
+  entries: UseSessionVariablesReturn["entries"];
+}) {
+  return (
+    <section className="flex flex-col gap-1.5">
+      <SectionHeading>
+        Session Variables
+        <span className="ml-1 font-normal normal-case tracking-normal text-muted-foreground/60">
+          (next message only)
+        </span>
+      </SectionHeading>
+      <div className="flex flex-col gap-1">
+        {entries.map((entry) => (
+          <ItemPill key={entry.id}>
+            <span className="font-medium">{entry.key || "(unnamed)"}</span>
+            {entry.isSecret ? (
+              <span className="text-muted-foreground">********</span>
+            ) : (
+              <span className="max-w-[140px] truncate text-muted-foreground">{entry.value}</span>
+            )}
+          </ItemPill>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function XIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}

package/src/session/inspector/UsageTab.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { useSessionUsage } from "../useSessionUsage";
+import { UsageWidget } from "../../execution/UsageWidget";
+
+export interface UsageTabProps {
+  readonly executions: readonly AgentExecution[];
+}
+
+/**
+ * Usage facet for the SessionInspector.
+ *
+ * Uses `useSessionUsage` to determine if data exists, then delegates
+ * rendering to the existing `UsageWidget`. Shows an empty state when
+ * no usage data is available.
+ */
+export function UsageTab({ executions }: UsageTabProps) {
+  const usage = useSessionUsage(executions);
+
+  if (!usage.hasUsage) {
+    return (
+      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+        <p className="text-xs text-muted-foreground">
+          No usage data yet. Cost and token stats will appear here.
+        </p>
+      </div>
+    );
+  }
+
+  return <UsageWidget executions={executions} />;
+}

package/src/session/inspector/WorkspaceTab.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { UseWorkspaceEntriesReturn, WorkspaceEntry } from "../../workspace/useWorkspaceEntries";
+import type { WorkspaceFileLister } from "../../workspace/WorkspaceFileLister";
+import { WorkspaceEntryFiles } from "../../workspace/WorkspaceEntryFiles";
+import type { UseGitHubConnectionReturn } from "../../github/useGitHubConnection";
+
+/**
+ * Interactive workspace actions required by the Workspace tab.
+ * Mirrors the shape from SetupTab for consistency but is the
+ * primary owner going forward.
+ */
+export interface WorkspaceTabActions {
+  readonly workspace: UseWorkspaceEntriesReturn;
+  readonly enableGitHub?: boolean;
+  readonly enableLocal?: boolean;
+  readonly gitHubConnection?: UseGitHubConnectionReturn;
+  readonly onBrowseLocalFolder?: () => Promise<string | null>;
+  readonly workspaceFileLister?: WorkspaceFileLister;
+}
+
+/** Props for {@link WorkspaceTab}. */
+export interface WorkspaceTabProps {
+  readonly actions: WorkspaceTabActions;
+}
+
+/**
+ * Dedicated workspace tab for the SessionInspector.
+ *
+ * Provides a full-height layout for managing workspace entries:
+ * - Entry list with expandable file trees (accordion, one at a time)
+ * - Add actions: Browse Folder and Connect GitHub
+ * - Short display names with full path on hover
+ *
+ * Entries start collapsed by default to avoid expensive file-listing
+ * fetches until the user explicitly expands one.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function WorkspaceTab({ actions }: WorkspaceTabProps) {
+  const {
+    workspace,
+    enableGitHub = true,
+    enableLocal = false,
+    onBrowseLocalFolder,
+    workspaceFileLister,
+  } = actions;
+
+  const canBrowse = enableLocal && onBrowseLocalFolder;
+  const hasEntries = workspace.entries.length > 0;
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      {hasEntries && (
+        <WorkspaceEntryList
+          entries={workspace.entries}
+          onRemove={workspace.remove}
+          lister={workspaceFileLister}
+        />
+      )}
+
+      {!hasEntries && (
+        <EmptyState />
+      )}
+
+      <div className="flex flex-col gap-0.5">
+        {canBrowse && (
+          <button
+            type="button"
+            onClick={async () => {
+              const path = await onBrowseLocalFolder();
+              if (path) workspace.addLocalPath(path);
+            }}
+            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover"
+          >
+            <FolderPlusIcon />
+            <span className="flex-1 text-left">Browse Folder</span>
+          </button>
+        )}
+        {enableGitHub && (
+          <button
+            type="button"
+            onClick={() => {
+              /* GitHub picker is handled via the composer's Configure menu.
+                 This button is a placeholder affordance for visual parity. */
+            }}
+            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover"
+          >
+            <GitHubIcon />
+            <span className="flex-1 text-left">Connect GitHub</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Workspace entry list — accordion with file tree expansion
+// ---------------------------------------------------------------------------
+
+function WorkspaceEntryList({
+  entries,
+  onRemove,
+  lister,
+}: {
+  readonly entries: readonly WorkspaceEntry[];
+  readonly onRemove: (id: string) => void;
+  readonly lister: WorkspaceFileLister | undefined;
+}) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {entries.map((entry) => {
+        const isExpandable = !!lister;
+        const isExpanded = expandedId === entry.id;
+
+        return (
+          <div key={entry.id} className="flex flex-col">
+            <div
+              className={cn(
+                "flex items-center gap-2 rounded-md border border-border bg-muted-faint px-2.5 py-2 text-xs",
+                isExpandable && "cursor-pointer hover:bg-muted transition-colors",
+              )}
+              onClick={isExpandable ? () => toggleExpand(entry.id) : undefined}
+              role={isExpandable ? "button" : undefined}
+              aria-expanded={isExpandable ? isExpanded : undefined}
+              tabIndex={isExpandable ? 0 : undefined}
+              onKeyDown={isExpandable ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleExpand(entry.id);
+                }
+              } : undefined}
+            >
+              {isExpandable && (
+                <span className="shrink-0 text-[10px] text-muted-foreground-subtle">
+                  {isExpanded ? "▼" : "▶"}
+                </span>
+              )}
+              {entry.type === "git" ? (
+                <GitHubIcon />
+              ) : (
+                <FolderIcon />
+              )}
+              <div className="min-w-0 flex-1">
+                <span
+                  className="block truncate font-medium text-foreground"
+                  title={entry.type === "local" ? entry.localPath : entry.gitUrl}
+                >
+                  {entry.name}
+                </span>
+                {entry.type === "git" && entry.gitBranch && (
+                  <span className="block truncate text-[0.6rem] text-muted-foreground">
+                    {entry.gitBranch}
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemove(entry.id);
+                }}
+                className="shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+                aria-label={`Remove ${entry.name}`}
+              >
+                <XIcon />
+              </button>
+            </div>
+            {isExpandable && lister && (
+              <WorkspaceEntryFiles
+                entry={entry}
+                lister={lister}
+                isExpanded={isExpanded}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
+      <FolderIcon className="h-8 w-8 text-muted-foreground/40" />
+      <div className="space-y-1">
+        <p className="text-xs font-medium text-foreground">No workspace attached</p>
+        <p className="text-[0.65rem] text-muted-foreground">
+          Add a folder or GitHub repo for the agent to work with.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function XIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}
+
+function FolderIcon({ className: cls }: { className?: string }) {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={cn("shrink-0 text-muted-foreground", cls)}>
+      <path d="M1.5 3.5V11a1 1 0 001 1h9a1 1 0 001-1V5.5a1 1 0 00-1-1H7L5.5 3H2.5a1 1 0 00-1 .5z" />
+    </svg>
+  );
+}
+
+function FolderPlusIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground">
+      <path d="M1.5 3.5V11a1 1 0 001 1h9a1 1 0 001-1V5.5a1 1 0 00-1-1H7L5.5 3H2.5a1 1 0 00-1 .5z" />
+      <path d="M7 7v3M5.5 8.5h3" />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="shrink-0 text-muted-foreground">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+    </svg>
+  );
+}