@mecha.im/cli 0.3.4

package/agent/dashboard/src/views/settings-config.tsx

@@ -0,0 +1,265 @@
+import { useState, useEffect } from "react";
+import { botFetch } from "../lib/api";
+import { Button, Input, Select, Textarea, Card, Alert } from "../components";
+
+interface Config {
+  name?: string;
+  model?: string;
+  max_turns?: number;
+  permission_mode?: string;
+  system?: string;
+  auth_type?: string;
+  auth_profile?: string;
+  schedule?: number;
+  webhooks?: { accept?: string[] };
+  workspace?: boolean;
+  workspace_writable?: boolean;
+  [key: string]: unknown;
+}
+
+interface AuthProfile {
+  name: string;
+  type: string;
+}
+
+interface AuthInfo {
+  current_profile: string | null;
+  profiles: AuthProfile[];
+}
+
+export default function ConfigEditor() {
+  const [config, setConfig] = useState<Config | null>(null);
+  const [draft, setDraft] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [systemExpanded, setSystemExpanded] = useState(false);
+  const [authProfiles, setAuthProfiles] = useState<AuthProfile[]>([]);
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const configResp = await botFetch("/api/config");
+        if (!configResp.ok) throw new Error(`HTTP ${configResp.status}`);
+        setConfig(await configResp.json() as Config);
+      } catch {
+        setMessage({ text: "Failed to load config", type: "error" });
+        setLoading(false);
+        return;
+      }
+      try {
+        const authResp = await botFetch("/api/auth/profiles");
+        if (authResp.ok) {
+          setAuthProfiles((await authResp.json() as AuthInfo).profiles);
+        }
+      } catch { /* auth profiles are optional */ }
+      setLoading(false);
+    };
+    loadConfig();
+  }, []);
+
+  function updateDraft(key: string, value: unknown) {
+    if (config && value === config[key]) {
+      setDraft((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    } else {
+      setDraft((prev) => ({ ...prev, [key]: value }));
+    }
+  }
+
+  function currentVal(key: string): unknown {
+    return key in draft ? draft[key] : config?.[key];
+  }
+
+  const hasChanges = Object.keys(draft).length > 0;
+
+  async function handleSave() {
+    if (!hasChanges) return;
+    setSaving(true);
+    setMessage(null);
+    try {
+      const resp = await botFetch("/api/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(draft),
+      });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        throw new Error((data as Record<string, string>).error || `HTTP ${resp.status}`);
+      }
+      await resp.json();
+      // Update auth_profile display if auth was changed
+      if (draft.auth) {
+        setConfig((prev) => prev ? { ...prev, ...draft, auth_profile: draft.auth as string } : prev);
+      } else {
+        setConfig((prev) => prev ? { ...prev, ...draft } : prev);
+      }
+      setDraft({});
+      setMessage({ text: "Config updated — bot is restarting...", type: "success" });
+    } catch (err) {
+      setMessage({ text: err instanceof Error ? err.message : "Save failed", type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <section>
+        <h2 className="text-lg font-semibold text-foreground mb-3">Configuration</h2>
+        <Card className="text-sm text-muted-foreground">
+          Loading...
+        </Card>
+      </section>
+    );
+  }
+
+  if (!config) {
+    return (
+      <section>
+        <h2 className="text-lg font-semibold text-foreground mb-3">Configuration</h2>
+        <Card className="text-sm text-destructive">
+          {message?.text || "Failed to load configuration"}
+        </Card>
+      </section>
+    );
+  }
+
+  const authType = config.auth_type;
+  const authTypeLabel = authType === "oauth" ? "OAuth" : authType === "api_key" ? "API Key" : "Unknown";
+
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-foreground mb-3">Configuration</h2>
+      <Card spacing={4}>
+        {/* Name (read-only) */}
+        <div className="space-y-1">
+          <label className="text-sm text-muted-foreground">Name</label>
+          <div className="text-sm text-foreground font-mono">{config.name ?? "—"}</div>
+        </div>
+
+        {/* Model */}
+        <div className="space-y-1">
+          <label className="text-sm text-muted-foreground">Model</label>
+          <Select
+            value={(currentVal("model") as string) ?? "sonnet"}
+            onChange={(e) => updateDraft("model", e.target.value)}
+            className="w-full"
+          >
+            <option value="sonnet">sonnet</option>
+            <option value="opus">opus</option>
+            <option value="haiku">haiku</option>
+          </Select>
+        </div>
+
+        {/* Max Turns */}
+        <div className="space-y-1">
+          <label className="text-sm text-muted-foreground">Max Turns</label>
+          <Input
+            type="number"
+            min={1}
+            max={100}
+            value={(currentVal("max_turns") as number) ?? 25}
+            onChange={(e) => {
+              const n = Number(e.target.value);
+              if (!Number.isFinite(n)) return;
+              updateDraft("max_turns", Math.max(1, Math.min(100, n)));
+            }}
+            className="w-full"
+          />
+        </div>
+
+        {/* Permission Mode */}
+        <div className="space-y-1">
+          <label className="text-sm text-muted-foreground">Permission Mode</label>
+          <Select
+            value={(currentVal("permission_mode") as string) ?? "default"}
+            onChange={(e) => updateDraft("permission_mode", e.target.value)}
+            className="w-full"
+          >
+            <option value="default">default</option>
+            <option value="acceptEdits">acceptEdits</option>
+            <option value="bypassPermissions">bypassPermissions</option>
+            <option value="plan">plan</option>
+            <option value="dontAsk">dontAsk</option>
+          </Select>
+        </div>
+
+        {/* Auth Profile */}
+        {authProfiles.length > 0 && (
+          <div className="space-y-1">
+            <label className="text-sm text-muted-foreground">Auth Profile <span className="text-xs text-muted-foreground/60">({authTypeLabel})</span></label>
+            <Select
+              value={(currentVal("auth") as string) ?? config.auth_profile ?? ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === (config.auth_profile ?? "")) {
+                  setDraft((prev) => { const next = { ...prev }; delete next.auth; return next; });
+                } else {
+                  updateDraft("auth", val);
+                }
+              }}
+              className="w-full"
+            >
+              {!config.auth_profile && <option value="">Select profile...</option>}
+              {authProfiles.map((p) => (
+                <option key={p.name} value={p.name}>
+                  {p.name} ({p.type === "oauth_token" ? "OAuth" : "API Key"})
+                </option>
+              ))}
+            </Select>
+          </div>
+        )}
+
+        {authProfiles.length === 0 && (
+          <div className="space-y-1">
+            <label className="text-sm text-muted-foreground">Auth Profile</label>
+            <div className="text-sm text-foreground font-mono">{config.auth_profile ?? "—"} <span className="text-muted-foreground font-sans text-xs">({authTypeLabel})</span></div>
+          </div>
+        )}
+
+        {/* System Prompt */}
+        <div className="space-y-1">
+          <button
+            type="button"
+            onClick={() => setSystemExpanded(!systemExpanded)}
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <span className="text-xs">{systemExpanded ? "v" : ">"}</span>
+            System Prompt
+          </button>
+          {systemExpanded && (
+            <Textarea
+              mono
+              rows={6}
+              value={(currentVal("system") as string) ?? ""}
+              onChange={(e) => updateDraft("system", e.target.value)}
+              className="w-full"
+            />
+          )}
+        </div>
+
+        {/* Save button */}
+        <div className="pt-2 border-t border-border">
+          <Button
+            size="lg"
+            onClick={handleSave}
+            disabled={!hasChanges || saving}
+          >
+            {saving ? "Saving..." : "Save & Restart"}
+          </Button>
+        </div>
+
+        {/* Status message */}
+        {message && (
+          <Alert variant={message.type}>
+            {message.text}
+          </Alert>
+        )}
+      </Card>
+    </section>
+  );
+}

package/agent/dashboard/src/views/settings-logs.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { botFetch } from "../lib/api";
+import { Button, Select } from "../components";
+
+interface LogEntry {
+  type: string;
+  timestamp: string;
+  [key: string]: unknown;
+}
+
+export default function EventLog() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [filter, setFilter] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchLogs = useCallback(async (showLoading = false) => {
+    if (showLoading) setLoading(true);
+    try {
+      const r = await botFetch("/api/logs?limit=100");
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const data = await r.json();
+      if (Array.isArray(data)) setLogs((data as LogEntry[]).reverse());
+      setFetchError(null);
+    } catch (err) {
+      setFetchError(err instanceof Error ? err.message : "Failed to load logs");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchLogs(true);
+    intervalRef.current = setInterval(() => fetchLogs(), 10_000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [fetchLogs]);
+
+  const eventTypes = Array.from(new Set(logs.map((l) => l.type))).sort();
+  const filtered = filter ? logs.filter((l) => l.type === filter) : logs;
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-lg font-semibold text-foreground">Event Log</h2>
+        <div className="flex items-center gap-2">
+          <Select
+            compact
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+          >
+            <option value="">All</option>
+            {eventTypes.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </Select>
+          <Button
+            variant="secondary"
+            size="xs"
+            onClick={() => fetchLogs(true)}
+          >
+            Refresh
+          </Button>
+        </div>
+      </div>
+      <div className="space-y-1 font-mono text-sm max-h-96 overflow-y-auto scrollbar-thin">
+        {loading && <p className="text-muted-foreground">Loading...</p>}
+        {!loading && fetchError && <p className="text-destructive">{fetchError}</p>}
+        {!loading && !fetchError && filtered.length === 0 && <p className="text-muted-foreground">No events</p>}
+        {!loading && filtered.map((entry, i) => (
+          <div key={`${entry.timestamp}-${entry.type}-${i}`} className="flex gap-3 py-1 border-b border-border/50">
+            <span className="text-muted-foreground shrink-0">
+              {new Date(entry.timestamp).toLocaleTimeString()}
+            </span>
+            <span
+              className={`shrink-0 ${
+                entry.type === "mecha_call"
+                  ? "text-primary"
+                  : entry.type === "error"
+                    ? "text-destructive"
+                    : "text-muted-foreground"
+              }`}
+            >
+              {entry.type}
+            </span>
+            <span className="text-foreground truncate">
+              {Object.entries(entry)
+                .filter(([k]) => k !== "type" && k !== "timestamp")
+                .map(([k, v]) => `${k}=${JSON.stringify(v)}`)
+                .join(" ")}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/agent/dashboard/src/views/settings-status.tsx

@@ -0,0 +1,215 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { botFetch, botUrl } from "../lib/api";
+import { Card, StatusDot } from "../components";
+
+interface BotStatus {
+  name: string;
+  state: string;
+  model: string;
+  uptime: number;
+  current_task: string | null;
+  current_session_id: string | null;
+  talking_to: string | null;
+  last_active: string | null;
+  versions?: Record<string, string>;
+}
+
+const VERSION_LABELS = [
+  { key: "claude_code", label: "Claude Code CLI" },
+  { key: "claude_agent_sdk_js", label: "Agent SDK (JS)" },
+  { key: "claude_agent_sdk_py", label: "Agent SDK (Python)" },
+  { key: "codex", label: "Codex CLI" },
+  { key: "gemini_cli", label: "Gemini CLI" },
+];
+
+const STATE_COLORS: Record<string, "green" | "yellow" | "red" | "muted"> = {
+  idle: "green",
+  thinking: "yellow",
+  calling: "yellow",
+  scheduled: "yellow",
+  webhook: "yellow",
+  error: "red",
+};
+
+function stateColor(state: string): "green" | "yellow" | "red" | "muted" {
+  return STATE_COLORS[state] ?? "muted";
+}
+
+function formatUptime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const parts: string[] = [];
+  if (h > 0) parts.push(`${h}h`);
+  if (m > 0) parts.push(`${m}m`);
+  if (s > 0 || parts.length === 0) parts.push(`${s}s`);
+  return parts.join(" ");
+}
+
+function formatRelative(isoOrNull: string | null): string {
+  if (!isoOrNull) return "never";
+  const ts = new Date(isoOrNull).getTime();
+  if (isNaN(ts)) return "never";
+  const diff = Math.floor((Date.now() - ts) / 1000);
+  if (diff < 5) return "just now";
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+export default function StatusCard() {
+  const [status, setStatus] = useState<BotStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [, setTick] = useState(0);
+  const uptimeBaseRef = useRef<{ serverUptime: number; fetchedAt: number } | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const tickRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const r = await botFetch("/api/status");
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const data = await r.json() as BotStatus;
+      uptimeBaseRef.current = { serverUptime: data.uptime, fetchedAt: Date.now() / 1000 };
+      setStatus(data);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Fetch failed");
+    }
+  }, []);
+
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }, []);
+
+  const startPolling = useCallback(() => {
+    stopPolling();
+    pollRef.current = setInterval(fetchStatus, 5000);
+  }, [fetchStatus, stopPolling]);
+
+  useEffect(() => {
+    fetchStatus();
+
+    const es = new EventSource(botUrl("/api/status/stream"));
+
+    const handleSSE = (e: MessageEvent) => {
+      try {
+        const data = JSON.parse(e.data);
+        // Normalize camelCase SSE fields to snake_case BotStatus
+        const normalized: Partial<BotStatus> = {};
+        // snapshot sends "activity", state events send "state"
+        if (data.state) normalized.state = data.state;
+        else if (data.activity) normalized.state = data.activity;
+        if ("talkingTo" in data) normalized.talking_to = data.talkingTo;
+        if ("lastActive" in data) normalized.last_active = data.lastActive;
+        if ("talking_to" in data) normalized.talking_to = data.talking_to;
+        if ("last_active" in data) normalized.last_active = data.last_active;
+        setStatus((prev) => prev ? { ...prev, ...normalized } : null);
+        setError(null);
+        stopPolling();
+      } catch {}
+    };
+
+    es.addEventListener("state", handleSSE);
+    es.addEventListener("snapshot", handleSSE);
+
+    es.onopen = () => stopPolling();
+    es.onerror = () => {
+      if (!pollRef.current) startPolling();
+    };
+
+    tickRef.current = setInterval(() => setTick((t) => t + 1), 1000);
+
+    return () => {
+      es.close();
+      stopPolling();
+      if (tickRef.current) clearInterval(tickRef.current);
+    };
+  }, [fetchStatus, startPolling, stopPolling]);
+
+  if (error && !status) {
+    return (
+      <Card>
+        <h2 className="text-lg font-semibold text-foreground mb-2">Status</h2>
+        <p className="text-sm text-destructive">{error}</p>
+      </Card>
+    );
+  }
+
+  if (!status) {
+    return (
+      <Card>
+        <h2 className="text-lg font-semibold text-foreground mb-2">Status</h2>
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      </Card>
+    );
+  }
+
+  const liveUptime = uptimeBaseRef.current
+    ? uptimeBaseRef.current.serverUptime + (Date.now() / 1000 - uptimeBaseRef.current.fetchedAt)
+    : status.uptime;
+  const displayUptime = formatUptime(liveUptime > 0 ? liveUptime : 0);
+
+  return (
+    <Card>
+      <h2 className="text-lg font-semibold text-foreground mb-3">Status</h2>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <StatusDot color={stateColor(status.state)} />
+          <span className="text-sm font-medium text-foreground capitalize">{status.state}</span>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          Uptime: <span className="text-foreground font-mono">{displayUptime}</span>
+        </span>
+      </div>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm text-muted-foreground">
+          Model: <span className="text-foreground font-mono">{status.model || "unknown"}</span>
+        </span>
+        <span className="text-sm text-muted-foreground">
+          Last active: <span className="text-foreground font-mono">{formatRelative(status.last_active)}</span>
+        </span>
+      </div>
+      {status.versions && (
+        <div className="pt-2 border-t border-border mb-3">
+          <h3 className="text-sm font-medium text-foreground mb-2">Installed Packages</h3>
+          <div className="space-y-1">
+            {VERSION_LABELS.map(({ key, label }) => {
+              const ver = status.versions?.[key];
+              if (!ver) return null;
+              const installed = ver !== "not installed";
+              return (
+                <div key={key} className="flex items-center justify-between">
+                  <span className="text-xs text-muted-foreground">{label}</span>
+                  <span className={`text-xs font-mono ${installed ? "text-foreground" : "text-muted-foreground"}`}>
+                    {ver}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      <div className="pt-2 border-t border-border">
+        {status.current_task ? (
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground">Task</span>
+            <span className="font-mono text-foreground">{status.current_task.slice(0, 8)}</span>
+            {status.talking_to && (
+              <>
+                <span className="text-muted-foreground">with</span>
+                <span className="font-mono text-foreground">{status.talking_to}</span>
+              </>
+            )}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No active task</p>
+        )}
+      </div>
+    </Card>
+  );
+}