-
+
-
-
-
-
-
-
-
-
-
+
-
+
-
+
+
+
+ );
+}
diff --git a/client/src/components/ArchitectureStrip.tsx b/client/src/components/ArchitectureStrip.tsx
new file mode 100644
index 0000000..bc82fee
--- /dev/null
+++ b/client/src/components/ArchitectureStrip.tsx
@@ -0,0 +1,99 @@
+import { useI18n } from "../i18n/I18nProvider";
+import type { TranslationKey } from "../i18n/translations";
+import type { DatasetInfo, EncodeConfig, TrainConfig } from "../types";
+import { FactGrid } from "./FactGrid";
+import type { Fact } from "./FactGrid";
+
+interface Props {
+ config: EncodeConfig;
+ model: TrainConfig;
+ /** The configured dataset, once the server has listed it. */
+ dataset: DatasetInfo | undefined;
+ /** Input geometry read off the last frame the server sent, e.g. "28×28". */
+ inputDims: string | null;
+ gpuAvailable: boolean;
+}
+
+/** Where the coding label comes from; the server names the coding type. */
+const CODING_KEYS: Record = {
+ rate: "coding.rate",
+ latency: "coding.latency",
+ delta: "coding.delta",
+ random: "coding.random",
+};
+
+/** One stage of the chain the product builds. */
+interface Stage {
+ key: string;
+ label: string;
+ value: string;
+ unit?: string;
+}
+
+/**
+ * The architecture the application is actually configured to build:
+ * Input → Encoder → Hidden → Output, with the values it reads for each.
+ *
+ * A stage whose value the application does not hold shows a dash rather than
+ * a guess; there is no parameter count or benchmark here because nothing in
+ * the client's state can produce one.
+ */
+export function ArchitectureStrip({
+ config,
+ model,
+ dataset,
+ inputDims,
+ gpuAvailable,
+}: Props) {
+ const { t } = useI18n();
+
+ const stages: Stage[] = [
+ { key: "input", label: t("arch.input"), value: inputDims ?? "—" },
+ {
+ key: "encoder",
+ label: t("arch.encoder"),
+ value: t(CODING_KEYS[config.coding]),
+ },
+ {
+ key: "hidden",
+ label: t("arch.hidden"),
+ value: String(model.hidden),
+ unit: t("arch.neurons"),
+ },
+ {
+ key: "output",
+ label: t("arch.output"),
+ value: dataset === undefined ? "—" : String(dataset.classes),
+ unit: t("arch.classes"),
+ },
+ ];
+
+ const facts: Fact[] = [
+ { label: t("field.dataset"), value: dataset?.name ?? config.dataset },
+ { label: "num_steps", value: String(config.num_steps) },
+ {
+ label: t("arch.device"),
+ value: `${model.device.toUpperCase()} · ${
+ gpuAvailable ? t("arch.gpuAvailable") : t("arch.gpuUnavailable")
+ }`,
+ },
+ ];
+
+ return (
+ ) => void;
- onModelChange: (patch: Partial) => void;
onSelectSample: (patch: Partial) => void;
}
-/** Human label for a dataset option, including modality and availability. */
-function datasetLabel(
- d: DatasetInfo,
- t: (key: TranslationKey) => string,
-): string {
- const base = `${d.name} (${d.classes} ${t("dataset.classes")})`;
- if (d.modality !== "event") return base;
- if (d.available === false) {
- return `${base} — ${t("dataset.unavailable")}`;
- }
- return `${base} — ${t("dataset.events")}`;
-}
-
-/** Build the dataset dropdown, disabling event sets with no tonic loader. */
-function datasetOptions(
- datasets: DatasetInfo[],
- current: string,
- t: (key: TranslationKey) => string,
-): Option[] {
- if (datasets.length === 0) return [{ value: current, label: current }];
- return datasets.map((d) => ({
- value: d.name,
- label: datasetLabel(d, t),
- // Unavailable events would otherwise fail inside the download worker.
- disabled: d.modality === "event" && d.available === false,
- }));
-}
-
-export function Controls(props: Props) {
+/**
+ * The data and encoding editor: the pane between the asset browser and the
+ * network inspector.
+ *
+ * The content tiles into two columns once the pane is wide enough — dataset
+ * and its sample on the left, encoding on the right — so a wide window gets
+ * two readable columns instead of one run of full-width controls. Below that
+ * width it is one column again.
+ *
+ * It answers three questions in the order they are asked — which dataset, what
+ * the application knows about it (including a look at the frame itself), and
+ * how that frame is turned into spikes. The notes at the top are the
+ * configuration's own validation: a locked config, or a dataset whose learning
+ * rules differ from the default.
+ */
+export function Controls({
+ config,
+ datasets,
+ sample,
+ eventFrame,
+ locked,
+ onChange,
+ onSelectSample,
+}: Props) {
const { t } = useI18n();
- const {
- config,
- model,
- datasets,
- gpuAvailable,
- topologies,
- neurons,
- surrogates,
- locked,
- onChange,
- onModelChange,
- onSelectSample,
- } = props;
-
const selected = datasets.find((d) => d.name === config.dataset);
const eventMode = selected?.modality === "event";
const eventUnavailable = eventMode && selected?.available === false;
return (
-
+
+ );
+}
diff --git a/client/src/components/Badge.tsx b/client/src/components/Badge.tsx
new file mode 100644
index 0000000..4ea5814
--- /dev/null
+++ b/client/src/components/Badge.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+/** Semantic tone; `neutral` is the uncoloured default. */
+export type BadgeTone = "neutral" | "ok" | "warn" | "bad";
+
+interface Props {
+ children: ReactNode;
+ tone?: BadgeTone;
+ title?: string;
+}
+
+/** A short status marker: a verdict, a mode, a cached/downloaded state. */
+export function Badge({ children, tone = "neutral", title }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
new file mode 100644
index 0000000..439c6c1
--- /dev/null
+++ b/client/src/components/Button.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+/**
+ * `primary` is the single filled-accent action; `danger` is destructive;
+ * `ghost` is routine and borderless. The default is a neutral control.
+ */
+export type ButtonVariant = "neutral" | "primary" | "danger" | "ghost";
+
+interface Props {
+ children: ReactNode;
+ onClick: () => void;
+ variant?: ButtonVariant;
+ disabled?: boolean;
+ /** Toolbar-height variant. */
+ small?: boolean;
+ block?: boolean;
+ title?: string;
+ testId?: string;
+}
+
+/** Base button. Geometry and tones come from the design tokens. */
+export function Button({
+ children,
+ onClick,
+ variant = "neutral",
+ disabled = false,
+ small = false,
+ block = false,
+ title,
+ testId,
+}: Props) {
+ const classes = ["btn"];
+ if (variant !== "neutral") classes.push(variant);
+ if (small) classes.push("sm");
+ if (block) classes.push("block");
+ return (
+
+ );
+}
diff --git a/client/src/components/CheckField.tsx b/client/src/components/CheckField.tsx
index 3b47c74..c36d1f0 100644
--- a/client/src/components/CheckField.tsx
+++ b/client/src/components/CheckField.tsx
@@ -19,17 +19,15 @@ export function CheckField({
return (
);
}
diff --git a/client/src/components/Controls.tsx b/client/src/components/Controls.tsx
index 7016236..8d86f66 100644
--- a/client/src/components/Controls.tsx
+++ b/client/src/components/Controls.tsx
@@ -1,84 +1,68 @@
import { HELP } from "../helpText";
import { useI18n } from "../i18n/I18nProvider";
-import type { TranslationKey } from "../i18n/translations";
-import type { DatasetInfo, EncodeConfig, TrainConfig } from "../types";
+import type { DatasetInfo, EncodeConfig } from "../types";
+import { datasetFacts, datasetOptions } from "./datasetFields";
import { EncodingControls } from "./EncodingControls";
-import { ModelSection } from "./ModelSection";
+import { FactGrid } from "./FactGrid";
+import { NumberField } from "./NumberField";
+import { SamplePreview } from "./SamplePreview";
import { SelectField } from "./SelectField";
-import type { Option } from "./SelectField";
-import { SliderField } from "./SliderField";
import { Section } from "./Stepper";
interface Props {
config: EncodeConfig;
- model: TrainConfig;
datasets: DatasetInfo[];
- gpuAvailable: boolean;
- /** Registry names for the architecture pickers, empty until listed. */
- topologies: string[];
- neurons: string[];
- surrogates: string[];
+ /** The input frame the server last sent, for the preview. */
+ sample: number[][] | null;
+ /** Whole-sample ON/OFF frame, for an event dataset. */
+ eventFrame: number[][] | null;
/** True when a checkpoint is loaded: architecture/encoding are read-only. */
locked: boolean;
onChange: (patch: Partial{t("arch.title")}
+ -
+ {stages.map((stage) => (
+
- + {stage.label} + {stage.value} + {stage.unit !== undefined && ( + {stage.unit} + )} + + ))} +
+
{locked && > = {
+ assets: 1200,
+ inspector: 1040,
+};
+
+/**
+ * Whether a pane is open at first paint.
+ *
+ * Read once, from the viewport, because a pane the user has expanded by hand
+ * should stay expanded: re-deriving it on every resize would fight the
+ * toggle. A pane with no entry in the table is always open.
+ */
+function initiallyOpen(variant: PaneVariant): boolean {
+ const below = COLLAPSE_BELOW[variant];
+ return below === undefined || window.innerWidth > below;
+}
+
+interface Props {
+ variant: PaneVariant;
+ /** Pane heading, rendered in the head row. */
+ heading: string;
+ /** Small right-aligned fact for the head row, e.g. the current dataset. */
+ meta?: string;
+ children: ReactNode;
+}
+
+/**
+ * One docked pane: a full-height child of a workspace, separated from its
+ * neighbour by a single hairline. It has no margin, no radius, and no card on
+ * a background — the surface step and the hairline are the whole hierarchy.
+ *
+ * The head is a fixed row and the body scrolls beneath it, so a long form
+ * keeps its pane heading and a short one keeps its empty space inside the
+ * pane instead of leaving a gap at the bottom of the window.
+ *
+ * An asset browser or an inspector collapses to a labelled strip on a narrow
+ * desktop and expands again with its toggle. The body is hidden rather than
+ * unmounted, so nothing inside a collapsed pane is torn down or loses state.
+ */
+export function DockPane({ variant, heading, meta, children }: Props) {
+ const { t } = useI18n();
+ const collapsible = COLLAPSE_BELOW[variant] !== undefined;
+ const [open, setOpen] = useState(() => initiallyOpen(variant));
+
+ return (
+
+
+ );
+}
diff --git a/client/src/components/EncodingControls.tsx b/client/src/components/EncodingControls.tsx
index 93c3c51..3070012 100644
--- a/client/src/components/EncodingControls.tsx
+++ b/client/src/components/EncodingControls.tsx
@@ -3,8 +3,8 @@ import { useI18n } from "../i18n/I18nProvider";
import type { EncodeConfig } from "../types";
import { CheckField } from "./CheckField";
import { InputSizeField } from "./InputSizeField";
+import { NumberField } from "./NumberField";
import { SelectField } from "./SelectField";
-import { SliderField } from "./SliderField";
import { Section } from "./Stepper";
interface Props {
@@ -22,6 +22,10 @@ interface Props {
* Event datasets carry their own spikes and time bins, so every coding
* control is disabled with an explicit note rather than being silently
* ignored; only the playback interval stays adjustable.
+ *
+ * The timestep count and the playback interval are boxes — they are exact
+ * settings, not something to sweep. `gain` is drawn as a slider beside its
+ * box, because for a rate encode the value is found by feel.
*/
export function EncodingControls({
config,
@@ -59,7 +63,7 @@ export function EncodingControls({
onChange={(v) => set({ coding: v as EncodeConfig["coding"] })}
/>
- set({ num_steps: v })}
/>
- set({ gain: v })}
@@ -106,7 +111,7 @@ export function EncodingControls({
{!eventMode && config.coding === "latency" && (
<>
- set({ tau: v })}
/>
-
-
{t("controls.locked")}
}
-
+
);
diff --git a/client/src/components/DockPane.tsx b/client/src/components/DockPane.tsx
new file mode 100644
index 0000000..e3cdcd1
--- /dev/null
+++ b/client/src/components/DockPane.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { useI18n } from "../i18n/I18nProvider";
+import { IconButton } from "./IconButton";
+
+/** A pane's width policy: fixed for a browser or an inspector, free
+ * otherwise. */
+type PaneVariant = "assets" | "editor" | "inspector";
+
+/**
+ * Viewport width below which a pane starts collapsed, by role.
+ *
+ * The order is deliberate and follows each pane's weight: the asset browser
+ * gives way first, the inspector second, and the workspace only stacks much
+ * later (see dock.css). The editor is never in this table — it is where the
+ * work happens, so it keeps whatever width is left.
+ */
+const COLLAPSE_BELOW: Partial
+ {HELP.event_training}
)}
- onChange({ subset: v })}
/>
- onChange({ batch_size: v })}
/>
+
+
-
+ {heading}
+ {meta !== undefined && {meta}}
+ {collapsible && (
+ setOpen((isOpen) => !isOpen)}
+ />
+ )}
+
+
+ {children}
+
+
+
SOP
{count(report.ops.sop)}
MAC
@@ -101,25 +102,25 @@ export function EnergyPanel({ payload, targets, loading, onRun }: Props) {
return (
-
) : (
-
-
- {t("energy.title")}
-
+
+ }
+ />
-
+
-
{entries.map((entry) => (
{title}
+ {children} +
+ {canvas}
+
);
}
return (
{title &&
);
}
diff --git a/client/src/components/LoadedModelPanel.tsx b/client/src/components/LoadedModelPanel.tsx
index 3855dca..6432e66 100644
--- a/client/src/components/LoadedModelPanel.tsx
+++ b/client/src/components/LoadedModelPanel.tsx
@@ -1,25 +1,40 @@
import type { ModelLoadedPayload } from "../types";
import { TRAIN_HELP } from "../helpText";
+import { useI18n } from "../i18n/I18nProvider";
+import { FactGrid } from "./FactGrid";
+import type { Fact } from "./FactGrid";
import { HelpTip } from "./HelpTip";
-/** Compact one-row summary of the currently loaded checkpoint. */
+/**
+ * Summary of the loaded checkpoint: exactly the facts the server reported
+ * when it loaded, and nothing it did not.
+ *
+ * A field the checkpoint's record does not carry is left out rather than
+ * shown as a default, because a default here would read as a measurement.
+ */
export function LoadedModelPanel({ loaded }: { loaded: ModelLoadedPayload }) {
+ const { t } = useI18n();
+ const facts: Fact[] = [
+ { label: t("field.dataset"), value: loaded.dataset },
+ { label: t("loaded.accuracy"), value: `${loaded.accuracy.toFixed(1)}%` },
+ ];
+ if (loaded.input_mode !== undefined) {
+ facts.push({ label: t("loaded.input"), value: loaded.input_mode });
+ }
+ if (loaded.hidden !== undefined) {
+ facts.push({ label: t("loaded.hidden"), value: String(loaded.hidden) });
+ }
+ if (loaded.device !== undefined) {
+ facts.push({ label: t("loaded.device"), value: loaded.device });
+ }
+
return (
- {title}
}
-
+
+ {canvas}
+
-
+
+
);
}
diff --git a/client/src/components/Metric.tsx b/client/src/components/Metric.tsx
new file mode 100644
index 0000000..4036334
--- /dev/null
+++ b/client/src/components/Metric.tsx
@@ -0,0 +1,19 @@
+interface Props {
+ label: string;
+ value: string;
+ /** The smaller in-panel size (15px) instead of the 26px metric. */
+ small?: boolean;
+}
+
+/**
+ * One numeric readout. The value is tabular so a changing number does not
+ * shift the text beside it.
+ */
+export function Metric({ label, value, small = false }: Props) {
+ return (
+
{loaded.name}
- ·
- {loaded.dataset}
- ·
- acc {loaded.accuracy.toFixed(1)}%
- ·
- input {loaded.input_mode ?? "raw"}
- ·
- hidden {loaded.hidden ?? "—"}
- ·
- device {loaded.device ?? "—"}
+
+ {label}
+ {value}
+
+ );
+}
diff --git a/client/src/components/MetricsPanel.tsx b/client/src/components/MetricsPanel.tsx
index a030677..a19ef64 100644
--- a/client/src/components/MetricsPanel.tsx
+++ b/client/src/components/MetricsPanel.tsx
@@ -1,3 +1,5 @@
+import { RotateCw } from "lucide-react";
+
import { HELP } from "../helpText";
import { useSelectedStage } from "../hooks/useSelectedStage";
import type {
@@ -5,8 +7,9 @@ import type {
TrajectoryMetricsPayload,
} from "../introspectionTypes";
import type { ExecutionMode } from "../types";
-import { HelpTip } from "./HelpTip";
import { HistogramChart } from "./HistogramChart";
+import { IconButton } from "./IconButton";
+import { PanelHeader } from "./PanelHeader";
import { TrajectoryStageSelect } from "./TrajectoryStageSelect";
interface Props {
@@ -56,24 +59,18 @@ export function MetricsPanel({
return (
-
+
+ {/* The pane heading already names this pane, so the row starts with the
+ state that changes: which checkpoint is loaded. */}
- {t("section.model")}
{t("model.current")}
{loading ? (
@@ -61,7 +62,7 @@ export function ModelPanel({
) : (
-
+
{current ?? t("model.none")}
{current && (
@@ -86,6 +87,7 @@ export function ModelPanel({
type="button"
role="tab"
aria-selected={tab === "load"}
+ data-testid="model-tab-load"
className={`tab ${tab === "load" ? "active" : ""}`}
onClick={() => setTab("load")}
disabled={readOnly}
@@ -96,6 +98,7 @@ export function ModelPanel({
type="button"
role="tab"
aria-selected={tab === "save"}
+ data-testid="model-tab-save"
className={`tab ${tab === "save" ? "active" : ""}`}
onClick={() => setTab("save")}
disabled={readOnly}
@@ -106,6 +109,7 @@ export function ModelPanel({
type="button"
role="tab"
aria-selected={tab === "bundle"}
+ data-testid="model-tab-bundle"
className={`tab ${tab === "bundle" ? "active" : ""}`}
onClick={() => setTab("bundle")}
>
@@ -122,6 +126,7 @@ export function ModelPanel({
value={selected}
onChange={(e) => setSelected(e.target.value)}
disabled={disabled || models.length === 0}
+ data-testid="model-select"
aria-label={t("model.saved")}
>
-
- Trajectory metrics
-
+ />
+ }
+ />
{!educational && (
@@ -104,9 +101,7 @@ export function MetricsPanel({
) : (
<>
-
- {mode === "educational" ? t("mode.captureOn") : t("mode.captureOff")}
-
);
}
diff --git a/client/src/components/ModelPanel.tsx b/client/src/components/ModelPanel.tsx
index 11aadad..d4daa8c 100644
--- a/client/src/components/ModelPanel.tsx
+++ b/client/src/components/ModelPanel.tsx
@@ -49,9 +49,10 @@ export function ModelPanel({
const disabled = !connected || busy || loading || readOnly;
return (
-
- Firing-rate histogram
-
+