botschat 0.1.0

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

@@ -0,0 +1,413 @@
+import React, { useState } from "react";
+import { useAppState, useAppDispatch } from "../store";
+import { tasksApi, type Task } from "../api";
+
+const SCHEDULE_PRESETS = [
+  { label: "Every 30 min", value: "every 30m" },
+  { label: "Every hour", value: "every 1h" },
+  { label: "Every 6 hours", value: "every 6h" },
+  { label: "Daily at 9am", value: "cron 0 9 * * *" },
+  { label: "Daily at 6pm", value: "cron 0 18 * * *" },
+  { label: "Twice daily", value: "cron 0 9,18 * * *" },
+  { label: "Weekly Monday 9am", value: "cron 0 9 * * 1" },
+  { label: "Custom", value: "" },
+];
+
+/** Task bar for channel-based agents – sits below the channel header */
+export function TaskBar() {
+  const state = useAppState();
+  const dispatch = useAppDispatch();
+  const [showCreate, setShowCreate] = useState(false);
+  const [newTaskName, setNewTaskName] = useState("");
+  const [newTaskKind, setNewTaskKind] = useState<"adhoc" | "background">("adhoc");
+  const [newSchedule, setNewSchedule] = useState("");
+  const [newInstructions, setNewInstructions] = useState("");
+  const [editingTask, setEditingTask] = useState<Task | null>(null);
+  const [editSchedule, setEditSchedule] = useState("");
+  const [editInstructions, setEditInstructions] = useState("");
+  const [editEnabled, setEditEnabled] = useState(true);
+
+  const agent = state.agents.find((a) => a.id === state.selectedAgentId);
+  const channel = agent?.channelId
+    ? state.channels.find((ch) => ch.id === agent.channelId)
+    : null;
+  if (!channel) return null;
+
+  const handleCreate = async () => {
+    if (!newTaskName.trim()) return;
+    try {
+      await tasksApi.create(channel.id, {
+        name: newTaskName,
+        kind: newTaskKind,
+        schedule: newTaskKind === "background" ? newSchedule : undefined,
+        instructions: newTaskKind === "background" ? newInstructions : undefined,
+      });
+      const { tasks } = await tasksApi.list(channel.id);
+      dispatch({ type: "SET_TASKS", tasks });
+      setShowCreate(false);
+      setNewTaskName("");
+      setNewSchedule("");
+      setNewInstructions("");
+    } catch (err) {
+      console.error("Failed to create task:", err);
+    }
+  };
+
+  const handleOpenConfig = (t: Task, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingTask(t);
+    setEditSchedule(t.schedule ?? "");
+    setEditInstructions(t.instructions ?? "");
+    setEditEnabled(t.enabled);
+  };
+
+  const handleSaveConfig = async () => {
+    if (!editingTask) return;
+    try {
+      await tasksApi.update(channel.id, editingTask.id, {
+        schedule: editSchedule,
+        instructions: editInstructions,
+        enabled: editEnabled,
+      });
+      const { tasks } = await tasksApi.list(channel.id);
+      dispatch({ type: "SET_TASKS", tasks });
+      setEditingTask(null);
+    } catch (err) {
+      console.error("Failed to update task:", err);
+    }
+  };
+
+  const handleToggleEnabled = async (t: Task, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await tasksApi.update(channel.id, t.id, { enabled: !t.enabled });
+      const { tasks } = await tasksApi.list(channel.id);
+      dispatch({ type: "SET_TASKS", tasks });
+    } catch (err) {
+      console.error("Failed to toggle task:", err);
+    }
+  };
+
+  const handleDeleteTask = async (t: Task, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm(`Delete task "${t.name}"?`)) return;
+    try {
+      await tasksApi.delete(channel.id, t.id);
+      const { tasks } = await tasksApi.list(channel.id);
+      dispatch({ type: "SET_TASKS", tasks });
+      if (state.selectedTaskId === t.id && tasks.length > 0) {
+        dispatch({ type: "SELECT_TASK", taskId: tasks[0].id, sessionKey: tasks[0].sessionKey });
+      }
+    } catch (err) {
+      console.error("Failed to delete task:", err);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className="flex items-center gap-1 px-4 py-1.5 overflow-x-auto"
+        style={{
+          background: "var(--bg-surface)",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
+        {state.tasks.map((t) => (
+          <div key={t.id} className="flex items-center group">
+            <button
+              onClick={() =>
+                dispatch({
+                  type: "SELECT_TASK",
+                  taskId: t.id,
+                  sessionKey: t.sessionKey ?? undefined,
+                })
+              }
+              className={`flex items-center gap-1.5 px-3 py-1 text-caption rounded-lg whitespace-nowrap transition-colors ${
+                state.selectedTaskId === t.id
+                  ? "font-bold"
+                  : "hover:bg-[--bg-hover]"
+              }`}
+              style={
+                state.selectedTaskId === t.id
+                  ? {
+                      background: "var(--bg-hover)",
+                      color: "var(--text-primary)",
+                      boxShadow: "inset 0 -2px 0 var(--bg-active)",
+                    }
+                  : { color: "var(--text-secondary)" }
+              }
+            >
+              {t.kind === "background" ? (
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              ) : (
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="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" />
+                </svg>
+              )}
+              {t.name}
+              {t.kind === "background" && !t.enabled && (
+                <span className="text-tiny" style={{ color: "var(--text-muted)" }}>(paused)</span>
+              )}
+              {t.kind === "background" && t.schedule && t.enabled && (
+                <span className="text-tiny" style={{ color: "var(--text-muted)" }}>
+                  {t.schedule}
+                </span>
+              )}
+            </button>
+            {/* Config and toggle buttons for background tasks */}
+            {t.kind === "background" && state.selectedTaskId === t.id && (
+              <div className="flex items-center gap-0.5 ml-0.5">
+                <button
+                  onClick={(e) => handleOpenConfig(t, e)}
+                  title="Configure schedule"
+                  className="p-1 rounded hover:bg-[--bg-hover] transition-colors"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="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" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </button>
+                <button
+                  onClick={(e) => handleToggleEnabled(t, e)}
+                  title={t.enabled ? "Pause task" : "Resume task"}
+                  className="p-1 rounded hover:bg-[--bg-hover] transition-colors"
+                  style={{ color: t.enabled ? "var(--accent-green)" : "var(--accent-yellow)" }}
+                >
+                  {t.enabled ? (
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  ) : (
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {/* Add task */}
+        {showCreate ? (
+          <div className="flex items-center gap-1 ml-1">
+            <input
+              type="text"
+              placeholder="Task name"
+              value={newTaskName}
+              onChange={(e) => setNewTaskName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+              className="px-2 py-1 text-caption rounded-sm focus:outline-none w-36 placeholder:text-[--text-muted]"
+              style={{
+                background: "var(--bg-hover)",
+                color: "var(--text-primary)",
+                border: "1px solid var(--border)",
+              }}
+              autoFocus
+            />
+            <select
+              value={newTaskKind}
+              onChange={(e) => setNewTaskKind(e.target.value as "adhoc" | "background")}
+              className="px-1 py-1 text-tiny rounded-sm"
+              style={{
+                background: "var(--bg-hover)",
+                color: "var(--text-primary)",
+                border: "1px solid var(--border)",
+              }}
+            >
+              <option value="adhoc">Ad Hoc</option>
+              <option value="background">Background</option>
+            </select>
+            <button
+              onClick={handleCreate}
+              className="px-2 py-1 text-tiny font-bold text-white rounded-sm"
+              style={{ background: "var(--bg-active)" }}
+            >
+              Add
+            </button>
+            <button
+              onClick={() => { setShowCreate(false); setNewTaskName(""); setNewSchedule(""); setNewInstructions(""); }}
+              className="px-1 py-1 text-tiny"
+              style={{ color: "var(--text-muted)" }}
+            >
+              x
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowCreate(true)}
+            className="flex items-center gap-1 px-3 py-1 text-caption hover:bg-[--bg-hover] rounded-lg whitespace-nowrap transition-colors"
+            style={{ color: "var(--text-muted)" }}
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+            Add
+          </button>
+        )}
+      </div>
+
+      {/* Schedule config strip for new background task */}
+      {showCreate && newTaskKind === "background" && (
+        <div
+          className="px-4 py-2 flex flex-wrap items-center gap-2"
+          style={{ background: "var(--bg-surface)", borderBottom: "1px solid var(--border)" }}
+        >
+          <select
+            value={SCHEDULE_PRESETS.find((p) => p.value === newSchedule) ? newSchedule : ""}
+            onChange={(e) => setNewSchedule(e.target.value)}
+            className="px-2 py-1 text-caption rounded-sm"
+            style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+          >
+            <option value="" disabled>Schedule...</option>
+            {SCHEDULE_PRESETS.map((p) => (
+              <option key={p.value || "custom"} value={p.value}>{p.label}</option>
+            ))}
+          </select>
+          {(!SCHEDULE_PRESETS.find((p) => p.value === newSchedule) || newSchedule === "") && (
+            <input
+              type="text"
+              placeholder="e.g., every 6h or cron 0 */6 * * *"
+              value={newSchedule}
+              onChange={(e) => setNewSchedule(e.target.value)}
+              className="px-2 py-1 text-caption rounded-sm focus:outline-none flex-1 min-w-[200px] placeholder:text-[--text-muted]"
+              style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+            />
+          )}
+          <input
+            type="text"
+            placeholder="Agent instructions per run..."
+            value={newInstructions}
+            onChange={(e) => setNewInstructions(e.target.value)}
+            className="px-2 py-1 text-caption rounded-sm focus:outline-none flex-1 min-w-[200px] placeholder:text-[--text-muted]"
+            style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+          />
+        </div>
+      )}
+
+      {/* Task config editor modal */}
+      {editingTask && (
+        <div
+          className="fixed inset-0 flex items-center justify-center z-50"
+          style={{ background: "rgba(0,0,0,0.5)" }}
+          onClick={() => setEditingTask(null)}
+        >
+          <div
+            className="rounded-lg p-5 w-[480px] max-w-[90vw]"
+            style={{ background: "var(--bg-surface)", boxShadow: "var(--shadow-lg)" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-h2 font-bold" style={{ color: "var(--text-primary)" }}>
+                Configure: {editingTask.name}
+              </h2>
+              <button
+                onClick={() => setEditingTask(null)}
+                className="p-1 hover:bg-[--bg-hover] rounded"
+                style={{ color: "var(--text-muted)" }}
+              >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              {/* Schedule */}
+              <div>
+                <label className="block text-caption font-bold mb-1" style={{ color: "var(--text-secondary)" }}>
+                  Schedule
+                </label>
+                <select
+                  value={SCHEDULE_PRESETS.find((p) => p.value === editSchedule) ? editSchedule : ""}
+                  onChange={(e) => setEditSchedule(e.target.value)}
+                  className="w-full px-3 py-2 text-body rounded-md mb-1"
+                  style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+                >
+                  <option value="">Custom</option>
+                  {SCHEDULE_PRESETS.filter((p) => p.value).map((p) => (
+                    <option key={p.value} value={p.value}>{p.label}</option>
+                  ))}
+                </select>
+                <input
+                  type="text"
+                  placeholder="e.g., every 6h or cron 0 */6 * * *"
+                  value={editSchedule}
+                  onChange={(e) => setEditSchedule(e.target.value)}
+                  className="w-full px-3 py-2 text-body rounded-md focus:outline-none placeholder:text-[--text-muted]"
+                  style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+                />
+              </div>
+
+              {/* Instructions */}
+              <div>
+                <label className="block text-caption font-bold mb-1" style={{ color: "var(--text-secondary)" }}>
+                  Agent Instructions (per run)
+                </label>
+                <textarea
+                  placeholder="What should the agent do each time this task runs?"
+                  value={editInstructions}
+                  onChange={(e) => setEditInstructions(e.target.value)}
+                  rows={4}
+                  className="w-full px-3 py-2 text-body rounded-md focus:outline-none resize-y placeholder:text-[--text-muted]"
+                  style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+                />
+              </div>
+
+              {/* Enabled toggle */}
+              <div className="flex items-center gap-3">
+                <label className="text-caption font-bold" style={{ color: "var(--text-secondary)" }}>
+                  Enabled
+                </label>
+                <button
+                  onClick={() => setEditEnabled(!editEnabled)}
+                  className="relative w-10 h-5 rounded-full transition-colors"
+                  style={{ background: editEnabled ? "var(--accent-green)" : "var(--border)" }}
+                >
+                  <div
+                    className="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform"
+                    style={{ left: editEnabled ? 20 : 2 }}
+                  />
+                </button>
+                <span className="text-caption" style={{ color: "var(--text-muted)" }}>
+                  {editEnabled ? "Running on schedule" : "Paused"}
+                </span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center justify-between mt-5 pt-3" style={{ borderTop: "1px solid var(--border)" }}>
+              <button
+                onClick={(e) => { handleDeleteTask(editingTask, e); setEditingTask(null); }}
+                className="px-3 py-1.5 text-caption rounded-md hover:bg-[--bg-hover] transition-colors"
+                style={{ color: "var(--accent-red)" }}
+              >
+                Delete task
+              </button>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setEditingTask(null)}
+                  className="px-4 py-1.5 text-caption rounded-md hover:bg-[--bg-hover] transition-colors"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSaveConfig}
+                  className="px-4 py-1.5 text-caption font-bold text-white rounded-md"
+                  style={{ background: "var(--bg-active)" }}
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+import { useAppState, useAppDispatch, type ChatMessage } from "../store";
+import { messagesApi } from "../api";
+import type { WSMessage } from "../ws";
+import { MessageContent } from "./MessageContent";
+import { dlog } from "../debug-log";
+
+type ThreadPanelProps = {
+  sendMessage: (msg: WSMessage) => void;
+};
+
+/** Detail Panel (section 5.5) – slides in from right */
+export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
+  const state = useAppState();
+  const dispatch = useAppDispatch();
+  const [input, setInput] = useState("");
+
+  // Load thread message history when a thread is opened
+  useEffect(() => {
+    if (!state.activeThreadId || !state.selectedSessionKey || !state.user) return;
+    const threadSessionKey = `${state.selectedSessionKey}:thread:${state.activeThreadId}`;
+    dlog.info("Thread", `Loading history for thread ${state.activeThreadId}`);
+    messagesApi
+      .list(state.user.id, threadSessionKey, state.activeThreadId)
+      .then(({ messages }) => {
+        dlog.info("Thread", `Loaded ${messages.length} thread messages`);
+        if (messages.length > 0) {
+          dispatch({ type: "OPEN_THREAD", threadId: state.activeThreadId!, messages });
+        }
+      })
+      .catch((err) => {
+        dlog.error("Thread", `Failed to load thread history: ${err}`);
+      });
+  }, [state.activeThreadId]);
+
+  if (!state.activeThreadId) return null;
+
+  const parentMessage = state.messages.find(
+    (m) => m.id === state.activeThreadId,
+  );
+
+  const handleSend = () => {
+    if (!input.trim() || !state.selectedSessionKey) return;
+
+    const trimmed = input.trim();
+    const threadSessionKey = `${state.selectedSessionKey}:thread:${state.activeThreadId}`;
+    dlog.info("Thread", `Send reply: ${trimmed.length > 120 ? trimmed.slice(0, 120) + "…" : trimmed}`, { threadId: state.activeThreadId });
+
+    const msg: ChatMessage = {
+      id: crypto.randomUUID(),
+      sender: "user",
+      text: trimmed,
+      timestamp: Date.now(),
+      threadId: state.activeThreadId ?? undefined,
+    };
+
+    dispatch({ type: "ADD_THREAD_MESSAGE", message: msg });
+
+    sendMessage({
+      type: "user.message",
+      sessionKey: threadSessionKey,
+      text: trimmed,
+      userId: state.user?.id ?? "",
+      messageId: msg.id,
+    });
+
+    setInput("");
+  };
+
+  return (
+    <div
+      className="flex flex-col h-full"
+      style={{
+        width: 420,
+        minWidth: 320,
+        background: "var(--bg-surface)",
+        borderLeft: "1px solid var(--border)",
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-4"
+        style={{ height: 44, borderBottom: "1px solid var(--border)" }}
+      >
+        <h3 className="text-h1" style={{ color: "var(--text-primary)" }}>Thread</h3>
+        <button
+          onClick={() => dispatch({ type: "CLOSE_THREAD" })}
+          className="p-1 rounded hover:bg-[--bg-hover] transition-colors"
+          style={{ color: "var(--text-secondary)" }}
+          aria-label="Close thread"
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Scrollable area: parent message + replies */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Parent message */}
+        {parentMessage && (
+          <div className="px-5 py-3" style={{ borderBottom: "1px solid var(--border)" }}>
+            <div className="flex gap-2">
+              <div
+                className="w-9 h-9 rounded flex-shrink-0 flex items-center justify-center text-white text-caption font-bold"
+                style={{ background: parentMessage.sender === "user" ? "#9B59B6" : "#2BAC76" }}
+              >
+                {parentMessage.sender === "user" ? "U" : "A"}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-baseline gap-2 mb-0.5">
+                  <span className="text-h2" style={{ color: "var(--text-primary)" }}>
+                    {parentMessage.sender === "user" ? "You" : "OpenClaw Agent"}
+                  </span>
+                  <span className="text-caption" style={{ color: "var(--text-secondary)" }}>
+                    {new Date(parentMessage.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                  </span>
+                </div>
+                <MessageContent text={parentMessage.text} mediaUrl={parentMessage.mediaUrl} />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Reply count divider */}
+        <div className="px-5 py-2" style={{ borderBottom: "1px solid var(--border)" }}>
+          <span className="text-caption font-bold" style={{ color: "var(--text-link)" }}>
+            {state.threadMessages.length} {state.threadMessages.length === 1 ? "reply" : "replies"}
+          </span>
+        </div>
+
+        {/* Thread replies – flat rows like main content */}
+        {state.threadMessages.map((msg, i) => {
+          const prevMsg = i > 0 ? state.threadMessages[i - 1] : null;
+          const isGrouped = prevMsg?.sender === msg.sender
+            && (msg.timestamp - prevMsg.timestamp) < 300000;
+
+          return (
+            <div
+              key={msg.id}
+              className="px-5 hover:bg-[--bg-hover] transition-colors"
+              style={{ paddingTop: isGrouped ? 2 : 8, paddingBottom: 2 }}
+            >
+              <div className="flex gap-2">
+                <div className="flex-shrink-0" style={{ width: 36 }}>
+                  {!isGrouped && (
+                    <div
+                      className="w-9 h-9 rounded flex items-center justify-center text-white text-caption font-bold"
+                      style={{ background: msg.sender === "user" ? "#9B59B6" : "#2BAC76" }}
+                    >
+                      {msg.sender === "user" ? "U" : "A"}
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  {!isGrouped && (
+                    <div className="flex items-baseline gap-2 mb-0.5">
+                      <span className="text-h2" style={{ color: "var(--text-primary)" }}>
+                        {msg.sender === "user" ? "You" : "OpenClaw Agent"}
+                      </span>
+                      <span className="text-caption" style={{ color: "var(--text-secondary)" }}>
+                        {new Date(msg.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                      </span>
+                    </div>
+                  )}
+                  <MessageContent
+                    text={msg.text}
+                    mediaUrl={msg.mediaUrl}
+                    a2ui={msg.a2ui}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div> {/* end scrollable area */}
+
+      {/* Thread composer */}
+      <div className="px-4 pb-3 pt-2">
+        <div
+          className="rounded-md"
+          style={{ border: "1px solid var(--border)", background: "var(--bg-surface)" }}
+        >
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            placeholder="Reply…"
+            rows={1}
+            className="w-full px-3 py-2 text-body bg-transparent resize-none focus:outline-none placeholder:text-[--text-muted]"
+            style={{ color: "var(--text-primary)", minHeight: 36 }}
+          />
+          <div className="flex justify-end px-3 pb-2">
+            <button
+              onClick={handleSend}
+              disabled={!input.trim()}
+              className="px-3 py-1 rounded-sm text-caption font-bold text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              style={{ background: "var(--bg-active)" }}
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/web/src/debug-log.ts

@@ -0,0 +1,58 @@
+/**
+ * Global debug log — captures WS messages, API calls, state changes, errors.
+ * Subscribers are notified on every new entry so React can re-render.
+ */
+
+export type LogLevel = "info" | "warn" | "error" | "ws-in" | "ws-out" | "api";
+
+export type LogEntry = {
+  id: number;
+  ts: number;
+  level: LogLevel;
+  tag: string;
+  message: string;
+  detail?: string; // collapsed JSON / extra info
+};
+
+const MAX_ENTRIES = 500;
+let _nextId = 1;
+const _entries: LogEntry[] = [];
+const _listeners = new Set<() => void>();
+
+export function addLog(level: LogLevel, tag: string, message: string, detail?: unknown): void {
+  const entry: LogEntry = {
+    id: _nextId++,
+    ts: Date.now(),
+    level,
+    tag,
+    message,
+    detail: detail !== undefined ? (typeof detail === "string" ? detail : JSON.stringify(detail, null, 2)) : undefined,
+  };
+  _entries.push(entry);
+  if (_entries.length > MAX_ENTRIES) _entries.splice(0, _entries.length - MAX_ENTRIES);
+  for (const fn of _listeners) fn();
+}
+
+export function getLogEntries(): readonly LogEntry[] {
+  return _entries;
+}
+
+export function clearLog(): void {
+  _entries.length = 0;
+  for (const fn of _listeners) fn();
+}
+
+export function subscribeLog(fn: () => void): () => void {
+  _listeners.add(fn);
+  return () => _listeners.delete(fn);
+}
+
+// Convenience helpers
+export const dlog = {
+  info: (tag: string, msg: string, detail?: unknown) => addLog("info", tag, msg, detail),
+  warn: (tag: string, msg: string, detail?: unknown) => addLog("warn", tag, msg, detail),
+  error: (tag: string, msg: string, detail?: unknown) => addLog("error", tag, msg, detail),
+  wsIn: (tag: string, msg: string, detail?: unknown) => addLog("ws-in", tag, msg, detail),
+  wsOut: (tag: string, msg: string, detail?: unknown) => addLog("ws-out", tag, msg, detail),
+  api: (tag: string, msg: string, detail?: unknown) => addLog("api", tag, msg, detail),
+};