beta. OPC fixed + tested

web/src/api.js

@@ -56,6 +56,9 @@ export const api = {
   getIsps: (token) => apiRequest("/isps", { token }),
   getAliases: (token, isp) => apiRequest(`/isps/${isp}/aliases`, { token }),
   saveAliases: (token, isp, body) => apiRequest(`/isps/${isp}/aliases`, { method: "PUT", token, body }),
+  getUnits: (token) => apiRequest("/units", { token }),
+  createUnit: (token, body) => apiRequest("/units", { method: "POST", token, body }),
+  updateUnit: (token, symbol, body) => apiRequest(`/units/${encodeURIComponent(symbol)}`, { method: "PATCH", token, body }),
   createTrendTable: (token, body) => apiRequest("/trend-tables", { method: "POST", token, body }),
   normalizeAliasMetadata: (token, body) => apiRequest("/admin/normalize-alias-metadata", { method: "POST", token, body }),
   importSql: (token, body) => apiRequest("/admin/import-sql", { method: "POST", token, body }),

web/src/styles.css

@@ -919,3 +919,134 @@ span {
   font-weight: 700;
   white-space: nowrap;
 }
+
+.source-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0.65rem;
+  align-items: start;
+}
+
+.source-split .scan-result-list,
+.source-split .datapoint-table {
+  min-height: 320px;
+}
+
+.source-admin-panel {
+  position: relative;
+}
+
+.inline-create-table {
+  align-items: end;
+}
+
+.inline-table-button {
+  display: flex;
+  align-items: end;
+}
+
+.source-grid {
+  align-items: stretch;
+}
+
+.source-tile {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.55rem;
+  align-items: start;
+}
+
+.source-tile-copy {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+}
+
+.source-tile-copy small {
+  color: var(--muted);
+  font-size: 0.7rem;
+}
+
+.source-tile-actions {
+  display: grid;
+  gap: 0.3rem;
+  justify-items: end;
+}
+
+.source-toolbar-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.55rem 0.65rem;
+  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
+}
+
+.source-toolbar-card > div:first-child {
+  display: grid;
+  gap: 0.14rem;
+}
+
+.source-toolbar-card span {
+  color: var(--muted);
+  font-size: 0.74rem;
+}
+
+.source-tools-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.manual-point-card {
+  margin-bottom: 0.35rem;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.38);
+  backdrop-filter: blur(8px);
+}
+
+.modal-card {
+  width: min(760px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 0.85rem;
+  background: var(--surface);
+  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
+}
+
+.source-modal {
+  display: grid;
+  gap: 0.65rem;
+}
+
+@media (max-width: 980px) {
+  .source-split,
+  .source-tools-grid,
+  .source-tile,
+  .source-toolbar-card {
+    grid-template-columns: 1fr;
+  }
+
+  .source-toolbar-card {
+    align-items: start;
+  }
+
+  .source-tile-actions {
+    width: 100%;
+    justify-items: stretch;
+  }
+
+  .source-tile-actions .compact-button {
+    width: 100%;
+  }
+}