Add equities tape to UI

apps/web/app/globals.css

@@ -67,6 +67,33 @@ h1 {
   color: #4e3e25;
 }
 
+.summary {
+  display: grid;
+  gap: 8px;
+  padding: 16px 20px;
+  border-radius: 16px;
+  border: 1px solid var(--panel-border);
+  background: #fffdf7;
+  min-width: 220px;
+}
+
+.summary-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.28em;
+  color: #6f5b39;
+}
+
+.summary-value {
+  font-size: 1rem;
+}
+
+.cards {
+  display: grid;
+  gap: 28px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
 .status {
   display: grid;
   gap: 8px;
@@ -77,6 +104,11 @@ h1 {
   min-width: 220px;
 }
 
+.status-compact {
+  padding: 12px 16px;
+  min-width: 180px;
+}
+
 .status-dot {
   width: 12px;
   height: 12px;
@@ -130,17 +162,6 @@ h1 {
   color: #5b4c34;
 }
 
-.badge {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.65rem;
-  padding: 8px 14px;
-  border-radius: 999px;
-  border: 1px solid var(--accent);
-  color: var(--accent);
-  background: rgba(47, 109, 79, 0.08);
-}
-
 .list {
   display: grid;
   gap: 14px;
@@ -172,6 +193,23 @@ h1 {
   color: #5b4c34;
 }
 
+.flag {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: 1px solid rgba(47, 109, 79, 0.4);
+  color: #2f6d4f;
+  background: rgba(47, 109, 79, 0.12);
+}
+
+.flag-muted {
+  border-color: rgba(111, 91, 57, 0.4);
+  color: #6f5b39;
+  background: rgba(111, 91, 57, 0.12);
+}
+
 .time {
   font-size: 0.85rem;
   color: #6f5b39;

apps/web/app/page.tsx

@@ -1,25 +1,33 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { OptionPrint } from "@islandflow/types";
+import type { EquityPrint, OptionPrint } from "@islandflow/types";
 
 const MAX_ITEMS = 60;
 const LOCAL_HOSTS = new Set(["localhost", "127.0.0.1"]);
 
 type WsStatus = "connecting" | "connected" | "disconnected";
 
-type OptionMessage = {
+type MessageType = "option-print" | "equity-print";
-  type: "option-print";
+
-  payload: OptionPrint;
+type StreamMessage<T> = {
+  type: MessageType;
+  payload: T;
 };
 
-const buildWsUrl = (): string => {
+type TapeState<T> = {
+  status: WsStatus;
+  items: T[];
+  lastUpdate: number | null;
+};
+
+const buildWsUrl = (path: string): string => {
   const envBase = process.env.NEXT_PUBLIC_API_URL;
 
   if (envBase) {
     const url = new URL(envBase);
     url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
-    url.pathname = "/ws/options";
+    url.pathname = path;
     url.search = "";
     url.hash = "";
     return url.toString();
@@ -30,7 +38,7 @@ const buildWsUrl = (): string => {
   const isLocal = LOCAL_HOSTS.has(hostname);
   const host = isLocal ? `${hostname}:4000` : window.location.host;
 
-  return `${wsProtocol}://${host}/ws/options`;
+  return `${wsProtocol}://${host}${path}`;
 };
 
 const formatPrice = (price: number): string => {
@@ -45,25 +53,25 @@ const formatTime = (ts: number): string => {
   return new Date(ts).toLocaleTimeString();
 };
 
-export default function HomePage() {
+const statusLabel = (status: WsStatus): string => {
+  switch (status) {
+    case "connected":
+      return "Live";
+    case "connecting":
+      return "Connecting";
+    case "disconnected":
+    default:
+      return "Disconnected";
+  }
+};
+
+const useTape = <T,>(path: string, expectedType: MessageType): TapeState<T> => {
   const [status, setStatus] = useState<WsStatus>("connecting");
-  const [prints, setPrints] = useState<OptionPrint[]>([]);
+  const [items, setItems] = useState<T[]>([]);
   const [lastUpdate, setLastUpdate] = useState<number | null>(null);
   const reconnectRef = useRef<number | null>(null);
   const socketRef = useRef<WebSocket | null>(null);
 
-  const statusLabel = useMemo(() => {
-    switch (status) {
-      case "connected":
-        return "Live";
-      case "connecting":
-        return "Connecting";
-      case "disconnected":
-      default:
-        return "Disconnected";
-    }
-  }, [status]);
-
   useEffect(() => {
     let active = true;
 
@@ -74,7 +82,7 @@ export default function HomePage() {
 
       setStatus("connecting");
 
-      const socket = new WebSocket(buildWsUrl());
+      const socket = new WebSocket(buildWsUrl(path));
       socketRef.current = socket;
 
       socket.onopen = () => {
@@ -90,12 +98,12 @@ export default function HomePage() {
         }
 
         try {
-          const message = JSON.parse(event.data) as OptionMessage;
+          const message = JSON.parse(event.data) as StreamMessage<T>;
-          if (message.type !== "option-print") {
+          if (!message || message.type !== expectedType) {
             return;
           }
 
-          setPrints((prev) => {
+          setItems((prev) => {
             const next = [message.payload, ...prev];
             return next.slice(0, MAX_ITEMS);
           });
@@ -137,7 +145,39 @@ export default function HomePage() {
         socketRef.current.close();
       }
     };
-  }, []);
+  }, [path, expectedType]);
+
+  return { status, items, lastUpdate };
+};
+
+type TapeStatusProps = {
+  status: WsStatus;
+  lastUpdate: number | null;
+};
+
+const TapeStatus = ({ status, lastUpdate }: TapeStatusProps) => {
+  return (
+    <div className={`status status-${status} status-compact`}>
+      <span className="status-dot" />
+      <span>{statusLabel(status)}</span>
+      {lastUpdate ? (
+        <span className="timestamp">Updated {formatTime(lastUpdate)}</span>
+      ) : (
+        <span className="timestamp">Waiting for data</span>
+      )}
+    </div>
+  );
+};
+
+export default function HomePage() {
+  const options = useTape<OptionPrint>("/ws/options", "option-print");
+  const equities = useTape<EquityPrint>("/ws/equities", "equity-print");
+
+  const lastSeen = useMemo(() => {
+    return [options.lastUpdate, equities.lastUpdate]
+      .filter((value): value is number => value !== null)
+      .sort((a, b) => b - a)[0] ?? null;
+  }, [options.lastUpdate, equities.lastUpdate]);
 
   return (
     <main className="dashboard">
@@ -145,51 +185,87 @@ export default function HomePage() {
         <div>
           <p className="eyebrow">Realtime flow workspace</p>
           <h1>Islandflow</h1>
-          <p className="subtitle">Live option prints streaming from /ws/options.</p>
+          <p className="subtitle">
+            Options + equities streaming over WebSocket from the local API gateway.
+          </p>
         </div>
-        <div className={`status status-${status}`}>
+        <div className="summary">
-          <span className="status-dot" />
+          <span className="summary-title">Last update</span>
-          <span>{statusLabel}</span>
+          <span className="summary-value">
-          {lastUpdate ? (
+            {lastSeen ? formatTime(lastSeen) : "Waiting for data"}
-            <span className="timestamp">Updated {formatTime(lastUpdate)}</span>
+          </span>
-          ) : (
-            <span className="timestamp">Waiting for data</span>
-          )}
         </div>
       </header>
 
-      <section className="card">
+      <div className="cards">
-        <div className="card-header">
+        <section className="card">
-          <div>
+          <div className="card-header">
-            <h2>Options Tape</h2>
+            <div>
-            <p className="card-subtitle">Newest prints first (max {MAX_ITEMS}).</p>
+              <h2>Options Tape</h2>
+              <p className="card-subtitle">Newest prints first (max {MAX_ITEMS}).</p>
+            </div>
+            <TapeStatus status={options.status} lastUpdate={options.lastUpdate} />
           </div>
-          <span className="badge">Live</span>
-        </div>
 
-        <div className="list">
+          <div className="list">
-          {prints.length === 0 ? (
+            {options.items.length === 0 ? (
-            <div className="empty">No prints yet. Start ingest-options to populate the tape.</div>
+              <div className="empty">No option prints yet. Start ingest-options.</div>
-          ) : (
+            ) : (
-            prints.map((print) => (
+              options.items.map((print) => (
-              <div className="row" key={`${print.trace_id}-${print.seq}`}>
+                <div className="row" key={`${print.trace_id}-${print.seq}`}>
-                <div>
+                  <div>
-                  <div className="contract">{print.option_contract_id}</div>
+                    <div className="contract">{print.option_contract_id}</div>
-                  <div className="meta">
+                    <div className="meta">
-                    <span>${formatPrice(print.price)}</span>
+                      <span>${formatPrice(print.price)}</span>
-                    <span>{formatSize(print.size)}x</span>
+                      <span>{formatSize(print.size)}x</span>
-                    <span>{print.exchange}</span>
+                      <span>{print.exchange}</span>
-                    {print.conditions?.length ? (
+                      {print.conditions?.length ? (
-                      <span>{print.conditions.join(", ")}</span>
+                        <span>{print.conditions.join(", ")}</span>
-                    ) : null}
+                      ) : null}
+                    </div>
                   </div>
+                  <div className="time">{formatTime(print.ts)}</div>
                 </div>
-                <div className="time">{formatTime(print.ts)}</div>
+              ))
-              </div>
+            )}
-            ))
+          </div>
-          )}
+        </section>
-        </div>
+
-      </section>
+        <section className="card">
+          <div className="card-header">
+            <div>
+              <h2>Equities Tape</h2>
+              <p className="card-subtitle">Off-exchange flag highlighted.</p>
+            </div>
+            <TapeStatus status={equities.status} lastUpdate={equities.lastUpdate} />
+          </div>
+
+          <div className="list">
+            {equities.items.length === 0 ? (
+              <div className="empty">No equity prints yet. Start ingest-equities.</div>
+            ) : (
+              equities.items.map((print) => (
+                <div className="row" key={`${print.trace_id}-${print.seq}`}>
+                  <div>
+                    <div className="contract">{print.underlying_id}</div>
+                    <div className="meta">
+                      <span>${formatPrice(print.price)}</span>
+                      <span>{formatSize(print.size)}x</span>
+                      <span>{print.exchange}</span>
+                      {print.offExchangeFlag ? (
+                        <span className="flag">Off-Ex</span>
+                      ) : (
+                        <span className="flag flag-muted">Lit</span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="time">{formatTime(print.ts)}</div>
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+      </div>
     </main>
   );
 }

apps/web/next-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 
-// Note: This file is normally generated by Next.js.
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.