fix(workspace): harden credential redaction

Merge current main and resolve the workspace runner conflict. Redact authenticated clone URLs, Docker environment arguments, and clone errors before they reach logs or callers.

Author: fshehadeh-sfl

.design-sync/NOTES.md

@@ -0,0 +1,54 @@
+# Virtual Engineer — design-sync notes
+
+## Repo shape
+
+- Full-stack Hono/React app; admin UI lives in `src/admin/ui/`
+- UI components are NOT compiled to a distributable — `tsconfig.admin-ui.json` has `"noEmit": true` (required by `"allowImportingTsExtensions": true`)
+- No `.d.ts` output → all props declared via `dtsPropsFor` in config
+- No pre-built `dist/` → `--entry .design-sync/bundle-entry.tsx` (synth-entry mode)
+
+## Vite-only feature shims
+
+Two source files use `import.meta.glob` which esbuild cannot handle:
+- `src/admin/ui/components/Icon.tsx` → shimmed at `.design-sync/shims/Icon.tsx`
+- `src/admin/ui/components/ProviderGlyph.tsx` → shimmed at `.design-sync/shims/ProviderGlyph.tsx`
+
+`Stat`, `Drawer`, and `Modal` import `Icon` internally — they also have shims in `.design-sync/shims/` with corrected import paths. If you add a new component that imports `Icon`, check if it needs a shim too.
+
+## CSS entry
+
+`global.css` has `@import "@fontsource/..."` and `@import "./tokens.css"` which are bare module specifiers that don't resolve in the bundle context. Fixed by:
+- `cssEntry: ".design-sync/style-entry.css"` — manually merged copy of `global.css` + `tokens.css` with @fontsource imports removed
+- `extraFonts: [...]` — @fontsource CSS files processed by the converter to extract @font-face rules and copy woff2 files to `fonts/`
+
+If `tokens.css` or `global.css` change significantly, update `.design-sync/style-entry.css` to match.
+
+## Component grouping
+
+The converter places components based on their source file path relative to `srcDir = src/admin/ui`. Since all components are in `src/admin/ui/components/` and `components` is a generic dir name (in GENERIC_DIR), all components fall into the `general` group. Shim components (in `.design-sync/shims/`) are placed in the `shims` group. This is a cosmetic distinction — the design agent sees both equally.
+
+## Fonts
+
+39 `@font-face` rules from 7 @fontsource CSS files. Both woff and woff2 formats are included (79 font files total). The @fontsource packages cover 5 unicode subsets for IBM Plex Mono and 6 for IBM Plex Sans.
+
+## States and tones
+
+`TONE` palette and `STATES` catalog live in `src/admin/ui/states.ts`. The shim at `.design-sync/shims/states.ts` is a copy with the `"../types.ts"` import corrected to `"./types.ts"`. If states change upstream, update both files.
+
+## Re-sync risks
+
+- `style-entry.css` is a manual copy — will silently drift if `global.css` or `tokens.css` change
+- Shim files (Icon, ProviderGlyph, Stat, Drawer, Modal, states) are manual copies — will drift if originals change
+- `dtsPropsFor` in config is hand-written — needs update when component APIs change
+- Icon path list in `shims/Icon.tsx` covers 33 icons as of 2026-07-02; new icons added to `src/admin/ui/icons/` won't appear in the shim automatically
+- `states.ts` shim covers 17 TaskState values as of 2026-07-02; new states need to be added to both the shim and the shim's `dtsPropsFor` entry
+
+## Build command
+
+```
+node .ds-sync/package-build.mjs \
+  --config .design-sync/config.json \
+  --node-modules ./node_modules \
+  --entry .design-sync/bundle-entry.tsx \
+  --out ./ds-bundle
+```

.design-sync/bundle-entry.tsx

@@ -0,0 +1,19 @@
+// Synthetic bundle entry for the Virtual Engineer UI design system.
+// Components with Vite-only imports (import.meta.glob) are replaced by shims.
+// Stat/Drawer/Modal shims also fix transitive Icon imports.
+
+export { Bars } from "../src/admin/ui/components/Bars.tsx";
+export { Drawer, DetailSection, DetailRow, StatusBanner } from "./shims/Drawer.tsx";
+export { Icon } from "./shims/Icon.tsx";
+export { Meta } from "../src/admin/ui/components/Meta.tsx";
+export {
+  Modal, Field, FieldInput, FieldSelect,
+  FieldTextarea, FormError, FormRow, FormActions,
+} from "./shims/Modal.tsx";
+export { ProviderGlyph } from "./shims/ProviderGlyph.tsx";
+export { RowCard } from "../src/admin/ui/components/RowCard.tsx";
+export { Stat } from "./shims/Stat.tsx";
+export { StatePill } from "../src/admin/ui/components/StatePill.tsx";
+export { Tabs, TabPanel } from "../src/admin/ui/components/Tabs.tsx";
+export { Tag } from "../src/admin/ui/components/Tag.tsx";
+export { Toggle } from "../src/admin/ui/components/Toggle.tsx";

.design-sync/config.json

@@ -0,0 +1,72 @@
+{
+  "projectId": "aec2a18e-3c79-4107-b509-4f9adfc9c58e",
+  "pkg": "virtual-engineer",
+  "globalName": "VE",
+  "shape": "package",
+  "srcDir": "src/admin/ui",
+  "cssEntry": ".design-sync/style-entry.css",
+  "extraFonts": [
+    "node_modules/@fontsource/ibm-plex-sans/400.css",
+    "node_modules/@fontsource/ibm-plex-sans/500.css",
+    "node_modules/@fontsource/ibm-plex-sans/600.css",
+    "node_modules/@fontsource/ibm-plex-sans/700.css",
+    "node_modules/@fontsource/ibm-plex-mono/400.css",
+    "node_modules/@fontsource/ibm-plex-mono/500.css",
+    "node_modules/@fontsource/ibm-plex-mono/600.css"
+  ],
+  "buildCmd": "node .ds-sync/package-build.mjs --config .design-sync/config.json --node-modules ./node_modules --entry .design-sync/bundle-entry.tsx --out ./ds-bundle",
+  "readmeHeader": ".design-sync/conventions.md",
+  "overrides": {
+    "Icon": { "cardMode": "column" }
+  },
+  "componentSrcMap": {
+    "Bars":          "src/admin/ui/components/Bars.tsx",
+    "Drawer":        ".design-sync/shims/Drawer.tsx",
+    "DetailSection": ".design-sync/shims/Drawer.tsx",
+    "DetailRow":     ".design-sync/shims/Drawer.tsx",
+    "StatusBanner":  ".design-sync/shims/Drawer.tsx",
+    "Icon":          ".design-sync/shims/Icon.tsx",
+    "Meta":          "src/admin/ui/components/Meta.tsx",
+    "Modal":         ".design-sync/shims/Modal.tsx",
+    "Field":         ".design-sync/shims/Modal.tsx",
+    "FieldInput":    ".design-sync/shims/Modal.tsx",
+    "FieldSelect":   ".design-sync/shims/Modal.tsx",
+    "FieldTextarea": ".design-sync/shims/Modal.tsx",
+    "FormError":     ".design-sync/shims/Modal.tsx",
+    "FormRow":       ".design-sync/shims/Modal.tsx",
+    "FormActions":   ".design-sync/shims/Modal.tsx",
+    "ProviderGlyph": ".design-sync/shims/ProviderGlyph.tsx",
+    "RowCard":       "src/admin/ui/components/RowCard.tsx",
+    "Stat":          ".design-sync/shims/Stat.tsx",
+    "StatePill":     "src/admin/ui/components/StatePill.tsx",
+    "Tabs":          "src/admin/ui/components/Tabs.tsx",
+    "TabPanel":      "src/admin/ui/components/Tabs.tsx",
+    "Tag":           "src/admin/ui/components/Tag.tsx",
+    "Toggle":        "src/admin/ui/components/Toggle.tsx"
+  },
+  "dtsPropsFor": {
+    "Bars":          "data: number[]; height?: number; tone?: 'active' | 'ok' | 'warn' | 'danger' | 'info' | 'muted';",
+    "Drawer":        "eyebrow?: string; title: string; glyph?: React.ReactNode; onClose: () => void; footer?: React.ReactNode; children: React.ReactNode;",
+    "DetailSection": "label?: string; children: React.ReactNode;",
+    "DetailRow":     "k: string; mono?: boolean; children?: React.ReactNode;",
+    "StatusBanner":  "tone: 'active' | 'ok' | 'warn' | 'danger' | 'info' | 'muted'; icon: string; title: string; sub?: string;",
+    "Icon":          "name: string; size?: number; style?: React.CSSProperties; className?: string;",
+    "Meta":          "label: string; children: React.ReactNode; mono?: boolean; accent?: boolean;",
+    "Modal":         "title: string; sub?: string; onClose: () => void; children: React.ReactNode; footer?: React.ReactNode; wide?: boolean; width?: number;",
+    "Field":         "label: string; required?: boolean; children: React.ReactNode; hint?: string;",
+    "FieldInput":    "value?: string | number; placeholder?: string; disabled?: boolean; type?: string; onChange?: React.ChangeEventHandler<HTMLInputElement>;",
+    "FieldSelect":   "value?: string; disabled?: boolean; onChange?: React.ChangeEventHandler<HTMLSelectElement>; children?: React.ReactNode;",
+    "FieldTextarea": "value?: string; placeholder?: string; disabled?: boolean; rows?: number; onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;",
+    "FormError":     "msg: string | null;",
+    "FormRow":       "children: React.ReactNode;",
+    "FormActions":   "children: React.ReactNode;",
+    "ProviderGlyph": "provider: string; size?: number;",
+    "RowCard":       "children: React.ReactNode; onClick?: () => void;",
+    "Stat":          "label: string; value: number | string; sub?: string; tone?: 'active' | 'ok' | 'warn' | 'danger' | 'info' | 'muted'; icon?: string; big?: boolean;",
+    "StatePill":     "state: 'DETECTED' | 'CONTEXT_BUILDING' | 'AGENT_RUNNING' | 'IN_REVIEW' | 'FEEDBACK_PROCESSING' | 'RETRY_CYCLE' | 'MERGED' | 'CLOSING' | 'DONE' | 'FAILED' | 'ABANDONED' | 'REVIEW_PENDING' | 'REVIEW_RUNNING' | 'REVIEW_COMMENTING' | 'REVIEW_WATCHING' | 'REVIEW_DONE' | 'REVIEW_FAILED'; size?: 'sm' | 'md'; pulse?: boolean;",
+    "Tabs":          "tabs: Array<{ id: string; label: string; count?: number | null }>; value: string; onChange: (id: string) => void; size?: 'sm' | 'md';",
+    "TabPanel":      "children: React.ReactNode;",
+    "Tag":           "children: React.ReactNode; tone?: 'active' | 'ok' | 'warn' | 'danger' | 'info' | 'muted'; mono?: boolean;",
+    "Toggle":        "on: boolean; onChange?: (on: boolean) => void; disabled?: boolean;"
+  }
+}

.design-sync/conventions.md

@@ -0,0 +1,65 @@
+# Virtual Engineer UI — Design Conventions
+
+## Design system overview
+
+Virtual Engineer uses a **dark-first OKLCH token system** with a light-theme override via `[data-theme="light"]`. The palette is cool-neutral (hue 258°) with a purple accent (hue 248°) and semantic state hues for ok/warn/danger/info/muted.
+
+## Token system
+
+All tokens are CSS custom properties on `:root`. Key categories:
+
+| Group | Tokens |
+|---|---|
+| Accent | `--accent`, `--accent-strong`, `--accent-soft`, `--accent-line` (hue controllable via `--accent-h`) |
+| Backgrounds | `--bg`, `--bg-grad`, `--panel`, `--panel-2`, `--panel-3`, `--rail` |
+| Borders | `--border`, `--border-soft`, `--border-strong` |
+| Text | `--text`, `--text-dim`, `--text-faint`, `--text-ghost` |
+| State | `--ok/--ok-soft`, `--warn/--warn-soft`, `--danger/--danger-soft`, `--info/--info-soft`, `--muted-state/--muted-state-soft` |
+| Shape | `--radius` (10px), `--radius-sm` (7px), `--radius-lg` (14px), `--ease` |
+| Typography | `--font-sans` (IBM Plex Sans), `--font-mono` (IBM Plex Mono) |
+
+State tones map to the `ToneKey` type: `"active" | "ok" | "warn" | "danger" | "info" | "muted"`.
+
+## Typography
+
+- **Body**: IBM Plex Sans, 14px, 1.45 line-height
+- **Monospace** (code, commit hashes, branch names): IBM Plex Mono — apply via `.mono` class or `font-family: var(--font-mono)`
+- **Eyebrow** labels: use `.eyebrow` class (10.5px, 600, uppercase, letter-spacing)
+
+## Component groups
+
+- **`general/`** — app-level primitives: `Bars`, `Meta`, `RowCard`, `StatePill`, `Tabs`/`TabPanel`, `Tag`, `Toggle`
+- **`shims/`** — overlays and form system: `Drawer` (+`DetailSection`, `DetailRow`, `StatusBanner`), `Icon`, `Modal` (+`Field`, `FieldInput`, `FieldSelect`, `FieldTextarea`, `FormError`, `FormRow`, `FormActions`), `ProviderGlyph`, `Stat`
+
+## CSS utility classes
+
+Available globally via `styles.css`:
+
+| Class | Purpose |
+|---|---|
+| `.btn` / `.btn.primary` / `.btn.danger` / `.btn.sm` | Standard button variants |
+| `.iconbtn` | Square icon-only button (30×30px) |
+| `.card` | Surface with panel background and soft border |
+| `.pill` | Compact label with optional `.dot` |
+| `.eyebrow` | Section heading / label text |
+| `.mono` | Monospace text |
+| `.fade-up` | Entrance animation |
+| `.live-dot` | Pulsing status indicator |
+| `.metric-val` | Tabular numeral formatting |
+| `.modal-scrim` / `.modal` / `.modal-head` / `.modal-body` / `.modal-foot` | Modal layout skeleton |
+| `.drawer-scrim` / `.drawer` / `.drawer-head` / `.drawer-body` / `.drawer-foot` | Drawer layout skeleton |
+| `.detail-rows` / `.detail-row` / `.detail-key` / `.detail-val` | Key-value detail lists |
+| `.pick-card` / `.pick-card.sel` | Selectable option cards |
+
+## State machine
+
+`StatePill` takes a `state` prop from the full `TaskState` union (17 values). States group into:
+- **Generation**: `DETECTED → CONTEXT_BUILDING → AGENT_RUNNING → IN_REVIEW → FEEDBACK_PROCESSING → RETRY_CYCLE → MERGED → CLOSING → DONE / FAILED / ABANDONED`
+- **Review**: `REVIEW_PENDING → REVIEW_RUNNING → REVIEW_COMMENTING → REVIEW_WATCHING → REVIEW_DONE / REVIEW_FAILED`
+
+## Layout patterns
+
+- **Drawer**: slides from the right; app shell shifts left via `body.ve-drawer-open → .app { padding-right: 460px }`. Use `Drawer` + `DetailSection` + `DetailRow` for entity detail panels.
+- **Modal**: centered overlay with backdrop blur; uses `Modal` + `FormRow` + `Field` + form atoms for forms.
+- **Stats grid**: `Stat` components in a flex row with `flex: 1` each.
+- **Row list**: `RowCard` in a vertical stack for table-like entity lists.

.design-sync/previews/DetailSection.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DetailSection, DetailRow } from "virtual-engineer";
+
+export function TaskDetails() {
+  return (
+    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 20 }}>
+      <DetailSection label="Ticket">
+        <DetailRow k="Source">GitHub Issue #128</DetailRow>
+        <DetailRow k="Title">Fix auth session timeout on mobile</DetailRow>
+        <DetailRow k="Assignee">Fadi Shehadeh</DetailRow>
+        <DetailRow k="Created">2 hours ago</DetailRow>
+      </DetailSection>
+
+      <DetailSection label="Work">
+        <DetailRow k="Branch" mono>fix/auth-session-mobile</DetailRow>
+        <DetailRow k="Commit" mono>a29c08e</DetailRow>
+        <DetailRow k="PR">#142 — Fix mobile auth session</DetailRow>
+      </DetailSection>
+    </div>
+  );
+}
+
+export function MinimalSection() {
+  return (
+    <div style={{ padding: 24 }}>
+      <DetailSection>
+        <DetailRow k="Status">Running</DetailRow>
+        <DetailRow k="Duration">3m 42s</DetailRow>
+        <DetailRow k="Agent">Claude Sonnet 4</DetailRow>
+      </DetailSection>
+    </div>
+  );
+}

.design-sync/previews/Field.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Field, FieldInput, FieldSelect, FieldTextarea } from "virtual-engineer";
+
+export function TextInput() {
+  return (
+    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      <Field label="Repository URL" required hint="The HTTPS URL of the repository to monitor.">
+        <FieldInput placeholder="https://github.com/owner/repo" />
+      </Field>
+      <Field label="Branch" required>
+        <FieldInput placeholder="main" defaultValue="main" />
+      </Field>
+    </div>
+  );
+}
+
+export function SelectAndTextarea() {
+  return (
+    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      <Field label="Provider">
+        <FieldSelect>
+          <option value="github">GitHub</option>
+          <option value="gitlab">GitLab</option>
+          <option value="gerrit">Gerrit</option>
+        </FieldSelect>
+      </Field>
+      <Field label="Agent prompt" hint="Instructions passed to the coding agent.">
+        <FieldTextarea
+          rows={4}
+          placeholder="You are a coding assistant. When a task is detected…"
+        />
+      </Field>
+    </div>
+  );
+}
+
+export function Disabled() {
+  return (
+    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      <Field label="Project ID">
+        <FieldInput value="proj_a1b2c3d4" disabled />
+      </Field>
+      <Field label="Status">
+        <FieldSelect disabled>
+          <option>Active</option>
+        </FieldSelect>
+      </Field>
+    </div>
+  );
+}

.design-sync/previews/FormActions.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { FormActions } from "virtual-engineer";
+
+export function SaveCancel() {
+  return (
+    <div style={{ padding: 24, maxWidth: 400 }}>
+      <FormActions>
+        <button className="btn">Cancel</button>
+        <button className="btn primary">Save Integration</button>
+      </FormActions>
+    </div>
+  );
+}
+
+export function WithDanger() {
+  return (
+    <div style={{ padding: 24, maxWidth: 400 }}>
+      <FormActions>
+        <button className="btn danger">Delete</button>
+        <span style={{ flex: 1 }} />
+        <button className="btn">Cancel</button>
+        <button className="btn primary">Confirm</button>
+      </FormActions>
+    </div>
+  );
+}
+
+export function Loading() {
+  return (
+    <div style={{ padding: 24, maxWidth: 400 }}>
+      <FormActions>
+        <button className="btn">Cancel</button>
+        <button className="btn primary" disabled style={{ opacity: 0.7 }}>
+          Connecting…
+        </button>
+      </FormActions>
+    </div>
+  );
+}

.design-sync/previews/FormRow.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { FormRow, Field, FieldInput, FieldSelect, FormError } from "virtual-engineer";
+
+export function IntegrationForm() {
+  return (
+    <div style={{ padding: 24, maxWidth: 420 }}>
+      <FormRow>
+        <Field label="Name" required>
+          <FieldInput placeholder="My GitHub Repo" />
+        </Field>
+        <Field label="Provider">
+          <FieldSelect>
+            <option>GitHub</option>
+            <option>GitLab</option>
+            <option>Gerrit</option>
+          </FieldSelect>
+        </Field>
+        <Field label="Repository URL" required hint="HTTPS clone URL">
+          <FieldInput placeholder="https://github.com/owner/repo" />
+        </Field>
+        <Field label="Branch">
+          <FieldInput placeholder="main" />
+        </Field>
+      </FormRow>
+    </div>
+  );
+}
+
+export function WithError() {
+  return (
+    <div style={{ padding: 24, maxWidth: 420 }}>
+      <FormRow>
+        <FormError msg="Could not connect to the repository. Check the URL and your access token." />
+        <Field label="Repository URL" required>
+          <FieldInput
+            placeholder="https://github.com/owner/repo"
+            defaultValue="https://github.com/bad/url"
+            style={{ borderColor: "var(--danger)" }}
+          />
+        </Field>
+      </FormRow>
+    </div>
+  );
+}