@epoch32/visage 0.0.0-stage → 1.0.0

package/src/devtools/QueryTab.tsx

@@ -0,0 +1,200 @@
+import { For, Show } from "../dom";
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+import type { QueryRecord } from "./types";
+
+interface QueryTabProps {
+  hub: DevToolsHub;
+  selectedId: WritableSignal<string | null>;
+  searchQuery: WritableSignal<string>;
+  formatJSON: (val: any) => string;
+}
+
+export function QueryTab(props: QueryTabProps) {
+  const filteredQueries = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.queriesList();
+    if (!q) return list;
+    return list.filter(
+      (item) =>
+        item.hash.toLowerCase().includes(q) || JSON.stringify(item.key).toLowerCase().includes(q)
+    );
+  };
+
+  const selectedQuery = () => {
+    const id = props.selectedId();
+    if (!id) return null;
+    return props.hub.queriesList().find((qr) => qr.hash === id) ?? null;
+  };
+
+  return (
+    <div style={{ display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" }}>
+      {/* Query List */}
+      <div class="visage-devtools-sidebar">
+        <div class="visage-devtools-search">
+          <input
+            class="visage-devtools-input"
+            placeholder="Search query cache..."
+            value={props.searchQuery}
+            onInput={(e: any) => props.searchQuery.set(e.target.value)}
+          />
+        </div>
+        <div class="visage-devtools-list">
+          <For
+            each={filteredQueries}
+            fallback={
+              <div style={{ padding: "12px", color: "#64748b", fontSize: "12px" }}>
+                No active queries in cache.
+              </div>
+            }
+          >
+            {(qr: QueryRecord) => {
+              const isSelected = () => props.selectedId() === qr.hash;
+              return (
+                <div
+                  class={() => `visage-devtools-item ${isSelected() ? "selected" : ""}`}
+                  onClick={() => props.selectedId.set(qr.hash)}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      overflow: "hidden"
+                    }}
+                  >
+                    <span
+                      class="visage-devtools-badge"
+                      style={{
+                        background:
+                          qr.status() === "success"
+                            ? "#065f46"
+                            : qr.status() === "error"
+                              ? "#991b1b"
+                              : "#854d0e",
+                        color: "#fff"
+                      }}
+                    >
+                      {() => qr.status()}
+                    </span>
+                    <span
+                      style={{
+                        fontWeight: 500,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      }}
+                    >
+                      {JSON.stringify(qr.key)}
+                    </span>
+                  </div>
+                  <span style={{ fontSize: "10px", color: "#64748b" }}>
+                    {() => qr.fetchStatus()}
+                  </span>
+                </div>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+
+      {/* Query Detail */}
+      <div class="visage-devtools-main">
+        <Show
+          when={selectedQuery}
+          fallback={
+            <div
+              style={{ color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" }}
+            >
+              Select a query from the cache list to view live cached response and trigger manual
+              refetches.
+            </div>
+          }
+        >
+          {(qr: () => QueryRecord) => (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                }}
+              >
+                <div>
+                  <h3 style={{ margin: 0, fontSize: "15px", color: "#f8fafc" }}>
+                    {() => JSON.stringify(qr().key)}
+                  </h3>
+                  <span style={{ fontSize: "11px", color: "#64748b" }}>
+                    Hash: {() => qr().hash}
+                  </span>
+                </div>
+                <div style={{ display: "flex", gap: "8px" }}>
+                  <button
+                    type="button"
+                    class="visage-devtools-btn"
+                    onClick={() => qr().refetch?.()}
+                  >
+                    Refetch
+                  </button>
+                  <button
+                    type="button"
+                    class="visage-devtools-btn"
+                    onClick={() => qr().invalidate?.()}
+                  >
+                    Invalidate Cache
+                  </button>
+                </div>
+              </div>
+
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: "10px",
+                  marginBottom: "16px"
+                }}
+              >
+                <div
+                  style={{
+                    background: "#0c111d",
+                    padding: "10px",
+                    borderRadius: "6px",
+                    border: "1px solid #1e293b"
+                  }}
+                >
+                  <div style={{ fontSize: "11px", color: "#64748b" }}>STATUS</div>
+                  <div style={{ fontWeight: 600, color: "#38bdf8" }}>
+                    {() => `${qr().status()} (${qr().fetchStatus()})`}
+                  </div>
+                </div>
+                <div
+                  style={{
+                    background: "#0c111d",
+                    padding: "10px",
+                    borderRadius: "6px",
+                    border: "1px solid #1e293b"
+                  }}
+                >
+                  <div style={{ fontSize: "11px", color: "#64748b" }}>LAST UPDATED</div>
+                  <div style={{ fontWeight: 600, color: "#f1f5f9" }}>
+                    {() =>
+                      qr().dataUpdatedAt()
+                        ? new Date(qr().dataUpdatedAt()).toLocaleTimeString()
+                        : "Never"
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <div style={{ fontSize: "12px", color: "#94a3b8", marginBottom: "6px" }}>
+                Cached Response Payload:
+              </div>
+              <pre class="visage-devtools-json">{() => props.formatJSON(qr().data())}</pre>
+            </div>
+          )}
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/devtools/RpcTab.tsx

@@ -0,0 +1,190 @@
+import { For, Show } from "../dom";
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+import type { RpcRecord } from "./types";
+
+interface RpcTabProps {
+  hub: DevToolsHub;
+  selectedId: WritableSignal<string | null>;
+  searchQuery: WritableSignal<string>;
+  formatJSON: (val: any) => string;
+}
+
+export function RpcTab(props: RpcTabProps) {
+  const filteredRpc = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.rpcLogs();
+    if (!q) return list;
+    return list.filter((r) => r.path.toLowerCase().includes(q) || r.type.toLowerCase().includes(q));
+  };
+
+  const selectedRpc = () => {
+    const id = props.selectedId();
+    if (!id) return null;
+    return props.hub.rpcLogs().find((r) => r.id === id) ?? null;
+  };
+
+  return (
+    <div style={{ display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" }}>
+      {/* RPC Calls List */}
+      <div class="visage-devtools-sidebar">
+        <div class="visage-devtools-search" style={{ display: "flex", gap: "6px" }}>
+          <input
+            class="visage-devtools-input"
+            placeholder="Filter RPC routes..."
+            value={props.searchQuery}
+            onInput={(e: any) => props.searchQuery.set(e.target.value)}
+          />
+          <button
+            type="button"
+            class="visage-devtools-btn"
+            onClick={() => props.hub.clearLogs()}
+            title="Clear RPC Logs"
+          >
+            Clear
+          </button>
+        </div>
+        <div class="visage-devtools-list">
+          <For
+            each={filteredRpc}
+            fallback={
+              <div style={{ padding: "12px", color: "#64748b", fontSize: "12px" }}>
+                No RPC activity recorded yet.
+              </div>
+            }
+          >
+            {(r: RpcRecord) => {
+              const isSelected = () => props.selectedId() === r.id;
+              return (
+                <div
+                  class={() => `visage-devtools-item ${isSelected() ? "selected" : ""}`}
+                  onClick={() => props.selectedId.set(r.id)}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      overflow: "hidden"
+                    }}
+                  >
+                    <span
+                      class="visage-devtools-badge"
+                      style={{
+                        background:
+                          r.type === "mutation"
+                            ? "#c026d3"
+                            : r.type === "subscription"
+                              ? "#7c3aed"
+                              : "#0284c7",
+                        color: "#fff"
+                      }}
+                    >
+                      {r.type.slice(0, 3).toUpperCase()}
+                    </span>
+                    <span
+                      style={{
+                        fontWeight: 500,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      }}
+                    >
+                      {r.path}
+                    </span>
+                  </div>
+                  <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                    <span
+                      style={{
+                        fontSize: "11px",
+                        color:
+                          r.status === "success"
+                            ? "#10b981"
+                            : r.status === "error"
+                              ? "#ef4444"
+                              : "#f59e0b"
+                      }}
+                    >
+                      {r.status}
+                    </span>
+                    {r.duration !== undefined ? (
+                      <span style={{ fontSize: "10px", color: "#64748b" }}>{r.duration}ms</span>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+
+      {/* RPC Detail View */}
+      <div class="visage-devtools-main">
+        <Show
+          when={selectedRpc}
+          fallback={
+            <div
+              style={{ color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" }}
+            >
+              Select an RPC procedure call from the left to inspect full payload, latency, and
+              streaming SSE frames.
+            </div>
+          }
+        >
+          {(r: () => RpcRecord) => (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                }}
+              >
+                <div>
+                  <h3 style={{ margin: 0, fontSize: "16px", color: "#f8fafc" }}>
+                    {() => `${r().type.toUpperCase()}: ${r().path}`}
+                  </h3>
+                  <span style={{ fontSize: "11px", color: "#64748b" }}>
+                    Call ID: {() => r().id}
+                  </span>
+                </div>
+                <span
+                  class="visage-devtools-badge"
+                  style={{ fontSize: "12px", padding: "3px 8px" }}
+                >
+                  {() => (r().duration !== undefined ? `${r().duration}ms` : "Active")}
+                </span>
+              </div>
+
+              <div style={{ marginBottom: "12px" }}>
+                <div style={{ fontSize: "12px", color: "#94a3b8", marginBottom: "4px" }}>
+                  Input Parameters:
+                </div>
+                <pre class="visage-devtools-json">{() => props.formatJSON(r().input)}</pre>
+              </div>
+
+              <Show when={() => r().response !== undefined}>
+                <div style={{ marginBottom: "12px" }}>
+                  <div style={{ fontSize: "12px", color: "#94a3b8", marginBottom: "4px" }}>
+                    Server Response:
+                  </div>
+                  <pre class="visage-devtools-json">{() => props.formatJSON(r().response)}</pre>
+                </div>
+              </Show>
+
+              <Show when={() => (r().events?.length ?? 0) > 0}>
+                <div>
+                  <div style={{ fontSize: "12px", color: "#94a3b8", marginBottom: "4px" }}>
+                    Live SSE Event Stream ({() => r().events?.length ?? 0} frames):
+                  </div>
+                  <pre class="visage-devtools-json">{() => props.formatJSON(r().events)}</pre>
+                </div>
+              </Show>
+            </div>
+          )}
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/devtools/SignalsTab.tsx

@@ -0,0 +1,129 @@
+import { For, Show } from "../dom";
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+import type { SignalRecord } from "./types";
+
+interface SignalsTabProps {
+  hub: DevToolsHub;
+  selectedId: WritableSignal<string | null>;
+  searchQuery: WritableSignal<string>;
+  formatJSON: (val: any) => string;
+}
+
+export function SignalsTab(props: SignalsTabProps) {
+  const filteredSignals = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.signalsList();
+    if (!q) return list;
+    return list.filter((s) => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q));
+  };
+
+  const selectedSignal = () => {
+    const id = props.selectedId();
+    if (!id) return null;
+    return props.hub.signalsList().find((s) => s.id === id) ?? null;
+  };
+
+  return (
+    <div style={{ display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" }}>
+      {/* Left List */}
+      <div class="visage-devtools-sidebar">
+        <div class="visage-devtools-search">
+          <input
+            class="visage-devtools-input"
+            placeholder="Search signals..."
+            value={props.searchQuery}
+            onInput={(e: any) => props.searchQuery.set(e.target.value)}
+          />
+        </div>
+        <div class="visage-devtools-list">
+          <For each={filteredSignals}>
+            {(sig: SignalRecord) => {
+              const isSelected = () => props.selectedId() === sig.id;
+              return (
+                <div
+                  class={() => `visage-devtools-item ${sig.type} ${isSelected() ? "selected" : ""}`}
+                  onClick={() => props.selectedId.set(sig.id)}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                    <span
+                      style={{
+                        fontSize: "9px",
+                        fontWeight: 700,
+                        padding: "1px 4px",
+                        borderRadius: "3px",
+                        background: sig.type === "computed" ? "#3b0764" : "#082f49",
+                        color: sig.type === "computed" ? "#c084fc" : "#38bdf8",
+                        border: `1px solid ${sig.type === "computed" ? "#581c87" : "#0369a1"}`
+                      }}
+                    >
+                      {sig.type === "computed" ? "CMP" : "SIG"}
+                    </span>
+                    <span style={{ fontWeight: 500, color: "#f1f5f9" }}>{sig.name}</span>
+                  </div>
+                  <span class="visage-devtools-badge">v{() => sig.version()}</span>
+                </div>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+
+      {/* Right Details */}
+      <div class="visage-devtools-main">
+        <Show
+          when={selectedSignal}
+          fallback={
+            <div
+              style={{
+                color: "#64748b",
+                textAlign: "center",
+                marginTop: "40px",
+                fontSize: "13px"
+              }}
+            >
+              Select a signal or computed from the left to inspect its live reactive value.
+            </div>
+          }
+        >
+          {(sig: () => SignalRecord) => (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                }}
+              >
+                <div>
+                  <h3 style={{ margin: 0, fontSize: "16px", color: "#f8fafc" }}>
+                    {() => sig().name}
+                  </h3>
+                  <span style={{ fontSize: "11px", color: "#64748b" }}>ID: {() => sig().id}</span>
+                </div>
+                <div style={{ display: "flex", gap: "8px" }}>
+                  <span
+                    class="visage-devtools-badge"
+                    style={{
+                      background: () => (sig().type === "computed" ? "#581c87" : "#0369a1"),
+                      color: "#fff"
+                    }}
+                  >
+                    {() => sig().type.toUpperCase()}
+                  </span>
+                  <span class="visage-devtools-badge">VERSION: {() => sig().version()}</span>
+                </div>
+              </div>
+
+              <div style={{ marginBottom: "12px", fontSize: "12px", color: "#94a3b8" }}>
+                Current Reactive Value:
+              </div>
+              <pre class="visage-devtools-json">{() => props.formatJSON(sig().getValue())}</pre>
+            </div>
+          )}
+        </Show>
+      </div>
+    </div>
+  );
+}