mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-08-28 05:27:41 +00:00
Some checks are pending
Rust / Format (push) Waiting to run
Rust / Clippy (push) Waiting to run
Rust / Generated Docs (push) Waiting to run
Rust / Test (Linux) (push) Waiting to run
Rust / Test (macOS) (push) Waiting to run
TypeScript / Typecheck (push) Waiting to run
TypeScript / Test (push) Waiting to run
TypeScript / Build (push) Waiting to run
## Summary
Adds a full CRUD management UI for server-managed MCP servers at
`/settings/mcps`, consuming the already-shipped `MCPServersApi` backend.
The implementation mirrors the existing `/settings/environments` pages
exactly in structure, naming, and component conventions.
## What changed
### Step 1 — Shared `KeyValueEditor` extracted
`KeyValueEditor`, `KeyValueEntry`, `entriesFromMap`, and
`mapFromEntries` are moved from `environment-form.tsx` into a new
`components/key-value-editor.tsx`. The component gains an optional
`renderEntryHint` prop so per-row warnings can be injected without
coupling the editor to credential logic. `Label` is promoted from
`environment-form.tsx` to `settings-panel.tsx` so both forms can use it.
### Step 2–4 — Query plumbing
- `query-keys.ts`: `mcpServers.{list, detail}` keys.
- `api-client.ts`: `mcpServersApi` instance (same pattern as
`environmentsApi`).
- `queries.ts`: `useMcpServers()` and `useMcpServer(id)` SWR hooks.
### Step 5 — Credential heuristics (`lib/credential-heuristics.ts`)
Pure functions `looksLikeCredential`, `secretNameForKey`,
`secretReference`. Key-name matching covers `authorization`, `password`,
`token`, `api[-_]?key`, `_key`/`_token`/`_secret` suffixes.
Value-entropy fallback fires for strings ≥ 20 chars, no spaces, mixed
case/digit classes. Template references (`{{ secrets.* }}`) are never
flagged.
### Step 6–7 — Form model + component (`components/mcp-server-form.tsx`)
- Flat `McpServerFormValues` discriminated on `McpTransportKind`.
- `defaultMcpServerFormValues`, `mcpServerToFormValues` (populates
`env`/`headers` from `env_keys`/`header_keys` with **empty values** —
the §5 write-only design), `createRequestFromForm`,
`replaceRequestFromForm`, `isMcpServerFormValid`, `credentialWarnings`.
- `McpServerFormFields` renders stdio / http / sandbox panels switching
on `values.transport`. Per-row credential nudge opens the secrets-new
page in a new tab and substitutes a `{{ secrets.NAME }}` reference; save
is never blocked by the heuristic.
- On edit, a row with a non-empty key and empty value blocks save with
an inline error (the intentional overwrite guard).
### Step 8–10 — Route pages
| File | Mirrors |
|---|---|
| `routes/settings-mcps.tsx` | `settings-environments.tsx` |
| `routes/settings-mcps-new.tsx` | `settings-environments-new.tsx` |
| `routes/settings-mcps-edit.tsx` | `settings-environments-edit.tsx` |
The edit page shows a write-only-values banner whenever the transport
has any `env_keys`/`header_keys`, uses `key={server.revision}` to
remount the form on external change, and translates 409 responses into
the `staleAwareMessage` pattern.
### Steps 11–12 — Router + nav
Three routes registered under `settings` children. `PuzzlePieceIcon` nav
entry added to the same section as Environments.
### Plan Summary
- Extract `KeyValueEditor` to shared component with hint-injection slot
- Credential heuristics library (pure, fully unit-tested)
- MCP form model: flat values ↔ discriminated API types, write-only-key
guard
- List / new / edit pages following environments pattern exactly
- Route registration and settings nav link
### Fabro Details
<details>
<summary>Ran 9 stages in 65m 58s for $20.54</summary>
| Stage | Duration | Cost | Retries |
|---|---|---|---|
| start | 0s | – | 0 |
| toolchain | 1s | – | 0 |
| preflight_compile | 2m 47s | – | 0 |
| preflight_lint | 4m 15s | – | 0 |
| implement | 26m 29s | $12.27 | 0 |
| simplify_opus | 7m 41s | $4.95 | 0 |
| simplify_gpt | 6m 51s | $2.69 | 0 |
| verify | 15m 44s | – | 0 |
| fixup | 1m 41s | $0.63 | 0 |
| **Total** | **65m 58s** | **$20.54** | **0** |
</details>
<details>
<summary>Ran <code>ImplementPlan.fabro</code> (11 nodes and 14
edges)</summary>
```dot
digraph ImplementPlan {
graph [
goal="Implement and simplify",
model_stylesheet="
* { model: claude-opus-4-8; }
"
]
rankdir=LR
start [shape=Mdiamond, label="Start"]
exit [shape=Msquare, label="Exit"]
toolchain [label="Toolchain", shape=parallelogram, script="command -v cargo >/dev/null || { curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && sudo ln -sf $HOME/.cargo/bin/* /usr/local/bin/; }; cargo --version 2>&1", max_retries=0]
preflight_compile [label="Preflight Compile", shape=parallelogram, script="cargo check -q --workspace 2>&1", max_retries=0]
preflight_lint [label="Preflight Lint", shape=parallelogram, script="cargo +nightly-2026-04-14 clippy -q --workspace --all-targets -- -D warnings 2>&1", max_retries=0]
fix_lints [label="Fix Lints", prompt="The preflight lint step failed. Read the build output from context and fix all clippy lint warnings.", max_visits=3]
implement [label="Implement", prompt="Read the plan file referenced in the goal and implement every step. Make all the code changes described in the plan. Use red/green TDD.", model="gpt-55", reasoning_effort="xhigh"]
simplify_opus [label="Simplify (Opus)", prompt="@prompts/simplify.md"]
simplify_gpt [label="Simplify (GPT-55)", prompt="@prompts/simplify.md", model="gpt-55"]
verify [label="Verify", shape=parallelogram, script="git fetch origin main 2>&1 && git merge --no-edit --no-stat origin/main 2>&1 && cargo +nightly-2026-04-14 fmt --all 2>&1 && cargo dev docs refresh 2>&1 && cargo +nightly-2026-04-14 fmt --check --all 2>&1 && { command -v rg >/dev/null 2>&1 || { echo 'rg is required for verify'; exit 127; }; } && ! rg -n 'AuthMode::Disabled|RunAuthMethod|RunSubjectProvenance|\bActorRef\b|\bActorKind\b|AuthenticatedSubject|AuthenticatedService|AuthorizeRunScoped|AuthorizeRunBlob|AuthorizeStageArtifact|AuthorizeCommandLog|auth_method\s*==\s*\"disabled\"' lib/crates apps lib/packages docs/public/api-reference/fabro-api.yaml 2>&1 && cargo +nightly-2026-04-14 clippy --workspace --all-targets -- -D warnings 2>&1 && cargo nextest run --workspace --status-level slow --profile ci 2>&1 && cargo dev docs check 2>&1 && bun install --frozen-lockfile 2>&1 && (cd apps/fabro-web && bun run typecheck) 2>&1 && (cd apps/fabro-web && bun run test) 2>&1 && (cd lib/packages/fabro-api-client && bun run typecheck) 2>&1 && cargo dev build -- -p fabro-cli --release 2>&1", goal_gate=true, retry_target="fixup"]
fixup [label="Fixup", prompt="The verify step failed. Read the build output from context and fix all format, clippy, Rust test, docs, TypeScript typecheck/test, and build failures.", max_visits=3]
start -> toolchain
toolchain -> preflight_compile [condition="outcome=succeeded"]
toolchain -> exit
preflight_compile -> preflight_lint [condition="outcome=succeeded"]
preflight_compile -> exit
preflight_lint -> implement [condition="outcome=succeeded"]
preflight_lint -> fix_lints
fix_lints -> preflight_lint
implement -> simplify_opus -> simplify_gpt -> verify
verify -> exit [condition="outcome=succeeded"]
verify -> fixup
fixup -> verify
}
```
</details>
⚒️ Generated with [Fabro](https://fabro.sh)
---------
Co-authored-by: Fabro <noreply@fabro.sh>
128 lines
5.3 KiB
TypeScript
128 lines
5.3 KiB
TypeScript
export type RunGraphDirection = "LR" | "TB" | "BT" | "RL";
|
|
export type RunFileScope = "committed" | "uncommitted" | "all";
|
|
export type RunFileSelection =
|
|
| { kind: "scope"; scope: RunFileScope }
|
|
| { kind: "commit"; fromSha: string; toSha: string };
|
|
export type QueryKey = readonly unknown[];
|
|
|
|
const RUN_FILE_SCOPES = ["committed", "uncommitted", "all"] as const;
|
|
|
|
export function runFileScopeSelection(
|
|
scope: RunFileScope = "committed",
|
|
): RunFileSelection {
|
|
return { kind: "scope", scope };
|
|
}
|
|
|
|
function pathSegment(value: string): string {
|
|
return encodeURIComponent(value);
|
|
}
|
|
|
|
function fileSelectionKey(selection: RunFileSelection): readonly unknown[] {
|
|
return selection.kind === "scope"
|
|
? ["scope", selection.scope]
|
|
: ["commit", selection.fromSha, selection.toSha];
|
|
}
|
|
|
|
export const queryKeys = {
|
|
auth: {
|
|
config: () => ["auth", "config"] as const,
|
|
me: () => ["auth", "me"] as const,
|
|
sessions: () => ["auth", "sessions"] as const,
|
|
loginDevToken: () => ["auth", "login-dev-token"] as const,
|
|
},
|
|
system: {
|
|
info: () => ["system", "info"] as const,
|
|
integrations: () => ["system", "integrations"] as const,
|
|
resources: () => ["system", "resources"] as const,
|
|
attachUrl: () => "/api/v1/attach",
|
|
},
|
|
runs: {
|
|
all: (filters: object = {}) =>
|
|
["runs", "all", filters] as const,
|
|
page: (opts: object = {}) =>
|
|
["runs", "page", opts] as const,
|
|
detail: (id: string) => ["runs", "detail", id] as const,
|
|
state: (id: string) => ["runs", "state", id] as const,
|
|
files: (id: string, selection: RunFileSelection = runFileScopeSelection()) =>
|
|
["runs", "files", id, ...fileSelectionKey(selection)] as const,
|
|
filesAllScopes: (id: string) =>
|
|
RUN_FILE_SCOPES.map((scope) =>
|
|
queryKeys.runs.files(id, runFileScopeSelection(scope)),
|
|
),
|
|
commits: (id: string) => ["runs", "commits", id] as const,
|
|
stages: (id: string) => ["runs", "stages", id] as const,
|
|
graph: (id: string, direction?: RunGraphDirection) =>
|
|
["runs", "graph", id, direction ?? null] as const,
|
|
graphSource: (id: string) => ["runs", "graph-source", id] as const,
|
|
settings: (id: string) => ["runs", "settings", id] as const,
|
|
logs: (id: string) => ["runs", "logs", id] as const,
|
|
artifacts: (id: string) => ["runs", "artifacts", id] as const,
|
|
billing: (id: string) => ["runs", "billing", id] as const,
|
|
questions: (id: string, limit = 1, offset = 0) =>
|
|
["runs", "questions", id, limit, offset] as const,
|
|
events: (id: string, limit = 1000) => ["runs", "events", id, limit] as const,
|
|
stageEvents: (id: string, stageId: string) =>
|
|
["runs", "stage-events", id, stageId] as const,
|
|
stageContextWindow: (id: string, stageId: string) =>
|
|
["runs", "stage-context-window", id, stageId] as const,
|
|
stageLog: (id: string, stageId: string, offset = 0, limit = 65_536) =>
|
|
["runs", "stage-log", id, stageId, offset, limit] as const,
|
|
sandbox: (id: string) => ["runs", "sandbox", id] as const,
|
|
sandboxFiles: (id: string, path: string, depth?: number) =>
|
|
["runs", "sandbox-files", id, path, depth ?? null] as const,
|
|
sandboxFile: (id: string, path: string) =>
|
|
["runs", "sandbox-file", id, path] as const,
|
|
sandboxVnc: (id: string) => ["runs", "sandbox-vnc", id] as const,
|
|
sandboxServices: (id: string) => ["runs", "sandbox-services", id] as const,
|
|
pullRequest: (id: string) => ["runs", "pull-request", id] as const,
|
|
preview: (id: string) => ["runs", "preview", id] as const,
|
|
cancel: (id: string) => ["runs", "cancel", id] as const,
|
|
approve: (id: string) => ["runs", "approve", id] as const,
|
|
deny: (id: string) => ["runs", "deny", id] as const,
|
|
retry: (id: string) => ["runs", "retry", id] as const,
|
|
archive: (id: string) => ["runs", "archive", id] as const,
|
|
unarchive: (id: string) => ["runs", "unarchive", id] as const,
|
|
updateTitle: (id: string) => ["runs", "update-title", id] as const,
|
|
attachUrl: (id: string) => `/api/v1/runs/${pathSegment(id)}/attach`,
|
|
},
|
|
workflows: {
|
|
list: () => ["workflows", "list"] as const,
|
|
detail: (name: string) => ["workflows", "detail", name] as const,
|
|
runs: (name: string) => ["workflows", "runs", name] as const,
|
|
},
|
|
automations: {
|
|
list: () => ["automations", "list"] as const,
|
|
detail: (id: string) => ["automations", "detail", id] as const,
|
|
runs: (id: string, opts: { limit?: number; offset?: number } = {}) =>
|
|
["automations", "runs", id, opts.limit ?? null, opts.offset ?? null] as const,
|
|
},
|
|
insights: {
|
|
queries: () => ["insights", "queries"] as const,
|
|
history: () => ["insights", "history"] as const,
|
|
},
|
|
settings: {
|
|
server: () => ["settings", "server"] as const,
|
|
},
|
|
providers: {
|
|
list: () => ["providers", "list"] as const,
|
|
},
|
|
models: {
|
|
list: (provider: string, query: string) =>
|
|
["models", "list", provider, query] as const,
|
|
},
|
|
secrets: {
|
|
list: () => ["secrets", "list"] as const,
|
|
},
|
|
variables: {
|
|
list: () => ["variables", "list"] as const,
|
|
detail: (name: string) => ["variables", "detail", name] as const,
|
|
},
|
|
environments: {
|
|
list: () => ["environments", "list"] as const,
|
|
detail: (id: string) => ["environments", "detail", id] as const,
|
|
},
|
|
mcpServers: {
|
|
list: () => ["mcp-servers", "list"] as const,
|
|
detail: (id: string) => ["mcp-servers", "detail", id] as const,
|
|
},
|
|
};
|