@narumitw/pi-inspect 0.0.0-stage → 0.2.0

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 filters"] {
+  grid-column: 2;
+}
+.pane-resizer[aria-label="Resize details"] {
+  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;
+  }
+}

package/src/web/styles.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/web/timeline.tsx

@@ -0,0 +1,33 @@
+import type { Call } from "../model.js";
+import { type Axis, interval, position, timestamp } from "./timing.js";
+
+export function TimelineMark({ range, logTime, call }: { range?: Axis; logTime?: string; call?: Call }) {
+  if (!range) return <span className="timing-unavailable">—</span>;
+  const span = call ? interval(call) : undefined;
+  const point = logTime === undefined ? (call?.observedStartedAt ?? call?.observedEndedAt) : timestamp(logTime);
+  if (span && span.end > span.start)
+    return (
+      <span
+        className="timeline-track"
+        title={`Observed callback interval: ${new Date(span.start).toISOString()} → ${new Date(span.end).toISOString()} (${span.end - span.start}ms). Not provider transport timing.`}
+      >
+        <span
+          className="timeline-span"
+          style={{
+            left: `${position(span.start, range)}%`,
+            width: `${position(span.end, range) - position(span.start, range)}%`,
+          }}
+        />
+      </span>
+    );
+  return point === undefined ? (
+    <span className="timing-unavailable">—</span>
+  ) : (
+    <span
+      className="timeline-track"
+      title={`${logTime === undefined ? "Observed lifecycle point" : "Session log timestamp"}: ${new Date(point).toISOString()}`}
+    >
+      <span className="timeline-point" style={{ left: `${position(point, range)}%` }} />
+    </span>
+  );
+}

package/src/web/timing.ts

@@ -0,0 +1,26 @@
+import type { Call, EntrySummary } from "../model.js";
+export interface Axis {
+  start: number;
+  end: number;
+}
+export function timestamp(value: string): number | undefined {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+export function axis(entries: EntrySummary[], calls: Call[]): Axis | undefined {
+  const values = [
+    ...entries.map((entry) => timestamp(entry.timestamp)),
+    ...calls.flatMap((call) => [call.observedStartedAt, call.observedEndedAt]),
+  ].filter((value): value is number => value !== undefined && Number.isFinite(value));
+  return values.length ? { start: Math.min(...values), end: Math.max(...values) } : undefined;
+}
+export function position(value: number, range: Axis): number {
+  return range.end === range.start ? 50 : ((value - range.start) / (range.end - range.start)) * 100;
+}
+export function interval(call: Call): { start: number; end: number } | undefined {
+  const start = call.observedStartedAt;
+  const end = call.observedEndedAt;
+  return start !== undefined && end !== undefined && Number.isFinite(start) && Number.isFinite(end) && end >= start
+    ? { start, end }
+    : undefined;
+}