botschat 0.1.0

package/packages/web/src/index.css

@@ -0,0 +1,170 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ========== Dark Theme ========== */
+[data-theme="dark"] {
+  --bg-primary: #1A1D21;
+  --bg-secondary: #19171D;
+  --bg-surface: #222529;
+  --bg-hover: #2C2F33;
+  --bg-active: #1164A3;
+
+  --text-primary: #D1D2D3;
+  --text-secondary: #ABABAD;
+  --text-muted: #6B6F76;
+  --text-link: #1D9BD1;
+  --text-sidebar: #CFC3CF;
+  --text-sidebar-active: #FFFFFF;
+
+  --border: #35373B;
+  --code-bg: #2D2D2D;
+  --code-text: #E06C75;
+
+  --sidebar-border: rgba(255,255,255,0.1);
+  --sidebar-hover: rgba(255,255,255,0.1);
+  --sidebar-divider: rgba(255,255,255,0.2);
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+}
+
+/* ========== Light Theme ========== */
+[data-theme="light"] {
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F7F7F8;
+  --bg-surface: #FFFFFF;
+  --bg-hover: #F0F0F0;
+  --bg-active: #1264A3;
+
+  --text-primary: #1D1C1D;
+  --text-secondary: #616061;
+  --text-muted: #868686;
+  --text-link: #1264A3;
+  --text-sidebar: #616061;
+  --text-sidebar-active: #1D1C1D;
+
+  --border: #DDDDDD;
+  --sidebar-border: rgba(0,0,0,0.1);
+  --sidebar-hover: rgba(0,0,0,0.06);
+  --sidebar-divider: rgba(0,0,0,0.12);
+  --code-bg: #F0F0F0;
+  --code-text: #D72B3F;
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
+}
+
+/* ========== Cross-theme constants ========== */
+:root {
+  --accent-green: #2BAC76;
+  --accent-yellow: #E8A230;
+  --accent-red: #E01E5A;
+
+  --space-unit: 4px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: "Lato", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", "Consolas", "Monaco", monospace;
+  --font-size-base: 15px;
+  --line-height-base: 1.46;
+}
+
+/* ========== Base styles ========== */
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { border-radius: 3px; }
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+
+/* Icon Rail + Sidebar scrollbar – follows theme */
+[data-theme="dark"] .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
+[data-theme="dark"] .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
+[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+
+/* Inline code */
+code:not(pre code) {
+  background: var(--code-bg);
+  color: var(--code-text);
+  font-family: var(--font-mono);
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+
+/* ========== Syntax highlighting (highlight.js) ========== */
+/* Adapted from GitHub Dark / GitHub Light for theme compatibility */
+[data-theme="dark"] .hljs { color: #c9d1d9; }
+[data-theme="dark"] .hljs-keyword,
+[data-theme="dark"] .hljs-selector-tag { color: #ff7b72; }
+[data-theme="dark"] .hljs-string,
+[data-theme="dark"] .hljs-addition { color: #a5d6ff; }
+[data-theme="dark"] .hljs-comment,
+[data-theme="dark"] .hljs-quote { color: #8b949e; font-style: italic; }
+[data-theme="dark"] .hljs-number,
+[data-theme="dark"] .hljs-literal { color: #79c0ff; }
+[data-theme="dark"] .hljs-built_in,
+[data-theme="dark"] .hljs-type { color: #ffa657; }
+[data-theme="dark"] .hljs-title,
+[data-theme="dark"] .hljs-function { color: #d2a8ff; }
+[data-theme="dark"] .hljs-attr,
+[data-theme="dark"] .hljs-attribute { color: #79c0ff; }
+[data-theme="dark"] .hljs-variable,
+[data-theme="dark"] .hljs-template-variable { color: #ffa657; }
+[data-theme="dark"] .hljs-selector-class { color: #7ee787; }
+[data-theme="dark"] .hljs-deletion { color: #ffa198; background: rgba(248,81,73,0.1); }
+[data-theme="dark"] .hljs-meta { color: #79c0ff; }
+
+[data-theme="light"] .hljs { color: #24292f; }
+[data-theme="light"] .hljs-keyword,
+[data-theme="light"] .hljs-selector-tag { color: #cf222e; }
+[data-theme="light"] .hljs-string,
+[data-theme="light"] .hljs-addition { color: #0a3069; }
+[data-theme="light"] .hljs-comment,
+[data-theme="light"] .hljs-quote { color: #6e7781; font-style: italic; }
+[data-theme="light"] .hljs-number,
+[data-theme="light"] .hljs-literal { color: #0550ae; }
+[data-theme="light"] .hljs-built_in,
+[data-theme="light"] .hljs-type { color: #953800; }
+[data-theme="light"] .hljs-title,
+[data-theme="light"] .hljs-function { color: #8250df; }
+[data-theme="light"] .hljs-attr,
+[data-theme="light"] .hljs-attribute { color: #0550ae; }
+[data-theme="light"] .hljs-variable,
+[data-theme="light"] .hljs-template-variable { color: #953800; }
+[data-theme="light"] .hljs-selector-class { color: #116329; }
+[data-theme="light"] .hljs-deletion { color: #82071e; background: rgba(255,129,130,0.1); }
+[data-theme="light"] .hljs-meta { color: #0550ae; }
+
+/* Hide scrollbar for skill buttons row */
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* Focus visible */
+*:focus-visible {
+  outline: 2px solid var(--bg-active);
+  outline-offset: 1px;
+}
+
+/* Transitions for theme switching */
+body, .theme-transition {
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}

package/packages/web/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/packages/web/src/store.ts

@@ -0,0 +1,492 @@
+/** Minimal reactive store using React context + useState. */
+
+import { createContext, useContext } from "react";
+import type { Agent as ApiAgent, Channel, Task, TaskWithChannel, Job, ModelInfo, Session } from "./api";
+
+export type ChatMessage = {
+  id: string;
+  sender: "user" | "agent";
+  text: string;
+  timestamp: number;
+  mediaUrl?: string;
+  a2ui?: string; // A2UI JSONL data
+  threadId?: string;
+  isStreaming?: boolean; // true while streaming is in progress
+  /** Tracks which action blocks have been resolved, keyed by prompt hash */
+  resolvedActions?: Record<string, { value: string; label: string }>;
+};
+
+export type ActiveView = "messages" | "automations";
+
+export type AppState = {
+  user: { id: string; email: string; displayName?: string | null } | null;
+  activeView: ActiveView;
+  agents: ApiAgent[];
+  selectedAgentId: string | null;
+  selectedSessionKey: string | null;
+  channels: Channel[];
+  selectedChannelId: string | null;
+  sessions: Session[];
+  selectedSessionId: string | null;
+  tasks: Task[];
+  selectedTaskId: string | null;
+  jobs: Job[];
+  selectedJobId: string | null;
+  messages: ChatMessage[];
+  threadMessages: ChatMessage[];
+  activeThreadId: string | null;
+  threadReplyCounts: Record<string, number>;
+  openclawConnected: boolean;
+  /** Per-session model override (set via /model or dropdown). null = using defaultModel. */
+  sessionModel: string | null;
+  wsConnected: boolean;
+  models: ModelInfo[];
+  /** Global default model from OpenClaw config (gateway primary). */
+  defaultModel: string | null;
+  // Streaming state — tracks in-progress streaming reply
+  streamingRunId: string | null;
+  streamingSessionKey: string | null;
+  streamingThreadId: string | null; // non-null when streaming into a thread
+  // Automations view state
+  cronTasks: TaskWithChannel[];
+  selectedCronTaskId: string | null;
+  cronJobs: Job[];
+  selectedCronJobId: string | null;
+};
+
+export const initialState: AppState = {
+  user: null,
+  activeView: "messages",
+  agents: [],
+  selectedAgentId: null,
+  selectedSessionKey: null,
+  channels: [],
+  selectedChannelId: null,
+  sessions: [],
+  selectedSessionId: null,
+  tasks: [],
+  selectedTaskId: null,
+  jobs: [],
+  selectedJobId: null,
+  messages: [],
+  threadMessages: [],
+  activeThreadId: null,
+  threadReplyCounts: {},
+  openclawConnected: false,
+  sessionModel: null,
+  wsConnected: false,
+  models: [],
+  defaultModel: null,
+  streamingRunId: null,
+  streamingSessionKey: null,
+  streamingThreadId: null,
+  cronTasks: [],
+  selectedCronTaskId: null,
+  cronJobs: [],
+  selectedCronJobId: null,
+};
+
+export type AppAction =
+  | { type: "SET_USER"; user: AppState["user"] }
+  | { type: "SET_ACTIVE_VIEW"; view: ActiveView }
+  | { type: "SET_AGENTS"; agents: ApiAgent[] }
+  | { type: "SELECT_AGENT"; agentId: string | null; sessionKey: string | null }
+  | { type: "SET_CHANNELS"; channels: Channel[] }
+  | { type: "SELECT_CHANNEL"; channelId: string | null }
+  | { type: "SET_SESSIONS"; sessions: Session[] }
+  | { type: "SELECT_SESSION"; sessionId: string | null; sessionKey?: string | null }
+  | { type: "ADD_SESSION"; session: Session }
+  | { type: "REMOVE_SESSION"; sessionId: string }
+  | { type: "RENAME_SESSION"; sessionId: string; name: string }
+  | { type: "SET_TASKS"; tasks: Task[] }
+  | { type: "SELECT_TASK"; taskId: string | null; sessionKey?: string | null }
+  | { type: "SET_JOBS"; jobs: Job[] }
+  | { type: "SELECT_JOB"; jobId: string | null; sessionKey?: string | null }
+  | { type: "ADD_JOB"; job: Job }
+  | { type: "ADD_MESSAGE"; message: ChatMessage }
+  | { type: "SET_MESSAGES"; messages: ChatMessage[]; replyCounts?: Record<string, number> }
+  | { type: "OPEN_THREAD"; threadId: string; messages: ChatMessage[] }
+  | { type: "CLOSE_THREAD" }
+  | { type: "ADD_THREAD_MESSAGE"; message: ChatMessage }
+  | { type: "SET_OPENCLAW_CONNECTED"; connected: boolean; defaultModel?: string | null }
+  | { type: "SET_SESSION_MODEL"; model: string | null }
+  | { type: "SET_WS_CONNECTED"; connected: boolean }
+  | { type: "SET_MODELS"; models: ModelInfo[] }
+  | { type: "SET_DEFAULT_MODEL"; model: string | null }
+  | { type: "SET_CRON_TASKS"; cronTasks: TaskWithChannel[] }
+  | { type: "MERGE_SCAN_DATA"; scanTasks: Array<{ cronJobId: string; schedule: string; instructions: string; model?: string; enabled: boolean }> }
+  | { type: "UPDATE_CRON_TASK"; taskId: string; updates: Partial<TaskWithChannel> }
+  | { type: "SELECT_CRON_TASK"; taskId: string | null }
+  | { type: "RESOLVE_ACTION"; messageId: string; promptHash: string; value: string; label: string }
+  | { type: "STREAM_START"; runId: string; sessionKey: string; threadId?: string }
+  | { type: "STREAM_CHUNK"; runId: string; sessionKey: string; text: string }
+  | { type: "STREAM_END"; runId: string }
+  | { type: "SET_CRON_JOBS"; cronJobs: Job[] }
+  | { type: "SELECT_CRON_JOB"; jobId: string | null; sessionKey?: string | null }
+  | { type: "ADD_CRON_JOB"; job: Job }
+  | { type: "UPDATE_CRON_JOB"; job: Job }
+  | { type: "APPEND_JOB_OUTPUT"; jobId: string; text: string }
+  | { type: "LOGOUT" };
+
+export function appReducer(state: AppState, action: AppAction): AppState {
+  switch (action.type) {
+    case "SET_USER":
+      return { ...state, user: action.user };
+    case "SET_ACTIVE_VIEW":
+      return { ...state, activeView: action.view };
+    case "SET_AGENTS":
+      return { ...state, agents: action.agents };
+    case "SELECT_AGENT":
+      return {
+        ...state,
+        selectedAgentId: action.agentId,
+        selectedSessionKey: action.sessionKey,
+        sessions: [],
+        selectedSessionId: null,
+        messages: [],
+        jobs: [],
+        selectedJobId: null,
+        activeThreadId: null,
+        threadMessages: [],
+      };
+    case "SET_CHANNELS":
+      return { ...state, channels: action.channels };
+    case "SELECT_CHANNEL":
+      return { ...state, selectedChannelId: action.channelId, sessions: [], selectedSessionId: null, tasks: [], selectedTaskId: null, jobs: [], selectedJobId: null, messages: [] };
+    case "SET_SESSIONS":
+      return { ...state, sessions: action.sessions };
+    case "SELECT_SESSION":
+      return {
+        ...state,
+        selectedSessionId: action.sessionId,
+        selectedSessionKey: action.sessionKey ?? state.selectedSessionKey,
+        messages: [],
+        activeThreadId: null,
+        threadMessages: [],
+      };
+    case "ADD_SESSION":
+      return { ...state, sessions: [...state.sessions, action.session] };
+    case "REMOVE_SESSION":
+      return {
+        ...state,
+        sessions: state.sessions.filter((s) => s.id !== action.sessionId),
+        // If the removed session was selected, clear selection
+        ...(state.selectedSessionId === action.sessionId
+          ? { selectedSessionId: null, selectedSessionKey: null, messages: [] }
+          : {}),
+      };
+    case "RENAME_SESSION":
+      return {
+        ...state,
+        sessions: state.sessions.map((s) =>
+          s.id === action.sessionId ? { ...s, name: action.name } : s,
+        ),
+      };
+    case "SET_TASKS":
+      return { ...state, tasks: action.tasks };
+    case "SELECT_TASK": {
+      const nextSessionKey = action.sessionKey ?? state.selectedSessionKey;
+      const sessionChanged = nextSessionKey !== state.selectedSessionKey;
+      return {
+        ...state,
+        selectedTaskId: action.taskId,
+        selectedSessionKey: nextSessionKey,
+        // Only clear messages when the session actually changes;
+        // otherwise keep whatever was already loaded to avoid the
+        // race where SELECT_TASK arrives *after* SET_MESSAGES.
+        messages: sessionChanged ? [] : state.messages,
+        jobs: [],
+        selectedJobId: null,
+      };
+    }
+    case "SET_JOBS":
+      return { ...state, jobs: action.jobs };
+    case "SELECT_JOB":
+      return {
+        ...state,
+        selectedJobId: action.jobId,
+        selectedSessionKey: action.sessionKey ?? state.selectedSessionKey,
+        messages: [],
+      };
+    case "ADD_JOB":
+      return { ...state, jobs: [action.job, ...state.jobs] };
+    case "ADD_MESSAGE": {
+      // If the last message is a streaming placeholder and a new agent
+      // message arrives, replace it with the final message.  We also
+      // proactively clear streamingRunId here because agent.text may
+      // arrive *before* agent.stream.end (deliver() fires first inside
+      // dispatchReplyFromConfig, stream.end is sent after it returns).
+      const lastMsg = state.messages[state.messages.length - 1];
+      if (
+        action.message.sender === "agent" &&
+        lastMsg?.isStreaming
+      ) {
+        return {
+          ...state,
+          streamingRunId: null,
+          streamingSessionKey: null,
+          messages: [
+            ...state.messages.slice(0, -1),
+            { ...action.message, isStreaming: false },
+          ],
+        };
+      }
+      return { ...state, messages: [...state.messages, action.message] };
+    }
+    case "SET_MESSAGES":
+      return {
+        ...state,
+        messages: action.messages,
+        ...(action.replyCounts
+          ? { threadReplyCounts: { ...state.threadReplyCounts, ...action.replyCounts } }
+          : {}),
+      };
+    case "OPEN_THREAD":
+      return {
+        ...state,
+        activeThreadId: action.threadId,
+        threadMessages: action.messages,
+        threadReplyCounts: {
+          ...state.threadReplyCounts,
+          ...(action.messages.length > 0
+            ? { [action.threadId]: action.messages.length }
+            : {}),
+        },
+      };
+    case "CLOSE_THREAD":
+      return { ...state, activeThreadId: null, threadMessages: [] };
+    case "ADD_THREAD_MESSAGE": {
+      const msgThreadId = action.message.threadId ?? state.activeThreadId;
+      const isActiveThread = !!(msgThreadId && msgThreadId === state.activeThreadId);
+
+      let newThreadMessages = state.threadMessages;
+      let clearStreaming: Partial<AppState> = {};
+
+      if (isActiveThread) {
+        // If the last thread message is a streaming placeholder and a new
+        // agent message arrives, replace it (same logic as ADD_MESSAGE).
+        const lastMsg = state.threadMessages[state.threadMessages.length - 1];
+        if (action.message.sender === "agent" && lastMsg?.isStreaming) {
+          newThreadMessages = [
+            ...state.threadMessages.slice(0, -1),
+            { ...action.message, isStreaming: false },
+          ];
+          clearStreaming = { streamingRunId: null, streamingSessionKey: null, streamingThreadId: null };
+        } else {
+          newThreadMessages = [...state.threadMessages, action.message];
+        }
+      }
+
+      const updatedCounts = { ...state.threadReplyCounts };
+      if (msgThreadId) {
+        if (isActiveThread) {
+          updatedCounts[msgThreadId] = newThreadMessages.length;
+        } else {
+          // Thread not open — just increment
+          updatedCounts[msgThreadId] = (updatedCounts[msgThreadId] ?? 0) + 1;
+        }
+      }
+
+      return {
+        ...state,
+        ...clearStreaming,
+        threadMessages: newThreadMessages,
+        threadReplyCounts: updatedCounts,
+      };
+    }
+    case "SET_OPENCLAW_CONNECTED":
+      // connection.status carries the global defaultModel from OpenClaw config.
+      // It never touches sessionModel — that's per-session and managed separately.
+      return {
+        ...state,
+        openclawConnected: action.connected,
+        defaultModel: action.defaultModel ?? state.defaultModel,
+      };
+    case "SET_SESSION_MODEL":
+      return { ...state, sessionModel: action.model };
+    case "SET_WS_CONNECTED":
+      return { ...state, wsConnected: action.connected };
+    case "SET_MODELS":
+      return { ...state, models: action.models };
+    case "SET_DEFAULT_MODEL":
+      return { ...state, defaultModel: action.model };
+    case "RESOLVE_ACTION": {
+      // Mark an action block on a message as resolved (keyed by prompt hash)
+      return {
+        ...state,
+        messages: state.messages.map((m) =>
+          m.id === action.messageId
+            ? {
+                ...m,
+                resolvedActions: {
+                  ...m.resolvedActions,
+                  [action.promptHash]: { value: action.value, label: action.label },
+                },
+              }
+            : m,
+        ),
+      };
+    }
+    case "STREAM_START": {
+      // Add a streaming placeholder message
+      const streamMsg: ChatMessage = {
+        id: `stream_${action.runId}`,
+        sender: "agent",
+        text: "",
+        timestamp: Date.now(),
+        isStreaming: true,
+      };
+      const isThreadStream = !!action.threadId;
+      return {
+        ...state,
+        streamingRunId: action.runId,
+        streamingSessionKey: action.sessionKey,
+        streamingThreadId: action.threadId ?? null,
+        ...(isThreadStream
+          ? { threadMessages: [...state.threadMessages, streamMsg] }
+          : { messages: [...state.messages, streamMsg] }),
+      };
+    }
+    case "STREAM_CHUNK": {
+      if (state.streamingRunId !== action.runId) return state;
+      // Update the streaming message's text (onPartialReply sends accumulated text)
+      const streamId = `stream_${action.runId}`;
+      if (state.streamingThreadId) {
+        return {
+          ...state,
+          threadMessages: state.threadMessages.map((m) =>
+            m.id === streamId ? { ...m, text: action.text } : m,
+          ),
+        };
+      }
+      return {
+        ...state,
+        messages: state.messages.map((m) =>
+          m.id === streamId ? { ...m, text: action.text } : m,
+        ),
+      };
+    }
+    case "STREAM_END": {
+      // streamingRunId may already have been cleared by ADD_MESSAGE
+      // (agent.text can arrive before stream.end); handle gracefully.
+      if (state.streamingRunId && state.streamingRunId !== action.runId) return state;
+      return { ...state, streamingRunId: null, streamingSessionKey: null, streamingThreadId: null };
+    }
+    case "SET_CRON_TASKS":
+      return { ...state, cronTasks: action.cronTasks };
+    case "MERGE_SCAN_DATA": {
+      // Merge schedule/instructions/model from OpenClaw scan results into cronTasks.
+      // These fields belong to OpenClaw and are NOT stored in D1.
+      const scanMap = new Map(action.scanTasks.map((s) => [s.cronJobId, s]));
+      const merged = state.cronTasks.map((task) => {
+        const scan = task.openclawCronJobId ? scanMap.get(task.openclawCronJobId) : null;
+        if (!scan) return task;
+        return {
+          ...task,
+          schedule: scan.schedule || null,
+          instructions: scan.instructions || null,
+          model: scan.model || null,
+          enabled: scan.enabled,
+        };
+      });
+      // Also merge into the messages-view tasks list
+      const mergedTasks = state.tasks.map((task) => {
+        const scan = task.openclawCronJobId ? scanMap.get(task.openclawCronJobId) : null;
+        if (!scan) return task;
+        return {
+          ...task,
+          schedule: scan.schedule || null,
+          instructions: scan.instructions || null,
+          model: scan.model || null,
+          enabled: scan.enabled,
+        };
+      });
+      return { ...state, cronTasks: merged, tasks: mergedTasks };
+    }
+    case "UPDATE_CRON_TASK": {
+      // Optimistic update for a single cron task (after editing)
+      return {
+        ...state,
+        cronTasks: state.cronTasks.map((t) =>
+          t.id === action.taskId ? { ...t, ...action.updates } : t,
+        ),
+        tasks: state.tasks.map((t) =>
+          t.id === action.taskId ? { ...t, ...action.updates } : t,
+        ),
+      };
+    }
+    case "SELECT_CRON_TASK":
+      // If re-selecting the same task, keep existing jobs to avoid flicker
+      if (state.selectedCronTaskId === action.taskId) return state;
+      return {
+        ...state,
+        selectedCronTaskId: action.taskId,
+        cronJobs: [],
+        selectedCronJobId: null,
+        messages: [],
+        selectedSessionKey: null,
+      };
+    case "SET_CRON_JOBS":
+      return { ...state, cronJobs: action.cronJobs };
+    case "SELECT_CRON_JOB":
+      return {
+        ...state,
+        selectedCronJobId: action.jobId,
+        selectedSessionKey: action.sessionKey ?? state.selectedSessionKey,
+        messages: [],
+      };
+    case "ADD_CRON_JOB":
+      // Prepend new job to cronJobs (most recent first)
+      return { ...state, cronJobs: [action.job, ...state.cronJobs] };
+    case "UPDATE_CRON_JOB": {
+      // Update an existing job in cronJobs (e.g. running → ok/error)
+      const exists = state.cronJobs.some((j) => j.id === action.job.id);
+      if (exists) {
+        return {
+          ...state,
+          cronJobs: state.cronJobs.map((j) => {
+            if (j.id !== action.job.id) return j;
+            // When a job finishes, prefer the streaming summary (accumulated
+            // in-memory via job.output) over the server-side summary if the
+            // streaming version is longer — it preserves block separators and
+            // intermediate output that may not be persisted to D1.
+            const summary =
+              j.summary && j.summary.length > (action.job.summary?.length || 0)
+                ? j.summary
+                : action.job.summary;
+            return { ...j, ...action.job, summary };
+          }),
+        };
+      }
+      // If not found, prepend (handles race where running arrives after list)
+      return { ...state, cronJobs: [action.job, ...state.cronJobs] };
+    }
+    case "APPEND_JOB_OUTPUT": {
+      // Update streaming output text for a running job (both views)
+      const updateSummary = (list: Job[]) =>
+        list.map((j) =>
+          j.id === action.jobId ? { ...j, summary: action.text } : j,
+        );
+      return {
+        ...state,
+        jobs: updateSummary(state.jobs),
+        cronJobs: updateSummary(state.cronJobs),
+      };
+    }
+    case "LOGOUT":
+      return { ...initialState };
+    default:
+      return state;
+  }
+}
+
+export const AppStateContext = createContext<AppState>(initialState);
+export const AppDispatchContext = createContext<React.Dispatch<AppAction>>(() => {});
+
+export function useAppState() {
+  return useContext(AppStateContext);
+}
+
+export function useAppDispatch() {
+  return useContext(AppDispatchContext);
+}