@a5c-ai/babysitter-paperclip 0.0.2-staging.02a0ee21

package/src/types.ts

@@ -0,0 +1,130 @@
+/**
+ * Shared types for the Babysitter Paperclip plugin.
+ */
+
+/** Adapter type mapping from Paperclip agent adapterType to babysitter harness name. */
+export const ADAPTER_TYPE_MAP: Record<string, string> = {
+  claude_local: "claude-code",
+  codex_local: "codex",
+  gemini_local: "gemini-cli",
+  cursor_local: "cursor",
+  github_copilot: "github-copilot",
+  opencode_local: "opencode",
+  pi_local: "pi",
+  omp_local: "oh-my-pi",
+};
+
+/** A babysitter run tracked by the plugin. */
+export interface TrackedRun {
+  runId: string;
+  processId: string;
+  agentId: string;
+  companyId: string;
+  harnessName: string;
+  status: "running" | "waiting" | "completed" | "failed";
+  createdAt: string;
+  lastIteratedAt?: string;
+  pendingBreakpoints: PendingBreakpoint[];
+}
+
+/** A pending breakpoint awaiting user approval.
+ *
+ * Breakpoint metadata comes from the SDK's breakpoint intrinsic
+ * (runtime/intrinsics/breakpoint.ts). The task.json for a breakpoint has:
+ *   kind: "breakpoint"
+ *   metadata.payload: { question, title, options, expert, tags, strategy, ... }
+ *
+ * The stop hook in the underlying harness (e.g., Claude Code) checks if only
+ * breakpoints are pending and allows the agent to exit (approve decision),
+ * pausing the orchestration loop until the breakpoint is resolved externally.
+ *
+ * CRITICAL: Both approve and reject use --status ok.
+ * Rejection sends { approved: false, feedback: "..." }.
+ * Never use --status error for rejection -- that triggers RUN_FAILED.
+ */
+export interface PendingBreakpoint {
+  effectId: string;
+  title: string;
+  question?: string;
+  description?: string;
+  options?: string[];
+  expert?: string | string[];
+  tags?: string[];
+  strategy?: "single" | "first-response-wins" | "collect-all" | "quorum";
+  previousFeedback?: string;
+  attempt?: number;
+  requestedAt: string;
+}
+
+/** Overview data returned by the runs-overview data handler. */
+export interface RunsOverview {
+  activeRuns: TrackedRun[];
+  pendingBreakpoints: number;
+  totalRuns: number;
+}
+
+/** Detail data for a single run. */
+export interface RunDetail {
+  run: TrackedRun;
+  events: RunEvent[];
+  pendingEffects: PendingEffect[];
+}
+
+/** A journal event from a babysitter run. */
+export interface RunEvent {
+  seq: number;
+  type: string;
+  recordedAt: string;
+  data: Record<string, unknown>;
+}
+
+/** A pending effect from a babysitter run. */
+export interface PendingEffect {
+  effectId: string;
+  kind: string;
+  label: string;
+  taskId: string;
+  requestedAt: string;
+}
+
+/** Result of detecting which harness an agent uses. */
+export interface HarnessDetectionResult {
+  harnessName: string;
+  detectionTier: "agent-metadata" | "env-probe" | "config" | "fallback";
+  confidence: "high" | "medium" | "low";
+}
+
+/**
+ * Breakpoint task definition metadata as written by the SDK.
+ * Extracted from task.json files in runs/<runId>/tasks/<effectId>/.
+ */
+export interface BreakpointTaskDef {
+  kind: "breakpoint";
+  title: string;
+  metadata: {
+    payload: {
+      question?: string;
+      title?: string;
+      options?: string[];
+      expert?: string | string[];
+      tags?: string[];
+      strategy?: string;
+      previousFeedback?: string;
+      attempt?: number;
+      [key: string]: unknown;
+    };
+    requestedAt: string;
+    label: string;
+  };
+}
+
+/**
+ * Harness plugin installation status.
+ * Used to verify the underlying harness has its babysitter plugin installed.
+ */
+export interface HarnessPluginStatus {
+  harnessName: string;
+  cliAvailable: boolean;
+  pluginInstalled: boolean;
+  installCommand?: string;
+}

package/src/ui/BabysitterDashboard.tsx

@@ -0,0 +1,142 @@
+/**
+ * Dashboard widget showing babysitter run overview.
+ *
+ * Displays active runs, pending breakpoints count, and quick status badges.
+ */
+
+import { usePluginData } from "@paperclipai/plugin-sdk/ui";
+import type { PluginWidgetProps } from "@paperclipai/plugin-sdk/ui";
+
+interface RunsOverview {
+  activeRuns: Array<{
+    runId: string;
+    processId: string;
+    status: string;
+    pendingBreakpoints: Array<{ effectId: string; title: string }>;
+  }>;
+  pendingBreakpoints: number;
+  totalRuns: number;
+}
+
+export function BabysitterDashboard({ context }: PluginWidgetProps) {
+  const { data, loading, error, refresh } = usePluginData<RunsOverview>(
+    "runs-overview",
+    { companyId: context.companyId }
+  );
+
+  if (loading) {
+    return <div style={{ padding: 16 }}>Loading runs...</div>;
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: 16, color: "var(--destructive)" }}>
+        Error: {error.message}
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div style={{ display: "grid", gap: 12, padding: 16 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <strong>Babysitter Orchestration</strong>
+        <button onClick={refresh} style={{ fontSize: 12 }}>
+          Refresh
+        </button>
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
+        <StatCard label="Active" value={data.activeRuns.length} />
+        <StatCard label="Breakpoints" value={data.pendingBreakpoints} highlight={data.pendingBreakpoints > 0} />
+        <StatCard label="Total" value={data.totalRuns} />
+      </div>
+
+      {data.activeRuns.length > 0 && (
+        <div style={{ display: "grid", gap: 4 }}>
+          {data.activeRuns.slice(0, 5).map((run) => (
+            <div
+              key={run.runId}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "4px 8px",
+                borderRadius: 4,
+                background: "var(--muted)",
+                fontSize: 12,
+              }}
+            >
+              <span style={{ fontFamily: "monospace" }}>
+                {run.processId}
+              </span>
+              <StatusBadge status={run.status} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {data.activeRuns.length === 0 && (
+        <div style={{ color: "var(--muted-foreground)", fontSize: 13 }}>
+          No active runs
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  highlight,
+}: {
+  label: string;
+  value: number;
+  highlight?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        textAlign: "center",
+        padding: "8px 4px",
+        borderRadius: 6,
+        background: highlight ? "var(--destructive)" : "var(--muted)",
+        color: highlight ? "var(--destructive-foreground)" : "inherit",
+      }}
+    >
+      <div style={{ fontSize: 20, fontWeight: 600 }}>{value}</div>
+      <div style={{ fontSize: 11, opacity: 0.7 }}>{label}</div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const colors: Record<string, string> = {
+    running: "#22c55e",
+    waiting: "#eab308",
+    completed: "#6b7280",
+    failed: "#ef4444",
+  };
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: 11,
+      }}
+    >
+      <span
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          background: colors[status] ?? "#6b7280",
+        }}
+      />
+      {status}
+    </span>
+  );
+}

package/src/ui/BabysitterSidebar.tsx

@@ -0,0 +1,123 @@
+/**
+ * Sidebar panel showing compact babysitter status.
+ *
+ * Displays active run count, pending breakpoints badge, and quick links.
+ */
+
+import { usePluginData, usePluginAction } from "@paperclipai/plugin-sdk/ui";
+import type { PluginSidebarProps } from "@paperclipai/plugin-sdk/ui";
+
+interface RunsOverview {
+  activeRuns: Array<{
+    runId: string;
+    processId: string;
+    status: string;
+    pendingBreakpoints: Array<{ effectId: string }>;
+  }>;
+  pendingBreakpoints: number;
+  totalRuns: number;
+}
+
+export function BabysitterSidebar({ context }: PluginSidebarProps) {
+  const { data, loading, refresh } = usePluginData<RunsOverview>(
+    "runs-overview",
+    { companyId: context.companyId }
+  );
+
+  if (loading) {
+    return <div style={{ padding: 8, fontSize: 12 }}>Loading...</div>;
+  }
+
+  if (!data) return null;
+
+  return (
+    <div style={{ padding: 12, display: "grid", gap: 8 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <strong style={{ fontSize: 13 }}>Babysitter</strong>
+        <button onClick={refresh} style={{ fontSize: 10, padding: "2px 6px" }}>
+          Refresh
+        </button>
+      </div>
+
+      <div style={{ display: "grid", gap: 4 }}>
+        <SidebarRow
+          label="Active runs"
+          value={String(data.activeRuns.length)}
+        />
+        <SidebarRow
+          label="Breakpoints"
+          value={String(data.pendingBreakpoints)}
+          highlight={data.pendingBreakpoints > 0}
+        />
+        <SidebarRow
+          label="Total runs"
+          value={String(data.totalRuns)}
+        />
+      </div>
+
+      {data.activeRuns.length > 0 && (
+        <div style={{ borderTop: "1px solid var(--border)", paddingTop: 8, marginTop: 4 }}>
+          {data.activeRuns.slice(0, 3).map((run) => (
+            <div
+              key={run.runId}
+              style={{
+                fontSize: 11,
+                padding: "3px 0",
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <span style={{ fontFamily: "monospace", opacity: 0.8 }}>
+                {run.processId.length > 20
+                  ? run.processId.slice(0, 20) + "..."
+                  : run.processId}
+              </span>
+              <span
+                style={{
+                  fontSize: 10,
+                  padding: "1px 4px",
+                  borderRadius: 3,
+                  background:
+                    run.status === "waiting" ? "#eab308" : "#22c55e",
+                  color: "white",
+                }}
+              >
+                {run.status}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SidebarRow({
+  label,
+  value,
+  highlight,
+}: {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        fontSize: 12,
+      }}
+    >
+      <span style={{ color: "var(--muted-foreground)" }}>{label}</span>
+      <span
+        style={{
+          fontWeight: highlight ? 700 : 400,
+          color: highlight ? "var(--destructive)" : "inherit",
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}

package/src/ui/BreakpointApproval.tsx

@@ -0,0 +1,212 @@
+/**
+ * Breakpoint approval/rejection UI component.
+ *
+ * Renders the breakpoint details with approve/reject actions.
+ * Critical: both approve and reject use --status ok with the babysitter CLI.
+ * Rejection sends { approved: false, feedback: "..." }.
+ */
+
+import { useState } from "react";
+import { usePluginAction } from "@paperclipai/plugin-sdk/ui";
+
+interface BreakpointApprovalProps {
+  runId: string;
+  effectId: string;
+  title: string;
+  /** The breakpoint question from task.json metadata.payload.question */
+  question?: string;
+  description?: string;
+  /** Explicit options from the process (e.g., ["Approve", "Request changes"]) */
+  options?: string[];
+  /** Domain expert routing from breakpoint routing fields */
+  expert?: string | string[];
+  /** Tags for categorization */
+  tags?: string[];
+  /** Previous rejection feedback (shown on retry) */
+  previousFeedback?: string;
+  /** Current retry attempt number */
+  attempt?: number;
+  companyId: string;
+  onResolved?: () => void;
+}
+
+export function BreakpointApproval({
+  runId,
+  effectId,
+  title,
+  question,
+  description,
+  options,
+  expert,
+  tags,
+  previousFeedback,
+  attempt,
+  companyId,
+  onResolved,
+}: BreakpointApprovalProps) {
+  const approve = usePluginAction("approve-breakpoint");
+  const reject = usePluginAction("reject-breakpoint");
+
+  const [feedback, setFeedback] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [resolved, setResolved] = useState(false);
+
+  async function handleApprove(response?: string) {
+    setSubmitting(true);
+    setError(null);
+    try {
+      await approve({ runId, effectId, response, companyId });
+      setResolved(true);
+      onResolved?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Approval failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleReject() {
+    if (!feedback.trim()) {
+      setError("Feedback is required when rejecting a breakpoint");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await reject({ runId, effectId, feedback: feedback.trim(), companyId });
+      setResolved(true);
+      onResolved?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Rejection failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (resolved) {
+    return (
+      <div style={{ padding: 12, background: "var(--muted)", borderRadius: 6 }}>
+        Breakpoint resolved.
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        border: "1px solid var(--border)",
+        borderRadius: 8,
+        padding: 16,
+        display: "grid",
+        gap: 12,
+      }}
+    >
+      <div>
+        <strong>{question ?? title}</strong>
+        {description && (
+          <p style={{ margin: "4px 0 0", fontSize: 13, color: "var(--muted-foreground)" }}>
+            {description}
+          </p>
+        )}
+        {/* Show retry context when this is a re-ask after rejection */}
+        {previousFeedback && (
+          <div
+            style={{
+              marginTop: 8,
+              padding: "6px 10px",
+              background: "var(--destructive)",
+              color: "var(--destructive-foreground)",
+              borderRadius: 4,
+              fontSize: 12,
+            }}
+          >
+            Previous feedback (attempt {attempt ?? "?"}): {previousFeedback}
+          </div>
+        )}
+        {/* Show routing info */}
+        {(expert || (tags && tags.length > 0)) && (
+          <div style={{ marginTop: 4, fontSize: 11, color: "var(--muted-foreground)" }}>
+            {expert && (
+              <span>
+                Expert: {Array.isArray(expert) ? expert.join(", ") : expert}
+              </span>
+            )}
+            {tags && tags.length > 0 && (
+              <span style={{ marginLeft: expert ? 12 : 0 }}>
+                Tags: {tags.join(", ")}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {options && options.length > 0 && (
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          {options.map((opt) => (
+            <button
+              key={opt}
+              onClick={() => handleApprove(opt)}
+              disabled={submitting}
+              style={{ fontSize: 13 }}
+            >
+              {opt}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: "grid", gap: 8 }}>
+        <textarea
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+          placeholder="Feedback (required for rejection)..."
+          rows={2}
+          style={{
+            width: "100%",
+            padding: 8,
+            borderRadius: 4,
+            border: "1px solid var(--border)",
+            resize: "vertical",
+            fontSize: 13,
+          }}
+        />
+
+        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+          <button
+            onClick={handleReject}
+            disabled={submitting}
+            style={{
+              background: "var(--destructive)",
+              color: "var(--destructive-foreground)",
+              padding: "6px 16px",
+              borderRadius: 4,
+              border: "none",
+              cursor: submitting ? "not-allowed" : "pointer",
+            }}
+          >
+            {submitting ? "..." : "Reject"}
+          </button>
+          <button
+            onClick={() => handleApprove(feedback || undefined)}
+            disabled={submitting}
+            style={{
+              background: "var(--primary)",
+              color: "var(--primary-foreground)",
+              padding: "6px 16px",
+              borderRadius: 4,
+              border: "none",
+              cursor: submitting ? "not-allowed" : "pointer",
+            }}
+          >
+            {submitting ? "..." : "Approve"}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div style={{ color: "var(--destructive)", fontSize: 12 }}>{error}</div>
+      )}
+    </div>
+  );
+}