botschat 0.1.0

package/packages/web/src/components/CronSidebar.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { useAppState, useAppDispatch } from "../store";
+
+function relativeTime(ts: number): string {
+  const now = Date.now() / 1000;
+  const diff = now - ts;
+  if (diff < 60) return "just now";
+  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 function CronSidebar() {
+  const state = useAppState();
+  const dispatch = useAppDispatch();
+
+  const handleSelect = (taskId: string) => {
+    dispatch({ type: "SELECT_CRON_TASK", taskId });
+  };
+
+  return (
+    <div
+      className="flex flex-col h-full"
+      style={{ width: 220, minWidth: 160, background: "var(--bg-secondary)", borderRight: "1px solid var(--border)" }}
+    >
+      {/* Header */}
+      <div className="px-4 py-3 flex items-center gap-2">
+        <span className="text-[--text-sidebar-active] font-bold text-h2 truncate flex-1">
+          Automations
+        </span>
+      </div>
+
+      {/* Connection status */}
+      <div className="px-4 pb-2">
+        <div className="flex items-center gap-1.5">
+          <div
+            className="w-2 h-2 rounded-full"
+            style={{ background: state.openclawConnected ? "var(--accent-green)" : "var(--accent-red)" }}
+          />
+          <span className="text-tiny text-[--text-muted]">
+            {state.openclawConnected ? "OpenClaw connected" : "OpenClaw offline"}
+          </span>
+        </div>
+      </div>
+
+      {/* Task count */}
+      <div className="px-4 pb-2">
+        <span className="text-tiny text-[--text-muted]">
+          {state.cronTasks.length} cron job{state.cronTasks.length !== 1 ? "s" : ""}
+        </span>
+      </div>
+
+      {/* Job list */}
+      <div className="flex-1 overflow-y-auto sidebar-scroll">
+        {state.cronTasks.length === 0 ? (
+          <div className="px-4 py-8 text-center">
+            <svg
+              className="w-10 h-10 mx-auto mb-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1}
+              style={{ color: "var(--text-muted)" }}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <p className="text-caption text-[--text-muted]">
+              No automations yet.
+            </p>
+            <p className="text-tiny text-[--text-muted] mt-1">
+              Cron jobs from OpenClaw will appear here automatically.
+            </p>
+          </div>
+        ) : (
+          state.cronTasks.map((task) => {
+            const isSelected = state.selectedCronTaskId === task.id;
+            const isEnabled = task.enabled;
+            // Determine status dot color
+            let dotColor = "var(--accent-green)"; // enabled
+            if (!isEnabled) dotColor = "var(--text-muted)"; // paused
+
+            return (
+              <button
+                key={task.id}
+                onClick={() => handleSelect(task.id)}
+                className="w-full text-left py-2 transition-colors"
+                style={{
+                  paddingLeft: isSelected ? 13 : 16,
+                  paddingRight: 16,
+                  background: isSelected ? "var(--bg-hover)" : undefined,
+                  borderLeft: isSelected ? "3px solid var(--bg-active)" : "3px solid transparent",
+                  color: isSelected ? "var(--text-sidebar-active)" : "var(--text-sidebar)",
+                }}
+                onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = "var(--sidebar-hover)"; }}
+                onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = isSelected ? "var(--bg-hover)" : ""; }}
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <div
+                    className="w-2 h-2 rounded-full flex-shrink-0"
+                    style={{ background: dotColor }}
+                  />
+                  <span className={`text-body truncate ${isSelected ? "font-bold" : ""}`}>
+                    {task.name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 mt-0.5 pl-4">
+                  <span className="text-tiny truncate" style={{ color: "var(--text-muted)" }}>
+                    {task.schedule ?? "no schedule"}
+                  </span>
+                  {!isEnabled && (
+                    <span className="text-tiny" style={{ color: "var(--text-muted)" }}>
+                      paused
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/packages/web/src/components/DebugLogPanel.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { getLogEntries, subscribeLog, clearLog, type LogEntry, type LogLevel } from "../debug-log";
+
+const LEVEL_COLORS: Record<LogLevel, string> = {
+  info: "var(--text-muted)",
+  warn: "var(--accent-yellow)",
+  error: "var(--accent-red)",
+  "ws-in": "#6BCB77",
+  "ws-out": "#4D96FF",
+  api: "#C77DFF",
+};
+
+const LEVEL_LABELS: Record<LogLevel, string> = {
+  info: "INF",
+  warn: "WRN",
+  error: "ERR",
+  "ws-in": "WS\u2193",
+  "ws-out": "WS\u2191",
+  api: "API",
+};
+
+function formatTs(ts: number): string {
+  const d = new Date(ts);
+  return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }) +
+    "." + String(d.getMilliseconds()).padStart(3, "0");
+}
+
+export function DebugLogPanel() {
+  const entries = useSyncExternalStore(subscribeLog, getLogEntries);
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<LogLevel | "all">("all");
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (open && autoScrollRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries.length, open]);
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    autoScrollRef.current = scrollHeight - scrollTop - clientHeight < 40;
+  };
+
+  const toggleExpand = (id: number) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const filtered = filter === "all" ? entries : entries.filter((e) => e.level === filter);
+  const entryCount = entries.length;
+
+  return (
+    <div
+      style={{
+        flexShrink: 0,
+        fontFamily: "var(--font-mono)",
+        fontSize: 12,
+        lineHeight: 1.5,
+      }}
+    >
+      {/* Toggle bar */}
+      <div
+        onClick={() => setOpen(!open)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "3px 12px",
+          background: "var(--bg-secondary)",
+          borderTop: "1px solid var(--border)",
+          cursor: "pointer",
+          userSelect: "none",
+        }}
+      >
+        <svg
+          width={10} height={10}
+          viewBox="0 0 10 10"
+          style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.15s", flexShrink: 0 }}
+        >
+          <path d="M1 7L5 3l4 4" stroke="var(--text-muted)" strokeWidth={1.5} fill="none" />
+        </svg>
+        <span style={{ color: "var(--text-muted)", fontWeight: 600, fontSize: 11 }}>
+          Debug Log
+        </span>
+        <span style={{ color: "var(--text-muted)", fontSize: 10 }}>
+          ({entryCount})
+        </span>
+        {/* Quick filter pills when open */}
+        {open && (
+          <div style={{ display: "flex", gap: 2, marginLeft: 8 }} onClick={(e) => e.stopPropagation()}>
+            {(["all", "ws-in", "ws-out", "api", "info", "warn", "error"] as const).map((lvl) => (
+              <button
+                key={lvl}
+                onClick={() => setFilter(lvl)}
+                style={{
+                  padding: "1px 6px",
+                  borderRadius: 3,
+                  border: "none",
+                  fontSize: 10,
+                  fontFamily: "var(--font-mono)",
+                  cursor: "pointer",
+                  background: filter === lvl ? "var(--bg-active)" : "var(--bg-hover)",
+                  color: filter === lvl ? "#fff" : (lvl === "all" ? "var(--text-muted)" : LEVEL_COLORS[lvl as LogLevel]),
+                }}
+              >
+                {lvl === "all" ? "ALL" : LEVEL_LABELS[lvl as LogLevel]}
+              </button>
+            ))}
+          </div>
+        )}
+        {open && (
+          <button
+            onClick={(e) => { e.stopPropagation(); clearLog(); }}
+            style={{
+              marginLeft: "auto",
+              padding: "1px 8px",
+              borderRadius: 3,
+              border: "none",
+              fontSize: 10,
+              fontFamily: "var(--font-mono)",
+              cursor: "pointer",
+              background: "var(--bg-hover)",
+              color: "var(--text-muted)",
+            }}
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
+      {/* Log content */}
+      {open && (
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          style={{
+            height: 220,
+            overflowY: "auto",
+            overflowX: "hidden",
+            background: "var(--bg-primary)",
+            borderTop: "1px solid var(--border)",
+          }}
+        >
+          {filtered.length === 0 && (
+            <div style={{ padding: "16px 12px", color: "var(--text-muted)", textAlign: "center" }}>
+              No log entries yet.
+            </div>
+          )}
+          {filtered.map((entry) => (
+            <LogRow
+              key={entry.id}
+              entry={entry}
+              expanded={expandedIds.has(entry.id)}
+              onToggleExpand={() => toggleExpand(entry.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LogRow({
+  entry,
+  expanded,
+  onToggleExpand,
+}: {
+  entry: LogEntry;
+  expanded: boolean;
+  onToggleExpand: () => void;
+}) {
+  const levelColor = LEVEL_COLORS[entry.level];
+  const levelLabel = LEVEL_LABELS[entry.level];
+
+  return (
+    <div
+      style={{
+        padding: "1px 12px",
+        borderBottom: "1px solid var(--border)",
+        wordBreak: "break-all",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-hover)")}
+      onMouseLeave={(e) => (e.currentTarget.style.background = "")}
+    >
+      <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
+        {/* Timestamp */}
+        <span style={{ color: "var(--text-muted)", flexShrink: 0, width: 85 }}>
+          {formatTs(entry.ts)}
+        </span>
+        {/* Level badge */}
+        <span
+          style={{
+            color: levelColor,
+            fontWeight: 700,
+            flexShrink: 0,
+            width: 28,
+            textAlign: "center",
+          }}
+        >
+          {levelLabel}
+        </span>
+        {/* Tag */}
+        <span style={{ color: "var(--text-secondary)", flexShrink: 0, minWidth: 50 }}>
+          [{entry.tag}]
+        </span>
+        {/* Message */}
+        <span style={{ color: "var(--text-primary)", flex: 1 }}>
+          {entry.message}
+        </span>
+        {/* Expand toggle for detail */}
+        {entry.detail && (
+          <button
+            onClick={onToggleExpand}
+            style={{
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              color: "var(--text-muted)",
+              fontSize: 10,
+              padding: "0 4px",
+              flexShrink: 0,
+            }}
+          >
+            {expanded ? "\u25BC" : "\u25B6"}
+          </button>
+        )}
+      </div>
+      {/* Expanded detail */}
+      {expanded && entry.detail && (
+        <pre
+          style={{
+            margin: "2px 0 4px 121px",
+            padding: "4px 8px",
+            background: "var(--code-bg)",
+            borderRadius: 3,
+            color: "var(--text-secondary)",
+            fontSize: 11,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+            maxHeight: 200,
+            overflowY: "auto",
+          }}
+        >
+          {entry.detail}
+        </pre>
+      )}
+    </div>
+  );
+}

package/packages/web/src/components/IconRail.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { useAppState, useAppDispatch, type ActiveView } from "../store";
+import { setToken } from "../api";
+import { dlog } from "../debug-log";
+
+type IconRailProps = {
+  onToggleTheme: () => void;
+  onOpenSettings: () => void;
+  theme: "dark" | "light";
+};
+
+export function IconRail({ onToggleTheme, onOpenSettings, theme }: IconRailProps) {
+  const state = useAppState();
+  const dispatch = useAppDispatch();
+
+  const handleLogout = () => {
+    dlog.info("Auth", `Logout — user ${state.user?.email}`);
+    setToken(null);
+    dispatch({ type: "LOGOUT" });
+  };
+
+  const setView = (view: ActiveView) => {
+    dlog.info("Nav", `Switch view → ${view}`);
+    dispatch({ type: "SET_ACTIVE_VIEW", view });
+  };
+
+  const userInitial = state.user?.displayName?.[0]?.toUpperCase()
+    ?? state.user?.email?.[0]?.toUpperCase()
+    ?? "?";
+
+  return (
+    <div
+      className="flex flex-col items-center py-3 gap-2 h-full"
+      style={{ width: 68, background: "var(--bg-primary)", borderRight: "1px solid var(--border)" }}
+    >
+      {/* Workspace icon */}
+      <button
+        className="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-sm hover:rounded-xl transition-all"
+        style={{ background: "#1264A3" }}
+        title="BotsChat"
+      >
+        BC
+      </button>
+
+      <div className="w-8 border-t my-1" style={{ borderColor: "var(--sidebar-divider)" }} />
+
+      {/* Home */}
+      <RailIcon
+        label="Home"
+        active={false}
+        icon={
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+          </svg>
+        }
+      />
+
+      {/* Messages */}
+      <RailIcon
+        label="Messages"
+        active={state.activeView === "messages"}
+        onClick={() => setView("messages")}
+        icon={
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+          </svg>
+        }
+      />
+
+      {/* Automations */}
+      <RailIcon
+        label="Automations"
+        active={state.activeView === "automations"}
+        onClick={() => setView("automations")}
+        icon={
+          <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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        }
+      />
+
+      <div className="flex-1" />
+
+      {/* Settings */}
+      <RailIcon
+        label="Settings"
+        active={false}
+        onClick={onOpenSettings}
+        icon={
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        }
+      />
+
+      {/* Theme toggle */}
+      <RailIcon
+        label={theme === "dark" ? "Light mode" : "Dark mode"}
+        active={false}
+        onClick={onToggleTheme}
+        icon={
+          theme === "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>
+          )
+        }
+      />
+
+      {/* User avatar */}
+      <button
+        onClick={handleLogout}
+        className="w-7 h-7 rounded flex items-center justify-center text-xs font-bold text-white mt-1"
+        style={{ background: "#9B59B6" }}
+        title={`${state.user?.displayName ?? state.user?.email} (click to logout)`}
+      >
+        {userInitial}
+      </button>
+    </div>
+  );
+}
+
+function RailIcon({
+  label,
+  active,
+  icon,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <div className="relative flex items-center justify-center">
+      {/* Active indicator - left bar */}
+      {active && (
+        <div
+          className="absolute left-0 w-[3px] h-5 rounded-r-sm"
+          style={{ left: -4, background: "var(--text-sidebar-active)" }}
+        />
+      )}
+      <button
+        onClick={onClick}
+        className={`w-9 h-9 rounded-lg flex items-center justify-center transition-colors ${
+          active ? "text-[--text-sidebar-active]" : "text-[--text-sidebar] hover:text-[--text-sidebar-active]"
+        }`}
+        style={active ? { background: "var(--sidebar-hover)" } : undefined}
+        onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--sidebar-hover)"; }}
+        onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = ""; }}
+        title={label}
+        aria-label={label}
+      >
+        {icon}
+      </button>
+    </div>
+  );
+}

package/packages/web/src/components/JobList.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import type { Job } from "../api";
+
+type JobListProps = {
+  jobs: Job[];
+  selectedJobId: string | null;
+  onSelectJob: (jobId: string) => void;
+};
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case "ok": return "OK";
+    case "error": return "ERR";
+    case "skipped": return "SKIP";
+    case "running": return "RUN";
+    default: return status.toUpperCase();
+  }
+}
+
+function statusColors(status: string): { bg: string; fg: string } {
+  switch (status) {
+    case "ok": return { bg: "rgba(43,172,118,0.15)", fg: "var(--accent-green)" };
+    case "error": return { bg: "rgba(224,30,90,0.15)", fg: "var(--accent-red)" };
+    case "running": return { bg: "rgba(29,155,209,0.15)", fg: "var(--text-link)" };
+    default: return { bg: "rgba(232,162,48,0.15)", fg: "var(--accent-yellow)" };
+  }
+}
+
+export function JobList({ jobs, selectedJobId, onSelectJob }: JobListProps) {
+  if (jobs.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center"
+        style={{
+          width: 192,
+          borderRight: "1px solid var(--border)",
+          background: "var(--bg-surface)",
+        }}
+      >
+        <div className="text-center p-4">
+          <svg
+            className="w-8 h-8 mx-auto mb-2"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            style={{ color: "var(--text-muted)" }}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p className="text-tiny" style={{ color: "var(--text-muted)" }}>
+            No runs yet.
+            <br />
+            Waiting for schedule...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="overflow-y-auto"
+      style={{
+        width: 192,
+        borderRight: "1px solid var(--border)",
+        background: "var(--bg-surface)",
+      }}
+    >
+      <div className="px-3 py-2" style={{ borderBottom: "1px solid var(--border)" }}>
+        <span className="text-tiny uppercase tracking-wider font-bold" style={{ color: "var(--text-muted)" }}>
+          Job History
+        </span>
+        <span className="text-tiny ml-1" style={{ color: "var(--text-muted)" }}>
+          ({jobs.length})
+        </span>
+      </div>
+      {jobs.map((job, idx) => {
+        const colors = statusColors(job.status);
+        const displayNum = job.number || jobs.length - idx;
+        return (
+          <button
+            key={job.id}
+            onClick={() => onSelectJob(job.id)}
+            className={`w-full text-left px-3 py-2 hover:bg-[--bg-hover] transition-colors ${
+              selectedJobId === job.id ? "bg-[--bg-hover]" : ""
+            }`}
+            style={{
+              borderBottom: "1px solid var(--border)",
+              ...(selectedJobId === job.id ? { borderLeft: "3px solid var(--bg-active)" } : {}),
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-tiny font-mono" style={{ color: "var(--text-muted)" }}>
+                #{displayNum}
+              </span>
+              <span
+                className="text-tiny px-1.5 py-0.5 rounded-sm font-bold"
+                style={{ background: colors.bg, color: colors.fg }}
+              >
+                {statusLabel(job.status)}
+              </span>
+            </div>
+            <div className="text-tiny mt-0.5" style={{ color: "var(--text-muted)" }}>
+              {job.time}
+              {job.durationMs != null && (
+                <span className="ml-1">({(job.durationMs / 1000).toFixed(1)}s)</span>
+              )}
+            </div>
+            {job.summary && (
+              <div className="text-caption mt-1 truncate" style={{ color: "var(--text-secondary)" }}>
+                {job.summary}
+              </div>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}