@xdelivered/emberflow 0.2.0 → 0.5.0

package/src/components/StatusBar.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
-import { ListChecksIcon, Loader2Icon, ShieldIcon } from 'lucide-react';
+import { CheckIcon, ChevronUpIcon, DownloadIcon, ListChecksIcon, Loader2Icon, ServerIcon, ShieldIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useBuilderStore } from '../store/builderStore';
 import { setupProgress } from '../store/setupClient';
+import { fetchInfrastructure, type InfrastructureResponse } from '../store/infraClient';
+import { fetchUpdateStatus, postUpdate, type UpdateStatus } from '../store/updateClient';
+import { InfrastructureDialog } from './InfrastructureDialog';
+import { CopyCommand } from './WelcomeDialog';
 import type { EnvironmentSummary } from '../store/serverRunner';
 import type { WorkflowRun } from '../engine';
 
@@ -115,6 +120,100 @@ function EnvAuthBadge({ env }: { env: EnvironmentSummary }) {
   );
 }
 
+/**
+ * Package update chip: rendered only when the runner reports a newer published
+ * version. Highlight/ember tint (not warn) — an update is good news, not a
+ * problem. The popover walks the whole one-click flow: install → restart
+ * command on success, manual npm command on failure. Props-driven (the bar
+ * owns the fetch) so the component test can render it directly.
+ */
+export function UpdateChip({ status }: { status: UpdateStatus | null }) {
+  const [open, setOpen] = useState(false);
+  const [phase, setPhase] = useState<'idle' | 'installing' | 'done' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+  if (!status?.updateAvailable || !status.latest) return null;
+
+  const onInstall = async () => {
+    setPhase('installing');
+    setError(null);
+    const result = await postUpdate();
+    if (result.ok) {
+      setPhase('done');
+    } else {
+      setError(result.error ?? 'Install failed');
+      setPhase('error');
+    }
+  };
+
+  return (
+    <>
+      <Divider />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            title={`Update available — ${status.current} → ${status.latest}`}
+            className={cn(segment, interactive, 'bg-highlight/15 font-medium text-highlight')}
+          >
+            <DownloadIcon className="size-3 shrink-0" />
+            update
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="top" align="start" className="w-72 p-3">
+          <div className="flex items-center gap-2">
+            <span className="size-1.5 shrink-0 rounded-full bg-highlight" />
+            <span className="text-[12px] font-medium">
+              Update available — {status.current} → {status.latest}
+            </span>
+          </div>
+          {phase === 'done' ? (
+            <>
+              <p className="mt-1.5 text-[11.5px] leading-snug text-muted-foreground">
+                Installed — restart the runner to finish:
+              </p>
+              <CopyCommand command="npx emberflow dev" />
+            </>
+          ) : (
+            <>
+              <p className="mt-1.5 text-[11.5px] leading-snug text-muted-foreground">
+                New features and fixes for the studio and runner.
+              </p>
+              {phase === 'error' && error && (
+                <>
+                  <p className="mt-1.5 truncate text-[11.5px] leading-snug text-destructive" title={error}>
+                    {error}
+                  </p>
+                  <p className="mt-1.5 text-[11.5px] leading-snug text-muted-foreground">
+                    Install manually instead:
+                  </p>
+                  <CopyCommand command="npm install @xdelivered/emberflow@latest" />
+                </>
+              )}
+              <button
+                type="button"
+                onClick={() => void onInstall()}
+                disabled={phase === 'installing'}
+                className="mt-2.5 flex items-center gap-1.5 rounded-md bg-highlight px-2.5 py-1 text-[11.5px] font-medium text-highlight-foreground transition-colors hover:bg-highlight/90 disabled:cursor-wait disabled:opacity-60"
+              >
+                {phase === 'installing' ? (
+                  <>
+                    <Loader2Icon className="size-3 shrink-0 animate-spin" />
+                    Installing…
+                  </>
+                ) : phase === 'error' ? (
+                  'Retry install'
+                ) : (
+                  'Install update'
+                )}
+              </button>
+            </>
+          )}
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
 /**
  * Bottom status bar: a calm, always-present readout of where a run points and
  * what's happening. Left = environment / runner / workspace source (interactive
@@ -136,6 +235,42 @@ export function StatusBar() {
   const run = useBuilderStore((s) => s.run);
   const setupStatus = useBuilderStore((s) => s.setupStatus);
   const setWelcomeOpen = useBuilderStore((s) => s.setWelcomeOpen);
+  const agentRun = useBuilderStore((s) => s.agentRun);
+
+  // Infrastructure chip: fetch on mount and whenever an agent run finishes (a
+  // completed scout writes the manifest) — mirroring InfraTab's refetch. Shown
+  // only once scouted; the welcome checklist owns the not-scouted path.
+  const [infraData, setInfraData] = useState<InfrastructureResponse | null>(null);
+  const [infraOpen, setInfraOpen] = useState(false);
+  const [registerOpen, setRegisterOpen] = useState(false);
+  const [mockOpen, setMockOpen] = useState(false);
+  const agentRunStatus = agentRun?.status;
+  useEffect(() => {
+    if (agentRunStatus === 'running') return;
+    let cancelled = false;
+    void fetchInfrastructure().then((d) => {
+      if (!cancelled) setInfraData(d);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [agentRunStatus]);
+  // Scouted (present:true) → show the chip, even for a greenfield 0-item
+  // manifest; only the not-scouted path is hidden (owned by the checklist).
+  const infraCount = infraData && infraData.present ? infraData.manifest.items.length : null;
+
+  // Update notifier: one check per studio load — the runner caches the
+  // registry answer for an hour anyway, so polling would add nothing.
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    void fetchUpdateStatus().then((s) => {
+      if (!cancelled) setUpdateStatus(s);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   // Setup entry point: a quiet progress chip while onboarding is unfinished.
   // Complete setups drop the chip — the checklist auto-open and this chip are
@@ -145,7 +280,7 @@ export function StatusBar() {
 
   const current = environments.find((e) => e.name === selectedEnvironment);
   const protectedEnv = current?.protected ?? false;
-  const envLabel = selectedEnvironment || 'browser';
+  const envLabel = selectedEnvironment || (runnerOnline === false ? 'offline' : 'default');
 
   const onEnvClick = () => {
     if (!safeMode) {
@@ -196,13 +331,44 @@ export function StatusBar() {
       {runnerMock && (
         <>
           <Divider />
-          <span
-            className={cn(segment, 'bg-warn/15 font-medium uppercase tracking-wide text-warn')}
-            title="The studio is in Mock mode — mounted endpoints answer with example responses from scenarios; nothing executes, no auth. Pick an environment in the toolbar dropdown to go live."
-          >
-            <span className="size-1.5 shrink-0 rounded-full bg-warn" />
-            mock
-          </span>
+          {/* Discrete explainer: mock is the mode every new project starts in,
+              so the chip opens a small card saying what it means and how to
+              leave it — a tooltip alone was too easy to never discover. */}
+          <Popover open={mockOpen} onOpenChange={setMockOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className={cn(segment, interactive, 'bg-warn/15 font-medium uppercase tracking-wide text-warn')}
+              >
+                <span className="size-1.5 shrink-0 rounded-full bg-warn" />
+                mock
+              </button>
+            </PopoverTrigger>
+            <PopoverContent side="top" align="start" className="w-72 p-3">
+              <div className="flex items-center gap-2">
+                <span className="size-1.5 shrink-0 rounded-full bg-warn" />
+                <span className="text-[12px] font-medium">Mock mode</span>
+              </div>
+              <p className="mt-1.5 text-[11.5px] leading-snug text-muted-foreground">
+                Runs answer with the example responses from your scenarios. Nothing real executes —
+                no databases, no external calls, no auth.
+              </p>
+              <p className="mt-1.5 text-[11.5px] leading-snug text-muted-foreground">
+                That makes it safe to run anything while you build. When you're ready, point runs at
+                a real environment.
+              </p>
+              <button
+                type="button"
+                onClick={() => {
+                  setMockOpen(false);
+                  onEnvClick();
+                }}
+                className="mt-2.5 text-[11.5px] font-medium text-highlight underline-offset-2 hover:underline"
+              >
+                Go live — pick an environment
+              </button>
+            </PopoverContent>
+          </Popover>
         </>
       )}
       <Divider />
@@ -246,28 +412,62 @@ export function StatusBar() {
           </button>
         </>
       )}
+      <UpdateChip status={updateStatus} />
+      {infraCount !== null && (
+        <>
+          <Divider />
+          <button
+            type="button"
+            onClick={() => setInfraOpen(true)}
+            title="Project infrastructure — what the scout found that agents reuse"
+            className={cn(segment, interactive)}
+          >
+            <ServerIcon className="size-3 shrink-0" />
+            <span className="truncate text-foreground/80">infra</span>
+            <span className="shrink-0 font-mono tabular-nums text-muted-foreground/70">{infraCount}</span>
+          </button>
+        </>
+      )}
       <Divider />
-      <div
-        role="group"
-        aria-label="Runbook register"
-        title="Runbook register — Simple reads outcomes; Technical adds type names + trace badges"
-        className="flex h-full items-center gap-0.5 px-1"
-      >
-        {(['simple', 'technical'] as const).map((v) => (
+      <Popover open={registerOpen} onOpenChange={setRegisterOpen}>
+        <PopoverTrigger asChild>
           <button
-            key={v}
             type="button"
-            onClick={() => setRegister(v)}
-            aria-pressed={register === v}
-            className={cn(
-              'rounded-[4px] px-1.5 py-0.5 text-[11px] capitalize transition-colors',
-              register === v ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground',
-            )}
+            title="Detail level — Simple shows outcomes; Technical adds types and traces"
+            className={cn(segment, interactive)}
           >
-            {v}
+            <span className="truncate capitalize text-foreground/80">{register}</span>
+            <ChevronUpIcon className="size-3 shrink-0 text-muted-foreground/70" />
           </button>
-        ))}
-      </div>
+        </PopoverTrigger>
+        <PopoverContent
+          side="top"
+          align="start"
+          className="w-40 p-1"
+          role="radiogroup"
+          aria-label="Runbook register"
+        >
+          {(['simple', 'technical'] as const).map((v) => (
+            <button
+              key={v}
+              type="button"
+              role="radio"
+              aria-checked={register === v}
+              onClick={() => {
+                setRegister(v);
+                setRegisterOpen(false);
+              }}
+              className={cn(
+                'flex w-full items-center justify-between gap-2 rounded-[4px] px-2 py-1 text-left text-[11px] capitalize transition-colors',
+                register === v ? 'text-foreground' : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground',
+              )}
+            >
+              <span>{v}</span>
+              {register === v && <CheckIcon className="size-3 shrink-0 text-highlight" />}
+            </button>
+          ))}
+        </PopoverContent>
+      </Popover>
 
       <div className="ml-auto flex h-full min-w-0 items-center">
         {selectedNode && (
@@ -297,6 +497,7 @@ export function StatusBar() {
           </>
         )}
       </div>
+      <InfrastructureDialog open={infraOpen} onOpenChange={setInfraOpen} data={infraData} />
     </footer>
   );
 }

package/src/components/Toolbar.tsx

@@ -55,10 +55,12 @@ function infraNodesOf(
 }
 
 /** Derives diagnoseOperation's `mutationSourcesByNode` extra from the studio's
- *  client-side node registry, mirroring infraNodesOf's per-node degradation:
- *  a node whose type isn't registered, isn't a mutation, or whose
- *  implementation isn't a function is simply absent from the map rather than
- *  aborting the whole computation. */
+ *  definitions-only node registry. The implementation source comes from
+ *  `registry.getSource(type)` — the runner-synced `source` string (see
+ *  syncNodeMeta / nodesPayload), not a bundled implementation — so the
+ *  simulated-commit chip works even though the studio bundles no node code.
+ *  Per-node degradation mirrors infraNodesOf: a node whose type isn't
+ *  registered, isn't a mutation, or has no known source is simply absent. */
 function mutationSourcesOf(
   flow: { nodes: Array<{ id: string; type: string }> },
   registry: NodeRegistry,
@@ -66,10 +68,10 @@ function mutationSourcesOf(
   const mutationSourcesByNode: NonNullable<DiagnoseOperationExtras['mutationSourcesByNode']> = {};
   for (const node of flow.nodes) {
     if (!registry.has(node.type)) continue;
-    const { definition, implementation } = registry.get(node.type);
-    if (definition.effects === 'mutation' && typeof implementation === 'function') {
-      mutationSourcesByNode[node.id] = String(implementation);
-    }
+    const { definition } = registry.get(node.type);
+    if (definition.effects !== 'mutation') continue;
+    const source = registry.getSource(node.type);
+    if (source !== undefined) mutationSourcesByNode[node.id] = source;
   }
   return mutationSourcesByNode;
 }
@@ -90,11 +92,14 @@ const statusDot: Record<string, string> = {
 function RunSplitButton({
   onRun,
   runDisabled,
+  disabledReason,
   live,
   stepping,
 }: {
   onRun: () => void;
   runDisabled: boolean;
+  /** Shown as the button title when runDisabled (e.g. the runner is offline). */
+  disabledReason?: string;
   live: boolean;
   stepping: boolean;
 }) {
@@ -124,13 +129,15 @@ function RunSplitButton({
   const safeMode = useBuilderStore((s) => s.safeMode);
   // Blocked wins (it says why the button is disabled); otherwise plain-terms
   // explainer of what a real run means.
-  const runTitle = paramsBlocked
+  const runTitle = runDisabled && disabledReason
+    ? disabledReason
+    : paramsBlocked
     ? paramBlockers.map((d) => d.message).join('\n')
     : stepping
       ? 'Runs the stepped run to the end.'
       : runnerMock
         ? 'Runs this operation against scenario mocks — real logic, canned infrastructure. Nothing real is touched.'
-        : `Runs this operation for real against "${selectedEnvironment || 'browser'}" — every node executes, and requests hit real services. Safe mode ${safeMode ? 'is on: writes are skipped' : 'is off: writes happen'}.`;
+        : `Runs this operation for real against "${selectedEnvironment || 'the default environment'}" — every node executes, and requests hit real services. Safe mode ${safeMode ? 'is on: writes are skipped' : 'is off: writes happen'}.`;
 
   const lastRunFor = (sc: ScenarioDefinition) =>
     runHistory.find((r) => r.workflowId === flow.id && r.scenarioName === sc.name);
@@ -513,7 +520,6 @@ export function Toolbar() {
   const saveFlow = useBuilderStore((s) => s.saveFlow);
   const exportFlow = useBuilderStore((s) => s.exportFlow);
   const importFlow = useBuilderStore((s) => s.importFlow);
-  const executionMode = useBuilderStore((s) => s.executionMode);
   const runnerOnline = useBuilderStore((s) => s.runnerOnline);
   const environments = useBuilderStore((s) => s.environments);
   const selectedEnvironment = useBuilderStore((s) => s.selectedEnvironment);
@@ -524,9 +530,12 @@ export function Toolbar() {
   const fileRef = useRef<HTMLInputElement>(null);
   const [moreOpen, setMoreOpen] = useState(false);
 
-  // Only a manual server override with the runner down blocks running;
-  // auto mode always has the browser fallback.
-  const runDisabled = busy || (executionMode === 'server' && runnerOnline === false);
+  // Runs are always server-side: with the runner offline there is nowhere to
+  // execute, so Run/Step are disabled until it's back.
+  const runDisabled = busy || runnerOnline === false;
+  const runOfflineTitle = runnerOnline === false
+    ? 'Runner offline — start it with `npx emberflow dev` to run.'
+    : undefined;
   const currentEnv = environments.find((e) => e.name === selectedEnvironment);
   const live = (currentEnv?.protected ?? false) && !safeMode;
 
@@ -582,6 +591,7 @@ export function Toolbar() {
         <RunSplitButton
           onRun={guard(runToEnd)}
           runDisabled={runDisabled}
+          disabledReason={runOfflineTitle}
           live={live}
           stepping={stepping}
         />
@@ -591,11 +601,13 @@ export function Toolbar() {
           onClick={guard(stepRun)}
           disabled={runDisabled}
           title={
-            stepping
+            runDisabled && runOfflineTitle
+              ? runOfflineTitle
+              : stepping
               ? 'Runs the next node, then pauses again.'
               : runnerMock
                 ? 'Runs one node at a time against scenario mocks — real logic, canned infrastructure, paused between nodes.'
-                : `Runs one node at a time against "${selectedEnvironment || 'browser'}" — same real execution, paused between nodes.`
+                : `Runs one node at a time against "${selectedEnvironment || 'the default environment'}" — same real execution, paused between nodes.`
           }
         >
           {stepping ? <PlayIcon /> : <StepForwardIcon />}

package/src/components/UpdateChip.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { UpdateChip } from './StatusBar';
+
+/** Props-driven chip (StatusBar owns the /update-status fetch), so the test
+ *  renders it directly — same pattern as InfrastructureDialog.test.tsx. */
+describe('UpdateChip', () => {
+  it('renders nothing while the status is unknown (fetch failed / pending)', () => {
+    expect(renderToStaticMarkup(<UpdateChip status={null} />)).toBe('');
+  });
+
+  it('renders nothing when the runner is current', () => {
+    const out = renderToStaticMarkup(
+      <UpdateChip status={{ current: '0.3.0', latest: '0.3.0', updateAvailable: false }} />,
+    );
+    expect(out).toBe('');
+  });
+
+  it('renders nothing when the check was unavailable (no latest)', () => {
+    const out = renderToStaticMarkup(<UpdateChip status={{ current: '0.3.0', updateAvailable: false }} />);
+    expect(out).toBe('');
+  });
+
+  it('shows the chip with both versions when an update is available', () => {
+    const out = renderToStaticMarkup(
+      <UpdateChip status={{ current: '0.3.0', latest: '0.4.0', updateAvailable: true }} />,
+    );
+    expect(out).toContain('update');
+    expect(out).toContain('Update available — 0.3.0 → 0.4.0');
+  });
+});