@@ -444,7 +446,7 @@ export function AuthShell({ mode, children }: AuthShellProps) {
`}
-
+
@@ -496,6 +498,8 @@ export function AuthShell({ mode, children }: AuthShellProps) {
{children}
+
+
);
}
\ No newline at end of file
diff --git a/frontend/src/components/monitoring/ContainerMetricsPanel.tsx b/frontend/src/components/monitoring/ContainerMetricsPanel.tsx
new file mode 100644
index 0000000..b4855e6
--- /dev/null
+++ b/frontend/src/components/monitoring/ContainerMetricsPanel.tsx
@@ -0,0 +1,536 @@
+import { useMemo, type ReactNode } from "react";
+import {
+ Activity,
+ Cpu,
+ Database,
+ HardDrive,
+ MemoryStick,
+ Network,
+ Server,
+} from "lucide-react";
+import type { EChartsOption } from "echarts";
+
+import { Card } from "../ui/card";
+import { EChartPanel } from "./EChartPanel";
+import type { ContainerMetricsPayload, RuntimeContainerState } from "../../utils/api";
+import {
+ formatBps,
+ formatBytes,
+ type MetricSample,
+} from "../../utils/metricsSeries";
+
+const SLATE_AXIS = "#94a3b8";
+const SLATE_GRID = "#1e293b";
+const TOOLTIP_BG = "#0f172a";
+const TOOLTIP_BORDER = "#334155";
+
+interface ContainerMetricsPanelProps {
+ container: RuntimeContainerState | null;
+ containerLabel: string;
+ points: MetricSample[];
+ latestPayload: ContainerMetricsPayload | null;
+ connected: boolean;
+ runtimeTerminal: boolean;
+ reducedMotion: boolean;
+ multiContainer: boolean;
+}
+
+function baseChartOption(reducedMotion: boolean): Pick {
+ return {
+ animation: !reducedMotion,
+ textStyle: { color: SLATE_AXIS, fontSize: 10 },
+ };
+}
+
+function axisDefaults(): EChartsOption {
+ return {
+ grid: { left: 48, right: 16, top: 28, bottom: 48 },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLine: { lineStyle: { color: SLATE_GRID } },
+ axisLabel: { color: SLATE_AXIS, fontSize: 9, hideOverlap: true },
+ },
+ yAxis: {
+ type: "value",
+ axisLine: { show: false },
+ splitLine: { lineStyle: { color: SLATE_GRID, type: "dashed" } },
+ axisLabel: { color: SLATE_AXIS, fontSize: 9 },
+ },
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: TOOLTIP_BG,
+ borderColor: TOOLTIP_BORDER,
+ textStyle: { color: "#e2e8f0", fontSize: 11 },
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ start: 0,
+ end: 100,
+ },
+ {
+ type: "slider",
+ height: 18,
+ bottom: 4,
+ borderColor: SLATE_GRID,
+ fillerColor: "rgba(59, 130, 246, 0.15)",
+ handleStyle: { color: "#64748b" },
+ textStyle: { color: SLATE_AXIS, fontSize: 9 },
+ },
+ ],
+ };
+}
+
+function ChartPlaceholder({ message }: { message: string }) {
+ return (
+
+ {message}
+
+ );
+}
+
+export function ContainerMetricsPanel({
+ container,
+ containerLabel,
+ points,
+ latestPayload,
+ connected,
+ runtimeTerminal,
+ reducedMotion,
+ multiContainer,
+}: ContainerMetricsPanelProps) {
+ const latest = points[points.length - 1] ?? null;
+ const netTotals = latestPayload?.network?.totals;
+ const ioStats = latestPayload?.io;
+ const pids = latestPayload?.pids;
+ const meta = latestPayload?.container;
+ const throttling = latestPayload?.cpu?.throttling;
+
+ const statusMessage = useMemo(() => {
+ if (!container) return "No container selected.";
+ if (points.length === 0 && runtimeTerminal) {
+ return "Container exited before metrics were collected.";
+ }
+ if (points.length === 0 && connected) return "Waiting for metrics…";
+ if (points.length === 0) return "Waiting for metrics stream…";
+ if (runtimeTerminal) return "Monitoring ended — showing last collected samples.";
+ return null;
+ }, [container, points.length, runtimeTerminal, connected]);
+
+ const labels = useMemo(() => points.map((p) => p.label), [points]);
+
+ const cpuOption = useMemo(
+ () => ({
+ ...baseChartOption(reducedMotion),
+ ...axisDefaults(),
+ xAxis: { ...axisDefaults().xAxis, data: labels },
+ yAxis: {
+ ...axisDefaults().yAxis,
+ name: "%",
+ nameTextStyle: { color: SLATE_AXIS, fontSize: 9 },
+ min: 0,
+ },
+ series: [
+ {
+ name: "CPU",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ areaStyle: { color: "rgba(52, 211, 153, 0.12)" },
+ lineStyle: { color: "#34d399", width: 2 },
+ itemStyle: { color: "#34d399" },
+ data: points.map((p) => p.cpuPercent),
+ },
+ ],
+ tooltip: {
+ ...axisDefaults().tooltip,
+ valueFormatter: (v) => (typeof v === "number" ? `${v.toFixed(2)}%` : "-"),
+ },
+ }),
+ [labels, points, reducedMotion],
+ );
+
+ const memoryOption = useMemo(
+ () => ({
+ ...baseChartOption(reducedMotion),
+ ...axisDefaults(),
+ legend: {
+ top: 0,
+ textStyle: { color: SLATE_AXIS, fontSize: 10 },
+ },
+ xAxis: { ...axisDefaults().xAxis, data: labels },
+ yAxis: [
+ {
+ type: "value",
+ name: "MB",
+ position: "left",
+ min: 0,
+ axisLine: { show: false },
+ splitLine: { lineStyle: { color: SLATE_GRID, type: "dashed" } },
+ axisLabel: { color: SLATE_AXIS, fontSize: 9 },
+ nameTextStyle: { color: SLATE_AXIS, fontSize: 9 },
+ },
+ {
+ type: "value",
+ name: "%",
+ position: "right",
+ min: 0,
+ max: 100,
+ axisLine: { show: false },
+ splitLine: { show: false },
+ axisLabel: { color: SLATE_AXIS, fontSize: 9 },
+ nameTextStyle: { color: SLATE_AXIS, fontSize: 9 },
+ },
+ ],
+ series: [
+ {
+ name: "Memory MB",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ yAxisIndex: 0,
+ areaStyle: { color: "rgba(168, 85, 247, 0.12)" },
+ lineStyle: { color: "#a855f7", width: 2 },
+ data: points.map((p) => p.memoryMb),
+ },
+ {
+ name: "Memory %",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ yAxisIndex: 1,
+ lineStyle: { color: "#818cf8", width: 1.5, type: "dashed" },
+ data: points.map((p) => p.memoryPercent),
+ },
+ ],
+ }),
+ [labels, points, reducedMotion],
+ );
+
+ const networkOption = useMemo(
+ () => ({
+ ...baseChartOption(reducedMotion),
+ ...axisDefaults(),
+ legend: { top: 0, textStyle: { color: SLATE_AXIS, fontSize: 10 } },
+ xAxis: { ...axisDefaults().xAxis, data: labels },
+ yAxis: {
+ ...axisDefaults().yAxis,
+ axisLabel: {
+ color: SLATE_AXIS,
+ fontSize: 9,
+ formatter: (v: number) => formatBytes(v),
+ },
+ },
+ series: [
+ {
+ name: "RX",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ lineStyle: { color: "#22d3ee", width: 2 },
+ data: points.map((p) => p.rxBps),
+ },
+ {
+ name: "TX",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ lineStyle: { color: "#38bdf8", width: 2 },
+ data: points.map((p) => p.txBps),
+ },
+ ],
+ tooltip: {
+ ...axisDefaults().tooltip,
+ valueFormatter: (v) => formatBps(typeof v === "number" ? v : null),
+ },
+ }),
+ [labels, points, reducedMotion],
+ );
+
+ const ioOption = useMemo(
+ () => ({
+ ...baseChartOption(reducedMotion),
+ ...axisDefaults(),
+ legend: { top: 0, textStyle: { color: SLATE_AXIS, fontSize: 10 } },
+ xAxis: { ...axisDefaults().xAxis, data: labels },
+ yAxis: {
+ ...axisDefaults().yAxis,
+ axisLabel: {
+ color: SLATE_AXIS,
+ fontSize: 9,
+ formatter: (v: number) => formatBytes(v),
+ },
+ },
+ series: [
+ {
+ name: "Read",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ lineStyle: { color: "#fb923c", width: 2 },
+ data: points.map((p) => p.readBps),
+ },
+ {
+ name: "Write",
+ type: "line",
+ smooth: true,
+ showSymbol: false,
+ lineStyle: { color: "#fbbf24", width: 2 },
+ data: points.map((p) => p.writeBps),
+ },
+ ],
+ tooltip: {
+ ...axisDefaults().tooltip,
+ valueFormatter: (v) => formatBps(typeof v === "number" ? v : null),
+ },
+ }),
+ [labels, points, reducedMotion],
+ );
+
+ const interfaces = useMemo(() => {
+ const raw = latestPayload?.network?.interfaces;
+ if (!raw || typeof raw !== "object") return [];
+ return Object.entries(raw).map(([name, data]) => ({
+ name,
+ data: (data ?? {}) as Record,
+ }));
+ }, [latestPayload?.network?.interfaces]);
+
+ if (!container) {
+ return (
+
+ No container selected for metrics.
+
+ );
+ }
+
+ const showLiveBadge = connected && !runtimeTerminal && points.length > 0;
+
+ return (
+
+
+
+ {containerLabel}
+
+
+ {multiContainer && (
+ Metrics follow the selected container above.
+ )}
+ {showLiveBadge && streaming }
+ {runtimeTerminal && points.length > 0 && (
+ ended
+ )}
+ {!runtimeTerminal && !connected && points.length === 0 && (
+ connecting…
+ )}
+
+
+
+
+ {statusMessage && points.length === 0 ? (
+
+
+ {points.length === 0 ? (
+
+
+ {points.length === 0 ? (
+
+
+ {points.length < 2 ? (
+
+
+ {points.length < 2 ? (
+
+
+ )}
+
+
+
+ Container
+
+ Name
+ {meta?.name ?? container.name ?? "-"}
+ Image
+ {meta?.image ?? container.image ?? "-"}
+ IP
+ {meta?.ip_address ?? "-"}
+ Started
+
+ {meta?.started_at ? new Date(meta.started_at).toLocaleString() : "-"}
+
+ Restarts
+ {meta?.restart_count ?? container.restart_count ?? "-"}
+ Mounts
+
+ {Array.isArray(meta?.mounts) ? meta.mounts.length : 0}
+
+
+
+
+ Ports
+ {!meta?.ports?.length ? (
+ No port mappings.
+ ) : (
+
+ {meta.ports.map((p, i) => (
+
+ {p.container_port}
+ {p.host_bindings && p.host_bindings.length > 0 && (
+
+ {" → "}
+ {p.host_bindings.map((b, j) => (
+
+ {b.host_ip || "0.0.0.0"}:{b.host_port}
+ {j < (p.host_bindings?.length ?? 0) - 1 ? ", " : ""}
+
+ ))}
+
+ )}
+
+ ))}
+
+
+ Network interfaces
+ {interfaces.length === 0 ? (
+ No per-interface data yet.
+ ) : (
+
+ {interfaces.map((iface) => (
+
+
{iface.name}
+
+ RX: {formatBytes(iface.data.rx_bytes as number | undefined)}
+ TX: {formatBytes(iface.data.tx_bytes as number | undefined)}
+
+ Pkts: {String(iface.data.rx_packets ?? "-")}/{String(iface.data.tx_packets ?? "-")}
+
+
+ Err: {String(iface.data.rx_errors ?? "-")}/{String(iface.data.tx_errors ?? "-")}
+
+
+
+ ))}
+
+
+ );
+}
+
+function KpiCard({
+ icon: Icon,
+ iconClass,
+ label,
+ value,
+ sub,
+}: {
+ icon: typeof Cpu;
+ iconClass: string;
+ label: string;
+ value: string;
+ sub?: string;
+}) {
+ return (
+
+
+ {label}
+
+
+ {value}
+
+ {sub && {sub}
}
+
+ );
+}
+
+function ChartCard({ title, children }: { title: string; children: ReactNode }) {
+ return (
+
+ {title}
+ {children}
+
+ );
+}
diff --git a/frontend/src/components/monitoring/EChartPanel.tsx b/frontend/src/components/monitoring/EChartPanel.tsx
new file mode 100644
index 0000000..1e3ad4d
--- /dev/null
+++ b/frontend/src/components/monitoring/EChartPanel.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+ DataZoomComponent,
+ GridComponent,
+ LegendComponent,
+ TooltipComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import type { EChartsOption } from "echarts";
+
+import { cn } from "../ui/utils";
+
+echarts.use([
+ LineChart,
+ GridComponent,
+ TooltipComponent,
+ LegendComponent,
+ DataZoomComponent,
+ CanvasRenderer,
+]);
+
+interface EChartPanelProps {
+ option: EChartsOption;
+ className?: string;
+ height?: number | string;
+ "aria-label"?: string;
+}
+
+export function EChartPanel({
+ option,
+ className,
+ height = 200,
+ "aria-label": ariaLabel,
+}: EChartPanelProps) {
+ const containerRef = useRef(null);
+ const chartRef = useRef(null);
+
+ useEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+
+ const chart = echarts.init(el, undefined, { renderer: "canvas" });
+ chartRef.current = chart;
+
+ const observer = new ResizeObserver(() => {
+ chart.resize();
+ });
+ observer.observe(el);
+
+ return () => {
+ observer.disconnect();
+ chart.dispose();
+ chartRef.current = null;
+ };
+ }, []);
+
+ useEffect(() => {
+ chartRef.current?.setOption(option, { notMerge: false, lazyUpdate: true });
+ }, [option]);
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index b511109..1b017c5 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -57,7 +57,10 @@ function TabsContent({
return (
| null = null;
+
+async function enqueueUploadedFile(uploadedFile: StoredUploadedFile): Promise {
+ const file = new File([uploadedFile.content], uploadedFile.name, {
+ type: "text/plain",
+ });
+ const response =
+ uploadedFile.type === "docker-compose"
+ ? await composeApi.analyze(file)
+ : await dockerfileApi.analyze(file);
+ return response.job_id;
+}
+
interface AnalysisStep {
id: string;
label: string;
@@ -180,7 +200,7 @@ export function AnalysisProgress() {
const [steps, setSteps] = useState(() =>
BASE_STEPS.map((step) => ({ ...step })),
);
- const [jobId, setJobId] = useState(queryJobId);
+ const jobId = queryJobId;
const [jobStatus, setJobStatus] = useState(null);
const [progressValue, setProgressValue] = useState(queryJobId ? 15 : 5);
const [errorMessage, setErrorMessage] = useState(null);
@@ -265,35 +285,29 @@ export function AnalysisProgress() {
if (!activeJobId) {
const storedFile = sessionStorage.getItem("uploadedFile");
- if (!storedFile) {
+ if (!storedFile && !uploadEnqueuePromise) {
navigate("/");
return;
}
- const uploadedFile = JSON.parse(storedFile) as {
- name: string;
- content: string;
- type: string;
- };
- pushLog({
- message: `Uploading ${uploadedFile.name} to the analysis queue...`,
- tone: "info",
- });
- const file = new File([uploadedFile.content], uploadedFile.name, {
- type: "text/plain",
- });
- const response =
- uploadedFile.type === "docker-compose"
- ? await composeApi.analyze(file)
- : await dockerfileApi.analyze(file);
- if (cancelled) return;
- activeJobId = response.job_id;
- setJobId(activeJobId);
- setJobStatus("queued");
- setProgressValue(25);
- pushLog({
- message: `Job ${activeJobId} queued (status: ${response.status})`,
- tone: "success",
- });
+
+ if (!uploadEnqueuePromise && storedFile) {
+ const uploadedFile = JSON.parse(storedFile) as StoredUploadedFile;
+ pushLog({
+ message: `Uploading ${uploadedFile.name} to the analysis queue...`,
+ tone: "info",
+ });
+ uploadEnqueuePromise = enqueueUploadedFile(uploadedFile).finally(() => {
+ uploadEnqueuePromise = null;
+ });
+ }
+
+ if (uploadEnqueuePromise) {
+ activeJobId = await uploadEnqueuePromise;
+ if (cancelled) return;
+ sessionStorage.setItem("analysisJobId", activeJobId);
+ navigate(`/analysis?jobId=${activeJobId}`, { replace: true });
+ return;
+ }
} else {
pushLog({
message: `Attaching to existing job ${activeJobId}`,
diff --git a/frontend/src/pages/ApiKeys.tsx b/frontend/src/pages/ApiKeys.tsx
deleted file mode 100644
index 3fbdea9..0000000
--- a/frontend/src/pages/ApiKeys.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import {
- Check,
- Copy,
- KeyRound,
- Loader2,
- Plus,
- ShieldAlert,
- Trash2,
-} from "lucide-react";
-
-import { DockerLoader, useMinLoader } from "../components/DockerLoader";
-import { Layout } from "../components/Layout";
-import { MotionPage } from "../components/motion";
-import { Card } from "../components/ui/card";
-import { Button } from "../components/ui/button";
-import { Badge } from "../components/ui/badge";
-import {
- ApiError,
- apiKeys as apiKeysApi,
- type ApiKey,
-} from "../utils/api";
-
-export function ApiKeys() {
- const [keys, setKeys] = useState([]);
- const [loading, setLoading] = useState(true);
- const ready = useMinLoader(!loading);
- const [error, setError] = useState(null);
- const [creating, setCreating] = useState(false);
- const [revokingId, setRevokingId] = useState(null);
- const [freshlyCreated, setFreshlyCreated] = useState<{
- id: string;
- key: string;
- key_prefix: string;
- } | null>(null);
- const [copied, setCopied] = useState(false);
-
- const loadKeys = useCallback(async () => {
- setLoading(true);
- setError(null);
- try {
- const list = await apiKeysApi.list();
- setKeys(list);
- } catch (err) {
- const message =
- err instanceof ApiError
- ? err.message
- : err instanceof Error
- ? err.message
- : "Failed to load keys.";
- setError(message);
- toast.error(message);
- } finally {
- setLoading(false);
- }
- }, []);
-
- useEffect(() => {
- loadKeys();
- }, [loadKeys]);
-
- const handleCreate = async () => {
- setCreating(true);
- try {
- const result = await apiKeysApi.create();
- setFreshlyCreated(result);
- toast.success("API key created. Copy it now - it will not be shown again.");
- await loadKeys();
- } catch (err) {
- const message =
- err instanceof ApiError
- ? err.message
- : err instanceof Error
- ? err.message
- : "Failed to create key.";
- toast.error(message);
- } finally {
- setCreating(false);
- }
- };
-
- const handleRevoke = async (id: string) => {
- const confirmed = window.confirm(
- "Revoke this API key? Any clients using it will stop working immediately.",
- );
- if (!confirmed) return;
- setRevokingId(id);
- try {
- await apiKeysApi.revoke(id);
- toast.success("API key revoked");
- setKeys((prev) => prev.filter((item) => item.id !== id));
- } catch (err) {
- const message =
- err instanceof ApiError
- ? err.message
- : err instanceof Error
- ? err.message
- : "Failed to revoke key.";
- toast.error(message);
- } finally {
- setRevokingId(null);
- }
- };
-
- const copyFreshKey = async () => {
- if (!freshlyCreated) return;
- try {
- await navigator.clipboard.writeText(freshlyCreated.key);
- setCopied(true);
- setTimeout(() => setCopied(false), 2500);
- toast.success("Key copied to clipboard");
- } catch {
- toast.error("Clipboard unavailable - copy manually");
- }
- };
-
- const prefixBlocks = useMemo(
- () =>
- keys.map((key) => ({
- ...key,
- created: new Date(key.created_at).toLocaleString(),
- })),
- [keys],
- );
-
- return (
-
-
-
-
-
-
-
-
- Create long-lived API keys to authenticate requests without a JWT.
-
-
-
- {creating ? (
-
-
-
-
- Usage
-
- Send the key in an X-Api-Key request
- header instead of an Authorization{" "}
- bearer token. Example:
-
-
- curl -H "X-Api-Key: dpa_XXXXXX" {" "}
- https://example.com/api/v1/users/me/history
-
-
-
- {freshlyCreated && (
-
-
-
-
-
- Copy this key now - it will not be shown again
-
-
- Stored prefix: {" "}
-
- {freshlyCreated.key_prefix}
-
-
-
-
- {freshlyCreated.key}
-
-
- {copied ? (
- <>
-
- setFreshlyCreated(null)}
- variant="ghost"
- className="text-slate-400 hover:text-white"
- >
- Dismiss
-
-
-
-
- )}
-
- {!ready && (
-
- )}
-
- {ready && error && (
-
- {error}
-
- )}
-
- {ready && !error && prefixBlocks.length === 0 && (
-
- No API keys yet.
-
-
-
- )}
-
- {ready && prefixBlocks.length > 0 && (
-
- {prefixBlocks.map((item) => (
-
-
-
-
-
-
- {item.key_prefix}
- ...
-
-
- Created {item.created}
-
-
-
- id: {item.id.slice(0, 8)}
-
-
handleRevoke(item.id)}
- disabled={revokingId === item.id}
- className="border-red-500/40 text-red-300 hover:bg-red-500/10"
- >
- {revokingId === item.id ? (
-
-
- ))}
-
- )}
-
-
- );
-}
diff --git a/frontend/src/pages/ContainerExecution.tsx b/frontend/src/pages/ContainerExecution.tsx
index f3544e6..004e3ff 100644
--- a/frontend/src/pages/ContainerExecution.tsx
+++ b/frontend/src/pages/ContainerExecution.tsx
@@ -30,6 +30,7 @@ import {
type Job,
type RunnabilityMeta,
} from "../utils/api";
+import { clearSessionStopping, markSessionStopping } from "../utils/deploySession";
import { clearState, loadState, saveState } from "../utils/monitoringState";
import { pushNotification } from "../utils/notifications";
@@ -232,7 +233,7 @@ export function ContainerExecution() {
setStopping(false);
setDeployPhase("failed");
clearDeployTimeout();
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
if (!options?.keepExitData) {
resetExecutionViewState();
}
@@ -383,7 +384,7 @@ export function ContainerExecution() {
clearDeployTimeout();
setContainerIds([]);
setDeployJobId(null);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
if (stateKey) clearState(stateKey);
toast.success("Compose stack stopped");
pushNotification("warning", "Containers Stopped", "All containers have been stopped", {
@@ -412,7 +413,7 @@ export function ContainerExecution() {
setStopping(false);
setContainerIds([]);
setDeployJobId(null);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
if (stateKey) clearState(stateKey);
pushLog({
message: `Cleanup completed for ${projectName}`,
@@ -522,7 +523,7 @@ export function ContainerExecution() {
setDeployJobId(null);
resetExecutionViewState();
if (stateKey) clearState(stateKey);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
return;
}
setStackRunning(false);
@@ -559,7 +560,7 @@ export function ContainerExecution() {
setDeployJobId(null);
resetExecutionViewState();
if (stateKey) clearState(stateKey);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
} else {
setStackRunning(false);
setStopping(false);
@@ -568,7 +569,7 @@ export function ContainerExecution() {
setDeployJobId(null);
resetExecutionViewState();
if (stateKey) clearState(stateKey);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
}
} catch (err) {
if (cancelled) return;
@@ -691,8 +692,8 @@ export function ContainerExecution() {
const previousContainerIds = containerIds;
setStopping(true);
setStackRunning(false);
- setContainerIds([]);
- sessionStorage.setItem("dqa:containerStatus", "stopping");
+ setDeployPhase("idle");
+ markSessionStopping(job.id);
pushLog({ message: `Stop requested for deploy ${job.id}`, tone: "warning" });
try {
const response = await composeApi.stopDeploy({ job_id: job.id });
@@ -706,17 +707,28 @@ export function ContainerExecution() {
dedupeKey: `deploy.stop.requested:${job.id}`,
});
- for (let i = 0; i < 30; i++) {
+ let confirmed = false;
+ for (let i = 0; i < 45; i++) {
if (unmountedRef.current) break;
- await new Promise((r) => setTimeout(r, 2000));
+ await new Promise((r) => setTimeout(r, 1000));
if (unmountedRef.current) break;
try {
const status = await composeApi.deployStatus(job.id);
- if (!status.active) {
+ const rs = status.runtime_state ?? "none";
+ if (rs === "stopping") {
+ setStopping(true);
+ setStackRunning(false);
+ }
+ if (
+ rs === "stopped_by_user" ||
+ (!status.active && (status.stopped_by_user || rs === "none"))
+ ) {
+ confirmed = true;
if (unmountedRef.current) break;
setDeployJobId(null);
+ setContainerIds([]);
if (stateKey) clearState(stateKey);
- sessionStorage.removeItem("dqa:containerStatus");
+ if (job?.id) clearSessionStopping(job.id);
pushLog({ message: "Stack confirmed stopped", tone: "success" });
pushNotification("success", "Containers Stopped", "All containers have been successfully stopped", {
dedupeKey: `deploy.stop.completed:${job.id}`,
@@ -727,17 +739,39 @@ export function ContainerExecution() {
break;
}
}
+ if (!confirmed && !unmountedRef.current) {
+ pushLog({
+ message: "Stop still in progress; refresh Monitoring for latest state",
+ tone: "warning",
+ });
+ }
} catch (err) {
const message = err instanceof ApiError ? err.message : "Failed to stop deployment";
pushLog({ message, tone: "error" });
toast.error(message);
+ if (job?.id) clearSessionStopping(job.id);
if (!unmountedRef.current) {
setStackRunning(true);
setContainerIds(previousContainerIds);
+ setStopping(false);
}
} finally {
if (!unmountedRef.current) {
- setStopping(false);
+ try {
+ const status = await composeApi.deployStatus(job.id);
+ const rs = status.runtime_state ?? "none";
+ if (
+ rs === "stopped_by_user" ||
+ (!status.active && (status.stopped_by_user || rs === "none"))
+ ) {
+ setStopping(false);
+ setStackRunning(false);
+ setContainerIds([]);
+ if (job?.id) clearSessionStopping(job.id);
+ }
+ } catch {
+ // Keep stopping UI until a later deployStatus poll or page reload confirms state.
+ }
}
}
};
diff --git a/frontend/src/pages/FileUpload.tsx b/frontend/src/pages/FileUpload.tsx
index 94d0c03..777359e 100644
--- a/frontend/src/pages/FileUpload.tsx
+++ b/frontend/src/pages/FileUpload.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Layout } from "../components/Layout";
import { CodePreview } from "../components/CodePreview";
@@ -8,16 +8,25 @@ import { Card } from "../components/ui/card";
import { FileCode, Play, ArrowLeft } from "lucide-react";
import { Badge } from "../components/ui/badge";
+type UploadedFileData = {
+ name: string;
+ content: string;
+ type: string;
+};
+
+function readUploadedFile(): UploadedFileData | null {
+ const stored = sessionStorage.getItem("uploadedFile");
+ if (!stored) return null;
+ try {
+ return JSON.parse(stored) as UploadedFileData;
+ } catch {
+ return null;
+ }
+}
+
export function FileUpload() {
const navigate = useNavigate();
- const [fileData] = useState<{
- name: string;
- content: string;
- type: string;
- } | null>(() => {
- const stored = sessionStorage.getItem("uploadedFile");
- return stored ? JSON.parse(stored) : null;
- });
+ const fileData = readUploadedFile();
useEffect(() => {
if (!fileData) {
diff --git a/frontend/src/pages/History.tsx b/frontend/src/pages/History.tsx
index fbb9b38..9bd5036 100644
--- a/frontend/src/pages/History.tsx
+++ b/frontend/src/pages/History.tsx
@@ -16,7 +16,9 @@ import { Layout } from "../components/Layout";
import { Card } from "../components/ui/card";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
+import { useAuth } from "../auth/AuthProvider";
import { ApiError, compose as composeApi, jobs as jobsApi, type Job } from "../utils/api";
+import { clearJobSessionState } from "../utils/jobSessionCleanup";
import { MotionPage, StaggerList, StaggerItem, MotionCard } from "../components/motion";
interface HistoryItem {
@@ -79,6 +81,7 @@ function formatTimestamp(date: Date) {
}
export function History() {
+ const { user } = useAuth();
const navigate = useNavigate();
const [jobList, setJobList] = useState([]);
const [loading, setLoading] = useState(true);
@@ -229,16 +232,7 @@ export function History() {
next.delete(item.id);
return next;
});
- try {
- if (sessionStorage.getItem("analysisJobId") === item.id) {
- sessionStorage.removeItem("analysisJobId");
- }
- if (sessionStorage.getItem("projectJobId") === item.id) {
- sessionStorage.removeItem("projectJobId");
- }
- } catch {
- // ignore
- }
+ clearJobSessionState(item.id, user?.id ?? null);
toast.success("Analysis removed from history");
} catch (err) {
const message =
diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index 43c1b9f..f71d155 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -12,6 +12,7 @@ import {
CheckCircle,
Play,
Package,
+ Info,
} from "lucide-react";
import { Card } from "../components/ui/card";
import { Button } from "../components/ui/button";
@@ -146,15 +147,31 @@ export function Landing() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94], delay: 0.08 }}
>
- Upload your Dockerfile or docker-compose.yml to analyze for errors,
- security issues, and best practices. Get instant feedback from
- industry-standard linters.
+ Upload a single Dockerfile or docker-compose.yml—or batch up to{" "}
+ {MAX_BATCH_FILES} files of the same kind—for linting, security checks,
+ and best-practice feedback from industry-standard tools.
{/* Upload Area */}
-
-
+
+
+
+
+
+
+ Batch analysis: select
+ up to {MAX_BATCH_FILES} Dockerfiles or Compose files at once (not mixed).
+ All jobs are queued together and tracked on the batch progress page (
+ /analysis/batch ).
+
+
+
{/* Or Upload Project */}
@@ -332,11 +349,6 @@ export function Landing() {
-
- {/* Quick Demo */}
-
-
diff --git a/frontend/src/pages/Monitoring.tsx b/frontend/src/pages/Monitoring.tsx
index 336aee8..3b40889 100644
--- a/frontend/src/pages/Monitoring.tsx
+++ b/frontend/src/pages/Monitoring.tsx
@@ -1,111 +1,103 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { useNavigate, useParams } from "react-router-dom";
-import { toast } from "sonner";
import {
Activity,
AlertTriangle,
ArrowLeft,
- Cpu,
- Database,
+ ArrowRight,
+ ChevronLeft,
ExternalLink,
Globe,
- HardDrive,
- MemoryStick,
- Network,
PlugZap,
RefreshCw,
- Server,
+ Terminal,
XCircle,
} from "lucide-react";
-import {
- CartesianGrid,
- Line,
- LineChart,
- ResponsiveContainer,
- Tooltip,
- XAxis,
- YAxis,
-} from "recharts";
import { Layout } from "../components/Layout";
+import { ContainerMetricsPanel } from "../components/monitoring/ContainerMetricsPanel";
import { Card } from "../components/ui/card";
import { Button } from "../components/ui/button";
import { DockerLoader } from "../components/DockerLoader";
-import { TerminalLog, type TerminalLogEntry } from "../components/TerminalLog";
import { useAuth } from "../auth/AuthProvider";
-import { MotionPage, StaggerList, StaggerItem } from "../components/motion";
+import { MotionPage } from "../components/motion";
import { motion, useReducedMotion } from "motion/react";
import {
+ buildPreviewProxyEmbedUrl,
compose as composeApi,
+ safeCloseSocket,
ws,
+ type ContainerLogPayload,
type ContainerMetricsPayload,
+ type DeployRuntimeState,
+ type DeployStatusResponse,
type DomainEvent,
+ type PreviewCheckResponse,
+ type RuntimeContainerState,
} from "../utils/api";
+import {
+ appendMetricSample,
+ PERSIST_METRIC_POINTS,
+ trimPayloadForPersist,
+ type MetricSample,
+} from "../utils/metricsSeries";
+import { collectBrowserProxyHints, openPopOutPreview } from "../utils/previewBrowser";
+import { localPreviewIssue } from "../utils/previewCheck";
+import { clearSessionStopping, isSessionStopping } from "../utils/deploySession";
import { loadState, saveState } from "../utils/monitoringState";
-interface MetricPoint {
- timestamp: number;
- label: string;
- cpuPercent: number | null;
- memoryMb: number | null;
-}
+type LogStream = "stdout" | "stderr" | "system";
+type LogTone = "info" | "warning" | "error" | "system";
-interface ContainerExitedState {
- exit_code?: number | null;
- error?: string | null;
- started_at?: string | null;
- finished_at?: string | null;
- restart_count?: number | null;
- oom_killed?: boolean | null;
- last_logs?: string[] | null;
-}
-
-interface ContainerState {
- points: MetricPoint[];
- logs: TerminalLogEntry[];
- latestPayload: ContainerMetricsPayload | null;
- connected: boolean;
- exited?: ContainerExitedState | null;
-}
-
-interface MonitoringPersistedState {
- containerStates: Record
;
- selectedContainerId: string | null;
-}
-
-interface ProblematicAlertState {
- open: boolean;
- message: string;
+interface LogLine {
+ stream: LogStream;
+ line: string;
+ timestamp?: string | null;
+ tone: LogTone;
}
interface PreviewTarget {
key: string;
label: string;
url: string;
+ port: number | null;
+ service: string | null;
}
-const MAX_POINTS = 120;
-const MONITORING_STATE_TTL_MS = 1000 * 60 * 60 * 6;
+interface PersistedMetricsState {
+ points: MetricSample[];
+ latest: ContainerMetricsPayload | null;
+}
-function formatBytes(bytes: number | null | undefined): string {
- if (bytes == null) return "-";
- if (bytes <= 0) return "0 B";
- const units = ["B", "KB", "MB", "GB"];
- let value = bytes;
- let unit = 0;
- while (value > 1024 && unit < units.length - 1) {
- value /= 1024;
- unit += 1;
- }
- return `${value.toFixed(2)} ${units[unit]}`;
+interface PersistedMonitoringState {
+ selectedPreviewUrl: string;
+ previewAddress: string;
+ logsByContainer: Record;
+ metricsByContainer?: Record;
}
-function normalizeContainerPort(raw: string | null | undefined): string | null {
+const MONITORING_STATE_TTL_MS = 1000 * 60 * 60 * 6;
+const MAX_LOG_LINES = 400;
+const PERSIST_LOG_LINES = 200;
+const DEPLOY_POLL_MS = 4000;
+const DEPLOY_POLL_FAST_MS = 1000;
+const WEB_PORT_PRIORITY = [80, 3000, 5173, 8000, 8080, 5000];
+const TERMINAL_CONTAINER_STATUSES = new Set(["exited", "dead", "removing"]);
+const TERMINAL_RUNTIME_STATES = new Set([
+ "none",
+ "exited",
+ "failed",
+ "stopped_by_user",
+ "cleanup_completed",
+]);
+const ERROR_PATTERN = /(error|exception|fatal|traceback|panic|fail(ed|ure)?)/i;
+
+function normalizeContainerPort(raw: string | null | undefined): number | null {
if (!raw) return null;
const trimmed = raw.trim();
if (!trimmed) return null;
const [port] = trimmed.split("/");
- return port && /^\d+$/.test(port) ? port : null;
+ return port && /^\d+$/.test(port) ? Number(port) : null;
}
function isLoopbackBinding(hostIp: string): boolean {
@@ -113,6 +105,648 @@ function isLoopbackBinding(hostIp: string): boolean {
return normalized === "0.0.0.0" || normalized === "::" || normalized === ":::" || normalized === "";
}
+function classifyLogTone(stream: LogStream, line: string): LogTone {
+ if (stream === "system") return "system";
+ if (ERROR_PATTERN.test(line)) return "error";
+ if (stream === "stderr") return "warning";
+ return "info";
+}
+
+function lastLogsToEntries(lastLogs: string[] | null | undefined): LogLine[] {
+ return (lastLogs ?? [])
+ .filter((line): line is string => typeof line === "string" && line.length > 0)
+ .map((line) => ({
+ stream: "stdout" as const,
+ line,
+ timestamp: null,
+ tone: classifyLogTone("stdout", line),
+ }));
+}
+
+function buildPreviewTargets(
+ containers: RuntimeContainerState[],
+ dindIp: string | null,
+): PreviewTarget[] {
+ const hostname =
+ typeof window !== "undefined" && window.location.hostname
+ ? window.location.hostname
+ : "localhost";
+ const seen = new Set();
+ const candidates: PreviewTarget[] = [];
+
+ for (const container of containers) {
+ const service = container.service || container.name || null;
+ for (const portInfo of container.ports ?? []) {
+ const containerPort = normalizeContainerPort(portInfo.container_port);
+ for (const binding of portInfo.host_bindings ?? []) {
+ const rawHostIp = String(binding.host_ip ?? "").trim();
+ const hostPort = String(binding.host_port ?? "").trim();
+ if (!hostPort) continue;
+ const host = isLoopbackBinding(rawHostIp) ? dindIp || hostname : rawHostIp;
+ const url = `http://${host}:${hostPort}`;
+ if (seen.has(url)) continue;
+ seen.add(url);
+ candidates.push({
+ key: `${container.id}-${host}-${hostPort}`,
+ label: `${service ? `${service} ` : ""}${host}:${hostPort}${containerPort ? ` -> ${containerPort}` : ""}`,
+ url,
+ port: containerPort,
+ service,
+ });
+ }
+ }
+ }
+
+ candidates.sort((a, b) => {
+ const ai = a.port != null ? WEB_PORT_PRIORITY.indexOf(a.port) : -1;
+ const bi = b.port != null ? WEB_PORT_PRIORITY.indexOf(b.port) : -1;
+ const aRank = ai === -1 ? WEB_PORT_PRIORITY.length : ai;
+ const bRank = bi === -1 ? WEB_PORT_PRIORITY.length : bi;
+ return aRank - bRank;
+ });
+
+ return candidates;
+}
+
+function containerStatusBadge(
+ container: RuntimeContainerState,
+ shuttingDown = false,
+): {
+ label: string;
+ className: string;
+ dotClassName: string;
+} {
+ const status = (container.status ?? "").toLowerCase();
+ const health = (container.health_status ?? "").toLowerCase();
+ if (
+ shuttingDown &&
+ !TERMINAL_CONTAINER_STATUSES.has(status) &&
+ status !== "exited"
+ ) {
+ return {
+ label: "Stopping",
+ className: "border-slate-600 bg-slate-800/80 text-slate-300",
+ dotClassName: "bg-slate-400",
+ };
+ }
+ if (TERMINAL_CONTAINER_STATUSES.has(status) || status === "exited") {
+ return {
+ label: `Exited${container.exit_code != null ? ` (${container.exit_code})` : ""}`,
+ className: "border-red-500/40 bg-red-500/10 text-red-300",
+ dotClassName: "bg-red-500",
+ };
+ }
+ if (health === "unhealthy") {
+ return {
+ label: "Unhealthy",
+ className: "border-amber-500/40 bg-amber-500/10 text-amber-300",
+ dotClassName: "bg-amber-400",
+ };
+ }
+ if (["running", "paused", "restarting"].includes(status)) {
+ return {
+ label: status === "running" ? "Running" : status.charAt(0).toUpperCase() + status.slice(1),
+ className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-300",
+ dotClassName: "bg-emerald-400",
+ };
+ }
+ return {
+ label: container.status ?? "Unknown",
+ className: "border-slate-700 bg-slate-900 text-slate-400",
+ dotClassName: "bg-slate-600",
+ };
+}
+
+function containerLabel(container: RuntimeContainerState): string {
+ return container.service || container.name || container.id.slice(0, 12);
+}
+
+function logToneClass(tone: LogTone): string {
+ switch (tone) {
+ case "error":
+ return "text-red-300";
+ case "warning":
+ return "text-amber-300";
+ case "system":
+ return "text-cyan-300/80";
+ default:
+ return "text-slate-300";
+ }
+}
+
+function formatLogTimestamp(timestamp?: string | null): string {
+ if (!timestamp) return "";
+ const parsed = new Date(timestamp);
+ if (Number.isNaN(parsed.getTime())) return "";
+ return parsed.toLocaleTimeString();
+}
+
+interface RuntimeStatusBannerProps {
+ runtimeState: DeployRuntimeState;
+ stoppedByUser: boolean;
+ exitReason?: string | null;
+ onAcknowledge: () => void;
+}
+
+function RuntimeStatusBanner({
+ runtimeState,
+ stoppedByUser,
+ exitReason,
+ onAcknowledge,
+}: RuntimeStatusBannerProps) {
+ if (runtimeState === "stopping") {
+ return (
+
+
+
+
+ Stop in progress. Container status may still show running until Docker finishes shutdown.
+
+
+ );
+ }
+
+ if (stoppedByUser || runtimeState === "stopped_by_user") {
+ return (
+
+
+
+
+ Stopped by user. Final logs remain available below if the container captured any.
+
+
+ );
+ }
+
+ const isProblematic =
+ runtimeState === "failed" ||
+ runtimeState === "exited" ||
+ runtimeState === "partial" ||
+ runtimeState === "unhealthy" ||
+ runtimeState === "cleanup_completed";
+
+ if (!isProblematic) return null;
+
+ return (
+
+
+
+
+
+ Stack is {runtimeState === "partial" ? "partially running" : runtimeState}
+
+
+ Inspect the container logs below to understand what went wrong.
+ {exitReason ? ` Reason: ${exitReason}.` : ""}
+
+
+ Return to Results to fix the stack and upload/deploy again. Analysis remains available there.
+
+
+
+ Go to Results
+
+
+ );
+}
+
+interface AppPreviewBrowserProps {
+ targets: PreviewTarget[];
+ selectedTargetUrl: string;
+ onSelectTarget: (url: string) => void;
+ address: string;
+ onAddressChange: (value: string) => void;
+ src: string;
+ reloadTick: number;
+ canGoBack: boolean;
+ canGoForward: boolean;
+ onSubmit: () => void;
+ onReload: () => void;
+ onBack: () => void;
+ onForward: () => void;
+}
+
+type PreviewGate = "pending" | "embed" | "blocked";
+type PreviewDisplayMode = "popout" | "inline";
+type InlinePreviewKind = "direct" | "proxy";
+
+const PREVIEW_MODE_STORAGE_KEY = "dqa:previewDisplayMode";
+
+function loadPreviewDisplayMode(): PreviewDisplayMode {
+ if (typeof sessionStorage === "undefined") return "inline";
+ const stored = sessionStorage.getItem(PREVIEW_MODE_STORAGE_KEY);
+ return stored === "popout" ? "popout" : "inline";
+}
+
+function AppPreviewBrowser({
+ targets,
+ selectedTargetUrl,
+ onSelectTarget,
+ address,
+ onAddressChange,
+ src,
+ reloadTick,
+ canGoBack,
+ canGoForward,
+ onSubmit,
+ onReload,
+ onBack,
+ onForward,
+}: AppPreviewBrowserProps) {
+ const localIssue = src ? localPreviewIssue(src) : null;
+ const [displayMode, setDisplayMode] = useState(loadPreviewDisplayMode);
+ const [gate, setGate] = useState("pending");
+ const [blockedMessage, setBlockedMessage] = useState("");
+ const [embedSrc, setEmbedSrc] = useState("");
+ const [resolvedUrl, setResolvedUrl] = useState("");
+ const [inlineKind, setInlineKind] = useState("direct");
+ const popoutOpenedForRef = useRef("");
+ const previewUrl = resolvedUrl || src;
+
+ const handleDisplayModeChange = useCallback((mode: PreviewDisplayMode) => {
+ setDisplayMode(mode);
+ sessionStorage.setItem(PREVIEW_MODE_STORAGE_KEY, mode);
+ }, []);
+
+ const openRealBrowser = useCallback((url: string) => {
+ const opened = openPopOutPreview(url);
+ if (!opened) {
+ window.open(url, "_blank", "noopener,noreferrer");
+ }
+ }, []);
+
+ useEffect(() => {
+ if (!src || localIssue) return;
+
+ if (displayMode === "popout") {
+ const popoutKey = `${src}:${reloadTick}`;
+ if (popoutOpenedForRef.current !== popoutKey) {
+ popoutOpenedForRef.current = popoutKey;
+ openRealBrowser(src);
+ }
+ return;
+ }
+
+ let cancelled = false;
+ void (async () => {
+ try {
+ const result: PreviewCheckResponse = await composeApi.checkPreview(src);
+ if (cancelled) return;
+ const targetUrl = result.final_url ?? src;
+ setResolvedUrl(targetUrl);
+ if (!result.frameable && result.proxy_available) {
+ const session = await composeApi.createPreviewProxySession(
+ targetUrl,
+ collectBrowserProxyHints(),
+ );
+ setEmbedSrc(buildPreviewProxyEmbedUrl(session.session_id));
+ setInlineKind("proxy");
+ setGate("embed");
+ return;
+ }
+ if (!result.frameable) {
+ setBlockedMessage(
+ result.reason ??
+ (result.reachable
+ ? "This app cannot be shown in an embedded preview."
+ : "Could not reach this URL from the platform."),
+ );
+ setGate("blocked");
+ return;
+ }
+ setEmbedSrc(targetUrl);
+ setInlineKind("direct");
+ setGate("embed");
+ } catch {
+ if (cancelled) return;
+ setBlockedMessage(
+ "Could not verify whether this URL allows in-app preview. Open it in a new tab instead.",
+ );
+ setGate("blocked");
+ }
+ })();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [src, reloadTick, localIssue, displayMode, openRealBrowser]);
+
+ const handlePopOut = useCallback(() => {
+ const url = previewUrl;
+ if (!url) return;
+ popoutOpenedForRef.current = `${url}:${reloadTick}`;
+ openRealBrowser(url);
+ }, [previewUrl, reloadTick, openRealBrowser]);
+
+ const handleReloadPreview = useCallback(() => {
+ if (displayMode === "popout") {
+ handlePopOut();
+ return;
+ }
+ onReload();
+ }, [displayMode, handlePopOut, onReload]);
+
+ let previewBody: ReactNode;
+ if (!src) {
+ previewBody = (
+
+
+ No accessible web port detected yet. Once a container publishes a host port, the preview
+ appears here. You can also type a URL above.
+
+
+
+
+
Real browser preview
+
+ The app opens in a separate window with the real container URL — the same as pasting the
+ address into Chrome or Firefox. That avoids iframe limits and proxy quirks.
+
+
{previewUrl}
+
+
+
+
+ handleDisplayModeChange("inline")}
+ >
+ Try inline preview
+
+
+
+
+
+
In-app preview unavailable
+
{localIssue ?? blockedMessage}
+
{src}
+
+
+
+
+ handleDisplayModeChange("popout")}
+ >
+ Use real browser mode
+
+
+
+
Checking whether this app allows in-app preview…
+
+
+
+
+
+ handleDisplayModeChange("popout")}
+ className={`px-2 py-0.5 text-[10px] rounded transition-colors ${
+ displayMode === "popout"
+ ? "bg-cyan-600/30 text-cyan-200"
+ : "text-slate-500 hover:text-slate-300"
+ }`}
+ >
+ Browser window
+
+ handleDisplayModeChange("inline")}
+ className={`px-2 py-0.5 text-[10px] rounded transition-colors ${
+ displayMode === "inline"
+ ? "bg-cyan-600/30 text-cyan-200"
+ : "text-slate-500 hover:text-slate-300"
+ }`}
+ >
+ Inline
+
+
+ {targets.length > 1 && (
+
onSelectTarget(e.target.value)}
+ aria-label="Preview target"
+ className="h-8 max-w-[260px] rounded border border-slate-700 bg-slate-950 px-2 text-xs text-slate-200 font-mono"
+ >
+ {targets.map((target) => (
+
+ {target.label}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ Inline proxy mode — some apps break here. Switch to{" "}
+ handleDisplayModeChange("popout")}
+ >
+ Browser window
+ {" "}
+ for the same behavior as opening the URL directly.
+
+ )}
+
+
+ {previewBody}
+
+
+ Browser window uses the real container
+ URL (recommended). Inline embeds in
+ this page via iframe or proxy. Do not use localhost:8000 .
+
+
+ );
+}
+
+interface ContainerLogPanelProps {
+ container: RuntimeContainerState;
+ liveLines: LogLine[];
+ connected: boolean;
+}
+
+function ContainerLogPanel({ container, liveLines, connected }: ContainerLogPanelProps) {
+ const scrollRef = useRef(null);
+ const pinnedToBottom = useRef(true);
+
+ const fallbackLines = useMemo(() => {
+ if (liveLines.length > 0) return [];
+ return lastLogsToEntries(container.last_logs);
+ }, [liveLines.length, container.last_logs]);
+
+ const lines = liveLines.length > 0 ? liveLines : fallbackLines;
+
+ const handleScroll = useCallback(() => {
+ const el = scrollRef.current;
+ if (!el) return;
+ pinnedToBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+ }, []);
+
+ useEffect(() => {
+ const el = scrollRef.current;
+ if (!el || !pinnedToBottom.current) return;
+ el.scrollTop = el.scrollHeight;
+ }, [lines]);
+
+ const status = (container.status ?? "").toLowerCase();
+ const isExited = TERMINAL_CONTAINER_STATUSES.has(status) || status === "exited";
+
+ return (
+
+
+
+
+
+ {!isExited &&
+ (connected ? (
+ live
+ ) : (
+ connecting…
+ ))}
+ {isExited && lines.length > 0 && final logs }
+
+
+
+ {lines.length === 0 ? (
+
+ {isExited ? "No logs were captured for this container." : "Waiting for logs…"}
+
+ ) : (
+ lines.map((entry, index) => (
+
+ {entry.timestamp && (
+ [{formatLogTimestamp(entry.timestamp)}]
+ )}
+ {entry.stream === "stderr" && stderr }
+ {entry.line}
+
+ ))
+ )}
+
+
(stateKey, MONITORING_STATE_TTL_MS)
+ ? loadState(stateKey, MONITORING_STATE_TTL_MS)
: null;
- const [containerIds, setContainerIds] = useState([]);
- const [selectedContainerId, setSelectedContainerId] = useState(
- routeContainerId ?? persisted?.selectedContainerId ?? null,
- );
- const [problematicAlert, setProblematicAlert] = useState({
- open: false,
- message: "",
- });
+ const [status, setStatus] = useState(null);
const [dindIp, setDindIp] = useState(null);
- const [manualPreviewUrl, setManualPreviewUrl] = useState(null);
- const [previewReloadTick, setPreviewReloadTick] = useState(0);
- const [containerStates, setContainerStates] = useState>(() => {
- const initial: Record = {};
- if (persisted?.containerStates) {
- for (const [id, s] of Object.entries(persisted.containerStates)) {
- initial[id] = { ...s, connected: false };
+ const [logsByContainer, setLogsByContainer] = useState>(
+ () => persisted?.logsByContainer ?? {},
+ );
+ const [connectionByContainer, setConnectionByContainer] = useState>({});
+ const [metricsByContainer, setMetricsByContainer] = useState<
+ Record
+ >(() => {
+ const initial: Record =
+ {};
+ if (persisted?.metricsByContainer) {
+ for (const [id, entry] of Object.entries(persisted.metricsByContainer)) {
+ initial[id] = {
+ points: entry.points ?? [],
+ latest: entry.latest ?? null,
+ };
}
}
return initial;
});
+ const [metricsConnectedByContainer, setMetricsConnectedByContainer] = useState<
+ Record
+ >({});
+ const [focusedContainerId, setFocusedContainerId] = useState(
+ routeContainerId ?? null,
+ );
+
+ const [selectedTargetUrl, setSelectedTargetUrl] = useState(
+ persisted?.selectedPreviewUrl ?? "",
+ );
+ const [previewAddress, setPreviewAddress] = useState(
+ persisted?.previewAddress ?? persisted?.selectedPreviewUrl ?? "",
+ );
+ const [previewSrc, setPreviewSrc] = useState(persisted?.selectedPreviewUrl ?? "");
+ const [previewReloadTick, setPreviewReloadTick] = useState(0);
+ const [history, setHistory] = useState(
+ persisted?.selectedPreviewUrl ? [persisted.selectedPreviewUrl] : [],
+ );
+ const [historyIndex, setHistoryIndex] = useState(
+ persisted?.selectedPreviewUrl ? 0 : -1,
+ );
+
const socketsRef = useRef>(new Map());
- const cleanupAttemptedRef = useRef(false);
+ const socketGenByContainerRef = useRef>(new Map());
+ const metricsSocketsRef = useRef>(new Map());
+ const metricsSocketGenByContainerRef = useRef>(new Map());
+ const previewInitializedRef = useRef(Boolean(persisted?.selectedPreviewUrl));
- const setResubmitRequired = useCallback(() => {
- if (!jobId) return;
- sessionStorage.setItem(`dqa:resubmitRequired:${jobId}`, "1");
- }, [jobId]);
+ const invalidateContainerSocket = useCallback((containerId: string) => {
+ socketGenByContainerRef.current.set(
+ containerId,
+ (socketGenByContainerRef.current.get(containerId) ?? 0) + 1,
+ );
+ }, []);
- const markProblematicStack = useCallback(
- (message: string, triggerCleanup: boolean) => {
- setResubmitRequired();
- setProblematicAlert({ open: true, message });
- sessionStorage.removeItem("dqa:containerStatus");
-
- if (triggerCleanup && jobId && !cleanupAttemptedRef.current) {
- cleanupAttemptedRef.current = true;
- void composeApi
- .stopDeploy({ job_id: jobId, remove_volumes: true })
- .catch(() => {
- toast.error("Failed to trigger cleanup for problematic stack.");
- });
- }
- },
- [jobId, setResubmitRequired],
+ const invalidateMetricsSocket = useCallback((containerId: string) => {
+ metricsSocketGenByContainerRef.current.set(
+ containerId,
+ (metricsSocketGenByContainerRef.current.get(containerId) ?? 0) + 1,
+ );
+ }, []);
+
+ const closeOpenSocket = useCallback((socket: WebSocket) => {
+ safeCloseSocket(socket);
+ }, []);
+
+ const containers = useMemo(
+ () => status?.containers ?? [],
+ [status?.containers],
);
+ const runtimeState: DeployRuntimeState = status?.runtime_state ?? "none";
+ const shuttingDown = runtimeState === "stopping" || isSessionStopping(jobId ?? undefined);
+ const displayContainers = useMemo(() => {
+ if (containers.length > 0) return containers;
+ const ids = status?.container_ids?.length
+ ? status.container_ids
+ : routeContainerId
+ ? [routeContainerId]
+ : [];
+ return ids.map((id) => ({ id }) as RuntimeContainerState);
+ }, [containers, status?.container_ids, routeContainerId]);
+
+ const liveContainerIds = useMemo(() => {
+ const set = new Set();
+ for (const c of containers) {
+ const st = (c.status ?? "").toLowerCase();
+ if (st && !TERMINAL_CONTAINER_STATUSES.has(st)) set.add(c.id);
+ }
+ if (set.size === 0 && status?.active) {
+ for (const id of status.container_ids ?? []) set.add(id);
+ }
+ return Array.from(set);
+ }, [containers, status?.active, status?.container_ids]);
+ const liveContainerKey = liveContainerIds.join(",");
+
+ const previewTargets = useMemo(
+ () => buildPreviewTargets(displayContainers, dindIp),
+ [displayContainers, dindIp],
+ );
+
+ // Resolve the focused container for the log tabs (route id is an optional initial hint only).
+ useEffect(() => {
+ if (displayContainers.length === 0) return;
+ setFocusedContainerId((current) => {
+ if (current && displayContainers.some((c) => c.id === current)) return current;
+ return displayContainers[0].id;
+ });
+ }, [displayContainers]);
+
+ // Poll deploy status (source of truth). Stop polling once the runtime is terminal.
useEffect(() => {
if (!jobId) return;
let cancelled = false;
- (async () => {
+ let timer: ReturnType | null = null;
+
+ const poll = async () => {
try {
- const status = await composeApi.deployStatus(jobId);
+ const next = await composeApi.deployStatus(jobId);
if (cancelled) return;
+ setStatus(next);
- const rs = status.runtime_state ?? "none";
- const problematicByRuntimeState =
- rs === "failed" ||
- rs === "cleanup_completed" ||
- rs === "exited" ||
- rs === "partial" ||
- rs === "unhealthy";
- const isProblematic = problematicByRuntimeState && !status.stopped_by_user;
- const isTerminal = ["none", "stopped_by_user", "exited", "failed", "cleanup_completed"].includes(rs);
-
- const fromIds =
- status.container_ids.length > 0
- ? status.container_ids
- : (status.containers?.map((c) => c.id).filter(Boolean) as string[]) ?? [];
-
- const ids =
- fromIds.length > 0 ? fromIds : routeContainerId ? [routeContainerId] : [];
-
- if (ids.length > 0) {
- setContainerIds(ids);
- setSelectedContainerId((sel) =>
- sel && ids.includes(sel) ? sel : ids[0],
- );
- } else if (routeContainerId) {
- setContainerIds([routeContainerId]);
- setSelectedContainerId(routeContainerId);
+ const rs = next.runtime_state ?? "none";
+ const problematic =
+ !next.stopped_by_user &&
+ (rs === "failed" || rs === "exited" || rs === "partial" || rs === "unhealthy" || rs === "cleanup_completed");
+ if (problematic) {
+ sessionStorage.setItem(`dqa:resubmitRequired:${jobId}`, "1");
}
- // For terminal states with no active containers, don't attempt to open sockets
- if (isTerminal && !status.active) {
- // Pre-populate exited state so charts show offline state
- const fromDeploy = status.containers ?? [];
- if (fromDeploy.length > 0) {
- setContainerStates((prev) => {
- const next = { ...prev };
- for (const c of fromDeploy) {
- if (!c.id) continue;
- const existing = next[c.id] ?? {
- points: [],
- logs: [],
- latestPayload: null,
- connected: false,
- };
- const lastLogs = (c.last_logs ?? []).filter(
- (l): l is string => typeof l === "string",
- );
- const tailLogs: TerminalLogEntry[] = lastLogs.map((line) => ({
- message: `[deploy] ${line}`,
- tone: "info" as const,
- }));
- next[c.id] = {
- ...existing,
- connected: false,
- exited: {
- exit_code: c.exit_code,
- error: c.error ?? null,
- started_at: c.started_at ?? null,
- finished_at: c.finished_at ?? null,
- restart_count: c.restart_count ?? null,
- oom_killed: c.oom_killed ?? null,
- last_logs: lastLogs,
- },
- logs: [...existing.logs.slice(-200), ...tailLogs.slice(-80)],
- };
- }
- return next;
- });
- }
- return;
+ if (rs === "stopped_by_user" || rs === "none" || !next.active) {
+ if (jobId) clearSessionStopping(jobId);
}
- if (isProblematic) {
- markProblematicStack(
- "Current stack is problematic. Please fix the stack and resubmit.",
- true,
- );
+ if (!TERMINAL_RUNTIME_STATES.has(rs)) {
+ const pollMs =
+ rs === "stopping" || isSessionStopping(jobId) ? DEPLOY_POLL_FAST_MS : DEPLOY_POLL_MS;
+ timer = setTimeout(poll, pollMs);
}
-
- const fromDeploy = status.containers ?? [];
- if (fromDeploy.length === 0) return;
-
- setContainerStates((prev) => {
- const next = { ...prev };
- for (const c of fromDeploy) {
- if (!c.id || c.status !== "exited") continue;
- const existing = next[c.id] ?? {
- points: [],
- logs: [],
- latestPayload: null,
- connected: false,
- };
- const lastLogs = (c.last_logs ?? []).filter(
- (l): l is string => typeof l === "string",
- );
- const tailLogs: TerminalLogEntry[] = lastLogs.map((line) => ({
- message: `[deploy] ${line}`,
- tone: "info" as const,
- }));
- next[c.id] = {
- ...existing,
- connected: false,
- exited: {
- exit_code: c.exit_code,
- error: c.error ?? null,
- started_at: c.started_at ?? null,
- finished_at: c.finished_at ?? null,
- restart_count: c.restart_count ?? null,
- oom_killed: c.oom_killed ?? null,
- last_logs: lastLogs,
- },
- logs: [...existing.logs.slice(-200), ...tailLogs.slice(-80)],
- };
- }
- return next;
- });
} catch {
- if (routeContainerId) {
- setContainerIds([routeContainerId]);
- setSelectedContainerId(routeContainerId);
+ if (!cancelled) {
+ timer = setTimeout(poll, DEPLOY_POLL_MS);
}
}
- })();
+ };
+
+ void poll();
return () => {
cancelled = true;
+ if (timer) clearTimeout(timer);
};
- }, [jobId, routeContainerId, markProblematicStack]);
+ }, [jobId]);
+
+ // Seed log panels from deployStatus.last_logs (survives refresh / late page open).
+ useEffect(() => {
+ const fromStatus = status?.containers ?? [];
+ if (fromStatus.length === 0) return;
+
+ setLogsByContainer((prev) => {
+ const next = { ...prev };
+ for (const container of fromStatus) {
+ const fromDeploy = lastLogsToEntries(container.last_logs);
+ if (fromDeploy.length === 0) continue;
+
+ const existing = next[container.id] ?? [];
+ if (existing.length === 0) {
+ next[container.id] = fromDeploy.slice(-MAX_LOG_LINES);
+ continue;
+ }
+ const seen = new Set(existing.map((entry) => entry.line));
+ const merged = [...existing];
+ for (const entry of fromDeploy) {
+ if (seen.has(entry.line)) continue;
+ seen.add(entry.line);
+ merged.push(entry);
+ }
+ if (merged.length > existing.length) {
+ next[container.id] = merged.slice(-MAX_LOG_LINES);
+ }
+ }
+ return next;
+ });
+ }, [status?.containers]);
+
+ // Resolve DinD IP once for loopback-bound preview targets.
useEffect(() => {
let cancelled = false;
(async () => {
try {
const resolved = await composeApi.dindIp();
if (!cancelled) {
- setDindIp(typeof resolved.dind_ip === "string" && resolved.dind_ip.trim() ? resolved.dind_ip : null);
+ setDindIp(
+ typeof resolved.dind_ip === "string" && resolved.dind_ip.trim()
+ ? resolved.dind_ip
+ : null,
+ );
}
} catch {
if (!cancelled) setDindIp(null);
@@ -325,203 +969,258 @@ export function Monitoring() {
};
}, []);
+ // Initialize the preview target once when one first becomes available.
useEffect(() => {
- if (!user?.id || containerIds.length === 0 || problematicAlert.open) return;
+ if (previewInitializedRef.current) return;
+ if (previewTargets.length === 0) return;
+ const target = previewTargets[0].url;
+ previewInitializedRef.current = true;
+ setSelectedTargetUrl(target);
+ setPreviewAddress(target);
+ setPreviewSrc(target);
+ setHistory([target]);
+ setHistoryIndex(0);
+ setPreviewReloadTick((v) => v + 1);
+ }, [previewTargets]);
- const existingSockets = socketsRef.current;
- for (const cid of containerIds) {
- if (existingSockets.has(cid)) continue;
+ // Open one live-logs websocket per active container. Stable across data updates.
+ useEffect(() => {
+ if (!user?.id || liveContainerIds.length === 0) return;
+ const sockets = socketsRef.current;
- const socket = ws.connectUserContainer(user.id, cid);
- existingSockets.set(cid, socket);
+ for (const cid of liveContainerIds) {
+ if (sockets.has(cid)) continue;
+ const connectionGen = (socketGenByContainerRef.current.get(cid) ?? 0) + 1;
+ socketGenByContainerRef.current.set(cid, connectionGen);
+ const socket = ws.connectUserContainerLogs(user.id, cid);
+ sockets.set(cid, socket);
socket.onopen = () => {
- setContainerStates((prev) => ({
- ...prev,
- [cid]: {
- ...(prev[cid] ?? { points: [], logs: [], latestPayload: null, connected: false }),
- connected: true,
- logs: [...(prev[cid]?.logs ?? []), { message: `Connected to ${cid.slice(0, 12)}`, tone: "success" as const }],
- },
- }));
+ if (socketGenByContainerRef.current.get(cid) !== connectionGen) {
+ closeOpenSocket(socket);
+ return;
+ }
+ setConnectionByContainer((prev) => ({ ...prev, [cid]: true }));
};
socket.onmessage = (event) => {
+ if (socketGenByContainerRef.current.get(cid) !== connectionGen) return;
try {
const parsed = JSON.parse(event.data as string) as DomainEvent;
+ if (parsed.event_name !== "container.log") return;
+ const payload = parsed.payload as ContainerLogPayload;
+ const stream: LogStream =
+ payload.stream === "stderr" || payload.stream === "system" ? payload.stream : "stdout";
+ const line = typeof payload.line === "string" ? payload.line : "";
+ if (!line) return;
+ const entry: LogLine = {
+ stream,
+ line,
+ timestamp: payload.timestamp ?? parsed.timestamp,
+ tone: classifyLogTone(stream, line),
+ };
+ setLogsByContainer((prev) => {
+ const existing = prev[cid] ?? [];
+ return { ...prev, [cid]: [...existing, entry].slice(-MAX_LOG_LINES) };
+ });
+ } catch {
+ // ignore malformed frames
+ }
+ };
- if (parsed.event_name === "container.exited") {
- const p = parsed.payload as ContainerExitedState & { container_id?: string };
- setContainerStates((prev) => {
- const existing = prev[cid] ?? { points: [], logs: [], latestPayload: null, connected: false };
- const exitMsg = `Container exited (code ${p.exit_code ?? "??"})${p.oom_killed ? " [OOM killed]" : ""}${p.error ? ` — ${p.error}` : ""}`;
- const lastLogEntries: TerminalLogEntry[] = (p.last_logs ?? []).map(l => ({ message: l, tone: "error" as const }));
- return {
- ...prev,
- [cid]: {
- ...existing,
- connected: false,
- exited: p,
- logs: [...existing.logs.slice(-200), { message: exitMsg, tone: "error" as const }, ...lastLogEntries],
- },
- };
- });
- return;
- }
+ socket.onerror = () => {
+ if (socketGenByContainerRef.current.get(cid) !== connectionGen) return;
+ setConnectionByContainer((prev) => ({ ...prev, [cid]: false }));
+ };
+ socket.onclose = () => {
+ if (socketGenByContainerRef.current.get(cid) !== connectionGen) return;
+ setConnectionByContainer((prev) => ({ ...prev, [cid]: false }));
+ sockets.delete(cid);
+ };
+ }
+
+ // Close sockets for containers no longer live.
+ for (const [cid, socket] of sockets) {
+ if (!liveContainerIds.includes(cid)) {
+ invalidateContainerSocket(cid);
+ closeOpenSocket(socket);
+ sockets.delete(cid);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [user?.id, liveContainerKey, closeOpenSocket, invalidateContainerSocket]);
+
+ // Open one metrics websocket per active container.
+ useEffect(() => {
+ if (!user?.id || liveContainerIds.length === 0) return;
+ const sockets = metricsSocketsRef.current;
+
+ for (const cid of liveContainerIds) {
+ if (sockets.has(cid)) continue;
+ const connectionGen = (metricsSocketGenByContainerRef.current.get(cid) ?? 0) + 1;
+ metricsSocketGenByContainerRef.current.set(cid, connectionGen);
+ const socket = ws.connectUserContainer(user.id, cid);
+ sockets.set(cid, socket);
+
+ socket.onopen = () => {
+ if (metricsSocketGenByContainerRef.current.get(cid) !== connectionGen) {
+ closeOpenSocket(socket);
+ return;
+ }
+ setMetricsConnectedByContainer((prev) => ({ ...prev, [cid]: true }));
+ };
+
+ socket.onmessage = (event) => {
+ if (metricsSocketGenByContainerRef.current.get(cid) !== connectionGen) return;
+ try {
+ const parsed = JSON.parse(event.data as string) as DomainEvent;
if (parsed.event_name !== "container.metrics") return;
const payload = parsed.payload as ContainerMetricsPayload;
- const cpu = typeof payload.cpu_percent === "number" ? payload.cpu_percent : null;
- const memBytes = typeof payload.memory_bytes === "number" ? payload.memory_bytes : null;
- const memoryMb = memBytes == null ? null : memBytes / (1024 * 1024);
- const ts = new Date(parsed.timestamp).getTime();
-
- setContainerStates((prev) => {
- const existing = prev[cid] ?? { points: [], logs: [], latestPayload: null, connected: true };
- const nextPoints = [
- ...existing.points,
- {
- timestamp: Number.isNaN(ts) ? Date.now() : ts,
- label: new Date(ts || Date.now()).toLocaleTimeString(),
- cpuPercent: cpu,
- memoryMb,
- },
- ].slice(-MAX_POINTS);
+ setMetricsByContainer((prev) => {
+ const existing = prev[cid] ?? { points: [], latest: null };
+ const nextPoints = appendMetricSample(
+ existing.points,
+ payload,
+ parsed.timestamp,
+ existing.latest,
+ );
return {
...prev,
- [cid]: {
- ...existing,
- latestPayload: payload,
- points: nextPoints,
- logs: [...existing.logs.slice(-200), { message: `cpu_percent=${cpu ?? "null"} memory_bytes=${memBytes ?? "null"} memory_percent=${payload.memory_percent ?? "null"}`, timestamp: parsed.timestamp, tone: "info" as const }],
- },
+ [cid]: { points: nextPoints, latest: payload },
};
});
} catch {
- // ignore parse errors
+ // ignore malformed frames
}
};
socket.onerror = () => {
- setContainerStates((prev) => ({
- ...prev,
- [cid]: {
- ...(prev[cid] ?? { points: [], logs: [], latestPayload: null, connected: false }),
- connected: false,
- },
- }));
- toast.error(`Stream error: ${cid.slice(0, 12)}`);
+ if (metricsSocketGenByContainerRef.current.get(cid) !== connectionGen) return;
+ setMetricsConnectedByContainer((prev) => ({ ...prev, [cid]: false }));
};
socket.onclose = () => {
- setContainerStates((prev) => ({
- ...prev,
- [cid]: {
- ...(prev[cid] ?? { points: [], logs: [], latestPayload: null, connected: false }),
- connected: false,
- },
- }));
- existingSockets.delete(cid);
+ if (metricsSocketGenByContainerRef.current.get(cid) !== connectionGen) return;
+ setMetricsConnectedByContainer((prev) => ({ ...prev, [cid]: false }));
+ sockets.delete(cid);
};
}
+ for (const [cid, socket] of sockets) {
+ if (!liveContainerIds.includes(cid)) {
+ invalidateMetricsSocket(cid);
+ closeOpenSocket(socket);
+ sockets.delete(cid);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [user?.id, liveContainerKey, closeOpenSocket, invalidateMetricsSocket]);
+
+ // Close all sockets on unmount.
+ useEffect(() => {
+ const logSockets = socketsRef.current;
+ const metricSockets = metricsSocketsRef.current;
return () => {
- for (const [, socket] of existingSockets) {
- try { socket.close(); } catch { /* noop */ }
+ for (const [cid, socket] of logSockets) {
+ invalidateContainerSocket(cid);
+ closeOpenSocket(socket);
}
- existingSockets.clear();
+ logSockets.clear();
+ for (const [cid, socket] of metricSockets) {
+ invalidateMetricsSocket(cid);
+ closeOpenSocket(socket);
+ }
+ metricSockets.clear();
};
- }, [user?.id, containerIds, problematicAlert.open]);
+ }, [closeOpenSocket, invalidateContainerSocket, invalidateMetricsSocket]);
+ // Persist preview selection + recent logs + metrics samples.
useEffect(() => {
if (!stateKey) return;
- const persistable: MonitoringPersistedState["containerStates"] = {};
- for (const [id, s] of Object.entries(containerStates)) {
- persistable[id] = {
- points: s.points.slice(-MAX_POINTS),
- logs: s.logs.slice(-200),
- latestPayload: s.latestPayload,
+ const trimmedLogs: Record = {};
+ for (const [cid, lines] of Object.entries(logsByContainer)) {
+ trimmedLogs[cid] = lines.slice(-PERSIST_LOG_LINES);
+ }
+ const trimmedMetrics: Record = {};
+ for (const [cid, entry] of Object.entries(metricsByContainer)) {
+ trimmedMetrics[cid] = {
+ points: entry.points.slice(-PERSIST_METRIC_POINTS),
+ latest: entry.latest ? trimPayloadForPersist(entry.latest) : null,
};
}
- saveState(stateKey, { containerStates: persistable, selectedContainerId });
- }, [containerStates, selectedContainerId, stateKey]);
-
- const currentState: ContainerState | null = selectedContainerId
- ? containerStates[selectedContainerId] ?? null
- : null;
-
- const chartData = useMemo(() => currentState?.points ?? [], [currentState?.points]);
- const latestPayload = currentState?.latestPayload ?? null;
- const connected = currentState?.connected ?? false;
- const exitedState = currentState?.exited ?? null;
- const latest = chartData[chartData.length - 1] ?? null;
- const netTotals = latestPayload?.network?.totals;
- const ioStats = latestPayload?.io;
- const pids = latestPayload?.pids;
- const container = latestPayload?.container;
- const currentHealthStatus = String(container?.health_status ?? "").toLowerCase();
- const isUnhealthyLive = !exitedState && connected && currentHealthStatus === "unhealthy";
- const interfaces = useMemo(() => {
- const raw = latestPayload?.network?.interfaces;
- if (!raw || typeof raw !== "object") return [];
- return Object.entries(raw).map(([name, value]) => ({
- name,
- data: typeof value === "object" && value ? (value as Record) : {},
- }));
- }, [latestPayload]);
-
- const previewTargets = useMemo(() => {
- if (!container) return [];
- const candidates: PreviewTarget[] = [];
- const seen = new Set();
- const protocol = "http://";
- const hostname =
- typeof window !== "undefined" && window.location.hostname
- ? window.location.hostname
- : "localhost";
+ saveState(stateKey, {
+ selectedPreviewUrl: selectedTargetUrl,
+ previewAddress,
+ logsByContainer: trimmedLogs,
+ metricsByContainer: trimmedMetrics,
+ });
+ }, [stateKey, selectedTargetUrl, previewAddress, logsByContainer, metricsByContainer]);
- for (const portInfo of container.ports ?? []) {
- const containerPort = normalizeContainerPort(portInfo.container_port);
- if (!containerPort) continue;
+ const historyIndexRef = useRef(historyIndex);
+ useEffect(() => {
+ historyIndexRef.current = historyIndex;
+ }, [historyIndex]);
- for (const binding of portInfo.host_bindings ?? []) {
- const rawHostIp = String(binding.host_ip ?? "").trim();
- const hostPort = String(binding.host_port ?? "").trim();
- if (!hostPort) continue;
- const host = isLoopbackBinding(rawHostIp) ? dindIp || hostname : rawHostIp;
- const url = `${protocol}${host}:${hostPort}`;
- if (seen.has(url)) continue;
- seen.add(url);
- candidates.push({
- key: `host-${host}-${hostPort}-${containerPort}`,
- label: `${host}:${hostPort} -> ${containerPort}`,
- url,
- });
- }
+ const navigatePreview = useCallback((url: string) => {
+ const trimmed = url.trim();
+ if (!trimmed) return;
+ const newIndex = historyIndexRef.current + 1;
+ setHistory((prev) => [...prev.slice(0, historyIndexRef.current + 1), trimmed]);
+ historyIndexRef.current = newIndex;
+ setHistoryIndex(newIndex);
+ setPreviewSrc(trimmed);
+ setPreviewAddress(trimmed);
+ setPreviewReloadTick((v) => v + 1);
+ }, []);
- if (container.ip_address) {
- const ipUrl = `${protocol}${container.ip_address}:${containerPort}`;
- if (!seen.has(ipUrl)) {
- seen.add(ipUrl);
- candidates.push({
- key: `container-ip-${container.ip_address}-${containerPort}`,
- label: `container ${container.ip_address}:${containerPort}`,
- url: ipUrl,
- });
- }
- }
- }
+ const handleSelectTarget = useCallback(
+ (url: string) => {
+ setSelectedTargetUrl(url);
+ navigatePreview(url);
+ },
+ [navigatePreview],
+ );
- return candidates;
- }, [container, dindIp]);
+ const handleAddressSubmit = useCallback(() => {
+ navigatePreview(previewAddress);
+ }, [navigatePreview, previewAddress]);
- const selectedPreviewUrl = useMemo(() => {
- if (previewTargets.length === 0) return "";
- if (manualPreviewUrl && previewTargets.some((t) => t.url === manualPreviewUrl)) {
- return manualPreviewUrl;
- }
- return previewTargets[0].url;
- }, [previewTargets, manualPreviewUrl]);
+ const handleReload = useCallback(() => {
+ if (!previewSrc) return;
+ setPreviewReloadTick((v) => v + 1);
+ }, [previewSrc]);
+
+ const handleBack = useCallback(() => {
+ setHistoryIndex((index) => {
+ if (index <= 0) return index;
+ const nextIndex = index - 1;
+ const url = history[nextIndex];
+ setPreviewSrc(url);
+ setPreviewAddress(url);
+ setPreviewReloadTick((v) => v + 1);
+ historyIndexRef.current = nextIndex;
+ return nextIndex;
+ });
+ }, [history]);
+
+ const handleForward = useCallback(() => {
+ setHistoryIndex((index) => {
+ if (index >= history.length - 1) return index;
+ const nextIndex = index + 1;
+ const url = history[nextIndex];
+ setPreviewSrc(url);
+ setPreviewAddress(url);
+ setPreviewReloadTick((v) => v + 1);
+ historyIndexRef.current = nextIndex;
+ return nextIndex;
+ });
+ }, [history]);
+
+ const focusedContainer = useMemo(() => {
+ if (!focusedContainerId) return displayContainers[0] ?? null;
+ return displayContainers.find((c) => c.id === focusedContainerId) ?? displayContainers[0] ?? null;
+ }, [displayContainers, focusedContainerId]);
if (!user?.id) {
return (
@@ -531,431 +1230,202 @@ export function Monitoring() {
);
}
+ const runningCount = status?.running_count ?? 0;
+ const exitedCount = status?.exited_count ?? 0;
+ const unhealthyCount = status?.unhealthy_count ?? 0;
+ const headerBadge = (() => {
+ if (runtimeState === "stopping" || shuttingDown) {
+ return { label: "Stopping", className: "border-slate-700 bg-slate-900 text-slate-400", icon: PlugZap };
+ }
+ if (runtimeState === "stopped_by_user") {
+ return { label: "Stopped by user", className: "border-slate-700 bg-slate-900 text-slate-400", icon: PlugZap };
+ }
+ if (runtimeState === "running" && !shuttingDown) {
+ return { label: "Running", className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-300", icon: PlugZap };
+ }
+ if (runtimeState === "unhealthy") {
+ return { label: "Unhealthy", className: "border-amber-500/40 bg-amber-500/10 text-amber-300", icon: AlertTriangle };
+ }
+ if (runtimeState === "partial") {
+ return { label: "Partial", className: "border-amber-500/40 bg-amber-500/10 text-amber-300", icon: AlertTriangle };
+ }
+ if (runtimeState === "exited" || runtimeState === "failed" || runtimeState === "cleanup_completed") {
+ return { label: runtimeState === "failed" ? "Failed" : "Exited", className: "border-red-500/40 bg-red-500/10 text-red-300", icon: XCircle };
+ }
+ return { label: "No active runtime", className: "border-slate-700 bg-slate-900 text-slate-400", icon: PlugZap };
+ })();
+ const HeaderIcon = headerBadge.icon;
+ const showRunningDot = runtimeState === "running" && !shuttingDown;
+
return (
-
-
-
-
navigate(jobId ? `/execution?jobId=${jobId}` : "/history")}
- className="text-slate-400 hover:text-white"
- >
-
-
-
-
-
-
- {dindIp ?? "unresolved"}
-
-
- {problematicAlert.open || exitedState ?
-
-
-
- {problematicAlert.open && (
-
-
-
-
-
- Problematic Stack Detected
-
-
{problematicAlert.message}
-
- Please fix your stack and resubmit. Analysis remains available in Results.
-
-
+
+
+
navigate(jobId ? `/results?jobId=${jobId}` : "/history")}
- className="bg-red-700 hover:bg-red-800"
+ onClick={() => navigate(jobId ? `/execution?jobId=${jobId}` : "/history")}
+ className="text-slate-400 hover:text-white"
>
- I Understand
+
+
+
-
- )}
-
- {containerIds.length > 1 && (
-
- {containerIds.map((cid) => {
- const isSelected = cid === selectedContainerId;
- const cState = containerStates[cid];
- const isConnected = cState?.connected ?? false;
- const isExited = !!cState?.exited;
- const cHealthStatus = String(cState?.latestPayload?.container?.health_status ?? "").toLowerCase();
- const isUnhealthy = !isExited && isConnected && cHealthStatus === "unhealthy";
- return (
- setSelectedContainerId(cid)}
- className={`px-2 py-1 rounded border text-xs font-mono transition-colors ${
- isSelected
- ? "border-blue-500 bg-blue-500/20 text-blue-200"
- : "border-slate-700 bg-slate-800 text-slate-400 hover:border-slate-500"
- }`}
- >
-
- ✕ }
-
-
- );
- })}
-
- )}
-
- {exitedState && (
-
-
-
-
-
- Container Exited
- {exitedState.exit_code != null && (
-
- exit code: {exitedState.exit_code}
-
- )}
- {exitedState.oom_killed && (
- OOM Killed
- )}
-
- {exitedState.error && (
-
{exitedState.error}
- )}
-
- {exitedState.started_at && (
- Started: {new Date(exitedState.started_at).toLocaleString()}
- )}
- {exitedState.finished_at && (
- Finished: {new Date(exitedState.finished_at).toLocaleString()}
- )}
- {exitedState.restart_count != null && exitedState.restart_count > 0 && (
- Restarts: {exitedState.restart_count}
- )}
-
- {Array.isArray(exitedState.last_logs) && exitedState.last_logs.length > 0 && (
-
-
- Last logs ({exitedState.last_logs.length} lines)
-
-
- {exitedState.last_logs.join("\n")}
-
-
- )}
- {chartData.length === 0 && (
-
- Container exited before metrics were collected.
-
+
+
+ {dindIp ?? "unresolved"}
+
+
+ {showRunningDot && !reducedMotion ? (
+
+ {headerBadge.label}
+
-
- )}
+
-
-
-
- CPU %
-
-
- {latest?.cpuPercent != null ? `${latest.cpuPercent}` : "-"}
-
-
-
-
-
-
- Mem bytes
-
-
- {latestPayload?.memory_bytes != null ? `${latestPayload.memory_bytes}` : "-"}
-
-
-
-
-
-
- Net RX / TX
-
-
- {netTotals?.rx_bytes ?? "-"} / {netTotals?.tx_bytes ?? "-"}
-
-
-
-
-
-
- I/O R / W
-
-
- {ioStats?.read_bytes ?? "-"} / {ioStats?.write_bytes ?? "-"}
-
-
-
-
-
-
- PIDs
-
-
- {typeof pids?.current === "number" ? pids.current : "-"}
-
-
-
-
-
-
- Status
-
-
- {currentState?.connected && (
-
+
navigate(jobId ? `/results?jobId=${jobId}` : "/history")}
+ />
+
+ {/* Runtime overview */}
+
+
+
+ Project: {status?.project_name ?? "-"}
+
+
+ Containers: {displayContainers.length}
+
+ {shuttingDown ? (
+ shutting down (Docker may still report running briefly)
+ ) : (
+ <>
+ running {runningCount}
+ unhealthy {unhealthyCount}
+ exited {exitedCount}
+
)}
- {container?.status ?? "-"} / {container?.health_status ?? "-"}
-
-
-
-
-
-
- CPU (%)
- {chartData.length === 0 ? (
-
- {exitedState
- ? "Container exited before metrics were collected."
- : "Waiting for metrics..."}
-
- ) : (
-
-
-
- [`${value.toFixed(4)}%`, "CPU"]}
- />
-
-
-
- )}
-
-
- Memory (MB)
- {chartData.length === 0 ? (
-
- {exitedState
- ? "Container exited before metrics were collected."
- : "Waiting for metrics..."}
-
- ) : (
-
-
-
- [`${value.toFixed(4)} MB`, "Memory"]}
- />
-
-
+ {displayContainers.length > 0 && (
+
+ {displayContainers.map((c) => {
+ const badge = containerStatusBadge(c, shuttingDown);
+ return (
+
+
+ );
+ })}
)}
-
-
- Container
-
- Name
- {container?.name ?? "-"}
- Image
- {container?.image ?? "-"}
- IP
- {container?.ip_address || "-"}
- Started
- {container?.started_at ? new Date(container.started_at).toLocaleString() : "-"}
- Restarts
- {container?.restart_count ?? "-"}
- Mounts
- {Array.isArray(container?.mounts) ? container?.mounts.length : 0}
- Samples
- {chartData.length}
-
-
-
- Ports
- {!container?.ports || container.ports.length === 0 ? (
- No port mappings.
- ) : (
-
- {container.ports.map((p, i) => (
-
- {p.container_port}
- {p.host_bindings && p.host_bindings.length > 0 && (
-
- {" → "}
- {p.host_bindings.map((b, j) => (
-
- {b.host_ip || "0.0.0.0"}:{b.host_port}
- {j < (p.host_bindings?.length ?? 0) - 1 ? ", " : ""}
-
- ))}
-
- )}
-
- ))}
-
-
- Network interfaces
- {interfaces.length === 0 ? (
- No data yet.
- ) : (
-
- {interfaces.map((iface) => (
-
-
{iface.name}
-
- RX: {formatBytes(iface.data.rx_bytes as number | null | undefined)}
- TX: {formatBytes(iface.data.tx_bytes as number | null | undefined)}
- Pkts: {String(iface.data.rx_packets ?? "-")}/{String(iface.data.tx_packets ?? "-")}
- Err: {String(iface.data.rx_errors ?? "-")}/{String(iface.data.tx_errors ?? "-")}
-
-
- ))}
-
-
+
0}
+ canGoForward={historyIndex >= 0 && historyIndex < history.length - 1}
+ onSubmit={handleAddressSubmit}
+ onReload={handleReload}
+ onBack={handleBack}
+ onForward={handleForward}
+ />
-
-
-
-
-
- {previewTargets.length > 0 && (
-
setManualPreviewUrl(e.target.value)}
- className="h-8 rounded border border-slate-700 bg-slate-950 px-2 text-xs text-slate-200 font-mono"
- >
- {previewTargets.map((target) => (
-
- {target.label}
-
- ))}
-
+
+
+
+ {displayContainers.length > 1 && (
+
+ {displayContainers.map((c) => {
+ const isFocused = c.id === focusedContainer?.id;
+ const badge = containerStatusBadge(c, shuttingDown);
+ return (
+ setFocusedContainerId(c.id)}
+ className={`px-2 py-1 rounded border text-xs font-mono transition-colors flex items-center gap-1.5 ${
+ isFocused
+ ? "border-blue-500 bg-blue-500/20 text-blue-200"
+ : "border-slate-700 bg-slate-800 text-slate-400 hover:border-slate-500"
+ }`}
+ >
+
+ );
+ })}
+
)}
- setPreviewReloadTick((v) => v + 1)}
- className="border-slate-700 text-slate-300 hover:bg-slate-800"
- >
-
- selectedPreviewUrl && window.open(selectedPreviewUrl, "_blank", "noopener,noreferrer")}
- className="border-slate-700 text-slate-300 hover:bg-slate-800"
- >
-
-
+ {focusedContainer ? (
+
+ ) : (
+
+
No containers to show logs for.
+
+ )}
+
-
- {selectedPreviewUrl}
-
-
-
- No accessible web port detected yet. Once a container exposes host bindings, preview appears here.
-
- )}
-
- If preview stays blank, the app may block framing (`X-Frame-Options`) or bind to an unreachable network.
-
-
-
-
+ 1}
+ />
+
+ [] = [
+ {
+ id: "resolve",
+ label: "Resolving repository",
+ description: "Contacting GitHub and resolving the branch or tag",
+ },
+ {
+ id: "download",
+ label: "Downloading archive",
+ description: "Fetching the repository zipball — large repos can take up to a minute",
+ },
+ {
+ id: "extract",
+ label: "Extracting archive",
+ description: "Unpacking files and validating archive safety limits",
+ },
+ {
+ id: "scan",
+ label: "Scanning project",
+ description: "Detecting Dockerfiles, Compose files, and related assets",
+ },
+ {
+ id: "queue",
+ label: "Queueing analysis",
+ description: "Creating the background analysis job",
+ },
+];
+
+const ZIP_IMPORT_PHASE_DEFS: Omit[] = [
+ {
+ id: "upload",
+ label: "Uploading archive",
+ description: "Sending the ZIP file to the server",
+ },
+ {
+ id: "extract",
+ label: "Extracting archive",
+ description: "Unpacking files and validating archive safety limits",
+ },
+ {
+ id: "scan",
+ label: "Scanning project",
+ description: "Detecting Dockerfiles, Compose files, and related assets",
+ },
+ {
+ id: "queue",
+ label: "Queueing analysis",
+ description: "Creating the background analysis job",
+ },
+];
+
+/** Estimated phase transitions while the import HTTP request is in flight. */
+const GITHUB_PHASE_ADVANCE_MS = [2_000, 15_000, 24_000, 32_000] as const;
+const ZIP_PHASE_ADVANCE_MS = [800, 2_500, 5_000] as const;
+
+function buildInitialPhases(mode: SourceMode): ImportPhase[] {
+ const defs = mode === "github" ? GITHUB_IMPORT_PHASE_DEFS : ZIP_IMPORT_PHASE_DEFS;
+ return defs.map((phase, index) => ({
+ ...phase,
+ status: index === 0 ? "running" : "pending",
+ }));
+}
+
+function advanceImportPhases(phases: ImportPhase[], activeIndex: number): ImportPhase[] {
+ return phases.map((phase, index) => {
+ if (index < activeIndex) return { ...phase, status: "complete" };
+ if (index === activeIndex) return { ...phase, status: "running" };
+ return { ...phase, status: "pending" };
+ });
+}
+
+function completeImportPhases(phases: ImportPhase[]): ImportPhase[] {
+ return phases.map((phase) => ({ ...phase, status: "complete" }));
+}
+
+function failImportPhases(phases: ImportPhase[]): ImportPhase[] {
+ let failed = false;
+ return phases.map((phase) => {
+ if (failed) return phase;
+ if (phase.status === "running") {
+ failed = true;
+ return { ...phase, status: "error" };
+ }
+ return phase;
+ });
+}
+
+function importProgressValue(phases: ImportPhase[]): number {
+ if (!phases.length) return 0;
+ const completed = phases.filter((p) => p.status === "complete").length;
+ const running = phases.some((p) => p.status === "running") ? 0.35 : 0;
+ return Math.min(100, Math.round(((completed + running) / phases.length) * 100));
+}
export function ProjectUpload() {
const navigate = useNavigate();
@@ -42,6 +145,35 @@ export function ProjectUpload() {
const [githubUrl, setGithubUrl] = useState("");
const [githubRef, setGithubRef] = useState("");
const [error, setError] = useState(null);
+ const [importPhases, setImportPhases] = useState([]);
+ const [elapsedSeconds, setElapsedSeconds] = useState(0);
+ const importStartedAtRef = useRef(null);
+
+ useEffect(() => {
+ if (step !== "uploading") {
+ importStartedAtRef.current = null;
+ return;
+ }
+
+ importStartedAtRef.current = Date.now();
+ const tick = window.setInterval(() => {
+ if (importStartedAtRef.current) {
+ setElapsedSeconds(Math.floor((Date.now() - importStartedAtRef.current) / 1000));
+ }
+ }, 1000);
+
+ const advances = sourceMode === "github" ? GITHUB_PHASE_ADVANCE_MS : ZIP_PHASE_ADVANCE_MS;
+ const advanceTimers = advances.map((ms, index) =>
+ window.setTimeout(() => {
+ setImportPhases((prev) => advanceImportPhases(prev, index + 1));
+ }, ms),
+ );
+
+ return () => {
+ clearInterval(tick);
+ advanceTimers.forEach(clearTimeout);
+ };
+ }, [step, sourceMode]);
const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
@@ -60,18 +192,23 @@ export function ProjectUpload() {
}
setError(null);
setSelectedFile(file);
+ setImportPhases(buildInitialPhases("zip"));
+ setElapsedSeconds(0);
setStep("uploading");
try {
const resp = await project.upload(file);
+ setImportPhases((prev) => completeImportPhases(prev));
sessionStorage.setItem("analysisJobId", resp.job_id);
sessionStorage.setItem("projectJobId", resp.job_id);
toast.success("Project queued for analysis!");
navigate(`/analysis?jobId=${resp.job_id}`);
} catch (err) {
const msg = err instanceof ApiError ? err.message : err instanceof Error ? err.message : "Upload failed.";
+ setImportPhases((prev) => failImportPhases(prev));
setError(msg);
toast.error(msg);
+ setElapsedSeconds(0);
setStep("upload");
}
};
@@ -88,9 +225,12 @@ export function ProjectUpload() {
setError(null);
setSelectedFile(null);
+ setImportPhases(buildInitialPhases("github"));
+ setElapsedSeconds(0);
setStep("uploading");
try {
const resp = await project.uploadGithub({ url, ref: ref || null });
+ setImportPhases((prev) => completeImportPhases(prev));
sessionStorage.setItem("analysisJobId", resp.job_id);
sessionStorage.setItem("projectJobId", resp.job_id);
toast.success("GitHub repository queued for analysis!");
@@ -102,8 +242,10 @@ export function ProjectUpload() {
: err instanceof Error
? err.message
: "GitHub import failed.";
+ setImportPhases((prev) => failImportPhases(prev));
setError(msg);
toast.error(msg);
+ setElapsedSeconds(0);
setStep("upload");
}
};
@@ -192,7 +334,7 @@ export function ProjectUpload() {
Drop your project archive here
- Accepts .zip archives up to 30 MB
+ Accepts .zip archives up to 200 MB
{ e.stopPropagation(); fileInputRef.current?.click(); }}
className="bg-purple-600 hover:bg-purple-700"
@@ -272,7 +414,7 @@ export function ProjectUpload() {
- Only public GitHub repositories are supported.
+ Only public GitHub repositories are supported. Large repositories may take up to a minute to download before analysis begins.
-
- {sourceMode === "github" ? "Importing and scanning…" : "Uploading and scanning…"}
-
-
- {sourceMode === "github"
- ? githubRef.trim()
- ? `${githubUrl.trim()} @ ${githubRef.trim()}`
- : githubUrl.trim() || "Processing repository"
- : selectedFile
- ? `${selectedFile.name} (${formatBytes(selectedFile.size)})`
- : "Processing archive"}
-
- Analysis will start automatically
+
+
+
+ {sourceMode === "github" ? "Importing from GitHub" : "Uploading project archive"}
+
+
+ {sourceMode === "github"
+ ? githubRef.trim()
+ ? `${githubUrl.trim()} @ ${githubRef.trim()}`
+ : githubUrl.trim() || "Processing repository"
+ : selectedFile
+ ? `${selectedFile.name} (${formatBytes(selectedFile.size)})`
+ : "Processing archive"}
+
+
+ Elapsed {elapsedSeconds}s — analysis will start automatically after import
+
+
+
+ Import progress
+ {importProgressValue(importPhases)}%
+
+
+
+ {importPhases.map((phase) => (
+
+ ))}
+
)}
diff --git a/frontend/src/pages/ResearchAnalytics.tsx b/frontend/src/pages/ResearchAnalytics.tsx
index d42bfe4..f19829c 100644
--- a/frontend/src/pages/ResearchAnalytics.tsx
+++ b/frontend/src/pages/ResearchAnalytics.tsx
@@ -119,6 +119,228 @@ function findingSeverityBadge(severity: ResearchFindingFrequency["severity"]): s
const FOCUSABLE_SELECTOR =
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const METADATA_LABELS: Record
= {
+ file_extension: "File extension",
+ line_count: "Line count",
+ service_count: "Compose services",
+ has_dockerfile: "Includes Dockerfile",
+ has_compose: "Includes Compose",
+ uses_build: "Uses build",
+ uses_volumes: "Uses volumes",
+ uses_networks: "Uses networks",
+ detected_analyzer: "Analyzer",
+};
+
+function formatMetaValue(value: unknown): string {
+ if (typeof value === "boolean") return value ? "Yes" : "No";
+ if (value == null || value === "") return "—";
+ return String(value);
+}
+
+function ResearchSourcePrivacyNotice() {
+ return (
+
+
+
+
No Dockerfile or Compose source here
+
+ Research is anonymized: filenames, file contents, and paths are never shown. You only
+ see aggregate metadata and issue codes. For full file preview and highlighted findings,
+ open your own job from{" "}
+
+
+
+
+
+ Job ID
+
+ {job.id}
+
+
+
+ Anonymized contributor
+
+ {job.anonymized_submitter}
+
+
+
+ Type / status
+
+
+
+ {job.type}
+
+
+ {job.status}
+
+
+
+
+ );
+}
+
+function ResearchJobDetailSummary({ job }: { job: PublicResearchJob }) {
+ const result = job.public_result;
+ const severity =
+ result && typeof result.severity_distribution === "object"
+ ? (result.severity_distribution as Record)
+ : null;
+ const issueCodes =
+ result && Array.isArray(result.issue_codes)
+ ? (result.issue_codes as string[]).filter(Boolean)
+ : [];
+ const docUrls =
+ result && Array.isArray(result.doc_urls)
+ ? (result.doc_urls as string[]).filter(Boolean)
+ : [];
+
+ const metaRows = Object.entries(METADATA_LABELS)
+ .map(([key, label]) => {
+ const value = job.public_metadata[key];
+ if (value == null || value === "") return null;
+ return { label, value: formatMetaValue(value) };
+ })
+ .filter((row): row is { label: string; value: string } => row != null);
+
+ const signalRows: { label: string; value: string }[] = [];
+ const score = job.score ?? (typeof result?.score === "number" ? result.score : null);
+ const grade = job.grade ?? (typeof result?.grade === "string" ? result.grade : null);
+ if (score != null) signalRows.push({ label: "Score", value: String(score) });
+ if (grade) signalRows.push({ label: "Grade", value: grade });
+ for (const [key, label] of [
+ ["errors_count", "Errors"],
+ ["warnings_count", "Warnings"],
+ ["suggestions_count", "Suggestions"],
+ ["security_count", "Security findings"],
+ ] as const) {
+ const n = result?.[key];
+ if (typeof n === "number") signalRows.push({ label, value: String(n) });
+ }
+
+ return (
+
+
+
+
+ {metaRows.length > 0 ? (
+
+
+ Public metadata
+
+
+ {metaRows.map((row) => (
+
+
{row.label}
+ {row.value}
+
+ ))}
+
+
+ ) : null}
+
+ {signalRows.length > 0 ? (
+
+
+ Analysis signals
+
+
+ {signalRows.map((row) => (
+
+
{row.label}
+
+ {row.value}
+
+
+ ))}
+
+
+ ) : (
+
No aggregated analysis signals for this job yet.
+ )}
+
+ {severity && Object.keys(severity).length > 0 ? (
+
+
+ Severity mix
+
+
+ {Object.entries(severity).map(([sev, count]) => (
+
+ {sev}: {count}
+
+ ))}
+
+
+ ) : null}
+
+ {issueCodes.length > 0 ? (
+
+
+ Issue codes
+
+
+ {issueCodes.map((code) => (
+
+ {code}
+
+ ))}
+
+
+ ) : null}
+
+ {docUrls.length > 0 ? (
+
+
+ Documentation links
+
+
+ {docUrls.map((url) => (
+
+
+ {url}
+
+
+ ))}
+
+
+ ) : null}
+
(null);
@@ -141,8 +363,10 @@ export function ResearchAnalytics() {
const [filterStatus, setFilterStatus] = useState("");
const [detailOpen, setDetailOpen] = useState(false);
+ const [detailTab, setDetailTab] = useState("summary");
const [detailJob, setDetailJob] = useState(null);
const [detailLoading, setDetailLoading] = useState(false);
+ const detailScrollRef = useRef(null);
const loadAll = useCallback(async () => {
const isInitialPass = !initialFetchCompletedRef.current;
@@ -230,9 +454,15 @@ export function ResearchAnalytics() {
const closeDetail = useCallback(() => {
setDetailOpen(false);
setDetailJob(null);
+ setDetailTab("summary");
window.setTimeout(() => triggerRef.current?.focus?.(), 0);
}, []);
+ const handleDetailTabChange = useCallback((value: string) => {
+ setDetailTab(value);
+ detailScrollRef.current?.scrollTo({ top: 0, behavior: "instant" });
+ }, []);
+
useEffect(() => {
if (!detailOpen) return;
@@ -289,6 +519,7 @@ export function ResearchAnalytics() {
const openDetail = async (jobId: string) => {
triggerRef.current = document.activeElement as HTMLElement;
setDetailOpen(true);
+ setDetailTab("summary");
setDetailJob(null);
setDetailLoading(true);
try {
@@ -974,7 +1205,10 @@ export function ResearchAnalytics() {
-
+
{detailLoading ? (
@@ -983,59 +1217,53 @@ export function ResearchAnalytics() {
) : null}
{!detailLoading && detailJob ? (
-
+
-
- Metadata
+
+ Summary
-
- Public signals
+
+ Raw JSON
-
-
-
-
- Job ID
-
- {detailJob.id}
-
-
-
- Anonymized contributor
-
- {detailJob.anonymized_submitter}
-
-
-
- Type / status
-
-
- {detailJob.type}
-
- {detailJob.status}
-
-
-
-
-
- {JSON.stringify(detailJob.public_metadata, null, 2)}
-
+
+
-
-
- {detailJob.public_result
- ? JSON.stringify(detailJob.public_result, null, 2)
- : "null"}
-
+
+
+ Privacy-filtered payloads only—no source file text.
+
+
+
+ public_metadata
+
+
+ {JSON.stringify(detailJob.public_metadata, null, 2)}
+
+
+
+ public_result
+
+
+ {detailJob.public_result
+ ? JSON.stringify(detailJob.public_result, null, 2)
+ : "null"}
+
+
) : null}
-
+
+ {detailJob?.is_own_job ? (
+
+
+ ) : null}
Close
diff --git a/frontend/src/pages/ResultsDashboard.tsx b/frontend/src/pages/ResultsDashboard.tsx
index 1e9fd04..4f4b782 100644
--- a/frontend/src/pages/ResultsDashboard.tsx
+++ b/frontend/src/pages/ResultsDashboard.tsx
@@ -40,6 +40,11 @@ import {
TabsList,
TabsTrigger,
} from "../components/ui/tabs";
+import {
+ clearSessionStopping,
+ isSessionStopping,
+ markSessionStopping,
+} from "../utils/deploySession";
import {
ApiError,
compose as composeApi,
@@ -140,8 +145,12 @@ export function ResultsDashboard() {
const reducedMotion = useReducedMotion();
const [error, setError] = useState
(null);
const [containerStatus, setContainerStatus] = useState<"stopped" | "running" | "stopping" | "exited" | "partial" | "unhealthy" | "stopped_by_user">(() => {
- const stored = sessionStorage.getItem("dqa:containerStatus");
- if (stored === "stopping") return "stopping";
+ const jobId =
+ typeof window !== "undefined"
+ ? new URLSearchParams(window.location.search).get("jobId") ||
+ sessionStorage.getItem("analysisJobId")
+ : null;
+ if (isSessionStopping(jobId ?? undefined)) return "stopping";
return "stopped";
});
const [runtimeSelfExited, setRuntimeSelfExited] = useState(false);
@@ -182,12 +191,25 @@ export function ResultsDashboard() {
const metaFilename =
(fetched.input_metadata?.filename as string | undefined) ??
"uploaded file";
- if (!uploadedFile) {
- setUploadedFile({
- name: metaFilename,
- type: fetched.type === "compose" ? "docker-compose" : fetched.type,
- content: "",
- });
+ if (!uploadedFile && fetched.type !== "project") {
+ const storedUpload = sessionStorage.getItem("uploadedFile");
+ if (storedUpload) {
+ try {
+ setUploadedFile(JSON.parse(storedUpload) as UploadedFile);
+ } catch {
+ setUploadedFile({
+ name: metaFilename,
+ type: fetched.type === "compose" ? "docker-compose" : fetched.type,
+ content: "",
+ });
+ }
+ } else {
+ setUploadedFile({
+ name: metaFilename,
+ type: fetched.type === "compose" ? "docker-compose" : fetched.type,
+ content: "",
+ });
+ }
}
} catch (err) {
if (cancelled) return;
@@ -216,88 +238,114 @@ export function ResultsDashboard() {
setRequiresResubmit(sessionStorage.getItem(key) === "1");
}, [job?.id, job]);
- const reconcileDeployStatus = useCallback(async (jobId: string) => {
- try {
- const status = await composeApi.deployStatus(jobId);
-
- const rs = status.runtime_state ?? "none";
- const sessionStopping =
- typeof sessionStorage !== "undefined" &&
- sessionStorage.getItem("dqa:containerStatus") === "stopping";
+ const notifyStopCompleted = useCallback((jobId: string) => {
+ toast.success("Containers stopped");
+ pushNotification("success", "Containers Stopped", "All containers have been successfully stopped", {
+ dedupeKey: `deploy.stop.completed:${jobId}`,
+ });
+ }, []);
- const treatAsStopping =
- rs === "stopping" ||
- Boolean(status.active && sessionStopping);
+ const reconcileDeployStatus = useCallback(
+ async (jobId: string): Promise => {
+ try {
+ const status = await composeApi.deployStatus(jobId);
+ const rs = status.runtime_state ?? "none";
+ const wasStopping = isSessionStopping(jobId);
- if (treatAsStopping) {
- setContainerStatus("stopping");
- return;
- }
+ const userStopped =
+ rs === "stopped_by_user" ||
+ (!status.active &&
+ (status.stopped_by_user || status.stop_reason === "user_requested"));
- // Backend is authoritative — check explicit states first
- if (rs === "stopped_by_user") {
- setContainerStatus("stopped_by_user");
- setRuntimeSelfExited(false);
- sessionStorage.removeItem("dqa:containerStatus");
- return;
- }
- if (rs === "exited" || rs === "failed" || rs === "cleanup_completed") {
- if (status.stopped_by_user || status.stop_reason === "user_requested") {
+ if (userStopped) {
setContainerStatus("stopped_by_user");
setRuntimeSelfExited(false);
- sessionStorage.removeItem("dqa:containerStatus");
- return;
+ clearSessionStopping(jobId);
+ if (wasStopping) notifyStopCompleted(jobId);
+ return false;
}
- setContainerStatus("exited");
- setRuntimeSelfExited(!status.stopped_by_user);
- sessionStorage.removeItem("dqa:containerStatus");
- return;
- }
- if (rs === "running") {
- setContainerStatus("running");
- sessionStorage.removeItem("dqa:containerStatus");
- } else if (rs === "partial") {
- setContainerStatus("partial");
- sessionStorage.removeItem("dqa:containerStatus");
- } else if (rs === "unhealthy") {
- setContainerStatus("unhealthy");
- sessionStorage.removeItem("dqa:containerStatus");
- } else {
- const exitedCount = status.exited_count ?? 0;
- const runningCount = status.running_count ?? 0;
- const unhealthyCount = status.unhealthy_count ?? 0;
- if (!status.active) {
- if (exitedCount > 0 && runningCount === 0) {
+
+ if (rs === "stopping" || (status.active && wasStopping)) {
+ setContainerStatus("stopping");
+ return true;
+ }
+
+ if (!status.active && wasStopping) {
+ setContainerStatus("stopped");
+ setRuntimeSelfExited(false);
+ clearSessionStopping(jobId);
+ notifyStopCompleted(jobId);
+ return false;
+ }
+
+ // Backend is authoritative — check explicit states first
+ if (rs === "exited" || rs === "failed" || rs === "cleanup_completed") {
+ setContainerStatus("exited");
+ setRuntimeSelfExited(!status.stopped_by_user);
+ clearSessionStopping(jobId);
+ return false;
+ }
+ if (rs === "running") {
+ setContainerStatus("running");
+ clearSessionStopping(jobId);
+ } else if (rs === "partial") {
+ setContainerStatus("partial");
+ clearSessionStopping(jobId);
+ } else if (rs === "unhealthy") {
+ setContainerStatus("unhealthy");
+ clearSessionStopping(jobId);
+ } else {
+ const exitedCount = status.exited_count ?? 0;
+ const runningCount = status.running_count ?? 0;
+ const unhealthyCount = status.unhealthy_count ?? 0;
+ if (!status.active) {
+ if (exitedCount > 0 && runningCount === 0) {
+ setContainerStatus("exited");
+ setRuntimeSelfExited(!status.stopped_by_user);
+ } else {
+ setContainerStatus("stopped");
+ setRuntimeSelfExited(false);
+ clearSessionStopping(jobId);
+ }
+ } else if (unhealthyCount > 0) {
+ setContainerStatus("unhealthy");
+ } else if (exitedCount > 0 && runningCount > 0) {
+ setContainerStatus("partial");
+ } else if (exitedCount > 0 && runningCount === 0) {
setContainerStatus("exited");
setRuntimeSelfExited(!status.stopped_by_user);
} else {
- setContainerStatus("stopped");
- setRuntimeSelfExited(false);
- sessionStorage.removeItem("dqa:containerStatus");
+ setContainerStatus("running");
}
- } else if (unhealthyCount > 0) {
- setContainerStatus("unhealthy");
- } else if (exitedCount > 0 && runningCount > 0) {
- setContainerStatus("partial");
- } else if (exitedCount > 0 && runningCount === 0) {
- setContainerStatus("exited");
- setRuntimeSelfExited(!status.stopped_by_user);
- } else {
- setContainerStatus("running");
}
+ return false;
+ } catch {
+ return isSessionStopping(jobId);
}
- } catch {
- // ignore
- }
- }, []);
+ },
+ [notifyStopCompleted],
+ );
useEffect(() => {
if (!job || (job.type !== "compose" && job.type !== "project")) return;
- void reconcileDeployStatus(job.id);
+ let cancelled = false;
+ let timer: ReturnType | null = null;
+
+ const poll = async () => {
+ const needsPoll = await reconcileDeployStatus(job.id);
+ if (cancelled) return;
+ if (needsPoll || isSessionStopping(job.id)) {
+ timer = setTimeout(poll, 1000);
+ }
+ };
+
+ void poll();
const handleFocus = () => void reconcileDeployStatus(job.id);
window.addEventListener("focus", handleFocus);
return () => {
+ cancelled = true;
+ if (timer) clearTimeout(timer);
window.removeEventListener("focus", handleFocus);
};
}, [job, reconcileDeployStatus]);
@@ -429,40 +477,47 @@ export function ResultsDashboard() {
}
const previousStatus = containerStatus;
setContainerStatus("stopping");
- sessionStorage.setItem("dqa:containerStatus", "stopping");
+ markSessionStopping(job.id);
pushNotification("info", "Stopping Containers", "Stop signal sent, waiting for shutdown...", {
dedupeKey: `deploy.stop.requested:${job.id}`,
});
try {
await composeApi.stopDeploy({ job_id: job.id });
- for (let i = 0; i < 30; i++) {
+ let confirmed = false;
+ for (let i = 0; i < 45; i++) {
if (unmountedRef.current) break;
- await new Promise((r) => setTimeout(r, 2000));
+ await new Promise((r) => setTimeout(r, 1000));
if (unmountedRef.current) break;
try {
const status = await composeApi.deployStatus(job.id);
- if (!status.active) {
+ const rs = status.runtime_state ?? "none";
+ if (rs === "stopping") {
+ setContainerStatus("stopping");
+ }
+ if (
+ rs === "stopped_by_user" ||
+ (!status.active && (status.stopped_by_user || rs === "none"))
+ ) {
+ confirmed = true;
if (unmountedRef.current) break;
- setContainerStatus("stopped");
- sessionStorage.removeItem("dqa:containerStatus");
- toast.success("Containers stopped");
- pushNotification("success", "Containers Stopped", "All containers have been successfully stopped", {
- dedupeKey: `deploy.stop.completed:${job.id}`,
- });
+ setContainerStatus(
+ status.stopped_by_user || rs === "stopped_by_user" ? "stopped_by_user" : "stopped",
+ );
+ clearSessionStopping(job.id);
+ notifyStopCompleted(job.id);
return;
}
} catch {
break;
}
}
- if (!unmountedRef.current) {
- setContainerStatus("stopped");
- sessionStorage.removeItem("dqa:containerStatus");
+ if (!unmountedRef.current && !confirmed) {
+ setContainerStatus("stopping");
}
} catch {
if (!unmountedRef.current) {
setContainerStatus(previousStatus);
- sessionStorage.removeItem("dqa:containerStatus");
+ clearSessionStopping(job.id);
toast.error("Failed to stop containers");
pushNotification("error", "Stop Failed", "Failed to stop containers", {
dedupeKey: `deploy.stop.failed:${job.id}`,
@@ -597,7 +652,7 @@ export function ResultsDashboard() {
{(job.input_metadata?.filename as string | undefined) ??
- uploadedFile?.name ??
+ (!isProjectJob ? uploadedFile?.name : undefined) ??
job.id}
Job ID: {job.id}
@@ -1023,18 +1078,14 @@ export function ResultsDashboard() {
)}
- {uploadedFile?.content && (
+ {uploadedFile?.content && !isProjectJob && (
Uploaded file preview
@@ -1570,18 +1621,20 @@ function buildMarkdownReport(
}
lines.push("");
- lines.push("## Source File");
- lines.push("");
- lines.push(`File: \`${filename}\``);
- lines.push("");
- if (sourceContent) {
- lines.push("```" + language);
- lines.push(sourceContent.replace(/```/g, "``\u200b`"));
- lines.push("```");
- } else {
- lines.push("_Source file content not embedded in this report._");
+ if (!projectResult) {
+ lines.push("## Source File");
+ lines.push("");
+ lines.push(`File: \`${filename}\``);
+ lines.push("");
+ if (sourceContent) {
+ lines.push("```" + language);
+ lines.push(sourceContent.replace(/```/g, "``\u200b`"));
+ lines.push("```");
+ } else {
+ lines.push("_Source file content not embedded in this report._");
+ }
+ lines.push("");
}
- lines.push("");
if (projectResult) {
lines.push("## Per-File Results");
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index da2ac8b..0526ce8 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -180,20 +180,6 @@ export const router = createBrowserRouter([
};
},
},
- {
- path: "settings/api-keys",
- hydrateFallbackElement: routeHydrateFallbackElement,
- lazy: async () => {
- const m = await import("./pages/ApiKeys");
- return {
- Component: () => (
-
-
- ),
- };
- },
- },
],
},
]);
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index 1f2bc4f..9ccedc5 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -77,6 +77,7 @@ export interface Job {
export interface PublicResearchJob {
id: string;
anonymized_submitter: string;
+ is_own_job: boolean;
type: JobType;
status: JobStatus;
public_metadata: Record
;
@@ -155,6 +156,16 @@ export interface ProjectGithubUploadRequest {
ref?: string | null;
}
+export interface ContainerPortBinding {
+ host_ip?: string | null;
+ host_port?: string | null;
+}
+
+export interface ContainerPortMapping {
+ container_port?: string | null;
+ host_bindings?: ContainerPortBinding[];
+}
+
export interface RuntimeContainerState {
id: string;
name?: string | null;
@@ -168,9 +179,18 @@ export interface RuntimeContainerState {
finished_at?: string | null;
restart_count?: number | null;
oom_killed?: boolean | null;
+ ip_address?: string | null;
+ ports?: ContainerPortMapping[];
last_logs?: string[] | null;
}
+export interface ContainerLogPayload {
+ container_id?: string;
+ line?: string;
+ stream?: "stdout" | "stderr" | "system";
+ timestamp?: string | null;
+}
+
export type DeployRuntimeState =
| "none"
| "running"
@@ -201,6 +221,20 @@ export interface DindIpResponse {
dind_ip: string | null;
}
+export interface PreviewCheckResponse {
+ reachable: boolean;
+ frameable: boolean;
+ proxy_available: boolean;
+ status_code: number | null;
+ reason: string | null;
+ final_url: string | null;
+}
+
+export interface PreviewSessionResponse {
+ session_id: string;
+ proxy_root: string;
+}
+
export interface ImageBuildResult {
dockerfile_path: string;
build_context: string;
@@ -230,18 +264,6 @@ export interface ImageBuildResult {
error_message?: string | null;
}
-export interface ApiKey {
- id: string;
- key_prefix: string;
- created_at: string;
-}
-
-export interface ApiKeyCreated {
- id: string;
- key: string;
- key_prefix: string;
-}
-
export interface DomainEvent {
event_name: string;
user_id: string;
@@ -372,6 +394,16 @@ export function getApiBaseUrl(): string {
return API_BASE_URL;
}
+/** Same-origin path for the preview iframe (uses API proxy; strips X-Frame-Options). */
+export function buildPreviewProxyEmbedUrl(sessionId: string): string {
+ const token = getAccessToken();
+ const base = API_BASE_URL.replace(/\/$/, "");
+ const prefix = base.length > 0 ? base : "";
+ const path = `/api/v1/compose/deploy/preview-proxy/${sessionId}/`;
+ if (!token) return `${prefix}${path}`;
+ return `${prefix}${path}?token=${encodeURIComponent(token)}`;
+}
+
export function getAccessToken(): string | null {
return localStorage.getItem(ACCESS_TOKEN_KEY);
}
@@ -539,19 +571,6 @@ export const auth = {
},
};
-// ---------- api keys ----------
-export const apiKeys = {
- async list(): Promise {
- return request("/api/v1/users/me/api-keys");
- },
- async create(): Promise {
- return request("/api/v1/users/me/api-keys", { method: "POST" });
- },
- async revoke(keyId: string): Promise {
- return request(`/api/v1/users/me/api-keys/${keyId}`, { method: "DELETE" });
- },
-};
-
// ---------- jobs / history ----------
export const jobs = {
async list(): Promise {
@@ -671,6 +690,26 @@ export const compose = {
async dindIp(): Promise {
return request("/api/v1/compose/deploy/dind-ip");
},
+ async checkPreview(url: string): Promise {
+ const params = new URLSearchParams({ url });
+ return request(
+ `/api/v1/compose/deploy/preview-check?${params.toString()}`,
+ );
+ },
+ async createPreviewProxySession(
+ url: string,
+ hints?: { user_agent?: string; accept_language?: string },
+ ): Promise {
+ return request("/api/v1/compose/deploy/preview-proxy/session", {
+ method: "POST",
+ body: JSON.stringify({
+ url,
+ user_agent: hints?.user_agent,
+ accept_language: hints?.accept_language,
+ }),
+ credentials: "include",
+ });
+ },
async stopDeploy(payload: {
job_id: string;
remove_volumes?: boolean;
@@ -781,6 +820,12 @@ export const ws = {
`${wsBase()}/ws/users/${userId}/containers/${containerId}?token=${encodeURIComponent(token)}`,
);
},
+ connectUserContainerLogs(userId: string, containerId: string): WebSocket {
+ const token = getAccessToken() ?? "";
+ return new WebSocket(
+ `${wsBase()}/ws/users/${userId}/containers/${containerId}/logs?token=${encodeURIComponent(token)}`,
+ );
+ },
connectUserEvents(userId: string): WebSocket {
const token = getAccessToken() ?? "";
return new WebSocket(
@@ -789,6 +834,45 @@ export const ws = {
},
};
+/**
+ * Close a WebSocket without triggering the browser's
+ * "WebSocket is closed before the connection is established" warning.
+ *
+ * Never call `close()` while `readyState === CONNECTING` (common under React
+ * StrictMode's dev mount/unmount/mount cycle). Stale connecting sockets are
+ * abandoned until `open`, then closed from a one-shot listener.
+ */
+export function safeCloseSocket(socket: WebSocket | null | undefined): void {
+ if (!socket) return;
+ const state = socket.readyState;
+ if (state === WebSocket.CLOSED || state === WebSocket.CLOSING) {
+ return;
+ }
+ socket.onmessage = null;
+ socket.onerror = null;
+ socket.onclose = null;
+ socket.onopen = null;
+ if (state === WebSocket.CONNECTING) {
+ socket.addEventListener(
+ "open",
+ () => {
+ try {
+ socket.close();
+ } catch {
+ /* noop */
+ }
+ },
+ { once: true },
+ );
+ return;
+ }
+ try {
+ socket.close();
+ } catch {
+ /* noop */
+ }
+}
+
// ---------- health ----------
export async function checkHealth(): Promise<{ status: string }> {
return request<{ status: string }>("/health", { skipAuth: true });
diff --git a/frontend/src/utils/deploySession.ts b/frontend/src/utils/deploySession.ts
new file mode 100644
index 0000000..b3caa8d
--- /dev/null
+++ b/frontend/src/utils/deploySession.ts
@@ -0,0 +1,25 @@
+/** Session flags for in-flight compose deploy stop (survives route changes). */
+export const SESSION_STOPPING_KEY = "dqa:containerStatus";
+
+export function markSessionStopping(jobId: string): void {
+ if (typeof sessionStorage === "undefined") return;
+ sessionStorage.setItem(SESSION_STOPPING_KEY, "stopping");
+ sessionStorage.setItem(`${SESSION_STOPPING_KEY}:${jobId}`, "stopping");
+}
+
+export function clearSessionStopping(jobId?: string): void {
+ if (typeof sessionStorage === "undefined") return;
+ sessionStorage.removeItem(SESSION_STOPPING_KEY);
+ if (jobId) {
+ sessionStorage.removeItem(`${SESSION_STOPPING_KEY}:${jobId}`);
+ }
+}
+
+export function isSessionStopping(jobId?: string): boolean {
+ if (typeof sessionStorage === "undefined") return false;
+ if (sessionStorage.getItem(SESSION_STOPPING_KEY) === "stopping") return true;
+ if (jobId && sessionStorage.getItem(`${SESSION_STOPPING_KEY}:${jobId}`) === "stopping") {
+ return true;
+ }
+ return false;
+}
diff --git a/frontend/src/utils/jobSessionCleanup.ts b/frontend/src/utils/jobSessionCleanup.ts
new file mode 100644
index 0000000..4f5a59e
--- /dev/null
+++ b/frontend/src/utils/jobSessionCleanup.ts
@@ -0,0 +1,45 @@
+import { clearSessionStopping, SESSION_STOPPING_KEY } from "./deploySession";
+import { clearState } from "./monitoringState";
+
+const REPLAY_KEY_PREFIX = "dqa:notifications:replay:";
+
+function replayStateStorageKey(userId: string): string {
+ return `${REPLAY_KEY_PREFIX}${userId}`;
+}
+
+/** Remove browser session/local state tied to a deleted analysis job. */
+export function clearJobSessionState(jobId: string, userId?: string | null): void {
+ if (typeof window === "undefined") return;
+
+ try {
+ if (sessionStorage.getItem("analysisJobId") === jobId) {
+ sessionStorage.removeItem("analysisJobId");
+ }
+ if (sessionStorage.getItem("projectJobId") === jobId) {
+ sessionStorage.removeItem("projectJobId");
+ }
+ clearState(`dqa:execution:${jobId}`);
+ clearState(`dqa:monitoring:${jobId}`);
+ sessionStorage.removeItem(`dqa:resubmitRequired:${jobId}`);
+ sessionStorage.removeItem(`${SESSION_STOPPING_KEY}:${jobId}`);
+ clearSessionStopping(jobId);
+
+ if (userId) {
+ const key = replayStateStorageKey(userId);
+ const raw = localStorage.getItem(key);
+ if (raw) {
+ try {
+ const state = JSON.parse(raw) as Record;
+ if (jobId in state) {
+ delete state[jobId];
+ localStorage.setItem(key, JSON.stringify(state));
+ }
+ } catch {
+ // ignore malformed replay state
+ }
+ }
+ }
+ } catch {
+ // ignore storage errors (private mode, quota, etc.)
+ }
+}
diff --git a/frontend/src/utils/metricsSeries.ts b/frontend/src/utils/metricsSeries.ts
new file mode 100644
index 0000000..1e421a3
--- /dev/null
+++ b/frontend/src/utils/metricsSeries.ts
@@ -0,0 +1,123 @@
+import type { ContainerMetricsPayload } from "./api";
+
+export interface MetricSample {
+ timestamp: number;
+ label: string;
+ cpuPercent: number | null;
+ memoryMb: number | null;
+ memoryPercent: number | null;
+ rxBps: number | null;
+ txBps: number | null;
+ readBps: number | null;
+ writeBps: number | null;
+}
+
+export const DEFAULT_MAX_METRIC_POINTS = 120;
+export const PERSIST_METRIC_POINTS = 60;
+
+export function formatBytes(bytes: number | null | undefined): string {
+ if (bytes == null || Number.isNaN(bytes)) return "-";
+ if (bytes <= 0) return "0 B";
+ const units = ["B", "KB", "MB", "GB", "TB"];
+ let value = bytes;
+ let unit = 0;
+ while (value >= 1024 && unit < units.length - 1) {
+ value /= 1024;
+ unit += 1;
+ }
+ const digits = unit === 0 ? 0 : value >= 100 ? 0 : value >= 10 ? 1 : 2;
+ return `${value.toFixed(digits)} ${units[unit]}`;
+}
+
+export function formatBps(bps: number | null | undefined): string {
+ if (bps == null || Number.isNaN(bps)) return "-";
+ return `${formatBytes(bps)}/s`;
+}
+
+function parseEventTimestamp(eventTimestamp: string | undefined): number {
+ if (!eventTimestamp) return Date.now();
+ const ts = new Date(eventTimestamp).getTime();
+ return Number.isNaN(ts) ? Date.now() : ts;
+}
+
+function num(value: unknown): number | null {
+ return typeof value === "number" && !Number.isNaN(value) ? value : null;
+}
+
+export function computeRates(
+ prev: ContainerMetricsPayload | null,
+ next: ContainerMetricsPayload,
+ deltaMs: number,
+): { rxBps: number | null; txBps: number | null; readBps: number | null; writeBps: number | null } {
+ if (!prev || deltaMs <= 0) {
+ return { rxBps: null, txBps: null, readBps: null, writeBps: null };
+ }
+ const deltaSec = deltaMs / 1000;
+ const prevNet = prev.network?.totals;
+ const nextNet = next.network?.totals;
+ const prevRx = num(prevNet?.rx_bytes);
+ const nextRx = num(nextNet?.rx_bytes);
+ const prevTx = num(prevNet?.tx_bytes);
+ const nextTx = num(nextNet?.tx_bytes);
+ const prevRead = num(prev.io?.read_bytes);
+ const nextRead = num(next.io?.read_bytes);
+ const prevWrite = num(prev.io?.write_bytes);
+ const nextWrite = num(next.io?.write_bytes);
+
+ const rate = (before: number | null, after: number | null): number | null => {
+ if (before == null || after == null || after < before) return null;
+ return (after - before) / deltaSec;
+ };
+
+ return {
+ rxBps: rate(prevRx, nextRx),
+ txBps: rate(prevTx, nextTx),
+ readBps: rate(prevRead, nextRead),
+ writeBps: rate(prevWrite, nextWrite),
+ };
+}
+
+export function appendMetricSample(
+ points: MetricSample[],
+ payload: ContainerMetricsPayload,
+ eventTimestamp: string | undefined,
+ prevPayload: ContainerMetricsPayload | null,
+ maxPoints = DEFAULT_MAX_METRIC_POINTS,
+): MetricSample[] {
+ const timestamp = parseEventTimestamp(eventTimestamp);
+ const prevTs = points.length > 0 ? points[points.length - 1].timestamp : null;
+ const deltaMs = prevTs != null ? timestamp - prevTs : 0;
+ const rates = computeRates(prevPayload, payload, deltaMs);
+
+ const cpu = num(payload.cpu_percent) ?? num(payload.cpu?.percent);
+ const memBytes = num(payload.memory_bytes) ?? num(payload.memory?.usage_bytes);
+ const memoryMb = memBytes == null ? null : memBytes / (1024 * 1024);
+ const memoryPercent = num(payload.memory_percent) ?? num(payload.memory?.percent);
+
+ const sample: MetricSample = {
+ timestamp,
+ label: new Date(timestamp).toLocaleTimeString(),
+ cpuPercent: cpu,
+ memoryMb,
+ memoryPercent,
+ rxBps: rates.rxBps,
+ txBps: rates.txBps,
+ readBps: rates.readBps,
+ writeBps: rates.writeBps,
+ };
+
+ return [...points, sample].slice(-maxPoints);
+}
+
+/** Trim payload for sessionStorage (drop bulky network interface maps). */
+export function trimPayloadForPersist(payload: ContainerMetricsPayload): ContainerMetricsPayload {
+ const { network, ...rest } = payload;
+ return {
+ ...rest,
+ network: network
+ ? {
+ totals: network.totals,
+ }
+ : undefined,
+ };
+}
diff --git a/frontend/src/utils/previewBrowser.ts b/frontend/src/utils/previewBrowser.ts
new file mode 100644
index 0000000..61e041f
--- /dev/null
+++ b/frontend/src/utils/previewBrowser.ts
@@ -0,0 +1,64 @@
+/** Open container preview in a real browser window (top-level navigation, not an iframe). */
+
+const POPOUT_FEATURES = [
+ "noopener",
+ "noreferrer",
+ "width=1280",
+ "height=860",
+ "menubar=no",
+ "toolbar=yes",
+ "location=yes",
+ "status=yes",
+ "resizable=yes",
+ "scrollbars=yes",
+].join(",");
+
+const popoutWindows = new Map();
+
+function popoutWindowName(url: string): string {
+ try {
+ const parsed = new URL(url);
+ return `dqa-preview-${parsed.host}-${parsed.port || "80"}`;
+ } catch {
+ return "dqa-preview";
+ }
+}
+
+/** Opens or focuses a pop-out window — same experience as opening the URL in Chrome/Firefox. */
+export function openPopOutPreview(url: string, options?: { replace?: boolean }): Window | null {
+ if (typeof window === "undefined" || !url.trim()) return null;
+
+ const name = popoutWindowName(url);
+ const existing = popoutWindows.get(name);
+ if (existing && !existing.closed) {
+ try {
+ existing.location.href = url;
+ existing.focus();
+ return existing;
+ } catch {
+ /* cross-origin focus/nav may fail; open fresh */
+ }
+ }
+
+ const opened = window.open(url, options?.replace ? name : "_blank", POPOUT_FEATURES);
+ if (opened) {
+ popoutWindows.set(name, opened);
+ opened.focus();
+ }
+ return opened;
+}
+
+export function collectBrowserProxyHints(): {
+ user_agent: string;
+ accept_language: string;
+} {
+ if (typeof navigator === "undefined") {
+ return { user_agent: "", accept_language: "" };
+ }
+ return {
+ user_agent: navigator.userAgent,
+ accept_language: navigator.languages?.length
+ ? navigator.languages.join(",")
+ : navigator.language || "en-US,en;q=0.9",
+ };
+}
diff --git a/frontend/src/utils/previewCheck.ts b/frontend/src/utils/previewCheck.ts
new file mode 100644
index 0000000..a4cc2c1
--- /dev/null
+++ b/frontend/src/utils/previewCheck.ts
@@ -0,0 +1,26 @@
+/** Client-side guards before hitting the preview probe API. */
+export function localPreviewIssue(url: string): string | null {
+ try {
+ const parsed = new URL(url);
+ const host = parsed.hostname.toLowerCase();
+ const port = parsed.port || (parsed.protocol === "https:" ? "443" : "80");
+ if (
+ (port === "8000" || port === "8001") &&
+ (host === "localhost" || host === "127.0.0.1" || host === "::1")
+ ) {
+ return "That URL is the platform API (port 8000), not your container app. Pick a published container port from the list.";
+ }
+ if (
+ parsed.pathname.startsWith("/api") ||
+ parsed.pathname.startsWith("/docs") ||
+ parsed.pathname.startsWith("/redoc") ||
+ parsed.pathname === "/openapi.json" ||
+ parsed.pathname.startsWith("/metrics")
+ ) {
+ return "That path belongs to the platform API. Use the container host:port from deploy status.";
+ }
+ } catch {
+ return "Enter a valid http://host:port URL.";
+ }
+ return null;
+}
diff --git a/scripts/common.ps1 b/scripts/common.ps1
index 9acaac0..9d4202b 100644
--- a/scripts/common.ps1
+++ b/scripts/common.ps1
@@ -74,6 +74,23 @@ function Require-Command {
}
}
+function Clear-DevUploadStorage {
+ $relPaths = @("backend/storage/uploads", "storage/uploads")
+
+ foreach ($relPath in $relPaths) {
+ $uploadDir = Join-Path $script:RootDir $relPath
+ if (-not (Test-Path -LiteralPath $uploadDir)) {
+ continue
+ }
+ $children = Get-ChildItem -LiteralPath $uploadDir -Force -ErrorAction SilentlyContinue
+ if ($children.Count -eq 0) {
+ continue
+ }
+ Write-Host "[stop] Cleaning dev upload artifacts in $relPath"
+ $children | Remove-Item -Recurse -Force
+ }
+}
+
function New-SecretValue {
param([int]$Length = 48)
diff --git a/scripts/common.sh b/scripts/common.sh
index de21d12..7a4549e 100644
--- a/scripts/common.sh
+++ b/scripts/common.sh
@@ -47,3 +47,20 @@ require_cmd() {
generate_secret() {
LC_ALL=C tr -dc 'A-Za-z0-9' /dev/null)" ]]; then
+ echo "[stop] Cleaning dev upload artifacts in $rel_path"
+ find "$upload_dir" -mindepth 1 -maxdepth 1 -exec rm -rf -- {} +
+ fi
+ done
+}
diff --git a/scripts/start.ps1 b/scripts/start.ps1
index df93564..3b9f235 100644
--- a/scripts/start.ps1
+++ b/scripts/start.ps1
@@ -188,4 +188,9 @@ else {
}
Write-Host "Use .\scripts\status.ps1 --$script:Mode for runtime status"
-Write-Host "Use .\scripts\stop.ps1 --$script:Mode --wipe to reset everything"
+if ($script:Mode -eq "dev") {
+ Write-Host "Use .\scripts\stop.ps1 --$script:Mode --wipe to reset volumes and backend/storage/uploads"
+}
+else {
+ Write-Host "Use .\scripts\stop.ps1 --$script:Mode --wipe to reset volumes"
+}
diff --git a/scripts/start.sh b/scripts/start.sh
index abf5dc4..001798f 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -102,33 +102,37 @@ ensure_secret_file() {
}
run_migrations() {
- local migration_log
+ local migration_log alembic_subcmd
migration_log="$(mktemp)"
- if compose_cmd exec -T -w /app api sh -lc '
- export POSTGRES_PASSWORD="$(cat /run/secrets/postgres_password)"
- export DATABASE_URL="postgresql+asyncpg://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-docker_platform}"
- PYTHONPATH=/app alembic upgrade head
- ' >"$migration_log" 2>&1; then
+ alembic_subcmd="upgrade head"
+
+ run_alembic_once() {
+ compose_cmd run --rm --no-deps -w /app api sh -lc "set -euo pipefail
+export POSTGRES_PASSWORD=\"\$(cat /run/secrets/postgres_password)\"
+export DATABASE_URL=\"postgresql+asyncpg://\${POSTGRES_USER:-postgres}:\${POSTGRES_PASSWORD}@postgres:5432/\${POSTGRES_DB:-docker_platform}\"
+export PYTHONPATH=/app
+cd /app
+alembic ${alembic_subcmd}"
+ }
+
+ # Run before API boot so lifespan create_all cannot race Alembic (common after --wipe).
+ if run_alembic_once >"$migration_log" 2>&1; then
rm -f "$migration_log"
log "Migrations are up to date"
return 0
fi
- if rg -i 'duplicate|already exists|DuplicateTable' "$migration_log" >/dev/null 2>&1; then
+
+ if rg -i 'duplicate|already exists|DuplicateTable|DuplicateObject' "$migration_log" >/dev/null 2>&1; then
log "Detected existing schema without Alembic state; stamping head then retrying"
- compose_cmd exec -T -w /app api sh -lc '
- export POSTGRES_PASSWORD="$(cat /run/secrets/postgres_password)"
- export DATABASE_URL="postgresql+asyncpg://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-docker_platform}"
- PYTHONPATH=/app alembic stamp head
- ' >>"$migration_log" 2>&1
- compose_cmd exec -T -w /app api sh -lc '
- export POSTGRES_PASSWORD="$(cat /run/secrets/postgres_password)"
- export DATABASE_URL="postgresql+asyncpg://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-docker_platform}"
- PYTHONPATH=/app alembic upgrade head
- ' >>"$migration_log" 2>&1
+ alembic_subcmd="stamp head"
+ run_alembic_once >>"$migration_log" 2>&1
+ alembic_subcmd="upgrade head"
+ run_alembic_once >>"$migration_log" 2>&1
rm -f "$migration_log"
log "Migration bootstrap completed"
return 0
fi
+
echo "[start][error] Migration failed. Logs:" >&2
cat "$migration_log" >&2
rm -f "$migration_log"
@@ -149,7 +153,9 @@ ensure_secret_file "secrets/postgres_password.txt" "secrets/postgres_password.tx
ensure_secret_file "secrets/jwt_secret.txt" "secrets/jwt_secret.txt.example"
log "Starting stack in mode: $MODE"
-compose_cmd up -d --build
+log "Building API image and bringing up Postgres (and Redis) before API boot"
+compose_cmd build api
+compose_cmd up -d postgres redis
log "Waiting for Postgres"
wait_postgres 180
@@ -157,6 +163,9 @@ wait_postgres 180
log "Running migrations"
run_migrations
+log "Starting remaining services"
+compose_cmd up -d
+
wait_http "http://127.0.0.1:${FRONTEND_PORT:-3000}" "Frontend" 180
if [[ "$MODE" == "dev" ]]; then
@@ -170,4 +179,8 @@ else
fi
echo "Use ./scripts/status.sh --$MODE for runtime status"
-echo "Use ./scripts/stop.sh --$MODE --wipe to reset everything"
+if [[ "$MODE" == "dev" ]]; then
+ echo "Use ./scripts/stop.sh --$MODE --wipe to reset volumes and backend/storage/uploads"
+else
+ echo "Use ./scripts/stop.sh --$MODE --wipe to reset volumes"
+fi
diff --git a/scripts/stop.ps1 b/scripts/stop.ps1
index e764587..77ae663 100644
--- a/scripts/stop.ps1
+++ b/scripts/stop.ps1
@@ -9,6 +9,9 @@ $wipe = $args -contains "--wipe"
if ($wipe) {
Write-Host "[stop] Stopping $script:Mode stack and removing volumes"
Invoke-ComposeChecked down -v --remove-orphans
+ if ($script:Mode -eq "dev") {
+ Clear-DevUploadStorage
+ }
}
else {
Write-Host "[stop] Stopping $script:Mode stack"
diff --git a/scripts/stop.sh b/scripts/stop.sh
index fecc11f..242bfd1 100755
--- a/scripts/stop.sh
+++ b/scripts/stop.sh
@@ -8,6 +8,9 @@ source "$SCRIPT_DIR/common.sh" "$@"
if [[ " $* " == *" --wipe "* ]]; then
echo "[stop] Stopping $MODE stack and removing volumes"
compose_cmd down -v --remove-orphans
+ if [[ "$MODE" == "dev" ]]; then
+ clean_dev_upload_storage
+ fi
else
echo "[stop] Stopping $MODE stack"
compose_cmd down --remove-orphans