@xdelivered/emberflow 0.2.0 → 0.5.0

package/src/components/InfrastructureDialog.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { InfraPanel, KIND_EXPLANATION } from './InfraPanel';
+import { formatScoutedAt } from './InfrastructureDialog';
+import type { InfrastructureManifest } from '../store/infraClient';
+
+/** The modal reuses InfraPanel with `explainKinds` — same manifest the Dock tab
+ *  renders, plus the per-kind plain-words gloss. */
+const MANIFEST: InfrastructureManifest = {
+  version: 1,
+  scannedAt: '2026-07-11T00:00:00Z',
+  greenfield: false,
+  summary: 'Express app with Postgres (Prisma) and Stripe.',
+  items: [
+    {
+      id: 'postgres-main',
+      kind: 'database',
+      name: 'Postgres (Prisma)',
+      evidence: [{ file: 'prisma/schema.prisma' }],
+      suggestedSecretRefs: ['DATABASE_URL'],
+      suggestedVars: [],
+    },
+    {
+      id: 'stripe',
+      kind: 'http-api',
+      name: 'Stripe',
+      evidence: [{ file: 'package.json' }],
+      suggestedSecretRefs: ['STRIPE_SECRET_KEY'],
+      suggestedVars: [],
+    },
+  ],
+};
+
+describe('InfrastructureDialog', () => {
+  describe('manifest render with per-kind explanations', () => {
+    const out = renderToStaticMarkup(
+      <InfraPanel data={{ present: true, manifest: MANIFEST }} explainKinds />,
+    );
+
+    it('renders the item cards', () => {
+      expect(out).toContain('Postgres (Prisma)');
+      expect(out).toContain('Stripe');
+    });
+
+    it('renders the plain-words gloss for each present kind', () => {
+      expect(out).toContain(KIND_EXPLANATION.database);
+      expect(out).toContain(KIND_EXPLANATION['http-api']);
+    });
+
+    it('does NOT render explanations when explainKinds is off (Dock tab)', () => {
+      const plain = renderToStaticMarkup(<InfraPanel data={{ present: true, manifest: MANIFEST }} />);
+      expect(plain).not.toContain(KIND_EXPLANATION.database);
+    });
+  });
+
+  describe('greenfield / empty state', () => {
+    it('renders the greenfield state from the shared panel', () => {
+      const out = renderToStaticMarkup(
+        <InfraPanel
+          data={{
+            present: true,
+            manifest: { version: 1, greenfield: true, summary: 'Clean slate — no infrastructure yet.', items: [] },
+          }}
+          explainKinds
+        />,
+      );
+      expect(out).toContain('Greenfield project');
+      expect(out).toContain('Clean slate');
+    });
+  });
+
+  describe('formatScoutedAt', () => {
+    const base = new Date('2026-07-13T00:00:00Z').getTime();
+
+    it('returns null for an absent timestamp (tolerant)', () => {
+      expect(formatScoutedAt(undefined, base)).toBeNull();
+    });
+
+    it('returns null for an unparseable timestamp', () => {
+      expect(formatScoutedAt('not-a-date', base)).toBeNull();
+    });
+
+    it('formats a 2-day-old scan as "scouted 2 days ago"', () => {
+      expect(formatScoutedAt('2026-07-11T00:00:00Z', base)).toBe('scouted 2 days ago');
+    });
+
+    it('formats a very recent scan as "scouted just now"', () => {
+      expect(formatScoutedAt('2026-07-12T23:59:30Z', base)).toBe('scouted just now');
+    });
+
+    it('formats hours and minutes with correct pluralization', () => {
+      expect(formatScoutedAt('2026-07-12T23:00:00Z', base)).toBe('scouted 1 hour ago');
+      expect(formatScoutedAt('2026-07-12T22:00:00Z', base)).toBe('scouted 2 hours ago');
+      expect(formatScoutedAt('2026-07-12T23:58:00Z', base)).toBe('scouted 2 minutes ago');
+    });
+  });
+});

package/src/components/InfrastructureDialog.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { SparklesIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
+import { InfraPanel } from './InfraPanel';
+import { useBuilderStore } from '../store/builderStore';
+import type { InfrastructureResponse } from '../store/infraClient';
+
+/**
+ * Relative "scouted N ago" for the manifest's scannedAt. Tolerant of an absent
+ * or unparseable timestamp (returns null → the freshness line is hidden).
+ */
+export function formatScoutedAt(scannedAt: string | undefined, now: number = Date.now()): string | null {
+  if (!scannedAt) return null;
+  const then = new Date(scannedAt).getTime();
+  if (Number.isNaN(then)) return null;
+  const secs = Math.max(0, Math.round((now - then) / 1000));
+  if (secs < 60) return 'scouted just now';
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `scouted ${mins} minute${mins === 1 ? '' : 's'} ago`;
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return `scouted ${hours} hour${hours === 1 ? '' : 's'} ago`;
+  const days = Math.round(hours / 24);
+  return `scouted ${days} day${days === 1 ? '' : 's'} ago`;
+}
+
+/**
+ * "Project infrastructure" modal, opened from the StatusBar infra chip. Explains
+ * what the scout found and — crucially — WHY it matters: agents read this
+ * manifest before building operations and REUSE these systems (same secret
+ * names, same services) instead of inventing parallel config. Reuses the
+ * presentational InfraPanel for the item list (one source of truth) with the
+ * per-kind gloss enabled, and offers a free-text "Update with AI" amendment.
+ */
+export function InfrastructureDialog({
+  open,
+  onOpenChange,
+  data,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  data: InfrastructureResponse | null;
+}) {
+  const beginInfrastructureScout = useBuilderStore((s) => s.beginInfrastructureScout);
+  const [instruction, setInstruction] = useState('');
+
+  const freshness =
+    data && data.present ? formatScoutedAt(data.manifest.scannedAt) : null;
+
+  const submitUpdate = () => {
+    const value = instruction.trim();
+    onOpenChange(false);
+    setInstruction('');
+    // Empty → full rescan; free text → a targeted amendment. Both dispatch the
+    // scout intent, which opens the agent panel so the run is visible.
+    beginInfrastructureScout(value.length > 0 ? value : undefined);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogTitle>Project infrastructure</DialogTitle>
+        <DialogDescription>
+          Discovered by the scout from this project's code. Agents read this before building
+          operations and{' '}
+          <span className="font-medium text-foreground/90">
+            reuse these systems — same secret names, same services — instead of inventing parallel
+            config.
+          </span>
+        </DialogDescription>
+
+        {freshness && (
+          <p className="text-[11px] text-muted-foreground/70">{freshness}</p>
+        )}
+
+        <div className="max-h-[55vh] overflow-y-auto pr-0.5">
+          <InfraPanel data={data} explainKinds />
+        </div>
+
+        <div className="flex flex-col gap-1.5 border-t border-border/60 pt-3">
+          <label htmlFor="infra-update" className="text-[11px] font-medium text-foreground/80">
+            Update with AI
+          </label>
+          <div className="flex items-center gap-2">
+            <Input
+              id="infra-update"
+              value={instruction}
+              onChange={(e) => setInstruction(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  submitUpdate();
+                }
+              }}
+              placeholder="e.g. add our Redis cache, or remove the legacy Stripe entry…"
+              className="h-8 text-[12px]"
+            />
+            <Button size="sm" onClick={submitUpdate}>
+              <SparklesIcon className="size-3.5" />
+              Update
+            </Button>
+          </div>
+          <p className="text-[10.5px] text-muted-foreground/70">
+            Leave empty to re-scan the whole project.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/Inspector.tsx

@@ -4,8 +4,7 @@ import { BranchRulesEditor } from './BranchRulesEditor';
 import { ExecutionPager } from './ExecutionPager';
 import { NodeRunModal } from './NodeRunModal';
 import { Json } from './Json';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { NodeCodeView } from './SourceNavigator';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
@@ -781,6 +780,8 @@ export function Inspector() {
   const outputValue = state?.output as Record<string, unknown> | undefined;
   const executions = state?.executions;
   const source = registry.has(node.type) ? (registry.getSource(node.type) ?? '') : '';
+  const sourceRef = registry.has(node.type) ? registry.getSourceRef(node.type) : undefined;
+  const builtinNode = registry.has(node.type) ? registry.isBuiltin(node.type) : false;
 
   const codeDialog = (
     <Dialog open={codeOpen} onOpenChange={setCodeOpen}>
@@ -790,30 +791,12 @@ export function Inspector() {
           <Badge variant="mono">{node.type}</Badge>
         </DialogTitle>
         <DialogDescription>{definition?.description ?? 'Node implementation'}</DialogDescription>
-        <div className="min-h-0 flex-1 overflow-auto rounded-md border border-border bg-background">
-          <SyntaxHighlighter
-            language="javascript"
-            style={vscDarkPlus}
-            showLineNumbers
-            customStyle={{
-              margin: 0,
-              background: 'transparent',
-              fontSize: '12.5px',
-              lineHeight: 1.6,
-              padding: '12px 2px',
-            }}
-            codeTagProps={{ style: { background: 'transparent', textShadow: 'none' } }}
-            lineNumberStyle={{
-              color: 'var(--muted-foreground)',
-              opacity: 0.35,
-              background: 'transparent',
-              minWidth: '2.75em',
-              paddingRight: '1em',
-            }}
-          >
-            {source}
-          </SyntaxHighlighter>
-        </div>
+        <NodeCodeView
+          nodeType={node.type}
+          source={source}
+          sourceRef={sourceRef}
+          builtin={builtinNode}
+        />
       </DialogContent>
     </Dialog>
   );

package/src/components/RunbookView.tsx

@@ -833,21 +833,51 @@ function RunbookItems({ items, ctx }: { items: RunbookItem[]; ctx: RunbookCtx })
   );
 }
 
+/** One clickable level of the step-drill breadcrumb (`Parent › Child`). */
+interface DrillCrumb {
+  name: string;
+  current: boolean;
+  onClick: () => void;
+}
+
 function RunbookHeader({
   name,
   environment,
   subtitle,
   expandAll,
   onToggleExpandAll,
+  crumbs,
 }: {
   name: string;
   environment?: string;
   subtitle: string;
   expandAll: boolean;
   onToggleExpandAll: () => void;
+  /** Step-drill trail, root first — rendered above the title while a stepped
+   *  run is inside a subflow. Ancestor clicks are a view-only peek. */
+  crumbs?: DrillCrumb[];
 }) {
   return (
     <div className="mb-6">
+      {crumbs && crumbs.length > 1 && (
+        <div className="mb-1.5 flex flex-wrap items-center gap-1 text-[11px] text-muted-foreground">
+          {crumbs.map((crumb, i) => (
+            <span key={i} className="flex items-center gap-1">
+              {i > 0 && <span className="text-muted-foreground/50">›</span>}
+              <button
+                type="button"
+                onClick={crumb.onClick}
+                className={cn(
+                  'cursor-pointer transition-colors hover:text-foreground',
+                  crumb.current && 'font-medium text-foreground',
+                )}
+              >
+                {crumb.name}
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
       <h1 className="text-[22px] font-bold tracking-tight">{name}</h1>
       <div className="mt-1.5 flex items-center gap-2 text-[12px] text-muted-foreground">
         {environment && (
@@ -944,19 +974,36 @@ function BuildingHolding({ route }: { route?: string }) {
 }
 
 export function RunbookView({ register = 'simple' }: { register?: 'simple' | 'technical' } = {}) {
-  const flow = useBuilderStore((s) => s.flow);
+  const liveFlow = useBuilderStore((s) => s.flow);
   const registry = useBuilderStore((s) => s.registry);
   const buildingOperationId = useBuilderStore((s) => s.buildingOperationId);
-  const run = useBuilderStore((s) => s.run);
+  const liveRun = useBuilderStore((s) => s.run);
   const logs = useBuilderStore((s) => s.logs);
   const runHistory = useBuilderStore((s) => s.runHistory);
-  const selectedNodeId = useBuilderStore((s) => s.selectedNodeId);
+  const storeSelectedNodeId = useBuilderStore((s) => s.selectedNodeId);
   const selectNode = useBuilderStore((s) => s.selectNode);
+  const stepDrill = useBuilderStore((s) => s.stepDrill);
+  const drillPeek = useBuilderStore((s) => s.drillPeek);
+  const peekDrill = useBuilderStore((s) => s.peekDrill);
+
+  // While a stepped run is drilled into a subflow, an ancestor crumb click is
+  // a view-only PEEK: render that stashed level's flow/run without popping the
+  // drill stack or touching the server. The store's flow/run stay the deepest
+  // (live) level — child SSE states keep landing there during the peek.
+  const peeking = drillPeek !== null && drillPeek < stepDrill.length;
+  const flow = peeking ? stepDrill[drillPeek].savedFlow : liveFlow;
+  const run = peeking ? stepDrill[drillPeek].savedRun : liveRun;
+  // Peeked levels are read-only: selection stays with the live level.
+  const selectedNodeId = peeking ? null : storeSelectedNodeId;
 
   const doc = useMemo(() => buildRunbook(flow, registry), [flow, registry]);
+  // A drilled-in CHILD view (the live deepest level, or a peeked mid-level —
+  // peek index 0 is the root) matches log lines by caller-prefixed suffix
+  // too, since child log nodeIds arrive as `${callerNodeId}/${childNodeId}`.
+  const drilled = peeking ? drillPeek! > 0 : stepDrill.length > 0;
   const projection = useMemo(
-    () => projectRunbook(doc, run, logs, runHistory, flow.id),
-    [doc, run, logs, runHistory],
+    () => projectRunbook(doc, run, logs, runHistory, flow.id, drilled),
+    [doc, run, logs, runHistory, flow.id, drilled],
   );
 
   // Paced reveal: the document fills at a readable rhythm even when the engine
@@ -1051,7 +1098,8 @@ export function RunbookView({ register = 'simple' }: { register?: 'simple' | 'te
     run,
     resetKey: `${flow.id}:${run?.id ?? 'none'}`,
     selectedNodeId,
-    selectNode,
+    // A peeked level is read-only — row clicks must not move the live selection.
+    selectNode: peeking ? () => {} : selectNode,
     registerRow,
     register,
     displayStatus,
@@ -1061,6 +1109,21 @@ export function RunbookView({ register = 'simple' }: { register?: 'simple' | 'te
   const subtitle = flow.folder ?? `${flow.nodes.length} step${flow.nodes.length === 1 ? '' : 's'}`;
   const building = buildingOperationId === flow.id;
 
+  // Step-drill breadcrumb: ancestors from the stashed levels (root first),
+  // then the deepest (live) flow. Ancestor clicks peek; the last crumb
+  // returns to the live level.
+  const crumbs: DrillCrumb[] | undefined =
+    stepDrill.length > 0
+      ? [
+          ...stepDrill.map((d, i) => ({
+            name: d.savedFlow.name,
+            current: peeking && drillPeek === i,
+            onClick: () => peekDrill(i),
+          })),
+          { name: liveFlow.name, current: !peeking, onClick: () => peekDrill(null) },
+        ]
+      : undefined;
+
   return (
     <div ref={scrollRef} className="h-full min-h-0 overflow-y-auto bg-background">
       <div className="mx-auto max-w-[800px] px-4 pt-[26px] pb-[140px]">
@@ -1070,6 +1133,7 @@ export function RunbookView({ register = 'simple' }: { register?: 'simple' | 'te
           subtitle={subtitle}
           expandAll={expandAll}
           onToggleExpandAll={() => setExpandAll((v) => !v)}
+          crumbs={crumbs}
         />
         {building ? (
           <BuildingHolding route={flow.http ? `${flow.http.method} ${flow.http.path}` : undefined} />

package/src/components/SettingsDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ArrowLeftIcon, GlobeIcon, RotateCcwIcon, ServerIcon, SettingsIcon } from 'lucide-react';
+import { ArrowLeftIcon, RotateCcwIcon, SettingsIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import {
@@ -17,16 +17,6 @@ const AGENT_LABELS: Record<AgentKind, string> = {
   claude: 'Claude',
 };
 
-const ENGINE_OPTIONS: Array<{
-  value: 'auto' | 'server' | 'browser';
-  label: string;
-  hint: string;
-}> = [
-  { value: 'auto', label: 'Auto', hint: 'runner when available (recommended)' },
-  { value: 'server', label: 'Server', hint: 'always the local runner' },
-  { value: 'browser', label: 'Browser', hint: 'in-tab engine, no secrets/CORS-free APIs' },
-];
-
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
     <div className="text-[10px] font-medium uppercase tracking-widest text-muted-foreground">
@@ -36,14 +26,11 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
 }
 
 /**
- * Settings dialog behind the toolbar gear. Absorbs the old EngineChip (execution
- * engine + runner status) and the Reset button, keeping the toolbar itself to
- * authoring + running.
+ * Settings dialog behind the toolbar gear. Holds the coding-agent picker and
+ * the Reset button; runner status lives in the StatusBar. Execution is always
+ * server-side, so there is no engine choice here.
  */
 export function SettingsDialog() {
-  const mode = useBuilderStore((s) => s.executionMode);
-  const setMode = useBuilderStore((s) => s.setExecutionMode);
-  const runnerOnline = useBuilderStore((s) => s.runnerOnline);
   const resetRun = useBuilderStore((s) => s.resetRun);
   const agentChoice = useBuilderStore((s) => s.agentChoice);
   const setAgentChoice = useBuilderStore((s) => s.setAgentChoice);
@@ -65,9 +52,6 @@ export function SettingsDialog() {
     };
   }, [open]);
 
-  const effective = mode === 'auto' ? (runnerOnline ? 'server' : 'browser') : mode;
-  const offline = effective === 'server' && runnerOnline === false;
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -99,45 +83,6 @@ export function SettingsDialog() {
           <DialogTitle>Settings</DialogTitle>
         </div>
 
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <SectionTitle>Execution engine</SectionTitle>
-            <span className="ml-auto flex items-center gap-1.5 text-[11px] text-muted-foreground">
-              {effective === 'server' ? (
-                <ServerIcon className="size-3" />
-              ) : (
-                <GlobeIcon className="size-3" />
-              )}
-              <span
-                className={cn(
-                  'size-1.5 rounded-full',
-                  offline
-                    ? 'bg-destructive'
-                    : effective === 'server'
-                      ? 'bg-success'
-                      : 'bg-muted-foreground',
-                )}
-              />
-              {effective === 'server' ? 'runner online' : offline ? 'runner offline' : 'browser'}
-            </span>
-          </div>
-          <div className="flex flex-col gap-1">
-            {ENGINE_OPTIONS.map((option) => (
-              <button
-                key={option.value}
-                onClick={() => setMode(option.value)}
-                className={cn(
-                  'flex cursor-pointer flex-col items-start rounded-md border px-2.5 py-1.5 text-left transition-colors hover:bg-accent',
-                  mode === option.value ? 'border-ring bg-secondary/60' : 'border-border',
-                )}
-              >
-                <span className="text-[12.5px] font-medium">{option.label}</span>
-                <span className="text-[11px] text-muted-foreground">{option.hint}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
         <div className="space-y-2">
           <SectionTitle>Coding agent</SectionTitle>
           {availableAgents.length === 0 ? (

package/src/components/Sidebar.tsx

@@ -15,8 +15,6 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Badge } from '@/components/ui/badge';
-import { CreateModal } from './CreateModal';
-import type { CreateModalState } from './CreateModal';
 import { useBuilderStore } from '../store/builderStore';
 import { buildApiTree } from '../store/apiTree';
 import type { ApiTreeNode, OpItem } from '../store/apiTree';
@@ -233,18 +231,6 @@ function ApiSettingsButton({ node }: { node: ApiTreeNode }) {
   );
 }
 
-/** Flatten an API tree into every API/folder path (e.g. 'default', 'billing', 'billing/charges'). */
-function flattenLocations(tree: ApiTreeNode[]): string[] {
-  const paths: string[] = [];
-  const walk = (node: ApiTreeNode, prefix: string) => {
-    const path = prefix ? `${prefix}/${node.name}` : node.name;
-    paths.push(path);
-    for (const folder of node.folders) walk(folder, path);
-  };
-  for (const api of tree) walk(api, '');
-  return paths;
-}
-
 function TreeNode({
   node,
   keyPath,
@@ -345,8 +331,10 @@ function TreeNode({
 export function Sidebar() {
   const workflows = useBuilderStore((s) => s.workflows);
   const toggleSidebar = useBuilderStore((s) => s.toggleSidebar);
+  // The create modal itself is hosted once in App (CreateModalHost) — the
+  // sidebar only asks the store to open it, so it works with the sidebar closed.
+  const setCreateModal = useBuilderStore((s) => s.setCreateModal);
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
-  const [createState, setCreateState] = useState<CreateModalState | null>(null);
 
   const tree = useMemo(
     () =>
@@ -361,8 +349,6 @@ export function Sidebar() {
     [workflows],
   );
 
-  const locations = useMemo(() => flattenLocations(tree), [tree]);
-
   const toggle = (key: string) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -384,7 +370,7 @@ export function Sidebar() {
             size="xs"
             aria-label="New operation"
             title="New operation"
-            onClick={() => setCreateState({ mode: 'operation' })}
+            onClick={() => setCreateModal({ mode: 'operation' })}
             className="text-muted-foreground hover:text-foreground"
           >
             <PlusIcon />
@@ -411,7 +397,7 @@ export function Sidebar() {
             isApi
             collapsed={collapsed}
             toggle={toggle}
-            onAddOperation={(location) => setCreateState({ mode: 'operation', location })}
+            onAddOperation={(location) => setCreateModal({ mode: 'operation', location })}
           />
         ))}
       </nav>
@@ -420,17 +406,11 @@ export function Sidebar() {
           variant="secondary"
           size="sm"
           className="w-full"
-          onClick={() => setCreateState({ mode: 'api' })}
+          onClick={() => setCreateModal({ mode: 'api' })}
         >
           <PlusIcon /> New API
         </Button>
       </div>
-
-      <CreateModal
-        state={createState}
-        onOpenChange={(open) => !open && setCreateState(null)}
-        locations={locations}
-      />
     </aside>
   );
 }