@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/data-explorer/data-explorer.tsx

@@ -1,633 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { isDesktop } from "../../globals";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-
-interface ITableInfo {
-  tableName: string;
-  tableId?: string;
-  isRegistered: boolean;
-  sql?: string;
-  type?: string;
-  rowCount?: number;
-  bytes?: number;
-}
-
-interface IDeletedTableInfo {
-  tableName: string;
-  tableId: string;
-  deletedAt: string;
-}
-
-type DataExplorerElectronApi = {
-  getCurrentContext: () => Promise<{ contextName: string }>;
-  getAllTables: () => Promise<ITableInfo[]>;
-  compactDatabase: (beforeTimestamp?: number) => Promise<void>;
-  resetChangeTracking: () => Promise<void>;
-  deleteTable: (tableName: string) => Promise<void>;
-  getDeletedTables: () => Promise<IDeletedTableInfo[]>;
-};
-
-type WindowWithDataExplorer = Window & {
-  electronAPI?: { dataExplorer?: DataExplorerElectronApi };
-};
-
-function getDataExplorerApi(): DataExplorerElectronApi | undefined {
-  return (window as WindowWithDataExplorer).electronAPI?.dataExplorer;
-}
-
-function formatRelativeTime(isoString: string): string {
-  const date = new Date(isoString);
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-  const diffMin = Math.floor(diffMs / 60_000);
-  if (diffMin < 1) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  const diffHrs = Math.floor(diffMin / 60);
-  if (diffHrs < 24) return `${diffHrs}h ago`;
-  const diffDays = Math.floor(diffHrs / 24);
-  if (diffDays < 30) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
-
-function DeleteConfirmModal({
-  tableName,
-  onConfirm,
-  onCancel,
-}: {
-  tableName: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  const [confirmText, setConfirmText] = useState("");
-  const [deleting, setDeleting] = useState(false);
-
-  const handleConfirm = async () => {
-    setDeleting(true);
-    try {
-      await onConfirm();
-    } finally {
-      setDeleting(false);
-    }
-  };
-
-  return (
-    <div
-      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
-      style={{ zIndex: 1050, backgroundColor: "rgba(0,0,0,0.5)" }}
-      onClick={onCancel}
-    >
-      <div
-        className="card shadow-lg"
-        style={{ maxWidth: 480, width: "100%" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="card-header bg-danger text-white d-flex justify-content-between align-items-center">
-          <strong>Delete Table</strong>
-          <button type="button" className="btn-close btn-close-white" onClick={onCancel} />
-        </div>
-        <div className="card-body">
-          <div className="alert alert-danger mb-3">
-            <i className="bi bi-exclamation-triangle-fill me-2" />
-            This will permanently delete all data for <strong>{tableName}</strong> on this device
-            and all synced devices once synced.
-          </div>
-          <label className="form-label">
-            Type <strong>{tableName}</strong> to confirm:
-          </label>
-          <input
-            type="text"
-            className="form-control"
-            value={confirmText}
-            onChange={(e) => setConfirmText(e.target.value)}
-            placeholder={tableName}
-            // biome-ignore lint/a11y/noAutofocus: confirmation input needs immediate focus
-            autoFocus
-          />
-        </div>
-        <div className="card-footer d-flex justify-content-end gap-2">
-          <button
-            type="button"
-            className="btn btn-secondary"
-            onClick={onCancel}
-            disabled={deleting}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            className="btn btn-danger"
-            disabled={confirmText !== tableName || deleting}
-            onClick={handleConfirm}
-          >
-            {deleting ? (
-              <>
-                <span className="spinner-border spinner-border-sm me-1" />
-                Deleting...
-              </>
-            ) : (
-              "Delete Table"
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function DataExplorerList() {
-  const [tables, setTables] = useState<ITableInfo[]>([]);
-  const [deletedTables, setDeletedTables] = useState<IDeletedTableInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [currentContext, setCurrentContext] = useState<string>("");
-  const [compacting, setCompacting] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
-
-  const formatBytes = (bytes: number | undefined) => {
-    if (bytes === undefined) return "-";
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Math.round(bytes / k ** i)} ${sizes[i]}`;
-  };
-
-  const getBytesColorClass = (bytes: number | undefined): string => {
-    if (bytes === undefined) return "text-secondary";
-    const kb = 1024;
-    const mb = kb * 1024;
-
-    if (bytes < 10 * kb) return "text-secondary";
-    if (bytes < 10 * mb) return "text-primary";
-    if (bytes < 100 * mb) return "text-warning";
-    return "text-danger";
-  };
-
-  const loadTables = useCallback(async () => {
-    try {
-      if (!isDesktop()) return;
-
-      const api = getDataExplorerApi();
-      if (!api) {
-        console.warn("Data Explorer API not available");
-        return;
-      }
-
-      const contextInfo = await api.getCurrentContext();
-      setCurrentContext(contextInfo.contextName);
-
-      const allTablesInfo = await api.getAllTables();
-      allTablesInfo.sort((a: ITableInfo, b: ITableInfo) => {
-        if (a.isRegistered !== b.isRegistered) {
-          return a.isRegistered ? -1 : 1;
-        }
-        return a.tableName.localeCompare(b.tableName);
-      });
-      setTables(allTablesInfo);
-
-      const deleted = await api.getDeletedTables();
-      deleted.sort((a, b) => a.tableName.localeCompare(b.tableName));
-      setDeletedTables(deleted);
-    } catch (error) {
-      console.error("Error loading tables:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const handleDeleteTable = async () => {
-    if (!deleteTarget) return;
-    const api = getDataExplorerApi();
-    if (!api) return;
-
-    try {
-      await api.deleteTable(deleteTarget);
-      setDeleteTarget(null);
-      setLoading(true);
-      await loadTables();
-    } catch (error: unknown) {
-      console.error("Error deleting table:", error);
-      alert(`Error deleting table: ${error instanceof Error ? error.message : String(error)}`);
-    }
-  };
-
-  const compactDatabase = async (beforeTimestamp?: number) => {
-    try {
-      setCompacting(true);
-      const api = getDataExplorerApi();
-      if (!api) {
-        alert("Data Explorer API not available");
-        return;
-      }
-
-      const isExtreme = beforeTimestamp !== undefined;
-      if (isExtreme) {
-        const confirmed = window.confirm(
-          "Extreme Compaction will remove ALL change history. This cannot be undone. Continue?",
-        );
-        if (!confirmed) {
-          setCompacting(false);
-          return;
-        }
-      }
-
-      await api.compactDatabase(beforeTimestamp);
-      alert(`Database compacted successfully!${isExtreme ? " (Extreme mode)" : ""}`);
-
-      setLoading(true);
-      await loadTables();
-    } catch (error: unknown) {
-      console.error("Error compacting database:", error);
-      alert(`Error compacting database: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      setCompacting(false);
-    }
-  };
-
-  const resetChangeTracking = async () => {
-    try {
-      setCompacting(true);
-      const api = getDataExplorerApi();
-      if (!api) {
-        alert("Data Explorer API not available");
-        return;
-      }
-
-      const confirmed = window.confirm(
-        "Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?",
-      );
-      if (!confirmed) {
-        setCompacting(false);
-        return;
-      }
-
-      await api.resetChangeTracking();
-      alert("Change tracking reset successfully!");
-
-      setLoading(true);
-      await loadTables();
-    } catch (error: unknown) {
-      console.error("Error resetting change tracking:", error);
-      alert(
-        `Error resetting change tracking: ${error instanceof Error ? error.message : String(error)}`,
-      );
-    } finally {
-      setCompacting(false);
-    }
-  };
-
-  useEffect(() => {
-    loadTables();
-  }, [loadTables]);
-
-  if (loading) {
-    return <LoadingIndicator />;
-  }
-
-  if (!isDesktop()) {
-    return (
-      <div className="container-fluid p-4">
-        <div className="alert alert-info">
-          Data Explorer is only available in the desktop application.
-        </div>
-      </div>
-    );
-  }
-
-  if (!currentContext && tables.length === 0) {
-    return (
-      <div className="container-fluid p-4">
-        <div className="alert alert-warning">Unable to load database information.</div>
-      </div>
-    );
-  }
-
-  const registeredTables = tables.filter((t) => t.isRegistered);
-  const unregisteredTables = tables.filter((t) => !t.isRegistered);
-
-  return (
-    <div className="container-fluid p-4">
-      {deleteTarget && (
-        <DeleteConfirmModal
-          tableName={deleteTarget}
-          onConfirm={handleDeleteTable}
-          onCancel={() => setDeleteTarget(null)}
-        />
-      )}
-
-      {/* Navigation Tabs */}
-      <ul className="nav nav-tabs mb-4">
-        <li className="nav-item">
-          <a className="nav-link active" href="#/data-explorer">
-            <i className="bi bi-table"></i> Tables
-          </a>
-        </li>
-        <li className="nav-item">
-          <a className="nav-link" href="#/data-explorer/query">
-            <i className="bi bi-terminal"></i> Query
-          </a>
-        </li>
-      </ul>
-
-      <div className="d-flex justify-content-between align-items-center mb-4">
-        <h2>Data Explorer</h2>
-        <div className="d-flex gap-2">
-          {/* Split button for Compact Database */}
-          <div className="btn-group" role="group">
-            <button
-              type="button"
-              className="btn btn-sm btn-warning"
-              onClick={() => compactDatabase()}
-              disabled={compacting || loading}
-              title="Compact database (cleanup changes older than 2 weeks)"
-            >
-              {compacting ? (
-                <>
-                  <span
-                    className="spinner-border spinner-border-sm me-1"
-                    role="status"
-                    aria-hidden="true"
-                  ></span>
-                  Compacting...
-                </>
-              ) : (
-                <>
-                  <i className="bi bi-disc"></i> Compact Database
-                </>
-              )}
-            </button>
-            <button
-              type="button"
-              className="btn btn-sm btn-warning dropdown-toggle dropdown-toggle-split"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-              disabled={compacting || loading}
-              title="More compaction options"
-            >
-              <span className="visually-hidden">Toggle Dropdown</span>
-            </button>
-            <ul className="dropdown-menu">
-              <li>
-                <a
-                  className="dropdown-item"
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    compactDatabase(Date.now());
-                  }}
-                >
-                  <i className="bi bi-exclamation-triangle text-danger me-2"></i>
-                  Extreme Compaction
-                  <div className="small text-muted">Remove ALL change history</div>
-                </a>
-              </li>
-              <li>
-                <hr className="dropdown-divider" />
-              </li>
-              <li>
-                <a
-                  className="dropdown-item"
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    resetChangeTracking();
-                  }}
-                >
-                  <i className="bi bi-arrow-clockwise text-warning me-2"></i>
-                  Reset Change Tracking
-                  <div className="small text-muted">Clear and rebuild all change history</div>
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={() => {
-              setLoading(true);
-              loadTables();
-            }}
-            disabled={compacting}
-          >
-            <i className="bi bi-arrow-clockwise"></i> Refresh
-          </button>
-        </div>
-      </div>
-
-      {/* Current Context Info */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <div className="d-flex justify-content-between align-items-center">
-            <div>
-              <h5 className="card-title mb-2">Current Data Context</h5>
-              <p className="mb-0">{currentContext}</p>
-            </div>
-            <div className="text-end">
-              <div className="text-muted small">Total DB Size</div>
-              <div className="fs-4 fw-bold">
-                {formatBytes(tables.reduce((sum, t) => sum + (t.bytes || 0), 0))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Registered Tables */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <h5 className="card-title">
-            Registered Tables ({registeredTables.length})
-            <span className="badge bg-success ms-2">Active</span>
-          </h5>
-          <p className="text-muted small">
-            These tables are registered with the TableContainer and actively used by the
-            application.
-          </p>
-          {registeredTables.length === 0 ? (
-            <p className="text-muted">No registered tables found</p>
-          ) : (
-            <div className="table-responsive">
-              <table className="table table-hover table-sm">
-                <thead>
-                  <tr>
-                    <th>Table Name</th>
-                    <th>Table ID</th>
-                    <th className="text-end">Row Count</th>
-                    <th className="text-end">Bytes</th>
-                    <th style={{ width: "1%" }}></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {registeredTables.map((table) => (
-                    <tr key={table.tableName}>
-                      <td>
-                        <strong>{table.tableName}</strong>
-                      </td>
-                      <td>
-                        <code className="text-muted small">{table.tableId || "system"}</code>
-                      </td>
-                      <td className="text-end">
-                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                      </td>
-                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                        {formatBytes(table.bytes)}
-                      </td>
-                      <td>
-                        <button
-                          type="button"
-                          className="btn btn-sm btn-outline-danger border-0"
-                          title={`Delete ${table.tableName}`}
-                          onClick={() => setDeleteTarget(table.tableName)}
-                        >
-                          <i className="bi bi-trash" />
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Unregistered Tables (Raw SQLite) */}
-      {unregisteredTables.length > 0 && (
-        <div className="card mb-4">
-          <div className="card-body">
-            <h5 className="card-title">
-              Unregistered Tables ({unregisteredTables.length})
-              <span className="badge bg-warning text-dark ms-2">Raw SQLite</span>
-            </h5>
-            <p className="text-muted small">
-              These tables exist in the SQLite database but are not registered with the
-              TableContainer. They may be system tables, change tracking tables, or legacy tables.
-            </p>
-            <div className="table-responsive">
-              <table className="table table-hover table-sm">
-                <thead>
-                  <tr>
-                    <th>Table Name</th>
-                    <th>Type</th>
-                    <th className="text-end">Row Count</th>
-                    <th className="text-end">Bytes</th>
-                    <th>SQL Definition</th>
-                    <th style={{ width: "1%" }}></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {unregisteredTables.map((table) => (
-                    <tr key={table.tableName}>
-                      <td>
-                        <strong>{table.tableName}</strong>
-                      </td>
-                      <td>
-                        <span className="badge bg-secondary">{table.type || "table"}</span>
-                      </td>
-                      <td className="text-end">
-                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                      </td>
-                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                        {formatBytes(table.bytes)}
-                      </td>
-                      <td>
-                        {table.sql ? (
-                          <details>
-                            <summary
-                              className="cursor-pointer text-primary"
-                              style={{ cursor: "pointer" }}
-                            >
-                              <small>View SQL</small>
-                            </summary>
-                            <pre
-                              className="mt-2 p-2 bg-body-secondary border rounded"
-                              style={{
-                                fontSize: "0.75rem",
-                                maxHeight: "300px",
-                                overflow: "auto",
-                              }}
-                            >
-                              <code className="text-body">{table.sql}</code>
-                            </pre>
-                          </details>
-                        ) : (
-                          <span className="text-muted small">-</span>
-                        )}
-                      </td>
-                      <td>
-                        <button
-                          type="button"
-                          className="btn btn-sm btn-outline-danger border-0"
-                          title={`Delete ${table.tableName}`}
-                          onClick={() => setDeleteTarget(table.tableName)}
-                        >
-                          <i className="bi bi-trash" />
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Deleted Tables */}
-      {deletedTables.length > 0 && (
-        <div className="card mb-4">
-          <div className="card-body">
-            <h5 className="card-title">
-              Deleted Tables ({deletedTables.length})
-              <span className="badge bg-danger ms-2">Deleted</span>
-            </h5>
-            <p className="text-muted small">
-              These tables have been deleted. Their definitions are retained so other devices know
-              to stop syncing data for them.
-            </p>
-            <div className="table-responsive">
-              <table className="table table-hover table-sm">
-                <thead>
-                  <tr>
-                    <th>Table Name</th>
-                    <th>Table ID</th>
-                    <th>Deleted At</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {deletedTables.map((table) => (
-                    <tr key={table.tableId}>
-                      <td>
-                        <strong className="text-muted">{table.tableName}</strong>
-                      </td>
-                      <td>
-                        <code className="text-muted small">{table.tableId}</code>
-                      </td>
-                      <td>
-                        <span title={new Date(table.deletedAt).toLocaleString()}>
-                          {formatRelativeTime(table.deletedAt)}
-                        </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "data-explorer-list-ui",
-  component: DataExplorerList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "data-explorer",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});

package/src/screens/data-explorer/index.ts

@@ -1,6 +0,0 @@
-// Import all data explorer screen components to ensure they register their routes
-import "./data-explorer";
-import "./query-executor";
-
-export * from "./data-explorer";
-export * from "./query-executor";