From 3013afbf6678148d1c9095330c41448b3e569353 Mon Sep 17 00:00:00 2001
From: Aldon Smith <smithaldon@gmail.com>
Date: Sun, 24 May 2026 09:13:16 -0400
Subject: [PATCH 1/4] feat: add protocol connections workbench page

---
 apps/web/README.md                            |  13 +-
 .../app/connections/connections-workspace.tsx | 701 ++++++++++++++++++
 apps/web/app/connections/page.tsx             |  52 ++
 apps/web/app/globals.css                      | 173 +++++
 apps/web/app/layout.tsx                       |  13 +-
 .../web/e2e/operations-workbench-demo.spec.ts |  32 +
 apps/web/lib/api-client.ts                    |  94 +++
 apps/web/tests/api-client.test.mjs            |   7 +
 apps/web/tests/app-shell.test.mjs             |  36 +
 docs/LEARNING_LOG.md                          |  66 ++
 10 files changed, 1182 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/app/connections/connections-workspace.tsx
 create mode 100644 apps/web/app/connections/page.tsx

diff --git a/apps/web/README.md b/apps/web/README.md
index 35ed52d..a1e2a46 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -49,6 +49,9 @@ running the API on different local web origins.
 The API client currently covers:
 
 - `GET /health`
+- `GET /connection-profiles`
+- `POST /connection-profiles`
+- `POST /connection-profiles/{profile_id}/test`
 - `GET /sites`
 - `GET /areas`
 - `GET /equipment`
@@ -79,12 +82,16 @@ is running on a non-default port.
 
 The shell uses a persistent sidebar with an embedded status strip instead of a
 horizontal top bar. Existing Sentinel demo routes remain available, and the
-sidebar includes planned navigation slots for Connections, Protocol Diagnostics,
-and Tag/Source Browser. Those planned slots do not add production writeback
-controls.
+sidebar includes a Connections page plus planned navigation slots for Protocol
+Diagnostics and Tag/Source Browser. Those surfaces do not add production
+writeback controls.
 
 - `/` - Factory overview dashboard with site, line, asset, work order, product,
   active detection count, pending recommendation count, and primary detection CTA
+- `/connections` - Read-only OPC-UA, MQTT, and BACnet connection profile setup
+  with protocol-specific controls, reference-only credential fields, disabled
+  profile support, local validation feedback, current health state, and
+  test-connection diagnostics that do not start ingestion or industrial writeback
 - `/detections` - Process Sentinel detection list with summary, severity,
   confidence, status, time window, work order, related assets, and detail links
 - `/detections/{detection_id}` - Read-only Process Sentinel detection detail
diff --git a/apps/web/app/connections/connections-workspace.tsx b/apps/web/app/connections/connections-workspace.tsx
new file mode 100644
index 0000000..d26987a
--- /dev/null
+++ b/apps/web/app/connections/connections-workspace.tsx
@@ -0,0 +1,701 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+
+import { StatusBadge } from "../components/demo-state";
+import {
+  type ConnectionTestResult,
+  type Protocol,
+  type ProtocolConnectionProfile,
+  formatApiError,
+  workbenchApi,
+} from "../../lib/api-client";
+
+type ConnectionsWorkspaceProps = {
+  initialProfiles: ProtocolConnectionProfile[];
+};
+
+type FormState = {
+  acquisitionSeconds: string;
+  bacnetDeviceInstance: string;
+  bacnetNetworkNumber: string;
+  bacnetObjectReferences: string;
+  description: string;
+  enabled: boolean;
+  endpoint: string;
+  id: string;
+  mappingReference: string;
+  mqttClientId: string;
+  mqttQos: "0" | "1" | "2";
+  mqttTopicFilters: string;
+  mqttUseTls: boolean;
+  name: string;
+  opcuaNamespaceUris: string;
+  opcuaNodeIds: string;
+  opcuaSecurityMode: "none" | "sign" | "sign_and_encrypt";
+  opcuaSecurityPolicy: string;
+  protocol: Protocol;
+  secretReference: string;
+};
+
+type ValidationError = {
+  field: string;
+  message: string;
+};
+
+const defaultFormState: FormState = {
+  acquisitionSeconds: "30",
+  bacnetDeviceInstance: "1001",
+  bacnetNetworkNumber: "",
+  bacnetObjectReferences: "analogInput:1",
+  description: "",
+  enabled: false,
+  endpoint: "opc.tcp://127.0.0.1:4840/ofi",
+  id: "demo-opcua-connection",
+  mappingReference: "mapping://demo/opcua-fill-line",
+  mqttClientId: "fip-workbench-demo",
+  mqttQos: "0",
+  mqttTopicFilters: "spBv1.0/OFI/DDATA/Line1/#",
+  mqttUseTls: true,
+  name: "Demo OPC-UA connection",
+  opcuaNamespaceUris: "urn:open-factory:demo",
+  opcuaNodeIds: "ns=2;s=Line1.FillWeight",
+  opcuaSecurityMode: "none",
+  opcuaSecurityPolicy: "",
+  protocol: "opcua",
+  secretReference: "",
+};
+
+export function ConnectionsWorkspace({
+  initialProfiles,
+}: ConnectionsWorkspaceProps) {
+  const [form, setForm] = useState<FormState>(defaultFormState);
+  const [profiles, setProfiles] =
+    useState<ProtocolConnectionProfile[]>(initialProfiles);
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [submitMessage, setSubmitMessage] = useState<string | null>(null);
+  const [testResults, setTestResults] = useState<Record<string, ConnectionTestResult>>({});
+  const [testingId, setTestingId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  async function createProfile(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitError(null);
+    setSubmitMessage(null);
+
+    const built = buildProfile(form);
+    if (!built.ok) {
+      setValidationErrors(built.errors);
+      return;
+    }
+
+    setValidationErrors([]);
+    setSaving(true);
+    try {
+      const createdProfile = await workbenchApi.createConnectionProfile(built.profile);
+      setProfiles((current) => upsertProfile(current, createdProfile));
+      setSubmitMessage(
+        `Created ${formatProtocol(createdProfile.protocol)} profile ${createdProfile.id}.`,
+      );
+    } catch (error) {
+      setSubmitError(formatApiError(error));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function testProfile(profileId: string) {
+    setTestingId(profileId);
+    setSubmitError(null);
+    try {
+      const result = await workbenchApi.testConnectionProfile(profileId);
+      setTestResults((current) => ({ ...current, [profileId]: result }));
+    } catch (error) {
+      setSubmitError(formatApiError(error));
+    } finally {
+      setTestingId(null);
+    }
+  }
+
+  function updateField<Key extends keyof FormState>(key: Key, value: FormState[Key]) {
+    setForm((current) => ({ ...current, [key]: value }));
+  }
+
+  function updateProtocol(protocol: Protocol) {
+    setForm((current) => ({
+      ...current,
+      endpoint: defaultEndpoint(protocol),
+      id: `demo-${protocol}-connection`,
+      mappingReference: `mapping://demo/${protocol}-source`,
+      name: `Demo ${formatProtocol(protocol)} connection`,
+      protocol,
+    }));
+  }
+
+  return (
+    <div className="connections-workspace">
+      <form
+        aria-describedby="connection-form-help connection-form-status"
+        className="data-card connection-form"
+        onSubmit={createProfile}
+      >
+        <div>
+          <span className="status-label">Profile definition</span>
+          <h2>Define connection</h2>
+          <p className="form-help" id="connection-form-help">
+            Use reference IDs for credentials and certificates. The Workbench
+            does not ask for raw passwords, tokens, private keys, or certificate
+            bodies.
+          </p>
+        </div>
+        <fieldset className="protocol-selector">
+          <legend>Protocol</legend>
+          {(["opcua", "mqtt", "bacnet"] as const).map((protocol) => (
+            <label key={protocol}>
+              <input
+                checked={form.protocol === protocol}
+                name="protocol"
+                onChange={() => updateProtocol(protocol)}
+                type="radio"
+                value={protocol}
+              />
+              <span>{formatProtocol(protocol)}</span>
+            </label>
+          ))}
+        </fieldset>
+        <div className="form-grid">
+          <label>
+            Profile ID
+            <input
+              name="id"
+              onChange={(event) => updateField("id", event.target.value)}
+              value={form.id}
+            />
+          </label>
+          <label>
+            Display name
+            <input
+              name="name"
+              onChange={(event) => updateField("name", event.target.value)}
+              value={form.name}
+            />
+          </label>
+          <label>
+            Endpoint
+            <input
+              name="endpoint"
+              onChange={(event) => updateField("endpoint", event.target.value)}
+              value={form.endpoint}
+            />
+          </label>
+          <label>
+            Mapping reference
+            <input
+              name="mapping_reference"
+              onChange={(event) => updateField("mappingReference", event.target.value)}
+              value={form.mappingReference}
+            />
+          </label>
+          <label>
+            {form.protocol === "mqtt" ? "Subscription interval seconds" : "Poll interval seconds"}
+            <input
+              min="1"
+              name="acquisition_seconds"
+              onChange={(event) => updateField("acquisitionSeconds", event.target.value)}
+              type="number"
+              value={form.acquisitionSeconds}
+            />
+          </label>
+          <label className="checkbox-field">
+            <input
+              checked={form.enabled}
+              name="enabled"
+              onChange={(event) => updateField("enabled", event.target.checked)}
+              type="checkbox"
+            />
+            <span>Enabled for read-only diagnostics</span>
+          </label>
+        </div>
+        <label>
+          Description
+          <textarea
+            name="description"
+            onChange={(event) => updateField("description", event.target.value)}
+            rows={2}
+            value={form.description}
+          />
+        </label>
+        <ProtocolFields form={form} updateField={updateField} />
+        <div className="decision-note">
+          Creating or testing a profile does not start ingestion and does not
+          write to PLC, DCS, SCADA, MQTT, BACnet, QMS, MES, or equipment systems.
+        </div>
+        <div className="review-actions">
+          <button disabled={saving} type="submit">
+            {saving ? "Creating..." : "Create profile"}
+          </button>
+        </div>
+        <div className="submit-status" id="connection-form-status" role="status">
+          {submitMessage ?? "Ready to create a disabled or enabled read-only profile."}
+        </div>
+        {validationErrors.length > 0 ? (
+          <div className="state-panel missing-data-panel" role="status">
+            <strong>Validation errors</strong>
+            {validationErrors.map((error) => (
+              <span key={`${error.field}-${error.message}`}>
+                {error.field}: {error.message}
+              </span>
+            ))}
+          </div>
+        ) : null}
+        {submitError !== null ? (
+          <div className="state-panel error-panel" role="alert">
+            <strong>Connection profile action failed</strong>
+            <span>{submitError}</span>
+          </div>
+        ) : null}
+      </form>
+      <section className="data-card connection-list" aria-label="Connection profiles">
+        <div>
+          <span className="status-label">Configured profiles</span>
+          <h2>Connection profiles</h2>
+        </div>
+        {profiles.length === 0 ? (
+          <div className="state-panel" role="status">
+            <strong>No profiles configured</strong>
+            <span>Create a disabled profile to rehearse the read-only test flow.</span>
+          </div>
+        ) : (
+          <div className="connection-profile-list">
+            {profiles.map((profile) => (
+              <ConnectionProfileCard
+                key={profile.id}
+                profile={profile}
+                testResult={testResults[profile.id]}
+                testing={testingId === profile.id}
+                onTest={() => testProfile(profile.id)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function ProtocolFields({
+  form,
+  updateField,
+}: {
+  form: FormState;
+  updateField: <Key extends keyof FormState>(key: Key, value: FormState[Key]) => void;
+}) {
+  if (form.protocol === "mqtt") {
+    return (
+      <fieldset className="protocol-fieldset">
+        <legend>MQTT controls</legend>
+        <div className="form-grid">
+          <label>
+            Client ID
+            <input
+              name="mqtt_client_id"
+              onChange={(event) => updateField("mqttClientId", event.target.value)}
+              value={form.mqttClientId}
+            />
+          </label>
+          <label>
+            Topic filters
+            <textarea
+              name="mqtt_topic_filters"
+              onChange={(event) => updateField("mqttTopicFilters", event.target.value)}
+              rows={3}
+              value={form.mqttTopicFilters}
+            />
+          </label>
+          <label>
+            QoS
+            <select
+              name="mqtt_qos"
+              onChange={(event) =>
+                updateField("mqttQos", event.target.value as FormState["mqttQos"])
+              }
+              value={form.mqttQos}
+            >
+              <option value="0">0</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+            </select>
+          </label>
+          <label>
+            Secret reference ID
+            <input
+              name="mqtt_secret_reference"
+              onChange={(event) => updateField("secretReference", event.target.value)}
+              placeholder="vault://mqtt/demo-client"
+              value={form.secretReference}
+            />
+          </label>
+          <label className="checkbox-field">
+            <input
+              checked={form.mqttUseTls}
+              name="mqtt_use_tls"
+              onChange={(event) => updateField("mqttUseTls", event.target.checked)}
+              type="checkbox"
+            />
+            <span>Use TLS</span>
+          </label>
+        </div>
+      </fieldset>
+    );
+  }
+
+  if (form.protocol === "bacnet") {
+    return (
+      <fieldset className="protocol-fieldset">
+        <legend>BACnet controls</legend>
+        <div className="form-grid">
+          <label>
+            Device instance
+            <input
+              min="0"
+              name="bacnet_device_instance"
+              onChange={(event) => updateField("bacnetDeviceInstance", event.target.value)}
+              type="number"
+              value={form.bacnetDeviceInstance}
+            />
+          </label>
+          <label>
+            Object references
+            <textarea
+              name="bacnet_object_references"
+              onChange={(event) => updateField("bacnetObjectReferences", event.target.value)}
+              rows={3}
+              value={form.bacnetObjectReferences}
+            />
+          </label>
+          <label>
+            Network number
+            <input
+              min="0"
+              name="bacnet_network_number"
+              onChange={(event) => updateField("bacnetNetworkNumber", event.target.value)}
+              type="number"
+              value={form.bacnetNetworkNumber}
+            />
+          </label>
+        </div>
+      </fieldset>
+    );
+  }
+
+  return (
+    <fieldset className="protocol-fieldset">
+      <legend>OPC-UA controls</legend>
+      <div className="form-grid">
+        <label>
+          Node IDs
+          <textarea
+            name="opcua_node_ids"
+            onChange={(event) => updateField("opcuaNodeIds", event.target.value)}
+            rows={3}
+            value={form.opcuaNodeIds}
+          />
+        </label>
+        <label>
+          Namespace URIs
+          <textarea
+            name="opcua_namespace_uris"
+            onChange={(event) => updateField("opcuaNamespaceUris", event.target.value)}
+            rows={3}
+            value={form.opcuaNamespaceUris}
+          />
+        </label>
+        <label>
+          Security mode
+          <select
+            name="opcua_security_mode"
+            onChange={(event) =>
+              updateField(
+                "opcuaSecurityMode",
+                event.target.value as FormState["opcuaSecurityMode"],
+              )
+            }
+            value={form.opcuaSecurityMode}
+          >
+            <option value="none">None</option>
+            <option value="sign">Sign</option>
+            <option value="sign_and_encrypt">Sign and encrypt</option>
+          </select>
+        </label>
+        <label>
+          Security policy
+          <input
+            name="opcua_security_policy"
+            onChange={(event) => updateField("opcuaSecurityPolicy", event.target.value)}
+            placeholder="Basic256Sha256"
+            value={form.opcuaSecurityPolicy}
+          />
+        </label>
+        <label>
+          Secret reference ID
+          <input
+            name="opcua_secret_reference"
+            onChange={(event) => updateField("secretReference", event.target.value)}
+            placeholder="vault://opcua/demo-user"
+            value={form.secretReference}
+          />
+        </label>
+      </div>
+    </fieldset>
+  );
+}
+
+function ConnectionProfileCard({
+  onTest,
+  profile,
+  testResult,
+  testing,
+}: {
+  onTest: () => void;
+  profile: ProtocolConnectionProfile;
+  testResult?: ConnectionTestResult;
+  testing: boolean;
+}) {
+  return (
+    <article className="connection-profile-card">
+      <div className="connection-profile-heading">
+        <div>
+          <span className="status-label">{formatProtocol(profile.protocol)}</span>
+          <h3>{profile.name}</h3>
+        </div>
+        <StatusBadge
+          tone={profile.enabled ? healthTone(profile.health_state) : "draft"}
+          value={profile.enabled ? profile.health_state : "disabled"}
+        />
+      </div>
+      <dl className="connection-profile-meta">
+        <div>
+          <dt>Endpoint</dt>
+          <dd>{profile.endpoint}</dd>
+        </div>
+        <div>
+          <dt>Mapping</dt>
+          <dd>{profile.mapping_reference}</dd>
+        </div>
+        <div>
+          <dt>State</dt>
+          <dd>{profile.enabled ? "Enabled for read-only diagnostics" : "Disabled"}</dd>
+        </div>
+        <div>
+          <dt>Secret handling</dt>
+          <dd>{hasConfiguredReference(profile) ? "Reference configured" : "No secret reference"}</dd>
+        </div>
+      </dl>
+      <button
+        className="secondary-action"
+        disabled={testing}
+        onClick={onTest}
+        type="button"
+      >
+        {testing ? "Testing..." : "Test connection"}
+      </button>
+      {testResult ? (
+        <div className="connection-test-result" role="status">
+          <strong>Last test result: {testResult.status}</strong>
+          <span>{testResult.message}</span>
+          <span>Checked: {formatTimestamp(testResult.checked_at)}</span>
+          <span>Duration: {testResult.duration_ms} ms</span>
+        </div>
+      ) : (
+        <div className="connection-test-result connection-test-result-muted">
+          <strong>Last test result: Not run</strong>
+          <span>Use Test connection for a read-only diagnostic check.</span>
+        </div>
+      )}
+    </article>
+  );
+}
+
+function buildProfile(
+  form: FormState,
+): { ok: true; profile: ProtocolConnectionProfile } | { errors: ValidationError[]; ok: false } {
+  const errors: ValidationError[] = [];
+  const profileId = form.id.trim();
+  const name = form.name.trim();
+  const endpoint = form.endpoint.trim();
+  const mappingReference = form.mappingReference.trim();
+  const acquisitionSeconds = Number(form.acquisitionSeconds);
+
+  requireValue(errors, "Profile ID", profileId);
+  requireValue(errors, "Display name", name);
+  requireValue(errors, "Endpoint", endpoint);
+  requireValue(errors, "Mapping reference", mappingReference);
+  if (!Number.isFinite(acquisitionSeconds) || acquisitionSeconds <= 0) {
+    errors.push({
+      field: "Acquisition interval",
+      message: "Enter a positive number of seconds.",
+    });
+  }
+
+  const now = new Date().toISOString();
+  const profile: ProtocolConnectionProfile = {
+    acquisition:
+      form.protocol === "mqtt"
+        ? { mode: "subscribe", subscription_interval_seconds: acquisitionSeconds }
+        : { mode: "poll", poll_interval_seconds: acquisitionSeconds },
+    created_at: now,
+    description: optionalString(form.description),
+    enabled: form.enabled,
+    endpoint,
+    health_state: form.enabled ? "unknown" : "disabled",
+    id: profileId,
+    mapping_reference: mappingReference,
+    name,
+    protocol: form.protocol,
+    updated_at: now,
+  };
+
+  if (form.protocol === "mqtt") {
+    const topicFilters = splitList(form.mqttTopicFilters);
+    requireValue(errors, "MQTT client ID", form.mqttClientId.trim());
+    requireList(errors, "MQTT topic filters", topicFilters);
+    profile.mqtt = {
+      auth_secret_ref: buildSecretReference(form.secretReference),
+      client_id: form.mqttClientId.trim(),
+      qos: Number(form.mqttQos) as 0 | 1 | 2,
+      topic_filters: topicFilters,
+      use_tls: form.mqttUseTls,
+    };
+  } else if (form.protocol === "bacnet") {
+    const deviceInstance = Number(form.bacnetDeviceInstance);
+    const objectReferences = splitList(form.bacnetObjectReferences);
+    if (!Number.isInteger(deviceInstance) || deviceInstance < 0) {
+      errors.push({
+        field: "BACnet device instance",
+        message: "Enter a non-negative integer.",
+      });
+    }
+    requireList(errors, "BACnet object references", objectReferences);
+    profile.bacnet = {
+      device_instance: deviceInstance,
+      network_number: optionalNumber(form.bacnetNetworkNumber),
+      object_references: objectReferences,
+    };
+  } else {
+    const nodeIds = splitList(form.opcuaNodeIds);
+    requireList(errors, "OPC-UA node IDs", nodeIds);
+    profile.opcua = {
+      auth_secret_ref: buildSecretReference(form.secretReference),
+      namespace_uris: splitList(form.opcuaNamespaceUris),
+      node_ids: nodeIds,
+      security_mode: form.opcuaSecurityMode,
+      security_policy: optionalString(form.opcuaSecurityPolicy),
+    };
+  }
+
+  if (errors.length > 0) {
+    return { errors, ok: false };
+  }
+  return { ok: true, profile: stripUndefined(profile) };
+}
+
+function requireValue(errors: ValidationError[], field: string, value: string) {
+  if (value.length === 0) {
+    errors.push({ field, message: "Required." });
+  }
+}
+
+function requireList(errors: ValidationError[], field: string, value: string[]) {
+  if (value.length === 0) {
+    errors.push({ field, message: "Enter at least one value." });
+  }
+}
+
+function splitList(value: string): string[] {
+  return value
+    .split(/[\n,]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function optionalString(value: string): string | undefined {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function optionalNumber(value: string): number | undefined {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return undefined;
+  }
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function buildSecretReference(value: string) {
+  const ref = optionalString(value);
+  return ref ? { purpose: "username_password" as const, ref } : undefined;
+}
+
+function upsertProfile(
+  profiles: ProtocolConnectionProfile[],
+  profile: ProtocolConnectionProfile,
+): ProtocolConnectionProfile[] {
+  const withoutProfile = profiles.filter((item) => item.id !== profile.id);
+  return [profile, ...withoutProfile];
+}
+
+function stripUndefined(profile: ProtocolConnectionProfile): ProtocolConnectionProfile {
+  return JSON.parse(JSON.stringify(profile)) as ProtocolConnectionProfile;
+}
+
+function defaultEndpoint(protocol: Protocol): string {
+  if (protocol === "mqtt") {
+    return "mqtt://127.0.0.1:1883";
+  }
+  if (protocol === "bacnet") {
+    return "bacnet://192.168.1.10";
+  }
+  return "opc.tcp://127.0.0.1:4840/ofi";
+}
+
+function formatProtocol(protocol: Protocol | string): string {
+  if (protocol === "opcua") {
+    return "OPC-UA";
+  }
+  if (protocol === "mqtt") {
+    return "MQTT";
+  }
+  if (protocol === "bacnet") {
+    return "BACnet";
+  }
+  return protocol;
+}
+
+function formatTimestamp(value: string): string {
+  return value.replace("T", " ").replace("Z", " UTC");
+}
+
+function healthTone(state: ProtocolConnectionProfile["health_state"]) {
+  if (state === "healthy") {
+    return "success";
+  }
+  if (state === "failed") {
+    return "danger";
+  }
+  if (state === "degraded") {
+    return "warning";
+  }
+  if (state === "disabled") {
+    return "draft";
+  }
+  return "neutral";
+}
+
+function hasConfiguredReference(profile: ProtocolConnectionProfile): boolean {
+  return Boolean(
+    profile.opcua?.auth_secret_ref?.configured ??
+      profile.mqtt?.auth_secret_ref?.configured,
+  );
+}
diff --git a/apps/web/app/connections/page.tsx b/apps/web/app/connections/page.tsx
new file mode 100644
index 0000000..c3b0881
--- /dev/null
+++ b/apps/web/app/connections/page.tsx
@@ -0,0 +1,52 @@
+import { ApiErrorPanel, DemoDataBadge } from "../components/demo-state";
+import {
+  type ProtocolConnectionProfile,
+  formatApiError,
+  getApiBaseUrl,
+  workbenchApi,
+} from "../../lib/api-client";
+import { ConnectionsWorkspace } from "./connections-workspace";
+
+export const dynamic = "force-dynamic";
+
+export default async function ConnectionsPage() {
+  const result = await loadConnectionProfiles();
+
+  return (
+    <section className="content-panel connections-page">
+      <DemoDataBadge label="Read-only connection management" />
+      <div>
+        <h1>Connections</h1>
+        <p className="lead">
+          Define OPC-UA, MQTT, and BACnet connection profiles, then run
+          read-only tests before any ingestion work is considered.
+        </p>
+      </div>
+      <div className="decision-note">
+        Test connection only checks profile reachability and validation through
+        the local API. It does not start ingestion, write tags, publish commands,
+        or perform industrial writeback.
+      </div>
+      {!result.ok ? <ApiErrorPanel message={result.message} /> : null}
+      {result.ok ? <ConnectionsWorkspace initialProfiles={result.profiles} /> : null}
+      <div className="api-panel">
+        <p>
+          Configured API target: <code>{getApiBaseUrl()}</code>
+        </p>
+      </div>
+    </section>
+  );
+}
+
+async function loadConnectionProfiles() {
+  try {
+    const profiles = await workbenchApi.listConnectionProfiles();
+    return { ok: true as const, profiles };
+  } catch (error) {
+    return {
+      message: formatApiError(error),
+      ok: false as const,
+      profiles: [] satisfies ProtocolConnectionProfile[],
+    };
+  }
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index ed47bb7..f190276 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1079,6 +1079,169 @@ h3 {
   outline-offset: 1px;
 }
 
+.connections-workspace {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.connection-form {
+  align-content: start;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.connection-form label,
+.protocol-fieldset label,
+.protocol-selector label {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.connection-form input,
+.connection-form select,
+.connection-form textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  line-height: 1.5;
+  margin-top: 7px;
+  padding: 11px 12px;
+}
+
+.connection-form input:focus,
+.connection-form select:focus,
+.connection-form textarea:focus {
+  border-color: var(--accent);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.protocol-selector,
+.protocol-fieldset {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.protocol-selector {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.protocol-selector legend,
+.protocol-fieldset legend {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.protocol-selector label,
+.checkbox-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.protocol-selector input,
+.checkbox-field input {
+  width: auto;
+  margin: 0;
+}
+
+.checkbox-field {
+  align-self: end;
+  min-height: 44px;
+}
+
+.connection-list {
+  align-content: start;
+}
+
+.connection-profile-list {
+  display: grid;
+  gap: 14px;
+}
+
+.connection-profile-card {
+  display: grid;
+  gap: 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 16px;
+}
+
+.connection-profile-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.connection-profile-heading h3 {
+  margin-bottom: 0;
+}
+
+.connection-profile-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0;
+}
+
+.connection-profile-meta div {
+  display: grid;
+  gap: 4px;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+.connection-profile-meta dt {
+  color: var(--muted);
+  font-size: 0.74rem;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.connection-profile-meta dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.connection-test-result {
+  display: grid;
+  gap: 4px;
+  border-left: 4px solid var(--accent);
+  background: #e7f3f1;
+  color: #21423e;
+  line-height: 1.45;
+  padding: 12px;
+}
+
+.connection-test-result-muted {
+  border-left-color: var(--border-strong);
+  background: var(--surface-muted);
+  color: var(--muted);
+}
+
 .review-actions {
   display: flex;
   flex-wrap: wrap;
@@ -1199,6 +1362,10 @@ code {
     grid-template-columns: 1fr;
   }
 
+  .connections-workspace {
+    grid-template-columns: 1fr;
+  }
+
   .overview-grid {
     grid-template-columns: 1fr;
   }
@@ -1253,6 +1420,12 @@ code {
     grid-template-columns: 1fr;
   }
 
+  .form-grid,
+  .protocol-selector,
+  .connection-profile-meta {
+    grid-template-columns: 1fr;
+  }
+
   .metric-grid {
     grid-template-columns: 1fr;
   }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 452af3f..bbb618c 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -11,7 +11,16 @@ export const metadata: Metadata = {
   description: "Simulator-backed Factory Intelligence Platform workbench shell.",
 };
 
-const navGroups = [
+type NavItem =
+  | { href: string; label: string }
+  | { label: string; status: "Planned" };
+
+type NavGroup = {
+  items: NavItem[];
+  label: string;
+};
+
+const navGroups: NavGroup[] = [
   {
     items: [
       { href: "/", label: "Overview" },
@@ -23,7 +32,7 @@ const navGroups = [
   },
   {
     items: [
-      { label: "Connections", status: "Planned" },
+      { href: "/connections", label: "Connections" },
       { label: "Protocol Diagnostics", status: "Planned" },
       { label: "Tag/Source Browser", status: "Planned" },
     ],
diff --git a/apps/web/e2e/operations-workbench-demo.spec.ts b/apps/web/e2e/operations-workbench-demo.spec.ts
index 2fcf2de..d77e18f 100644
--- a/apps/web/e2e/operations-workbench-demo.spec.ts
+++ b/apps/web/e2e/operations-workbench-demo.spec.ts
@@ -23,6 +23,9 @@ test("walks the simulator-backed Operations Workbench demo path", async ({ page
   await expect(page.getByText("Read-only diagnostics")).toBeVisible();
   await expect(page.getByText("Writeback")).toBeVisible();
   await expect(page.getByText("Disabled", { exact: true })).toBeVisible();
+  await page.locator('a[href="/connections"]').first().click();
+  await createDisabledConnectionProfile(page);
+  await page.locator('a[href="/"]').first().click();
   await expect(page.getByText("Simulator-backed demo data").first()).toBeVisible();
   await expect(page.getByText("Synthetic local scenario; not real plant data.").first()).toBeVisible();
   await expect(page.getByRole("region", { name: "Local API connection state" })).toBeVisible();
@@ -84,6 +87,35 @@ test("walks the simulator-backed Operations Workbench demo path", async ({ page
   await expect(page.getByRole("status")).toContainText("rerun make demo");
 });
 
+async function createDisabledConnectionProfile(page: Page) {
+  const profileId = `playwright-disabled-opcua-${Date.now()}`;
+
+  await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
+  await expect(page.getByText("OPC-UA controls")).toBeVisible();
+  await expect(page.getByText("MQTT", { exact: true })).toBeVisible();
+  await expect(page.getByText("BACnet", { exact: true })).toBeVisible();
+  await expect(page.getByText("It does not start ingestion")).toBeVisible();
+  await expect(page.getByText("industrial writeback")).toBeVisible();
+  await expect(page.getByLabel("Enabled for read-only diagnostics")).not.toBeChecked();
+
+  await page.getByLabel("Profile ID").fill(profileId);
+  await page.getByLabel("Display name").fill("Playwright disabled OPC-UA profile");
+  await page.getByLabel("Endpoint").fill("opc.tcp://127.0.0.1:4840/ofi-playwright");
+  await page.getByLabel("Mapping reference").fill("mapping://playwright/opcua");
+  await page.getByLabel("Node IDs").fill("ns=2;s=Line1.FillWeight");
+  await page.getByRole("button", { name: "Create profile" }).click();
+
+  await expect(page.getByRole("status")).toContainText(`Created OPC-UA profile ${profileId}.`);
+  const profileCard = page.locator(".connection-profile-card").filter({
+    hasText: "Playwright disabled OPC-UA profile",
+  });
+  await expect(profileCard).toContainText("Disabled");
+  await expect(profileCard).toContainText("No secret reference");
+  await profileCard.getByRole("button", { name: "Test connection" }).click();
+  await expect(profileCard).toContainText("Last test result: disabled");
+  await expect(profileCard).toContainText("no protocol test was attempted");
+}
+
 async function recordDecision(
   page: Page,
   action: "Approve" | "Reject" | "Defer",
diff --git a/apps/web/lib/api-client.ts b/apps/web/lib/api-client.ts
index 2f27294..a406a3a 100644
--- a/apps/web/lib/api-client.ts
+++ b/apps/web/lib/api-client.ts
@@ -7,6 +7,86 @@ export type HealthResponse = {
   sentinel_state_dir: string;
 };
 
+export type Protocol = "opcua" | "mqtt" | "bacnet";
+
+export type ConnectionHealthState =
+  | "unknown"
+  | "healthy"
+  | "degraded"
+  | "failed"
+  | "disabled";
+
+export type SecretReference = {
+  ref?: string;
+  configured?: boolean;
+  purpose: "username_password" | "token" | "client_key" | "other";
+};
+
+export type CertificateReference = {
+  ref?: string;
+  configured?: boolean;
+  purpose: "client_certificate" | "trusted_server_certificate" | "ca_certificate";
+};
+
+export type AcquisitionSettings = {
+  mode: "poll" | "subscribe";
+  poll_interval_seconds?: number;
+  subscription_interval_seconds?: number;
+};
+
+export type OpcUaConnectionConfig = {
+  node_ids: string[];
+  namespace_uris?: string[];
+  security_mode: "none" | "sign" | "sign_and_encrypt";
+  security_policy?: string;
+  auth_secret_ref?: SecretReference;
+  client_certificate_ref?: CertificateReference;
+  trusted_server_certificate_ref?: CertificateReference;
+};
+
+export type MqttConnectionConfig = {
+  client_id: string;
+  topic_filters: string[];
+  qos: 0 | 1 | 2;
+  use_tls: boolean;
+  auth_secret_ref?: SecretReference;
+  ca_certificate_ref?: CertificateReference;
+  client_certificate_ref?: CertificateReference;
+};
+
+export type BacnetConnectionConfig = {
+  device_instance: number;
+  object_references: string[];
+  network_number?: number;
+};
+
+export type ProtocolConnectionProfile = {
+  id: string;
+  name: string;
+  protocol: Protocol;
+  enabled: boolean;
+  description?: string;
+  endpoint: string;
+  acquisition: AcquisitionSettings;
+  mapping_reference: string;
+  health_state: ConnectionHealthState;
+  created_at: string;
+  updated_at: string;
+  opcua?: OpcUaConnectionConfig;
+  mqtt?: MqttConnectionConfig;
+  bacnet?: BacnetConnectionConfig;
+};
+
+export type ConnectionTestResult = {
+  connection_id: string;
+  protocol: Protocol | string;
+  status: "healthy" | "failed" | "disabled" | "invalid";
+  checked_at: string;
+  duration_ms: number;
+  message: string;
+  diagnostics: Record<string, unknown>;
+};
+
 export type Site = {
   site_id: string;
   name: string;
@@ -148,6 +228,20 @@ export class ApiClientError extends Error {
 
 export const workbenchApi = {
   getHealth: () => requestJson<HealthResponse>("/health"),
+  listConnectionProfiles: () =>
+    requestJson<ProtocolConnectionProfile[]>("/connection-profiles"),
+  createConnectionProfile: (profile: ProtocolConnectionProfile) =>
+    requestJson<ProtocolConnectionProfile>("/connection-profiles", {
+      body: JSON.stringify(profile),
+      method: "POST",
+    }),
+  testConnectionProfile: (connectionId: string) =>
+    requestJson<ConnectionTestResult>(
+      `/connection-profiles/${encodeURIComponent(connectionId)}/test`,
+      {
+        method: "POST",
+      },
+    ),
   listSites: () => requestJson<Site[]>("/sites"),
   listAreas: () => requestJson<Area[]>("/areas"),
   listEquipment: () => requestJson<Equipment[]>("/equipment"),
diff --git a/apps/web/tests/api-client.test.mjs b/apps/web/tests/api-client.test.mjs
index e26f303..a7bcbc9 100644
--- a/apps/web/tests/api-client.test.mjs
+++ b/apps/web/tests/api-client.test.mjs
@@ -10,6 +10,8 @@ const client = readFileSync(join(root, "lib/api-client.ts"), "utf8");
 
 const requiredEndpoints = [
   "/health",
+  "/connection-profiles",
+  "/connection-profiles/${encodeURIComponent(connectionId)}/test",
   "/sites",
   "/areas",
   "/equipment",
@@ -31,6 +33,9 @@ test("typed workbench API client covers demo endpoints", () => {
   }
 
   assert.match(client, /getHealth/);
+  assert.match(client, /listConnectionProfiles/);
+  assert.match(client, /createConnectionProfile/);
+  assert.match(client, /testConnectionProfile/);
   assert.match(client, /listSites/);
   assert.match(client, /listAreas/);
   assert.match(client, /listEquipment/);
@@ -47,6 +52,8 @@ test("typed workbench API client covers demo endpoints", () => {
   assert.match(client, /deferRecommendation/);
   assert.match(client, /getRcaCapaDraft/);
   assert.match(client, /export type AuditEvent/);
+  assert.match(client, /export type ProtocolConnectionProfile/);
+  assert.match(client, /export type ConnectionTestResult/);
   assert.match(client, /details: Record<string, unknown>/);
 });
 
diff --git a/apps/web/tests/app-shell.test.mjs b/apps/web/tests/app-shell.test.mjs
index 331a312..7e0d43e 100644
--- a/apps/web/tests/app-shell.test.mjs
+++ b/apps/web/tests/app-shell.test.mjs
@@ -9,6 +9,8 @@ const root = fileURLToPath(new URL("..", import.meta.url));
 
 const requiredRoutes = [
   "app/page.tsx",
+  "app/connections/page.tsx",
+  "app/connections/connections-workspace.tsx",
   "app/detections/page.tsx",
   "app/detections/[detectionId]/page.tsx",
   "app/recommendations/page.tsx",
@@ -35,6 +37,7 @@ test("navigation includes the required demo routes", () => {
   assert.match(layout, /RCA\/CAPA Draft/);
   assert.match(layout, /Protocol operations/);
   assert.match(layout, /Connections/);
+  assert.match(layout, /href: "\/connections"/);
   assert.match(layout, /Protocol Diagnostics/);
   assert.match(layout, /Tag\/Source Browser/);
   assert.match(layout, /aria-disabled="true"/);
@@ -47,6 +50,39 @@ test("navigation includes the required demo routes", () => {
   assert.match(layout, /DemoDataBadge/);
 });
 
+test("connections page supports read-only protocol profile setup", () => {
+  const page = readFileSync(join(root, "app/connections/page.tsx"), "utf8");
+  const workspace = readFileSync(
+    join(root, "app/connections/connections-workspace.tsx"),
+    "utf8",
+  );
+  const styles = readFileSync(join(root, "app/globals.css"), "utf8");
+
+  assert.match(page, /Connections/);
+  assert.match(page, /read-only tests/);
+  assert.match(page, /does not start ingestion/);
+  assert.match(page, /industrial writeback/);
+  assert.match(page, /listConnectionProfiles/);
+  assert.match(page, /ConnectionsWorkspace/);
+  assert.match(workspace, /OPC-UA controls/);
+  assert.match(workspace, /MQTT controls/);
+  assert.match(workspace, /BACnet controls/);
+  assert.match(workspace, /Secret reference ID/);
+  assert.match(workspace, /raw passwords, tokens, private keys, or certificate/);
+  assert.match(workspace, /createConnectionProfile/);
+  assert.match(workspace, /testConnectionProfile/);
+  assert.match(workspace, /Validation errors/);
+  assert.match(workspace, /Last test result/);
+  assert.match(workspace, /Enabled for read-only diagnostics/);
+  assert.match(workspace, /Disabled/);
+  assert.match(workspace, /does not start ingestion/);
+  assert.match(workspace, /does not\s+write to PLC/);
+  assert.doesNotMatch(workspace, /Start ingestion/);
+  assert.doesNotMatch(workspace, /writeback controls/);
+  assert.match(styles, /connections-workspace/);
+  assert.match(styles, /connection-profile-card/);
+});
+
 test("operator shell uses the Demo Factory console palette", () => {
   const styles = readFileSync(join(root, "app/globals.css"), "utf8");
 
diff --git a/docs/LEARNING_LOG.md b/docs/LEARNING_LOG.md
index ce242af..6bea9be 100644
--- a/docs/LEARNING_LOG.md
+++ b/docs/LEARNING_LOG.md
@@ -22,6 +22,72 @@ This file should be updated by Codex after each meaningful change.
 ### What to learn next
 ```
 
+## 2026-05-24 - Connections Workbench page
+
+### What changed
+
+Added the Operations Workbench Connections page for defining OPC-UA, MQTT, and
+BACnet connection profiles. The page includes protocol-specific form controls,
+reference-only credential fields, disabled/enabled state, current health state,
+client-side validation errors, and a read-only test connection action that shows
+the last test result.
+
+### Why it matters
+
+Connection management is the safe front door for future production-oriented
+protocol adapters. This page lets a contributor rehearse profile creation and
+diagnostic testing without starting ingestion, writing tags, publishing
+commands, or claiming production readiness.
+
+### How it works
+
+`/connections` loads redacted profiles from the existing connection profile API
+and passes them to a client-side workspace. The form builds the shared
+`ProtocolConnectionProfile` request shape for the selected protocol and submits
+it to `POST /connection-profiles`. Each profile card calls
+`POST /connection-profiles/{profile_id}/test`, then displays the structured
+read-only diagnostic result returned by the API.
+
+### How to run it
+
+```bash
+make api
+cd apps/web
+npm run dev
+```
+
+Open:
+
+```text
+http://127.0.0.1:3000/connections
+```
+
+### How to test it
+
+```bash
+cd apps/web
+npm test
+npm run lint
+npm run typecheck
+npm run build
+npm run test:e2e
+```
+
+### Key files
+
+- `apps/web/app/connections/page.tsx`
+- `apps/web/app/connections/connections-workspace.tsx`
+- `apps/web/lib/api-client.ts`
+- `apps/web/e2e/operations-workbench-demo.spec.ts`
+- `apps/web/tests/app-shell.test.mjs`
+
+### What to learn next
+
+Use the same redacted profile and test-result contracts when building the
+Protocol Diagnostics page. Keep actual adapter sessions, ingestion start, tag
+source browsing, and industrial writeback out of this UI until their dedicated
+issues define and test those boundaries.
+
 ## 2026-05-23 - Production protocol connector ADR
 
 ### What changed

From c4f8a25825170bbaca87c184db8cee4c3e5ab3a1 Mon Sep 17 00:00:00 2001
From: Aldon Smith <smithaldon@gmail.com>
Date: Sun, 24 May 2026 09:48:30 -0400
Subject: [PATCH 2/4] refactor: move connection profile form into modal

---
 apps/web/README.md                            |  11 +-
 .../app/connections/connections-workspace.tsx | 581 +++++++++++-------
 apps/web/app/connections/page.tsx             |   7 -
 apps/web/app/globals.css                      | 149 ++---
 .../web/e2e/operations-workbench-demo.spec.ts |  50 +-
 apps/web/lib/api-client.ts                    |   8 +
 apps/web/tests/api-client.test.mjs            |   2 +
 apps/web/tests/app-shell.test.mjs             |  17 +-
 docs/LEARNING_LOG.md                          |  23 +-
 9 files changed, 530 insertions(+), 318 deletions(-)

diff --git a/apps/web/README.md b/apps/web/README.md
index a1e2a46..5e2d322 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -51,6 +51,7 @@ The API client currently covers:
 - `GET /health`
 - `GET /connection-profiles`
 - `POST /connection-profiles`
+- `PUT /connection-profiles/{profile_id}`
 - `POST /connection-profiles/{profile_id}/test`
 - `GET /sites`
 - `GET /areas`
@@ -88,10 +89,12 @@ writeback controls.
 
 - `/` - Factory overview dashboard with site, line, asset, work order, product,
   active detection count, pending recommendation count, and primary detection CTA
-- `/connections` - Read-only OPC-UA, MQTT, and BACnet connection profile setup
-  with protocol-specific controls, reference-only credential fields, disabled
-  profile support, local validation feedback, current health state, and
-  test-connection diagnostics that do not start ingestion or industrial writeback
+- `/connections` - Read-only OPC-UA, MQTT, and BACnet connections table with a
+  top-right add button, modal profile definition form, display-name click to
+  reopen the modal with prefilled values, reference-only credential fields,
+  disabled profile support, local validation feedback, current health state,
+  and test-connection diagnostics that do not start ingestion or industrial
+  writeback
 - `/detections` - Process Sentinel detection list with summary, severity,
   confidence, status, time window, work order, related assets, and detail links
 - `/detections/{detection_id}` - Read-only Process Sentinel detection detail
diff --git a/apps/web/app/connections/connections-workspace.tsx b/apps/web/app/connections/connections-workspace.tsx
index d26987a..028471b 100644
--- a/apps/web/app/connections/connections-workspace.tsx
+++ b/apps/web/app/connections/connections-workspace.tsx
@@ -38,6 +38,8 @@ type FormState = {
   secretReference: string;
 };
 
+type ModalMode = "create" | "edit";
+
 type ValidationError = {
   field: string;
   message: string;
@@ -78,13 +80,46 @@ export function ConnectionsWorkspace({
   const [testResults, setTestResults] = useState<Record<string, ConnectionTestResult>>({});
   const [testingId, setTestingId] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+  const [modalMode, setModalMode] = useState<ModalMode | null>(null);
+  const [editingProfile, setEditingProfile] =
+    useState<ProtocolConnectionProfile | null>(null);
+
+  const modalOpen = modalMode !== null;
+
+  function openCreateModal() {
+    setForm(defaultFormState);
+    setEditingProfile(null);
+    setValidationErrors([]);
+    setSubmitError(null);
+    setSubmitMessage(null);
+    setModalMode("create");
+  }
+
+  function openEditModal(profile: ProtocolConnectionProfile) {
+    setForm(profileToFormState(profile));
+    setEditingProfile(profile);
+    setValidationErrors([]);
+    setSubmitError(null);
+    setSubmitMessage(null);
+    setModalMode("edit");
+  }
+
+  function closeModal() {
+    if (saving) {
+      return;
+    }
+    setModalMode(null);
+    setEditingProfile(null);
+    setValidationErrors([]);
+    setSubmitError(null);
+  }
 
-  async function createProfile(event: FormEvent<HTMLFormElement>) {
+  async function saveProfile(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setSubmitError(null);
     setSubmitMessage(null);
 
-    const built = buildProfile(form);
+    const built = buildProfile(form, editingProfile);
     if (!built.ok) {
       setValidationErrors(built.errors);
       return;
@@ -93,11 +128,19 @@ export function ConnectionsWorkspace({
     setValidationErrors([]);
     setSaving(true);
     try {
-      const createdProfile = await workbenchApi.createConnectionProfile(built.profile);
-      setProfiles((current) => upsertProfile(current, createdProfile));
+      const savedProfile =
+        modalMode === "edit"
+          ? await workbenchApi.updateConnectionProfile(built.profile)
+          : await workbenchApi.createConnectionProfile(built.profile);
+      setProfiles((current) => upsertProfile(current, savedProfile));
       setSubmitMessage(
-        `Created ${formatProtocol(createdProfile.protocol)} profile ${createdProfile.id}.`,
+        `${modalMode === "edit" ? "Updated" : "Created"} ${formatProtocol(
+          savedProfile.protocol,
+        )} profile ${savedProfile.id}.`,
       );
+      setEditingProfile(savedProfile);
+      setForm(profileToFormState(savedProfile));
+      setModalMode("edit");
     } catch (error) {
       setSubmitError(formatApiError(error));
     } finally {
@@ -135,150 +178,304 @@ export function ConnectionsWorkspace({
 
   return (
     <div className="connections-workspace">
-      <form
-        aria-describedby="connection-form-help connection-form-status"
-        className="data-card connection-form"
-        onSubmit={createProfile}
-      >
+      <div className="connections-page-header">
         <div>
-          <span className="status-label">Profile definition</span>
-          <h2>Define connection</h2>
+          <h1>Connections</h1>
+          <p className="lead">
+            Define OPC-UA, MQTT, and BACnet connection profiles, then run
+            read-only tests before any ingestion work is considered.
+          </p>
+        </div>
+        <button
+          aria-label="Add connection profile"
+          className="icon-action add-connection-button"
+          onClick={openCreateModal}
+          type="button"
+        >
+          +
+        </button>
+      </div>
+      <section className="data-card connection-list" aria-label="Configured connections">
+        <div className="section-header">
+          <div>
+            <span className="status-label">Configured connections</span>
+            <h2>Connection profiles</h2>
+          </div>
+        </div>
+        <div className="table-wrap">
+          <table className="connection-table">
+            <thead>
+              <tr>
+                <th>Connection display name</th>
+                <th>Connection status</th>
+                <th>Protocol</th>
+                <th>Last test result</th>
+                <th>Read-only test</th>
+              </tr>
+            </thead>
+            <tbody>
+              {profiles.length === 0 ? (
+                <tr>
+                  <td colSpan={5}>
+                    No connections configured. Select the plus button to define
+                    a disabled read-only profile.
+                  </td>
+                </tr>
+              ) : (
+                profiles.map((profile) => {
+                  const testResult = testResults[profile.id];
+                  return (
+                    <tr key={profile.id}>
+                      <td>
+                        <button
+                          className="table-link connection-name-button"
+                          onClick={() => openEditModal(profile)}
+                          type="button"
+                        >
+                          {profile.name}
+                        </button>
+                      </td>
+                      <td>
+                        <StatusBadge
+                          tone={profile.enabled ? healthTone(profile.health_state) : "draft"}
+                          value={profile.enabled ? profile.health_state : "disabled"}
+                        />
+                      </td>
+                      <td>{formatProtocol(profile.protocol)}</td>
+                      <td>{testResult ? testResult.status : "Not run"}</td>
+                      <td>
+                        <button
+                          className="secondary-action compact-action"
+                          disabled={testingId === profile.id}
+                          onClick={() => testProfile(profile.id)}
+                          type="button"
+                        >
+                          {testingId === profile.id ? "Testing..." : "Test"}
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <div className="submit-status" role="status">
+        {submitMessage ?? "Connection profile actions are ready."}
+      </div>
+      {submitError !== null ? (
+        <div className="state-panel error-panel" role="alert">
+          <strong>Connection profile action failed</strong>
+          <span>{submitError}</span>
+        </div>
+      ) : null}
+      {modalOpen ? (
+        <ProfileModal
+          editingProfile={editingProfile}
+          form={form}
+          mode={modalMode}
+          onClose={closeModal}
+          onSubmit={saveProfile}
+          saving={saving}
+          submitError={submitError}
+          submitMessage={submitMessage}
+          updateField={updateField}
+          updateProtocol={updateProtocol}
+          validationErrors={validationErrors}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ProfileModal({
+  editingProfile,
+  form,
+  mode,
+  onClose,
+  onSubmit,
+  saving,
+  submitError,
+  submitMessage,
+  updateField,
+  updateProtocol,
+  validationErrors,
+}: {
+  editingProfile: ProtocolConnectionProfile | null;
+  form: FormState;
+  mode: ModalMode | null;
+  onClose: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  saving: boolean;
+  submitError: string | null;
+  submitMessage: string | null;
+  updateField: <Key extends keyof FormState>(key: Key, value: FormState[Key]) => void;
+  updateProtocol: (protocol: Protocol) => void;
+  validationErrors: ValidationError[];
+}) {
+  const title =
+    mode === "edit"
+      ? `Profile definition: ${editingProfile?.name ?? form.name}`
+      : "Profile definition";
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section
+        aria-labelledby="connection-modal-title"
+        aria-modal="true"
+        className="connection-modal"
+        role="dialog"
+      >
+        <div className="modal-header">
+          <div>
+            <span className="status-label">
+              {mode === "edit" ? "Configured connection" : "New connection"}
+            </span>
+            <h2 id="connection-modal-title">{title}</h2>
+          </div>
+          <button
+            aria-label="Close profile definition"
+            className="icon-action modal-close"
+            onClick={onClose}
+            type="button"
+          >
+            x
+          </button>
+        </div>
+        <form
+          aria-describedby="connection-form-help connection-form-status"
+          className="connection-form"
+          onSubmit={onSubmit}
+        >
           <p className="form-help" id="connection-form-help">
             Use reference IDs for credentials and certificates. The Workbench
-            does not ask for raw passwords, tokens, private keys, or certificate
+            does not expose raw passwords, tokens, private keys, or certificate
             bodies.
           </p>
-        </div>
-        <fieldset className="protocol-selector">
-          <legend>Protocol</legend>
-          {(["opcua", "mqtt", "bacnet"] as const).map((protocol) => (
-            <label key={protocol}>
+          <fieldset className="protocol-selector">
+            <legend>Protocol</legend>
+            {(["opcua", "mqtt", "bacnet"] as const).map((protocol) => (
+              <label key={protocol}>
+                <input
+                  checked={form.protocol === protocol}
+                  name="protocol"
+                  onChange={() => updateProtocol(protocol)}
+                  type="radio"
+                  value={protocol}
+                />
+                <span>{formatProtocol(protocol)}</span>
+              </label>
+            ))}
+          </fieldset>
+          <div className="form-grid">
+            <label>
+              Profile ID
               <input
-                checked={form.protocol === protocol}
-                name="protocol"
-                onChange={() => updateProtocol(protocol)}
-                type="radio"
-                value={protocol}
+                name="id"
+                onChange={(event) => updateField("id", event.target.value)}
+                readOnly={mode === "edit"}
+                value={form.id}
               />
-              <span>{formatProtocol(protocol)}</span>
             </label>
-          ))}
-        </fieldset>
-        <div className="form-grid">
-          <label>
-            Profile ID
-            <input
-              name="id"
-              onChange={(event) => updateField("id", event.target.value)}
-              value={form.id}
-            />
-          </label>
-          <label>
-            Display name
-            <input
-              name="name"
-              onChange={(event) => updateField("name", event.target.value)}
-              value={form.name}
-            />
-          </label>
-          <label>
-            Endpoint
-            <input
-              name="endpoint"
-              onChange={(event) => updateField("endpoint", event.target.value)}
-              value={form.endpoint}
-            />
-          </label>
-          <label>
-            Mapping reference
-            <input
-              name="mapping_reference"
-              onChange={(event) => updateField("mappingReference", event.target.value)}
-              value={form.mappingReference}
-            />
-          </label>
+            <label>
+              Display name
+              <input
+                name="name"
+                onChange={(event) => updateField("name", event.target.value)}
+                value={form.name}
+              />
+            </label>
+            <label>
+              Endpoint
+              <input
+                name="endpoint"
+                onChange={(event) => updateField("endpoint", event.target.value)}
+                value={form.endpoint}
+              />
+            </label>
+            <label>
+              Mapping reference
+              <input
+                name="mapping_reference"
+                onChange={(event) => updateField("mappingReference", event.target.value)}
+                value={form.mappingReference}
+              />
+            </label>
+            <label>
+              {form.protocol === "mqtt"
+                ? "Subscription interval seconds"
+                : "Poll interval seconds"}
+              <input
+                min="1"
+                name="acquisition_seconds"
+                onChange={(event) => updateField("acquisitionSeconds", event.target.value)}
+                type="number"
+                value={form.acquisitionSeconds}
+              />
+            </label>
+            <label className="checkbox-field">
+              <input
+                checked={form.enabled}
+                name="enabled"
+                onChange={(event) => updateField("enabled", event.target.checked)}
+                type="checkbox"
+              />
+              <span>Enabled for read-only diagnostics</span>
+            </label>
+          </div>
           <label>
-            {form.protocol === "mqtt" ? "Subscription interval seconds" : "Poll interval seconds"}
-            <input
-              min="1"
-              name="acquisition_seconds"
-              onChange={(event) => updateField("acquisitionSeconds", event.target.value)}
-              type="number"
-              value={form.acquisitionSeconds}
-            />
-          </label>
-          <label className="checkbox-field">
-            <input
-              checked={form.enabled}
-              name="enabled"
-              onChange={(event) => updateField("enabled", event.target.checked)}
-              type="checkbox"
+            Description
+            <textarea
+              name="description"
+              onChange={(event) => updateField("description", event.target.value)}
+              rows={2}
+              value={form.description}
             />
-            <span>Enabled for read-only diagnostics</span>
           </label>
-        </div>
-        <label>
-          Description
-          <textarea
-            name="description"
-            onChange={(event) => updateField("description", event.target.value)}
-            rows={2}
-            value={form.description}
-          />
-        </label>
-        <ProtocolFields form={form} updateField={updateField} />
-        <div className="decision-note">
-          Creating or testing a profile does not start ingestion and does not
-          write to PLC, DCS, SCADA, MQTT, BACnet, QMS, MES, or equipment systems.
-        </div>
-        <div className="review-actions">
-          <button disabled={saving} type="submit">
-            {saving ? "Creating..." : "Create profile"}
-          </button>
-        </div>
-        <div className="submit-status" id="connection-form-status" role="status">
-          {submitMessage ?? "Ready to create a disabled or enabled read-only profile."}
-        </div>
-        {validationErrors.length > 0 ? (
-          <div className="state-panel missing-data-panel" role="status">
-            <strong>Validation errors</strong>
-            {validationErrors.map((error) => (
-              <span key={`${error.field}-${error.message}`}>
-                {error.field}: {error.message}
-              </span>
-            ))}
-          </div>
-        ) : null}
-        {submitError !== null ? (
-          <div className="state-panel error-panel" role="alert">
-            <strong>Connection profile action failed</strong>
-            <span>{submitError}</span>
+          <ProtocolFields form={form} updateField={updateField} />
+          <div className="decision-note">
+            Creating, updating, or testing a profile does not start ingestion
+            and does not write to PLC, DCS, SCADA, MQTT, BACnet, QMS, MES, or
+            equipment systems.
           </div>
-        ) : null}
-      </form>
-      <section className="data-card connection-list" aria-label="Connection profiles">
-        <div>
-          <span className="status-label">Configured profiles</span>
-          <h2>Connection profiles</h2>
-        </div>
-        {profiles.length === 0 ? (
-          <div className="state-panel" role="status">
-            <strong>No profiles configured</strong>
-            <span>Create a disabled profile to rehearse the read-only test flow.</span>
+          <div className="review-actions">
+            <button disabled={saving} type="submit">
+              {saving
+                ? mode === "edit"
+                  ? "Updating..."
+                  : "Creating..."
+                : mode === "edit"
+                  ? "Update profile"
+                  : "Create profile"}
+            </button>
+            <button className="secondary-action" onClick={onClose} type="button">
+              Cancel
+            </button>
           </div>
-        ) : (
-          <div className="connection-profile-list">
-            {profiles.map((profile) => (
-              <ConnectionProfileCard
-                key={profile.id}
-                profile={profile}
-                testResult={testResults[profile.id]}
-                testing={testingId === profile.id}
-                onTest={() => testProfile(profile.id)}
-              />
-            ))}
+          <div className="submit-status" id="connection-form-status" role="status">
+            {submitMessage ??
+              (mode === "edit"
+                ? "Profile values are prefilled from the selected connection."
+                : "Ready to create a disabled or enabled read-only profile.")}
           </div>
-        )}
+          {validationErrors.length > 0 ? (
+            <div className="state-panel missing-data-panel" role="status">
+              <strong>Validation errors</strong>
+              {validationErrors.map((error) => (
+                <span key={`${error.field}-${error.message}`}>
+                  {error.field}: {error.message}
+                </span>
+              ))}
+            </div>
+          ) : null}
+          {submitError !== null ? (
+            <div className="state-panel error-panel" role="alert">
+              <strong>Connection profile action failed</strong>
+              <span>{submitError}</span>
+            </div>
+          ) : null}
+        </form>
       </section>
     </div>
   );
@@ -451,74 +648,9 @@ function ProtocolFields({
   );
 }
 
-function ConnectionProfileCard({
-  onTest,
-  profile,
-  testResult,
-  testing,
-}: {
-  onTest: () => void;
-  profile: ProtocolConnectionProfile;
-  testResult?: ConnectionTestResult;
-  testing: boolean;
-}) {
-  return (
-    <article className="connection-profile-card">
-      <div className="connection-profile-heading">
-        <div>
-          <span className="status-label">{formatProtocol(profile.protocol)}</span>
-          <h3>{profile.name}</h3>
-        </div>
-        <StatusBadge
-          tone={profile.enabled ? healthTone(profile.health_state) : "draft"}
-          value={profile.enabled ? profile.health_state : "disabled"}
-        />
-      </div>
-      <dl className="connection-profile-meta">
-        <div>
-          <dt>Endpoint</dt>
-          <dd>{profile.endpoint}</dd>
-        </div>
-        <div>
-          <dt>Mapping</dt>
-          <dd>{profile.mapping_reference}</dd>
-        </div>
-        <div>
-          <dt>State</dt>
-          <dd>{profile.enabled ? "Enabled for read-only diagnostics" : "Disabled"}</dd>
-        </div>
-        <div>
-          <dt>Secret handling</dt>
-          <dd>{hasConfiguredReference(profile) ? "Reference configured" : "No secret reference"}</dd>
-        </div>
-      </dl>
-      <button
-        className="secondary-action"
-        disabled={testing}
-        onClick={onTest}
-        type="button"
-      >
-        {testing ? "Testing..." : "Test connection"}
-      </button>
-      {testResult ? (
-        <div className="connection-test-result" role="status">
-          <strong>Last test result: {testResult.status}</strong>
-          <span>{testResult.message}</span>
-          <span>Checked: {formatTimestamp(testResult.checked_at)}</span>
-          <span>Duration: {testResult.duration_ms} ms</span>
-        </div>
-      ) : (
-        <div className="connection-test-result connection-test-result-muted">
-          <strong>Last test result: Not run</strong>
-          <span>Use Test connection for a read-only diagnostic check.</span>
-        </div>
-      )}
-    </article>
-  );
-}
-
 function buildProfile(
   form: FormState,
+  existingProfile: ProtocolConnectionProfile | null,
 ): { ok: true; profile: ProtocolConnectionProfile } | { errors: ValidationError[]; ok: false } {
   const errors: ValidationError[] = [];
   const profileId = form.id.trim();
@@ -537,6 +669,13 @@ function buildProfile(
       message: "Enter a positive number of seconds.",
     });
   }
+  if (existingProfile && hasConfiguredReference(existingProfile) && form.secretReference.trim() === "") {
+    errors.push({
+      field: "Secret reference ID",
+      message:
+        "Existing secret references are redacted in the browser. Enter a replacement reference before updating this profile.",
+    });
+  }
 
   const now = new Date().toISOString();
   const profile: ProtocolConnectionProfile = {
@@ -544,11 +683,11 @@ function buildProfile(
       form.protocol === "mqtt"
         ? { mode: "subscribe", subscription_interval_seconds: acquisitionSeconds }
         : { mode: "poll", poll_interval_seconds: acquisitionSeconds },
-    created_at: now,
+    created_at: existingProfile?.created_at ?? now,
     description: optionalString(form.description),
     enabled: form.enabled,
     endpoint,
-    health_state: form.enabled ? "unknown" : "disabled",
+    health_state: form.enabled ? (existingProfile?.health_state ?? "unknown") : "disabled",
     id: profileId,
     mapping_reference: mappingReference,
     name,
@@ -600,6 +739,38 @@ function buildProfile(
   return { ok: true, profile: stripUndefined(profile) };
 }
 
+function profileToFormState(profile: ProtocolConnectionProfile): FormState {
+  return {
+    acquisitionSeconds: String(
+      profile.acquisition.poll_interval_seconds ??
+        profile.acquisition.subscription_interval_seconds ??
+        30,
+    ),
+    bacnetDeviceInstance: String(profile.bacnet?.device_instance ?? "1001"),
+    bacnetNetworkNumber:
+      profile.bacnet?.network_number === undefined
+        ? ""
+        : String(profile.bacnet.network_number),
+    bacnetObjectReferences: profile.bacnet?.object_references.join("\n") ?? "analogInput:1",
+    description: profile.description ?? "",
+    enabled: profile.enabled,
+    endpoint: profile.endpoint,
+    id: profile.id,
+    mappingReference: profile.mapping_reference,
+    mqttClientId: profile.mqtt?.client_id ?? "fip-workbench-demo",
+    mqttQos: String(profile.mqtt?.qos ?? 0) as FormState["mqttQos"],
+    mqttTopicFilters: profile.mqtt?.topic_filters.join("\n") ?? "spBv1.0/OFI/DDATA/Line1/#",
+    mqttUseTls: profile.mqtt?.use_tls ?? true,
+    name: profile.name,
+    opcuaNamespaceUris: profile.opcua?.namespace_uris?.join("\n") ?? "",
+    opcuaNodeIds: profile.opcua?.node_ids.join("\n") ?? "ns=2;s=Line1.FillWeight",
+    opcuaSecurityMode: profile.opcua?.security_mode ?? "none",
+    opcuaSecurityPolicy: profile.opcua?.security_policy ?? "",
+    protocol: profile.protocol,
+    secretReference: "",
+  };
+}
+
 function requireValue(errors: ValidationError[], field: string, value: string) {
   if (value.length === 0) {
     errors.push({ field, message: "Required." });
@@ -673,10 +844,6 @@ function formatProtocol(protocol: Protocol | string): string {
   return protocol;
 }
 
-function formatTimestamp(value: string): string {
-  return value.replace("T", " ").replace("Z", " UTC");
-}
-
 function healthTone(state: ProtocolConnectionProfile["health_state"]) {
   if (state === "healthy") {
     return "success";
diff --git a/apps/web/app/connections/page.tsx b/apps/web/app/connections/page.tsx
index c3b0881..d4228d7 100644
--- a/apps/web/app/connections/page.tsx
+++ b/apps/web/app/connections/page.tsx
@@ -15,13 +15,6 @@ export default async function ConnectionsPage() {
   return (
     <section className="content-panel connections-page">
       <DemoDataBadge label="Read-only connection management" />
-      <div>
-        <h1>Connections</h1>
-        <p className="lead">
-          Define OPC-UA, MQTT, and BACnet connection profiles, then run
-          read-only tests before any ingestion work is considered.
-        </p>
-      </div>
       <div className="decision-note">
         Test connection only checks profile reachability and validation through
         the local API. It does not start ingestion, write tags, publish commands,
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index f190276..faa4977 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1081,12 +1081,79 @@ h3 {
 
 .connections-workspace {
   display: grid;
-  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
   gap: 18px;
+}
+
+.connections-page-header,
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.connections-page-header h1 {
+  margin-bottom: 10px;
+}
+
+.icon-action {
+  display: inline-flex;
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--accent);
+  border-radius: 7px;
+  background: var(--accent);
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.45rem;
+  font-weight: 760;
+  line-height: 1;
+}
+
+.icon-action:hover,
+.icon-action:focus-visible {
+  background: var(--accent-strong);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.modal-backdrop {
+  position: fixed;
+  z-index: 30;
+  inset: 0;
+  display: grid;
   align-items: start;
+  justify-items: center;
+  overflow: auto;
+  background: rgb(16 24 32 / 56%);
+  padding: 28px 16px;
+}
+
+.connection-modal {
+  display: grid;
+  width: min(920px, 100%);
+  gap: 18px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 24px 70px rgb(21 32 42 / 22%);
+  padding: 22px;
+}
+
+.modal-close {
+  border-color: var(--border);
+  background: var(--surface-muted);
+  color: var(--text);
+  font-size: 1.2rem;
 }
 
 .connection-form {
+  display: grid;
+  gap: 14px;
   align-content: start;
 }
 
@@ -1173,73 +1240,17 @@ h3 {
   align-content: start;
 }
 
-.connection-profile-list {
-  display: grid;
-  gap: 14px;
+.connection-table {
+  min-width: 760px;
 }
 
-.connection-profile-card {
-  display: grid;
-  gap: 14px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 16px;
-}
-
-.connection-profile-heading {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.connection-profile-heading h3 {
-  margin-bottom: 0;
-}
-
-.connection-profile-meta {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  margin: 0;
-}
-
-.connection-profile-meta div {
-  display: grid;
-  gap: 4px;
-  border-top: 1px solid var(--border);
-  padding-top: 10px;
-}
-
-.connection-profile-meta dt {
-  color: var(--muted);
-  font-size: 0.74rem;
+.connection-name-button {
   font-weight: 760;
-  text-transform: uppercase;
 }
 
-.connection-profile-meta dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-weight: 700;
-  line-height: 1.45;
-}
-
-.connection-test-result {
-  display: grid;
-  gap: 4px;
-  border-left: 4px solid var(--accent);
-  background: #e7f3f1;
-  color: #21423e;
-  line-height: 1.45;
-  padding: 12px;
-}
-
-.connection-test-result-muted {
-  border-left-color: var(--border-strong);
-  background: var(--surface-muted);
-  color: var(--muted);
+.compact-action {
+  min-height: 32px;
+  padding: 8px 10px;
 }
 
 .review-actions {
@@ -1362,10 +1373,6 @@ code {
     grid-template-columns: 1fr;
   }
 
-  .connections-workspace {
-    grid-template-columns: 1fr;
-  }
-
   .overview-grid {
     grid-template-columns: 1fr;
   }
@@ -1420,9 +1427,13 @@ code {
     grid-template-columns: 1fr;
   }
 
+  .connections-page-header,
+  .modal-header {
+    display: grid;
+  }
+
   .form-grid,
-  .protocol-selector,
-  .connection-profile-meta {
+  .protocol-selector {
     grid-template-columns: 1fr;
   }
 
diff --git a/apps/web/e2e/operations-workbench-demo.spec.ts b/apps/web/e2e/operations-workbench-demo.spec.ts
index d77e18f..9dbfd6a 100644
--- a/apps/web/e2e/operations-workbench-demo.spec.ts
+++ b/apps/web/e2e/operations-workbench-demo.spec.ts
@@ -89,31 +89,45 @@ test("walks the simulator-backed Operations Workbench demo path", async ({ page
 
 async function createDisabledConnectionProfile(page: Page) {
   const profileId = `playwright-disabled-opcua-${Date.now()}`;
+  const displayName = `Playwright disabled OPC-UA profile ${profileId}`;
 
   await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
-  await expect(page.getByText("OPC-UA controls")).toBeVisible();
+  await expect(page.getByRole("table")).toContainText("Connection display name");
+  await expect(page.getByRole("table")).toContainText("Connection status");
+  await page.getByRole("button", { name: "Add connection profile" }).click();
+  const modal = page.getByRole("dialog", { name: "Profile definition" });
+  await expect(modal).toBeVisible();
+  await expect(modal.getByText("OPC-UA controls")).toBeVisible();
   await expect(page.getByText("MQTT", { exact: true })).toBeVisible();
   await expect(page.getByText("BACnet", { exact: true })).toBeVisible();
   await expect(page.getByText("It does not start ingestion")).toBeVisible();
   await expect(page.getByText("industrial writeback")).toBeVisible();
-  await expect(page.getByLabel("Enabled for read-only diagnostics")).not.toBeChecked();
-
-  await page.getByLabel("Profile ID").fill(profileId);
-  await page.getByLabel("Display name").fill("Playwright disabled OPC-UA profile");
-  await page.getByLabel("Endpoint").fill("opc.tcp://127.0.0.1:4840/ofi-playwright");
-  await page.getByLabel("Mapping reference").fill("mapping://playwright/opcua");
-  await page.getByLabel("Node IDs").fill("ns=2;s=Line1.FillWeight");
-  await page.getByRole("button", { name: "Create profile" }).click();
-
-  await expect(page.getByRole("status")).toContainText(`Created OPC-UA profile ${profileId}.`);
-  const profileCard = page.locator(".connection-profile-card").filter({
-    hasText: "Playwright disabled OPC-UA profile",
+  await expect(modal.getByLabel("Enabled for read-only diagnostics")).not.toBeChecked();
+
+  await modal.getByLabel("Profile ID").fill(profileId);
+  await modal.getByLabel("Display name").fill(displayName);
+  await modal.getByLabel("Endpoint").fill("opc.tcp://127.0.0.1:4840/ofi-playwright");
+  await modal.getByLabel("Mapping reference").fill("mapping://playwright/opcua");
+  await modal.getByLabel("Node IDs").fill("ns=2;s=Line1.FillWeight");
+  await modal.getByRole("button", { name: "Create profile" }).click();
+
+  await expect(modal.getByRole("status")).toContainText(`Created OPC-UA profile ${profileId}.`);
+  await modal.getByRole("button", { name: "Close profile definition" }).click();
+  const profileRow = page.locator("tr").filter({
+    hasText: displayName,
   });
-  await expect(profileCard).toContainText("Disabled");
-  await expect(profileCard).toContainText("No secret reference");
-  await profileCard.getByRole("button", { name: "Test connection" }).click();
-  await expect(profileCard).toContainText("Last test result: disabled");
-  await expect(profileCard).toContainText("no protocol test was attempted");
+  await expect(profileRow).toContainText("disabled");
+  await profileRow
+    .getByRole("button", { name: displayName })
+    .click();
+  const prefilledModal = page.getByRole("dialog", {
+    name: `Profile definition: ${displayName}`,
+  });
+  await expect(prefilledModal.getByLabel("Profile ID")).toHaveValue(profileId);
+  await expect(prefilledModal.getByLabel("Display name")).toHaveValue(displayName);
+  await prefilledModal.getByRole("button", { name: "Close profile definition" }).click();
+  await profileRow.getByRole("button", { name: "Test" }).click();
+  await expect(profileRow).toContainText("disabled");
 }
 
 async function recordDecision(
diff --git a/apps/web/lib/api-client.ts b/apps/web/lib/api-client.ts
index a406a3a..5555787 100644
--- a/apps/web/lib/api-client.ts
+++ b/apps/web/lib/api-client.ts
@@ -235,6 +235,14 @@ export const workbenchApi = {
       body: JSON.stringify(profile),
       method: "POST",
     }),
+  updateConnectionProfile: (profile: ProtocolConnectionProfile) =>
+    requestJson<ProtocolConnectionProfile>(
+      `/connection-profiles/${encodeURIComponent(profile.id)}`,
+      {
+        body: JSON.stringify(profile),
+        method: "PUT",
+      },
+    ),
   testConnectionProfile: (connectionId: string) =>
     requestJson<ConnectionTestResult>(
       `/connection-profiles/${encodeURIComponent(connectionId)}/test`,
diff --git a/apps/web/tests/api-client.test.mjs b/apps/web/tests/api-client.test.mjs
index a7bcbc9..d314d11 100644
--- a/apps/web/tests/api-client.test.mjs
+++ b/apps/web/tests/api-client.test.mjs
@@ -11,6 +11,7 @@ const client = readFileSync(join(root, "lib/api-client.ts"), "utf8");
 const requiredEndpoints = [
   "/health",
   "/connection-profiles",
+  "/connection-profiles/${encodeURIComponent(profile.id)}",
   "/connection-profiles/${encodeURIComponent(connectionId)}/test",
   "/sites",
   "/areas",
@@ -35,6 +36,7 @@ test("typed workbench API client covers demo endpoints", () => {
   assert.match(client, /getHealth/);
   assert.match(client, /listConnectionProfiles/);
   assert.match(client, /createConnectionProfile/);
+  assert.match(client, /updateConnectionProfile/);
   assert.match(client, /testConnectionProfile/);
   assert.match(client, /listSites/);
   assert.match(client, /listAreas/);
diff --git a/apps/web/tests/app-shell.test.mjs b/apps/web/tests/app-shell.test.mjs
index 7e0d43e..02847e3 100644
--- a/apps/web/tests/app-shell.test.mjs
+++ b/apps/web/tests/app-shell.test.mjs
@@ -58,29 +58,38 @@ test("connections page supports read-only protocol profile setup", () => {
   );
   const styles = readFileSync(join(root, "app/globals.css"), "utf8");
 
-  assert.match(page, /Connections/);
-  assert.match(page, /read-only tests/);
   assert.match(page, /does not start ingestion/);
   assert.match(page, /industrial writeback/);
   assert.match(page, /listConnectionProfiles/);
   assert.match(page, /ConnectionsWorkspace/);
+  assert.match(workspace, /Connections/);
+  assert.match(workspace, /read-only tests/);
+  assert.match(workspace, /Add connection profile/);
+  assert.match(workspace, /Profile definition/);
+  assert.match(workspace, /role="dialog"/);
+  assert.match(workspace, /Configured connections/);
+  assert.match(workspace, /Connection display name/);
+  assert.match(workspace, /Connection status/);
+  assert.match(workspace, /connection-name-button/);
+  assert.match(workspace, /profileToFormState/);
   assert.match(workspace, /OPC-UA controls/);
   assert.match(workspace, /MQTT controls/);
   assert.match(workspace, /BACnet controls/);
   assert.match(workspace, /Secret reference ID/);
   assert.match(workspace, /raw passwords, tokens, private keys, or certificate/);
   assert.match(workspace, /createConnectionProfile/);
+  assert.match(workspace, /updateConnectionProfile/);
   assert.match(workspace, /testConnectionProfile/);
   assert.match(workspace, /Validation errors/);
   assert.match(workspace, /Last test result/);
   assert.match(workspace, /Enabled for read-only diagnostics/);
-  assert.match(workspace, /Disabled/);
   assert.match(workspace, /does not start ingestion/);
   assert.match(workspace, /does not\s+write to PLC/);
   assert.doesNotMatch(workspace, /Start ingestion/);
   assert.doesNotMatch(workspace, /writeback controls/);
   assert.match(styles, /connections-workspace/);
-  assert.match(styles, /connection-profile-card/);
+  assert.match(styles, /connection-table/);
+  assert.match(styles, /modal-backdrop/);
 });
 
 test("operator shell uses the Demo Factory console palette", () => {
diff --git a/docs/LEARNING_LOG.md b/docs/LEARNING_LOG.md
index 6bea9be..a3c9157 100644
--- a/docs/LEARNING_LOG.md
+++ b/docs/LEARNING_LOG.md
@@ -27,10 +27,13 @@ This file should be updated by Codex after each meaningful change.
 ### What changed
 
 Added the Operations Workbench Connections page for defining OPC-UA, MQTT, and
-BACnet connection profiles. The page includes protocol-specific form controls,
-reference-only credential fields, disabled/enabled state, current health state,
-client-side validation errors, and a read-only test connection action that shows
-the last test result.
+BACnet connection profiles. The page now centers on a configured-connections
+table with connection display name and status. A top-right plus button opens
+the profile definition modal for new profiles, and selecting a connection
+display name opens the same modal with the selected profile values prefilled.
+The modal includes protocol-specific controls, reference-only credential fields,
+disabled/enabled state, current health state, client-side validation errors,
+and a read-only test connection action remains available from the table.
 
 ### Why it matters
 
@@ -42,11 +45,13 @@ commands, or claiming production readiness.
 ### How it works
 
 `/connections` loads redacted profiles from the existing connection profile API
-and passes them to a client-side workspace. The form builds the shared
-`ProtocolConnectionProfile` request shape for the selected protocol and submits
-it to `POST /connection-profiles`. Each profile card calls
-`POST /connection-profiles/{profile_id}/test`, then displays the structured
-read-only diagnostic result returned by the API.
+and passes them to a client-side workspace. The table is the default page
+surface. Opening the modal from the plus button starts a new
+`ProtocolConnectionProfile`; opening it from a display-name button maps the
+selected profile back into form state. Create and update actions call
+`POST /connection-profiles` or `PUT /connection-profiles/{profile_id}`. The
+table test action calls `POST /connection-profiles/{profile_id}/test`, then
+displays the structured read-only diagnostic status returned by the API.
 
 ### How to run it
 

From 0d0000b36612bb600a7bb2e6557fd2c9c71b1bee Mon Sep 17 00:00:00 2001
From: Aldon Smith <smithaldon@gmail.com>
Date: Sun, 24 May 2026 10:29:49 -0400
Subject: [PATCH 3/4] refine connections table layout

---
 apps/web/README.md                            |  2 +-
 .../app/connections/connections-workspace.tsx | 30 +++++--------
 apps/web/app/globals.css                      | 42 +++++++++++++++----
 .../web/e2e/operations-workbench-demo.spec.ts |  3 +-
 apps/web/tests/app-shell.test.mjs             |  8 ++--
 docs/LEARNING_LOG.md                          |  5 ++-
 6 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/apps/web/README.md b/apps/web/README.md
index 5e2d322..e8ef3e9 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -90,7 +90,7 @@ writeback controls.
 - `/` - Factory overview dashboard with site, line, asset, work order, product,
   active detection count, pending recommendation count, and primary detection CTA
 - `/connections` - Read-only OPC-UA, MQTT, and BACnet connections table with a
-  top-right add button, modal profile definition form, display-name click to
+  top-right add button, modal profile definition form, display-name link to
   reopen the modal with prefilled values, reference-only credential fields,
   disabled profile support, local validation feedback, current health state,
   and test-connection diagnostics that do not start ingestion or industrial
diff --git a/apps/web/app/connections/connections-workspace.tsx b/apps/web/app/connections/connections-workspace.tsx
index 028471b..1509a03 100644
--- a/apps/web/app/connections/connections-workspace.tsx
+++ b/apps/web/app/connections/connections-workspace.tsx
@@ -178,14 +178,7 @@ export function ConnectionsWorkspace({
 
   return (
     <div className="connections-workspace">
-      <div className="connections-page-header">
-        <div>
-          <h1>Connections</h1>
-          <p className="lead">
-            Define OPC-UA, MQTT, and BACnet connection profiles, then run
-            read-only tests before any ingestion work is considered.
-          </p>
-        </div>
+      <div className="connections-actions">
         <button
           aria-label="Add connection profile"
           className="icon-action add-connection-button"
@@ -195,13 +188,7 @@ export function ConnectionsWorkspace({
           +
         </button>
       </div>
-      <section className="data-card connection-list" aria-label="Configured connections">
-        <div className="section-header">
-          <div>
-            <span className="status-label">Configured connections</span>
-            <h2>Connection profiles</h2>
-          </div>
-        </div>
+      <section className="connection-table-shell" aria-label="Connections">
         <div className="table-wrap">
           <table className="connection-table">
             <thead>
@@ -227,13 +214,16 @@ export function ConnectionsWorkspace({
                   return (
                     <tr key={profile.id}>
                       <td>
-                        <button
-                          className="table-link connection-name-button"
-                          onClick={() => openEditModal(profile)}
-                          type="button"
+                        <a
+                          className="table-link connection-name-link"
+                          href={`#connection-profile-${encodeURIComponent(profile.id)}`}
+                          onClick={(event) => {
+                            event.preventDefault();
+                            openEditModal(profile);
+                          }}
                         >
                           {profile.name}
-                        </button>
+                        </a>
                       </td>
                       <td>
                         <StatusBadge
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index faa4977..f9903fe 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1084,7 +1084,7 @@ h3 {
   gap: 18px;
 }
 
-.connections-page-header,
+.connections-actions,
 .modal-header {
   display: flex;
   align-items: flex-start;
@@ -1092,8 +1092,8 @@ h3 {
   gap: 16px;
 }
 
-.connections-page-header h1 {
-  margin-bottom: 10px;
+.connections-actions {
+  justify-content: flex-end;
 }
 
 .icon-action {
@@ -1236,15 +1236,44 @@ h3 {
   min-height: 44px;
 }
 
-.connection-list {
-  align-content: start;
+.connection-table-shell {
+  min-width: 0;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
 }
 
 .connection-table {
+  width: 100%;
   min-width: 760px;
+  border-collapse: collapse;
+}
+
+.connection-table th,
+.connection-table td {
+  border-bottom: 1px solid var(--border);
+  padding: 13px 14px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.connection-table th {
+  background: var(--surface-muted);
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.connection-table tbody tr:last-child td {
+  border-bottom: 0;
 }
 
-.connection-name-button {
+.connection-name-link {
   font-weight: 760;
 }
 
@@ -1427,7 +1456,6 @@ code {
     grid-template-columns: 1fr;
   }
 
-  .connections-page-header,
   .modal-header {
     display: grid;
   }
diff --git a/apps/web/e2e/operations-workbench-demo.spec.ts b/apps/web/e2e/operations-workbench-demo.spec.ts
index 9dbfd6a..8146b6b 100644
--- a/apps/web/e2e/operations-workbench-demo.spec.ts
+++ b/apps/web/e2e/operations-workbench-demo.spec.ts
@@ -91,7 +91,6 @@ async function createDisabledConnectionProfile(page: Page) {
   const profileId = `playwright-disabled-opcua-${Date.now()}`;
   const displayName = `Playwright disabled OPC-UA profile ${profileId}`;
 
-  await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
   await expect(page.getByRole("table")).toContainText("Connection display name");
   await expect(page.getByRole("table")).toContainText("Connection status");
   await page.getByRole("button", { name: "Add connection profile" }).click();
@@ -118,7 +117,7 @@ async function createDisabledConnectionProfile(page: Page) {
   });
   await expect(profileRow).toContainText("disabled");
   await profileRow
-    .getByRole("button", { name: displayName })
+    .getByRole("link", { name: displayName })
     .click();
   const prefilledModal = page.getByRole("dialog", {
     name: `Profile definition: ${displayName}`,
diff --git a/apps/web/tests/app-shell.test.mjs b/apps/web/tests/app-shell.test.mjs
index 02847e3..5455c60 100644
--- a/apps/web/tests/app-shell.test.mjs
+++ b/apps/web/tests/app-shell.test.mjs
@@ -62,15 +62,15 @@ test("connections page supports read-only protocol profile setup", () => {
   assert.match(page, /industrial writeback/);
   assert.match(page, /listConnectionProfiles/);
   assert.match(page, /ConnectionsWorkspace/);
-  assert.match(workspace, /Connections/);
-  assert.match(workspace, /read-only tests/);
   assert.match(workspace, /Add connection profile/);
   assert.match(workspace, /Profile definition/);
   assert.match(workspace, /role="dialog"/);
-  assert.match(workspace, /Configured connections/);
+  assert.doesNotMatch(workspace, /Configured connections/);
+  assert.doesNotMatch(workspace, /Connection profiles/);
   assert.match(workspace, /Connection display name/);
   assert.match(workspace, /Connection status/);
-  assert.match(workspace, /connection-name-button/);
+  assert.match(workspace, /connection-name-link/);
+  assert.match(workspace, /href={`#connection-profile-/);
   assert.match(workspace, /profileToFormState/);
   assert.match(workspace, /OPC-UA controls/);
   assert.match(workspace, /MQTT controls/);
diff --git a/docs/LEARNING_LOG.md b/docs/LEARNING_LOG.md
index a3c9157..4b460ab 100644
--- a/docs/LEARNING_LOG.md
+++ b/docs/LEARNING_LOG.md
@@ -27,10 +27,11 @@ This file should be updated by Codex after each meaningful change.
 ### What changed
 
 Added the Operations Workbench Connections page for defining OPC-UA, MQTT, and
-BACnet connection profiles. The page now centers on a configured-connections
+BACnet connection profiles. The page now centers on an unheaded connections
 table with connection display name and status. A top-right plus button opens
 the profile definition modal for new profiles, and selecting a connection
-display name opens the same modal with the selected profile values prefilled.
+display name link opens the same modal with the selected profile values
+prefilled.
 The modal includes protocol-specific controls, reference-only credential fields,
 disabled/enabled state, current health state, client-side validation errors,
 and a read-only test connection action remains available from the table.

From 20e0081942530b3e284043aff9669557a1ffa382 Mon Sep 17 00:00:00 2001
From: Aldon Smith <smithaldon@gmail.com>
Date: Sun, 24 May 2026 10:36:00 -0400
Subject: [PATCH 4/4] simplify connections page chrome

---
 apps/web/README.md                                 |  6 +++---
 apps/web/app/connections/connections-workspace.tsx |  4 ++--
 apps/web/app/connections/page.tsx                  | 14 +-------------
 apps/web/app/globals.css                           |  4 ++++
 apps/web/e2e/operations-workbench-demo.spec.ts     |  5 +++--
 apps/web/tests/app-shell.test.mjs                  |  6 ++++--
 docs/LEARNING_LOG.md                               | 10 +++++-----
 7 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/apps/web/README.md b/apps/web/README.md
index e8ef3e9..05618e3 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -89,9 +89,9 @@ writeback controls.
 
 - `/` - Factory overview dashboard with site, line, asset, work order, product,
   active detection count, pending recommendation count, and primary detection CTA
-- `/connections` - Read-only OPC-UA, MQTT, and BACnet connections table with a
-  top-right add button, modal profile definition form, display-name link to
-  reopen the modal with prefilled values, reference-only credential fields,
+- `/connections` - OPC-UA, MQTT, and BACnet connections page with a title,
+  top-right add button, table, modal profile definition form, display-name link
+  to reopen the modal with prefilled values, reference-only credential fields,
   disabled profile support, local validation feedback, current health state,
   and test-connection diagnostics that do not start ingestion or industrial
   writeback
diff --git a/apps/web/app/connections/connections-workspace.tsx b/apps/web/app/connections/connections-workspace.tsx
index 1509a03..3910f79 100644
--- a/apps/web/app/connections/connections-workspace.tsx
+++ b/apps/web/app/connections/connections-workspace.tsx
@@ -178,6 +178,7 @@ export function ConnectionsWorkspace({
 
   return (
     <div className="connections-workspace">
+      <h1 className="connections-title">Connections</h1>
       <div className="connections-actions">
         <button
           aria-label="Add connection profile"
@@ -204,8 +205,7 @@ export function ConnectionsWorkspace({
               {profiles.length === 0 ? (
                 <tr>
                   <td colSpan={5}>
-                    No connections configured. Select the plus button to define
-                    a disabled read-only profile.
+                    No connections configured.
                   </td>
                 </tr>
               ) : (
diff --git a/apps/web/app/connections/page.tsx b/apps/web/app/connections/page.tsx
index d4228d7..732ab47 100644
--- a/apps/web/app/connections/page.tsx
+++ b/apps/web/app/connections/page.tsx
@@ -1,8 +1,7 @@
-import { ApiErrorPanel, DemoDataBadge } from "../components/demo-state";
+import { ApiErrorPanel } from "../components/demo-state";
 import {
   type ProtocolConnectionProfile,
   formatApiError,
-  getApiBaseUrl,
   workbenchApi,
 } from "../../lib/api-client";
 import { ConnectionsWorkspace } from "./connections-workspace";
@@ -14,19 +13,8 @@ export default async function ConnectionsPage() {
 
   return (
     <section className="content-panel connections-page">
-      <DemoDataBadge label="Read-only connection management" />
-      <div className="decision-note">
-        Test connection only checks profile reachability and validation through
-        the local API. It does not start ingestion, write tags, publish commands,
-        or perform industrial writeback.
-      </div>
       {!result.ok ? <ApiErrorPanel message={result.message} /> : null}
       {result.ok ? <ConnectionsWorkspace initialProfiles={result.profiles} /> : null}
-      <div className="api-panel">
-        <p>
-          Configured API target: <code>{getApiBaseUrl()}</code>
-        </p>
-      </div>
     </section>
   );
 }
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index f9903fe..241af5e 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1084,6 +1084,10 @@ h3 {
   gap: 18px;
 }
 
+.connections-title {
+  margin-bottom: 0;
+}
+
 .connections-actions,
 .modal-header {
   display: flex;
diff --git a/apps/web/e2e/operations-workbench-demo.spec.ts b/apps/web/e2e/operations-workbench-demo.spec.ts
index 8146b6b..8856242 100644
--- a/apps/web/e2e/operations-workbench-demo.spec.ts
+++ b/apps/web/e2e/operations-workbench-demo.spec.ts
@@ -91,6 +91,7 @@ async function createDisabledConnectionProfile(page: Page) {
   const profileId = `playwright-disabled-opcua-${Date.now()}`;
   const displayName = `Playwright disabled OPC-UA profile ${profileId}`;
 
+  await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
   await expect(page.getByRole("table")).toContainText("Connection display name");
   await expect(page.getByRole("table")).toContainText("Connection status");
   await page.getByRole("button", { name: "Add connection profile" }).click();
@@ -99,8 +100,8 @@ async function createDisabledConnectionProfile(page: Page) {
   await expect(modal.getByText("OPC-UA controls")).toBeVisible();
   await expect(page.getByText("MQTT", { exact: true })).toBeVisible();
   await expect(page.getByText("BACnet", { exact: true })).toBeVisible();
-  await expect(page.getByText("It does not start ingestion")).toBeVisible();
-  await expect(page.getByText("industrial writeback")).toBeVisible();
+  await expect(modal.getByText("does not start ingestion")).toBeVisible();
+  await expect(modal.getByText("does not write to PLC")).toBeVisible();
   await expect(modal.getByLabel("Enabled for read-only diagnostics")).not.toBeChecked();
 
   await modal.getByLabel("Profile ID").fill(profileId);
diff --git a/apps/web/tests/app-shell.test.mjs b/apps/web/tests/app-shell.test.mjs
index 5455c60..d2f93c8 100644
--- a/apps/web/tests/app-shell.test.mjs
+++ b/apps/web/tests/app-shell.test.mjs
@@ -58,10 +58,12 @@ test("connections page supports read-only protocol profile setup", () => {
   );
   const styles = readFileSync(join(root, "app/globals.css"), "utf8");
 
-  assert.match(page, /does not start ingestion/);
-  assert.match(page, /industrial writeback/);
+  assert.doesNotMatch(page, /Read-only connection management/);
+  assert.doesNotMatch(page, /Configured API target/);
+  assert.doesNotMatch(page, /Test connection only checks/);
   assert.match(page, /listConnectionProfiles/);
   assert.match(page, /ConnectionsWorkspace/);
+  assert.match(workspace, /Connections/);
   assert.match(workspace, /Add connection profile/);
   assert.match(workspace, /Profile definition/);
   assert.match(workspace, /role="dialog"/);
diff --git a/docs/LEARNING_LOG.md b/docs/LEARNING_LOG.md
index 4b460ab..5faab8f 100644
--- a/docs/LEARNING_LOG.md
+++ b/docs/LEARNING_LOG.md
@@ -27,11 +27,11 @@ This file should be updated by Codex after each meaningful change.
 ### What changed
 
 Added the Operations Workbench Connections page for defining OPC-UA, MQTT, and
-BACnet connection profiles. The page now centers on an unheaded connections
-table with connection display name and status. A top-right plus button opens
-the profile definition modal for new profiles, and selecting a connection
-display name link opens the same modal with the selected profile values
-prefilled.
+BACnet connection profiles. The page now presents a simple Connections title, a
+plus button, and a connections table with connection display name and status.
+The plus button opens the profile definition modal for new profiles, and
+selecting a connection display name link opens the same modal with the selected
+profile values prefilled.
 The modal includes protocol-specific controls, reference-only credential fields,
 disabled/enabled state, current health state, client-side validation errors,
 and a read-only test connection action remains available from the table.