p-dev-harness 0.3.0 → 0.3.1

package/workspace-snapshot/files/apps/gui/components/custom/connected-status.tsx

@@ -0,0 +1,30 @@
+import { FaCheckCircle } from "react-icons/fa";
+import { cn } from "@/lib/utils";
+
+export function ConnectedStatusMessage({
+  message,
+  failed = false,
+  className,
+}: {
+  message: string;
+  failed?: boolean;
+  className?: string;
+}) {
+  return (
+    <p
+      className={cn(
+        "flex items-center gap-2 text-sm",
+        failed ? "text-destructive" : "text-muted-foreground",
+        className,
+      )}
+    >
+      {!failed ? (
+        <FaCheckCircle
+          className="size-4 shrink-0 text-green-600"
+          aria-hidden="true"
+        />
+      ) : null}
+      <span>{message}</span>
+    </p>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/custom/environment-config-form.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import { FORM } from "@/lib/constants";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { StatusBadge } from "@/components/custom/status-badge";
+import { ServiceIcon } from "@/components/custom/service-icons";
+import { ConnectedStatusMessage } from "@/components/custom/connected-status";
+import {
+  isServiceFailedForValue,
+  isServiceVerifiedForValue,
+} from "@/lib/verification-state";
+import { cn } from "@/lib/utils";
+import {
+  GITHUB_TOKEN_GUIDED_HELPER_TEXT,
+  GITHUB_TOKEN_INPUT_LABEL,
+} from "@harness/setup/github-workflow-permissions";
+import { GitHubTokenHelpDisclosure } from "@/components/custom/github-token-help-disclosure";
+
+export interface EnvironmentFormValues {
+  harnessConfigPath: string;
+  githubDispatchRepository: string;
+  linearApiKey: string;
+  cursorApiKey: string;
+  githubToken: string;
+  vercelToken: string;
+}
+
+export interface EnvironmentFormPresence {
+  LINEAR_API_KEY: boolean;
+  CURSOR_API_KEY: boolean;
+  GITHUB_TOKEN: boolean;
+  VERCEL_TOKEN: boolean;
+}
+
+export type ServiceKey = keyof EnvironmentFormPresence;
+
+export type VerificationUiState =
+  | "unchecked"
+  | "checking"
+  | "connected"
+  | "failed";
+
+export interface ServiceVerificationUi {
+  state: VerificationUiState;
+  verifiedValueFingerprint?: string;
+  attemptedValueFingerprint?: string;
+  message?: string;
+  limitation?: string;
+  label?: string;
+}
+
+export type ServiceVerificationMap = Record<ServiceKey, ServiceVerificationUi>;
+
+export const INITIAL_SERVICE_VERIFICATION: ServiceVerificationMap = {
+  LINEAR_API_KEY: { state: "unchecked" },
+  CURSOR_API_KEY: { state: "unchecked" },
+  GITHUB_TOKEN: { state: "unchecked" },
+  VERCEL_TOKEN: { state: "unchecked" },
+};
+
+interface EnvironmentConfigFormProps {
+  values: EnvironmentFormValues;
+  presence: EnvironmentFormPresence;
+  highlightDispatchRepo?: boolean;
+  variant?: "guided-services" | "advanced";
+  verification?: ServiceVerificationMap;
+  verifyingKey?: ServiceKey | null;
+  onChange: (values: EnvironmentFormValues) => void;
+  onVerifyService?: (key: ServiceKey) => void;
+  onServiceBlur?: (key: ServiceKey) => void;
+}
+
+const SERVICE_DEFINITIONS: Array<{
+  key: ServiceKey;
+  id: string;
+  displayName: string;
+  valueKey: keyof Pick<
+    EnvironmentFormValues,
+    "linearApiKey" | "cursorApiKey" | "githubToken" | "vercelToken"
+  >;
+  helperText: string;
+  inputLabel?: string;
+}> = [
+  {
+    key: "LINEAR_API_KEY",
+    id: "linear-api-key",
+    displayName: "Linear",
+    valueKey: "linearApiKey",
+    helperText: "Lets the harness read and update Linear issues.",
+    inputLabel: "Go to Linear, create or copy your API key, then paste it here.",
+  },
+  {
+    key: "CURSOR_API_KEY",
+    id: "cursor-api-key",
+    displayName: "Cursor",
+    valueKey: "cursorApiKey",
+    helperText:
+      "Used to spin up Cursor agents that do the planning and development work.",
+    inputLabel: "Go to Cursor, create or copy your API key, then paste it here.",
+  },
+  {
+    key: "GITHUB_TOKEN",
+    id: "github-token",
+    displayName: "GitHub",
+    valueKey: "githubToken",
+    helperText: GITHUB_TOKEN_GUIDED_HELPER_TEXT,
+    inputLabel: GITHUB_TOKEN_INPUT_LABEL,
+  },
+  {
+    key: "VERCEL_TOKEN",
+    id: "vercel-token",
+    displayName: "Vercel",
+    valueKey: "vercelToken",
+    helperText:
+      "Used to create or access Vercel previews so implementation work can be verified before code is merged.",
+    inputLabel: "Go to Vercel, create or copy your token, then paste it here.",
+  },
+];
+
+function verificationBadge(state: VerificationUiState) {
+  switch (state) {
+    case "checking":
+      return { label: "Checking", variant: "secondary" as const };
+    case "connected":
+      return { label: "Connected", variant: "success" as const };
+    case "failed":
+      return { label: "Failed", variant: "destructive" as const };
+    default:
+      return { label: "Not connected yet", variant: "secondary" as const };
+  }
+}
+
+export function EnvironmentConfigForm({
+  values,
+  presence,
+  highlightDispatchRepo = false,
+  variant = "advanced",
+  verification = INITIAL_SERVICE_VERIFICATION,
+  verifyingKey = null,
+  onChange,
+  onVerifyService,
+  onServiceBlur,
+}: EnvironmentConfigFormProps) {
+  const update = (patch: Partial<EnvironmentFormValues>) => {
+    onChange({ ...values, ...patch });
+  };
+
+  if (variant === "guided-services") {
+    return (
+      <div className="space-y-4">
+        {SERVICE_DEFINITIONS.map((service) => (
+          <ServiceConnectionCard
+            key={service.key}
+            id={service.id}
+            serviceKey={service.key}
+            displayName={service.displayName}
+            envKey={service.key}
+            helperText={service.helperText}
+            inputLabel={service.inputLabel}
+            present={presence[service.key]}
+            value={values[service.valueKey]}
+            verification={verification[service.key]}
+            verifying={verifyingKey === service.key}
+            onChange={(value) => update({ [service.valueKey]: value })}
+            onVerify={
+              onVerifyService ? () => onVerifyService(service.key) : undefined
+            }
+            onBlur={
+              onServiceBlur ? () => onServiceBlur(service.key) : undefined
+            }
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={FORM.fieldGrid}>
+      <div className={FORM.fieldStack}>
+        <Label htmlFor="harness-config-path">HARNESS_CONFIG_PATH</Label>
+        <Input
+          id="harness-config-path"
+          value={values.harnessConfigPath}
+          onChange={(event) =>
+            update({ harnessConfigPath: event.target.value })
+          }
+          autoComplete="off"
+        />
+        <p className={FORM.secretHint}>
+          Recommended: .harness/config.local.json
+        </p>
+      </div>
+
+      <div className={FORM.fieldStack}>
+        <Label htmlFor="github-dispatch-repository">
+          GITHUB_DISPATCH_REPOSITORY
+        </Label>
+        <Input
+          id="github-dispatch-repository"
+          value={values.githubDispatchRepository}
+          onChange={(event) =>
+            update({ githubDispatchRepository: event.target.value })
+          }
+          autoComplete="off"
+          className={highlightDispatchRepo ? "border-destructive/60" : undefined}
+        />
+        <p className={FORM.secretHint}>
+          Harness repo used for remote setup checks and Actions secret writes.
+          {highlightDispatchRepo
+            ? " This value still points at an old disposable smoke-test repo."
+            : " Defaults to git remote origin when unset."}
+        </p>
+      </div>
+
+      {SERVICE_DEFINITIONS.map((service) => (
+        <SecretField
+          key={service.key}
+          id={service.id}
+          label={service.key}
+          present={presence[service.key]}
+          value={values[service.valueKey]}
+          onChange={(value) => update({ [service.valueKey]: value })}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ServiceConnectionCard({
+  id,
+  serviceKey,
+  displayName,
+  envKey,
+  helperText,
+  inputLabel,
+  present,
+  value,
+  verification,
+  verifying,
+  onChange,
+  onVerify,
+  onBlur,
+}: {
+  id: string;
+  serviceKey: ServiceKey;
+  displayName: string;
+  envKey: string;
+  helperText: string;
+  inputLabel?: string;
+  present: boolean;
+  value: string;
+  verification: ServiceVerificationUi;
+  verifying: boolean;
+  onChange: (value: string) => void;
+  onVerify?: () => void;
+  onBlur?: () => void;
+}) {
+  const badge = verificationBadge(verification.state);
+  const trimmedValue = value.trim();
+  const verifiedForCurrentValue =
+    verification.state === "connected" &&
+    (trimmedValue
+      ? isServiceVerifiedForValue(verification, trimmedValue)
+      : present);
+  const failedForCurrentValue =
+    verification.state === "failed" &&
+    (trimmedValue
+      ? isServiceFailedForValue(verification, trimmedValue)
+      : present);
+  const showConnectedMessage =
+    verifiedForCurrentValue && Boolean(verification.message);
+  const showFailedMessage = failedForCurrentValue && Boolean(verification.message);
+
+  const verifyButtonLabel = verifying
+    ? "Verifying and saving…"
+    : verifiedForCurrentValue
+      ? "Verified"
+      : "Verify and save";
+
+  const verifyButtonDisabled =
+    verifying ||
+    verifiedForCurrentValue ||
+    (!trimmedValue && !present);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-4 space-y-3">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="space-y-1">
+          <p className="inline-flex items-center gap-2 text-sm font-medium">
+            <ServiceIcon serviceKey={serviceKey} />
+            <span>{displayName}</span>
+          </p>
+          <p className="text-xs text-muted-foreground">{envKey}</p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {present ? (
+            <StatusBadge label="Saved locally" variant="secondary" />
+          ) : null}
+          <StatusBadge label={badge.label} variant={badge.variant} />
+        </div>
+      </div>
+
+      <p className="text-sm text-muted-foreground">{helperText}</p>
+
+      <div className={FORM.fieldStack}>
+        <Label htmlFor={id}>{inputLabel ?? envKey}</Label>
+        <Input
+          id={id}
+          type="password"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          onBlur={onBlur}
+          placeholder={
+            present ? "Leave blank to keep existing value" : "Enter value"
+          }
+          autoComplete="off"
+        />
+      </div>
+
+      {serviceKey === "GITHUB_TOKEN" ? <GitHubTokenHelpDisclosure /> : null}
+
+      <div className="flex flex-col items-start gap-2">
+        {showConnectedMessage ? (
+          <ConnectedStatusMessage message={verification.message!} />
+        ) : showFailedMessage ? (
+          <ConnectedStatusMessage message={verification.message!} failed />
+        ) : present && verification.state === "unchecked" && !trimmedValue ? (
+          <p className="text-sm text-muted-foreground">
+            A key is already saved in `.env.local`. Verify it if you want to
+            confirm it still works.
+          </p>
+        ) : null}
+
+        {verification.limitation &&
+        (verifiedForCurrentValue || failedForCurrentValue) ? (
+          <p className="text-xs text-muted-foreground">
+            {verification.limitation}
+          </p>
+        ) : null}
+
+        {onVerify ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onVerify}
+            disabled={verifyButtonDisabled}
+          >
+            {verifyButtonLabel}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function SecretField({
+  id,
+  label,
+  present,
+  value,
+  helperText,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  present: boolean;
+  value: string;
+  helperText?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className={FORM.fieldStack}>
+      <div className="flex items-center gap-2">
+        <Label htmlFor={id}>{label}</Label>
+        <StatusBadge
+          label={present ? "Set" : "Not configured yet"}
+          variant={present ? "success" : "secondary"}
+        />
+      </div>
+      <Input
+        id={id}
+        type="password"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={present ? "Leave blank to keep existing value" : "Enter value"}
+        autoComplete="off"
+      />
+      {helperText ? (
+        <p className={FORM.secretHint}>{helperText}</p>
+      ) : present ? (
+        <p className={FORM.secretHint}>
+          Existing values are never shown. Leave blank to preserve a set key.
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/custom/first-run-stepper.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  Lock,
+  XCircle,
+} from "lucide-react";
+import type {
+  FirstRunReadiness,
+  FirstRunStep,
+  FirstRunStepStatus,
+} from "@harness/setup/first-run-readiness";
+
+import { SPACING } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { StatusBadge } from "@/components/custom/status-badge";
+import { Button } from "@/components/ui/button";
+
+function statusVariant(
+  status: FirstRunStepStatus,
+  setupNeeded = false,
+): "success" | "warning" | "destructive" | "secondary" {
+  switch (status) {
+    case "complete":
+      return "success";
+    case "blocked":
+      return setupNeeded ? "secondary" : "destructive";
+    case "ready":
+    case "in_progress":
+      return setupNeeded ? "secondary" : "warning";
+    default:
+      return "secondary";
+  }
+}
+
+function statusLabel(
+  status: FirstRunStepStatus,
+  setupNeeded = false,
+): string {
+  switch (status) {
+    case "not_started":
+      return "Not started";
+    case "in_progress":
+      return setupNeeded ? "Setup needed" : "In progress";
+    case "blocked":
+      return setupNeeded ? "Setup needed" : "Blocked";
+    case "ready":
+      return "Ready";
+    case "complete":
+      return "Complete";
+  }
+}
+
+function StepIcon({
+  step,
+  setupNeeded,
+}: {
+  step: FirstRunStep;
+  setupNeeded: boolean;
+}) {
+  if (step.status === "complete") {
+    return <CheckCircle2 className="size-4 shrink-0 text-emerald-600" />;
+  }
+  if (step.status === "blocked" && !setupNeeded) {
+    return <XCircle className="size-4 shrink-0 text-destructive" />;
+  }
+  if (step.status === "not_started") {
+    return <Lock className="size-4 shrink-0 text-muted-foreground" />;
+  }
+  return <Circle className="size-4 shrink-0 text-muted-foreground" />;
+}
+
+interface FirstRunStepperProps {
+  readiness: FirstRunReadiness;
+  renderStepContent: (stepId: FirstRunStep["id"]) => React.ReactNode;
+  onSwitchToAdvanced?: () => void;
+}
+
+export function FirstRunStepper({
+  readiness,
+  renderStepContent,
+  onSwitchToAdvanced,
+}: FirstRunStepperProps) {
+  const [expandedStepId, setExpandedStepId] = useState(
+    readiness.currentStepId,
+  );
+
+  useEffect(() => {
+    setExpandedStepId(readiness.currentStepId);
+  }, [readiness.currentStepId]);
+
+  return (
+    <div className={SPACING.section}>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className={SPACING.stackSm}>
+          <h3 className="text-lg font-semibold">First-run readiness flow</h3>
+          <p className="text-sm text-muted-foreground">
+            Complete each step in order. Later steps stay inspectable until
+            prerequisites are ready.
+          </p>
+        </div>
+        {onSwitchToAdvanced ? (
+          <Button type="button" variant="outline" onClick={onSwitchToAdvanced}>
+            Show all setup sections
+          </Button>
+        ) : null}
+      </div>
+
+      <ol className={SPACING.list}>
+        {readiness.steps.map((step) => {
+          const isCurrent = step.id === readiness.currentStepId;
+          const expanded = expandedStepId === step.id;
+          const canExpand = step.inspectable;
+          const setupNeeded =
+            step.blockers.length > 0 &&
+            step.blockers.every((blocker) => blocker.tone === "setup_needed");
+
+          return (
+            <li
+              key={step.id}
+              className={cn(
+                "rounded-lg border border-border",
+                isCurrent && "border-primary/40 shadow-sm",
+              )}
+            >
+              <button
+                type="button"
+                className="flex w-full cursor-pointer items-start gap-3 p-4 text-left disabled:cursor-not-allowed"
+                onClick={() => {
+                  if (canExpand) {
+                    setExpandedStepId(expanded ? readiness.currentStepId : step.id);
+                  }
+                }}
+                disabled={!canExpand}
+              >
+                <StepIcon step={step} setupNeeded={setupNeeded} />
+                <div className="min-w-0 flex-1 space-y-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="text-sm font-medium">{step.label}</p>
+                    <StatusBadge
+                      label={statusLabel(step.status, setupNeeded)}
+                      variant={statusVariant(step.status, setupNeeded)}
+                    />
+                    {isCurrent ? (
+                      <StatusBadge label="Current" variant="secondary" />
+                    ) : null}
+                  </div>
+                  <p className="text-sm text-muted-foreground">{step.summary}</p>
+                  {step.primaryAction && step.actionable ? (
+                    <p className="text-sm font-medium text-foreground">
+                      Primary action: {step.primaryAction.label}
+                    </p>
+                  ) : null}
+                  {step.blockers[0] && isCurrent && !setupNeeded ? (
+                    <p className="text-sm text-destructive">
+                      {step.blockers[0].action}
+                    </p>
+                  ) : step.blockers[0] && isCurrent ? (
+                    <p className="text-sm text-muted-foreground">
+                      {step.blockers[0].action}
+                    </p>
+                  ) : null}
+                </div>
+                {canExpand ? (
+                  expanded ? (
+                    <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+                  )
+                ) : null}
+              </button>
+
+              {expanded ? (
+                <div
+                  className={cn(
+                    "border-t border-border p-4",
+                    !step.actionable && step.status === "not_started"
+                      ? "pointer-events-none opacity-60"
+                      : undefined,
+                  )}
+                >
+                  {renderStepContent(step.id)}
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ol>
+
+      <p className="text-sm text-muted-foreground">
+        {readiness.prohibitedActionsNote}
+      </p>
+    </div>
+  );
+}