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>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,150 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { save } from "@tauri-apps/plugin-dialog";
|
||||
import type { Project } from "../lib/types";
|
||||
import * as commands from "../lib/tauri-commands";
|
||||
import { useAppState } from "../store/appState";
|
||||
import { useProjects } from "./useProjects";
|
||||
import { useTerminal } from "./useTerminal";
|
||||
|
||||
/**
|
||||
* Lifecycle + terminal actions for one project, shared by the sidebar row and
|
||||
* Project Home so both surfaces behave identically. Failures raise a toast
|
||||
* (with expandable detail) rather than a blocking modal or a 12px card line.
|
||||
*/
|
||||
export function useProjectActions(project: Project) {
|
||||
const { start, stop, rebuild } = useProjects();
|
||||
const { open: openTerminal, sendInput } = useTerminal();
|
||||
const pushToast = useAppState((s) => s.pushToast);
|
||||
const setContainerProgress = useAppState((s) => s.setContainerProgress);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [backingUp, setBackingUp] = useState(false);
|
||||
|
||||
const fail = useCallback(
|
||||
(message: string, error: unknown) => {
|
||||
pushToast({ kind: "error", message, detail: String(error) });
|
||||
},
|
||||
[pushToast],
|
||||
);
|
||||
|
||||
const run = useCallback(
|
||||
async (label: string, fn: () => Promise<unknown>) => {
|
||||
setBusy(true);
|
||||
setContainerProgress(project.id, null);
|
||||
try {
|
||||
await fn();
|
||||
} catch (e) {
|
||||
fail(`${label} failed for “${project.name}”`, e);
|
||||
} finally {
|
||||
setContainerProgress(project.id, null);
|
||||
setBusy(false);
|
||||
}
|
||||
},
|
||||
[fail, project.id, project.name, setContainerProgress],
|
||||
);
|
||||
|
||||
const handleStart = useCallback(
|
||||
() => run("Start", () => start(project.id)),
|
||||
[run, start, project.id],
|
||||
);
|
||||
|
||||
const handleStop = useCallback(
|
||||
() => run("Stop", () => stop(project.id)),
|
||||
[run, stop, project.id],
|
||||
);
|
||||
|
||||
const handleReset = useCallback(
|
||||
() => run("Reset", () => rebuild(project.id)),
|
||||
[run, rebuild, project.id],
|
||||
);
|
||||
|
||||
const openClaudeTerminal = useCallback(async () => {
|
||||
try {
|
||||
return await openTerminal(project.id, project.name);
|
||||
} catch (e) {
|
||||
fail(`Could not open a Claude terminal for “${project.name}”`, e);
|
||||
return null;
|
||||
}
|
||||
}, [openTerminal, project.id, project.name, fail]);
|
||||
|
||||
const openShell = useCallback(async () => {
|
||||
try {
|
||||
return await openTerminal(project.id, project.name, "bash");
|
||||
} catch (e) {
|
||||
fail(`Could not open a shell for “${project.name}”`, e);
|
||||
return null;
|
||||
}
|
||||
}, [openTerminal, project.id, project.name, fail]);
|
||||
|
||||
/**
|
||||
* Open a shell tab and type `command` into it. Used for [Resume] and for the
|
||||
* capability drawer's "Manage in terminal" — the backend has no
|
||||
* run-a-command entry point, so we drive the shell we just opened.
|
||||
*/
|
||||
const openTerminalWithCommand = useCallback(
|
||||
async (command: string, sessionLabel?: string) => {
|
||||
try {
|
||||
const sessionId = await openTerminal(
|
||||
project.id,
|
||||
project.name,
|
||||
"bash",
|
||||
sessionLabel,
|
||||
);
|
||||
// Give the login shell a moment to draw its prompt before typing.
|
||||
setTimeout(() => {
|
||||
sendInput(sessionId, `${command}\n`).catch((e) =>
|
||||
fail("Could not send the command to the terminal", e),
|
||||
);
|
||||
}, 700);
|
||||
return sessionId;
|
||||
} catch (e) {
|
||||
fail(`Could not open a terminal for “${project.name}”`, e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[openTerminal, sendInput, project.id, project.name, fail],
|
||||
);
|
||||
|
||||
const handleBackup = useCallback(async () => {
|
||||
if (!project.container_id) {
|
||||
pushToast({
|
||||
kind: "error",
|
||||
message: "Start the project at least once before backing up.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
|
||||
const safeName = project.name.replace(/[^a-zA-Z0-9_-]+/g, "_");
|
||||
try {
|
||||
const hostPath = await save({
|
||||
defaultPath: `${safeName}-backup-${stamp}.tar.gz`,
|
||||
filters: [{ name: "Gzipped tarball", extensions: ["tar.gz"] }],
|
||||
});
|
||||
if (!hostPath) return;
|
||||
setBackingUp(true);
|
||||
const bytes = await commands.downloadContainerBackup(project.id, hostPath);
|
||||
const mb = (bytes / (1024 * 1024)).toFixed(1);
|
||||
pushToast({
|
||||
kind: "success",
|
||||
message: `Backup saved (${mb} MB).`,
|
||||
detail:
|
||||
"Includes Claude config — may contain API keys. Keep the archive private.",
|
||||
});
|
||||
} catch (e) {
|
||||
fail("Backup failed", e);
|
||||
} finally {
|
||||
setBackingUp(false);
|
||||
}
|
||||
}, [project.container_id, project.id, project.name, pushToast, fail]);
|
||||
|
||||
return {
|
||||
busy,
|
||||
backingUp,
|
||||
handleStart,
|
||||
handleStop,
|
||||
handleReset,
|
||||
handleBackup,
|
||||
openClaudeTerminal,
|
||||
openShell,
|
||||
openTerminalWithCommand,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user