@adcops/autocore-react 3.3.8 → 3.3.10

package/src/components/AutoCoreDevPanel.tsx

@@ -1,414 +1,414 @@
-/*
- * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2025-09-05 08:06:09
- * -----
- * Last Modified: 2026-01-20 06:09:05
- * -----
- * 
- */
-
-/**
- * @module components/AutoCoreDevPanel
- * 
- * @summary
- * 
- * A development and debugging panel for monitoring and manually interacting with AutoCore tags.
- * This component provides real-time visibility into tag values and allows direct manipulation
- * for testing and debugging purposes.
- * 
- * @remarks
- * 
- * The AutoCoreDevPanel is designed to be used during development to:
- * - Monitor live tag values in real-time
- * - Test write operations manually 
- * - Debug tag behavior and connectivity
- * - Perform tap operations on boolean tags
- * - Validate tag configurations
- * 
- * The panel automatically connects to the global AutoCoreTagContext and displays all
- * tags passed to it. No additional setup or factory functions are required.
- * 
- * @example Basic Usage
- * ```tsx
- * import React from 'react';
- * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
- * import { acTagSpec } from "./AutoCoreTags";
- * 
- * function App() {
- *   return (
- *     <div>
- *       <main>
- *         <YourMainContent />
- *       </main>
- *       
- *       {process.env.NODE_ENV === 'development' && (
- *         <AutoCoreDevPanel 
- *           tags={acTagSpec} 
- *           className="fixed bottom-4 right-4 bg-white shadow-lg" 
- *         />
- *       )}
- *     </div>
- *   );
- * }
- * ```
- * 
- * @example Styled Panel
- * ```tsx
- * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
- * import { acTagSpec } from "./AutoCoreTags";
- * 
- * // Custom styled panel
- * <AutoCoreDevPanel 
- *   tags={acTagSpec}
- *   title="Machine Status Monitor"
- *   className="
- *     fixed top-4 left-4 
- *     bg-gray-900 text-white 
- *     border border-gray-700 
- *     shadow-2xl rounded-lg
- *     max-w-md
- *   "
- * />
- * ```
- * 
- * @example Filtered Tags
- * ```tsx
- * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
- * import { acTagSpec } from "./AutoCoreTags";
- * 
- * // Show only specific tags for focused debugging
- * const motorTags = acTagSpec.filter(tag => 
- *   tag.tagName.includes('motor') || tag.tagName.includes('axis')
- * );
- * 
- * <AutoCoreDevPanel 
- *   tags={motorTags}
- *   title="Motor Control Debug"
- *   className="debug-panel"
- * />
- * ```
- */
-
-import React, { useContext, useMemo, useState, useCallback } from "react";
-import type { TagConfig } from "../core/AutoCoreTagTypes";
-import { AutoCoreTagContext } from "../core/AutoCoreTagContext";
-
-/** Extract domain (first segment) from FQDN */
-const getDomain = (fqdn: string): string => fqdn.split('.')[0];
-
-/**
- * Props for the AutoCoreDevPanel component.
- */
-interface AutoCoreDevPanelProps {
-  /** 
-   * Array of tag configurations to display in the panel.
-   * Each tag will show its current value and provide controls for writing new values.
-   */
-  tags: readonly TagConfig[];
-  
-  /** 
-   * Optional title for the panel header. 
-   * @defaultValue "AutoCore Dev Panel"
-   */
-  title?: string;
-  
-  /** 
-   * Optional CSS class names for custom styling.
-   * The panel has default styling but can be customized with Tailwind or custom CSS.
-   */
-  className?: string;
-}
-
-/**
- * AutoCoreDevPanel - Development and debugging panel for AutoCore tags.
- * 
- * This component provides a real-time debugging interface for monitoring and manipulating
- * AutoCore tags during development. It displays current tag values, provides input controls
- * for writing new values, and includes tap functionality for boolean tags.
- * 
- * ## Features
- * 
- * - **Real-time monitoring**: Shows live tag values as they update from the server
- * - **Direct writes**: Input controls to write new values directly to tags
- * - **Type-aware inputs**: Automatically provides appropriate input types (checkbox for boolean, number input for numeric, etc.)
- * - **Tap functionality**: Special "TAP" buttons for boolean tags that send momentary true→false signals
- * - **Error handling**: Visual feedback for write failures and validation errors
- * - **Live status**: Indicator showing whether the system is loading or live
- * - **JSON support**: Proper formatting and editing for JSON-type tags
- * 
- * ## Input Types
- * 
- * - **Boolean tags**: Checkbox for direct true/false setting + TAP button for momentary signals
- * - **Number tags**: Number input with validation
- * - **String tags**: Text input
- * - **JSON tags**: Text input with JSON validation and pretty-printing
- * 
- * ## Keyboard Shortcuts
- * 
- * - **Enter key**: In text/number inputs, immediately sends the value to the server
- * - **Tab navigation**: Navigate between inputs using standard keyboard navigation
- * 
- * ## Error Handling
- * 
- * Write operations that fail will show error messages below the input field.
- * Common errors include:
- * - Invalid number formats
- * - Malformed JSON
- * - Network/server errors
- * - Tag not found errors
- */
-export const AutoCoreDevPanel: React.FC<AutoCoreDevPanelProps> = ({
-  tags,
-  title = "AutoCore Dev Panel",
-  className = "",
-}) => {
-  const { values, rawValues, isLoading, write, tap, scales } = useContext(AutoCoreTagContext);
-
-  /** Local editable buffers & errors keyed by tagName */
-  const [editBuf, setEditBuf] = useState<Record<string, string>>({});
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  const rows = useMemo(() => {
-    return tags.map((tag) => {
-      const display = values[tag.fqdn];
-      const raw = rawValues[tag.fqdn];
-      const scaleName = tag.scale ?? "";
-      const s = scaleName ? scales[scaleName] : undefined;
-      return {
-        tag,
-        display,
-        raw,
-        scaleName,
-        factor: s?.scale,
-        label: s?.label,
-      };
-    });
-  }, [tags, values, rawValues, scales]);
-
-  const setBuf = useCallback((tagName: string, v: string) => {
-    setEditBuf((prev) => ({ ...prev, [tagName]: v }));
-    setErrors((prev) => ({ ...prev, [tagName]: "" }));
-  }, []);
-
-  const setErr = useCallback((tagName: string, msg: string) => {
-    setErrors((prev) => ({ ...prev, [tagName]: msg }));
-  }, []);
-
-  const commit = useCallback(async (tag: TagConfig) => {
-    const tagName = tag.fqdn;
-    const buf = editBuf[tagName];
-
-    try {
-      if (tag.valueType === "boolean") {
-        // Toggle to the buffer value if explicitly provided, else flip current
-        const desired =
-          buf === "true" ? true :
-          buf === "false" ? false :
-          !(values[tagName] as boolean);
-        await write(tagName as any, desired as any);
-        setBuf(tagName, "");
-        return;
-      }
-
-      if (tag.valueType === "number") {
-        if (buf == null || buf.trim() === "") {
-          setErr(tagName, "Enter a number.");
-          return;
-        }
-        const n = Number(buf);
-        if (Number.isNaN(n)) {
-          setErr(tagName, "Invalid number.");
-          return;
-        }
-        await write(tagName as any, n as any);
-        setBuf(tagName, "");
-        return;
-      }
-
-      if (tag.valueType === "string") {
-        await write(tagName as any, (buf ?? "") as any);
-        setBuf(tagName, "");
-        return;
-      }
-
-      // json
-      try {
-        const parsed = buf?.trim() ? JSON.parse(buf) : null;
-        await write(tagName as any, parsed as any);
-        setBuf(tagName, "");
-      } catch (e: any) {
-        setErr(tagName, "Invalid JSON.");
-      }
-    } catch (e: any) {
-      setErr(tagName, e?.message ?? String(e));
-    }
-  }, [editBuf, setBuf, setErr, write, values]);
-
-  const onKeyDownCommit = (ev: React.KeyboardEvent, tag: TagConfig) => {
-    if (ev.key === "Enter" && !ev.shiftKey) {
-      ev.preventDefault();
-      void commit(tag);
-    }
-  };
-
-  return (
-    <div className={`rounded-md border border-gray-200 bg-white text-sm ${className}`} style={{ minWidth: 680 }}>
-      <div className="flex items-center justify-between px-3 py-2" style={{ borderBottom: "1px solid #eee" }}>
-        <div className="flex items-center gap-2">
-          <strong>{title}</strong>
-          <span
-            title={isLoading ? "Loading" : "Live"}
-            style={{
-              width: 8, height: 8, borderRadius: 999,
-              background: isLoading ? "#aaa" : "#22c55e",
-              display: "inline-block"
-            }}
-          />
-        </div>
-      </div>
-
-      <div style={{ overflowX: "auto" }}>
-        <table style={{ borderCollapse: "collapse", width: "100%" }}>
-          <thead>
-            <tr>
-              <Th>Tag</Th>
-              <Th>Kind</Th>
-              <Th>Domain</Th>
-              <Th>Symbol</Th>
-              <Th>Display</Th>
-              <Th>Raw</Th>
-              <Th>Scale</Th>
-              <Th>Units</Th>
-              <Th>Input</Th>
-              <Th>Actions</Th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map(({ tag, display, raw, scaleName, factor, label }) => {
-              const buf = editBuf[tag.fqdn] ?? "";
-              const err = errors[tag.fqdn];
-
-              return (
-                <tr key={tag.fqdn}>
-                  <Td mono>{tag.tagName}</Td>
-                  <Td mono>{tag.valueType}</Td>
-                  <Td mono>{getDomain(tag.fqdn)}</Td>
-                  <Td mono>{tag.fqdn}</Td>
-                  <Td mono>{fmt(display)}</Td>
-                  <Td mono>{fmt(raw)}</Td>
-                  <Td mono>{scaleName ? `${scaleName} ×${factor ?? 1}` : "—"}</Td>
-                  <Td mono>{scaleName ? (label ?? "") : "—"}</Td>
-                  <Td>
-                    <InputForTag
-                      tag={tag}
-                      buf={buf}
-                      setBuf={(v) => setBuf(tag.fqdn, v)}
-                      onKeyDown={(e) => onKeyDownCommit(e, tag)}
-                    />
-                    {err && <div style={{ color: "#dc2626", marginTop: 4 }}>{err}</div>}
-                  </Td>
-                  <Td>
-                    <div style={{ display: "flex", gap: 6 }}>
-                      <button onClick={() => commit(tag)}>Write</button>
-                      {tag.valueType === "boolean" && (
-                        <button onClick={() => tap(tag.fqdn as any)}>TAP</button>
-                      )}
-                    </div>
-                  </Td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-/** ---------- helpers ---------- */
-
-const Th: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
-  <th style={{
-    textAlign: "left",
-    borderBottom: "1px solid #ddd",
-    padding: "6px 8px",
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-  }}>{children}</th>
-);
-
-const Td: React.FC<React.PropsWithChildren<{ mono?: boolean }>> = ({ children, mono }) => (
-  <td style={{
-    borderBottom: "1px solid #eee",
-    padding: "6px 8px",
-    whiteSpace: "nowrap",
-    fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : "inherit"
-  }}>{children}</td>
-);
-
-const InputForTag: React.FC<{
-  tag: TagConfig;
-  buf: string;
-  setBuf: (v: string) => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
-}> = ({ tag, buf, setBuf, onKeyDown }) => {
-  if (tag.valueType === "boolean") {
-    // Boolean: checkbox controls direct true/false (buffer mirrors state as string)
-    return (
-      <label style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
-        <input
-          type="checkbox"
-          checked={buf ? buf === "true" : (Boolean as any)}
-          onChange={(e) => setBuf(e.target.checked ? "true" : "false")}
-          onKeyDown={onKeyDown}
-        />
-        <span>set</span>
-      </label>
-    );
-  }
-
-  if (tag.valueType === "number") {
-    return (
-      <input
-        type="number"
-        step="any"
-        value={buf}
-        onChange={(e) => setBuf(e.target.value)}
-        onKeyDown={onKeyDown}
-        style={{ width: 140 }}
-        placeholder="number…"
-      />
-    );
-  }
-
-  if (tag.valueType === "string") {
-    return (
-      <input
-        type="text"
-        value={buf}
-        onChange={(e) => setBuf(e.target.value)}
-        onKeyDown={onKeyDown}
-        style={{ width: 180 }}
-        placeholder="text…"
-      />
-    );
-  }
-
-  // json
-  return (
-    <textarea
-      value={buf}
-      onChange={(e) => setBuf(e.target.value)}
-      onKeyDown={onKeyDown}
-      rows={2}
-      style={{ width: 260, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }}
-      placeholder='{"foo": 42}'
-    />
-  );
-};
-
-function fmt(v: unknown) {
-  if (v === null || v === undefined) return "—";
-  if (typeof v === "number") return Number.isFinite(v) ? v.toString() : String(v);
-  if (typeof v === "string") return v;
-  try { return JSON.stringify(v); } catch { return String(v); }
-}
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-09-05 08:06:09
+ * -----
+ * Last Modified: 2026-01-20 06:09:05
+ * -----
+ * 
+ */
+
+/**
+ * @module components/AutoCoreDevPanel
+ * 
+ * @summary
+ * 
+ * A development and debugging panel for monitoring and manually interacting with AutoCore tags.
+ * This component provides real-time visibility into tag values and allows direct manipulation
+ * for testing and debugging purposes.
+ * 
+ * @remarks
+ * 
+ * The AutoCoreDevPanel is designed to be used during development to:
+ * - Monitor live tag values in real-time
+ * - Test write operations manually 
+ * - Debug tag behavior and connectivity
+ * - Perform tap operations on boolean tags
+ * - Validate tag configurations
+ * 
+ * The panel automatically connects to the global AutoCoreTagContext and displays all
+ * tags passed to it. No additional setup or factory functions are required.
+ * 
+ * @example Basic Usage
+ * ```tsx
+ * import React from 'react';
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * function App() {
+ *   return (
+ *     <div>
+ *       <main>
+ *         <YourMainContent />
+ *       </main>
+ *       
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <AutoCoreDevPanel 
+ *           tags={acTagSpec} 
+ *           className="fixed bottom-4 right-4 bg-white shadow-lg" 
+ *         />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @example Styled Panel
+ * ```tsx
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * // Custom styled panel
+ * <AutoCoreDevPanel 
+ *   tags={acTagSpec}
+ *   title="Machine Status Monitor"
+ *   className="
+ *     fixed top-4 left-4 
+ *     bg-gray-900 text-white 
+ *     border border-gray-700 
+ *     shadow-2xl rounded-lg
+ *     max-w-md
+ *   "
+ * />
+ * ```
+ * 
+ * @example Filtered Tags
+ * ```tsx
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * // Show only specific tags for focused debugging
+ * const motorTags = acTagSpec.filter(tag => 
+ *   tag.tagName.includes('motor') || tag.tagName.includes('axis')
+ * );
+ * 
+ * <AutoCoreDevPanel 
+ *   tags={motorTags}
+ *   title="Motor Control Debug"
+ *   className="debug-panel"
+ * />
+ * ```
+ */
+
+import React, { useContext, useMemo, useState, useCallback } from "react";
+import type { TagConfig } from "../core/AutoCoreTagTypes";
+import { AutoCoreTagContext } from "../core/AutoCoreTagContext";
+
+/** Extract domain (first segment) from FQDN */
+const getDomain = (fqdn: string): string => fqdn.split('.')[0];
+
+/**
+ * Props for the AutoCoreDevPanel component.
+ */
+interface AutoCoreDevPanelProps {
+  /** 
+   * Array of tag configurations to display in the panel.
+   * Each tag will show its current value and provide controls for writing new values.
+   */
+  tags: readonly TagConfig[];
+  
+  /** 
+   * Optional title for the panel header. 
+   * @defaultValue "AutoCore Dev Panel"
+   */
+  title?: string;
+  
+  /** 
+   * Optional CSS class names for custom styling.
+   * The panel has default styling but can be customized with Tailwind or custom CSS.
+   */
+  className?: string;
+}
+
+/**
+ * AutoCoreDevPanel - Development and debugging panel for AutoCore tags.
+ * 
+ * This component provides a real-time debugging interface for monitoring and manipulating
+ * AutoCore tags during development. It displays current tag values, provides input controls
+ * for writing new values, and includes tap functionality for boolean tags.
+ * 
+ * ## Features
+ * 
+ * - **Real-time monitoring**: Shows live tag values as they update from the server
+ * - **Direct writes**: Input controls to write new values directly to tags
+ * - **Type-aware inputs**: Automatically provides appropriate input types (checkbox for boolean, number input for numeric, etc.)
+ * - **Tap functionality**: Special "TAP" buttons for boolean tags that send momentary true→false signals
+ * - **Error handling**: Visual feedback for write failures and validation errors
+ * - **Live status**: Indicator showing whether the system is loading or live
+ * - **JSON support**: Proper formatting and editing for JSON-type tags
+ * 
+ * ## Input Types
+ * 
+ * - **Boolean tags**: Checkbox for direct true/false setting + TAP button for momentary signals
+ * - **Number tags**: Number input with validation
+ * - **String tags**: Text input
+ * - **JSON tags**: Text input with JSON validation and pretty-printing
+ * 
+ * ## Keyboard Shortcuts
+ * 
+ * - **Enter key**: In text/number inputs, immediately sends the value to the server
+ * - **Tab navigation**: Navigate between inputs using standard keyboard navigation
+ * 
+ * ## Error Handling
+ * 
+ * Write operations that fail will show error messages below the input field.
+ * Common errors include:
+ * - Invalid number formats
+ * - Malformed JSON
+ * - Network/server errors
+ * - Tag not found errors
+ */
+export const AutoCoreDevPanel: React.FC<AutoCoreDevPanelProps> = ({
+  tags,
+  title = "AutoCore Dev Panel",
+  className = "",
+}) => {
+  const { values, rawValues, isLoading, write, tap, scales } = useContext(AutoCoreTagContext);
+
+  /** Local editable buffers & errors keyed by tagName */
+  const [editBuf, setEditBuf] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const rows = useMemo(() => {
+    return tags.map((tag) => {
+      const display = values[tag.fqdn];
+      const raw = rawValues[tag.fqdn];
+      const scaleName = tag.scale ?? "";
+      const s = scaleName ? scales[scaleName] : undefined;
+      return {
+        tag,
+        display,
+        raw,
+        scaleName,
+        factor: s?.scale,
+        label: s?.label,
+      };
+    });
+  }, [tags, values, rawValues, scales]);
+
+  const setBuf = useCallback((tagName: string, v: string) => {
+    setEditBuf((prev) => ({ ...prev, [tagName]: v }));
+    setErrors((prev) => ({ ...prev, [tagName]: "" }));
+  }, []);
+
+  const setErr = useCallback((tagName: string, msg: string) => {
+    setErrors((prev) => ({ ...prev, [tagName]: msg }));
+  }, []);
+
+  const commit = useCallback(async (tag: TagConfig) => {
+    const tagName = tag.fqdn;
+    const buf = editBuf[tagName];
+
+    try {
+      if (tag.valueType === "boolean") {
+        // Toggle to the buffer value if explicitly provided, else flip current
+        const desired =
+          buf === "true" ? true :
+          buf === "false" ? false :
+          !(values[tagName] as boolean);
+        await write(tagName as any, desired as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      if (tag.valueType === "number") {
+        if (buf == null || buf.trim() === "") {
+          setErr(tagName, "Enter a number.");
+          return;
+        }
+        const n = Number(buf);
+        if (Number.isNaN(n)) {
+          setErr(tagName, "Invalid number.");
+          return;
+        }
+        await write(tagName as any, n as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      if (tag.valueType === "string") {
+        await write(tagName as any, (buf ?? "") as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      // json
+      try {
+        const parsed = buf?.trim() ? JSON.parse(buf) : null;
+        await write(tagName as any, parsed as any);
+        setBuf(tagName, "");
+      } catch (e: any) {
+        setErr(tagName, "Invalid JSON.");
+      }
+    } catch (e: any) {
+      setErr(tagName, e?.message ?? String(e));
+    }
+  }, [editBuf, setBuf, setErr, write, values]);
+
+  const onKeyDownCommit = (ev: React.KeyboardEvent, tag: TagConfig) => {
+    if (ev.key === "Enter" && !ev.shiftKey) {
+      ev.preventDefault();
+      void commit(tag);
+    }
+  };
+
+  return (
+    <div className={`rounded-md border border-gray-200 bg-white text-sm ${className}`} style={{ minWidth: 680 }}>
+      <div className="flex items-center justify-between px-3 py-2" style={{ borderBottom: "1px solid #eee" }}>
+        <div className="flex items-center gap-2">
+          <strong>{title}</strong>
+          <span
+            title={isLoading ? "Loading" : "Live"}
+            style={{
+              width: 8, height: 8, borderRadius: 999,
+              background: isLoading ? "#aaa" : "#22c55e",
+              display: "inline-block"
+            }}
+          />
+        </div>
+      </div>
+
+      <div style={{ overflowX: "auto" }}>
+        <table style={{ borderCollapse: "collapse", width: "100%" }}>
+          <thead>
+            <tr>
+              <Th>Tag</Th>
+              <Th>Kind</Th>
+              <Th>Domain</Th>
+              <Th>Symbol</Th>
+              <Th>Display</Th>
+              <Th>Raw</Th>
+              <Th>Scale</Th>
+              <Th>Units</Th>
+              <Th>Input</Th>
+              <Th>Actions</Th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(({ tag, display, raw, scaleName, factor, label }) => {
+              const buf = editBuf[tag.fqdn] ?? "";
+              const err = errors[tag.fqdn];
+
+              return (
+                <tr key={tag.fqdn}>
+                  <Td mono>{tag.tagName}</Td>
+                  <Td mono>{tag.valueType}</Td>
+                  <Td mono>{getDomain(tag.fqdn)}</Td>
+                  <Td mono>{tag.fqdn}</Td>
+                  <Td mono>{fmt(display)}</Td>
+                  <Td mono>{fmt(raw)}</Td>
+                  <Td mono>{scaleName ? `${scaleName} ×${factor ?? 1}` : "—"}</Td>
+                  <Td mono>{scaleName ? (label ?? "") : "—"}</Td>
+                  <Td>
+                    <InputForTag
+                      tag={tag}
+                      buf={buf}
+                      setBuf={(v) => setBuf(tag.fqdn, v)}
+                      onKeyDown={(e) => onKeyDownCommit(e, tag)}
+                    />
+                    {err && <div style={{ color: "#dc2626", marginTop: 4 }}>{err}</div>}
+                  </Td>
+                  <Td>
+                    <div style={{ display: "flex", gap: 6 }}>
+                      <button onClick={() => commit(tag)}>Write</button>
+                      {tag.valueType === "boolean" && (
+                        <button onClick={() => tap(tag.fqdn as any)}>TAP</button>
+                      )}
+                    </div>
+                  </Td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+/** ---------- helpers ---------- */
+
+const Th: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
+  <th style={{
+    textAlign: "left",
+    borderBottom: "1px solid #ddd",
+    padding: "6px 8px",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+  }}>{children}</th>
+);
+
+const Td: React.FC<React.PropsWithChildren<{ mono?: boolean }>> = ({ children, mono }) => (
+  <td style={{
+    borderBottom: "1px solid #eee",
+    padding: "6px 8px",
+    whiteSpace: "nowrap",
+    fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : "inherit"
+  }}>{children}</td>
+);
+
+const InputForTag: React.FC<{
+  tag: TagConfig;
+  buf: string;
+  setBuf: (v: string) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}> = ({ tag, buf, setBuf, onKeyDown }) => {
+  if (tag.valueType === "boolean") {
+    // Boolean: checkbox controls direct true/false (buffer mirrors state as string)
+    return (
+      <label style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+        <input
+          type="checkbox"
+          checked={buf ? buf === "true" : (Boolean as any)}
+          onChange={(e) => setBuf(e.target.checked ? "true" : "false")}
+          onKeyDown={onKeyDown}
+        />
+        <span>set</span>
+      </label>
+    );
+  }
+
+  if (tag.valueType === "number") {
+    return (
+      <input
+        type="number"
+        step="any"
+        value={buf}
+        onChange={(e) => setBuf(e.target.value)}
+        onKeyDown={onKeyDown}
+        style={{ width: 140 }}
+        placeholder="number…"
+      />
+    );
+  }
+
+  if (tag.valueType === "string") {
+    return (
+      <input
+        type="text"
+        value={buf}
+        onChange={(e) => setBuf(e.target.value)}
+        onKeyDown={onKeyDown}
+        style={{ width: 180 }}
+        placeholder="text…"
+      />
+    );
+  }
+
+  // json
+  return (
+    <textarea
+      value={buf}
+      onChange={(e) => setBuf(e.target.value)}
+      onKeyDown={onKeyDown}
+      rows={2}
+      style={{ width: 260, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }}
+      placeholder='{"foo": 42}'
+    />
+  );
+};
+
+function fmt(v: unknown) {
+  if (v === null || v === undefined) return "—";
+  if (typeof v === "number") return Number.isFinite(v) ? v.toString() : String(v);
+  if (typeof v === "string") return v;
+  try { return JSON.stringify(v); } catch { return String(v); }
+}