@narumitw/pi-inspect 0.0.0-stage → 0.1.0

package/src/web/panels.css

@@ -0,0 +1,267 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: 5px;
+}
+.tree-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.tree-controls {
+  padding: 0 9px 8px;
+}
+.tree-controls .rt-TextFieldRoot {
+  background: var(--panel-raised);
+  box-shadow: none;
+  border: 1px solid var(--panel-border);
+  font-size: 11px;
+}
+.filter-pills {
+  display: flex;
+  gap: 4px;
+  margin-top: 7px;
+}
+.filter-pills button {
+  flex: 1;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.filter-pills button[aria-pressed="true"] {
+  background: var(--selected-bg);
+  color: var(--blue-11);
+}
+.tree-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 2px 5px;
+}
+.tree-row {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 2px;
+}
+.tree-row .rt-IconButton {
+  width: 18px;
+  height: 22px;
+  flex-shrink: 0;
+  color: var(--muted);
+}
+.tree-spacer {
+  width: 18px;
+  flex-shrink: 0;
+}
+.node {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  padding: 5px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--gray-12);
+  text-align: left;
+}
+.node:hover {
+  background: var(--surface-hover);
+}
+.node[aria-current="true"] {
+  background: var(--selected-bg);
+  box-shadow: inset 2px 0 var(--blue-9);
+}
+.node-copy {
+  min-width: 0;
+  flex: 1;
+  display: block;
+}
+.node-title {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  white-space: nowrap;
+}
+.node-title strong {
+  font-size: 11px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.node-title small {
+  font:
+    10px / 1.4 Consolas,
+    monospace;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+.node-description {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--secondary);
+  font-size: 10px;
+  line-height: 15px;
+}
+.tree-count,
+.nav-pagination {
+  border-top: 1px solid var(--panel-border);
+  padding: 6px;
+  color: var(--muted);
+  text-align: center;
+  font-size: 10px;
+}
+.nav-pagination {
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+}
+.nav-pagination button {
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  font-size: 10px;
+}
+.filter-panel {
+  flex-shrink: 0;
+  padding: 0 9px;
+}
+.filters-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 6px;
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  padding: 8px 0;
+  font-size: 12px;
+}
+.filters-toggle svg {
+  width: 14px;
+}
+.filter-check {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 8px 0;
+  font-size: 11px;
+  color: var(--secondary);
+  cursor: pointer;
+}
+.filter-panel .rt-Flex {
+  padding-bottom: 9px;
+}
+.filter-panel .rt-SelectTrigger {
+  max-width: 135px;
+  font-size: 11px;
+}
+.inspector-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.inspector-identity {
+  padding: 2px 10px 8px;
+}
+.inspector-identity .rt-Heading {
+  font-size: 14px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.inspector-identity .rt-Text {
+  font-size: 11px;
+  line-height: 16px;
+}
+.inspector-tabs {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 8px 8px;
+}
+.inspector-tabs > .rt-TabsList {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--panel-bg);
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+.inspector-tabs .rt-TabsTrigger {
+  padding: 0 7px;
+  height: 31px;
+  font-size: 11px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-transform: capitalize;
+}
+.inspector-tabs .rt-TabsTriggerInner,
+.inspector-tabs .rt-TabsTriggerInnerHidden {
+  padding: 0;
+}
+.inspector-tabs .rt-TabsContent {
+  padding-top: 0;
+}
+.format-toolbar {
+  display: flex;
+  justify-content: end;
+  padding: 3px 0 6px;
+}
+.inspector-metadata {
+  padding: 0 3px 5px;
+}
+.inspector-metadata .metadata > div {
+  border-bottom: 1px solid var(--panel-border);
+}
+.related {
+  border-top: 1px solid var(--panel-border);
+  padding: 5px 0;
+  margin-top: 8px;
+}
+.related > .rt-Button {
+  width: 100%;
+  justify-content: space-between;
+}
+.related button:not(.rt-Button) {
+  display: block;
+  padding: 7px 4px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.inventory-card {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--panel-border);
+  border-radius: 0;
+  box-shadow: none;
+  margin: 6px 0;
+  padding: 9px 2px;
+}
+.inventory-card .rt-Flex {
+  margin: 5px 0;
+}
+.inventory-card .rt-Text {
+  overflow-wrap: anywhere;
+  font-size: 11px;
+}

package/src/web/panes.tsx

@@ -0,0 +1,123 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Dialog, IconButton } from "@radix-ui/themes";
+import { type ReactNode, type RefObject, useEffect, useState } from "react";
+
+export function useNarrow(): boolean {
+  const [width, setWidth] = useState(() => window.innerWidth);
+  useEffect(() => {
+    const changed = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", changed);
+    return () => window.removeEventListener("resize", changed);
+  }, []);
+  return width <= 1100;
+}
+export function PaneDrawer({
+  name,
+  open,
+  change,
+  children,
+  side,
+  trigger,
+}: {
+  name: string;
+  open: boolean;
+  change(open: boolean): void;
+  children: ReactNode;
+  side: string;
+  trigger: RefObject<HTMLButtonElement | null>;
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={change}>
+      <Dialog.Content
+        className={`side-drawer side-drawer-${side}`}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (trigger.current?.isConnected) trigger.current.focus({ preventScroll: true });
+        }}
+      >
+        <div className="drawer-title">
+          <Dialog.Title>{name}</Dialog.Title>
+          <Dialog.Close>
+            <IconButton aria-label={`Close ${name}`} variant="ghost">
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </div>
+        <Dialog.Description className="sr-only">Read-only browser panel. Escape closes this drawer.</Dialog.Description>
+        {children}
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
+export function ResizeHandle({
+  name,
+  value,
+  change,
+  min,
+  max,
+  inverse = false,
+}: {
+  name: string;
+  value: number;
+  change(value: number): void;
+  min: number;
+  max: number;
+  inverse?: boolean;
+}) {
+  const [dragging, setDragging] = useState(false);
+  const [start, setStart] = useState({ x: 0, value: 0 });
+  useEffect(() => {
+    if (!dragging) return;
+    const controller = new AbortController();
+    const move = (event: PointerEvent) =>
+      change(Math.max(min, Math.min(max, start.value + (event.clientX - start.x) * (inverse ? -1 : 1))));
+    const end = () => setDragging(false);
+    window.addEventListener("pointermove", move, { signal: controller.signal });
+    window.addEventListener("pointerup", end, { signal: controller.signal });
+    window.addEventListener("pointercancel", end, { signal: controller.signal });
+    window.addEventListener("blur", end, { signal: controller.signal });
+    window.addEventListener(
+      "keydown",
+      (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          end();
+        }
+      },
+      { signal: controller.signal },
+    );
+    return () => controller.abort();
+  }, [dragging, start, change, min, max, inverse]);
+  return (
+    <hr
+      aria-label={name}
+      aria-orientation="vertical"
+      aria-valuenow={Math.round(value)}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      tabIndex={0}
+      className="pane-resizer"
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        setStart({ x: event.clientX, value });
+        setDragging(true);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          setDragging(false);
+          return;
+        }
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+        event.preventDefault();
+        change(
+          event.key === "Home"
+            ? min
+            : event.key === "End"
+              ? max
+              : Math.max(min, Math.min(max, value + (event.key === "ArrowRight" ? 10 : -10) * (inverse ? -1 : 1))),
+        );
+      }}
+    />
+  );
+}

package/src/web/search.ts

@@ -0,0 +1,16 @@
+// Display-only browser ingestion. Strip complete terminal sequences before bounding the query.
+export function boundedSearch(value: string): string {
+  return (
+    value
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Intentional terminal-control sanitation.
+      .replace(/(?:\x1b[\]^_P]|[\x90\x9d\x9e\x9f])[\s\S]*?(?:\x07|\x1b\\|\x9c|$)/g, "")
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Intentional CSI and escape sanitation.
+      .replace(/(?:\x1b\[|\x9b)[0-?]*[ -/]*[@-~]|\x1b[ -/]*[@-~]/g, "")
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: Search contains no terminal controls.
+      .replace(/[\x00-\x1f\x7f-\x9f]/g, "")
+      .slice(0, 512)
+  );
+}
+export function searchNeedle(value: string): string {
+  return boundedSearch(value).toLowerCase();
+}

package/src/web/style.css

@@ -0,0 +1,332 @@
+@import "./components.css";
+@import "./panels.css";
+@import "./trace.css";
+
+:root,
+.radix-themes {
+  --app-bg: #0b1220;
+  --panel-bg: #101b2b;
+  --panel-raised: #152338;
+  --surface-hover: #1b2d45;
+  --panel-border: #27384d;
+  --secondary: #a3b3c8;
+  --muted: #71849d;
+  --code-bg: #0d1725;
+  --selected-bg: #4b91f71f;
+}
+.radix-themes.light {
+  --app-bg: #f3f5f9;
+  --panel-bg: #fff;
+  --panel-raised: #edf2f9;
+  --surface-hover: #e5edf8;
+  --panel-border: #ced7e5;
+  --secondary: #53637a;
+  --muted: #687992;
+  --code-bg: #f7f9fd;
+  --selected-bg: #4b91f71a;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--app-bg);
+}
+button,
+input {
+  font: inherit;
+}
+button {
+  cursor: pointer;
+}
+button:disabled {
+  cursor: default;
+}
+.inspector-app {
+  height: 100dvh;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--app-bg);
+  color: var(--gray-12);
+  font:
+    13px / 1.4 "Segoe UI",
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+}
+.app-header {
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--panel-border);
+}
+.brand {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.brand-logo {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  background: #2558a7;
+  color: white;
+  font:
+    bold 25px Georgia,
+    serif;
+}
+.brand .rt-Heading {
+  font-size: 17px;
+}
+.header-context {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 14px;
+  color: var(--secondary);
+  font-size: 11px;
+}
+.header-context span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.header-context strong {
+  font:
+    11px / 1.4 Consolas,
+    monospace;
+  color: var(--gray-12);
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-left: auto;
+}
+.header-actions .rt-IconButton {
+  width: 27px;
+  height: 27px;
+  color: var(--secondary);
+}
+.app-notices {
+  padding: 5px 8px;
+  flex-shrink: 0;
+}
+.app-notices .rt-CalloutRoot {
+  padding: 6px 10px;
+  font-size: 11px;
+}
+.app-grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 8px;
+  gap: 3px;
+}
+.side-slot {
+  min-width: 0;
+  min-height: 0;
+  grid-row: 1;
+  height: 100%;
+}
+.nav-slot {
+  grid-column: 1;
+}
+.inspector-slot {
+  grid-column: 5;
+}
+.side-slot[hidden] {
+  display: none;
+}
+.pane-resizer {
+  margin: 0;
+  border: 0;
+  min-width: 0;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  touch-action: none;
+  grid-row: 1;
+}
+.pane-resizer[aria-label="Resize navigator"] {
+  grid-column: 2;
+}
+.pane-resizer[aria-label="Resize inspector"] {
+  grid-column: 4;
+}
+.pane-resizer:hover,
+.pane-resizer:focus-visible {
+  background: var(--blue-8);
+}
+.center-column {
+  grid-column: 3;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  gap: 4px;
+}
+.panel {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 5px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 10px;
+  gap: 6px;
+}
+.panel-heading .rt-Heading {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  line-height: 18px;
+}
+.panel-heading svg {
+  width: 15px;
+  height: 15px;
+  color: var(--secondary);
+}
+.app-footer {
+  height: 24px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--panel-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
+  font-size: 10px;
+  color: var(--muted);
+}
+button:focus-visible,
+a:focus-visible,
+[role="treeitem"]:focus-visible,
+.pane-resizer:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--blue-9);
+  outline-offset: -2px;
+}
+.tree-scroll,
+.trace-scroll,
+.inspector-tabs,
+.live-drawer-body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--panel-border) transparent;
+}
+.side-drawer {
+  width: min(92vw, 440px);
+  max-width: 92vw;
+  height: calc(100dvh - 24px);
+  max-height: calc(100dvh - 24px);
+  margin: 12px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--panel-bg);
+}
+.side-drawer-left {
+  margin-right: auto;
+}
+.side-drawer-right {
+  margin-left: auto;
+  width: min(94vw, 540px);
+}
+.side-drawer .inspector-panel > .panel-heading {
+  display: none;
+}
+.side-drawer .sidebar,
+.side-drawer .inspector-panel {
+  flex: 1;
+  min-height: 0;
+}
+.drawer-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+.drawer-title .rt-DialogTitle {
+  margin: 0;
+  font-size: 16px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.narrow-layout {
+  display: flex;
+}
+.narrow-layout .center-column {
+  flex: 1;
+  width: 100%;
+}
+@media (max-width: 1100px) {
+  .header-context {
+    display: none;
+  }
+}
+@media (max-width: 680px) {
+  .app-header {
+    gap: 6px;
+    padding: 0 8px;
+  }
+  .brand {
+    gap: 5px;
+  }
+  .brand .rt-Heading {
+    font-size: 14px;
+  }
+  .brand-logo {
+    width: 24px;
+    height: 24px;
+    font-size: 22px;
+  }
+  .header-actions {
+    gap: 4px;
+  }
+  .header-actions .rt-Badge:last-of-type {
+    display: none;
+  }
+  .app-grid {
+    padding: 5px;
+  }
+  .app-footer span:last-child {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none;
+    transition: none;
+    scroll-behavior: auto;
+  }
+}