Merge pull request #5 from muke1908/copilot/create-namespace-based-on-origin

muke1908 · web-flow · commit cf5113ade5aa · 2026-03-26T10:51:27.000+01:00
feat: origin-based namespaces + 10s bucket grid view
diff --git a/packages/streamer/server/index.js b/packages/streamer/server/index.js
@@ -23,13 +23,28 @@ const MIME_TYPES = {
 };
 
 // Namespace management
-// Map from namespace UUID → Set of viewer WebSocket connections
+// Map from namespace → Set of viewer WebSocket connections
 const namespaceViewers = new Map();
-// Set of namespace UUIDs that currently have an active logger connection
-const activeLoggers = new Set();
-
-// UUID pattern used to identify viewer connections by URL path
-const UUID_PATH_RE = /^\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\/?$/i;
+// Map from namespace → count of active logger connections
+const activeLoggerCounts = new Map();
+
+// Pattern used to identify viewer connections by URL path.
+// Matches namespace slugs that are either UUIDs or origin hostnames (e.g. www.domain1.com).
+const NAMESPACE_PATH_RE = /^\/([a-zA-Z0-9](?:[a-zA-Z0-9._-]*[a-zA-Z0-9])?)\/?$/;
+
+// Valid hostname characters (no colons so IPv6 addresses fall back to UUID).
+const VALID_NAMESPACE_RE = /^[a-zA-Z0-9](?:[a-zA-Z0-9._-]*[a-zA-Z0-9])?$/;
+
+/** Derive a namespace slug from the WebSocket request's Origin header. */
+function getNamespaceFromOrigin(originHeader) {
+  if (!originHeader) return null;
+  try {
+    const { hostname } = new URL(originHeader);
+    return hostname && VALID_NAMESPACE_RE.test(hostname) ? hostname : null;
+  } catch {
+    return null;
+  }
+}
 
 // HTTP server — serves the built React client from dist/
 const server = http.createServer((req, res) => {
@@ -63,7 +78,7 @@ const server = http.createServer((req, res) => {
   // Return the list of namespaces that currently have an active logger
   if (reqUrl === '/api/namespaces') {
     res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify([...activeLoggers]));
+    res.end(JSON.stringify([...activeLoggerCounts.keys()]));
     return;
   }
 
@@ -108,11 +123,11 @@ server.listen(PORT, () => {
 
 wss.on('connection', (ws, req) => {
   const urlPath = (req.url ?? '/').split('?')[0];
-  const uuidMatch = urlPath.match(UUID_PATH_RE);
+  const namespaceMatch = urlPath.match(NAMESPACE_PATH_RE);
 
-  if (uuidMatch) {
+  if (namespaceMatch) {
     // ── Viewer connection ─────────────────────────────────────────────────
-    const namespace = uuidMatch[1].toLowerCase();
+    const namespace = namespaceMatch[1].toLowerCase();
     if (!namespaceViewers.has(namespace)) {
       namespaceViewers.set(namespace, new Set());
     }
@@ -130,7 +145,7 @@ wss.on('connection', (ws, req) => {
       const viewers = namespaceViewers.get(namespace);
       if (viewers) {
         viewers.delete(ws);
-        if (viewers.size === 0 && !activeLoggers.has(namespace)) {
+        if (viewers.size === 0 && !activeLoggerCounts.has(namespace)) {
           namespaceViewers.delete(namespace);
         }
       }
@@ -142,9 +157,16 @@ wss.on('connection', (ws, req) => {
     });
   } else {
     // ── Logger connection ─────────────────────────────────────────────────
-    const namespace = crypto.randomUUID();
-    activeLoggers.add(namespace);
-    namespaceViewers.set(namespace, new Set());
+    // Derive namespace from the Origin header so that all connections from
+    // the same origin share one namespace.  Fall back to a UUID when the
+    // header is absent (e.g. Node.js clients) or contains an unusable value.
+    const originNamespace = getNamespaceFromOrigin(req.headers.origin);
+    const namespace = originNamespace ?? crypto.randomUUID();
+
+    activeLoggerCounts.set(namespace, (activeLoggerCounts.get(namespace) ?? 0) + 1);
+    if (!namespaceViewers.has(namespace)) {
+      namespaceViewers.set(namespace, new Set());
+    }
     console.log(`Logger connected    | namespace: ${namespace}`);
     console.log(`View logs at:         http://localhost:${PORT}/${namespace}`);
 
@@ -175,10 +197,15 @@ wss.on('connection', (ws, req) => {
     });
 
     ws.on('close', () => {
-      activeLoggers.delete(namespace);
-      const viewers = namespaceViewers.get(namespace);
-      if (viewers && viewers.size === 0) {
-        namespaceViewers.delete(namespace);
+      const count = (activeLoggerCounts.get(namespace) ?? 1) - 1;
+      if (count <= 0) {
+        activeLoggerCounts.delete(namespace);
+        const viewers = namespaceViewers.get(namespace);
+        if (viewers && viewers.size === 0) {
+          namespaceViewers.delete(namespace);
+        }
+      } else {
+        activeLoggerCounts.set(namespace, count);
       }
       console.log(`Logger disconnected | namespace: ${namespace}`);
     });
diff --git a/packages/streamer/src/App.tsx b/packages/streamer/src/App.tsx
@@ -3,21 +3,26 @@ import { useWebSocket } from './hooks/useWebSocket';
 import { Header } from './components/Header';
 import { FilterBar } from './components/FilterBar';
 import { LogViewer } from './components/LogViewer';
+import { BucketViewer } from './components/BucketViewer';
 import { LLMPanel } from './components/LLMPanel';
 import { NamespaceLanding } from './components/NamespaceLanding';
 import type { FilterState, LogLevel } from './types';
 
 const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-const UUID_PATH_RE = /^\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\/?$/i;
+// Accept both UUID-style and origin-hostname-style namespaces (e.g. www.domain1.com)
+const NAMESPACE_PATH_RE = /^\/([a-zA-Z0-9][a-zA-Z0-9._-]+)\/?$/i;
 
 function getNamespaceFromPath(): string | null {
-  const match = window.location.pathname.match(UUID_PATH_RE);
+  const match = window.location.pathname.match(NAMESPACE_PATH_RE);
   return match ? match[1].toLowerCase() : null;
 }
 
+type ViewMode = 'list' | 'bucket';
+
 function LogConsole({ wsUrl }: { wsUrl: string }) {
   const { logs, status, isPaused, togglePause, clearLogs } = useWebSocket(wsUrl);
   const [llmPanelOpen, setLlmPanelOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>('list');
   const [filter, setFilter] = useState<FilterState>({
     levels: new Set<LogLevel>(['log', 'info', 'warn', 'error', 'debug']),
     searchText: '',
@@ -46,12 +51,22 @@ function LogConsole({ wsUrl }: { wsUrl: string }) {
         onExportLogs={handleExportLogs}
         onToggleLLMPanel={() => setLlmPanelOpen(!llmPanelOpen)}
         llmPanelOpen={llmPanelOpen}
+        viewMode={viewMode}
+        onToggleViewMode={() => setViewMode(v => v === 'list' ? 'bucket' : 'list')}
       />
 
       <FilterBar filter={filter} onFilterChange={setFilter} />
 
       <div className="flex-1 flex overflow-hidden relative">
-        <LogViewer logs={logs} filter={filter} />
+        {viewMode === 'list' ? (
+          <LogViewer logs={logs} filter={filter} />
+        ) : (
+          <BucketViewer
+            logs={logs}
+            searchText={filter.searchText}
+            caseSensitive={filter.caseSensitive}
+          />
+        )}
         <LLMPanel
           logs={logs}
           isOpen={llmPanelOpen}
diff --git a/packages/streamer/src/components/BucketViewer.tsx b/packages/streamer/src/components/BucketViewer.tsx
@@ -0,0 +1,167 @@
+import { useMemo, useRef, useEffect } from 'react';
+import type { LogMessage } from '../types';
+
+interface BucketViewerProps {
+  logs: LogMessage[];
+  searchText: string;
+  caseSensitive: boolean;
+}
+
+const BUCKET_SIZE_MS = 10_000; // 10-second buckets
+
+const BUCKET_LEVELS = ['error', 'debug', 'info', 'warn'] as const;
+type BucketLevel = (typeof BUCKET_LEVELS)[number];
+
+interface BucketData {
+  bucketStart: number;
+  error: LogMessage[];
+  debug: LogMessage[];
+  info: LogMessage[];
+  warn: LogMessage[];
+}
+
+const levelTextColors: Record<BucketLevel, string> = {
+  error: 'text-red-400',
+  debug: 'text-purple-400',
+  info: 'text-blue-400',
+  warn: 'text-yellow-400',
+};
+
+const levelHeaderColors: Record<BucketLevel, string> = {
+  error: 'bg-red-950 text-red-300 border-red-800',
+  debug: 'bg-purple-950 text-purple-300 border-purple-800',
+  info: 'bg-blue-950 text-blue-300 border-blue-800',
+  warn: 'bg-yellow-950 text-yellow-300 border-yellow-800',
+};
+
+function formatArgs(args: any[]): string {
+  return args
+    .map(arg => {
+      if (typeof arg === 'object' && arg !== null) {
+        try {
+          return JSON.stringify(arg);
+        } catch {
+          return String(arg);
+        }
+      }
+      return String(arg);
+    })
+    .join(' ');
+}
+
+function formatBucketTime(bucketStart: number): string {
+  const fmt = (ts: number) =>
+    new Date(ts).toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  return `${fmt(bucketStart)} – ${fmt(bucketStart + BUCKET_SIZE_MS)}`;
+}
+
+export function BucketViewer({ logs, searchText, caseSensitive }: BucketViewerProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const buckets = useMemo<BucketData[]>(() => {
+    const map = new Map<number, BucketData>();
+
+    for (const log of logs) {
+      if (!(BUCKET_LEVELS as readonly string[]).includes(log.type)) continue;
+
+      if (searchText) {
+        const msg = formatArgs(log.args);
+        const haystack = caseSensitive ? msg : msg.toLowerCase();
+        const needle = caseSensitive ? searchText : searchText.toLowerCase();
+        if (!haystack.includes(needle)) continue;
+      }
+
+      const key = Math.floor(log.timestamp / BUCKET_SIZE_MS) * BUCKET_SIZE_MS;
+      if (!map.has(key)) {
+        map.set(key, { bucketStart: key, error: [], debug: [], info: [], warn: [] });
+      }
+      (map.get(key)![log.type as BucketLevel] as LogMessage[]).push(log);
+    }
+
+    return Array.from(map.values()).sort((a, b) => a.bucketStart - b.bucketStart);
+  }, [logs, searchText, caseSensitive]);
+
+  // Auto-scroll to the latest bucket
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [buckets.length]);
+
+  if (buckets.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-[#0d1117] text-gray-500">
+        <div className="text-center">
+          <p className="text-lg mb-2">No logs to display</p>
+          <p className="text-sm">Waiting for log messages…</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-auto bg-[#0d1117] min-h-0">
+      <table className="w-full border-collapse text-sm table-fixed">
+        <colgroup>
+          <col className="w-36" />
+          <col />
+          <col />
+          <col />
+          <col />
+        </colgroup>
+        <thead className="sticky top-0 z-10">
+          <tr>
+            <th className="px-3 py-2 text-left text-gray-400 font-medium bg-[#161b22] border-b border-r border-gray-700">
+              Time Bucket
+            </th>
+            {BUCKET_LEVELS.map(level => (
+              <th
+                key={level}
+                className={`px-3 py-2 text-left font-semibold border-b border-r uppercase tracking-wide ${levelHeaderColors[level]}`}
+              >
+                {level}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {buckets.map((bucket, i) => (
+            <tr
+              key={bucket.bucketStart}
+              className={i % 2 === 0 ? 'bg-[#0d1117]' : 'bg-[#111820]'}
+            >
+              <td className="px-3 py-2 text-gray-500 font-mono text-xs align-top border-b border-r border-gray-800 whitespace-nowrap">
+                {formatBucketTime(bucket.bucketStart)}
+              </td>
+              {BUCKET_LEVELS.map(level => (
+                <td
+                  key={level}
+                  className="px-3 py-2 align-top border-b border-r border-gray-800"
+                >
+                  {bucket[level].length === 0 ? (
+                    <span className="text-gray-700 text-xs italic">n/a</span>
+                  ) : (
+                    <div className="space-y-1">
+                      {bucket[level].map(log => (
+                        <div
+                          key={log.id}
+                          className={`font-mono text-xs break-words ${levelTextColors[level]}`}
+                        >
+                          {formatArgs(log.args)}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div ref={bottomRef} />
+    </div>
+  );
+}
diff --git a/packages/streamer/src/components/Header.tsx b/packages/streamer/src/components/Header.tsx
@@ -9,6 +9,8 @@ interface HeaderProps {
   onExportLogs: () => void;
   onToggleLLMPanel: () => void;
   llmPanelOpen: boolean;
+  viewMode: 'list' | 'bucket';
+  onToggleViewMode: () => void;
 }
 
 export function Header({
@@ -19,6 +21,8 @@ export function Header({
   onExportLogs,
   onToggleLLMPanel,
   llmPanelOpen,
+  viewMode,
+  onToggleViewMode,
 }: HeaderProps) {
   return (
     <header className="bg-[#161b22] border-b border-gray-700 px-6 py-4">
@@ -31,6 +35,18 @@ export function Header({
         </div>
 
         <div className="flex items-center gap-3">
+          <button
+            onClick={onToggleViewMode}
+            className={`px-4 py-2 rounded-md font-medium transition-colors ${
+              viewMode === 'bucket'
+                ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                : 'bg-gray-700 hover:bg-gray-600 text-gray-200'
+            }`}
+            title={viewMode === 'bucket' ? 'Switch to list view' : 'Switch to bucket view'}
+          >
+            {viewMode === 'bucket' ? '☰ List' : '⊞ Bucket'}
+          </button>
+
           <button
             onClick={onTogglePause}
             className={`px-4 py-2 rounded-md font-medium transition-colors ${
