Add Project Home, Auth Bridge, shared auth token, and Tier-1 polish

Project Home (DESIGN-REVIEW §B2): the project is promoted from a 280px sidebar card to a first-class main-area view. ProjectCard.tsx (1,257 lines) is replaced by a select-only ProjectRow plus tabs for Overview, Sessions, Automation, Config and Files. The PortMappings, FileManager and ContainerProgress modals are absorbed rather than reimplemented. Config gains a Saved/Saving/Failed indicator — save-on-blur failures previously reached only console.error. Tier-1 polish (DESIGN-REVIEW §A): new elevation, muted-accent, disabled and focus-ring tokens; a global :focus-visible ring with every focus:outline-none removed; filled buttons moved to --accent-emphasis and white-on-success toggles retired, fixing three WCAG AA failures (2.1:1, 2.5:1, 2.4:1); a shared Modal primitive with role="dialog", focus trap and restore, adopted by all remaining modals; status indicators that carry a glyph and word rather than colour alone. Ctrl+Shift+W closes a tab, deliberately not Ctrl+W — that is readline's kill-word, used constantly in the terminal this app is built around. Auth Bridge: a general loopback-callback bridge so browser logins run inside a container (aws sso login, Concourse fly login, claude login) can complete against the host browser. Listeners are discovered from /proc/net/tcp{,6} — ss/netstat/lsof are absent from the image — bound on host 127.0.0.1 only, and tunnelled in over the Docker API via socat, which keeps working on Docker Desktop where container IPs are not routable. Falls back to [::1] because Node resolves localhost to IPv6 first, so claude login often binds ::1 alone. Opt-in per project. This extracts create_attached_exec() and moves the existing terminal session path onto it, so there is one attached-exec implementation rather than two. Shared auth token: `claude setup-token` is run in a container, the token is stored in the OS keychain and injected as CLAUDE_CODE_OAUTH_TOKEN into Anthropic-backend projects. Contrary to the initial design note, setup-token uses an Anthropic-hosted redirect and blocks on a stdin paste prompt rather than a loopback callback, so a stdin command is required for the flow to complete. The token is never logged, never returned to the frontend, and is redacted from the streamed output with a stateful matcher that withholds any tail that could still grow into a secret. Change detection uses a random rotation id rather than a hash, since a hash in a docker-inspect readable label would be an offline verification oracle. Frontend 33 -> 51 tests; Rust 34 tests. Both builds clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-09 11:35:42 -07:00
parent f68d10d5c2
commit 01a2f6aec8
83 changed files with 8042 additions and 3064 deletions
@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import type { EnvVar } from "../../lib/types";
+import Button from "../ui/Button";
+import { monoInputClass } from "../ui/Field";
+
+interface Props {
+  envVars: EnvVar[];
+  disabled: boolean;
+  disabledReason?: string;
+  onSave: (vars: EnvVar[]) => Promise<unknown>;
+}
+
+/** Env-var table. Used inline in Project Home → Config and in global Settings. */
+export default function EnvVarsEditor({
+  envVars: initial,
+  disabled,
+  disabledReason,
+  onSave,
+}: Props) {
+  const [vars, setVars] = useState<EnvVar[]>(initial);
+
+  useEffect(() => {
+    setVars(initial);
+  }, [initial]);
+
+  const updateVar = (index: number, field: keyof EnvVar, value: string) => {
+    const updated = [...vars];
+    updated[index] = { ...updated[index], [field]: value };
+    setVars(updated);
+  };
+
+  return (
+    <div className="space-y-2">
+      {disabled && disabledReason && (
+        <p className="px-2 py-1.5 bg-[var(--warning-muted)] border border-[var(--warning)]/30 rounded-[var(--radius-control)] text-xs text-[var(--warning)]">
+          {disabledReason}
+        </p>
+      )}
+
+      {vars.length === 0 && (
+        <p className="text-xs text-[var(--text-secondary)]">
+          No environment variables configured.
+        </p>
+      )}
+
+      {vars.map((ev, i) => (
+        <div key={i} className="flex gap-2 items-center">
+          <input
+            value={ev.key}
+            onChange={(e) => updateVar(i, "key", e.target.value)}
+            onBlur={() => onSave(vars)}
+            placeholder="KEY"
+            aria-label={`Environment variable ${i + 1} name`}
+            disabled={disabled}
+            className={`w-2/5 ${monoInputClass}`}
+          />
+          <input
+            value={ev.value}
+            onChange={(e) => updateVar(i, "value", e.target.value)}
+            onBlur={() => onSave(vars)}
+            placeholder="value"
+            aria-label={`Environment variable ${i + 1} value`}
+            disabled={disabled}
+            className={`flex-1 ${monoInputClass}`}
+          />
+          <Button
+            variant="danger"
+            disabled={disabled}
+            aria-label={`Remove environment variable ${ev.key || i + 1}`}
+            onClick={() => {
+              const updated = vars.filter((_, j) => j !== i);
+              setVars(updated);
+              onSave(updated);
+            }}
+          >
+            Remove
+          </Button>
+        </div>
+      ))}
+
+      <Button
+        disabled={disabled}
+        onClick={() => {
+          const updated = [...vars, { key: "", value: "" }];
+          setVars(updated);
+          onSave(updated);
+        }}
+      >
+        + Add variable
+      </Button>
+    </div>
+  );
+}