Add shared-auth-token UI and make cancelling actually cancel

UI for the shared Claude token: a Settings section showing token state
with Authenticate and Revoke, an acquisition modal built on the shared
Modal (sign-in link handed to the host browser via the opener plugin,
plus the code input that answers `setup-token`'s stdin prompt — the flow
cannot complete without it), and a per-project opt-out toggle shown only
for the Anthropic backend.

Cancellation: acquire_claude_token previously had only two exits,
completion and a 15-minute timeout, and held the single-flight guard for
the whole time. Closing the dialog therefore locked the user out of
retrying for up to 15 minutes. Adds cancel_claude_token, backed by a
oneshot claimed and released in lockstep with the input guard, selected
on in the run loop so it wins the race and tears the exec down. The
dialog's Cancel now calls it and closes either way.

Also refreshes CLAUDE.md, which had drifted: it documented the deleted
ProjectCard, and asserted that new IPC commands need permission grants
in capabilities/default.json — they do not, that file covers plugin
commands only. Adds the conventions that would otherwise bite:
container_needs_recreation() is purely label-based and never diffs env,
so container-affecting state needs its own label; and #[serde(default)]
on a bool yields false regardless of intent.

Corrects the claim that Reset preserves credentials. Reset calls
remove_project_volumes, which deletes both the home and claude-config
volumes, so it wipes ~/.claude, the OAuth token, installed skills and
session transcripts.

84 frontend tests, 34 Rust tests, both builds clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-09 11:49:03 -07:00
co-authored by Claude Opus 5
parent 01a2f6aec8
commit d95ba54a69
15 changed files with 1427 additions and 11 deletions
@@ -0,0 +1,95 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import ModelSection from "./ModelSection";
import type { Backend, Project } from "../../../../lib/types";
const baseProject: Project = {
id: "p1",
name: "api-server",
paths: [{ host_path: "/src/api", mount_name: "api" }],
container_id: null,
status: "stopped",
backend: "anthropic",
bedrock_config: null,
ollama_config: null,
openai_compatible_config: null,
allow_docker_access: false,
sandbox_mode_enabled: true,
mission_control_enabled: false,
auth_bridge_enabled: false,
use_shared_auth_token: true,
full_permissions: false,
permission_mode: null,
ssh_key_path: null,
git_token: null,
git_user_name: null,
git_user_email: null,
custom_env_vars: [],
port_mappings: [],
claude_instructions: null,
claude_code_settings: null,
renamed_session_names: {},
created_at: "2026-01-01T00:00:00Z",
updated_at: "2026-01-01T00:00:00Z",
};
const TOGGLE = "Use the shared Claude token";
const save = vi.fn().mockResolvedValue(true);
function renderSection(over: Partial<Project> = {}, disabled = false) {
return render(
<ModelSection
project={{ ...baseProject, ...over }}
save={save}
disabled={disabled}
/>,
);
}
describe("ModelSection — shared auth token toggle", () => {
beforeEach(() => vi.clearAllMocks());
it("renders for the Anthropic backend", () => {
renderSection();
expect(screen.getByRole("switch", { name: TOGGLE })).toBeInTheDocument();
});
it.each<Backend>(["bedrock", "ollama", "open_ai_compatible"])(
"is hidden for the %s backend",
(backend) => {
renderSection({ backend });
expect(screen.queryByRole("switch", { name: TOGGLE })).not.toBeInTheDocument();
},
);
it("defaults to on, including for data written before the field existed", () => {
renderSection();
expect(screen.getByRole("switch", { name: TOGGLE })).toHaveAttribute(
"aria-checked",
"true",
);
const legacy = { ...baseProject } as Partial<Project>;
delete legacy.use_shared_auth_token;
renderSection(legacy);
expect(screen.getAllByRole("switch", { name: TOGGLE })[1]).toHaveAttribute(
"aria-checked",
"true",
);
});
it("saves the opt-out and explains the consequence", () => {
renderSection();
fireEvent.click(screen.getByRole("switch", { name: TOGGLE }));
expect(save).toHaveBeenCalledWith({ use_shared_auth_token: false });
renderSection({ use_shared_auth_token: false });
expect(screen.getByText(/needs its own `claude login`/)).toBeInTheDocument();
});
it("follows the container-stopped rule like the rest of the group", () => {
renderSection({}, true);
expect(screen.getByRole("switch", { name: TOGGLE })).toBeDisabled();
});
});
@@ -7,7 +7,13 @@ import type {
OpenAiCompatibleConfig,
Project,
} from "../../../../lib/types";
import Field, { ConfigGroup, monoInputClass, selectClass } from "../../../ui/Field";
import Field, {
ConfigGroup,
SwitchRow,
monoInputClass,
selectClass,
} from "../../../ui/Field";
import Toggle from "../../../ui/Toggle";
export const DEFAULT_BEDROCK_CONFIG: BedrockConfig = {
auth_method: "static_credentials",
@@ -106,6 +112,10 @@ export default function ModelSection({ project, save, disabled }: Props) {
},
});
// Defaults to on: projects created before the field existed, and any data
// that predates it, should still pick the shared token up.
const useSharedToken = project.use_shared_auth_token !== false;
const handleBackendChange = (mode: Backend) => {
const patch: Partial<Project> = { backend: mode };
if (mode === "bedrock" && !project.bedrock_config)
@@ -139,6 +149,29 @@ export default function ModelSection({ project, save, disabled }: Props) {
)}
</Field>
{/* Only Anthropic reads CLAUDE_CODE_OAUTH_TOKEN; the other backends
authenticate through their own credentials entirely. */}
{project.backend === "anthropic" && (
<div className="pt-2 border-t border-[var(--border-color)]">
<SwitchRow
label="Use the shared Claude token"
hint={
useSharedToken
? "Signs in with the shared token from Settings → Claude Authentication, so this container needs no `claude login` of its own."
: "This project is opted out: it ignores the shared token and needs its own `claude login` inside the container."
}
control={
<Toggle
label="Use the shared Claude token"
checked={useSharedToken}
onChange={(value) => save({ use_shared_auth_token: value })}
disabled={disabled}
/>
}
/>
</div>
)}
{project.backend === "bedrock" && (
<div className="space-y-4 pt-2 border-t border-[var(--border-color)]">
<Field label="Authentication method" hint="How the container proves its identity to Bedrock.">