create-interview-cockpit 0.27.0 → 0.28.0

package/template/client/src/components/SettingsPanel.tsx

@@ -0,0 +1,1395 @@
+// ─── Settings panel — the GitHub Lab "Settings" tab ────────────────────
+//
+// Mirrors github.com's repository Settings page: a left sidebar with
+// section links, and a content pane on the right. The sections we
+// implement are the ones that are meaningful in the lab simulation:
+//
+//   General        — quick read-only overview + danger-zone Reset.
+//   Branches       — list of branches + default branch picker.
+//   Rules / Rulesets — branch protection: required approving reviews,
+//                    require code-owner review, required status checks.
+//   Environments   — repo variables, secrets, and runner env values
+//                    (was the old "Env" top tab).
+//   Concurrency    — the concurrency simulator (was its own top tab).
+//
+// We intentionally keep Pull-request review + reviewers UI in the PR
+// page (that's where github.com surfaces them too). Settings only owns
+// the *configuration* knobs that gate merging.
+
+import { useMemo, useState } from "react";
+import {
+  AlertTriangle,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  GitBranch,
+  KeyRound,
+  Plus,
+  RotateCcw,
+  Settings as SettingsIcon,
+  Shield,
+  Star,
+  Trash2,
+  Users,
+  Workflow as WorkflowIcon,
+  X,
+} from "lucide-react";
+import type {
+  GithubActionsLabEnvironment,
+  GithubActionsLabEnvironmentEntry,
+  GithubActionsLabWorkspace,
+  GithubLabRuleset,
+  GithubLabRulesetEnforcement,
+  GithubLabRulesetRules,
+} from "../types";
+import GhaConcurrencyPanel from "./GhaConcurrencyPanel";
+import {
+  parseConcurrencyBlock,
+  type GhaConcurrencyContext,
+  type GhaConcurrencyRun,
+} from "../ghaConcurrency";
+
+// ─── Shared constants (kept in sync with the modal's old env panel) ────
+
+type EnvKind = "variables" | "secrets" | "env";
+
+const ENV_NAME_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+interface EnvSectionConfig {
+  kind: EnvKind;
+  title: string;
+  addLabel: string;
+  namePlaceholder: string;
+  valuePlaceholder: string;
+  help: string;
+}
+
+const ENV_SECTIONS: EnvSectionConfig[] = [
+  {
+    kind: "variables",
+    title: "Repository variables",
+    addLabel: "Add variable",
+    namePlaceholder: "BUILD_ENV",
+    valuePlaceholder: "production",
+    help: "Plain-text values referenced as ${{ vars.NAME }} in workflows; passed to act through --var-file.",
+  },
+  {
+    kind: "secrets",
+    title: "Repository secrets",
+    addLabel: "Add secret",
+    namePlaceholder: "GITHUB_TOKEN",
+    valuePlaceholder: "ghp_xxx",
+    help: "Masked values referenced as ${{ secrets.NAME }}; passed to act through --secret-file. Saved snapshots store these as plain text — use fakes.",
+  },
+  {
+    kind: "env",
+    title: "Runner environment",
+    addLabel: "Add env",
+    namePlaceholder: "NODE_ENV",
+    valuePlaceholder: "production",
+    help: "Available to shell steps as environment variables, e.g. $NAME, through act's --env-file.",
+  },
+];
+
+// ─── Props ─────────────────────────────────────────────────────────────
+
+interface SettingsPanelProps {
+  workspace: GithubActionsLabWorkspace;
+  onChange: (
+    updater: (prev: GithubActionsLabWorkspace) => GithubActionsLabWorkspace,
+  ) => void;
+  workflowPath: string;
+  workflowYaml: string | undefined;
+  concurrencyRuns: GhaConcurrencyRun[];
+  concurrencyContext: GhaConcurrencyContext;
+  onConcurrencyContextChange: (next: GhaConcurrencyContext) => void;
+  onClearConcurrencyRuns: () => void;
+  /** Reset every workspace file back to the template baseline. */
+  onResetWorkspace: () => void;
+}
+
+type SectionId =
+  | "general"
+  | "branches"
+  | "rules"
+  | "environments"
+  | "concurrency";
+
+interface SectionDef {
+  id: SectionId;
+  label: string;
+  icon: typeof SettingsIcon;
+  group: "general" | "code" | "ci";
+}
+
+const SECTIONS: SectionDef[] = [
+  { id: "general", label: "General", icon: SettingsIcon, group: "general" },
+  { id: "branches", label: "Branches", icon: GitBranch, group: "code" },
+  { id: "rules", label: "Rulesets", icon: Shield, group: "code" },
+  {
+    id: "environments",
+    label: "Environments",
+    icon: KeyRound,
+    group: "ci",
+  },
+  {
+    id: "concurrency",
+    label: "Concurrency",
+    icon: WorkflowIcon,
+    group: "ci",
+  },
+];
+
+const GROUP_LABELS: Record<SectionDef["group"], string> = {
+  general: "",
+  code: "Code and automation",
+  ci: "CI / CD",
+};
+
+// ─── Main component ────────────────────────────────────────────────────
+
+export default function SettingsPanel(props: SettingsPanelProps) {
+  const { workspace, onChange } = props;
+  const [active, setActive] = useState<SectionId>("general");
+
+  // Group sections for the sidebar, preserving insertion order.
+  const grouped = useMemo(() => {
+    const out: Array<{ group: SectionDef["group"]; items: SectionDef[] }> = [];
+    for (const sec of SECTIONS) {
+      const last = out[out.length - 1];
+      if (last && last.group === sec.group) last.items.push(sec);
+      else out.push({ group: sec.group, items: [sec] });
+    }
+    return out;
+  }, []);
+
+  return (
+    <div className="flex-1 min-h-0 grid grid-cols-[200px_1fr] gap-0 overflow-hidden text-xs text-slate-300">
+      {/* Sidebar */}
+      <nav className="min-h-0 overflow-auto border-r border-slate-800/60 p-2">
+        {grouped.map((g, idx) => (
+          <div key={g.group} className={idx === 0 ? "" : "mt-3"}>
+            {GROUP_LABELS[g.group] && (
+              <div className="px-2 py-1 text-[10px] uppercase tracking-wider text-slate-500">
+                {GROUP_LABELS[g.group]}
+              </div>
+            )}
+            {g.items.map((s) => {
+              const Icon = s.icon;
+              const isActive = active === s.id;
+              return (
+                <button
+                  key={s.id}
+                  onClick={() => setActive(s.id)}
+                  className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] ${
+                    isActive
+                      ? "bg-amber-500/15 text-amber-200"
+                      : "text-slate-300 hover:bg-slate-800/60"
+                  }`}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {s.label}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+
+      {/* Content pane */}
+      <div className="min-h-0 overflow-auto p-4">
+        {active === "general" && (
+          <GeneralSection
+            workspace={workspace}
+            onChange={onChange}
+            onResetWorkspace={props.onResetWorkspace}
+          />
+        )}
+        {active === "branches" && (
+          <BranchesSection workspace={workspace} onChange={onChange} />
+        )}
+        {active === "rules" && (
+          <RulesetsSection workspace={workspace} onChange={onChange} />
+        )}
+        {active === "environments" && (
+          <EnvironmentsSection workspace={workspace} onChange={onChange} />
+        )}
+        {active === "concurrency" && (
+          <div className="-m-4 flex h-full min-h-0 flex-col">
+            <GhaConcurrencyPanel
+              parsed={parseConcurrencyBlock(props.workflowYaml)}
+              workflowPath={props.workflowPath}
+              runs={props.concurrencyRuns}
+              context={props.concurrencyContext}
+              onContextChange={props.onConcurrencyContextChange}
+              onClearRuns={props.onClearConcurrencyRuns}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Page header (reused across sections) ──────────────────────────────
+
+function PageHeader({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <header className="mb-4 border-b border-slate-800/60 pb-3">
+      <h2 className="text-lg font-semibold text-slate-100">{title}</h2>
+      {description && (
+        <p className="mt-1 text-[12px] leading-5 text-slate-500">
+          {description}
+        </p>
+      )}
+    </header>
+  );
+}
+
+// ─── General ───────────────────────────────────────────────────────────
+
+function GeneralSection({
+  workspace,
+  onChange,
+  onResetWorkspace,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  onChange: SettingsPanelProps["onChange"];
+  onResetWorkspace: () => void;
+}) {
+  const [confirming, setConfirming] = useState(false);
+  return (
+    <>
+      <PageHeader title="General" description="Repository-level metadata." />
+      <div className="space-y-4">
+        <Field label="Repository name">
+          <input
+            value={workspace.label}
+            onChange={(e) => onChange((p) => ({ ...p, label: e.target.value }))}
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1.5 text-[12px] text-slate-100 outline-none focus:border-amber-500/60"
+          />
+        </Field>
+        <Field label="Include run history in LLM context">
+          <label className="inline-flex items-center gap-2 text-[12px] text-slate-300">
+            <input
+              type="checkbox"
+              checked={!!workspace.includeRunHistoryInContext}
+              onChange={(e) =>
+                onChange((p) => ({
+                  ...p,
+                  includeRunHistoryInContext: e.target.checked,
+                }))
+              }
+              className="accent-amber-500"
+            />
+            Send the last few act runs (statuses + durations) when chatting.
+          </label>
+        </Field>
+
+        {/* Danger zone */}
+        <section className="mt-6 rounded-lg border border-red-500/30">
+          <header className="border-b border-red-500/30 bg-red-500/5 px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-red-300">
+            <AlertTriangle className="mr-1 inline h-3 w-3" />
+            Danger zone
+          </header>
+          <div className="flex items-center justify-between gap-3 px-3 py-3">
+            <div className="text-[12px]">
+              <div className="font-medium text-slate-200">Reset workspace</div>
+              <p className="text-[11px] text-slate-500">
+                Drop every file change and PR/state mutation and reload the lab
+                from the template baseline. Cannot be undone.
+              </p>
+            </div>
+            {confirming ? (
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => {
+                    setConfirming(false);
+                    onResetWorkspace();
+                  }}
+                  className="rounded bg-red-600 px-2 py-1 text-[11px] text-white hover:bg-red-500"
+                >
+                  Yes, reset
+                </button>
+                <button
+                  onClick={() => setConfirming(false)}
+                  className="rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-300 hover:bg-slate-700"
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setConfirming(true)}
+                className="inline-flex items-center gap-1 rounded border border-red-500/40 px-2 py-1 text-[11px] text-red-300 hover:bg-red-500/10"
+              >
+                <RotateCcw className="h-3 w-3" /> Reset
+              </button>
+            )}
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}
+
+// ─── Branches ──────────────────────────────────────────────────────────
+
+function BranchesSection({
+  workspace,
+  onChange,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  onChange: SettingsPanelProps["onChange"];
+}) {
+  const branches = workspace.branches ?? ["main"];
+  const defaultBranch = workspace.defaultBranch ?? "main";
+  const [draft, setDraft] = useState("");
+
+  const addBranch = () => {
+    const name = draft.trim();
+    if (!name || branches.includes(name)) return;
+    onChange((p) => ({ ...p, branches: [...branches, name] }));
+    setDraft("");
+  };
+
+  const removeBranch = (name: string) => {
+    if (name === defaultBranch) return; // can't delete default
+    onChange((p) => ({
+      ...p,
+      branches: branches.filter((b) => b !== name),
+    }));
+  };
+
+  const setDefault = (name: string) => {
+    onChange((p) => ({ ...p, defaultBranch: name }));
+  };
+
+  return (
+    <>
+      <PageHeader
+        title="Branches"
+        description="Branches in the simulated repo. The default branch is the merge target shown on the Pull Request page."
+      />
+      <ul className="space-y-1">
+        {branches.map((name) => {
+          const isDefault = name === defaultBranch;
+          return (
+            <li
+              key={name}
+              className="flex items-center justify-between rounded border border-slate-800/60 bg-slate-900/40 px-3 py-2"
+            >
+              <div className="flex items-center gap-2">
+                <GitBranch className="h-3.5 w-3.5 text-slate-500" />
+                <span className="font-mono text-[12px] text-slate-100">
+                  {name}
+                </span>
+                {isDefault && (
+                  <span className="inline-flex items-center gap-1 rounded bg-emerald-500/15 px-1.5 py-px text-[10px] text-emerald-300">
+                    <Star className="h-2.5 w-2.5" /> Default
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-1">
+                {!isDefault && (
+                  <button
+                    onClick={() => setDefault(name)}
+                    className="rounded px-2 py-1 text-[11px] text-slate-400 hover:bg-slate-800 hover:text-amber-200"
+                  >
+                    Make default
+                  </button>
+                )}
+                <button
+                  onClick={() => removeBranch(name)}
+                  disabled={isDefault}
+                  className="rounded p-1 text-slate-500 hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-30"
+                  title={
+                    isDefault
+                      ? "Cannot delete the default branch"
+                      : "Delete branch"
+                  }
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      <div className="mt-3 flex items-center gap-2">
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && addBranch()}
+          placeholder="new-branch-name"
+          className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1.5 font-mono text-[12px] outline-none focus:border-amber-500/60"
+        />
+        <button
+          onClick={addBranch}
+          className="inline-flex items-center gap-1 rounded bg-slate-800 px-2 py-1.5 text-[11px] text-slate-200 hover:bg-slate-700"
+        >
+          <Plus className="h-3 w-3" /> Create
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ─── Rulesets ─────────────────────────────────────────────────────────
+//
+// Mirrors github.com → Settings → Rules. We support multiple rulesets
+// per repo, each with: name, enforcement state, target branches
+// (include/exclude patterns + tokens like ~DEFAULT_BRANCH / ~ALL),
+// bypass list, and a bag of branch rules. The list view summarises
+// each ruleset; clicking a row opens a github-style edit page.
+
+const ENFORCEMENT_LABEL: Record<GithubLabRulesetEnforcement, string> = {
+  active: "Active",
+  evaluate: "Evaluate",
+  disabled: "Disabled",
+};
+
+const ENFORCEMENT_DESC: Record<GithubLabRulesetEnforcement, string> = {
+  active:
+    "Rules will be enforced. Operations that violate them are blocked unless someone has bypass.",
+  evaluate:
+    "Rules are evaluated but not enforced. Use this to dry-run changes — violations show up in the PR sidebar without blocking the merge.",
+  disabled:
+    "Ruleset is paused. Targets and rules are saved but no operations are evaluated against it.",
+};
+
+function RulesetsSection({
+  workspace,
+  onChange,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  onChange: SettingsPanelProps["onChange"];
+}) {
+  const rulesets = workspace.rulesets ?? [];
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const selected = useMemo(
+    () => rulesets.find((r) => r.id === selectedId) ?? null,
+    [rulesets, selectedId],
+  );
+
+  const upsert = (ruleset: GithubLabRuleset) =>
+    onChange((p) => {
+      const list = (p.rulesets ?? []).slice();
+      const idx = list.findIndex((r) => r.id === ruleset.id);
+      if (idx >= 0) list[idx] = ruleset;
+      else list.push(ruleset);
+      return { ...p, rulesets: list };
+    });
+
+  const remove = (id: string) =>
+    onChange((p) => ({
+      ...p,
+      rulesets: (p.rulesets ?? []).filter((r) => r.id !== id),
+    }));
+
+  const createNew = () => {
+    const id = `ruleset_${Date.now().toString(36)}`;
+    const fresh: GithubLabRuleset = {
+      id,
+      name: "Untitled ruleset",
+      enforcement: "active",
+      targetInclude: ["~DEFAULT_BRANCH"],
+      targetExclude: [],
+      bypass: [],
+      rules: {},
+    };
+    upsert(fresh);
+    setSelectedId(id);
+  };
+
+  if (selected) {
+    return (
+      <RulesetEditor
+        workspace={workspace}
+        ruleset={selected}
+        onBack={() => setSelectedId(null)}
+        onChange={upsert}
+        onDelete={() => {
+          remove(selected.id);
+          setSelectedId(null);
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        title="Rulesets"
+        description="Rules that gate operations on branches — like requiring a pull request, blocking force pushes, or running status checks."
+      />
+      <div className="mb-3 flex justify-end">
+        <button
+          onClick={createNew}
+          className="flex items-center gap-1 rounded bg-emerald-600 px-2 py-1 text-[12px] font-medium text-white hover:bg-emerald-500"
+        >
+          <Plus className="h-3 w-3" /> New branch ruleset
+        </button>
+      </div>
+
+      {rulesets.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-slate-700 px-4 py-8 text-center text-[12px] text-slate-500">
+          <Shield className="mx-auto mb-2 h-5 w-5 text-slate-600" />
+          No rulesets yet. Create one to start enforcing rules on branches.
+        </div>
+      ) : (
+        <ul className="space-y-1.5">
+          {rulesets.map((rs) => (
+            <li key={rs.id}>
+              <button
+                onClick={() => setSelectedId(rs.id)}
+                className="group flex w-full items-center gap-3 rounded-lg border border-slate-800/60 bg-slate-900/40 px-3 py-2 text-left hover:border-amber-500/40"
+              >
+                <Shield className="h-4 w-4 shrink-0 text-amber-300" />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate text-[13px] font-semibold text-slate-100">
+                      {rs.name}
+                    </span>
+                    <EnforcementBadge enforcement={rs.enforcement} />
+                  </div>
+                  <div className="mt-0.5 flex items-center gap-2 text-[11px] text-slate-500">
+                    <GitBranch className="h-3 w-3" />
+                    <span className="truncate">
+                      {rs.targetInclude.length > 0
+                        ? rs.targetInclude.join(", ")
+                        : "No targets"}
+                    </span>
+                    <span className="text-slate-700">•</span>
+                    <span>{countActiveRules(rs.rules)} rules</span>
+                  </div>
+                </div>
+                <ChevronRight className="h-4 w-4 text-slate-600 group-hover:text-amber-300" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}
+
+function EnforcementBadge({
+  enforcement,
+}: {
+  enforcement: GithubLabRulesetEnforcement;
+}) {
+  const cls =
+    enforcement === "active"
+      ? "bg-emerald-500/15 text-emerald-300"
+      : enforcement === "evaluate"
+        ? "bg-amber-500/15 text-amber-200"
+        : "bg-slate-700/40 text-slate-400";
+  return (
+    <span
+      className={`rounded px-1.5 py-px text-[10px] uppercase tracking-wider ${cls}`}
+    >
+      {ENFORCEMENT_LABEL[enforcement]}
+    </span>
+  );
+}
+
+function countActiveRules(r: GithubLabRulesetRules): number {
+  let n = 0;
+  if (r.restrictCreations) n++;
+  if (r.restrictUpdates) n++;
+  if (r.restrictDeletions) n++;
+  if (r.requireLinearHistory) n++;
+  if (r.requireDeployments) n++;
+  if (r.requireSignedCommits) n++;
+  if (r.pullRequest) n++;
+  if (r.statusChecks) n++;
+  if (r.blockForcePushes) n++;
+  if (r.requireCodeScanning) n++;
+  if (r.requireCodeQuality) n++;
+  return n;
+}
+
+// ─── Ruleset editor ────────────────────────────────────────────────────
+
+function RulesetEditor({
+  workspace,
+  ruleset,
+  onBack,
+  onChange,
+  onDelete,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  ruleset: GithubLabRuleset;
+  onBack: () => void;
+  onChange: (next: GithubLabRuleset) => void;
+  onDelete: () => void;
+}) {
+  const update = (patch: Partial<GithubLabRuleset>) =>
+    onChange({ ...ruleset, ...patch });
+  const updateRules = (patch: Partial<GithubLabRulesetRules>) =>
+    onChange({ ...ruleset, rules: { ...ruleset.rules, ...patch } });
+
+  const org = workspace.ghOrg;
+  const bypassOptions = useMemo(() => {
+    const list: string[] = [];
+    if (org) {
+      list.push(...org.users);
+      org.teams.forEach((t) => list.push(`${org.slug}/${t.slug}`));
+    }
+    return list;
+  }, [org]);
+
+  return (
+    <>
+      <button
+        onClick={onBack}
+        className="mb-2 flex items-center gap-1 text-[11px] text-slate-400 hover:text-amber-300"
+      >
+        <ChevronLeft className="h-3 w-3" /> Back to rulesets
+      </button>
+
+      <PageHeader
+        title="Branch ruleset"
+        description="Configure the rules that gate operations on the targeted branches. Mirrors github.com → Settings → Rules → New branch ruleset."
+      />
+
+      {/* Name */}
+      <Field label="Ruleset Name">
+        <input
+          value={ruleset.name}
+          onChange={(e) => update({ name: e.target.value })}
+          placeholder="my ruleset"
+          className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[12px] outline-none focus:border-amber-500/60"
+        />
+      </Field>
+
+      {/* Enforcement */}
+      <Field
+        label="Enforcement status"
+        help={ENFORCEMENT_DESC[ruleset.enforcement]}
+      >
+        <select
+          value={ruleset.enforcement}
+          onChange={(e) =>
+            update({
+              enforcement: e.target.value as GithubLabRulesetEnforcement,
+            })
+          }
+          className="w-44 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[12px] outline-none focus:border-amber-500/60"
+        >
+          <option value="disabled">Disabled</option>
+          <option value="active">Active</option>
+          <option value="evaluate">Evaluate</option>
+        </select>
+      </Field>
+
+      {/* Bypass list */}
+      <SubSection
+        title="Bypass list"
+        description="Roles, teams, or users who can perform the targeted operations even when the rules would block them."
+      >
+        <ChipList
+          values={ruleset.bypass}
+          options={bypassOptions}
+          onChange={(next) => update({ bypass: next })}
+          placeholder="@octocat or acme/admins"
+          emptyText="No bypasses. Only the rules apply."
+        />
+      </SubSection>
+
+      {/* Targets */}
+      <SubSection
+        title="Target branches"
+        description="Which branches this ruleset applies to. Use ~DEFAULT_BRANCH for the default branch, ~ALL for every branch, or glob patterns like release/*."
+      >
+        <div className="mb-2">
+          <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+            Include patterns
+          </div>
+          <ChipList
+            values={ruleset.targetInclude}
+            options={["~DEFAULT_BRANCH", "~ALL"]}
+            onChange={(next) => update({ targetInclude: next })}
+            placeholder="main, release/*"
+          />
+        </div>
+        <div>
+          <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+            Exclude patterns
+          </div>
+          <ChipList
+            values={ruleset.targetExclude}
+            onChange={(next) => update({ targetExclude: next })}
+            placeholder="dependabot/*"
+            emptyText="No exclusions"
+          />
+        </div>
+      </SubSection>
+
+      {/* Branch rules */}
+      <SubSection
+        title="Branch rules"
+        description="Choose which rules to enforce on operations matching this ruleset's targets."
+      >
+        <div className="space-y-2">
+          <RuleToggle
+            on={!!ruleset.rules.restrictCreations}
+            onToggle={(v) => updateRules({ restrictCreations: v })}
+            title="Restrict creations"
+            description="Only allow users with bypass permission to create matching refs."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.restrictUpdates}
+            onToggle={(v) => updateRules({ restrictUpdates: v })}
+            title="Restrict updates"
+            description="Only allow users with bypass permission to update matching refs."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.restrictDeletions}
+            onToggle={(v) => updateRules({ restrictDeletions: v })}
+            title="Restrict deletions"
+            description="Only allow users with bypass permissions to delete matching refs."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.requireLinearHistory}
+            onToggle={(v) => updateRules({ requireLinearHistory: v })}
+            title="Require linear history"
+            description="Prevent merge commits from being pushed to matching refs."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.requireDeployments}
+            onToggle={(v) =>
+              updateRules({
+                requireDeployments: v
+                  ? { environments: ["production"] }
+                  : undefined,
+              })
+            }
+            title="Require deployments to succeed"
+            description="Choose which environments must be successfully deployed-to before refs can be pushed into a matching ref."
+            kind="enforced"
+          >
+            {ruleset.rules.requireDeployments && (
+              <div className="mt-2">
+                <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+                  Required environments
+                </div>
+                <ChipList
+                  values={ruleset.rules.requireDeployments.environments}
+                  onChange={(next) =>
+                    updateRules({ requireDeployments: { environments: next } })
+                  }
+                  placeholder="production"
+                />
+              </div>
+            )}
+          </RuleToggle>
+          <RuleToggle
+            on={!!ruleset.rules.requireSignedCommits}
+            onToggle={(v) => updateRules({ requireSignedCommits: v })}
+            title="Require signed commits"
+            description="Commits pushed to matching refs must have verified signatures."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.pullRequest}
+            onToggle={(v) =>
+              updateRules({
+                pullRequest: v
+                  ? {
+                      requiredApprovingReviewCount: 1,
+                      requireCodeOwnerReview: true,
+                      dismissStaleReviewsOnPush: false,
+                      requireLastPushApproval: false,
+                    }
+                  : undefined,
+              })
+            }
+            title="Require a pull request before merging"
+            description="Require all commits be made to a non-target branch and submitted via a pull request before they can be merged."
+            kind="enforced"
+          >
+            {ruleset.rules.pullRequest && (
+              <PullRequestRuleEditor
+                value={ruleset.rules.pullRequest}
+                onChange={(next) => updateRules({ pullRequest: next })}
+              />
+            )}
+          </RuleToggle>
+          <RuleToggle
+            on={!!ruleset.rules.statusChecks}
+            onToggle={(v) =>
+              updateRules({
+                statusChecks: v ? { checks: [], strict: false } : undefined,
+              })
+            }
+            title="Require status checks to pass"
+            description="Choose which status checks must pass before the ref is updated. When enabled, commits must first be pushed to another branch, then merged or pushed directly to a ref that matches this rule after status checks have passed."
+            kind="enforced"
+          >
+            {ruleset.rules.statusChecks && (
+              <StatusChecksRuleEditor
+                workspace={workspace}
+                value={ruleset.rules.statusChecks}
+                onChange={(next) => updateRules({ statusChecks: next })}
+              />
+            )}
+          </RuleToggle>
+          <RuleToggle
+            on={!!ruleset.rules.blockForcePushes}
+            onToggle={(v) => updateRules({ blockForcePushes: v })}
+            title="Block force pushes"
+            description="Prevent users with push access from force pushing to refs."
+            kind="informational"
+          />
+          <RuleToggle
+            on={!!ruleset.rules.requireCodeScanning}
+            onToggle={(v) =>
+              updateRules({
+                requireCodeScanning: v ? { tools: [] } : undefined,
+              })
+            }
+            title="Require code scanning results"
+            description="Choose which tools must provide code scanning results before the reference is updated. When enabled, commits must first be pushed to another reference where the alerts can be evaluated, then merged or pushed directly to a reference that matches this rule after the alert evaluations have completed."
+            kind="informational"
+          >
+            {ruleset.rules.requireCodeScanning && (
+              <div className="mt-2">
+                <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+                  Required tools
+                </div>
+                <ChipList
+                  values={ruleset.rules.requireCodeScanning.tools}
+                  onChange={(next) =>
+                    updateRules({ requireCodeScanning: { tools: next } })
+                  }
+                  placeholder="CodeQL"
+                />
+              </div>
+            )}
+          </RuleToggle>
+          <RuleToggle
+            on={!!ruleset.rules.requireCodeQuality}
+            onToggle={(v) => updateRules({ requireCodeQuality: v })}
+            title="Require code quality"
+            description="Choose providers that must report acceptable quality on the head commit before the reference is updated."
+            kind="informational"
+          />
+        </div>
+      </SubSection>
+
+      {/* Danger zone */}
+      <div className="mt-6 rounded-lg border border-rose-500/20 bg-rose-500/5 p-3">
+        <div className="mb-1 flex items-center gap-2 text-[12px] font-semibold text-rose-200">
+          <AlertTriangle className="h-3.5 w-3.5" /> Delete ruleset
+        </div>
+        <p className="mb-2 text-[11px] text-slate-400">
+          Removes this ruleset from the workspace. Branches stop being gated by
+          its rules immediately.
+        </p>
+        <button
+          onClick={onDelete}
+          className="flex items-center gap-1 rounded border border-rose-500/40 bg-rose-500/10 px-2 py-1 text-[11px] text-rose-200 hover:bg-rose-500/20"
+        >
+          <Trash2 className="h-3 w-3" /> Delete ruleset
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ─── Ruleset editor sub-components ────────────────────────────────────
+
+function SubSection({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mt-5 rounded-lg border border-slate-800/60 bg-slate-900/40">
+      <header className="border-b border-slate-800/60 px-3 py-2">
+        <div className="text-[12px] font-semibold text-slate-100">{title}</div>
+        {description && (
+          <p className="mt-0.5 text-[11px] text-slate-500">{description}</p>
+        )}
+      </header>
+      <div className="p-3">{children}</div>
+    </section>
+  );
+}
+
+function RuleToggle({
+  on,
+  onToggle,
+  title,
+  description,
+  kind,
+  children,
+}: {
+  on: boolean;
+  onToggle: (next: boolean) => void;
+  title: string;
+  description: string;
+  /** "enforced" = the lab actually evaluates this rule against the PR.
+   *  "informational" = saved + surfaced as a sidebar note, but the lab
+   *  can't simulate the underlying git/branch operation. */
+  kind: "enforced" | "informational";
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`rounded border p-2 ${
+        on
+          ? "border-amber-500/30 bg-amber-500/5"
+          : "border-slate-800/60 bg-slate-950/30"
+      }`}
+    >
+      <label className="flex items-start gap-2 text-[12px]">
+        <input
+          type="checkbox"
+          checked={on}
+          onChange={(e) => onToggle(e.target.checked)}
+          className="mt-0.5 accent-amber-500"
+        />
+        <span className="flex-1">
+          <span className="flex items-center gap-1.5">
+            <span className="text-slate-100">{title}</span>
+            <span
+              className={`rounded px-1 py-px text-[9px] uppercase tracking-wider ${
+                kind === "enforced"
+                  ? "bg-emerald-500/15 text-emerald-300"
+                  : "bg-slate-700/50 text-slate-400"
+              }`}
+              title={
+                kind === "enforced"
+                  ? "Lab actually evaluates this rule against the PR"
+                  : "Lab can't simulate this; surfaced as a sidebar note for awareness"
+              }
+            >
+              {kind === "enforced" ? "Enforced" : "Info"}
+            </span>
+          </span>
+          <span className="block text-[11px] text-slate-500">
+            {description}
+          </span>
+        </span>
+      </label>
+      {on && children && <div className="ml-6 mt-2">{children}</div>}
+    </div>
+  );
+}
+
+function PullRequestRuleEditor({
+  value,
+  onChange,
+}: {
+  value: NonNullable<GithubLabRulesetRules["pullRequest"]>;
+  onChange: (next: NonNullable<GithubLabRulesetRules["pullRequest"]>) => void;
+}) {
+  const update = (patch: Partial<typeof value>) =>
+    onChange({ ...value, ...patch });
+  return (
+    <div className="space-y-2">
+      <Field label="Required approving reviews">
+        <input
+          type="number"
+          min={0}
+          max={6}
+          value={value.requiredApprovingReviewCount}
+          onChange={(e) =>
+            update({
+              requiredApprovingReviewCount: Math.max(
+                0,
+                Number(e.target.value) || 0,
+              ),
+            })
+          }
+          className="w-20 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-right text-[12px]"
+        />
+      </Field>
+      <SubToggle
+        on={value.requireCodeOwnerReview}
+        onToggle={(v) => update({ requireCodeOwnerReview: v })}
+        title="Require review from Code Owners"
+        description="Required reviewers must approve the changes to files they own."
+      />
+      <SubToggle
+        on={value.dismissStaleReviewsOnPush}
+        onToggle={(v) => update({ dismissStaleReviewsOnPush: v })}
+        title="Dismiss stale pull request approvals when new commits are pushed"
+        description="New, reviewable commits push the PR back to needs-review."
+      />
+      <SubToggle
+        on={value.requireLastPushApproval}
+        onToggle={(v) => update({ requireLastPushApproval: v })}
+        title="Require approval of the most recent reviewable push"
+        description="The latest push must be approved by someone other than its author."
+      />
+    </div>
+  );
+}
+
+function StatusChecksRuleEditor({
+  workspace,
+  value,
+  onChange,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  value: NonNullable<GithubLabRulesetRules["statusChecks"]>;
+  onChange: (next: NonNullable<GithubLabRulesetRules["statusChecks"]>) => void;
+}) {
+  const observed = useMemo(() => {
+    const set = new Set<string>();
+    workspace.pullRequest?.lastCheckRun?.jobs.forEach((j) => set.add(j.name));
+    value.checks.forEach((c) => set.add(c));
+    return [...set].sort();
+  }, [workspace.pullRequest?.lastCheckRun, value.checks]);
+
+  const toggle = (name: string) => {
+    const set = new Set(value.checks);
+    if (set.has(name)) set.delete(name);
+    else set.add(name);
+    onChange({ ...value, checks: [...set] });
+  };
+
+  return (
+    <div className="space-y-2">
+      <SubToggle
+        on={value.strict}
+        onToggle={(v) => onChange({ ...value, strict: v })}
+        title="Require branches to be up to date before merging"
+        description="The PR's branch must be current with the base branch when checks run."
+      />
+      <div>
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+          Required checks
+        </div>
+        {observed.length === 0 ? (
+          <p className="rounded border border-dashed border-slate-700 px-3 py-3 text-[11px] text-slate-500">
+            No checks observed yet. Run a workflow first, or add one by name
+            below.
+          </p>
+        ) : (
+          <div className="flex flex-wrap gap-1">
+            {observed.map((name) => {
+              const on = value.checks.includes(name);
+              return (
+                <button
+                  key={name}
+                  onClick={() => toggle(name)}
+                  className={`rounded px-2 py-1 text-[11px] ${
+                    on
+                      ? "bg-amber-500/20 text-amber-200"
+                      : "bg-slate-800 text-slate-400 hover:bg-slate-700"
+                  }`}
+                >
+                  {name}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        <ChipList
+          values={value.checks}
+          onChange={(next) => onChange({ ...value, checks: next })}
+          placeholder="custom-check-name"
+          renderInline
+        />
+      </div>
+    </div>
+  );
+}
+
+function SubToggle({
+  on,
+  onToggle,
+  title,
+  description,
+}: {
+  on: boolean;
+  onToggle: (v: boolean) => void;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <label className="flex items-start gap-2 text-[12px]">
+      <input
+        type="checkbox"
+        checked={on}
+        onChange={(e) => onToggle(e.target.checked)}
+        className="mt-0.5 accent-amber-500"
+      />
+      <span>
+        <span className="text-slate-200">{title}</span>
+        {description && (
+          <span className="block text-[11px] text-slate-500">
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}
+
+// ─── Generic chip list for string arrays (patterns / handles / etc.) ──
+
+function ChipList({
+  values,
+  onChange,
+  options,
+  placeholder,
+  emptyText,
+  renderInline,
+}: {
+  values: string[];
+  onChange: (next: string[]) => void;
+  options?: string[];
+  placeholder?: string;
+  emptyText?: string;
+  renderInline?: boolean;
+}) {
+  const [draft, setDraft] = useState("");
+  const add = (raw: string) => {
+    const v = raw.trim();
+    if (!v || values.includes(v)) return;
+    onChange([...values, v]);
+    setDraft("");
+  };
+  const remove = (v: string) => onChange(values.filter((x) => x !== v));
+
+  const suggestions = (options ?? []).filter((o) => !values.includes(o));
+
+  return (
+    <div>
+      {!renderInline && values.length === 0 && emptyText && (
+        <p className="mb-2 text-[11px] text-slate-500">{emptyText}</p>
+      )}
+      {values.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1">
+          {values.map((v) => (
+            <span
+              key={v}
+              className="flex items-center gap-1 rounded bg-amber-500/15 px-1.5 py-0.5 text-[11px] text-amber-100"
+            >
+              <span className="font-mono">{v}</span>
+              <button
+                onClick={() => remove(v)}
+                className="rounded text-amber-300/80 hover:text-amber-100"
+                aria-label={`Remove ${v}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      {suggestions.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              onClick={() => add(s)}
+              className="flex items-center gap-1 rounded border border-dashed border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-400 hover:border-amber-500/40 hover:text-amber-200"
+            >
+              <Plus className="h-2.5 w-2.5" />
+              <span className="font-mono">{s}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="flex items-center gap-1">
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && add(draft)}
+          placeholder={placeholder}
+          className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px]"
+        />
+        <button
+          onClick={() => add(draft)}
+          className="rounded bg-slate-800 px-2 py-1 text-slate-300 hover:bg-slate-700"
+          aria-label="Add"
+        >
+          <Plus className="h-3 w-3" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Environments ──────────────────────────────────────────────────────
+
+function EnvironmentsSection({
+  workspace,
+  onChange,
+}: {
+  workspace: GithubActionsLabWorkspace;
+  onChange: SettingsPanelProps["onChange"];
+}) {
+  const rows = (kind: EnvKind): GithubActionsLabEnvironmentEntry[] =>
+    workspace.environment?.[kind] ?? [];
+
+  const writeRows = (
+    kind: EnvKind,
+    next: GithubActionsLabEnvironmentEntry[],
+  ) => {
+    onChange((prev) => {
+      const env: GithubActionsLabEnvironment = { ...(prev.environment ?? {}) };
+      env[kind] = next;
+      return { ...prev, environment: env };
+    });
+  };
+
+  const addRow = (kind: EnvKind) =>
+    writeRows(kind, [...rows(kind), { name: "", value: "" }]);
+  const updateRow = (
+    kind: EnvKind,
+    index: number,
+    patch: Partial<GithubActionsLabEnvironmentEntry>,
+  ) => {
+    const next = rows(kind).slice();
+    next[index] = { ...next[index]!, ...patch };
+    writeRows(kind, next);
+  };
+  const removeRow = (kind: EnvKind, index: number) =>
+    writeRows(
+      kind,
+      rows(kind).filter((_, i) => i !== index),
+    );
+
+  return (
+    <>
+      <PageHeader
+        title="Environments"
+        description="Repository variables, secrets, and runner env. Forwarded to act for every run."
+      />
+      <div className="space-y-3">
+        {ENV_SECTIONS.map((section) => {
+          const list = rows(section.kind);
+          return (
+            <section
+              key={section.kind}
+              className="rounded-lg border border-slate-800/60 bg-slate-900/40"
+            >
+              <div className="flex items-start justify-between gap-2 border-b border-slate-800/70 px-3 py-2">
+                <div>
+                  <h3 className="text-[12px] font-semibold text-slate-100">
+                    {section.title}
+                  </h3>
+                  <p className="mt-0.5 text-[11px] leading-4 text-slate-500">
+                    {section.help}
+                  </p>
+                </div>
+                <button
+                  onClick={() => addRow(section.kind)}
+                  className="shrink-0 rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:border-amber-500/40 hover:text-amber-200"
+                >
+                  {section.addLabel}
+                </button>
+              </div>
+              <div className="space-y-2 p-3">
+                {list.length === 0 ? (
+                  <button
+                    onClick={() => addRow(section.kind)}
+                    className="w-full rounded-lg border border-dashed border-slate-700 px-3 py-3 text-left text-[11px] text-slate-500 hover:border-amber-500/40 hover:text-amber-200"
+                  >
+                    No entries yet — click to add one.
+                  </button>
+                ) : (
+                  list.map((row, index) => {
+                    const nameOk =
+                      !row.name.trim() || ENV_NAME_RE.test(row.name.trim());
+                    return (
+                      <div
+                        key={`${section.kind}-${index}`}
+                        className="rounded-lg border border-slate-800 bg-slate-950/60 p-2"
+                      >
+                        <div className="grid grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)_auto] gap-2">
+                          <input
+                            value={row.name}
+                            onChange={(e) =>
+                              updateRow(section.kind, index, {
+                                name: e.target.value,
+                              })
+                            }
+                            placeholder={section.namePlaceholder}
+                            className={`min-w-0 rounded border bg-slate-900 px-2 py-1.5 font-mono text-[11px] text-slate-100 outline-none placeholder:text-slate-600 ${
+                              nameOk
+                                ? "border-slate-700 focus:border-amber-500/60"
+                                : "border-red-500/60 focus:border-red-400"
+                            }`}
+                          />
+                          <input
+                            type={
+                              section.kind === "secrets" ? "password" : "text"
+                            }
+                            value={row.value}
+                            onChange={(e) =>
+                              updateRow(section.kind, index, {
+                                value: e.target.value,
+                              })
+                            }
+                            placeholder={section.valuePlaceholder}
+                            className="min-w-0 rounded border border-slate-700 bg-slate-900 px-2 py-1.5 font-mono text-[11px] text-slate-100 outline-none placeholder:text-slate-600 focus:border-amber-500/60"
+                          />
+                          <button
+                            onClick={() => removeRow(section.kind, index)}
+                            className="rounded px-2 text-slate-500 hover:bg-red-500/10 hover:text-red-300"
+                            title="Remove entry"
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                        </div>
+                        {!nameOk && (
+                          <div className="mt-1 text-[10px] text-red-300">
+                            Use letters, numbers, and underscores; do not start
+                            with a number.
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+// ─── Tiny label/field wrapper ──────────────────────────────────────────
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <div className="mb-1 text-[11px] font-semibold text-slate-200">
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}