@kopai/ui 0.0.4 → 0.1.0

package/src/components/observability/RawDataTable/index.tsx

@@ -0,0 +1,131 @@
+/**
+ * RawDataTable - Display arbitrary tabular data with dynamic columns.
+ * Accepts RawTableData directly (unchanged from source).
+ */
+
+import type { RawTableData } from "../types.js";
+
+export interface RawDataTableProps {
+  data: RawTableData;
+  maxRows?: number;
+  isLoading?: boolean;
+  error?: Error;
+  className?: string;
+}
+
+const SCALE_K = 1e3;
+const SCALE_M = 1e6;
+const SCALE_G = 1e9;
+
+function isNumericType(type: string | undefined): boolean {
+  if (!type) return false;
+  return ["Int", "UInt", "Float", "Decimal"].some((t) => type.includes(t));
+}
+
+function formatNumber(value: number): string {
+  if (Math.abs(value) >= SCALE_G) return `${(value / SCALE_G).toFixed(2)}G`;
+  if (Math.abs(value) >= SCALE_M) return `${(value / SCALE_M).toFixed(2)}M`;
+  if (Math.abs(value) >= SCALE_K) return `${(value / SCALE_K).toFixed(2)}K`;
+  if (Number.isInteger(value)) return value.toLocaleString();
+  return value.toFixed(2);
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) return "-";
+  if (typeof value === "number") return formatNumber(value);
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+export function RawDataTable({
+  data,
+  maxRows = 50,
+  isLoading = false,
+  error,
+  className = "",
+}: RawDataTableProps) {
+  if (isLoading) {
+    return (
+      <div className={`bg-background rounded-lg p-4 ${className}`}>
+        <div className="animate-pulse" data-testid="raw-data-table-loading">
+          <div className="h-10 bg-muted rounded mb-2" />
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="h-12 bg-muted/50 rounded mb-1" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        className={`bg-background rounded-lg p-4 border border-destructive ${className}`}
+        data-testid="raw-data-table-error"
+      >
+        <p className="text-destructive">Error: {error.message}</p>
+      </div>
+    );
+  }
+
+  const { columns, types, rows } = data;
+
+  if (rows.length === 0) {
+    return (
+      <div
+        className={`bg-background rounded-lg p-4 border border-border ${className}`}
+        data-testid="raw-data-table-empty"
+      >
+        <p className="text-muted-foreground text-center py-4">
+          No data available
+        </p>
+      </div>
+    );
+  }
+
+  const isTruncated = rows.length > maxRows;
+  const displayRows = rows.slice(0, maxRows);
+
+  return (
+    <div
+      className={`bg-background rounded-lg overflow-hidden border border-border ${className}`}
+      data-testid="raw-data-table"
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted text-muted-foreground text-left">
+              {columns.map((col, colIdx) => (
+                <th
+                  key={colIdx}
+                  className={`px-4 py-3 font-medium whitespace-nowrap ${isNumericType(types[colIdx]) ? "text-right" : "text-left"}`}
+                >
+                  {col}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {displayRows.map((row, rowIdx) => (
+              <tr key={rowIdx} className="hover:bg-muted/50 transition-colors">
+                {columns.map((_, colIdx) => (
+                  <td
+                    key={colIdx}
+                    className={`px-4 py-3 whitespace-nowrap ${isNumericType(types[colIdx]) ? "text-right text-foreground font-medium" : "text-foreground"}`}
+                  >
+                    {formatCell(row[colIdx])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {isTruncated && (
+        <div className="px-4 py-2 bg-muted text-muted-foreground text-xs text-center">
+          Showing first {maxRows} of {rows.length} rows
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/observability/ServiceList/ServiceList.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ServiceList } from "./index.js";
+import { mockServices } from "../__fixtures__/services.js";
+
+const meta: Meta<typeof ServiceList> = {
+  title: "Observability/ServiceList",
+  component: ServiceList,
+};
+export default meta;
+type Story = StoryObj<typeof ServiceList>;
+
+export const Default: Story = { args: { services: mockServices } };
+export const Loading: Story = { args: { services: [], isLoading: true } };
+export const Error: Story = {
+  args: {
+    services: [],
+    error: new globalThis.Error("Failed to fetch services"),
+  },
+};
+export const Empty: Story = { args: { services: [] } };

package/src/components/observability/ServiceList/index.tsx

@@ -0,0 +1,60 @@
+import { getServiceColor } from "../utils/colors.js";
+
+export interface ServiceEntry {
+  name: string;
+}
+
+export interface ServiceListProps {
+  services: ServiceEntry[];
+  isLoading?: boolean;
+  error?: Error;
+  onSelect: (name: string) => void;
+}
+
+export function ServiceList({
+  services,
+  isLoading,
+  error,
+  onSelect,
+}: ServiceListProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-muted-foreground py-8">
+        <div className="w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
+        Loading services...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-red-400 py-4">
+        Error loading services: {error.message}
+      </div>
+    );
+  }
+
+  if (services.length === 0) {
+    return <div className="text-muted-foreground py-8">No services found</div>;
+  }
+
+  return (
+    <div className="space-y-1">
+      {services.map((svc) => (
+        <button
+          key={svc.name}
+          onClick={() => onSelect(svc.name)}
+          className="w-full text-left px-4 py-3 rounded-lg border border-border hover:border-foreground/30 hover:bg-muted/50 transition-colors group"
+        >
+          <span className="flex items-center gap-2 font-medium text-foreground">
+            <span
+              className="inline-block w-2.5 h-2.5 rounded-full shrink-0"
+              style={{ backgroundColor: getServiceColor(svc.name) }}
+            />
+            {svc.name}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/observability/ServiceList/shortcuts.ts

@@ -0,0 +1,6 @@
+import type { ShortcutGroup } from "../../KeyboardShortcuts/types.js";
+
+export const SERVICES_SHORTCUTS: ShortcutGroup = {
+  name: "Services",
+  shortcuts: [{ keys: ["Backspace"], description: "Go back" }],
+};

package/src/components/observability/TabBar/TabBar.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TabBar } from "./index.js";
+
+const meta: Meta<typeof TabBar> = {
+  title: "Observability/TabBar",
+  component: TabBar,
+};
+export default meta;
+type Story = StoryObj<typeof TabBar>;
+
+export const Default: Story = {
+  args: {
+    tabs: [
+      { key: "services", label: "Services" },
+      { key: "logs", label: "Logs" },
+      { key: "metrics", label: "Metrics" },
+    ],
+    active: "services",
+  },
+};
+
+export const ManyTabs: Story = {
+  args: {
+    tabs: [
+      { key: "overview", label: "Overview" },
+      { key: "services", label: "Services" },
+      { key: "logs", label: "Logs" },
+      { key: "traces", label: "Traces" },
+      { key: "metrics", label: "Metrics" },
+      { key: "alerts", label: "Alerts" },
+    ],
+    active: "traces",
+  },
+};

package/src/components/observability/TabBar/index.tsx

@@ -0,0 +1,46 @@
+export interface Tab {
+  key: string;
+  label: string;
+  shortcutKey?: string;
+}
+
+export interface TabBarProps {
+  tabs: Tab[];
+  active: string;
+  onChange: (key: string) => void;
+}
+
+function renderLabel(label: string, shortcutKey?: string) {
+  if (!shortcutKey) return label;
+  const idx = label.toLowerCase().indexOf(shortcutKey.toLowerCase());
+  if (idx === -1) return label;
+  return (
+    <>
+      {label.slice(0, idx)}
+      <span className="underline underline-offset-4">{label[idx]}</span>
+      {label.slice(idx + 1)}
+    </>
+  );
+}
+
+export function TabBar({ tabs, active, onChange }: TabBarProps) {
+  return (
+    <div role="tablist" className="flex border-b border-border mb-6">
+      {tabs.map((t) => (
+        <button
+          key={t.key}
+          role="tab"
+          aria-selected={active === t.key}
+          onClick={() => onChange(t.key)}
+          className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+            active === t.key
+              ? "border-foreground text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {renderLabel(t.label, t.shortcutKey)}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/observability/TraceDetail/TraceDetail.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TraceDetail } from "./index.js";
+import { mockTraceRows, mockErrorTraceRows } from "../__fixtures__/traces.js";
+
+const meta: Meta<typeof TraceDetail> = {
+  title: "Observability/TraceDetail",
+  component: TraceDetail,
+  decorators: [
+    (Story) => (
+      <div style={{ height: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof TraceDetail>;
+
+export const Default: Story = {
+  args: {
+    service: "api-gateway",
+    traceId: "0af7651916cd43dd8448eb211c80319c",
+    rows: mockTraceRows,
+  },
+};
+
+export const ErrorTrace: Story = {
+  args: {
+    service: "api-gateway",
+    traceId: "1bf8762027de54ee9559fc322d91420d",
+    rows: mockErrorTraceRows,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    service: "api-gateway",
+    traceId: "0af7651916cd43dd8448eb211c80319c",
+    rows: [],
+    isLoading: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    service: "api-gateway",
+    traceId: "0af7651916cd43dd8448eb211c80319c",
+    rows: [],
+    error: new globalThis.Error("Failed to fetch trace"),
+  },
+};

package/src/components/observability/TraceDetail/index.tsx

@@ -0,0 +1,53 @@
+import type { denormalizedSignals } from "@kopai/core";
+import { TraceTimeline } from "../TraceTimeline/index.js";
+import type { SpanNode } from "../types.js";
+
+type OtelTracesRow = denormalizedSignals.OtelTracesRow;
+
+export interface TraceDetailProps {
+  service: string;
+  traceId: string;
+  rows: OtelTracesRow[];
+  isLoading?: boolean;
+  error?: Error;
+  selectedSpanId?: string;
+  onSpanClick?: (span: SpanNode) => void;
+  onBack: () => void;
+}
+
+export function TraceDetail({
+  service,
+  traceId,
+  rows,
+  isLoading,
+  error,
+  selectedSpanId,
+  onSpanClick,
+  onBack,
+}: TraceDetailProps) {
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-1.5 text-sm text-muted-foreground mb-4">
+        <button
+          onClick={onBack}
+          className="hover:text-foreground transition-colors"
+        >
+          Services / {service}
+        </button>
+        <span>/</span>
+        <span className="text-foreground font-mono text-xs">
+          {traceId.slice(0, 16)}...
+        </span>
+      </div>
+
+      <TraceTimeline
+        rows={rows}
+        isLoading={isLoading}
+        error={error}
+        selectedSpanId={selectedSpanId}
+        onSpanClick={onSpanClick}
+      />
+    </div>
+  );
+}

package/src/components/observability/TraceSearch/TraceSearch.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TraceSearch } from "./index.js";
+import { mockTraceSummaries } from "../__fixtures__/trace-summaries.js";
+
+const meta: Meta<typeof TraceSearch> = {
+  title: "Observability/TraceSearch",
+  component: TraceSearch,
+};
+export default meta;
+type Story = StoryObj<typeof TraceSearch>;
+
+export const Default: Story = {
+  args: {
+    service: "api-gateway",
+    traces: mockTraceSummaries,
+    operations: [
+      "GET /api/users",
+      "POST /api/users",
+      "GET /api/products",
+      "PUT /api/users/42",
+      "DELETE /api/sessions",
+    ],
+  },
+};
+
+export const Loading: Story = {
+  args: { service: "api-gateway", traces: [], isLoading: true },
+};
+
+export const Error: Story = {
+  args: {
+    service: "api-gateway",
+    traces: [],
+    error: new globalThis.Error("Failed to fetch traces"),
+  },
+};
+
+export const Empty: Story = {
+  args: { service: "api-gateway", traces: [] },
+};
+
+export const WithFilters: Story = {
+  args: {
+    service: "api-gateway",
+    traces: mockTraceSummaries,
+    operations: ["GET /api/users", "POST /api/users"],
+    onSearch: (filters) => console.log("Search:", filters),
+  },
+};