Skip to content
@@ -711,6 +739,15 @@ export default function App() {
}))}
current={navigationPage}
onNavigate={(id) => navigate(id as Page)}
+ account={
+ identity.session
+ ? {
+ label: `Signed in as ${identityLabel(identity.session)}`,
+ content:
,
+ onOpen: () => setAccountRequest((value) => value + 1),
+ }
+ : undefined
+ }
/>
@@ -728,7 +765,7 @@ export default function App() {
onClick={() => navigate(item.page)}
aria-current={navigationPage === item.page ? "page" : undefined}
>
- {item.label}
{item.page === "repositories" && (
{repositories.length}
@@ -737,14 +774,27 @@ export default function App() {
))}
-
- Source on GitHub
-
+ {identity.session && (
+
navigate("access")}
+ onSignedOut={() => {
+ productDrafts.clear();
+ runDrafts.clear();
+ identity.forgetSession();
+ restoredGoal.current = false;
+ identity.refresh();
+ setConnected(false);
+ setNotice("");
+ setAccountRequest(0);
+ setPage("overview");
+ }}
+ />
+ )}
@@ -777,661 +827,542 @@ export default function App() {
Dark
- navigate("settings")}
- >
-
- {connected ? "API connected" : "Connect your API"}
-
-
- {connected ? "Connected" : "Connect API"}
-
-
- {identity.session && (
- navigate("access")}
- onSignedOut={() => {
- productDrafts.clear();
- runDrafts.clear();
- identity.forgetSession();
- restoredGoal.current = false;
- identity.refresh();
- setConnected(false);
- setNotice("");
- }}
- />
- )}
- {connected &&
- executionHealth?.execution_ready === false &&
- !(
- executionHealth.service_role === "api" &&
- executionHealth.status === "ok" &&
- executionHealth.admission_ready === true &&
- executionHealth.execution?.local_enabled === false &&
- !executionHealth.detail
- ) && (
-
- {executionHealth.detail ||
- "Execution is unavailable. Inspect interrupted work before restarting the factory."}
-
- )}
- {error && (
-
- {error}
- void refresh()}>Try again
-
- )}
- {notice && currentData && (
-
- setNotice("")}
- >
-
-
- )}
- {page === "overview" && !connected && (
- {
- setSetupGoal("overview");
- navigate("settings");
- }}
- onProduct={() => {
- setSetupGoal("product");
- navigate("settings");
- }}
- />
- )}
- {page === "overview" && connected && (
+ {restrictedPage ? (
+
+ Factory administration
+
+ Sign in with a factory administrator account to manage the
+ factory.
+
+
+ Your project access and personal account preferences remain
+ available.
+
+
+ ) : (
<>
-
-
-
Your factory.
-
-
navigate("product")}>
-
-
void openRun(run)}
- onCreate={() => startStandalone(floorProject)}
- selection={floorSelection}
- onSelectionChange={selectFloor}
- />
-
-
- Repositories
-
- {repositories.length.toString().padStart(2, "0")}
-
-
-
-
Factory active runs
-
- {runs
- .filter((run) => working(run.status))
- .length.toString()
- .padStart(2, "0")}
-
-
-
-
-
Factory completed runs
-
- {runs
- .filter((run) =>
- ["completed", "succeeded"].includes(run.status),
- )
- .length.toString()
- .padStart(2, "0")}
-
-
+ {connected &&
+ executionHealth?.execution_ready === false &&
+ !(
+ executionHealth.service_role === "api" &&
+ executionHealth.status === "ok" &&
+ executionHealth.admission_ready === true &&
+ executionHealth.execution?.local_enabled === false &&
+ !executionHealth.detail
+ ) && (
+
+ {executionHealth.detail ||
+ "Execution is unavailable. Inspect interrupted work before restarting the factory."}
+
+ )}
+ {error && (
+
+ {error}
+ void refresh()}>Try again
-
-
-
-
- Project runs {projectRuns.length}
-
+ )}
+ {notice && currentData && (
+
+ void refresh()}
- disabled={!connected || loading}
+ aria-label="Dismiss notification"
+ onClick={() => setNotice("")}
>
-
- {loading && !projectRuns.length ? (
-
- ) : projectRuns.length ? (
-
- {projectRuns.map((run) => (
+ )}
+ {page === "overview" && !connected && (
+
{
+ setSetupGoal("overview");
+ navigate("settings");
+ }}
+ onProduct={() => {
+ setSetupGoal("product");
+ navigate("settings");
+ }}
+ />
+ )}
+ {page === "overview" && connected && (
+ <>
+
+
+
Factory
+
+
navigate("product")}
+ >
+
+
void openRun({ id })}
+ selection={floorSelection}
+ onSelectionChange={selectFloor}
+ />
+
+ )}
+ {page === "projects" && (
+ void openRun(run)}
+ onProduct={(id, project) => {
+ setRunProject(id);
+ navigate("product");
+ setProductProject(project);
+ }}
+ onStart={(context) => {
+ setRunProject(context.component.repository_id);
+ navigate("new");
+ setRunComponent(context);
+ }}
+ />
+ )}
+ {page === "product" && (
+ {
+ navigate("settings");
+ setSetupStep(1);
+ }}
+ connection={connection}
+ connected={connected}
+ repositories={repositories}
+ initialRepository={runProject}
+ onStart={startStandalone}
+ />
+ )}
+ {page === "knowledge" && (
+ {
+ navigate("settings");
+ setSetupStep(3);
+ }}
+ connection={connection}
+ connected={connected}
+ repositories={repositories}
+ />
+ )}
+ {page === "collaboration" && (
+ {
+ navigate("settings");
+ setSetupStep(2);
+ }}
+ connection={connection}
+ connected={connected}
+ repositories={repositories}
+ onOpen={(run) => void openRun(run)}
+ />
+ )}
+ {page === "new" && (
+ setRunComponent(null)}
+ initialRepository={runProject}
+ repositories={repositories}
+ profiles={profiles}
+ connected={connected}
+ connection={connection}
+ onRepository={() => navigate("repositories")}
+ onConnection={() => navigate("settings")}
+ onCreated={(run, notice) => {
+ setNotice(notice);
+ void refresh();
+ void openRun(run);
+ }}
+ />
+ )}
+ {page === "repositories" && (
+ <>
+
+
+
Your source, connected.
+
+ Register a Git repository to give every run a clear
+ starting point.
+
+
+
void openRun(run)}
+ className="primary"
+ onClick={() => {
+ navigate("settings");
+ setSetupStep(2);
+ }}
>
-
-
-
-
- {run.brief?.split("\n")[0] ||
- "Software generation run"}
-
-
- {repositoryName(run.repository_id)} ·{" "}
- {run.agent || "Agent"} · {run.backend || "Stack"}
-
-
- {date(run.created_at)}
-
- ))}
-
- ) : (
-
navigate(connected ? "new" : "settings")}
+ onClick={() => setDialog(true)}
+ disabled={!connected}
>
- {connected ? "Create a product" : "Connect your API"}
- void openRun(run)}
- onProduct={(id, project) => {
- setRunProject(id);
- navigate("product");
- setProductProject(project);
- }}
- onStart={(context) => {
- setRunProject(context.component.repository_id);
- navigate("new");
- setRunComponent(context);
- }}
- />
- )}
- {page === "product" && (
- {
- navigate("settings");
- setSetupStep(1);
- }}
- connection={connection}
- connected={connected}
- repositories={repositories}
- initialRepository={runProject}
- onStart={startStandalone}
- />
- )}
- {page === "knowledge" && (
- {
- navigate("settings");
- setSetupStep(3);
- }}
- connection={connection}
- connected={connected}
- repositories={repositories}
- />
- )}
- {page === "collaboration" && (
- {
- navigate("settings");
- setSetupStep(2);
- }}
- connection={connection}
- connected={connected}
- repositories={repositories}
- onOpen={(run) => void openRun(run)}
- />
- )}
- {page === "new" && (
- setRunComponent(null)}
- initialRepository={runProject}
- repositories={repositories}
- profiles={profiles}
- connected={connected}
- connection={connection}
- onRepository={() => navigate("repositories")}
- onConnection={() => navigate("settings")}
- onCreated={(run, notice) => {
- setNotice(notice);
- void refresh();
- void openRun(run);
- }}
- />
- )}
- {page === "repositories" && (
- <>
-
-
-
Your source, connected.
-
- Register a Git repository to give every run a clear starting
- point.
-
-
-
+
+
+ {repositories.length ? (
+ repositories.map((repository) => (
+
+
+
+
+
{repository.name}
+
{repository.url}
+
+ {human(repository.provider)}
+
+
+
+
startStandalone(repository.id)}
+ >
+ Start a run
+
+
+ ))
+ ) : (
+
+ connected ? setDialog(true) : navigate("settings")
+ }
+ >
+ {connected ? "Add repository" : "Connect API"}
+
+
+
+ Repository access stays on the server. The factory creates
+ an isolated branch and workspace for each run.
+
+
void refresh()}
+ initialStep={setupStep}
+ repositories={repositories}
+ onDone={() => navigate(setupGoal)}
+ doneLabel={
+ setupGoal === "product"
+ ? "Open product definition"
+ : "Open production floor"
+ }
+ signin={
+ {
+ setConnection({
+ base,
+ token: "",
+ authenticated: false,
+ });
+ setConnected(false);
+ }}
+ />
+ }
+ />
+ )}
+ {page === "admin" && (
+ navigate("settings")}
+ onAssign={(id) => {
+ setAccessUser(id);
+ navigate("access");
+ }}
+ />
+ )}
+ {page === "search" && (
+ navigate("workflow")}
+ />
+ )}
+ {page === "learning" && (
+ setPage("workflow")}
+ />
+ )}
+ {page === "browser-connections" && (
+ navigate("external-tools")}
+ />
+ )}
+ {page === "access" && (
+ navigate("settings")}
+ onUpdated={() => {
+ setAccessUser(undefined);
+ identity.refresh();
+ }}
+ />
+ )}
+ {page === "workflow" && (
+ void openRun(run)}
+ onConfigure={() => navigate("delivery")}
+ />
+ )}
+ {page === "run" && selected && (
+ <>
{
- navigate("settings");
- setSetupStep(2);
- }}
+ className="back quiet"
+ onClick={() => navigate("overview")}
>
- Connect applications
-
- setDialog(true)}
- disabled={!connected}
+
+
+
Run {selected.id}
+
+ {selected.operation === "test"
+ ? "Verify existing behavior"
+ : selected.brief?.split("\n")[0]?.length > 96
+ ? `${selected.brief
+ .split("\n")[0]
+ .slice(0, 96)
+ .replace(/\s+\S*$/, "")}…`
+ : selected.brief?.split("\n")[0] ||
+ "Software generation"}
+
+
+ {repositoryName(selected.repository_id)} ·{" "}
+ {selected.backend} / {selected.frontend} ·{" "}
+ {selected.operation === "test"
+ ? "No coding provider · checks only"
+ : selected.agent}
+
+
+
+
+ Full run brief
+ {selected.brief}
+
+
-
- {repositories.length ? (
- repositories.map((repository) => (
-
-
-
-
-
{repository.name}
-
{repository.url}
-
- {human(repository.provider)}
-
-
-
-
+
+ {working(selected.status) ? (
startStandalone(repository.id)}
+ className="secondary"
+ disabled={
+ busy ||
+ selected.cancel_request?.status === "requested"
+ }
+ onClick={() => void runAction("cancel")}
>
- Start a run
-
-
- ))
- ) : (
-
- connected ? setDialog(true) : navigate("settings")
- }
+ disabled={busy}
+ onClick={() => void runAction("retry")}
>
- {connected ? "Add repository" : "Connect API"}
-
-
-
- Repository access stays on the server. The factory creates an
- isolated branch and workspace for each run.
-
-
void refresh()}
- initialStep={setupStep}
- repositories={repositories}
- onDone={() => navigate(setupGoal)}
- doneLabel={
- setupGoal === "product"
- ? "Open product definition"
- : "Open production floor"
- }
- signin={
- {
- setConnection({ base, token: "", authenticated: false });
- setConnected(false);
- }}
- />
- }
- />
- )}
- {page === "admin" && (
- navigate("settings")}
- onAssign={(id) => {
- setAccessUser(id);
- navigate("access");
- }}
- />
- )}
- {page === "search" && (
- navigate("workflow")}
- />
- )}
- {page === "learning" && (
- setPage("workflow")}
- />
- )}
- {page === "browser-connections" && (
- navigate("external-tools")}
- />
- )}
- {page === "access" && (
- navigate("settings")}
- onUpdated={() => {
- setAccessUser(undefined);
- identity.refresh();
- }}
- />
- )}
- {page === "workflow" && (
- void openRun(run)}
- onConfigure={() => navigate("delivery")}
- />
- )}
- {page === "run" && selected && (
- <>
- navigate("overview")}
- >
-
-
-
-
Run {selected.id}
-
- {selected.operation === "test"
- ? "Verify existing behavior"
- : selected.brief?.split("\n")[0]?.length > 96
- ? `${selected.brief
- .split("\n")[0]
- .slice(0, 96)
- .replace(/\s+\S*$/, "")}…`
- : selected.brief?.split("\n")[0] ||
- "Software generation"}
-
-
- {repositoryName(selected.repository_id)} ·{" "}
- {selected.backend} / {selected.frontend} ·{" "}
- {selected.operation === "test"
- ? "No coding provider · checks only"
- : selected.agent}
-
-
-
-
- Full run brief
- {selected.brief}
-
-
-
-
- {working(selected.status) ? (
-
void runAction("cancel")}
- >
-
- ) : ["failed", "cancelled"].includes(selected.status) &&
- selected.pause?.kind !== "provider_outcome_unknown" ? (
-
void runAction("retry")}
- >
-
- ) : null}
- {selected.status === "succeeded" &&
- selected.operation !== "test" &&
- !selected.pr_url && (
-
void runAction("publish")}
- >
-
+ ) : null}
+ {selected.status === "succeeded" &&
+ selected.operation !== "test" &&
+ !selected.pr_url && (
+
void runAction("publish")}
+ >
+
+ )}
+ {selected.pr_url &&
+ /^https?:\/\//.test(selected.pr_url) && (
+
+ Open pull request
+
+ )}
+
+ {detailError}
+
)}
- {selected.pr_url && /^https?:\/\//.test(selected.pr_url) && (
-
- Open pull request
-
- )}
-
- {detailError && (
-
- {detailError}
-
- )}
- {selected.error && (
-
- {selected.error}
-
+ {selected.error && (
+
+ {selected.error}
+
+ )}
+
{
+ setSelected(run);
+ void refresh();
+ }}
+ />
+ navigate("delivery")}
+ session={identity.session}
+ />
+
)}
- {
- setSelected(run);
- void refresh();
- }}
- />
- navigate("delivery")}
- session={identity.session}
- />
)}
-
+ {
+ const selection: FactorySelection = {
+ kind: "project",
+ project: "a".repeat(32),
+ run: "",
+ view: "floor",
+ };
+ expect(dashboardPath(selection)).toBe(
+ "/factory-dashboard?kind=project&project_id=" + "a".repeat(32),
+ );
+ expect(
+ dashboardPath({ ...selection, kind: "run", run: "b".repeat(32) }),
+ ).toBe("/factory-dashboard?kind=run&run_id=" + "b".repeat(32));
+ expect(dashboardPath({ ...selection, kind: "factory" })).not.toContain(
+ "project_id",
+ );
+});
+
+it("animates only current observed leases and keeps missing or expired observation unknown", () => {
+ const stages = aggregateStations(
+ [
+ {
+ id: "prepare",
+ active: 1,
+ done: 3,
+ failed: 0,
+ waiting: 0,
+ needs_action: 0,
+ skipped: 0,
+ unknown: 0,
+ observed_until: "2026-10-30T00:00:30Z",
+ },
+ {
+ id: "implement",
+ active: 7,
+ done: 0,
+ failed: 2,
+ waiting: 3,
+ needs_action: 4,
+ skipped: 0,
+ unknown: 0,
+ observed_until: "2026-10-30T00:00:30Z",
+ },
+ {
+ id: "verify",
+ active: 0,
+ done: 0,
+ failed: 0,
+ waiting: 0,
+ needs_action: 0,
+ skipped: 0,
+ unknown: 5,
+ },
+ ],
+ "2026-10-30T00:00:00Z",
+ );
+ expect(
+ stages.filter((stage) => stage.state === "active").map((stage) => stage.id),
+ ).toEqual(["prepare", "implement"]);
+ expect(stages.find((stage) => stage.id === "verify")?.state).toBe("unknown");
+ expect(stages.find((stage) => stage.id === "deploy")?.state).toBe("unknown");
+ expect(stages.find((stage) => stage.id === "implement")?.detail).toContain(
+ "7 active",
+ );
+ expect(
+ aggregateStations(
+ [
+ {
+ id: "implement",
+ active: 2,
+ done: 0,
+ failed: 0,
+ waiting: 0,
+ needs_action: 0,
+ skipped: 0,
+ unknown: 0,
+ },
+ ],
+ "2026-10-30T00:00:00Z",
+ )[1].state,
+ ).toBe("unknown");
+ expect(
+ aggregateStations(
+ [
+ {
+ id: "implement",
+ active: 2,
+ done: 0,
+ failed: 0,
+ waiting: 0,
+ needs_action: 0,
+ skipped: 0,
+ unknown: 0,
+ observed_until: "2026-10-30T00:00:30Z",
+ },
+ ],
+ "2026-10-30T00:00:30Z",
+ )[1].state,
+ ).toBe("unknown");
+});
diff --git a/studio/src/FactoryDashboard.ts b/studio/src/FactoryDashboard.ts
new file mode 100644
index 000000000..3d90a5a6f
--- /dev/null
+++ b/studio/src/FactoryDashboard.ts
@@ -0,0 +1,215 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import type { FactoryStation } from "./FactoryScene";
+import { manufacturingStations, type DevelopmentPlan } from "./factory";
+
+export type FactorySelection = {
+ kind: "factory" | "project" | "standalone" | "run";
+ project: string;
+ run: string;
+ view: "floor" | "board";
+ parent?: "factory" | "project" | "standalone";
+};
+export type DashboardStage = {
+ id: string;
+ active: number;
+ done: number;
+ waiting: number;
+ skipped: number;
+ failed: number;
+ needs_action: number;
+ unknown: number;
+ expired?: number;
+ quarantined?: number;
+ observed_until?: string | null;
+ recorded_running?: number;
+};
+export type DashboardRun = {
+ id: string;
+ repository_id: string;
+ project_id: string | null;
+ project_name: string | null;
+ repository_name: string | null;
+ component_id: string | null;
+ component_name: string | null;
+ association: "project" | "standalone" | "project_unavailable";
+ brief: string;
+ brief_truncated: boolean;
+ status: string;
+ active_task?: string | null;
+ branch: string | null;
+ pr_url: string | null;
+ created_at: string | null;
+ issue_context: {
+ url: string | null;
+ title: string | null;
+ number: number | null;
+ } | null;
+};
+export type DashboardProject = {
+ id: string;
+ name: string;
+ component_count: number;
+ repository_count: number;
+};
+export type DashboardSnapshot = {
+ version: 1;
+ scope: {
+ kind: FactorySelection["kind"];
+ project_id: string | null;
+ run_id: string | null;
+ project: DashboardProject | null;
+ };
+ observed_at: string;
+ counts: Record<
+ | "total"
+ | "active"
+ | "queued"
+ | "needs_action"
+ | "completed"
+ | "failed"
+ | "cancelled"
+ | "expired"
+ | "quarantined"
+ | "unknown",
+ number
+ >;
+ associations: {
+ projects: number;
+ standalone_runs: number;
+ repositories_with_runs: number;
+ };
+ stages: DashboardStage[];
+ unmapped_active_tasks: number;
+ runs: { items: DashboardRun[]; next_cursor: string | null };
+ standalone_available: boolean;
+ unavailable_metrics: string[];
+};
+export type DashboardBucket = keyof Omit;
+export const stageLabels: Record = {
+ prepare: "Prepare",
+ implement: "Develop",
+ verify: "Test",
+ checkpoint: "Checkpoint",
+ publish: "Publish",
+ deploy: "Deploy",
+ health: "Health checks",
+};
+
+export function dashboardPath(
+ selection: FactorySelection,
+ cursor?: string | null,
+ bucket?: DashboardBucket | null,
+): string {
+ const query = new URLSearchParams({ kind: selection.kind });
+ if (selection.kind === "project") query.set("project_id", selection.project);
+ if (selection.kind === "run") query.set("run_id", selection.run);
+ if (cursor) query.set("cursor", cursor);
+ if (bucket) query.set("bucket", bucket);
+ return "/factory-dashboard?" + query;
+}
+export function aggregateStations(
+ stages: DashboardStage[],
+ asOf?: string,
+): FactoryStation[] {
+ return Object.entries(stageLabels).map(([id, label]) => {
+ const row = stages.find((item) => item.id === id);
+ const observed = Boolean(
+ row?.active &&
+ row.observed_until &&
+ asOf &&
+ Date.parse(row.observed_until) > Date.parse(asOf),
+ );
+ return {
+ id,
+ label,
+ counts: row
+ ? {
+ active: observed ? row.active : 0,
+ waiting: row.waiting,
+ needs_action: row.needs_action,
+ unknown: row.unknown + (observed ? 0 : row.active),
+ done: row.done,
+ }
+ : undefined,
+ state: observed
+ ? "active"
+ : row?.failed
+ ? "failed"
+ : row?.needs_action
+ ? "paused"
+ : row?.unknown || row?.active || row?.expired || row?.quarantined
+ ? "unknown"
+ : row?.done
+ ? "done"
+ : row?.waiting
+ ? "waiting"
+ : row?.skipped
+ ? "skipped"
+ : "unknown",
+ detail: row
+ ? [
+ observed
+ ? `${row.active.toLocaleString()} active leases observed`
+ : null,
+ row.recorded_running && !observed
+ ? `${row.recorded_running.toLocaleString()} tasks last recorded running; current worker activity unknown`
+ : null,
+ row.waiting ? `${row.waiting.toLocaleString()} queued` : null,
+ row.done ? `${row.done.toLocaleString()} completed` : null,
+ row.failed ? `${row.failed.toLocaleString()} failed` : null,
+ row.needs_action
+ ? `${row.needs_action.toLocaleString()} need action`
+ : null,
+ row.unknown && !row.recorded_running && !observed
+ ? `${row.unknown.toLocaleString()} task activity unknown`
+ : null,
+ row.expired
+ ? `${row.expired.toLocaleString()} expired leases`
+ : null,
+ row.quarantined
+ ? `${row.quarantined.toLocaleString()} quarantined`
+ : null,
+ ]
+ .filter(Boolean)
+ .join(" · ") || "No task records in this scope."
+ : "No stage records in this scope.",
+ };
+ });
+}
+
+export function recordedRunStations(
+ run: DashboardRun | null,
+ plan: DevelopmentPlan | null,
+ observations: DashboardStage[] = [],
+ asOf?: string,
+): FactoryStation[] {
+ if (!run || !plan) return aggregateStations([]);
+ const observed = aggregateStations(observations, asOf);
+ return manufacturingStations(
+ {
+ ...run,
+ pr_url: run.pr_url ?? undefined,
+ active_task: run.active_task ?? undefined,
+ },
+ plan,
+ null,
+ ).map((station) => {
+ const recorded = plan.tasks.some(
+ (task) =>
+ task.id === station.id ||
+ (station.id === "publish" && task.id.startsWith("publish")),
+ );
+ if (
+ !recorded ||
+ (station.state === "active" &&
+ observed.find((item) => item.id === station.id)?.state !== "active")
+ )
+ return {
+ ...station,
+ state: "unknown",
+ detail:
+ "The task is recorded as running; a current owned runner lease is not available.",
+ };
+ return station;
+ });
+}
diff --git a/studio/src/FactoryFloor.css b/studio/src/FactoryFloor.css
index 6da2a68d8..78d62cc5e 100644
--- a/studio/src/FactoryFloor.css
+++ b/studio/src/FactoryFloor.css
@@ -45,10 +45,10 @@
}
.production-floor .factory-live-viewport {
min-height: 180px;
- height: clamp(180px, calc(100dvh - 560px), 320px);
+ height: var(--factory-available-height, 52vh);
}
.production-floor .production-inspector {
- padding: 16px 20px;
+ padding: 12px 20px;
}
.production-guide {
padding: 16px 20px;
@@ -87,7 +87,508 @@
.production-floor .production-view-switch {
padding-bottom: 4px;
}
- .production-floor .factory-live-viewport {
- height: clamp(180px, calc(100dvh - 650px), 240px);
+}
+
+.production-dashboard .factory-scope-caption {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ padding: 8px 20px;
+ border-bottom: 1px solid var(--line);
+}
+.factory-scope-caption > div {
+ min-width: 0;
+ display: flex;
+ align-items: baseline;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+.factory-scope-caption h2 {
+ font-size: 20px;
+ line-height: 1.4;
+ margin: 0;
+ overflow-wrap: anywhere;
+}
+.factory-scope-caption p {
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.6;
+ margin: 0;
+}
+.production-dashboard .factory-live-stations {
+ display: flex;
+ overflow-x: auto;
+ gap: 0;
+ background: var(--surface);
+ scroll-padding: 12px;
+}
+.factory-stage-navigation {
+ display: flex;
+ min-width: 0;
+}
+.factory-stage-navigation > .factory-live-stations {
+ flex: 1;
+ min-width: 0;
+}
+.factory-stage-more {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ min-width: 44px;
+ border-block: 1px solid var(--line);
+ border-left: 1px solid var(--line);
+ border-radius: 0;
+ background: var(--surface);
+ color: var(--accent-ink);
+ font-size: 11px;
+}
+.production-dashboard .factory-live-station {
+ flex: 1 0 120px;
+ border-right: 1px solid var(--line);
+ min-height: 68px;
+ padding: 10px 12px;
+ gap: 5px;
+ border-bottom: 3px solid transparent;
+}
+.production-dashboard .factory-live-station[aria-pressed="true"] {
+ border-bottom-color: var(--accent-ink);
+}
+.production-dashboard .factory-live-station.active:not([aria-pressed="true"]) {
+ background: var(--surface);
+}
+.production-context-dock {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ border-block: 1px solid var(--line);
+}
+.production-context-dock > button {
+ flex: 0 0 auto;
+}
+.production-context-dock nav {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ gap: 6px;
+ min-width: 0;
+ font-size: 13px;
+}
+.production-context-dock nav span {
+ overflow-wrap: anywhere;
+}
+.production-context-dock nav > svg {
+ flex-shrink: 0;
+}
+.production-context-dock nav code {
+ font-size: 12px;
+}
+.factory-view-toggle {
+ display: flex;
+ flex: 0 0 auto;
+ gap: 4px;
+}
+.factory-view-toggle button {
+ min-width: 44px;
+ min-height: 44px;
+ width: auto;
+ padding-inline: 10px;
+ font-size: 13px;
+ gap: 6px;
+}
+.factory-view-toggle [aria-pressed="true"] {
+ background: var(--accent-soft);
+ color: var(--accent-ink);
+}
+.factory-inspection {
+ display: grid;
+ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+ gap: 24px;
+ padding: 12px 20px;
+}
+.factory-inspection h3 {
+ font-size: 20px;
+ margin: 0 0 4px;
+}
+.factory-inspection p {
+ font-size: 13px;
+ line-height: 1.7;
+ color: var(--muted);
+ max-width: 70ch;
+}
+.factory-run-counts {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 12px;
+ margin: 0;
+}
+.factory-counts-title {
+ font-size: 12px;
+ margin: 0 0 4px;
+ font-weight: 600;
+}
+.factory-run-counts dt {
+ font-size: 12px;
+ color: var(--muted);
+ line-height: 1.5;
+ min-height: 18px;
+}
+.factory-run-counts dd {
+ margin: 0;
+}
+.factory-run-counts dd button {
+ font-size: 24px;
+ font-weight: 600;
+ padding: 0;
+ font-variant-numeric: tabular-nums;
+ min-height: 44px;
+}
+.factory-observation-time {
+ margin: 8px 0 0;
+ font-size: 12px;
+}
+.factory-terminal-counts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px 24px;
+ margin-bottom: 0;
+}
+.factory-terminal-counts > div {
+ display: flex;
+ gap: 8px;
+}
+.factory-terminal-counts dd {
+ margin: 0;
+ font-variant-numeric: tabular-nums;
+}
+.factory-empty,
+.factory-observation-loading {
+ padding: 20px;
+ color: var(--muted);
+ font-size: 14px;
+ line-height: 1.7;
+}
+.factory-observation-loading {
+ min-height: 100px;
+}
+.factory-run-actions {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ align-items: center;
+ padding: 0 20px 20px;
+}
+.factory-source-links {
+ display: grid;
+ gap: 8px;
+ margin: 16px 0;
+ font-size: 13px;
+}
+.factory-source-links > div {
+ display: grid;
+ grid-template-columns: 100px minmax(0, 1fr);
+ gap: 12px;
+}
+.factory-source-links dt {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--muted);
+}
+.factory-source-links dd {
+ margin: 0;
+ overflow-wrap: anywhere;
+}
+.factory-source-links a {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+.factory-records-anchor {
+ scroll-margin-top: 20px;
+}
+.factory-records {
+ padding: 24px 20px;
+ border-top: 1px solid var(--line);
+ min-width: 0;
+}
+.factory-records-heading {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ gap: 20px;
+ margin-bottom: 16px;
+}
+.factory-records-heading h3 {
+ font-size: 18px;
+ margin: 0 0 4px;
+}
+.factory-records-heading p {
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.6;
+ margin: 0;
+}
+.factory-run-record {
+ padding: 20px 0;
+ border-bottom: 1px solid var(--line);
+ min-width: 0;
+}
+.factory-run-record > header {
+ display: flex;
+ align-items: start;
+ gap: 24px;
+ justify-content: space-between;
+}
+.factory-run-record h4 {
+ font-size: 16px;
+ line-height: 1.5;
+ margin: 4px 0;
+ overflow-wrap: anywhere;
+}
+.factory-run-record small {
+ color: var(--muted);
+ font-size: 12px;
+}
+.factory-record-status {
+ flex-shrink: 0;
+ color: var(--muted);
+ font-size: 12px;
+ border: 1px solid var(--line);
+ padding: 4px 8px;
+}
+.factory-preview-note {
+ font-size: 12px;
+ color: var(--muted);
+}
+.factory-component-label {
+ margin: 4px 0;
+ font-size: 13px;
+ color: var(--muted);
+ overflow-wrap: anywhere;
+}
+.factory-run-record > footer {
+ display: flex;
+ gap: 12px;
+ justify-content: flex-end;
+}
+.factory-records-pager,
+.factory-project-pager {
+ display: flex;
+ gap: 12px;
+ justify-content: space-between;
+ padding-top: 16px;
+}
+.factory-status-board {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: minmax(260px, 1fr);
+ gap: 20px;
+ overflow-x: auto;
+ padding-bottom: 16px;
+}
+.factory-board-lane {
+ min-width: 0;
+ background: var(--surface-subtle);
+ padding: 12px;
+}
+.factory-board-lane > header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+.factory-board-lane > header h4 {
+ font-size: 14px;
+}
+.factory-board-lane > p {
+ font-size: 13px;
+ color: var(--muted);
+ line-height: 1.6;
+}
+.factory-board-lane .factory-run-record > header {
+ flex-wrap: wrap;
+ gap: 8px;
+}
+.factory-board-lane .factory-run-record > footer {
+ flex-wrap: wrap;
+}
+.factory-board-lane .factory-source-links > div {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 4px;
+}
+.app .workspace-main main .factory-work-drawer:modal {
+ margin: 0;
+ inset-inline: calc(var(--sidebar-width) + 16px) auto;
+ width: min(380px, calc(100vw - var(--sidebar-width) - 32px));
+ height: calc(var(--shell-content-height, 100dvh) - 16px);
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ color: var(--text);
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 12px;
+}
+.factory-work-drawer:not([open]) {
+ display: none;
+}
+.factory-work-drawer::backdrop {
+ background: #0006;
+}
+.factory-work-drawer > header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding-bottom: 16px;
+}
+.factory-work-drawer h2 {
+ font-size: 24px;
+ margin: 0;
+}
+.factory-work-drawer h3 {
+ font-size: 16px;
+ margin: 24px 0 8px;
+}
+.factory-work-drawer > section {
+ min-height: 0;
+ overflow: auto;
+}
+.factory-work-drawer section > p {
+ font-size: 13px;
+ line-height: 1.6;
+ color: var(--muted);
+}
+.factory-scope-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ min-height: 44px;
+ padding: 10px 12px;
+ border: 0;
+ background: none;
+ text-align: left;
+}
+.factory-scope-row[aria-current],
+.factory-project-row[aria-current] {
+ background: var(--accent-soft);
+ color: var(--accent-ink);
+}
+.factory-project-search {
+ display: flex;
+ align-items: end;
+ gap: 8px;
+ margin-block: 16px;
+}
+.factory-project-search .field {
+ flex: 1;
+ min-width: 0;
+ margin: 0;
+}
+.factory-project-search label {
+ font-size: 13px;
+}
+.factory-project-search input {
+ min-width: 0;
+ width: 100%;
+}
+.factory-project-search button {
+ min-height: 44px;
+}
+.factory-project-row {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 20px minmax(0, 1fr) 16px;
+ align-items: center;
+ gap: 12px;
+ padding: 16px 8px;
+ border: 0;
+ border-bottom: 1px solid var(--line);
+ background: none;
+ text-align: left;
+}
+.factory-project-row strong {
+ display: block;
+ font-size: 14px;
+ overflow-wrap: anywhere;
+}
+.factory-project-row small {
+ display: block;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.5;
+ margin-top: 4px;
+}
+@media (max-width: 1100px) {
+ .factory-inspection {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 20px;
+ }
+}
+@media (max-width: 900px) {
+ .app .workspace-main main .factory-work-drawer:modal {
+ inset-inline: 12px auto;
+ width: min(380px, calc(100vw - 24px));
+ }
+}
+@media (max-width: 600px) {
+ .production-dashboard .factory-scope-caption {
+ padding: 12px 16px;
+ gap: 12px;
+ }
+ .factory-scope-caption h2 {
+ font-size: 18px;
+ }
+ .factory-scope-caption > div {
+ gap: 4px;
+ display: block;
+ }
+ .production-dashboard .factory-live-station {
+ flex-basis: 110px;
+ min-height: 70px;
+ }
+ .production-context-dock {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px 12px;
+ padding: 8px 12px;
+ }
+ .production-context-dock > button {
+ justify-self: start;
+ }
+ .production-context-dock nav {
+ grid-column: 1/-1;
+ grid-row: 2;
+ flex-wrap: wrap;
+ }
+ .factory-view-toggle {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .factory-inspection,
+ .factory-records {
+ padding: 20px 16px;
+ }
+ .factory-run-counts {
+ gap: 8px;
+ }
+ .factory-run-counts dt {
+ font-size: 12px;
+ }
+ .factory-run-record > header {
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+ .factory-source-links > div {
+ grid-template-columns: 80px minmax(0, 1fr);
+ }
+ .factory-run-actions {
+ padding-inline: 16px;
}
}
diff --git a/studio/src/FactoryFloor.test.tsx b/studio/src/FactoryFloor.test.tsx
index fa96d443f..d79abd4b3 100644
--- a/studio/src/FactoryFloor.test.tsx
+++ b/studio/src/FactoryFloor.test.tsx
@@ -8,20 +8,16 @@ it("keeps a concise floor instruction and an accessible complete stage guide", (
undefined}
- onCreate={() => undefined}
- selection={{ project: "", view: "floor", run: "" }}
+ selection={{ kind: "factory", project: "", view: "floor", run: "" }}
onSelectionChange={() => undefined}
/>,
);
- expect(html).toContain("Select a stage to inspect its work.");
- expect(html).toContain("How stages work ");
- expect(html).toContain("Prepare inspects source");
- expect(html).toContain("separate recorded actions");
+ expect(html).toContain("Factory overview");
+ expect(html).toContain("Browse work");
expect(html).toContain('aria-label="Recorded execution stages"');
- expect(html).toContain("No production is running in this view.");
- expect(html).toContain("Start a run");
+ expect(html).toContain('data-carrier-mode="hidden"');
+ expect(html).not.toContain(" void;
- onCreate: () => void;
+ onOpen: (id: string) => void;
selection: FactorySelection;
onSelectionChange: (selection: FactorySelection) => void;
}) {
- const projectLabels = repositoryLabels(repositories);
- const { project, view, run: chosenRun } = selection;
- const activeProject =
- repositories.find((item) => item.id === project)?.id ??
- repositories.find((item) => item.id === runs[0]?.repository_id)?.id ??
- repositories[0]?.id ??
- "";
- const [selectedStation, setStation] = useState("prepare");
- const [planRun, setPlanRun] = useState("");
- const [plan, setPlan] = useState(null);
- const [deployments, setDeployments] = useState([]);
- const [error, setError] = useState("");
- const [refresh, setRefresh] = useState(0);
- const projectRuns = runs.filter(
- (run) => Boolean(activeProject) && run.repository_id === activeProject,
+ const [drawer, setDrawer] = useState(false);
+ const [, tick] = useState(0);
+ const [stationId, setStationId] = useState("prepare");
+ const [paging, setPaging] = useState<{
+ scope: string;
+ cursor: string | null;
+ history: (string | null)[];
+ bucket: DashboardBucket | null;
+ }>({ scope: "", cursor: null, history: [], bucket: null });
+ const scope = JSON.stringify([
+ selection.kind,
+ selection.project,
+ selection.run,
+ ]);
+ const page =
+ paging.scope === scope
+ ? paging
+ : { scope, cursor: null, history: [], bucket: null };
+ const data = useFactoryDashboard(
+ connection,
+ connected,
+ selection,
+ page.cursor,
+ page.bucket,
);
+ const [plan, setPlan] = useState<{
+ run: string;
+ value: DevelopmentPlan | null;
+ error: string;
+ }>({ run: "", value: null, error: "" });
+ const records = useRef(null);
const run =
- projectRuns.find((item) => item.id === chosenRun) ??
- projectRuns.find(
- (item) => !["succeeded", "failed", "cancelled"].includes(item.status),
- ) ??
- projectRuns[0] ??
- null;
- const runId = run?.id;
- useEffect(() => {
- if (project !== activeProject || chosenRun !== (runId ?? ""))
- onSelectionChange({
- ...selection,
- project: activeProject,
- run: runId ?? "",
- });
- }, [activeProject, chosenRun, onSelectionChange, project, runId, selection]);
+ selection.kind === "run"
+ ? (data.snapshot?.runs.items.find((item) => item.id === selection.run) ??
+ null)
+ : null;
useEffect(() => {
- if (!connected || !runId) return;
- const controller = new AbortController();
- const identifier = runId;
- async function update() {
- try {
- const [currentPlan, jobs] = await Promise.all([
- request(connection, `/runs/${identifier}/plan`, {
- signal: controller.signal,
- }),
- request(connection, "/deployments", {
- signal: controller.signal,
- }),
- ]);
- if (!controller.signal.aborted) {
- setPlanRun(identifier);
- setPlan(Array.isArray(currentPlan.tasks) ? currentPlan : null);
- setDeployments(
- Array.isArray(jobs)
- ? jobs.filter((job) => job.run_id === identifier)
- : [],
- );
- setError("");
- }
- } catch (cause) {
+ if (!connected || selection.kind !== "run" || !run) return;
+ const controller = new AbortController(),
+ id = run.id;
+ void request(
+ connection,
+ `/runs/${encodeURIComponent(id)}/plan`,
+ { signal: controller.signal },
+ )
+ .then((value) => {
+ if (!Array.isArray(value.tasks))
+ throw new Error("The current plan is unavailable.");
+ if (!controller.signal.aborted) setPlan({ run: id, value, error: "" });
+ })
+ .catch((cause) => {
if (!controller.signal.aborted)
- setError(
- cause instanceof Error
- ? cause.message
- : "The production record could not be loaded.",
- );
- }
- }
- void update();
- const timer = window.setInterval(() => void update(), 2500);
- return () => {
- controller.abort();
- window.clearInterval(timer);
- };
- }, [connected, connection, runId, refresh]);
- const currentPlan = planRun === runId ? plan : null;
- const stations = manufacturingStations(
+ setPlan({
+ run: id,
+ value: null,
+ error:
+ cause instanceof Error
+ ? cause.message
+ : "The current plan could not be read.",
+ });
+ });
+ return () => controller.abort();
+ }, [
+ connection,
+ connected,
+ selection.kind,
+ selection.run,
run,
- currentPlan,
- deployments.find((job) => job.run_id === runId) ?? null,
- );
+ data.snapshot?.observed_at,
+ ]);
+ const currentPlan = run && plan.run === run.id ? plan.value : null;
+ useEffect(() => {
+ if (
+ !data.snapshot?.stages.some(
+ (stage) => stage.active && stage.observed_until,
+ )
+ )
+ return;
+ const timer = window.setInterval(() => tick((value) => value + 1), 1000);
+ return () => window.clearInterval(timer);
+ }, [data.snapshot]);
+ const asOf =
+ data.snapshot && data.requestStartedAt !== null
+ ? new Date(
+ Date.parse(data.snapshot.observed_at) +
+ Math.max(0, performance.now() - data.requestStartedAt),
+ ).toISOString()
+ : undefined;
+ const stations =
+ selection.kind === "run"
+ ? recordedRunStations(run, currentPlan, data.snapshot?.stages, asOf)
+ : aggregateStations(data.snapshot?.stages ?? [], asOf);
const selected =
- stations.find((station) => station.id === selectedStation) ?? stations[0];
- const completed =
- currentPlan?.tasks.filter((task) => task.status === "done").length ?? 0;
+ stations.find((item) => item.id === stationId) ?? stations[0];
+ const title =
+ selection.kind === "factory"
+ ? "Factory overview"
+ : selection.kind === "standalone"
+ ? "Standalone repository work"
+ : selection.kind === "project"
+ ? data.snapshot?.scope.project?.name || "Product project"
+ : "Run " + selection.run.slice(0, 8);
+ function choose(value: FactorySelection) {
+ setDrawer(false);
+ setPlan({ run: "", value: null, error: "" });
+ setStationId("prepare");
+ onSelectionChange(value);
+ }
+ function focus(value: DashboardRun) {
+ choose({
+ ...selection,
+ kind: "run",
+ project: value.project_id ?? "",
+ run: value.id,
+ parent: selection.kind === "run" ? selection.parent : selection.kind,
+ });
+ }
+ function bucket(value: DashboardBucket | null) {
+ setPaging({ scope, cursor: null, history: [], bucket: value });
+ records.current?.scrollIntoView({ block: "start" });
+ }
return (
-
-
-
-
+
-
- Project
- {
- onSelectionChange({
- ...selection,
- project: event.target.value,
- run: "",
- });
- setPlan(null);
- setDeployments([]);
- }}
- >
- {!repositories.length && (
- No connected projects
- )}
- {repositories.map((item) => (
-
- {projectLabels.get(item.id)}
-
- ))}
-
-
-
- Manufacturing run
- {
- onSelectionChange({ ...selection, run: event.target.value });
- setPlan(null);
- setDeployments([]);
- }}
- >
-
- {projectRuns.length ? "Choose a run" : "No recorded runs"}
-
- {projectRuns.map((item) => (
-
- {item.id.slice(0, 8)} ·{" "}
- {item.brief.split("\n")[0].length > 52
- ? `${item.brief
- .split("\n")[0]
- .slice(0, 48)
- .replace(/\s+\S*$/, "")}…`
- : item.brief.split("\n")[0]}
-
- ))}
-
-
-
- {run
- ? `${run.status.replaceAll("_", " ")} · ${completed}/${currentPlan?.tasks.length ?? 0} tasks recorded`
- : connected
- ? "Ready for your first run"
- : "Connect your factory to see live work"}
-
-
- Select a stage to inspect its work.
-
-
+
+ {selection.view === "floor" && (
+
sum + (stage.counts?.active ?? (stage.state === "active" ? 1 : 0)), 0).toLocaleString()} observed active tasks`} · Updated ${new Date(data.snapshot.observed_at).toLocaleTimeString()}${data.error ? " · updates unavailable" : ""}`
+ : data.loading
+ ? "Reading factory records…"
+ : "Observation unavailable"
+ }
+ suspended={
+ !connected ||
+ !data.snapshot ||
+ Boolean(data.error) ||
+ (selection.kind === "run" && !currentPlan)
+ }
+ />
+ )}
+
onSelectionChange({ ...selection, view: "floor" })}
+ className="secondary"
+ onClick={() => setDrawer(true)}
+ disabled={!connected}
>
- Floor
+
-
onSelectionChange({ ...selection, view: "board" })}
+
+ {selection.kind === "factory" ? (
+ All projects and standalone work
+ ) : (
+
+ choose({
+ kind: "factory",
+ project: "",
+ run: "",
+ view: selection.view,
+ })
+ }
+ >
+ Factory
+
+ )}
+ {selection.kind !== "factory" && (
+ <>
+
+ {selection.kind === "project"
+ ? data.snapshot?.scope.project?.name || "Product project"
+ : selection.kind === "standalone"
+ ? "Standalone work"
+ : run?.project_name ||
+ (run?.association === "standalone"
+ ? "Standalone run"
+ : "Run")}
+
+
+ )}
+ {selection.kind === "run" && (
+ {selection.run.slice(0, 8)}
+ )}
+
+
- Board
-
+ onSelectionChange({ ...selection, view: "floor" })}
+ >
+ Floor
+
+ onSelectionChange({ ...selection, view: "board" })}
+ >
+
+ Board
+
+
- {view === "board" ? (
- onSelectionChange({ ...selection, run })}
- />
- ) : (
+ {data.error && (
+
+ {data.error}
+ {data.snapshot && (
+
+ Showing the previous observation. Machinery is paused until a
+ fresh read succeeds.
+
+ )}
+
+ Try reading again
+
+
+ Sign in to read the factory's authorized work.
+
+ )}
+ {data.loading && !data.snapshot && (
+
+ Reading factory records…
+
+ )}
+ {data.snapshot && (
<>
-
+
-
{selected.label}
-
- {selected.state}
-
+
+ {selection.view === "floor"
+ ? `${selected.label} tasks`
+ : "Recorded work"}
+
- {run
+ {selection.view === "floor"
? selected.detail
- : "Stations become active when the factory records work. No production is running in this view."}
+ : "Board totals cover the selected scope. Cards are paged; opening a state reads its matching records."}
+ {run &&
}
+
+
Runs in this scope
+
+ {(["active", "queued", "needs_action", "unknown"] as const).map(
+ (key) => (
+
+
{bucketLabels[key]}
+
+ bucket(key)}
+ aria-label={`Show ${bucketLabels[key].toLowerCase()} runs`}
+ >
+ {data.snapshot!.counts[key].toLocaleString()}
+
+
+
+ ),
+ )}
+
onOpen(run)}>
- Inspect run
-
+ {selection.kind === "run" && (
+
+
+ choose({
+ kind: selection.parent ?? "factory",
+ project: selection.project,
+ run: "",
+ view: selection.view,
+ })
+ }
+ >
+
- ) : (
-
- Start a run
- onOpen(selection.run)}
+ >
+ Open this run
+
+ {plan.run === selection.run && plan.error && (
+
+ Plan unavailable: {plan.error}. No single-run carrier is
+ shown.
+
+ )}
+
+ )}
+
+ How to read this view
+
+ Counts cover every authorized record in this scope, not just the
+ current page. A product project can span several component
+ repositories; standalone work remains separate. Aggregate views
+ use no single-run carrier. Open a run to inspect its exact plan,
+ branch, ticket and PR.
+
+
+ Prepare inspects source, Develop uses the selected provider, Test
+ records checks and Checkpoint records source. Publish, Deploy and
+ Health checks require separate recorded actions. A stored active
+ state does not prove that a worker is alive. Per-run worker
+ liveness is unavailable in this deployment, so machines stay still
+ and running task records show unknown activity. Queue duration,
+ live deployment health and runtime metrics are also unavailable.
+
+ {data.snapshot.unmapped_active_tasks > 0 && (
+
+ {data.snapshot.unmapped_active_tasks.toLocaleString()} recorded
+ active tasks have no known station mapping.
+
)}
-
+ {(
+ [
+ "completed",
+ "failed",
+ "cancelled",
+ "expired",
+ "quarantined",
+ ] as const
+ ).map((key) => (
+
+
{bucketLabels[key]}
+ {data.snapshot!.counts[key].toLocaleString()}
+
+ ))}
+
+
+
+ 0}
+ onBucket={bucket}
+ onPrevious={() =>
+ setPaging({
+ ...page,
+ scope,
+ cursor: page.history.at(-1) ?? null,
+ history: page.history.slice(0, -1),
+ })
+ }
+ onNext={() =>
+ setPaging({
+ ...page,
+ scope,
+ cursor: data.snapshot!.runs.next_cursor,
+ history: [...page.history, page.cursor],
+ })
+ }
+ onFocus={focus}
+ onOpen={onOpen}
+ />
+
)}
-
- How stages work
-
- Prepare inspects source, Develop uses the coding provider, Test
- records executable checks, and Checkpoint freezes verified source.
- Publish, Deploy and Health checks require separate recorded actions.
-
-
- {error && (
-
- {error}
-
- )}
+ setDrawer(false)}
+ />
);
}
diff --git a/studio/src/FactoryMotion.test.ts b/studio/src/FactoryMotion.test.ts
index 37e8ff712..52c2630fd 100644
--- a/studio/src/FactoryMotion.test.ts
+++ b/studio/src/FactoryMotion.test.ts
@@ -7,12 +7,43 @@ import {
NumberKeyframeTrack,
} from "three";
import type { FactoryStation } from "./FactoryScene";
-import { FactoryMotion, syncStationClips } from "./FactoryMotion";
+import {
+ FactoryMotion,
+ syncStationClips,
+ aggregateActiveStations,
+} from "./FactoryMotion";
const layout = [
{ id: "prepare", x: 0 },
{ id: "implement", x: 4 },
{ id: "verify", x: 8 },
];
+it("runs several aggregate machines without treating a paused neighbour as a global stop", () => {
+ const observed = [
+ { id: "prepare", label: "Prepare", state: "active", detail: "1 active" },
+ { id: "implement", label: "Develop", state: "active", detail: "4 active" },
+ { id: "verify", label: "Test", state: "paused", detail: "2 paused" },
+ ] as FactoryStation[];
+ const active = aggregateActiveStations(observed, {});
+ expect([...active]).toEqual(["prepare", "implement"]);
+ const mixer = new AnimationMixer(new Object3D());
+ const actions = new Map(
+ layout.map(({ id }) => [
+ id,
+ mixer.clipAction(new AnimationClip(id, 1, [])),
+ ]),
+ );
+ syncStationClips(actions, active);
+ mixer.update(0.1);
+ expect(actions.get("prepare")?.time).toBeGreaterThan(0);
+ expect(actions.get("implement")?.time).toBeGreaterThan(0);
+ expect(actions.get("verify")?.time).toBe(0);
+ for (const gate of ["hidden", "offscreen", "suspended", "reduced"] as const) {
+ const held = aggregateActiveStations(observed, { [gate]: true });
+ expect(held.size).toBe(0);
+ syncStationClips(actions, held);
+ expect([...actions.values()].every((action) => action.paused)).toBe(true);
+ }
+});
function stations(
active: string,
state: FactoryStation["state"] = "active",
diff --git a/studio/src/FactoryMotion.ts b/studio/src/FactoryMotion.ts
index deda8b530..eca251a69 100644
--- a/studio/src/FactoryMotion.ts
+++ b/studio/src/FactoryMotion.ts
@@ -86,12 +86,29 @@ export class FactoryMotion {
export function syncStationClips(
actions: ReadonlyMap,
- workingStation: string | null,
+ workingStation: string | ReadonlySet | null,
) {
for (const [id, action] of actions) {
- if (id === workingStation) {
+ if (
+ typeof workingStation === "string"
+ ? id === workingStation
+ : workingStation?.has(id)
+ ) {
if (!action.isScheduled()) action.play();
action.paused = false;
} else action.paused = true;
}
}
+
+export function aggregateActiveStations(
+ stations: readonly FactoryStation[],
+ gates: MotionGates,
+): ReadonlySet {
+ return new Set(
+ Object.values(gates).some(Boolean)
+ ? []
+ : stations
+ .filter((station) => station.state === "active")
+ .map((station) => station.id),
+ );
+}
diff --git a/studio/src/FactoryRunRecords.tsx b/studio/src/FactoryRunRecords.tsx
new file mode 100644
index 000000000..b1ebb0ac7
--- /dev/null
+++ b/studio/src/FactoryRunRecords.tsx
@@ -0,0 +1,253 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import {
+ ArrowRight,
+ ArrowUpRight,
+ ChevronLeft,
+ ChevronRight,
+ GitBranch,
+ Rows3,
+} from "lucide-react";
+import { safeExternalLink } from "./FeatureLinks";
+import type {
+ DashboardBucket,
+ DashboardRun,
+ DashboardSnapshot,
+} from "./FactoryDashboard";
+
+export const bucketLabels: Record = {
+ active: "Recorded running",
+ queued: "Queued",
+ needs_action: "Needs action",
+ completed: "Completed",
+ failed: "Failed",
+ cancelled: "Cancelled",
+ expired: "Expired",
+ quarantined: "Quarantined",
+ unknown: "Unknown state",
+};
+
+export function FactoryRunLinks({ run }: { run: DashboardRun }) {
+ const issue = safeExternalLink(run.issue_context?.url),
+ pull = safeExternalLink(run.pr_url);
+ return (
+
+
+
+
+ {run.branch ? {run.branch} : "Not recorded"}
+
+ {run.issue_context && (
+
+ )}
+ {pull && (
+
+ )}
+
+ );
+}
+
+export function FactoryRunRecords({
+ snapshot,
+ board,
+ bucket,
+ loading,
+ canPrevious,
+ onBucket,
+ onPrevious,
+ onNext,
+ onFocus,
+ onOpen,
+}: {
+ snapshot: DashboardSnapshot;
+ board: boolean;
+ bucket: DashboardBucket | null;
+ loading: boolean;
+ canPrevious: boolean;
+ onBucket: (value: DashboardBucket | null) => void;
+ onPrevious: () => void;
+ onNext: () => void;
+ onFocus: (run: DashboardRun) => void;
+ onOpen: (id: string) => void;
+}) {
+ const entries = Object.entries(bucketLabels) as [DashboardBucket, string][];
+ const total = bucket ? snapshot.counts[bucket] : snapshot.counts.total;
+ function record(run: DashboardRun) {
+ return (
+
+
+
+ {run.component_name || run.component_id || "Component not recorded"} ·{" "}
+ {run.repository_name || "Repository name unavailable"}
+
+
+ onFocus(run)}>
+ Focus run
+
+ onOpen(run.id)}>
+ Open run
+
+
+
+ );
+ }
+ return (
+
+
+
+ {board
+ ? entries.map(([key, label]) => (
+
+
+ {label}
+ onBucket(key)}
+ >
+ {snapshot.counts[key].toLocaleString()}
+
+
+ {snapshot.runs.items
+ .filter((run) => recordBucket(run.status) === key)
+ .map(record)}
+ {snapshot.counts[key] > 0 &&
+ !snapshot.runs.items.some(
+ (run) => recordBucket(run.status) === key,
+ ) && (
+
+ No matching card is on this page. Open this state to page
+ through its records.
+
+ )}
+
+ ))
+ : snapshot.runs.items.map(record)}
+
+ No recorded runs are visible in this scope{bucket ? " and state" : ""}
+ . This does not establish that other projects have no work.
+
+ )}
+
+
+
+
+ Next page
+
+
+
+ );
+}
+
+export function recordBucket(status: string): DashboardBucket {
+ if (["queued", "pending"].includes(status)) return "queued";
+ if (
+ [
+ "running",
+ "cloning",
+ "preparing",
+ "generating",
+ "developing",
+ "executing",
+ "verifying",
+ "validating",
+ "publishing",
+ "deploying",
+ ].includes(status)
+ )
+ return "active";
+ if (
+ [
+ "paused",
+ "interrupted",
+ "needs_reconciliation",
+ "awaiting_input",
+ ].includes(status)
+ )
+ return "needs_action";
+ if (["succeeded", "completed"].includes(status)) return "completed";
+ if (["failed", "cancelled", "expired", "quarantined"].includes(status))
+ return status as DashboardBucket;
+ return "unknown";
+}
diff --git a/studio/src/FactoryScene.tsx b/studio/src/FactoryScene.tsx
index e8ccadb63..f22cf6e1f 100644
--- a/studio/src/FactoryScene.tsx
+++ b/studio/src/FactoryScene.tsx
@@ -1,6 +1,6 @@
/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Focus, Maximize2 } from "lucide-react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronRight, Focus, Maximize2 } from "lucide-react";
import type {
AnimationAction,
Object3D,
@@ -8,13 +8,26 @@ import type {
MeshStandardMaterial,
} from "three";
import "./FactoryScene.css";
-import { FactoryMotion, syncStationClips } from "./FactoryMotion";
+import { factoryViewportHeight, overviewCameraOffset } from "./FactoryViewport";
+import {
+ FactoryMotion,
+ syncStationClips,
+ aggregateActiveStations,
+} from "./FactoryMotion";
export type FactoryStation = {
id: string;
label: string;
- state: "waiting" | "active" | "done" | "failed" | "paused" | "skipped";
+ state:
+ "waiting" | "active" | "done" | "failed" | "paused" | "skipped" | "unknown";
detail: string;
+ counts?: {
+ active: number;
+ waiting: number;
+ needs_action: number;
+ unknown: number;
+ done: number;
+ };
};
export type FactorySceneProps = {
stations: FactoryStation[];
@@ -22,6 +35,8 @@ export type FactorySceneProps = {
onSelect: (id: string) => void;
selectedId: string | null;
suspended?: boolean;
+ aggregate?: boolean;
+ observationLabel?: string;
};
type Model = {
version: number;
@@ -50,6 +65,51 @@ async function loadModel(signal: AbortSignal): Promise {
export function FactoryScene(props: FactorySceneProps) {
const viewport = useRef(null);
+ const rail = useRef(null);
+ const railId = useId();
+ const [moreStages, setMoreStages] = useState(false);
+ useLayoutEffect(() => {
+ const node = rail.current;
+ if (!node) return;
+ const measure = () =>
+ setMoreStages(node.scrollWidth - node.clientWidth - node.scrollLeft > 2);
+ measure();
+ const resize = new ResizeObserver(measure);
+ resize.observe(node);
+ node.addEventListener("scroll", measure, { passive: true });
+ return () => {
+ resize.disconnect();
+ node.removeEventListener("scroll", measure);
+ };
+ }, [props.stations.length]);
+ useLayoutEffect(() => {
+ const node = viewport.current;
+ const main = node?.closest("main");
+ if (!node || !main || !node.closest(".production-floor")) return;
+ let pending = 0;
+ const measure = () => {
+ node.style.setProperty(
+ "--factory-available-height",
+ `${factoryViewportHeight(main.clientHeight, main.clientWidth)}px`,
+ );
+ };
+ const schedule = () => {
+ if (!pending)
+ pending = requestAnimationFrame(() => {
+ pending = 0;
+ measure();
+ });
+ };
+ measure();
+ const resize = new ResizeObserver(schedule);
+ resize.observe(main);
+ window.addEventListener("resize", schedule);
+ return () => {
+ resize.disconnect();
+ window.removeEventListener("resize", schedule);
+ if (pending) cancelAnimationFrame(pending);
+ };
+ }, []);
const current = useRef({ ...props, focusSelected: false });
const controller = useRef(null);
const [rendererType, setRendererType] = useState<"loading" | "webgl" | "svg">(
@@ -58,7 +118,11 @@ export function FactoryScene(props: FactorySceneProps) {
const [reason, setReason] = useState("");
const [generation, setGeneration] = useState(0);
const [reducedMotion, setReducedMotion] = useState(false);
- const [focusSelected, setFocusSelected] = useState(false);
+ const [focusSelected, setFocusSelected] = useState(
+ () =>
+ typeof window !== "undefined" &&
+ window.matchMedia("(max-width: 600px)").matches,
+ );
useEffect(() => {
const query = matchMedia("(prefers-reduced-motion: reduce)");
const update = () => setReducedMotion(query.matches);
@@ -262,6 +326,27 @@ export function FactoryScene(props: FactorySceneProps) {
);
}
});
+ const geometryCorners = new Map();
+ function corners(root: Object3D) {
+ const retained = geometryCorners.get(root);
+ if (retained) return retained;
+ root.updateWorldMatrix(true, true);
+ const points: import("three").Vector3[] = [];
+ root.traverse((node) => {
+ if (!(node instanceof THREE.Mesh)) return;
+ node.geometry.computeBoundingBox();
+ const box = node.geometry.boundingBox;
+ if (!box) return;
+ for (const x of [box.min.x, box.max.x])
+ for (const y of [box.min.y, box.max.y])
+ for (const z of [box.min.z, box.max.z])
+ points.push(
+ new THREE.Vector3(x, y, z).applyMatrix4(node.matrixWorld),
+ );
+ });
+ geometryCorners.set(root, points);
+ return points;
+ }
function fit() {
if (!renderer || !isVisible()) return;
const width = container!.clientWidth,
@@ -273,31 +358,34 @@ export function FactoryScene(props: FactorySceneProps) {
current.current.focusSelected && current.current.selectedId
? groups.get(current.current.selectedId)
: null;
- const bounds = new THREE.Box3().setFromObject(focused ?? world),
+ const points = corners(focused ?? world);
+ const bounds = new THREE.Box3().setFromPoints(points),
center = bounds.getCenter(new THREE.Vector3());
- camera.position.copy(center).add(new THREE.Vector3(10, 14, 27));
+ camera.position
+ .copy(center)
+ .add(
+ focused
+ ? new THREE.Vector3(12, 20, 30)
+ : new THREE.Vector3(
+ ...overviewCameraOffset(points, width / height),
+ ),
+ );
camera.lookAt(center);
camera.updateMatrixWorld(true);
- const corners = [];
- for (const x of [bounds.min.x, bounds.max.x])
- for (const y of [bounds.min.y, bounds.max.y])
- for (const z of [bounds.min.z, bounds.max.z])
- corners.push(
- new THREE.Vector3(x, y, z).applyMatrix4(
- camera.matrixWorldInverse,
- ),
- );
- const horizontal =
- Math.max(...corners.map((p) => p.x)) -
- Math.min(...corners.map((p) => p.x));
- const vertical =
- Math.max(...corners.map((p) => p.y)) -
- Math.min(...corners.map((p) => p.y));
- const span = Math.max(vertical, horizontal / (width / height)) * 1.18;
- camera.left = (-span * width) / height / 2;
- camera.right = -camera.left;
- camera.top = span / 2;
- camera.bottom = -camera.top;
+ // Fit the visible geometry rather than empty corners of the long factory's world box.
+ const projected = new THREE.Box3();
+ for (const point of points)
+ projected.expandByPoint(
+ point.clone().applyMatrix4(camera.matrixWorldInverse),
+ );
+ const horizontal = projected.max.x - projected.min.x;
+ const vertical = projected.max.y - projected.min.y;
+ const target = projected.getCenter(new THREE.Vector3());
+ const span = Math.max(vertical, horizontal / (width / height)) * 1.1;
+ camera.left = target.x - (span * width) / height / 2;
+ camera.right = target.x + (span * width) / height / 2;
+ camera.top = target.y + span / 2;
+ camera.bottom = target.y - span / 2;
camera.updateProjectionMatrix();
}
function paint(time: number) {
@@ -305,12 +393,22 @@ export function FactoryScene(props: FactorySceneProps) {
if (!renderer || !isVisible()) return;
const delta = Math.min((time - lastTime) / 1000, 0.05);
lastTime = time;
+ const aggregate = current.current.aggregate;
+ const gates = {
+ hidden: window.document.hidden,
+ offscreen,
+ suspended: current.current.suspended,
+ reduced: motionQuery.matches,
+ };
+ motion.update(current.current.stations, gates);
+ const active = aggregateActiveStations(current.current.stations, gates);
const from = motion.x;
- motion.advance(delta);
+ if (!aggregate) motion.advance(delta);
carrier.position.x = motion.x;
- syncStationClips(actions, motion.workingStation);
- if (motion.workingStation) mixer.update(delta);
- if (motion.x !== from)
+ syncStationClips(actions, aggregate ? active : motion.workingStation);
+ if (aggregate ? active.size > 0 : motion.workingStation)
+ mixer.update(delta);
+ if (!aggregate && motion.x !== from)
for (const belt of treadTextures)
if (
Math.max(from, motion.x) >= belt.from &&
@@ -318,7 +416,8 @@ export function FactoryScene(props: FactorySceneProps) {
)
belt.texture.offset.x -= Math.sign(motion.x - from) * delta * 0.6;
renderer.render(scene, camera);
- if (motion.needsMotion) frame = requestAnimationFrame(paint);
+ if (aggregate ? active.size > 0 : motion.needsMotion)
+ frame = requestAnimationFrame(paint);
}
function schedule() {
if (!isVisible()) return;
@@ -373,9 +472,20 @@ export function FactoryScene(props: FactorySceneProps) {
suspended: current.current.suspended,
reduced: motionQuery.matches,
});
- carrier.visible = motion.targetStation !== null;
+ carrier.visible =
+ !current.current.aggregate && motion.targetStation !== null;
carrier.position.x = motion.x;
- syncStationClips(actions, motion.workingStation);
+ syncStationClips(
+ actions,
+ current.current.aggregate
+ ? aggregateActiveStations(stations, {
+ hidden: window.document.hidden,
+ offscreen,
+ suspended: current.current.suspended,
+ reduced: motionQuery.matches,
+ })
+ : motion.workingStation,
+ );
fit();
schedule();
}
@@ -483,6 +593,7 @@ export function FactoryScene(props: FactorySceneProps) {
data-theme={props.theme}
data-reduced-motion={reducedMotion}
data-camera={focusSelected ? "selected-stage" : "overview"}
+ data-carrier-mode={props.aggregate ? "hidden" : "single-run"}
>
{rendererType === "webgl" && (
@@ -510,21 +621,34 @@ export function FactoryScene(props: FactorySceneProps) {
{rendererType === "webgl"
- ? "3D production floor"
+ ? focusSelected
+ ? `${props.stations.find((station) => station.id === props.selectedId)?.label ?? "Selected stage"} · stage view`
+ : "Production floor"
: rendererType === "loading"
? "Loading the 3D production floor"
: "Static factory view"}
- {props.suspended
- ? "Updates unavailable; showing last recorded state"
- : reducedMotion
- ? "Motion reduced"
- : props.stations.some((station) => station.state === "paused")
- ? "Paused"
- : props.stations.some((station) => station.state === "active")
- ? "Recorded work is active"
- : "No active machinery"}
+ {props.observationLabel ??
+ (props.suspended
+ ? "Updates unavailable; showing last recorded state"
+ : reducedMotion
+ ? "Motion reduced"
+ : props.aggregate
+ ? props.stations.some(
+ (station) => station.state === "active",
+ )
+ ? "Recorded tasks are active across runs"
+ : "No recorded active tasks"
+ : props.stations.some(
+ (station) => station.state === "paused",
+ )
+ ? "Paused"
+ : props.stations.some(
+ (station) => station.state === "active",
+ )
+ ? "Recorded work is active"
+ : "No active machinery")}
- {props.stations.map((station, index) => (
+
+
+ {props.stations.map((station, index) => (
+
props.onSelect(station.id)}
+ onKeyDown={(event) => {
+ if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+ event.preventDefault();
+ const buttons =
+ event.currentTarget.parentElement?.querySelectorAll(
+ "button",
+ );
+ buttons?.[
+ (index +
+ (event.key === "ArrowRight" ? 1 : -1) +
+ props.stations.length) %
+ props.stations.length
+ ]?.focus();
+ }
+ }}
+ aria-pressed={props.selectedId === station.id}
+ className={`factory-live-station ${station.state}`}
+ title={station.detail}
+ >
+ {station.label}
+
+ {props.aggregate && station.counts
+ ? station.counts.active ||
+ station.counts.waiting ||
+ station.counts.needs_action
+ ? `${station.counts.active} active${station.counts.waiting ? ` · ${station.counts.waiting} queued` : ""}${station.counts.needs_action ? ` · ${station.counts.needs_action} need action` : ""}`
+ : station.counts.unknown
+ ? `${station.counts.unknown} unknown`
+ : station.counts.done
+ ? `${station.counts.done} completed`
+ : "No stage records"
+ : station.state}
+
+ {station.detail}
+
+ ))}
+ {!props.stations.length && (
+
Choose a run to inspect its recorded execution stages.
+ )}
+
props.onSelect(station.id)}
- onKeyDown={(event) => {
- if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
- event.preventDefault();
- const buttons =
- event.currentTarget.parentElement?.querySelectorAll(
- "button",
- );
- buttons?.[
- (index +
- (event.key === "ArrowRight" ? 1 : -1) +
- props.stations.length) %
- props.stations.length
- ]?.focus();
- }
- }}
- aria-pressed={props.selectedId === station.id}
- className={`factory-live-station ${station.state}`}
- title={station.detail}
+ className="quiet factory-stage-more"
+ aria-label="Show more stages"
+ aria-controls={railId}
+ title="Show more stages"
+ onClick={() =>
+ rail.current?.scrollBy({
+ left: rail.current.clientWidth * 0.75,
+ behavior: reducedMotion ? "instant" : "smooth",
+ })
+ }
>
- {station.label}
- {station.state}
- {station.detail}
+ More
- ))}
- {!props.stations.length && (
- Choose a run to inspect its recorded execution stages.
)}
diff --git a/studio/src/FactoryViewport.test.ts b/studio/src/FactoryViewport.test.ts
new file mode 100644
index 000000000..5f0b730d9
--- /dev/null
+++ b/studio/src/FactoryViewport.test.ts
@@ -0,0 +1,80 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import { expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import * as THREE from "three";
+import { factoryViewportHeight, overviewCameraOffset } from "./FactoryViewport";
+
+it("uses a meaningful share of the actual main area and grows on taller desktop screens", () => {
+ const normal = factoryViewportHeight(760, 1192);
+ const tall = factoryViewportHeight(940, 1672);
+ expect(normal / 760).toBeGreaterThanOrEqual(0.45);
+ expect(normal / 760).toBeLessThanOrEqual(0.55);
+ expect(tall).toBeGreaterThan(normal);
+ expect(tall).toBeGreaterThan(360);
+});
+
+it("keeps a focused phone scene proportional while allowing a short page to scroll", () => {
+ const phone = factoryViewportHeight(660, 390);
+ expect(phone / 660).toBeGreaterThanOrEqual(0.3);
+ expect(phone / 660).toBeLessThanOrEqual(0.4);
+ expect(factoryViewportHeight(260, 375)).toBeGreaterThanOrEqual(180);
+});
+
+it("fills both dimensions with the real factory geometry instead of enlarging empty ground", () => {
+ const asset = JSON.parse(
+ readFileSync(
+ new URL("../public/assets/forge-operational-model.json", import.meta.url),
+ "utf8",
+ ),
+ );
+ asset.object.images = [];
+ asset.object.textures = [];
+ for (const material of asset.object.materials)
+ for (const key of Object.keys(material))
+ if (key.toLowerCase().endsWith("map")) delete material[key];
+ const world = new THREE.ObjectLoader().parse(asset.object);
+ world.updateWorldMatrix(true, true);
+ const points: THREE.Vector3[] = [];
+ world.traverse((node) => {
+ if (!(node instanceof THREE.Mesh)) return;
+ node.geometry.computeBoundingBox();
+ const box = node.geometry.boundingBox!;
+ for (const x of [box.min.x, box.max.x])
+ for (const y of [box.min.y, box.max.y])
+ for (const z of [box.min.z, box.max.z])
+ points.push(
+ new THREE.Vector3(x, y, z).applyMatrix4(node.matrixWorld),
+ );
+ });
+ expect(points.length).toBeGreaterThan(1000);
+ for (const [width, height] of [
+ [1111, 365],
+ [1591, 451],
+ [711, 301],
+ ]) {
+ const camera = new THREE.OrthographicCamera();
+ const center = new THREE.Box3()
+ .setFromPoints(points)
+ .getCenter(new THREE.Vector3());
+ camera.position
+ .copy(center)
+ .add(new THREE.Vector3(...overviewCameraOffset(points, width / height)));
+ camera.lookAt(center);
+ camera.updateMatrixWorld(true);
+ const bounds = new THREE.Box3().setFromPoints(
+ points.map((point) =>
+ point.clone().applyMatrix4(camera.matrixWorldInverse),
+ ),
+ );
+ const span = bounds.getSize(new THREE.Vector3());
+ const fittedHeight = Math.max(span.y, span.x / (width / height)) * 1.1;
+ expect(span.y / fittedHeight).toBeGreaterThanOrEqual(0.85);
+ expect(span.y / fittedHeight).toBeLessThanOrEqual(0.92);
+ expect(span.x / ((fittedHeight * width) / height)).toBeGreaterThanOrEqual(
+ 0.85,
+ );
+ expect(span.x / ((fittedHeight * width) / height)).toBeLessThanOrEqual(
+ 0.92,
+ );
+ }
+});
diff --git a/studio/src/FactoryViewport.ts b/studio/src/FactoryViewport.ts
new file mode 100644
index 000000000..4eb81302e
--- /dev/null
+++ b/studio/src/FactoryViewport.ts
@@ -0,0 +1,52 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+
+export function factoryViewportHeight(
+ mainHeight: number,
+ mainWidth: number,
+): number {
+ // Stage details can scroll below the model rather than consume its remaining height.
+ return Math.max(
+ 180,
+ Math.round(mainHeight * (mainWidth <= 600 ? 0.35 : 0.48)),
+ );
+}
+
+type Point = { x: number; y: number; z: number };
+
+export function overviewCameraOffset(
+ points: readonly Point[],
+ aspect: number,
+): [number, number, number] {
+ const radius = Math.hypot(18, 30);
+ const elevation = Math.atan2(24, radius);
+ function projectedAspect(yaw: number) {
+ const right = [Math.cos(yaw), -Math.sin(yaw)];
+ const up = [
+ -Math.sin(elevation) * Math.sin(yaw),
+ Math.cos(elevation),
+ -Math.sin(elevation) * Math.cos(yaw),
+ ];
+ let minX = Infinity,
+ maxX = -Infinity,
+ minY = Infinity,
+ maxY = -Infinity;
+ for (const point of points) {
+ const x = point.x * right[0] + point.z * right[1];
+ const y = point.x * up[0] + point.y * up[1] + point.z * up[2];
+ minX = Math.min(minX, x);
+ maxX = Math.max(maxX, x);
+ minY = Math.min(minY, y);
+ maxY = Math.max(maxY, y);
+ }
+ return (maxX - minX) / (maxY - minY);
+ }
+ let low = 0,
+ high = Math.PI / 3;
+ for (let step = 0; step < 8; step++) {
+ const middle = (low + high) / 2;
+ if (projectedAspect(middle) > aspect) low = middle;
+ else high = middle;
+ }
+ const yaw = (low + high) / 2;
+ return [radius * Math.sin(yaw), 24, radius * Math.cos(yaw)];
+}
diff --git a/studio/src/FactoryWorkDrawer.tsx b/studio/src/FactoryWorkDrawer.tsx
new file mode 100644
index 000000000..a12adff97
--- /dev/null
+++ b/studio/src/FactoryWorkDrawer.tsx
@@ -0,0 +1,216 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import { useEffect, useRef, useState } from "react";
+import {
+ Box,
+ ChevronLeft,
+ ChevronRight,
+ Factory,
+ FolderGit2,
+ Search,
+ X,
+} from "lucide-react";
+import { request, type Connection } from "./api";
+import type { DashboardProject, FactorySelection } from "./FactoryDashboard";
+
+export function FactoryWorkDrawer({
+ connection,
+ open,
+ standalone,
+ selection,
+ onChoose,
+ onClose,
+}: {
+ connection: Connection;
+ open: boolean;
+ standalone: boolean;
+ selection: FactorySelection;
+ onChoose: (value: FactorySelection) => void;
+ onClose: () => void;
+}) {
+ const dialog = useRef(null);
+ const [query, setQuery] = useState("");
+ const [search, setSearch] = useState("");
+ const [cursor, setCursor] = useState(null);
+ const [history, setHistory] = useState<(string | null)[]>([]);
+ const [result, setResult] = useState<{
+ key: string;
+ items: DashboardProject[];
+ next: string | null;
+ }>({ key: "", items: [], next: null });
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
+ const key = JSON.stringify([search, cursor]);
+ useEffect(() => {
+ if (open && !dialog.current?.open) dialog.current?.showModal();
+ else if (!open) dialog.current?.close();
+ }, [open]);
+ useEffect(() => {
+ if (!open) return;
+ const controller = new AbortController();
+ setLoading(true);
+ setError("");
+ const query = new URLSearchParams({ search });
+ if (cursor) query.set("cursor", cursor);
+ void request<{
+ version: 1;
+ items: DashboardProject[];
+ next_cursor: string | null;
+ }>(connection, "/factory-dashboard/projects?" + query, {
+ signal: controller.signal,
+ })
+ .then((value) => {
+ if (value.version !== 1 || !Array.isArray(value.items))
+ throw new Error(
+ "The server returned an incompatible product-project page.",
+ );
+ if (!controller.signal.aborted)
+ setResult({ key, items: value.items, next: value.next_cursor });
+ })
+ .catch((cause) => {
+ if (!controller.signal.aborted)
+ setError(
+ cause instanceof Error
+ ? cause.message
+ : "Product projects could not be read.",
+ );
+ })
+ .finally(() => {
+ if (!controller.signal.aborted) setLoading(false);
+ });
+ return () => controller.abort();
+ }, [connection, key, open, search, cursor]);
+ const items = result.key === key ? result.items : [];
+ function choose(kind: FactorySelection["kind"], project = "") {
+ onChoose({ kind, project, run: "", view: selection.view });
+ onClose();
+ }
+ return (
+
+
+
+ choose("factory")}
+ >
+ Factory overview
+
+ {standalone && (
+ choose("standalone")}
+ >
+ Standalone repositories
+
+ )}
+
+
+ Product projects
+ Each product can include several components and repositories.
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {items.map((project) => (
+
choose("project", project.id)}
+ >
+
+ {project.name}
+
+ {project.component_count.toLocaleString()}{" "}
+ {project.component_count === 1 ? "component" : "components"} ·{" "}
+ {project.repository_count.toLocaleString()}{" "}
+ {project.repository_count === 1
+ ? "repository"
+ : "repositories"}
+
+
+
+ ))}
+ {!loading && !error && !items.length && (
+
No accessible product projects match this search.
+ )}
+
+ {
+ setCursor(history.at(-1) ?? null);
+ setHistory((values) => values.slice(0, -1));
+ }}
+ >
+
+ {
+ setHistory((values) => [...values, cursor]);
+ setCursor(result.next);
+ }}
+ >
+ Next
+
+
+
+
+ );
+}
diff --git a/studio/src/FoundationFooter.css b/studio/src/FoundationFooter.css
new file mode 100644
index 000000000..38e2340cc
--- /dev/null
+++ b/studio/src/FoundationFooter.css
@@ -0,0 +1,78 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+.foundation-footer {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px 20px;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.6;
+}
+.foundation-credits,
+.foundation-made {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+.foundation-credits {
+ flex-wrap: wrap;
+ gap: 12px;
+}
+.foundation-heart {
+ display: inline-flex;
+ color: var(--accent-ink);
+ animation: foundation-heart-beat 1.6s ease-in-out infinite;
+}
+.foundation-footer a:hover {
+ text-decoration: underline;
+}
+.workspace-main > footer.foundation-footer > .foundation-copyright {
+ display: inline;
+}
+.identity-dialog > .foundation-footer {
+ justify-content: center;
+ text-align: center;
+}
+@keyframes foundation-heart-beat {
+ 0%,
+ 100% {
+ transform: scale(1);
+ }
+ 15% {
+ transform: scale(1.15);
+ }
+ 30% {
+ transform: scale(1);
+ }
+ 45% {
+ transform: scale(1.1);
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ .foundation-heart {
+ animation: none;
+ }
+}
+
+/* Compact dialogs own their viewport; taller dialogs leave room for the shell footer. */
+@media (min-height: 601px) {
+ .app
+ .workspace-main
+ main
+ dialog:modal:not(.identity-dialog):not(.product-assistant-panel) {
+ inset-block: 8px calc(var(--shell-footer-extent, 0px) + 8px);
+ max-height: calc(
+ var(--shell-viewport-height, 100dvh) - var(--shell-footer-extent, 0px) -
+ 16px
+ );
+ }
+}
+
+@media (max-width: 600px) {
+ .app .workspace-main > .foundation-footer {
+ row-gap: 0;
+ }
+ .app .workspace-main > main {
+ padding-top: var(--content-gutter);
+ }
+}
diff --git a/studio/src/FoundationFooter.test.tsx b/studio/src/FoundationFooter.test.tsx
new file mode 100644
index 000000000..1e67cdf2c
--- /dev/null
+++ b/studio/src/FoundationFooter.test.tsx
@@ -0,0 +1,13 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import { renderToStaticMarkup } from "react-dom/server";
+import { expect, it } from "vitest";
+import { FoundationFooter } from "./FoundationFooter";
+it("renders the foundation credit, accessible heart and exact Apache license destination", () => {
+ const html = renderToStaticMarkup((null);
+ useLayoutEffect(() => {
+ if (!version) return;
+ const node = footer.current;
+ const shell = node?.closest(".workspace-main");
+ const header = shell?.querySelector(":scope > header");
+ if (!node || !shell || !header) return;
+ const measure = () => {
+ // Viewport rectangles include CSS zoom; custom lengths use layout pixels.
+ const scale = shell.offsetWidth
+ ? shell.getBoundingClientRect().width / shell.offsetWidth
+ : 1;
+ const top = header.getBoundingClientRect().bottom / scale;
+ const bottom = node.getBoundingClientRect().top / scale;
+ const viewport = innerHeight / scale;
+ shell.style.setProperty("--shell-content-top", `${top}px`);
+ shell.style.setProperty(
+ "--shell-content-height",
+ `${Math.max(0, bottom - top)}px`,
+ );
+ shell.style.setProperty(
+ "--shell-footer-extent",
+ `${Math.max(0, viewport - bottom)}px`,
+ );
+ shell.style.setProperty("--shell-viewport-height", `${viewport}px`);
+ };
+ measure();
+ const observer = new ResizeObserver(measure);
+ observer.observe(node);
+ observer.observe(header);
+ const styles = new MutationObserver(measure);
+ styles.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["style"],
+ });
+ window.addEventListener("resize", measure);
+ return () => {
+ observer.disconnect();
+ styles.disconnect();
+ window.removeEventListener("resize", measure);
+ };
+ }, [version]);
+ return (
+
+
+ © 2026 Firefly Software Foundation
+
+
+
+ Made with{" "}
+
+
+
+
+ Apache 2.0
+
+ {documentation && (
+
+ Documentation
+
+ )}
+
+ {version && v{version} }
+
+ );
+}
diff --git a/studio/src/Identity.css b/studio/src/Identity.css
index 135d9aeeb..7baa827aa 100644
--- a/studio/src/Identity.css
+++ b/studio/src/Identity.css
@@ -17,19 +17,86 @@
gap: 12px;
flex-wrap: wrap;
}
+.identity-copyright {
+ padding-top: 20px;
+ margin-top: 24px;
+ border-top: 1px solid var(--line);
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.6;
+ overflow-wrap: anywhere;
+}
.identity-cookie-note {
font-size: 13px;
line-height: 1.7;
color: var(--muted);
}
.identity-trigger {
- max-width: 220px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ max-width: none;
+ min-height: 44px;
+ padding: 6px 8px;
+ text-align: left;
}
-.identity-trigger span {
+.identity-avatar {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 36px;
+ width: 36px;
+ height: 36px;
+ border: 1px solid var(--accent-line);
+ border-radius: 50%;
+ background: var(--accent-soft);
+ color: var(--accent-ink);
+ font-size: 13px;
+ font-weight: 700;
+}
+.identity-person {
+ display: grid;
+ gap: 2px;
+ min-width: 0;
+ flex: 1;
+}
+.identity-person strong,
+.identity-person small {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+.identity-person strong {
+ font-size: 13px;
+ line-height: 18px;
+ font-weight: 650;
+}
+.identity-person small {
+ font-size: 11px;
+ line-height: 16px;
+ color: var(--muted);
+}
+.identity-trigger > svg {
+ flex: 0 0 auto;
+}
+.sidebar-bottom:has(.identity-menu) {
+ padding: 6px 12px;
+}
+.sidebar-bottom .identity-menu {
+ width: 100%;
+ min-width: 0;
+}
+.identity-preferences {
+ display: grid;
+ gap: 10px;
+ padding-top: 20px;
+ margin-top: 20px;
+ border-top: 1px solid var(--line);
+}
+.app:has(.identity-dialog[open]) .workspace-main > .foundation-footer {
+ visibility: hidden;
+}
.identity-dialog {
width: min(480px, calc(100vw - 32px));
max-height: calc(100dvh - 40px);
@@ -62,25 +129,28 @@
.identity-dialog strong {
font-size: 18px;
}
+.identity-dialog strong,
+.identity-dialog p,
+.identity-dialog code {
+ overflow-wrap: anywhere;
+}
.identity-account-actions {
padding-top: 20px;
border-top: 1px solid var(--line);
margin-top: 24px;
}
@media (max-width: 900px) {
- .identity-trigger {
- min-width: 40px;
- max-width: 40px;
- padding: 0;
- }
- .identity-trigger span {
- display: none;
+ .app > .sidebar > .sidebar-bottom:has(.identity-menu),
+ .sidebar-bottom .identity-menu {
+ display: contents;
}
- .topbar:has(.identity-menu) .connection-mobile-label {
+ .sidebar-bottom .identity-trigger {
display: none;
}
- .topbar:has(.identity-menu) .connection-indicator {
- min-width: 40px;
+ .mobile-account .identity-trigger {
+ display: flex;
+ max-width: none;
+ min-width: 0;
padding: 8px;
}
.identity-dialog {
diff --git a/studio/src/Identity.tsx b/studio/src/Identity.tsx
index ac13c43ef..acb3f10e0 100644
--- a/studio/src/Identity.tsx
+++ b/studio/src/Identity.tsx
@@ -8,14 +8,19 @@ import {
} from "react";
import {
ArrowRight,
+ ArrowLeft,
+ KeyRound,
+ ChevronUp,
LogOut,
RefreshCw,
ShieldCheck,
- UserRound,
X,
} from "lucide-react";
import { ApiError, normalizeBase, post, request, type Connection } from "./api";
import "./Identity.css";
+import { PersonalTokens } from "./PersonalTokens";
+import { FoundationFooter } from "./FoundationFooter";
+import type { Appearance } from "./appearance";
export type Permission =
"read" | "edit" | "execute" | "review" | "release" | "members";
@@ -286,24 +291,79 @@ export function SignIn({
);
}
+export function identityLabel(session: IdentitySession): string {
+ return (
+ session.user.display_name?.trim() ||
+ session.user.email ||
+ (session.user.authentication_method === "local_bootstrap"
+ ? "Local operator"
+ : "Signed-in user")
+ );
+}
+
+export function IdentitySummary({ session }: { session: IdentitySession }) {
+ const name = identityLabel(session);
+ const initials = name
+ .split(/\s+/)
+ .filter(Boolean)
+ .slice(0, 2)
+ .map((part) => part[0])
+ .join("")
+ .toUpperCase();
+ return (
+ <>
+
+ {initials}
+
+
+ {name}
+
+ {session.global_admin
+ ? "Factory administrator"
+ : session.user.email || "Your account"}
+
+
+ (null);
+ const previousRequest = useRef(openRequest);
+ useEffect(() => {
+ if (openRequest !== previousRequest.current) {
+ previousRequest.current = openRequest;
+ dialog.current?.showModal();
+ }
+ }, [openRequest]);
+ useEffect(() => {
+ dialog.current?.close();
+ }, [session.user.id]);
+ const [tokensOpen, setTokensOpen] = useState(false);
const [busy, setBusy] = useState(false),
[error, setError] = useState("");
async function signOut() {
@@ -324,18 +384,20 @@ export function IdentityMenu({
dialog.current?.showModal()}
>
- {displayName}
+
setTokensOpen(false)}
>
- Your account
+ {tokensOpen ? "Personal API tokens" : "Your account"}
- {displayName}
- {session.user.email && {session.user.email}
}
-
- {session.user.authentication_method === "local_bootstrap"
- ? "Local developer session"
- : "Organization session"}
- {session.global_admin
- ? " · factory administrator"
- : " · project access assigned individually"}
-
-
- Signing in does not grant access to another project. Its owner or a
- factory administrator assigns membership.
-
-
- Registered user identity
- {session.user.id}
-
- {error && (
-
- {error}
-
+ {tokensOpen ? (
+ <>
+ setTokensOpen(false)}>
+
+ Profile
+ {displayName}
+ {session.user.email && {session.user.email}
}
+
+ {session.user.authentication_method === "local_bootstrap"
+ ? "Local developer session"
+ : "Organization session"}
+ {session.global_admin ? " · factory administrator" : ""}
+
+
+ Registered user identity
+ {session.user.id}
+
+ {appearance && onAppearance && (
+
+ Preferences
+
+ Appearance
+
+ onAppearance(event.target.value as Appearance)
+ }
+ >
+ System
+ Light
+ Dark
+
+
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ {session.user.authentication_method === "oidc_session" && (
+ setTokensOpen(true)}
+ >
+
+ )}
+ {
+ dialog.current?.close();
+ onAccess();
+ }}
+ >
+
+ void signOut()}
+ >
+
+
+
)}
-
- {
- dialog.current?.close();
- onAccess();
- }}
- >
-
- void signOut()}
- >
-
-
+
{}}
+ onAccess={() => {}}
+ />,
+ );
+ expect(html).toContain('class="foundation-footer identity-copyright"');
+ expect(html).toContain("© 2026 Firefly Software Foundation");
+ expect(html).toContain("Made with");
+ expect(html).toContain("Sign out");
+});
diff --git a/studio/src/LearningRecords.css b/studio/src/LearningRecords.css
index 3e782bc23..dc2cd269f 100644
--- a/studio/src/LearningRecords.css
+++ b/studio/src/LearningRecords.css
@@ -321,7 +321,7 @@
min-height: 120px;
}
-@media (max-height: 600px) {
+@media (max-width: 600px), (max-height: 600px) {
.learning-invalidation-dialog {
inset: 12px;
height: calc(100dvh - 24px);
diff --git a/studio/src/MobileNavigation.css b/studio/src/MobileNavigation.css
index bbc43e9e9..8f6653020 100644
--- a/studio/src/MobileNavigation.css
+++ b/studio/src/MobileNavigation.css
@@ -50,6 +50,14 @@
.mobile-menu-dialog:not([open]) {
display: none;
}
+ .mobile-menu-dialog:has(.mobile-account) {
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ }
+ .mobile-account {
+ padding-top: 16px;
+ margin-top: 16px;
+ border-top: 1px solid var(--line);
+ }
.mobile-menu-dialog::backdrop {
background: #0006;
backdrop-filter: blur(3px);
diff --git a/studio/src/MobileNavigation.tsx b/studio/src/MobileNavigation.tsx
index 876858c68..073c2752f 100644
--- a/studio/src/MobileNavigation.tsx
+++ b/studio/src/MobileNavigation.tsx
@@ -1,15 +1,17 @@
/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
import { Menu, X, type LucideIcon } from "lucide-react";
import "./MobileNavigation.css";
export function MobileNavigation({
items,
current,
onNavigate,
+ account,
}: {
items: { id: string; label: string; icon: LucideIcon; count?: number }[];
current: string;
onNavigate: (id: string) => void;
+ account?: { label: string; content: ReactNode; onOpen: () => void };
}) {
const [open, setOpen] = useState(false),
dialog = useRef(null);
@@ -73,6 +75,21 @@ export function MobileNavigation({
))}
+ {account && (
+
+ {
+ setOpen(false);
+ account.onOpen();
+ }}
+ >
+ {account.content}
+
+
+ )}
);
diff --git a/studio/src/PersonalTokens.css b/studio/src/PersonalTokens.css
new file mode 100644
index 000000000..e5ecdb8d4
--- /dev/null
+++ b/studio/src/PersonalTokens.css
@@ -0,0 +1,90 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+.identity-dialog:has(.personal-tokens) {
+ width: min(800px, calc(100vw - 32px));
+}
+.personal-tokens {
+ display: grid;
+ gap: 20px;
+ min-width: 0;
+}
+.personal-tokens p {
+ margin: 0;
+}
+.token-toolbar,
+.token-scope,
+.token-disclosure h3 {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+.token-editor,
+.token-disclosure {
+ display: grid;
+ gap: 16px;
+ padding: 20px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ min-width: 0;
+}
+.token-disclosure {
+ background: var(--accent-soft);
+ border-color: var(--accent-line);
+}
+.token-editor fieldset {
+ display: grid;
+ gap: 10px;
+ padding: 16px;
+ border: 1px solid var(--line);
+ border-radius: 6px;
+}
+.token-project {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ overflow-wrap: anywhere;
+}
+.token-project input {
+ width: auto;
+ flex: 0 0 auto;
+ accent-color: var(--amber);
+}
+.token-scope {
+ color: var(--muted);
+ font-size: 13px;
+}
+.token-list {
+ min-width: 0;
+}
+.token-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 16px;
+ align-items: start;
+ padding: 20px 0;
+ border-top: 1px solid var(--line);
+}
+.token-row h3,
+.token-row p,
+.token-row code {
+ overflow-wrap: anywhere;
+}
+.token-row p {
+ color: var(--muted);
+ font-size: 13px;
+ margin: 6px 0;
+}
+.personal-tokens input:not([type="checkbox"]) {
+ width: 100%;
+ min-width: 0;
+ box-sizing: border-box;
+}
+@media (max-width: 600px) {
+ .token-row {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ .token-editor,
+ .token-disclosure {
+ padding: 16px;
+ }
+}
diff --git a/studio/src/PersonalTokens.test.tsx b/studio/src/PersonalTokens.test.tsx
new file mode 100644
index 000000000..9b0b8ad8c
--- /dev/null
+++ b/studio/src/PersonalTokens.test.tsx
@@ -0,0 +1,280 @@
+// @vitest-environment happy-dom
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import { afterEach, expect, it, vi } from "vitest";
+import {
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from "@testing-library/react";
+import { PersonalTokens } from "./PersonalTokens";
+import type { IdentitySession } from "./Identity";
+
+const project = "a".repeat(32);
+const future = new Date(Date.now() + 30 * 86400000).toISOString().slice(0, 16);
+const session = {
+ user: { id: "b".repeat(32), authentication_method: "oidc_session" },
+ memberships: [{ project_id: project, permissions: ["read"] }],
+} as IdentitySession;
+const credential = {
+ id: "c".repeat(32),
+ name: "Release dashboard",
+ prefix: "ffp_example",
+ project_ids: [project],
+ permissions: ["read"],
+ status: "active",
+ expires_at: "2027-12-01T12:00:00Z",
+ created_at: "2026-10-01T12:00:00Z",
+ revoked_at: null,
+ predecessor_id: null,
+};
+afterEach(() => {
+ cleanup();
+ vi.unstubAllGlobals();
+ vi.restoreAllMocks();
+});
+function show(method = "oidc_session", items: unknown[] = []) {
+ vi.stubGlobal("localStorage", { setItem: vi.fn() });
+ vi.stubGlobal("sessionStorage", { setItem: vi.fn() });
+ const fetcher = vi.fn(async (url: string, options?: RequestInit) => {
+ if (options?.method === "POST")
+ return Response.json({
+ credential,
+ secret_state: "returned_once",
+ token: "fictional-secret-only",
+ });
+ return Response.json(
+ url.endsWith("/projects")
+ ? [{ id: project, definition: { name: "Orbit CRM" } }]
+ : { items, next_cursor: null },
+ );
+ });
+ vi.stubGlobal("fetch", fetcher);
+ const view = render(
+
,
+ );
+ return { fetcher, ...view };
+}
+it("does not fetch credentials or offer issuance outside an OIDC browser session", () => {
+ const { fetcher } = show("local_bootstrap");
+ expect(screen.getByText(/Sign in with your organization/)).toBeTruthy();
+ expect(fetcher).not.toHaveBeenCalled();
+});
+it("creates an explicit read-only project credential and clears its one-time secret", async () => {
+ const { fetcher } = show();
+ fireEvent.click(await screen.findByRole("button", { name: "New token" }));
+ fireEvent.change(screen.getByLabelText("Token name"), {
+ target: { value: "Release dashboard" },
+ });
+ fireEvent.change(screen.getByLabelText("Expires on"), {
+ target: { value: future },
+ });
+ fireEvent.click(await screen.findByLabelText("Orbit CRM"));
+ fireEvent.click(screen.getByRole("button", { name: "Create token" }));
+ expect(await screen.findByDisplayValue("fictional-secret-only")).toBeTruthy();
+ const call = fetcher.mock.calls.find(
+ ([, options]) => options?.method === "POST",
+ )!;
+ expect(call[0]).toBe("/api/v1/identity/tokens");
+ const body = JSON.parse(call[1]!.body as string);
+ expect(body).toMatchObject({ project_ids: [project], permissions: ["read"] });
+ expect(body.request_id).toMatch(/^[a-f0-9]{32}$/);
+ expect(
+ (call[1]!.headers as Record
).Authorization,
+ ).toBeUndefined();
+ expect(localStorage.setItem).not.toHaveBeenCalled();
+ expect(sessionStorage.setItem).not.toHaveBeenCalled();
+ fireEvent.click(screen.getByRole("button", { name: "I saved this token" }));
+ expect(screen.queryByDisplayValue("fictional-secret-only")).toBeNull();
+});
+it("requires confirmation before revoking and never replays a failed mutation", async () => {
+ const { fetcher } = show("oidc_session", [credential]);
+ fireEvent.click(
+ await screen.findByRole("button", { name: "Revoke Release dashboard" }),
+ );
+ expect(
+ fetcher.mock.calls.filter(([, options]) => options?.method === "POST"),
+ ).toHaveLength(0);
+ fetcher.mockImplementationOnce(async () => {
+ throw new Error(
+ "Connection lost. Inspect the token list before trying again.",
+ );
+ });
+ fireEvent.click(screen.getByRole("button", { name: "Revoke token" }));
+ expect(await screen.findByRole("alert")).toBeTruthy();
+ await waitFor(() =>
+ expect(
+ fetcher.mock.calls.filter(([, options]) => options?.method === "POST"),
+ ).toHaveLength(1),
+ );
+ expect(screen.queryByRole("button", { name: "Revoke token" })).toBeNull();
+});
+
+it("rotates through the exact lifecycle endpoint without changing project grants", async () => {
+ const { fetcher } = show("oidc_session", [credential]);
+ fireEvent.click(
+ await screen.findByRole("button", { name: "Rotate Release dashboard" }),
+ );
+ expect(
+ fetcher.mock.calls.filter(([, options]) => options?.method === "POST"),
+ ).toHaveLength(0);
+ fireEvent.change(screen.getByLabelText("Expires on"), {
+ target: { value: future },
+ });
+ fireEvent.click(screen.getByRole("button", { name: "Rotate token" }));
+ await screen.findByDisplayValue("fictional-secret-only");
+ const call = fetcher.mock.calls.find(
+ ([, options]) => options?.method === "POST",
+ )!;
+ expect(call[0]).toBe(`/api/v1/identity/tokens/${credential.id}/rotate`);
+ expect(Object.keys(JSON.parse(call[1]!.body as string)).sort()).toEqual([
+ "expires_at",
+ "request_id",
+ ]);
+});
+
+it("retries project discovery after a failed initial read without issuing a token", async () => {
+ const { fetcher } = show();
+ fetcher.mockImplementation(async (url) =>
+ url.endsWith("/projects")
+ ? Promise.reject(new Error("Project catalog unavailable"))
+ : Response.json({ items: [], next_cursor: null }),
+ );
+ // The initial microtask already started; remount into a new selected server.
+ cleanup();
+ render(
+ ((resolve) => {
+ finish = resolve;
+ }),
+ );
+ fireEvent.click(screen.getByRole("button", { name: "Create token" }));
+ rerender(
+
+ Sign in with your organization to manage personal tokens. Local
+ developer sessions cannot issue them.
+
+ );
+ return (
+ ({ items: [], next_cursor: null });
+ const [projects, setProjects] = useState([]);
+ const [loading, setLoading] = useState(true),
+ [busy, setBusy] = useState(false);
+ const [error, setError] = useState(""),
+ [notice, setNotice] = useState("");
+ const [creating, setCreating] = useState(false),
+ [action, setAction] = useState(null);
+ const [name, setName] = useState(""),
+ [expiry, setExpiry] = useState("");
+ const [selected, setSelected] = useState([]),
+ [secret, setSecret] = useState("");
+ const [copied, setCopied] = useState(false);
+ const controller = useRef(null);
+ const allowed = new Set(
+ session.memberships
+ .filter((membership) => membership.permissions.includes("read"))
+ .map((membership) => membership.project_id),
+ );
+ const choices = projects.filter((project) => allowed.has(project.id));
+ const labels = new Map(
+ projects.map((project) => [project.id, project.definition.name]),
+ );
+
+ useEffect(() => {
+ const current = new AbortController();
+ controller.current = current;
+ const connection = { base, token: "", authenticated: true };
+ void Promise.all([
+ request(connection, "/identity/tokens", {
+ signal: current.signal,
+ cache: "no-store",
+ }),
+ request(connection, "/projects", {
+ signal: current.signal,
+ cache: "no-store",
+ }),
+ ])
+ .then(([records, catalog]) => {
+ if (!current.signal.aborted) {
+ setPage(records);
+ setProjects(catalog);
+ }
+ })
+ .catch((cause) => {
+ if (!current.signal.aborted) setError(message(cause));
+ })
+ .finally(() => {
+ if (!current.signal.aborted) setLoading(false);
+ });
+ return () => {
+ current.abort();
+ controller.current = null;
+ };
+ }, [base]);
+
+ async function refresh(after?: string) {
+ setError("");
+ setLoading(true);
+ try {
+ const [records, catalog] = await Promise.all([
+ request(
+ { base, token: "", authenticated: true },
+ "/identity/tokens" +
+ (after ? `?after=${encodeURIComponent(after)}` : ""),
+ { signal: controller.current?.signal, cache: "no-store" },
+ ),
+ after
+ ? Promise.resolve(null)
+ : request(
+ { base, token: "", authenticated: true },
+ "/projects",
+ { signal: controller.current?.signal, cache: "no-store" },
+ ),
+ ]);
+ if (controller.current) {
+ if (catalog) setProjects(catalog);
+ setPage((prior) =>
+ after
+ ? {
+ items: [...prior.items, ...records.items],
+ next_cursor: records.next_cursor,
+ }
+ : records,
+ );
+ }
+ } catch (cause) {
+ if (controller.current) setError(message(cause));
+ } finally {
+ if (controller.current) setLoading(false);
+ }
+ }
+ async function mutate(event: FormEvent) {
+ event.preventDefault();
+ if (busy || !controller.current) return;
+ if (
+ action?.kind !== "revoke" &&
+ (!expiry ||
+ !Number.isFinite(new Date(expiry).valueOf()) ||
+ new Date(expiry) <= new Date())
+ ) {
+ setError("Choose an expiry in the future.");
+ return;
+ }
+ const intent = action;
+ const path = intent
+ ? `/identity/tokens/${intent.token.id}/${intent.kind}`
+ : "/identity/tokens";
+ const requestId = crypto.randomUUID().replaceAll("-", "");
+ const body =
+ intent?.kind === "revoke"
+ ? {}
+ : {
+ request_id: requestId,
+ expires_at: new Date(expiry).toISOString(),
+ ...(!intent
+ ? {
+ name: name.trim(),
+ project_ids: selected,
+ permissions: ["read"],
+ }
+ : {}),
+ };
+ setBusy(true);
+ setError("");
+ setNotice("");
+ setSecret("");
+ setCopied(false);
+ // An uncertain mutation is inspected through the list, never replayed by this form.
+ setAction(null);
+ setCreating(false);
+ try {
+ const result = await request(
+ { base, token: "", authenticated: true },
+ path,
+ {
+ method: "POST",
+ body: JSON.stringify(body),
+ signal: controller.current.signal,
+ cache: "no-store",
+ },
+ );
+ if (!controller.current) return;
+ if ("secret_state" in result) {
+ if (result.secret_state === "returned_once" && result.token)
+ setSecret(result.token);
+ else
+ setNotice(
+ "The token exists, but its secret is not retained. Revoke it and create another if you did not save it.",
+ );
+ } else
+ setNotice(
+ "Token revoked. Applications using it can no longer read your projects.",
+ );
+ setName("");
+ setExpiry("");
+ setSelected([]);
+ await refresh();
+ } catch (cause) {
+ if (controller.current)
+ setError(
+ `${message(cause)} Refresh the list and inspect the token before submitting another request.`,
+ );
+ } finally {
+ if (controller.current) setBusy(false);
+ }
+ }
+ function start(next: Action | null) {
+ setAction(next);
+ setCreating(!next);
+ setExpiry("");
+ setError("");
+ setSecret("");
+ }
+
+ return (
+
+
+ Give a script read-only access to selected projects. Tokens cannot run
+ work, publish code or manage the factory.
+
+
+
start(null)}
+ >
+
+
void refresh()}
+ >
+
+
+ No current project memberships are available. Ask a project owner to
+ grant access first.
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+ {notice && {notice}
}
+ {secret && (
+
+
+
+
+ This is the only time it is shown. Store it in your secret manager
+ before closing this screen.
+
+
New token secret
+
+
+ {
+ void navigator.clipboard
+ .writeText(secret)
+ .then(() => setCopied(true))
+ .catch(() =>
+ setError(
+ "Copy is unavailable. Select the token and copy it manually.",
+ ),
+ );
+ }}
+ >
+ {copied ?
+ {
+ setSecret("");
+ setCopied(false);
+ }}
+ >
+ I saved this token
+
+
+
+ {loading &&
Loading tokens…
}
+ {!loading && !creating && !action && !secret && !page.items.length && (
+
+ No personal tokens yet. Create one for a script that needs to read
+ your projects.
+
+ )}
+ {page.items.map((token) => (
+
+
+
{token.name}
+
+ {token.status} · Expires {date(token.expires_at)}
+
+
+ {token.project_ids.map((id) => labels.get(id) || id).join(", ")}
+
+
{token.prefix}…
+
+ start({ kind: "rotate", token })}
+ >
+
+ start({ kind: "revoke", token })}
+ >
+
+
+
+ ))}
+
void refresh(page.next_cursor!)}
+ >
+ Load more tokens
+
+ )}
+
+ );
+}
diff --git a/studio/src/SidebarAccount.test.tsx b/studio/src/SidebarAccount.test.tsx
new file mode 100644
index 000000000..005727c58
--- /dev/null
+++ b/studio/src/SidebarAccount.test.tsx
@@ -0,0 +1,126 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0 */
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, expect, it, vi } from "vitest";
+const identity = vi.hoisted(() => ({ admin: false }));
+vi.mock("./Identity", async (original) => {
+ const actual = await original();
+ return {
+ ...actual,
+ useIdentity: () => ({
+ session: {
+ authenticated: true,
+ user: {
+ id: "a".repeat(32),
+ display_name: "Project Owner",
+ email: "owner@example.test",
+ authentication_method: "oidc_session",
+ },
+ global_admin: identity.admin,
+ memberships: [
+ {
+ project_id: "b".repeat(32),
+ role: "owner",
+ permissions: ["read", "members"],
+ },
+ ],
+ roles: {},
+ },
+ configuration: { mode: "oidc" },
+ loading: false,
+ error: "",
+ refresh: () => {},
+ forgetSession: () => {},
+ }),
+ };
+});
+import App from "./App";
+import { Administration, requiresFactoryAdministrator } from "./Administration";
+import type { IdentitySession } from "./Identity";
+afterEach(() => vi.unstubAllGlobals());
+function markup() {
+ vi.stubGlobal("matchMedia", () => ({ matches: false }));
+ return renderToStaticMarkup(