feat(ui,web): Phase 2 — Shared Components & Terminal Panel (#449) (#452)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/ui/src/components/Dot.tsx

@@ -0,0 +1,39 @@
+import type { ReactElement } from "react";
+
+export type DotVariant = "teal" | "blue" | "amber" | "red" | "muted";
+
+export interface DotProps {
+  variant?: DotVariant;
+  className?: string;
+}
+
+interface DotColorDef {
+  bg: string;
+  shadow: string;
+}
+
+export function Dot({ variant = "muted", className = "" }: DotProps): ReactElement {
+  const colors: Record<DotVariant, DotColorDef> = {
+    teal: { bg: "var(--success)", shadow: "0 0 5px var(--success)" },
+    blue: { bg: "var(--primary)", shadow: "0 0 5px var(--primary)" },
+    amber: { bg: "var(--warn)", shadow: "0 0 5px var(--warn)" },
+    red: { bg: "var(--danger)", shadow: "0 0 5px var(--danger)" },
+    muted: { bg: "var(--muted)", shadow: "none" },
+  };
+
+  const { bg, shadow } = colors[variant];
+
+  return (
+    <span
+      className={`inline-block ${className}`}
+      style={{
+        width: 7,
+        height: 7,
+        borderRadius: "50%",
+        background: bg,
+        boxShadow: shadow,
+      }}
+      aria-hidden="true"
+    />
+  );
+}