p-dev-harness 0.3.1 → 0.4.0

package/workspace-snapshot/files/apps/gui/components/settings/settings-mutation-panel.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { RemoteActionConfirmation } from "@/components/custom/remote-action-confirmation";
+import type { SettingsMutationPhase } from "@/lib/settings/settings-mutation";
+
+type SettingsMutationPanelProps = {
+  title?: string;
+  explanation?: string | null;
+  previewSummary?: string | null;
+  phase: SettingsMutationPhase;
+  error?: string | null;
+  successMessage?: string | null;
+  previewPolicy?: "required" | "optional";
+  confirmScope?:
+    | "remote-secret-write"
+    | "vercel-bridge-write"
+    | "remote-repo-write"
+    | "linear-write";
+  confirmed: boolean;
+  onConfirmedChange: (confirmed: boolean) => void;
+  onPreview?: () => void;
+  onApply?: () => void;
+  previewLabel?: string;
+  applyLabel?: string;
+  disablePreview?: boolean;
+  disableApply?: boolean;
+};
+
+export function SettingsMutationPanel({
+  title = "Apply changes",
+  explanation,
+  previewSummary,
+  phase,
+  error,
+  successMessage,
+  confirmScope,
+  confirmed,
+  onConfirmedChange,
+  onPreview,
+  onApply,
+  previewLabel = "Preview changes",
+  applyLabel = "Apply changes",
+  previewPolicy = "required",
+  disablePreview = false,
+  disableApply = false,
+}: SettingsMutationPanelProps) {
+  const busy = phase === "previewing" || phase === "applying";
+  const applyRequiresPreview = previewPolicy === "required";
+  const previewIsOptional = previewPolicy === "optional";
+
+  return (
+    <div className="space-y-4 rounded-md border border-border p-4">
+      <div className="space-y-1">
+        <h3 className="text-sm font-semibold">{title}</h3>
+        {explanation ? (
+          <p className="text-sm text-muted-foreground">{explanation}</p>
+        ) : null}
+      </div>
+
+      {onPreview ? (
+        <div className="space-y-2 border-b border-border pb-4">
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            {previewIsOptional ? (
+              <span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
+                Optional
+              </span>
+            ) : null}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={busy || disablePreview}
+              onClick={onPreview}
+            >
+              {phase === "previewing" ? "Previewing…" : previewLabel}
+            </Button>
+          </div>
+          {previewIsOptional ? (
+            <p className="text-right text-xs text-muted-foreground">
+              Review the planned changes before applying.
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {previewSummary ? (
+        <pre className="max-h-48 overflow-auto rounded-md bg-muted/40 p-3 text-xs whitespace-pre-wrap">
+          {previewSummary}
+        </pre>
+      ) : null}
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      {successMessage ? (
+        <p className="text-sm text-muted-foreground">{successMessage}</p>
+      ) : null}
+
+      {confirmScope ? (
+        <RemoteActionConfirmation
+          scope={confirmScope}
+          variant="advanced"
+          confirmed={confirmed}
+          disabled={busy}
+          onConfirmedChange={onConfirmedChange}
+        />
+      ) : null}
+
+      {onApply ? (
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            disabled={
+              busy ||
+              disableApply ||
+              (confirmScope ? !confirmed : false) ||
+              (applyRequiresPreview && !previewSummary)
+            }
+            onClick={onApply}
+          >
+            {phase === "applying" ? "Applying…" : applyLabel}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/settings/settings-shell.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SETTINGS_NAV_ITEMS } from "@/lib/settings/settings-navigation";
+import { LAYOUT } from "@/lib/constants/layout";
+
+type SettingsShellProps = {
+  children: React.ReactNode;
+};
+
+export function SettingsShell({ children }: SettingsShellProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className={`${LAYOUT.main} grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]`}>
+      <nav aria-label="Settings" className="space-y-1">
+        <h1 className="mb-3 text-lg font-semibold tracking-tight">Settings</h1>
+        <ul className="space-y-1">
+          {SETTINGS_NAV_ITEMS.map((item) => {
+            const active =
+              "exact" in item && item.exact
+                ? pathname === item.href
+                : pathname === item.href || pathname.startsWith(`${item.href}/`);
+            return (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  aria-current={active ? "page" : undefined}
+                  className={`block rounded-md px-3 py-2 text-sm ${
+                    active
+                      ? "bg-muted font-medium text-foreground"
+                      : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+      <div className="min-w-0">{children}</div>
+    </div>
+  );
+}

package/workspace-snapshot/files/apps/gui/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/workspace-snapshot/files/apps/gui/components/ui/guided-select.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { FORM } from "@/lib/constants/form";
+
+const GuidedSelect = React.forwardRef<
+  HTMLSelectElement,
+  React.ComponentProps<"select">
+>(({ className, children, ...props }, ref) => {
+  return (
+    <select
+      className={cn(FORM.guidedSelect, className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+});
+GuidedSelect.displayName = "GuidedSelect";
+
+export { GuidedSelect };

package/workspace-snapshot/files/apps/gui/components/workflow/workflow-cards-section.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { CanonicalStatusKey } from "@harness/workflow/canonical-product-development-workflow";
+import { lookupCanonicalStatus } from "@harness/workflow/canonical-product-development-workflow";
+import type { WorkflowBootstrapPayload } from "@harness/workflow-page/types";
+import { AlertTriangle } from "lucide-react";
+import { WORKFLOW_OWNERSHIP_COLUMNS } from "@/lib/workflow/workflow-ownership";
+import { getViolationForStatus } from "@/lib/workflow/workflow-health";
+import { formatWorkflowViolationMessage } from "@/lib/workflow/workflow-violation-messages";
+import { resolveStatusContent } from "@/lib/workflow/workflow-status-content";
+import {
+  resolveModelDisplayName,
+  type WorkflowModelPhaseKey,
+} from "@/lib/workflow/use-model-autosave";
+import { WorkflowModelControl } from "@/components/workflow/workflow-model-control";
+
+const EXPANDED_CARDS_KEY = "workflow-expanded-cards";
+
+type WorkflowCardsSectionProps = {
+  bootstrap: WorkflowBootstrapPayload;
+  disabled?: boolean;
+  onSelectModel: (phaseKey: WorkflowModelPhaseKey, modelId: string) => void;
+  onUpdateModelParameter: (
+    phaseKey: WorkflowModelPhaseKey,
+    parameterId: string,
+    value: string,
+  ) => void;
+  saveStateLabel: (phaseKey: WorkflowModelPhaseKey) => string | null;
+  saveErrorDetail?: (phaseKey: WorkflowModelPhaseKey) => string | undefined;
+};
+
+function readExpandedCards(): Set<CanonicalStatusKey> {
+  if (typeof window === "undefined") {
+    return new Set();
+  }
+  try {
+    const raw = window.sessionStorage.getItem(EXPANDED_CARDS_KEY);
+    if (!raw) {
+      return new Set();
+    }
+    return new Set(JSON.parse(raw) as CanonicalStatusKey[]);
+  } catch {
+    return new Set();
+  }
+}
+
+function writeExpandedCards(keys: Set<CanonicalStatusKey>): void {
+  window.sessionStorage.setItem(EXPANDED_CARDS_KEY, JSON.stringify([...keys]));
+}
+
+export function WorkflowCardsSection({
+  bootstrap,
+  disabled = false,
+  onSelectModel,
+  onUpdateModelParameter,
+  saveStateLabel,
+  saveErrorDetail,
+}: WorkflowCardsSectionProps) {
+  const [expanded, setExpanded] = useState<Set<CanonicalStatusKey>>(() =>
+    readExpandedCards(),
+  );
+
+  useEffect(() => {
+    writeExpandedCards(expanded);
+  }, [expanded]);
+
+  const toggleExpanded = (key: CanonicalStatusKey) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const builderDisplayName = resolveModelDisplayName(
+    bootstrap.modelCatalog,
+    bootstrap.builderSelection.modelId,
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-6">
+      {WORKFLOW_OWNERSHIP_COLUMNS.map((column) => (
+        <section key={column.id} aria-label={column.title} className="space-y-3">
+          <div>
+            <h2 className="text-base font-semibold">{column.title}</h2>
+            <p className="mt-1 text-sm text-muted-foreground">{column.description}</p>
+          </div>
+          <div className="space-y-2">
+            {column.statuses.map((statusKey) => {
+              const statusDef = lookupCanonicalStatus(statusKey);
+              if (!statusDef) {
+                return null;
+              }
+              const isExpanded = expanded.has(statusKey);
+              const violation = getViolationForStatus(
+                bootstrap.canonicalWorkflow.violations,
+                statusKey,
+              );
+              const violationMessage = violation
+                ? formatWorkflowViolationMessage(violation)
+                : null;
+              const content = resolveStatusContent(
+                statusKey,
+                bootstrap.canonicalWorkflow.mergePathVariant,
+              );
+
+              return (
+                <div
+                  key={statusKey}
+                  className={`rounded-md border ${
+                    violation ? "border-destructive/50" : "border-border"
+                  }`}
+                >
+                  <button
+                    type="button"
+                    className="flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2.5 text-left"
+                    aria-expanded={isExpanded}
+                    onClick={() => toggleExpanded(statusKey)}
+                  >
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span className="text-sm font-medium">{statusDef.name}</span>
+                      {violation ? (
+                        <AlertTriangle
+                          className="size-4 shrink-0 text-destructive"
+                          aria-label="Needs attention"
+                        />
+                      ) : null}
+                    </div>
+                    <span className="shrink-0 text-xs text-muted-foreground">
+                      {isExpanded ? "Collapse" : "Expand"}
+                    </span>
+                  </button>
+                  {isExpanded ? (
+                    <div className="space-y-2 border-t border-border px-3 py-3 text-sm">
+                      {violationMessage ? (
+                        <div className="space-y-1 text-destructive">
+                          <p>{violationMessage.primary}</p>
+                          {violationMessage.body ? (
+                            <p>{violationMessage.body}</p>
+                          ) : null}
+                          {violationMessage.diagnostic?.map((line) => (
+                            <p key={line} className="text-xs text-muted-foreground">
+                              {line}
+                            </p>
+                          ))}
+                        </div>
+                      ) : null}
+                      <p className="text-muted-foreground">{content.description}</p>
+                      {content.fields.map((field) => (
+                        <p key={`${statusKey}-${field.label}`}>
+                          <span className="font-medium">{field.label}:</span> {field.value}
+                        </p>
+                      ))}
+                      {content.builderModelNote ? (
+                        <p className="text-muted-foreground">{content.builderModelNote}</p>
+                      ) : null}
+                      {content.showPlannerModel ? (
+                        <WorkflowModelControl
+                          label="Planner model"
+                          phaseKey="planning"
+                          disabled={disabled}
+                          modelCatalog={bootstrap.modelCatalog}
+                          modelId={bootstrap.plannerSelection.modelId}
+                          parameters={bootstrap.plannerSelection.parameters}
+                          saveLabel={saveStateLabel("planning")}
+                          saveErrorDetail={saveErrorDetail?.("planning")}
+                          onSelectModel={onSelectModel}
+                          onUpdateModelParameter={onUpdateModelParameter}
+                        />
+                      ) : null}
+                      {content.showBuilderModel ? (
+                        <WorkflowModelControl
+                          label="Builder model"
+                          phaseKey="implementation"
+                          disabled={disabled}
+                          modelCatalog={bootstrap.modelCatalog}
+                          modelId={bootstrap.builderSelection.modelId}
+                          parameters={bootstrap.builderSelection.parameters}
+                          saveLabel={saveStateLabel("implementation")}
+                          saveErrorDetail={saveErrorDetail?.("implementation")}
+                          onSelectModel={onSelectModel}
+                          onUpdateModelParameter={onUpdateModelParameter}
+                        />
+                      ) : null}
+                      {content.showBuilderModelReference ? (
+                        <p>
+                          <span className="font-medium">Uses Builder model:</span>{" "}
+                          {builderDisplayName}
+                        </p>
+                      ) : null}
+                    </div>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}