@mecha.im/cli 0.3.4

package/agent/dashboard/src/views/fleet.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { useFleet, fleetFetch } from "../lib/fleet-context";
+import { Button, Input, Select, Textarea, Card, Alert, Dialog, DialogFooter, StatusDot } from "../components";
+
+export default function Fleet() {
+  const { bots, refreshBots, selectBot } = useFleet();
+  const [showSpawn, setShowSpawn] = useState(false);
+  const [spawnName, setSpawnName] = useState("");
+  const [spawnSystem, setSpawnSystem] = useState("");
+  const [spawnModel, setSpawnModel] = useState("sonnet");
+  const [actionBusy, setActionBusy] = useState(false);
+  const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
+  const [confirmAction, setConfirmAction] = useState<{ name: string; action: "stop" | "remove" | "restart" } | null>(null);
+
+  async function spawn() {
+    if (!spawnName || !spawnSystem) return;
+    setActionBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch("/api/bots", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: spawnName, system: spawnSystem, model: spawnModel }),
+      });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Spawn failed"), type: "error" });
+        return;
+      }
+      setMessage({ text: `Bot "${spawnName}" spawned`, type: "success" });
+      setShowSpawn(false);
+      setSpawnName("");
+      setSpawnSystem("");
+      refreshBots();
+    } catch { setMessage({ text: "Network error", type: "error" }); }
+    finally { setActionBusy(false); }
+  }
+
+  async function stopBot(name: string, force = false) {
+    setActionBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch(`/api/bots/${name}/stop${force ? "?force=true" : ""}`, { method: "POST" });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Stop failed"), type: "error" });
+      } else {
+        setMessage({ text: `Bot "${name}" stopping`, type: "success" });
+        setConfirmAction(null);
+      }
+      refreshBots();
+    } catch { setMessage({ text: "Network error", type: "error" }); }
+    finally { setActionBusy(false); }
+  }
+
+  async function restartBot(name: string, force = false) {
+    setActionBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch(`/api/bots/${name}/restart${force ? "?force=true" : ""}`, { method: "POST" });
+      const data = await resp.json() as Record<string, unknown>;
+      if (resp.status === 409 && !force) {
+        setConfirmAction({ name, action: "restart" });
+      } else if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Restart failed"), type: "error" });
+      } else {
+        setMessage({ text: `Bot "${name}" restarting`, type: "success" });
+      }
+      refreshBots();
+    } catch { setMessage({ text: "Network error", type: "error" }); }
+    finally { setActionBusy(false); }
+  }
+
+  async function removeBot(name: string) {
+    setActionBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch(`/api/bots/${name}`, { method: "DELETE" });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Remove failed"), type: "error" });
+      } else {
+        setMessage({ text: `Bot "${name}" removed`, type: "success" });
+        setConfirmAction(null);
+      }
+      refreshBots();
+    } catch { setMessage({ text: "Network error", type: "error" }); }
+    finally { setActionBusy(false); }
+  }
+
+  return (
+    <div className="p-6 space-y-4 max-w-4xl mx-auto h-full overflow-y-auto">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-foreground">Fleet ({bots.length} bots)</h2>
+        <Button onClick={() => setShowSpawn(!showSpawn)}>
+          + Spawn Bot
+        </Button>
+      </div>
+
+      {message && (
+        <Alert variant={message.type} onDismiss={() => setMessage(null)}>
+          {message.text}
+        </Alert>
+      )}
+
+      {/* Spawn form */}
+      {showSpawn && (
+        <Card spacing={3}>
+          <h3 className="text-sm font-medium text-foreground">New Bot</h3>
+          <Input
+            value={spawnName}
+            onChange={(e) => setSpawnName(e.target.value)}
+            placeholder="Bot name"
+            className="w-full"
+          />
+          <Textarea
+            value={spawnSystem}
+            onChange={(e) => setSpawnSystem(e.target.value)}
+            placeholder="System prompt"
+            rows={3}
+            className="w-full"
+          />
+          <div className="flex items-center gap-3">
+            <Select
+              value={spawnModel}
+              onChange={(e) => setSpawnModel(e.target.value)}
+            >
+              <option value="sonnet">Sonnet</option>
+              <option value="opus">Opus</option>
+              <option value="haiku">Haiku</option>
+            </Select>
+            <div className="flex-1" />
+            <Button
+              variant="secondary"
+              onClick={() => setShowSpawn(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={spawn}
+              disabled={!spawnName || !spawnSystem || actionBusy}
+            >
+              {actionBusy ? "Creating..." : "Create"}
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {/* Bot list */}
+      {bots.length === 0 && <p className="text-muted-foreground text-sm">No bots. Spawn one to get started.</p>}
+
+      <div className="space-y-2">
+        {bots.map((bot) => (
+          <Card
+            key={bot.name}
+            compact
+            className="flex items-center justify-between"
+          >
+            <div className="flex items-center gap-3 min-w-0">
+              <StatusDot
+                color={bot.status === "running" ? "green" : "muted"}
+                size="lg"
+              />
+              <div className="min-w-0">
+                <button
+                  onClick={() => selectBot(bot.name)}
+                  className="font-medium text-foreground hover:text-primary transition-colors text-left"
+                >
+                  {bot.name}
+                </button>
+                <div className="text-xs text-muted-foreground truncate">
+                  {bot.model} | {bot.containerId}{bot.ports ? ` | ${bot.ports}` : ""}
+                </div>
+              </div>
+            </div>
+            <div className="flex gap-1.5 shrink-0">
+              {bot.status === "running" ? (
+                <>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => selectBot(bot.name)}
+                  >
+                    Open
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => restartBot(bot.name)}
+                    disabled={actionBusy}
+                  >
+                    Restart
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => setConfirmAction({ name: bot.name, action: "stop" })}
+                    disabled={actionBusy}
+                  >
+                    Stop
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  onClick={() => restartBot(bot.name)}
+                  disabled={actionBusy}
+                >
+                  Start
+                </Button>
+              )}
+              <Button
+                variant="ghost-destructive"
+                size="xs"
+                onClick={() => setConfirmAction({ name: bot.name, action: "remove" })}
+                disabled={actionBusy}
+              >
+                Remove
+              </Button>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Confirm dialog */}
+      <Dialog
+        open={!!confirmAction}
+        title={confirmAction?.action === "remove" ? "Remove Bot" : confirmAction?.action === "restart" ? "Restart Bot" : "Stop Bot"}
+        description={
+          confirmAction?.action === "remove"
+            ? `Remove "${confirmAction.name}"? This will delete the container and all its data.`
+            : confirmAction?.action === "restart"
+              ? `"${confirmAction.name}" is busy. Force restart will interrupt the current task.`
+              : confirmAction
+                ? `Stop "${confirmAction.name}"? This will interrupt any running tasks.`
+                : undefined
+        }
+      >
+        <DialogFooter>
+          <Button
+            variant="secondary"
+            size="lg"
+            onClick={() => setConfirmAction(null)}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            size="lg"
+            onClick={() => {
+              if (confirmAction?.action === "stop") stopBot(confirmAction.name, true);
+              else if (confirmAction?.action === "restart") restartBot(confirmAction.name, true);
+              else if (confirmAction) removeBot(confirmAction.name);
+            }}
+          >
+            {confirmAction?.action === "remove" ? "Remove" : confirmAction?.action === "restart" ? "Force Restart" : "Force Stop"}
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+}

package/agent/dashboard/src/views/network.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { fleetFetch } from "../lib/fleet-context";
+import { Button, Card } from "../components";
+
+interface NetworkEvent {
+  type: string;
+  timestamp: string;
+  source_bot: string;
+  target?: string;
+  success?: boolean;
+  duration?: number;
+  [key: string]: unknown;
+}
+
+export default function Network() {
+  const [events, setEvents] = useState<NetworkEvent[]>([]);
+  const [connections, setConnections] = useState<Map<string, { count: number; lastSeen: string }>>(new Map());
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const refresh = useCallback(() => {
+    fleetFetch("/api/network")
+      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+      .then((data) => {
+        if (!Array.isArray(data)) return;
+        const typed = data as NetworkEvent[];
+        setEvents(typed.sort((a, b) => b.timestamp.localeCompare(a.timestamp)).slice(0, 100));
+
+        const conns = new Map<string, { count: number; lastSeen: string }>();
+        for (const e of typed) {
+          if (e.type === "mecha_call" && e.target) {
+            const key = `${e.source_bot} → ${e.target}`;
+            const existing = conns.get(key);
+            conns.set(key, {
+              count: (existing?.count ?? 0) + 1,
+              lastSeen: e.timestamp > (existing?.lastSeen ?? "") ? e.timestamp : (existing?.lastSeen ?? ""),
+            });
+          }
+        }
+        setConnections(conns);
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    pollRef.current = setInterval(refresh, 10_000);
+    return () => clearInterval(pollRef.current);
+  }, [refresh]);
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto h-full overflow-y-auto">
+      <section>
+        <h2 className="text-lg font-semibold text-foreground mb-4">Communication Map</h2>
+        {connections.size === 0 ? (
+          <p className="text-muted-foreground text-sm">No bot-to-bot communication recorded</p>
+        ) : (
+          <div className="space-y-2">
+            {Array.from(connections.entries()).map(([key, val]) => (
+              <Card
+                key={key}
+                compact
+                className="flex items-center justify-between"
+              >
+                <span className="font-mono text-sm text-primary">{key}</span>
+                <div className="flex gap-4 text-sm text-muted-foreground">
+                  <span>{val.count} calls</span>
+                  <span>Last: {new Date(val.lastSeen).toLocaleString()}</span>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-foreground">Recent Events</h2>
+          <Button variant="secondary" size="xs" onClick={refresh}>
+            Refresh
+          </Button>
+        </div>
+        <div className="space-y-1 font-mono text-sm">
+          {events.length === 0 && <p className="text-muted-foreground">No events</p>}
+          {events.slice(0, 50).map((e, i) => (
+            <div key={`${e.timestamp}-${i}`} className="flex gap-3 py-1 border-b border-border/50">
+              <span className="text-muted-foreground shrink-0">
+                {new Date(e.timestamp).toLocaleTimeString()}
+              </span>
+              <span className="text-yellow-600 dark:text-yellow-400 shrink-0">{e.source_bot}</span>
+              <span className="text-muted-foreground">{e.type}</span>
+              {e.target && <span className="text-primary">→ {e.target}</span>}
+              {e.success !== undefined && (
+                <span className={e.success ? "text-green-600 dark:text-green-400" : "text-destructive"}>
+                  {e.success ? "ok" : "fail"}
+                </span>
+              )}
+              {e.duration !== undefined && (
+                <span className="text-muted-foreground">{e.duration}ms</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/agent/dashboard/src/views/schedule-types.ts

@@ -0,0 +1,12 @@
+export interface ScheduleEntry {
+  id: string;
+  cron: string;
+  prompt: string;
+  status: string;
+  nextRunAt: string | null;
+  lastRunAt: string | null;
+  lastResult: string | null;
+  runCount: number;
+  runsToday: number;
+  consecutiveErrors: number;
+}

package/agent/dashboard/src/views/schedule-utils.ts

@@ -0,0 +1,49 @@
+export const CRON_PRESETS: Array<{ label: string; cron: string }> = [
+  { label: "Every minute", cron: "* * * * *" },
+  { label: "Every 5 minutes", cron: "*/5 * * * *" },
+  { label: "Every 15 minutes", cron: "*/15 * * * *" },
+  { label: "Every hour", cron: "0 * * * *" },
+  { label: "Every 6 hours", cron: "0 */6 * * *" },
+  { label: "Daily at midnight", cron: "0 0 * * *" },
+  { label: "Daily at 9am", cron: "0 9 * * *" },
+  { label: "Weekdays at 9am", cron: "0 9 * * 1-5" },
+  { label: "Weekly (Monday)", cron: "0 0 * * 1" },
+];
+
+export function cronToHuman(cron: string): string {
+  const parts = cron.split(/\s+/);
+  if (parts.length !== 5) return cron;
+  const [min, hour, dom, mon, dow] = parts;
+
+  if (min === "*" && hour === "*" && dom === "*" && mon === "*" && dow === "*") return "Every minute";
+  if (min.startsWith("*/") && hour === "*" && dom === "*" && mon === "*" && dow === "*")
+    return `Every ${min.slice(2)} minutes`;
+  if (min === "0" && hour.startsWith("*/") && dom === "*" && mon === "*" && dow === "*")
+    return `Every ${hour.slice(2)} hours`;
+  if (min === "0" && hour === "*" && dom === "*" && mon === "*" && dow === "*") return "Every hour";
+  if (min === "0" && hour === "0" && dom === "*" && mon === "*" && dow === "*") return "Daily at midnight";
+  if (dom === "*" && mon === "*" && dow === "*" && /^\d+$/.test(min) && /^\d+$/.test(hour))
+    return `Daily at ${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
+  if (dom === "*" && mon === "*" && dow === "1-5" && /^\d+$/.test(min) && /^\d+$/.test(hour))
+    return `Weekdays at ${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
+  if (dom === "*" && mon === "*" && /^\d+$/.test(dow) && /^\d+$/.test(min) && /^\d+$/.test(hour)) {
+    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    return `${days[parseInt(dow)] ?? `Day ${dow}`} at ${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
+  }
+  return cron;
+}
+
+export function timeUntil(isoDate: string): string {
+  const ts = new Date(isoDate).getTime();
+  if (Number.isNaN(ts)) return "unknown";
+  const diff = ts - Date.now();
+  if (diff < 0) return "now";
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s`;
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m`;
+  if (diff < 86400_000) {
+    const h = Math.floor(diff / 3600_000);
+    const m = Math.floor((diff % 3600_000) / 60_000);
+    return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  }
+  return `${Math.floor(diff / 86400_000)}d`;
+}