p-dev-harness 0.3.1 → 0.4.0

package/workspace-snapshot/files/apps/gui/components/custom/guided-local-readiness-card.tsx

@@ -1,8 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "framer-motion";
 import type { FirstRunReadiness } from "@harness/setup/first-run-readiness";
-import type { LocalReadinessCheckResult } from "@harness/setup/local-readiness-checks";
+import type {
+  LocalReadinessCheckResult,
+  LocalReadinessProgressEvent,
+} from "@harness/setup/local-readiness-checks";
 
 import { SPACING } from "@/lib/constants";
 import { GUIDED_SETUP_STEP_COUNT } from "@/lib/guided-setup";
@@ -12,10 +16,13 @@ import {
   LocalReadinessChecklist,
   type LocalReadinessUiStatus,
 } from "@/components/custom/setup-checklist";
+import { LocalReadinessVisualQueue } from "@/lib/local-readiness-visual-queue";
+import { GuidedStepSuccessPanel } from "@/components/custom/guided-step-success-panel";
 
 interface GuidedLocalReadinessCardProps {
   readiness: FirstRunReadiness;
   onContinue: () => void;
+  onStepCompleted?: () => void;
 }
 
 interface UiCheckRow {
@@ -26,71 +33,180 @@ interface UiCheckRow {
   action?: string;
 }
 
-function mapResultToUi(
-  results: LocalReadinessCheckResult[],
-): UiCheckRow[] {
-  return results.map((check) => ({
+function mapCompletedCheck(check: LocalReadinessCheckResult): UiCheckRow {
+  return {
     id: check.id,
     label: check.label,
     status: check.status === "passed" ? "passed" : "failed",
     detail: check.detail,
     action: check.action,
-  }));
+  };
+}
+
+function parseNdjsonLine(line: string): LocalReadinessProgressEvent | null {
+  const trimmed = line.trim();
+  if (!trimmed) {
+    return null;
+  }
+  try {
+    return JSON.parse(trimmed) as LocalReadinessProgressEvent;
+  } catch {
+    return null;
+  }
 }
 
 export function GuidedLocalReadinessCard({
   readiness,
   onContinue,
+  onStepCompleted,
 }: GuidedLocalReadinessCardProps) {
+  const prefersReducedMotion = useReducedMotion() ?? false;
   const [checks, setChecks] = useState<UiCheckRow[]>([]);
   const [running, setRunning] = useState(true);
   const [runError, setRunError] = useState<string | null>(null);
   const [allPassed, setAllPassed] = useState(false);
+  const [stepCompletedEmitted, setStepCompletedEmitted] = useState(false);
+  const runGenerationRef = useRef(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const visualQueueRef = useRef<LocalReadinessVisualQueue | null>(null);
+
+  const applyCheckUpdate = useCallback((updater: (current: UiCheckRow[]) => UiCheckRow[]) => {
+    setChecks(updater);
+  }, []);
 
   const runChecks = useCallback(async () => {
+    abortControllerRef.current?.abort();
+    visualQueueRef.current?.cancel();
+
+    const generation = runGenerationRef.current + 1;
+    runGenerationRef.current = generation;
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
     setRunning(true);
     setRunError(null);
     setAllPassed(false);
+    setStepCompletedEmitted(false);
     setChecks([]);
 
+    const queue = new LocalReadinessVisualQueue((event) => {
+      if (runGenerationRef.current !== generation) {
+        return;
+      }
+      if (event.type === "check-started") {
+        applyCheckUpdate((current) => {
+          if (current.some((row) => row.id === event.id)) {
+            return current;
+          }
+          return [
+            ...current,
+            {
+              id: event.id,
+              label: event.label,
+              status: "checking",
+            },
+          ];
+        });
+        return;
+      }
+      applyCheckUpdate((current) =>
+        current.map((row) =>
+          row.id === event.check.id ? mapCompletedCheck(event.check) : row,
+        ),
+      );
+    }, prefersReducedMotion);
+    visualQueueRef.current = queue;
+
     try {
-      const response = await fetch("/api/setup/local-readiness");
-      const data = await response.json();
+      const response = await fetch("/api/setup/local-readiness?stream=1", {
+        signal: abortController.signal,
+      });
       if (!response.ok) {
+        const data = (await response.json()) as { error?: string };
         throw new Error(data.error ?? "Local readiness check failed");
       }
+      if (!response.body) {
+        throw new Error("Local readiness stream was empty");
+      }
 
-      const results = data.checks as LocalReadinessCheckResult[];
-      setChecks(
-        results.map((check) => ({
-          id: check.id,
-          label: check.label,
-          status: "checking" as const,
-        })),
-      );
-
-      await new Promise((resolve) => setTimeout(resolve, 0));
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        if (runGenerationRef.current !== generation) {
+          return;
+        }
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+
+        for (const line of lines) {
+          const event = parseNdjsonLine(line);
+          if (!event || runGenerationRef.current !== generation) {
+            continue;
+          }
+          if (event.type === "run-failed") {
+            throw new Error(event.message);
+          }
+          if (event.type === "run-completed") {
+            setAllPassed(event.allPassed);
+            continue;
+          }
+          queue.enqueue(event);
+        }
+      }
 
-      setChecks(mapResultToUi(results));
-      setAllPassed(Boolean(data.allPassed));
+      const trailing = parseNdjsonLine(buffer);
+      if (trailing && runGenerationRef.current === generation) {
+        if (trailing.type === "run-failed") {
+          throw new Error(trailing.message);
+        }
+        if (trailing.type === "run-completed") {
+          setAllPassed(trailing.allPassed);
+        } else {
+          queue.enqueue(trailing);
+        }
+      }
     } catch (error) {
+      if (abortController.signal.aborted) {
+        return;
+      }
       setRunError(
         error instanceof Error
           ? error.message
           : "Could not run local readiness checks",
       );
       setChecks([]);
+      setAllPassed(false);
     } finally {
-      setRunning(false);
+      if (runGenerationRef.current === generation) {
+        setRunning(false);
+      }
     }
-  }, []);
+  }, [applyCheckUpdate, prefersReducedMotion]);
 
   useEffect(() => {
     void runChecks();
+    return () => {
+      abortControllerRef.current?.abort();
+      visualQueueRef.current?.cancel();
+    };
   }, [runChecks]);
 
-  const canContinue =
-    allPassed && !running && !readiness.localReadinessReviewed;
+  useEffect(() => {
+    if (!allPassed || running || stepCompletedEmitted) {
+      return;
+    }
+    onStepCompleted?.();
+    setStepCompletedEmitted(true);
+  }, [allPassed, onStepCompleted, running, stepCompletedEmitted]);
+
+  const passedChecks = checks.filter((check) => check.status === "passed");
 
   return (
     <SectionCard
@@ -115,16 +231,18 @@ export function GuidedLocalReadinessCard({
 
         {checks.length > 0 ? <LocalReadinessChecklist checks={checks} /> : null}
 
-        {allPassed && !running ? (
-          <p className="text-sm font-medium text-emerald-700">
-            Local readiness passed.
-          </p>
-        ) : null}
-
-        {canContinue ? (
-          <Button type="button" onClick={onContinue}>
-            Continue to cloud secrets
-          </Button>
+        {allPassed && !running && !readiness.localReadinessReviewed ? (
+          <GuidedStepSuccessPanel
+            heading="Local readiness passed"
+            explanation="This machine passed the local readiness checks required before cloud secrets setup."
+            details={
+              passedChecks.length > 0
+                ? passedChecks.map((check) => check.label)
+                : ["All local readiness checks passed."]
+            }
+            continueLabel="Continue to cloud secrets"
+            onContinue={onContinue}
+          />
         ) : null}
       </div>
     </SectionCard>

package/workspace-snapshot/files/apps/gui/components/custom/guided-operation-panel.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+export type GuidedOperationPhase = {
+  id: string;
+  label: string;
+  status: "pending" | "active" | "complete";
+};
+
+type GuidedOperationPanelProps = {
+  phases: GuidedOperationPhase[];
+  supportingText?: string | null;
+  busy?: boolean;
+};
+
+export function GuidedOperationPanel({
+  phases,
+  supportingText,
+  busy = true,
+}: GuidedOperationPanelProps) {
+  const prefersReducedMotion = useReducedMotion() ?? false;
+  const activePhase = phases.find((phase) => phase.status === "active");
+
+  return (
+    <div
+      className="space-y-3 rounded-md border border-border bg-muted/10 p-4"
+      aria-live="polite"
+      aria-busy={busy}
+      data-testid="guided-operation-panel"
+    >
+      <ul className="space-y-2">
+        {phases.map((phase) => {
+          const isActive = phase.status === "active";
+          const isComplete = phase.status === "complete";
+          return (
+            <li
+              key={phase.id}
+              className="flex items-start gap-2 text-sm"
+              data-phase-status={phase.status}
+            >
+              <span
+                className={
+                  isComplete
+                    ? "mt-0.5 text-emerald-600 dark:text-emerald-400"
+                    : isActive
+                      ? "mt-0.5 text-foreground"
+                      : "mt-0.5 text-muted-foreground"
+                }
+                aria-hidden="true"
+              >
+                {isComplete ? "✓" : isActive ? "●" : "○"}
+              </span>
+              {isActive && !prefersReducedMotion ? (
+                <motion.span
+                  className="font-medium text-foreground"
+                  animate={{ opacity: [0.55, 1, 0.55] }}
+                  transition={{ duration: 1.6, repeat: Infinity, ease: "easeInOut" }}
+                >
+                  {phase.label}
+                </motion.span>
+              ) : (
+                <span
+                  className={
+                    isActive
+                      ? "font-medium text-foreground"
+                      : isComplete
+                        ? "text-foreground"
+                        : "text-muted-foreground"
+                  }
+                >
+                  {phase.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      {supportingText || activePhase ? (
+        <p className="text-sm text-muted-foreground">
+          {supportingText ?? activePhase?.label}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function buildGuidedOperationPhases(input: {
+  labels: string[];
+  activeIndex: number;
+}): GuidedOperationPhase[] {
+  return input.labels.map((label, index) => ({
+    id: `phase-${index}`,
+    label,
+    status:
+      index < input.activeIndex
+        ? "complete"
+        : index === input.activeIndex
+          ? "active"
+          : "pending",
+  }));
+}

package/workspace-snapshot/files/apps/gui/components/custom/guided-progress-check.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+interface GuidedProgressCheckProps {
+  animateDraw: boolean;
+}
+
+export function GuidedProgressCheck({ animateDraw }: GuidedProgressCheckProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const shouldDraw = animateDraw && !prefersReducedMotion;
+
+  return (
+    <svg
+      className="size-3.5 sm:size-4"
+      viewBox="0 0 16 16"
+      aria-hidden
+      focusable="false"
+    >
+      <motion.path
+        d="M3.5 8.5 L6.5 11.5 L12.5 4.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        initial={shouldDraw ? { pathLength: 0 } : { pathLength: 1 }}
+        animate={{ pathLength: 1 }}
+        transition={
+          shouldDraw
+            ? { duration: 0.28, ease: [0.2, 0, 0, 1] as const }
+            : { duration: 0 }
+        }
+      />
+    </svg>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/custom/guided-setup-progress.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+import type {
+  GuidedProgressStage,
+  GuidedProgressStageState,
+} from "@/lib/guided-setup";
+import { GUIDED_SETUP_STEP_COUNT } from "@/lib/guided-setup";
+import { GuidedProgressCheck } from "@/components/custom/guided-progress-check";
+import { cn } from "@/lib/utils";
+
+type GuidedSetupProgressProps = {
+  stages: GuidedProgressStage[];
+};
+
+export function GuidedSetupProgress({ stages }: GuidedSetupProgressProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const priorStatesRef = useRef<Map<string, GuidedProgressStageState>>(new Map());
+  const isInitialMountRef = useRef(true);
+  const currentStage = stages.find((stage) => stage.state === "current");
+
+  useEffect(() => {
+    isInitialMountRef.current = false;
+    priorStatesRef.current = new Map(
+      stages.map((stage) => [stage.id, stage.state]),
+    );
+  }, [stages]);
+
+  const shouldAnimateCheck = (stage: GuidedProgressStage): boolean => {
+    if (prefersReducedMotion || isInitialMountRef.current) {
+      return false;
+    }
+
+    const priorState = priorStatesRef.current.get(stage.id);
+    return stage.state === "completed" && priorState !== "completed";
+  };
+
+  return (
+    <nav aria-label="Guided setup progress" className="w-full">
+      <ol className="grid grid-cols-7 gap-1 sm:gap-2">
+        {stages.map((stage) => {
+          const isCurrent = stage.state === "current";
+          const isCompleted = stage.state === "completed";
+          const srStatus = isCurrent
+            ? "current"
+            : isCompleted
+              ? "completed"
+              : "upcoming";
+
+          return (
+            <li
+              key={stage.id}
+              aria-current={isCurrent ? "step" : undefined}
+              className="min-w-0"
+            >
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                <motion.div
+                  layout={!prefersReducedMotion}
+                  className={cn(
+                    "flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium sm:size-8",
+                    isCompleted &&
+                      "border-primary bg-primary text-primary-foreground",
+                    isCurrent && "border-primary bg-background text-foreground",
+                    !isCompleted &&
+                      !isCurrent &&
+                      "border-border bg-muted text-muted-foreground",
+                  )}
+                  transition={
+                    prefersReducedMotion
+                      ? { duration: 0 }
+                      : { duration: 0.2, ease: [0.2, 0, 0, 1] }
+                  }
+                >
+                  {isCompleted ? (
+                    <GuidedProgressCheck
+                      animateDraw={shouldAnimateCheck(stage)}
+                    />
+                  ) : (
+                    <span aria-hidden>{stage.stepNumber}</span>
+                  )}
+                </motion.div>
+                <span
+                  className={cn(
+                    "hidden w-full truncate text-[10px] font-medium sm:block sm:text-xs",
+                    isCurrent
+                      ? "text-foreground"
+                      : isCompleted
+                        ? "text-muted-foreground"
+                        : "text-muted-foreground/80",
+                  )}
+                >
+                  {stage.shortLabel}
+                </span>
+                <span className="sr-only">
+                  {`Step ${stage.stepNumber} of ${GUIDED_SETUP_STEP_COUNT}, ${stage.accessibleLabel}, ${srStatus}`}
+                </span>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      {currentStage ? (
+        <p
+          aria-live="polite"
+          className="mt-3 text-center text-sm font-medium text-foreground sm:hidden"
+        >
+          {currentStage.shortLabel}
+        </p>
+      ) : null}
+    </nav>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/custom/guided-step-success-panel.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+type GuidedStepSuccessPanelProps = {
+  heading: string;
+  explanation: string;
+  continueLabel: string;
+  onContinue: () => void;
+  details?: string[];
+};
+
+export function GuidedStepSuccessPanel({
+  heading,
+  explanation,
+  continueLabel,
+  onContinue,
+  details,
+}: GuidedStepSuccessPanelProps) {
+  return (
+    <div
+      className="space-y-4 rounded-md border border-emerald-500/40 bg-emerald-500/5 p-4"
+      data-testid="guided-step-success-panel"
+      role="status"
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border border-emerald-600 text-sm font-semibold text-emerald-700 dark:border-emerald-400 dark:text-emerald-300"
+          aria-hidden="true"
+        >
+          ✓
+        </span>
+        <div className="space-y-1">
+          <h3 className="text-sm font-semibold text-foreground">{heading}</h3>
+          <p className="text-sm text-muted-foreground">{explanation}</p>
+          {details && details.length > 0 ? (
+            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+              {details.map((detail) => (
+                <li key={detail}>{detail}</li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      </div>
+      <Button type="button" onClick={onContinue}>
+        {continueLabel}
+      </Button>
+    </div>
+  );
+}