@mecha.im/cli 0.3.4

package/agent/dashboard/public/pixel-engine/furniture/TABLE_FRONT/manifest.json

@@ -0,0 +1,13 @@
+{
+  "id": "TABLE_FRONT",
+  "name": "Table",
+  "category": "desks",
+  "type": "asset",
+  "canPlaceOnWalls": false,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 1,
+  "width": 48,
+  "height": 64,
+  "footprintW": 3,
+  "footprintH": 4
+}

package/agent/dashboard/public/pixel-engine/furniture/VENDER_MACHINE/manifest.json

@@ -0,0 +1,16 @@
+{
+  "id": "VENDER_MACHINE",
+  "name": "Vender Machine",
+  "category": "misc",
+  "type": "asset",
+  "canPlaceOnWalls": false,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 0,
+  "width": 32,
+  "height": 32,
+  "footprintW": 2,
+  "footprintH": 2,
+  "interactable": true,
+  "interactAction": "drink",
+  "interactSides": ["front"]
+}

package/agent/dashboard/public/pixel-engine/furniture/WATER_MACHINE/manifest.json

@@ -0,0 +1,16 @@
+{
+  "id": "WATER_MACHINE",
+  "name": "Water Machine",
+  "category": "misc",
+  "type": "asset",
+  "canPlaceOnWalls": false,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 0,
+  "width": 16,
+  "height": 32,
+  "footprintW": 1,
+  "footprintH": 2,
+  "interactable": true,
+  "interactAction": "drink",
+  "interactSides": ["front"]
+}

package/agent/dashboard/public/pixel-engine/furniture/WHITEBOARD/manifest.json

@@ -0,0 +1,16 @@
+{
+  "id": "WHITEBOARD",
+  "name": "Whiteboard",
+  "category": "wall",
+  "type": "asset",
+  "canPlaceOnWalls": true,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 0,
+  "width": 32,
+  "height": 32,
+  "footprintW": 2,
+  "footprintH": 2,
+  "interactable": true,
+  "interactAction": "study",
+  "interactSides": ["front"]
+}

package/agent/dashboard/public/pixel-engine/furniture/WOODEN_BENCH/manifest.json

@@ -0,0 +1,13 @@
+{
+  "id": "WOODEN_BENCH",
+  "name": "Wooden Bench",
+  "category": "chairs",
+  "type": "asset",
+  "canPlaceOnWalls": false,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 0,
+  "width": 16,
+  "height": 16,
+  "footprintW": 1,
+  "footprintH": 1
+}

package/agent/dashboard/public/pixel-engine/furniture/WOODEN_CHAIR/manifest.json

@@ -0,0 +1,44 @@
+{
+  "id": "WOODEN_CHAIR",
+  "name": "Wooden Chair",
+  "category": "chairs",
+  "type": "group",
+  "groupType": "rotation",
+  "rotationScheme": "3-way-mirror",
+  "canPlaceOnWalls": false,
+  "canPlaceOnSurfaces": false,
+  "backgroundTiles": 1,
+  "members": [
+    {
+      "type": "asset",
+      "id": "WOODEN_CHAIR_FRONT",
+      "file": "WOODEN_CHAIR_FRONT.png",
+      "width": 16,
+      "height": 32,
+      "footprintW": 1,
+      "footprintH": 2,
+      "orientation": "front"
+    },
+    {
+      "type": "asset",
+      "id": "WOODEN_CHAIR_BACK",
+      "file": "WOODEN_CHAIR_BACK.png",
+      "width": 16,
+      "height": 32,
+      "footprintW": 1,
+      "footprintH": 2,
+      "orientation": "back"
+    },
+    {
+      "type": "asset",
+      "id": "WOODEN_CHAIR_SIDE",
+      "file": "WOODEN_CHAIR_SIDE.png",
+      "width": 16,
+      "height": 32,
+      "footprintW": 1,
+      "footprintH": 2,
+      "orientation": "side",
+      "mirrorSide": true
+    }
+  ]
+}

package/agent/dashboard/public/pixel-engine/furniture/index.json

@@ -0,0 +1,32 @@
+[
+  "BIN",
+  "BLACKBOARD",
+  "BOOKSHELF",
+  "CACTUS",
+  "CLOCK",
+  "COFFEE",
+  "COFFEE_TABLE",
+  "CUSHIONED_BENCH",
+  "CUSHIONED_CHAIR",
+  "DESK",
+  "DOUBLE_BOOKSHELF",
+  "FILE_BOXES_1",
+  "FILE_BOXES_2",
+  "HANGING_PLANT",
+  "LARGE_PAINTING",
+  "LARGE_PLANT",
+  "PC",
+  "PLANT",
+  "PLANT_2",
+  "POT",
+  "SMALL_PAINTING",
+  "SMALL_PAINTING_2",
+  "SMALL_TABLE",
+  "SOFA",
+  "TABLE_FRONT",
+  "VENDER_MACHINE",
+  "WATER_MACHINE",
+  "WHITEBOARD",
+  "WOODEN_BENCH",
+  "WOODEN_CHAIR"
+]

package/agent/dashboard/src/app.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect } from "react";
+import { useFleet } from "./lib/fleet-context";
+import { setActiveBotName } from "./lib/api";
+import Sessions from "./views/sessions";
+import Schedule from "./views/schedule";
+import Settings from "./views/settings";
+import Webhooks from "./views/webhooks";
+import Fleet from "./views/fleet";
+import Network from "./views/network";
+import Auth from "./views/auth";
+import { PixelOffice } from "./pixel-engine/components/PixelOffice";
+import { Bot } from "lucide-react";
+
+// Bot-level tabs (shown when viewing a specific bot)
+const botTabs = ["Sessions", "Schedule", "Webhooks", "Settings"] as const;
+type BotTab = (typeof botTabs)[number];
+
+// Fleet-level tabs (shown in fleet overview)
+const fleetTabs = ["Office", "Fleet", "Network", "Auth"] as const;
+type FleetTab = (typeof fleetTabs)[number];
+
+type Tab = BotTab | FleetTab;
+
+const icons: Record<string, string> = {
+  Sessions: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z",
+  Schedule: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
+  Webhooks: "M13 10V3L4 14h7v7l9-11h-7z",
+  Settings: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+  Fleet: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
+  Office: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
+  Network: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1",
+  Auth: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z",
+};
+
+function ThemeToggle() {
+  const [dark, setDark] = useState(() => document.documentElement.classList.contains("dark"));
+
+  useEffect(() => {
+    if (dark) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [dark]);
+
+  return (
+    <button
+      onClick={() => setDark(!dark)}
+      className="p-2 rounded-md text-sidebar-muted hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
+      title={dark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {dark ? (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export default function App() {
+  const { isFleet, selectedBot, selectBot, bots } = useFleet();
+  const [tab, setTab] = useState<Tab>("Sessions");
+
+  // In fleet mode, switch tabs based on bot selection
+  useEffect(() => {
+    if (!isFleet) return;
+    if (selectedBot) {
+      // Switched to a bot — show bot tabs
+      if (fleetTabs.includes(tab as FleetTab)) setTab("Sessions");
+    } else {
+      // Back to fleet overview
+      if (botTabs.includes(tab as BotTab)) setTab("Office");
+    }
+  }, [isFleet, selectedBot]);
+
+  // Sync active bot name for API routing
+  useEffect(() => {
+    setActiveBotName(isFleet ? selectedBot : null);
+  }, [isFleet, selectedBot]);
+
+  // Loading state
+  if (isFleet === null) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  const viewingBot = isFleet ? selectedBot : true; // In direct mode, always viewing "the" bot
+
+  function handleBackToFleet() {
+    selectBot(null);
+    setTab("Office");
+  }
+
+  const selectedBotStatus = selectedBot ? bots.find((b) => b.name === selectedBot) : null;
+
+  return (
+    <div className="h-screen flex overflow-hidden">
+      {/* Sidebar */}
+      <aside className="w-14 shrink-0 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-3 gap-1">
+        {/* Logo / back button */}
+        {isFleet && selectedBot ? (
+          <button
+            onClick={handleBackToFleet}
+            className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground hover:bg-secondary/80 transition-colors mb-4"
+            title="Back to fleet"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+        ) : (
+          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground mb-4">
+            <Bot className="w-4 h-4" />
+          </div>
+        )}
+
+        {/* Nav tabs */}
+        <nav className="flex flex-col gap-1 flex-1">
+          {/* Fleet tabs (always visible in fleet mode) */}
+          {isFleet && !selectedBot && fleetTabs.map((t) => (
+            <button
+              key={t}
+              onClick={() => setTab(t)}
+              className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
+                tab === t
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                  : "text-sidebar-muted hover:text-sidebar-foreground hover:bg-sidebar-accent"
+              }`}
+              title={t}
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d={icons[t]} />
+              </svg>
+            </button>
+          ))}
+
+          {/* Bot tabs (when viewing a specific bot) */}
+          {viewingBot && botTabs.map((t) => (
+            <button
+              key={t}
+              onClick={() => setTab(t)}
+              className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
+                tab === t
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                  : "text-sidebar-muted hover:text-sidebar-foreground hover:bg-sidebar-accent"
+              }`}
+              title={t}
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d={icons[t]} />
+              </svg>
+            </button>
+          ))}
+        </nav>
+
+        {/* Bottom: theme toggle + version */}
+        <ThemeToggle />
+        <span className="text-[10px] text-sidebar-muted select-none" title={`Mecha v${__APP_VERSION__}`}>
+          v{__APP_VERSION__}
+        </span>
+      </aside>
+
+      {/* Main content */}
+      <div className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden bg-background">
+        {/* Bot context bar (fleet mode, viewing a bot) */}
+        {isFleet && selectedBot && (
+          <div className="shrink-0 px-4 py-2 border-b border-border bg-card flex items-center gap-3">
+            <span
+              className={`w-2 h-2 rounded-full ${
+                selectedBotStatus?.status === "running" ? "bg-green-500" : "bg-muted-foreground"
+              }`}
+            />
+            <span className="text-sm font-medium text-foreground">{selectedBot}</span>
+            {selectedBotStatus && (
+              <span className="text-xs text-muted-foreground">
+                {selectedBotStatus.model} | {selectedBotStatus.status}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Tab content */}
+        <main className="flex-1 min-w-0 min-h-0 overflow-hidden">
+          {/* Fleet views */}
+          {tab === "Fleet" && <Fleet />}
+          {tab === "Network" && <Network />}
+          {tab === "Auth" && <Auth />}
+
+          {/* Office — always mounted when in fleet overview, hidden when not active */}
+          {isFleet && !selectedBot && (
+            <div style={{
+              display: tab === "Office" ? "block" : "none",
+              width: "100%",
+              height: "100%",
+            }}>
+              <PixelOffice
+                isActive={tab === "Office"}
+                onSelectBot={(name) => { selectBot(name); setTab("Sessions"); }}
+                onEditAvatar={(name) => { selectBot(name); setTab("Settings"); }}
+              />
+            </div>
+          )}
+
+          {/* Bot views */}
+          {tab === "Sessions" && viewingBot && <Sessions />}
+          {tab === "Schedule" && viewingBot && <Schedule />}
+          {tab === "Webhooks" && viewingBot && <Webhooks />}
+          {tab === "Settings" && viewingBot && <Settings />}
+        </main>
+      </div>
+    </div>
+  );
+}

package/agent/dashboard/src/components/alert.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+const styles = {
+  success: "bg-green-500/10 text-green-600 dark:text-green-400",
+  error: "bg-destructive/10 text-destructive",
+} as const;
+
+type Props = {
+  variant: keyof typeof styles;
+  children: ReactNode;
+  className?: string;
+  onDismiss?: () => void;
+};
+
+export default function Alert({ variant, children, className = "", onDismiss }: Props) {
+  return (
+    <div className={`text-sm px-3 py-2 rounded-md ${styles[variant]} ${className}`}>
+      {children}
+      {onDismiss && (
+        <button onClick={onDismiss} className="ml-2 underline">dismiss</button>
+      )}
+    </div>
+  );
+}

package/agent/dashboard/src/components/badge.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+const styles = {
+  success: "bg-green-500/10 text-green-600 dark:text-green-400",
+  warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+  error: "bg-destructive/10 text-destructive",
+  primary: "bg-primary/10 text-primary",
+  blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  muted: "bg-muted text-muted-foreground",
+} as const;
+
+type Props = {
+  variant?: keyof typeof styles;
+  children: ReactNode;
+  onRemove?: () => void;
+  className?: string;
+};
+
+export default function Badge({ variant = "primary", children, onRemove, className = "" }: Props) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${styles[variant]} ${className}`}
+    >
+      {children}
+      {onRemove && (
+        <button onClick={onRemove} className="hover:text-destructive transition-colors ml-0.5">
+          &times;
+        </button>
+      )}
+    </span>
+  );
+}
+
+/** Compact status badge (rounded-md, smaller padding) */
+export function StatusBadge({ variant = "success", children, className = "" }: Omit<Props, "onRemove">) {
+  return (
+    <span className={`text-xs px-2 py-0.5 rounded-md font-medium ${styles[variant]} ${className}`}>
+      {children}
+    </span>
+  );
+}

package/agent/dashboard/src/components/button.tsx

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes } from "react";
+
+const variants = {
+  primary:
+    "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary:
+    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  destructive:
+    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  "destructive-soft":
+    "bg-destructive/10 text-destructive hover:bg-destructive/20",
+  ghost:
+    "border border-border text-muted-foreground hover:text-foreground hover:border-foreground/30",
+  "ghost-destructive":
+    "border border-destructive/30 text-destructive/70 hover:text-destructive hover:border-destructive",
+} as const;
+
+const sizes = {
+  sm: "px-3 py-1.5 text-sm",
+  lg: "px-4 py-2 text-sm",
+  xs: "px-2 py-1 text-xs",
+} as const;
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: keyof typeof variants;
+  size?: keyof typeof sizes;
+};
+
+export default function Button({
+  variant = "primary",
+  size = "sm",
+  className = "",
+  disabled,
+  ...props
+}: Props) {
+  return (
+    <button
+      type="button"
+      className={`${sizes[size]} ${variants[variant]} rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${className}`}
+      disabled={disabled}
+      {...props}
+    />
+  );
+}

package/agent/dashboard/src/components/card.tsx

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "react";
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  compact?: boolean;
+  spacing?: 2 | 3 | 4;
+};
+
+const spacingClass = { 2: "space-y-2", 3: "space-y-3", 4: "space-y-4" } as const;
+
+export default function Card({ compact, spacing, className = "", children, ...props }: Props) {
+  const pad = compact ? "p-3" : "p-4";
+  const sp = spacing ? spacingClass[spacing] : "";
+  return (
+    <div
+      className={`bg-card rounded-lg border border-border ${pad} ${sp} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/agent/dashboard/src/components/dialog.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  open: boolean;
+  size?: "sm" | "md";
+  title: string;
+  description?: string;
+  children: ReactNode;
+};
+
+export default function Dialog({ open, size = "sm", title, description, children }: Props) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className={`bg-card border border-border rounded-lg p-6 ${size === "md" ? "max-w-md" : "max-w-sm"} mx-4 shadow-xl`}>
+        <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
+        {description && (
+          <p className="text-sm text-muted-foreground mb-4">{description}</p>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function DialogFooter({ children }: { children: ReactNode }) {
+  return <div className="flex gap-3 justify-end">{children}</div>;
+}

package/agent/dashboard/src/components/index.ts

@@ -0,0 +1,7 @@
+export { default as Button } from "./button";
+export { Input, Select, Textarea } from "./input";
+export { default as Card } from "./card";
+export { default as Alert } from "./alert";
+export { default as Dialog, DialogFooter } from "./dialog";
+export { default as StatusDot } from "./status-dot";
+export { default as Badge, StatusBadge } from "./badge";

package/agent/dashboard/src/components/input.tsx

@@ -0,0 +1,45 @@
+import type { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+
+const base =
+  "bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  mono?: boolean;
+};
+
+export function Input({ mono, className = "", ...props }: InputProps) {
+  return (
+    <input
+      className={`${base} px-3 py-1.5 ${mono ? "font-mono" : ""} ${className}`}
+      {...props}
+    />
+  );
+}
+
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+  compact?: boolean;
+};
+
+export function Select({ compact, className = "", children, ...props }: SelectProps) {
+  return (
+    <select
+      className={`${base} ${compact ? "px-2 py-1" : "px-3 py-1.5"} ${className}`}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+}
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  mono?: boolean;
+};
+
+export function Textarea({ mono, className = "", ...props }: TextareaProps) {
+  return (
+    <textarea
+      className={`${base} px-3 py-2 resize-y ${mono ? "font-mono" : ""} ${className}`}
+      {...props}
+    />
+  );
+}

package/agent/dashboard/src/components/status-dot.tsx

@@ -0,0 +1,31 @@
+const colors = {
+  green: "bg-green-500",
+  yellow: "bg-yellow-500",
+  red: "bg-red-500",
+  blue: "bg-blue-500",
+  muted: "bg-muted-foreground",
+  "muted-light": "bg-muted-foreground/30",
+  "muted-lighter": "bg-muted-foreground/40",
+  success: "bg-success",
+} as const;
+
+const sizeClass = {
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-2.5 h-2.5",
+} as const;
+
+type Props = {
+  color?: keyof typeof colors;
+  size?: keyof typeof sizeClass;
+  pulse?: boolean;
+  className?: string;
+};
+
+export default function StatusDot({ color = "muted", size = "md", pulse, className = "" }: Props) {
+  return (
+    <span
+      className={`${sizeClass[size]} rounded-full ${colors[color]} ${pulse ? "animate-pulse" : ""} shrink-0 ${className}`}
+    />
+  );
+}