@mecha.im/cli 0.3.4

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

@@ -0,0 +1,326 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { botFetch } from "../lib/api";
+import type { ScheduleEntry } from "./schedule-types";
+import { CRON_PRESETS, cronToHuman, timeUntil } from "./schedule-utils";
+import { Alert, Button, Card, Dialog, DialogFooter, Input, StatusBadge, Textarea } from "../components";
+
+export default function Schedule() {
+  const [entries, setEntries] = useState<ScheduleEntry[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [, setTick] = useState(0);
+
+  // Form state
+  const [formCron, setFormCron] = useState("");
+  const [formPrompt, setFormPrompt] = useState("");
+  const [formBusy, setFormBusy] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const refresh = useCallback(() => {
+    botFetch("/api/schedule")
+      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+      .then((data) => { setEntries(data as ScheduleEntry[]); setError(null); })
+      .catch((err) => setError(err instanceof Error ? err.message : "Failed to load schedule"));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    pollRef.current = setInterval(refresh, 10_000);
+    return () => clearInterval(pollRef.current);
+  }, [refresh]);
+
+  // Countdown ticker
+  useEffect(() => {
+    const timer = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  function resetForm() {
+    setFormCron("");
+    setFormPrompt("");
+    setFormError(null);
+    setShowAdd(false);
+    setEditingId(null);
+  }
+
+  async function handleAdd() {
+    if (!formCron.trim() || !formPrompt.trim()) { setFormError("Cron and prompt are required"); return; }
+    setFormBusy(true);
+    setFormError(null);
+    try {
+      const resp = await botFetch("/api/schedule", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cron: formCron.trim(), prompt: formPrompt.trim() }),
+      });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) { setFormError(String(data.error ?? "Failed to create")); return; }
+      resetForm();
+      refresh();
+    } catch { setFormError("Network error"); }
+    finally { setFormBusy(false); }
+  }
+
+  async function handleUpdate(id: string) {
+    if (!formCron.trim() || !formPrompt.trim()) { setFormError("Cron and prompt are required"); return; }
+    setFormBusy(true);
+    setFormError(null);
+    try {
+      const resp = await botFetch(`/api/schedule/${encodeURIComponent(id)}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cron: formCron.trim(), prompt: formPrompt.trim() }),
+      });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) { setFormError(String(data.error ?? "Failed to update")); return; }
+      resetForm();
+      refresh();
+    } catch { setFormError("Network error"); }
+    finally { setFormBusy(false); }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const resp = await botFetch(`/api/schedule/${encodeURIComponent(id)}`, { method: "DELETE" });
+      if (!resp.ok) {
+        const data = await resp.json() as Record<string, unknown>;
+        setError(String(data.error ?? "Delete failed"));
+        return;
+      }
+      setDeleteConfirm(null);
+      refresh();
+    } catch { setError("Network error"); }
+  }
+
+  async function handleToggle(entry: ScheduleEntry) {
+    const action = entry.status === "active" ? "pause" : "resume";
+    try {
+      const resp = await botFetch(`/api/schedule/${encodeURIComponent(entry.id)}/${action}`, { method: "POST" });
+      if (!resp.ok) {
+        const data = await resp.json() as Record<string, unknown>;
+        setError(String(data.error ?? `${action} failed`));
+        return;
+      }
+      refresh();
+    } catch { setError("Network error"); }
+  }
+
+  async function handleTrigger(id: string) {
+    try {
+      const resp = await botFetch(`/api/schedule/trigger/${encodeURIComponent(id)}`, { method: "POST" });
+      if (!resp.ok) {
+        const data = await resp.json() as Record<string, unknown>;
+        setError(String(data.error ?? "Trigger failed"));
+        return;
+      }
+      refresh();
+    } catch { setError("Network error"); }
+  }
+
+  function startEdit(entry: ScheduleEntry) {
+    setEditingId(entry.id);
+    setFormCron(entry.cron);
+    setFormPrompt(entry.prompt);
+    setFormError(null);
+    setShowAdd(false);
+  }
+
+  function startAdd() {
+    setShowAdd(true);
+    setEditingId(null);
+    setFormCron("");
+    setFormPrompt("");
+    setFormError(null);
+  }
+
+  const isEditing = editingId !== null;
+
+  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 mb-2">
+        <h2 className="text-lg font-semibold text-foreground">Schedule</h2>
+        <Button onClick={startAdd} disabled={showAdd || isEditing}>
+          + Add Task
+        </Button>
+      </div>
+
+      {error && (
+        <Alert variant="error" onDismiss={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+
+      {/* Add / Edit form */}
+      {(showAdd || isEditing) && (
+        <Card spacing={3}>
+          <h3 className="text-sm font-medium text-foreground">
+            {isEditing ? "Edit Schedule Entry" : "New Schedule Entry"}
+          </h3>
+
+          {/* Cron presets */}
+          <div className="flex flex-wrap gap-1.5">
+            {CRON_PRESETS.map((p) => (
+              <button
+                key={p.cron}
+                onClick={() => setFormCron(p.cron)}
+                className={`text-xs px-2 py-1 rounded-md border transition-colors ${
+                  formCron === p.cron
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border text-muted-foreground hover:border-primary/50"
+                }`}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+
+          <div>
+            <label className="text-xs text-muted-foreground block mb-1">Cron Expression (5 fields)</label>
+            <Input
+              mono
+              value={formCron}
+              onChange={(e) => setFormCron(e.target.value)}
+              placeholder="*/15 * * * *"
+              className="w-full"
+            />
+            {formCron && (
+              <div className="text-xs text-muted-foreground mt-1">{cronToHuman(formCron)}</div>
+            )}
+          </div>
+
+          <div>
+            <label className="text-xs text-muted-foreground block mb-1">Prompt</label>
+            <Textarea
+              value={formPrompt}
+              onChange={(e) => setFormPrompt(e.target.value)}
+              placeholder="What should the bot do on this schedule?"
+              rows={3}
+              className="w-full"
+            />
+          </div>
+
+          {formError && (
+            <Alert variant="error">{formError}</Alert>
+          )}
+
+          <div className="flex gap-2 justify-end">
+            <Button variant="secondary" onClick={resetForm}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => isEditing ? handleUpdate(editingId!) : handleAdd()}
+              disabled={formBusy || !formCron.trim() || !formPrompt.trim()}
+            >
+              {formBusy ? "Saving..." : isEditing ? "Update" : "Create"}
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {/* Entry list */}
+      {entries.length === 0 && !showAdd && (
+        <p className="text-muted-foreground text-sm">No scheduled tasks. Click "Add Task" to create one.</p>
+      )}
+
+      {entries.map((e) => (
+        <Card key={e.id}>
+          {/* Header row */}
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <code className="text-primary text-sm">{e.cron}</code>
+              <span className="text-xs text-muted-foreground">{cronToHuman(e.cron)}</span>
+              <StatusBadge variant={e.status === "active" ? "success" : "warning"}>
+                {e.status}
+              </StatusBadge>
+              {e.consecutiveErrors >= 5 && (
+                <StatusBadge variant="error">
+                  auto-paused
+                </StatusBadge>
+              )}
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-1.5">
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => handleToggle(e)}
+                title={e.status === "active" ? "Pause" : "Resume"}
+              >
+                {e.status === "active" ? "Pause" : "Resume"}
+              </Button>
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => handleTrigger(e.id)}
+                title="Run now"
+              >
+                Trigger
+              </Button>
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => startEdit(e)}
+                title="Edit"
+              >
+                Edit
+              </Button>
+              <Button
+                variant="ghost-destructive"
+                size="xs"
+                onClick={() => setDeleteConfirm(e.id)}
+                title="Delete"
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+
+          {/* Prompt */}
+          <p className="text-sm text-foreground mb-2 whitespace-pre-wrap break-words">
+            {e.prompt.length > 200 ? e.prompt.slice(0, 200) + "..." : e.prompt}
+          </p>
+
+          {/* Stats row */}
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+            {e.nextRunAt && e.status === "active" && (
+              <span>Next: <span className="text-foreground">{timeUntil(e.nextRunAt)}</span></span>
+            )}
+            {e.lastRunAt && (
+              <span>Last: {new Date(e.lastRunAt).toLocaleString()}</span>
+            )}
+            <span>Runs: {e.runCount} (today: {e.runsToday})</span>
+            {e.lastResult && (
+              <span className={e.lastResult === "error" ? "text-destructive" : e.lastResult === "success" ? "text-green-600 dark:text-green-400" : ""}>
+                Last result: {e.lastResult}
+              </span>
+            )}
+            {e.consecutiveErrors > 0 && (
+              <span className="text-destructive">Consecutive errors: {e.consecutiveErrors}</span>
+            )}
+          </div>
+        </Card>
+      ))}
+
+      {/* Delete confirmation dialog */}
+      <Dialog
+        open={deleteConfirm !== null}
+        title="Delete Schedule Entry"
+        description="This will permanently remove this scheduled task. Are you sure?"
+      >
+        <DialogFooter>
+          <Button variant="secondary" size="lg" onClick={() => setDeleteConfirm(null)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" size="lg" onClick={() => handleDelete(deleteConfirm!)}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+}

package/agent/dashboard/src/views/sessions/conversation-viewer.tsx

@@ -0,0 +1,279 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { botFetch } from "../../lib/api";
+import { sanitizeMarkdown } from "../../lib/sanitize";
+import { formatToolLabel } from "../../lib/format";
+
+// --- Copy button ---
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {
+      // Clipboard API may fail in non-HTTPS or unfocused contexts — ignore silently
+    });
+  }, [text]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity text-muted-foreground hover:text-foreground"
+      title="Copy to clipboard"
+    >
+      {copied ? (
+        <svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+interface ConversationMessage {
+  role: "user" | "assistant" | "tool_use" | "tool_result";
+  content: string;
+  timestamp: string;
+  toolName?: string;
+  toolInput?: unknown;
+  toolUseId?: string;
+  toolResultContent?: string;
+  model?: string;
+  thinkingContent?: string;
+  tokensIn?: number;
+  tokensOut?: number;
+}
+
+interface SessionDetail {
+  id: string;
+  messages: ConversationMessage[];
+  totalCostUsd: number;
+  model: string;
+}
+
+// --- Markdown renderer with DOMPurify sanitization ---
+
+function MarkdownContent({ text, variant }: { text: string; variant?: "user" | "assistant" }) {
+  const html = useMemo(() => sanitizeMarkdown(text), [text]);
+  return (
+    <div
+      className={`prose prose-sm max-w-none
+        ${variant === "user" ? "prose-headings:text-msg-user-foreground prose-p:text-msg-user-foreground prose-li:text-msg-user-foreground prose-strong:text-msg-user-foreground prose-a:text-msg-user-foreground" : "dark:prose-invert prose-headings:text-foreground"}
+        prose-pre:bg-code-bg prose-pre:border prose-pre:border-code-border prose-pre:text-xs
+        prose-code:bg-code-bg prose-code:text-code-text prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:before:content-none prose-code:after:content-none
+        prose-table:border-collapse prose-th:border prose-th:border-border prose-th:px-2 prose-th:py-1
+        prose-td:border prose-td:border-border prose-td:px-2 prose-td:py-1
+        prose-a:text-primary prose-blockquote:border-l-border prose-blockquote:text-muted-foreground
+        prose-hr:border-border`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+// --- Tool card ---
+
+function ToolCard({ msg, result }: { msg: ConversationMessage; result?: ConversationMessage }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toolLabel = formatToolLabel(msg.toolName ?? "tool", msg.toolInput);
+
+  const copyText = typeof msg.toolInput === "string"
+    ? msg.toolInput
+    : JSON.stringify(msg.toolInput, null, 2);
+
+  return (
+    <div className="my-1.5 border border-msg-tool-border rounded-md bg-msg-tool group">
+      <div className="flex items-center">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex-1 text-left px-3 py-2 flex items-center gap-2 text-xs hover:bg-accent/50 transition-colors rounded-md"
+        >
+          <span className="text-muted-foreground">{expanded ? "▼" : "▶"}</span>
+          <span className="text-primary font-mono">{msg.toolName}</span>
+          <span className="text-muted-foreground truncate flex-1">{toolLabel}</span>
+        </button>
+        <div className="pr-2">
+          <CopyButton text={copyText} />
+        </div>
+      </div>
+      {expanded && (
+        <div className="px-3 pb-2 space-y-2">
+          <div>
+            <div className="text-xs text-muted-foreground mb-1">Input:</div>
+            <pre className="text-xs bg-code-bg text-code-text border border-code-border rounded-md p-2 overflow-x-auto max-h-60 overflow-y-auto">
+              {typeof msg.toolInput === "string"
+                ? msg.toolInput
+                : JSON.stringify(msg.toolInput, null, 2)}
+            </pre>
+          </div>
+          {result && result.content && (
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">Output:</div>
+              <pre className="text-xs bg-code-bg text-code-text border border-code-border rounded-md p-2 overflow-x-auto max-h-60 overflow-y-auto">
+                {result.content}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Thinking block ---
+
+function ThinkingBlock({ content }: { content: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="my-1">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+      >
+        <span>{expanded ? "▼" : "▶"}</span>
+        <span className="italic">thinking...</span>
+      </button>
+      {expanded && (
+        <pre className="text-xs text-muted-foreground bg-muted rounded-md p-2 mt-1 whitespace-pre-wrap max-h-40 overflow-y-auto">
+          {content}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// --- Main component ---
+
+interface Props {
+  sessionId: string;
+  className?: string;
+}
+
+export default function ConversationViewer({ sessionId, className }: Props) {
+  const [detail, setDetail] = useState<SessionDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    const controller = new AbortController();
+    botFetch(`/api/sessions/${sessionId}`, { signal: controller.signal })
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        if (!data || !Array.isArray(data.messages)) throw new Error("Invalid session data");
+        setDetail(data as SessionDetail);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (controller.signal.aborted) return;
+        setError(err instanceof Error ? err.message : "Failed to load");
+        setLoading(false);
+      });
+    return () => controller.abort();
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (!loading) {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [detail, loading]);
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center text-muted-foreground ${className ?? ""}`}>
+        Loading conversation...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`flex items-center justify-center text-destructive ${className ?? ""}`}>
+        Error: {error}
+      </div>
+    );
+  }
+
+  if (!detail || detail.messages.length === 0) {
+    return (
+      <div className={`flex items-center justify-center text-muted-foreground ${className ?? ""}`}>
+        No messages in this session
+      </div>
+    );
+  }
+
+  // Build tool result lookup: toolUseId → message
+  const toolResults = new Map<string, ConversationMessage>();
+  for (const msg of detail.messages) {
+    if (msg.role === "tool_result" && msg.toolUseId) {
+      toolResults.set(msg.toolUseId, msg);
+    }
+  }
+
+  return (
+    <div className={`overflow-y-auto overflow-x-hidden scrollbar-thin ${className ?? ""}`}>
+      {/* Messages */}
+      <div className="p-4 space-y-3">
+        {detail.messages.map((msg, i) => {
+          // Skip tool_result — shown inside ToolCard
+          if (msg.role === "tool_result") return null;
+
+          const key = msg.toolUseId ?? `${msg.role}-${msg.timestamp}-${i}`;
+
+          if (msg.role === "user") {
+            return (
+              <div key={key} className="mr-12">
+                <div className="group relative bg-msg-user text-msg-user-foreground rounded-lg px-3 py-[1.2em] text-sm">
+                  <MarkdownContent text={msg.content} variant="user" />
+                  <div className="absolute bottom-1.5 right-1.5">
+                    <CopyButton text={msg.content} />
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          if (msg.role === "tool_use") {
+            const result = msg.toolUseId ? toolResults.get(msg.toolUseId) : undefined;
+            return <ToolCard key={key} msg={msg} result={result} />;
+          }
+
+          if (msg.role === "assistant") {
+            return (
+              <div key={key} className="ml-12">
+                {msg.thinkingContent && <ThinkingBlock content={msg.thinkingContent} />}
+                <div className="group relative bg-msg-assistant text-msg-assistant-foreground rounded-lg px-3 py-[1.2em] text-sm">
+                  <MarkdownContent text={msg.content} variant="assistant" />
+                  <div className="absolute bottom-1.5 right-1.5">
+                    <CopyButton text={msg.content} />
+                  </div>
+                </div>
+                {msg.tokensIn != null && (
+                  <div className="text-xs text-muted-foreground mt-1">
+                    {msg.tokensIn?.toLocaleString()} in / {msg.tokensOut?.toLocaleString()} out
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          return null;
+        })}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}

package/agent/dashboard/src/views/sessions/session-detail.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { FileType, FileTerminal } from "lucide-react";
+import ConversationViewer from "./conversation-viewer";
+import TerminalPane from "./terminal-pane";
+
+interface Props {
+  sessionId: string;
+  hasPty: boolean;
+  className?: string;
+}
+
+export default function SessionDetail({ sessionId, hasPty, className }: Props) {
+  const [showTerminal, setShowTerminal] = useState(false);
+
+  return (
+    <div className={`flex flex-col ${className ?? ""}`}>
+      {/* Action bar */}
+      <div className="flex items-center justify-end gap-1 px-4 py-2 bg-card">
+        <button
+          onClick={() => setShowTerminal(false)}
+          className={`p-1.5 transition-colors ${
+            !showTerminal ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+          }`}
+          title="History"
+        >
+          <FileType className="w-4 h-4" />
+        </button>
+        <button
+          onClick={() => hasPty && setShowTerminal(true)}
+          className={`p-1.5 transition-colors ${
+            showTerminal ? "text-foreground" : hasPty ? "text-muted-foreground hover:text-foreground" : "text-muted-foreground/40 cursor-not-allowed"
+          }`}
+          title={hasPty ? "Terminal" : "No terminal for this session"}
+          disabled={!hasPty}
+        >
+          <FileTerminal className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      {!showTerminal ? (
+        <ConversationViewer sessionId={sessionId} className="flex-1 min-h-0" />
+      ) : (
+        <TerminalPane sessionId={sessionId} className="flex-1 min-h-0" />
+      )}
+    </div>
+  );
+}