add stardust streaming

src/index.tsx

···
   () => (
     <Router root={Layout}>
       <Route path="/" component={Home} />
-      <Route path={["/jetstream", "/firehose"]} component={StreamView} />
+      <Route path={["/jetstream", "/firehose", "/spacedust"]} component={StreamView} />
       <Route path="/labels" component={LabelView} />
       <Route path="/car" component={CarView} />
       <Route path="/car/explore" component={ExploreToolView} />

src/views/stream/config.ts

···
+import { localDateFromTimestamp } from "../../utils/date";
+
+export type StreamType = "jetstream" | "firehose" | "spacedust";
+
+export type FormField = {
+  name: string;
+  label: string;
+  type: "text" | "textarea" | "checkbox";
+  placeholder?: string;
+  searchParam: string;
+};
+
+export type RecordInfo = {
+  type: string;
+  did?: string;
+  collection?: string;
+  rkey?: string;
+  action?: string;
+  time?: string;
+};
+
+export type StreamConfig = {
+  label: string;
+  icon: string;
+  defaultInstance: string;
+  fields: FormField[];
+  useFirehoseLib: boolean;
+  buildUrl: (instance: string, formData: FormData) => string;
+  parseRecord: (record: any) => RecordInfo;
+  showEventTypes: boolean;
+  collectionsLabel: string;
+};
+
+export const STREAM_CONFIGS: Record<StreamType, StreamConfig> = {
+  jetstream: {
+    label: "Jetstream",
+    icon: "lucide--radio-tower",
+    defaultInstance: "wss://jetstream1.us-east.bsky.network/subscribe",
+    useFirehoseLib: false,
+    showEventTypes: true,
+    collectionsLabel: "Top Collections",
+    fields: [
+      {
+        name: "collections",
+        label: "Collections",
+        type: "textarea",
+        placeholder: "Comma-separated list of collections",
+        searchParam: "collections",
+      },
+      {
+        name: "dids",
+        label: "DIDs",
+        type: "textarea",
+        placeholder: "Comma-separated list of DIDs",
+        searchParam: "dids",
+      },
+      {
+        name: "cursor",
+        label: "Cursor",
+        type: "text",
+        placeholder: "Leave empty for live-tail",
+        searchParam: "cursor",
+      },
+      {
+        name: "allEvents",
+        label: "Show account and identity events",
+        type: "checkbox",
+        searchParam: "allEvents",
+      },
+    ],
+    buildUrl: (instance, formData) => {
+      let url = instance + "?";
+
+      const collections = formData.get("collections")?.toString().split(",");
+      collections?.forEach((c) => {
+        if (c.trim().length) url += `wantedCollections=${c.trim()}&`;
+      });
+
+      const dids = formData.get("dids")?.toString().split(",");
+      dids?.forEach((d) => {
+        if (d.trim().length) url += `wantedDids=${d.trim()}&`;
+      });
+
+      const cursor = formData.get("cursor")?.toString();
+      if (cursor?.length) url += `cursor=${cursor}&`;
+
+      return url.replace(/[&?]$/, "");
+    },
+    parseRecord: (rec) => {
+      const collection = rec.commit?.collection || rec.kind;
+      const rkey = rec.commit?.rkey;
+      const action = rec.commit?.operation;
+      const time = rec.time_us ? localDateFromTimestamp(rec.time_us / 1000) : undefined;
+      return { type: rec.kind, did: rec.did, collection, rkey, action, time };
+    },
+  },
+
+  firehose: {
+    label: "Firehose",
+    icon: "lucide--rss",
+    defaultInstance: "wss://bsky.network",
+    useFirehoseLib: true,
+    showEventTypes: true,
+    collectionsLabel: "Top Collections",
+    fields: [
+      {
+        name: "cursor",
+        label: "Cursor",
+        type: "text",
+        placeholder: "Leave empty for live-tail",
+        searchParam: "cursor",
+      },
+    ],
+    buildUrl: (instance, _formData) => {
+      let url = instance;
+      url = url.replace("/xrpc/com.atproto.sync.subscribeRepos", "");
+      if (!(url.startsWith("wss://") || url.startsWith("ws://"))) {
+        url = "wss://" + url;
+      }
+      return url;
+    },
+    parseRecord: (rec) => {
+      const type = rec.$type?.split("#").pop() || rec.$type;
+      const did = rec.repo ?? rec.did;
+      const pathParts = rec.op?.path?.split("/") || [];
+      const collection = pathParts[0];
+      const rkey = pathParts[1];
+      const time = rec.time ? localDateFromTimestamp(Date.parse(rec.time)) : undefined;
+      return { type, did, collection, rkey, action: rec.op?.action, time };
+    },
+  },
+
+  spacedust: {
+    label: "Spacedust",
+    icon: "lucide--link",
+    defaultInstance: "wss://spacedust.microcosm.blue/subscribe",
+    useFirehoseLib: false,
+    showEventTypes: false,
+    collectionsLabel: "Top Sources",
+    fields: [
+      {
+        name: "sources",
+        label: "Sources",
+        type: "textarea",
+        placeholder: "e.g. app.bsky.graph.follow:subject",
+        searchParam: "sources",
+      },
+      {
+        name: "subjectDids",
+        label: "Subject DIDs",
+        type: "textarea",
+        placeholder: "Comma-separated list of DIDs",
+        searchParam: "subjectDids",
+      },
+      {
+        name: "subjects",
+        label: "Subjects",
+        type: "textarea",
+        placeholder: "Comma-separated list of AT URIs",
+        searchParam: "subjects",
+      },
+      {
+        name: "instant",
+        label: "Instant mode (bypass 21s delay buffer)",
+        type: "checkbox",
+        searchParam: "instant",
+      },
+    ],
+    buildUrl: (instance, formData) => {
+      let url = instance + "?";
+
+      const sources = formData.get("sources")?.toString().split(",");
+      sources?.forEach((s) => {
+        if (s.trim().length) url += `wantedSources=${s.trim()}&`;
+      });
+
+      const subjectDids = formData.get("subjectDids")?.toString().split(",");
+      subjectDids?.forEach((d) => {
+        if (d.trim().length) url += `wantedSubjectDids=${d.trim()}&`;
+      });
+
+      const subjects = formData.get("subjects")?.toString().split(",");
+      subjects?.forEach((s) => {
+        if (s.trim().length) url += `wantedSubjects=${encodeURIComponent(s.trim())}&`;
+      });
+
+      const instant = formData.get("instant")?.toString();
+      if (instant === "on") url += `instant=true&`;
+
+      return url.replace(/[&?]$/, "");
+    },
+    parseRecord: (rec) => {
+      const source = rec.link?.source;
+      const sourceRecord = rec.link?.source_record;
+      const uriParts = sourceRecord?.replace("at://", "").split("/") || [];
+      const did = uriParts[0];
+      const collection = uriParts[1];
+      const rkey = uriParts[2];
+      return {
+        type: rec.kind,
+        did,
+        collection: source || collection,
+        rkey,
+        action: rec.link?.operation,
+        time: undefined,
+      };
+    },
+  },
+};
+
+export const STREAM_TYPES = Object.keys(STREAM_CONFIGS) as StreamType[];
+
+export const getStreamType = (pathname: string): StreamType => {
+  if (pathname === "/firehose") return "firehose";
+  if (pathname === "/spacedust") return "spacedust";
+  return "jetstream";
+};

src/views/stream/index.tsx

···
 import { JSONValue } from "../../components/json";
 import { TextInput } from "../../components/text-input";
 import { addToClipboard } from "../../utils/copy";
-import { localDateFromTimestamp } from "../../utils/date";
+import { getStreamType, STREAM_CONFIGS, STREAM_TYPES, StreamType } from "./config";
 import { StreamStats, StreamStatsPanel } from "./stats";
 
 const LIMIT = 20;
-type Parameter = { name: string; param: string | string[] | undefined };
-
-const StreamRecordItem = (props: { record: any; streamType: "jetstream" | "firehose" }) => {
-  const [expanded, setExpanded] = createSignal(false);
 
-  const getBasicInfo = () => {
-    const rec = props.record;
-    if (props.streamType === "jetstream") {
-      const collection = rec.commit?.collection || rec.kind;
-      const rkey = rec.commit?.rkey;
-      const action = rec.commit?.operation;
-      const time = rec.time_us ? localDateFromTimestamp(rec.time_us / 1000) : undefined;
-      return { type: rec.kind, did: rec.did, collection, rkey, action, time };
-    } else {
-      const type = rec.$type?.split("#").pop() || rec.$type;
-      const did = rec.repo ?? rec.did;
-      const pathParts = rec.op?.path?.split("/") || [];
-      const collection = pathParts[0];
-      const rkey = pathParts[1];
-      const time = rec.time ? localDateFromTimestamp(Date.parse(rec.time)) : undefined;
-      return { type, did, collection, rkey, action: rec.op?.action, time };
-    }
-  };
+const TYPE_COLORS: Record<string, string> = {
+  create: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+  update: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
+  delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+  identity: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
+  account: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
+  sync: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
+};
 
-  const info = getBasicInfo();
+const StreamRecordItem = (props: { record: any; streamType: StreamType }) => {
+  const [expanded, setExpanded] = createSignal(false);
+  const config = () => STREAM_CONFIGS[props.streamType];
+  const info = () => config().parseRecord(props.record);
 
-  const typeColors: Record<string, string> = {
-    create: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
-    update: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
-    delete: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
-    identity: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
-    account: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
-    sync: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
+  const displayType = () => {
+    const i = info();
+    return i.type === "commit" || i.type === "link" ? i.action : i.type;
   };
 
   const copyRecord = (e: MouseEvent) => {
···
             : <span class="iconify lucide--chevron-right"></span>}
           </span>
           <div class="flex min-w-0 flex-1 flex-col gap-0.5">
-            <div class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 sm:gap-x-2">
+            <div class="flex items-center gap-x-1.5 sm:gap-x-2">
               <span
-                class={`rounded px-1.5 py-0.5 text-xs font-medium ${typeColors[info.type === "commit" ? info.action : info.type] || "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300"}`}
+                class={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${TYPE_COLORS[displayType()!] || "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300"}`}
               >
-                {info.type === "commit" ? info.action : info.type}
+                {displayType()}
               </span>
-              <Show when={info.collection && info.collection !== info.type}>
-                <span class="text-neutral-600 dark:text-neutral-300">{info.collection}</span>
+              <Show when={info().collection && info().collection !== info().type}>
+                <span class="min-w-0 truncate text-neutral-600 dark:text-neutral-300">
+                  {info().collection}
+                </span>
               </Show>
-              <Show when={info.rkey}>
-                <span class="text-neutral-400 dark:text-neutral-500">{info.rkey}</span>
+              <Show when={info().rkey}>
+                <span class="shrink-0 text-neutral-400 dark:text-neutral-500">{info().rkey}</span>
               </Show>
             </div>
             <div class="flex flex-col gap-x-2 gap-y-0.5 text-xs text-neutral-500 sm:flex-row sm:items-center dark:text-neutral-400">
-              <Show when={info.did}>
+              <Show when={info().did}>
                 <span class="w-fit" onclick={(e) => e.stopPropagation()}>
-                  <DidHoverCard newTab did={info.did} />
+                  <DidHoverCard newTab did={info().did!} />
                 </span>
               </Show>
-              <Show when={info.time}>
-                <span>{info.time}</span>
+              <Show when={info().time}>
+                <span>{info().time}</span>
               </Show>
             </div>
           </div>
···
       <Show when={expanded()}>
         <div class="ml-6.5">
           <div class="w-full text-xs wrap-anywhere whitespace-pre-wrap md:w-2xl">
-            <JSONValue newTab data={props.record} repo={info.did} hideBlobs />
+            <JSONValue newTab data={props.record} repo={info().did ?? ""} hideBlobs />
           </div>
         </div>
       </Show>
···
   );
 };
 
-const StreamView = () => {
+export const StreamView = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const [parameters, setParameters] = createSignal<Parameter[]>([]);
-  const streamType = useLocation().pathname === "/firehose" ? "firehose" : "jetstream";
+  const streamType = getStreamType(useLocation().pathname);
+  const config = () => STREAM_CONFIGS[streamType];
+
   const [records, setRecords] = createSignal<any[]>([]);
   const [connected, setConnected] = createSignal(false);
   const [paused, setPaused] = createSignal(false);
   const [notice, setNotice] = createSignal("");
+  const [parameters, setParameters] = createSignal<{ name: string; value?: string }[]>([]);
   const [stats, setStats] = createSignal<StreamStats>({
     totalEvents: 0,
     eventsPerSecond: 0,
···
     collections: {},
   });
   const [currentTime, setCurrentTime] = createSignal(Date.now());
+
   let socket: WebSocket;
   let firehose: Firehose;
   let formRef!: HTMLFormElement;
···
   let rafId: number | null = null;
   let statsIntervalId: number | null = null;
   let statsUpdateIntervalId: number | null = null;
-  let lastSecondEventCount = 0;
   let currentSecondEventCount = 0;
-  // Track stats in variables for batching
   let totalEventsCount = 0;
   let eventTypesMap: Record<string, number> = {};
   let collectionsMap: Record<string, number> = {};
 
   const addRecord = (record: any) => {
     currentSecondEventCount++;
+    totalEventsCount++;
 
-    // Track statistics in variables (batched update)
-    totalEventsCount++;
-    const eventType = record.kind || record.$type || "unknown";
+    const rawEventType = record.kind || record.$type || "unknown";
+    const eventType = rawEventType.includes("#") ? rawEventType.split("#").pop() : rawEventType;
     eventTypesMap[eventType] = (eventTypesMap[eventType] || 0) + 1;
+
     if (eventType !== "account" && eventType !== "identity") {
-      const collection = record.commit?.collection || record.op?.path?.split("/")[0] || "unknown";
+      const collection =
+        record.commit?.collection ||
+        record.op?.path?.split("/")[0] ||
+        record.link?.source ||
+        "unknown";
       collectionsMap[collection] = (collectionsMap[collection] || 0) + 1;
     }
 
···
   };
 
   const disconnect = () => {
-    if (streamType === "jetstream") socket?.close();
+    if (!config().useFirehoseLib) socket?.close();
     else firehose?.close();
+
     if (rafId !== null) {
       cancelAnimationFrame(rafId);
       rafId = null;
···
       clearInterval(statsUpdateIntervalId);
       statsUpdateIntervalId = null;
     }
+
     pendingRecords = [];
     totalEventsCount = 0;
     eventTypesMap = {};
     collectionsMap = {};
     setConnected(false);
     setPaused(false);
-    setStats((prev) => ({
-      ...prev,
-      eventsPerSecond: 0,
-    }));
+    setStats((prev) => ({ ...prev, eventsPerSecond: 0 }));
   };
 
-  const togglePause = () => {
-    setPaused(!paused());
-  };
-
-  const connectSocket = async (formData: FormData) => {
+  const connectStream = async (formData: FormData) => {
     setNotice("");
     if (connected()) {
       disconnect();
···
     }
     setRecords([]);
 
-    let url = "";
-    if (streamType === "jetstream") {
-      url =
-        formData.get("instance")?.toString() ?? "wss://jetstream1.us-east.bsky.network/subscribe";
-      url = url.concat("?");
-    } else {
-      url = formData.get("instance")?.toString() ?? "wss://bsky.network";
-      url = url.replace("/xrpc/com.atproto.sync.subscribeRepos", "");
-      if (!(url.startsWith("wss://") || url.startsWith("ws://"))) url = "wss://" + url;
-    }
-
-    const collections = formData.get("collections")?.toString().split(",");
-    collections?.forEach((collection) => {
-      if (collection.length) url = url.concat(`wantedCollections=${collection}&`);
-    });
-
-    const dids = formData.get("dids")?.toString().split(",");
-    dids?.forEach((did) => {
-      if (did.length) url = url.concat(`wantedDids=${did}&`);
-    });
-
-    const cursor = formData.get("cursor")?.toString();
-    if (streamType === "jetstream") {
-      if (cursor?.length) url = url.concat(`cursor=${cursor}`);
-      if (url.endsWith("&")) url = url.slice(0, -1);
-    }
+    const instance = formData.get("instance")?.toString() ?? config().defaultInstance;
+    const url = config().buildUrl(instance, formData);
 
-    setSearchParams({
-      instance: formData.get("instance")?.toString(),
-      collections: formData.get("collections")?.toString(),
-      dids: formData.get("dids")?.toString(),
-      cursor: formData.get("cursor")?.toString(),
-      allEvents: formData.get("allEvents")?.toString(),
+    // Save all form fields to URL params
+    const params: Record<string, string | undefined> = { instance };
+    config().fields.forEach((field) => {
+      params[field.searchParam] = formData.get(field.name)?.toString();
     });
+    setSearchParams(params);
 
+    // Build parameters display
     setParameters([
-      { name: "Instance", param: formData.get("instance")?.toString() },
-      { name: "Collections", param: formData.get("collections")?.toString() },
-      { name: "DIDs", param: formData.get("dids")?.toString() },
-      { name: "Cursor", param: formData.get("cursor")?.toString() },
-      { name: "All Events", param: formData.get("allEvents")?.toString() },
+      { name: "Instance", value: instance },
+      ...config()
+        .fields.filter((f) => f.type !== "checkbox")
+        .map((f) => ({ name: f.label, value: formData.get(f.name)?.toString() })),
+      ...config()
+        .fields.filter((f) => f.type === "checkbox" && formData.get(f.name) === "on")
+        .map((f) => ({ name: f.label, value: "on" })),
     ]);
 
     setConnected(true);
     const now = Date.now();
     setCurrentTime(now);
 
-    // Reset tracking variables
     totalEventsCount = 0;
     eventTypesMap = {};
     collectionsMap = {};
···
       }));
     }, 50);
 
-    // Calculate events/sec every second
     statsIntervalId = window.setInterval(() => {
-      setStats((prev) => ({
-        ...prev,
-        eventsPerSecond: currentSecondEventCount,
-      }));
-      lastSecondEventCount = currentSecondEventCount;
+      setStats((prev) => ({ ...prev, eventsPerSecond: currentSecondEventCount }));
       currentSecondEventCount = 0;
       setCurrentTime(Date.now());
     }, 1000);
-    if (streamType === "jetstream") {
+
+    if (!config().useFirehoseLib) {
       socket = new WebSocket(url);
       socket.addEventListener("message", (event) => {
         const rec = JSON.parse(event.data);
-        if (searchParams.allEvents === "on" || (rec.kind !== "account" && rec.kind !== "identity"))
+        const isFilteredEvent = rec.kind === "account" || rec.kind === "identity";
+        if (!isFilteredEvent || streamType !== "jetstream" || searchParams.allEvents === "on")
           addRecord(rec);
       });
       socket.addEventListener("error", () => {
···
         disconnect();
       });
     } else {
+      const cursor = formData.get("cursor")?.toString();
       firehose = new Firehose({
         relay: url,
         cursor: cursor,
···
       });
       firehose.on("commit", (commit) => {
         for (const op of commit.ops) {
-          const record = {
+          addRecord({
             $type: commit.$type,
             repo: commit.repo,
             seq: commit.seq,
···
             rev: commit.rev,
             since: commit.since,
             op: op,
-          };
-          addRecord(record);
+          });
         }
       });
-      firehose.on("identity", (identity) => {
-        addRecord(identity);
-      });
-      firehose.on("account", (account) => {
-        addRecord(account);
-      });
+      firehose.on("identity", (identity) => addRecord(identity));
+      firehose.on("account", (account) => addRecord(account));
       firehose.on("sync", (sync) => {
-        const event = {
+        addRecord({
           $type: sync.$type,
           did: sync.did,
           rev: sync.rev,
           seq: sync.seq,
           time: sync.time,
-        };
-        addRecord(event);
+        });
       });
       firehose.start();
     }
   };
 
-  onMount(async () => {
-    const formData = new FormData();
-    if (searchParams.instance) formData.append("instance", searchParams.instance.toString());
-    if (searchParams.collections)
-      formData.append("collections", searchParams.collections.toString());
-    if (searchParams.dids) formData.append("dids", searchParams.dids.toString());
-    if (searchParams.cursor) formData.append("cursor", searchParams.cursor.toString());
-    if (searchParams.allEvents) formData.append("allEvents", searchParams.allEvents.toString());
-    if (searchParams.instance) connectSocket(formData);
+  onMount(() => {
+    if (searchParams.instance) {
+      const formData = new FormData();
+      formData.append("instance", searchParams.instance.toString());
+      config().fields.forEach((field) => {
+        const value = searchParams[field.searchParam];
+        if (value) formData.append(field.name, value.toString());
+      });
+      connectStream(formData);
+    }
   });
 
   onCleanup(() => {
     socket?.close();
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-    }
-    if (statsIntervalId !== null) {
-      clearInterval(statsIntervalId);
-    }
-    if (statsUpdateIntervalId !== null) {
-      clearInterval(statsUpdateIntervalId);
-    }
+    firehose?.close();
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    if (statsIntervalId !== null) clearInterval(statsIntervalId);
+    if (statsUpdateIntervalId !== null) clearInterval(statsUpdateIntervalId);
   });
 
   return (
     <>
-      <Title>{streamType === "firehose" ? "Firehose" : "Jetstream"} - PDSls</Title>
+      <Title>{config().label} - PDSls</Title>
       <div class="flex w-full flex-col items-center gap-2">
+        {/* Tab Navigation */}
         <div class="flex gap-4 font-medium">
-          <A
-            class="flex items-center gap-1 border-b-2"
-            inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
-            href="/jetstream"
-          >
-            Jetstream
-          </A>
-          <A
-            class="flex items-center gap-1 border-b-2"
-            inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
-            href="/firehose"
-          >
-            Firehose
-          </A>
+          <For each={STREAM_TYPES}>
+            {(type) => (
+              <A
+                class="flex items-center gap-1 border-b-2"
+                inactiveClass="border-transparent text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600"
+                href={`/${type}`}
+              >
+                {STREAM_CONFIGS[type].label}
+              </A>
+            )}
+          </For>
         </div>
+
+        {/* Connection Form */}
         <Show when={!connected()}>
-          <form ref={formRef} class="flex w-full flex-col gap-1.5 p-2 text-sm">
+          <form ref={formRef} class="flex w-full flex-col gap-2 p-2 text-sm">
             <label class="flex items-center justify-end gap-x-1">
-              <span class="min-w-20">Instance</span>
+              <span class="min-w-21 select-none">Instance</span>
               <TextInput
                 name="instance"
-                value={
-                  searchParams.instance ??
-                  (streamType === "jetstream" ?
-                    "wss://jetstream1.us-east.bsky.network/subscribe"
-                  : "wss://bsky.network")
-                }
-                class="grow"
-              />
-            </label>
-            <Show when={streamType === "jetstream"}>
-              <label class="flex items-center justify-end gap-x-1">
-                <span class="min-w-20">Collections</span>
-                <textarea
-                  name="collections"
-                  spellcheck={false}
-                  placeholder="Comma-separated list of collections"
-                  value={searchParams.collections ?? ""}
-                  class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
-                />
-              </label>
-            </Show>
-            <Show when={streamType === "jetstream"}>
-              <label class="flex items-center justify-end gap-x-1">
-                <span class="min-w-20">DIDs</span>
-                <textarea
-                  name="dids"
-                  spellcheck={false}
-                  placeholder="Comma-separated list of DIDs"
-                  value={searchParams.dids ?? ""}
-                  class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
-                />
-              </label>
-            </Show>
-            <label class="flex items-center justify-end gap-x-1">
-              <span class="min-w-20">Cursor</span>
-              <TextInput
-                name="cursor"
-                placeholder="Leave empty for live-tail"
-                value={searchParams.cursor ?? ""}
+                value={searchParams.instance ?? config().defaultInstance}
                 class="grow"
               />
             </label>
-            <Show when={streamType === "jetstream"}>
-              <div class="flex items-center justify-end gap-x-1">
-                <input
-                  type="checkbox"
-                  name="allEvents"
-                  id="allEvents"
-                  checked={searchParams.allEvents === "on" ? true : false}
-                />
-                <label for="allEvents" class="select-none">
-                  Show account and identity events
+
+            <For each={config().fields}>
+              {(field) => (
+                <label class="flex items-center justify-end gap-x-1">
+                  <Show when={field.type === "checkbox"}>
+                    <input
+                      type="checkbox"
+                      name={field.name}
+                      id={field.name}
+                      checked={searchParams[field.searchParam] === "on"}
+                    />
+                  </Show>
+                  <span class="min-w-21 select-none">{field.label}</span>
+                  <Show when={field.type === "textarea"}>
+                    <textarea
+                      name={field.name}
+                      spellcheck={false}
+                      placeholder={field.placeholder}
+                      value={(searchParams[field.searchParam] as string) ?? ""}
+                      class="dark:bg-dark-100 grow rounded-lg bg-white px-2 py-1 outline-1 outline-neutral-200 focus:outline-[1.5px] focus:outline-neutral-600 dark:outline-neutral-600 dark:focus:outline-neutral-400"
+                    />
+                  </Show>
+                  <Show when={field.type === "text"}>
+                    <TextInput
+                      name={field.name}
+                      placeholder={field.placeholder}
+                      value={(searchParams[field.searchParam] as string) ?? ""}
+                      class="grow"
+                    />
+                  </Show>
                 </label>
-              </div>
-            </Show>
+              )}
+            </For>
+
             <div class="flex justify-end gap-2">
-              <Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button>
+              <Button onClick={() => connectStream(new FormData(formRef))}>Connect</Button>
             </div>
           </form>
         </Show>
+
+        {/* Connected State */}
         <Show when={connected()}>
           <div class="flex w-full flex-col gap-2 p-2">
             <div class="flex flex-col gap-1 text-sm wrap-anywhere">
               <div class="font-semibold">Parameters</div>
               <For each={parameters()}>
                 {(param) => (
-                  <Show when={param.param}>
+                  <Show when={param.value}>
                     <div class="text-sm">
                       <div class="text-xs text-neutral-500 dark:text-neutral-400">{param.name}</div>
-                      <div class="text-neutral-700 dark:text-neutral-300">{param.param}</div>
+                      <div class="text-neutral-700 dark:text-neutral-300">{param.value}</div>
                     </div>
                   </Show>
                 )}
               </For>
             </div>
-            <StreamStatsPanel stats={stats()} currentTime={currentTime()} />
+            <StreamStatsPanel stats={stats()} currentTime={currentTime()} streamType={streamType} />
             <div class="flex justify-end gap-2">
               <button
                 type="button"
                 ontouchstart={(e) => {
                   e.preventDefault();
-                  requestAnimationFrame(() => togglePause());
+                  requestAnimationFrame(() => setPaused(!paused()));
                 }}
-                onclick={togglePause}
+                onclick={() => setPaused(!paused())}
                 class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
               >
                 {paused() ? "Resume" : "Pause"}
···
             </div>
           </div>
         </Show>
+
+        {/* Error Notice */}
         <Show when={notice().length}>
           <div class="text-red-500 dark:text-red-400">{notice()}</div>
         </Show>
+
+        {/* Records List */}
         <Show when={connected() || records().length > 0}>
           <div class="flex min-h-280 w-full flex-col gap-2 font-mono text-xs [overflow-anchor:auto] sm:text-sm">
             <For each={records().toReversed()}>
···
     </>
   );
 };
-
-export { StreamView };

src/views/stream/stats.tsx

···
 import { For, Show } from "solid-js";
+import { STREAM_CONFIGS, StreamType } from "./config";
 
 export type StreamStats = {
   connectedAt?: number;
···
   }
 };
 
-export const StreamStatsPanel = (props: { stats: StreamStats; currentTime: number }) => {
+export const StreamStatsPanel = (props: {
+  stats: StreamStats;
+  currentTime: number;
+  streamType: StreamType;
+}) => {
+  const config = () => STREAM_CONFIGS[props.streamType];
   const uptime = () => (props.stats.connectedAt ? props.currentTime - props.stats.connectedAt : 0);
 
   const topCollections = () =>
···
           </div>
         </div>
 
-        <Show when={topEventTypes().length > 0}>
+        <Show when={topEventTypes().length > 0 && config().showEventTypes}>
           <div class="mt-2">
             <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400">Event Types</div>
             <div class="grid grid-cols-[1fr_5rem_3rem] gap-x-1 gap-y-0.5 font-mono text-xs sm:gap-x-4">
···
 
         <Show when={topCollections().length > 0}>
           <div class="mt-2">
-            <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400">Top Collections</div>
+            <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400">
+              {config().collectionsLabel}
+            </div>
             <div class="grid grid-cols-[1fr_5rem_3rem] gap-x-1 gap-y-0.5 font-mono text-xs sm:gap-x-4">
               <For each={topCollections()}>
                 {([collection, count]) => {
                   const percentage = ((count / props.stats.totalEvents) * 100).toFixed(1);
                   return (
                     <>
-                      <span class="text-neutral-700 dark:text-neutral-300">{collection}</span>
+                      <span class="min-w-0 truncate text-neutral-700 dark:text-neutral-300">
+                        {collection}
+                      </span>
                       <span class="text-right text-neutral-600 tabular-nums dark:text-neutral-400">
                         {count.toLocaleString()}
                       </span>