botschat 0.1.3 → 0.1.6

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

@@ -0,0 +1,480 @@
+import React, { useState, useCallback } from "react";
+import { useAppState, useAppDispatch, type ActiveView } from "../store";
+import { setToken, setRefreshToken } from "../api";
+import type { WSMessage } from "../ws";
+import { Sidebar } from "./Sidebar";
+import { ChatWindow } from "./ChatWindow";
+import { ThreadPanel } from "./ThreadPanel";
+import { JobList } from "./JobList";
+import { CronSidebar } from "./CronSidebar";
+import { CronDetail } from "./CronDetail";
+import { ModelSelect } from "./ModelSelect";
+import { ConnectionSettings } from "./ConnectionSettings";
+import { dlog } from "../debug-log";
+
+type MobileScreen =
+  | "channel-list"
+  | "chat"
+  | "thread"
+  | "cron-list"
+  | "cron-detail";
+
+type MobileLayoutProps = {
+  sendMessage: (msg: WSMessage) => void;
+  theme: "dark" | "light";
+  onToggleTheme: () => void;
+  showSettings: boolean;
+  onOpenSettings: () => void;
+  onCloseSettings: () => void;
+  handleDefaultModelChange: (modelId: string) => Promise<void>;
+  handleSelectJob: (jobId: string) => void;
+};
+
+export function MobileLayout({
+  sendMessage,
+  theme,
+  onToggleTheme,
+  showSettings,
+  onOpenSettings,
+  onCloseSettings,
+  handleDefaultModelChange,
+  handleSelectJob,
+}: MobileLayoutProps) {
+  const state = useAppState();
+  const dispatch = useAppDispatch();
+
+  // Mobile navigation state — stack-based
+  const [screen, setScreen] = useState<MobileScreen>(() => {
+    if (state.activeView === "automations") return "cron-list";
+    if (state.selectedAgentId && state.selectedSessionKey) return "chat";
+    return "channel-list";
+  });
+
+  const [showUserMenu, setShowUserMenu] = useState(false);
+
+  const activeTab = state.activeView;
+
+  const setActiveTab = useCallback((view: ActiveView) => {
+    dispatch({ type: "SET_ACTIVE_VIEW", view });
+    if (view === "messages") {
+      if (state.selectedAgentId && state.selectedSessionKey) {
+        setScreen("chat");
+      } else {
+        setScreen("channel-list");
+      }
+    } else {
+      if (state.selectedCronTaskId) {
+        setScreen("cron-detail");
+      } else {
+        setScreen("cron-list");
+      }
+    }
+  }, [dispatch, state.selectedAgentId, state.selectedSessionKey, state.selectedCronTaskId]);
+
+  // Navigate to chat when a channel is selected (via Sidebar's internal dispatch)
+  // We listen for selectedAgentId changes to auto-navigate
+  const prevAgentIdRef = React.useRef(state.selectedAgentId);
+  React.useEffect(() => {
+    if (state.selectedAgentId && state.selectedAgentId !== prevAgentIdRef.current && screen === "channel-list") {
+      setScreen("chat");
+    }
+    prevAgentIdRef.current = state.selectedAgentId;
+  }, [state.selectedAgentId, screen]);
+
+  // Navigate to cron detail when a cron task is selected
+  const prevCronTaskIdRef = React.useRef(state.selectedCronTaskId);
+  React.useEffect(() => {
+    if (state.selectedCronTaskId && state.selectedCronTaskId !== prevCronTaskIdRef.current && screen === "cron-list") {
+      setScreen("cron-detail");
+    }
+    prevCronTaskIdRef.current = state.selectedCronTaskId;
+  }, [state.selectedCronTaskId, screen]);
+
+  // Navigate to thread when thread opens
+  React.useEffect(() => {
+    if (state.activeThreadId && screen === "chat") {
+      setScreen("thread");
+    }
+  }, [state.activeThreadId, screen]);
+
+  // Navigate back from thread when it closes
+  React.useEffect(() => {
+    if (!state.activeThreadId && screen === "thread") {
+      setScreen("chat");
+    }
+  }, [state.activeThreadId, screen]);
+
+  const handleLogout = () => {
+    dlog.info("Auth", `Mobile logout — user ${state.user?.email}`);
+    setToken(null);
+    setRefreshToken(null);
+    dispatch({ type: "LOGOUT" });
+  };
+
+  const userInitial = state.user?.displayName?.[0]?.toUpperCase()
+    ?? state.user?.email?.[0]?.toUpperCase()
+    ?? "?";
+
+  const goBack = useCallback(() => {
+    switch (screen) {
+      case "chat":
+        setScreen("channel-list");
+        break;
+      case "thread":
+        dispatch({ type: "CLOSE_THREAD" });
+        setScreen("chat");
+        break;
+      case "cron-detail":
+        setScreen("cron-list");
+        break;
+      default:
+        break;
+    }
+  }, [screen, dispatch]);
+
+  // Determine the header title
+  const getHeaderTitle = (): string => {
+    switch (screen) {
+      case "channel-list":
+        return "BotsChat";
+      case "chat": {
+        const agent = state.agents.find((a) => a.id === state.selectedAgentId);
+        return `# ${agent?.name ?? "Chat"}`;
+      }
+      case "thread":
+        return "Thread";
+      case "cron-list":
+        return "Automations";
+      case "cron-detail": {
+        const task = state.cronTasks.find((t) => t.id === state.selectedCronTaskId);
+        return task?.name ?? "Task Detail";
+      }
+      default:
+        return "BotsChat";
+    }
+  };
+
+  const showBackButton = screen !== "channel-list" && screen !== "cron-list";
+
+  return (
+    <div
+      className="flex flex-col h-screen"
+      style={{ background: "var(--bg-surface)" }}
+    >
+      {/* ---- Top nav bar (44px + safe area for standalone PWA) ---- */}
+      <div
+        className="flex items-center justify-between px-4 flex-shrink-0"
+        style={{
+          height: 44,
+          paddingTop: "env(safe-area-inset-top, 0px)",
+          background: "var(--bg-primary)",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          {showBackButton && (
+            <button
+              onClick={goBack}
+              className="p-1 -ml-1 rounded"
+              style={{ color: "var(--text-link)" }}
+              aria-label="Back"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+              </svg>
+            </button>
+          )}
+          <span
+            className="text-h2 font-bold truncate"
+            style={{ color: "var(--text-primary)" }}
+          >
+            {getHeaderTitle()}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Connection indicator */}
+          <div
+            className="w-2 h-2 rounded-full mr-1"
+            style={{ background: state.openclawConnected ? "var(--accent-green)" : "var(--accent-red)" }}
+          />
+          {/* Settings */}
+          <button
+            onClick={onOpenSettings}
+            className="p-1.5 rounded"
+            style={{ color: "var(--text-muted)" }}
+          >
+            <svg className="w-4.5 h-4.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>
+          </button>
+          {/* User avatar */}
+          <button
+            onClick={() => setShowUserMenu(!showUserMenu)}
+            className="w-6 h-6 rounded flex items-center justify-center text-[10px] font-bold text-white"
+            style={{ background: "#9B59B6" }}
+            title={state.user?.displayName ?? state.user?.email ?? "User"}
+          >
+            {userInitial}
+          </button>
+        </div>
+      </div>
+
+      {/* ---- User menu dropdown ---- */}
+      {showUserMenu && (
+        <div className="fixed inset-0 z-50" onClick={() => setShowUserMenu(false)}>
+          <div
+            className="absolute right-4 rounded-lg py-1 min-w-[200px]"
+            style={{
+              top: `calc(44px + env(safe-area-inset-top, 0px) + 4px)`,
+              background: "var(--bg-surface)",
+              border: "1px solid var(--border)",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="px-4 py-2.5" style={{ borderBottom: "1px solid var(--border)" }}>
+              <div className="text-body font-bold" style={{ color: "var(--text-primary)" }}>
+                {state.user?.displayName ?? "User"}
+              </div>
+              <div className="text-caption" style={{ color: "var(--text-muted)" }}>
+                {state.user?.email}
+              </div>
+            </div>
+            <button
+              className="w-full text-left px-4 py-2.5 text-body flex items-center gap-2.5"
+              style={{ color: "var(--text-primary)" }}
+              onClick={() => { onToggleTheme(); setShowUserMenu(false); }}
+            >
+              {theme === "dark" ? (
+                <svg className="w-4 h-4" 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-4 h-4" 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>
+              )}
+              {theme === "dark" ? "Light Mode" : "Dark Mode"}
+            </button>
+            <div style={{ borderTop: "1px solid var(--border)" }} />
+            <button
+              className="w-full text-left px-4 py-2.5 text-body flex items-center gap-2.5"
+              style={{ color: "var(--accent-red)" }}
+              onClick={() => { handleLogout(); setShowUserMenu(false); }}
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+              </svg>
+              Logout
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* ---- Screen content ---- */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        {screen === "channel-list" && (
+          <div className="flex-1 min-h-0 overflow-y-auto" style={{ background: "var(--bg-secondary)" }}>
+            <Sidebar />
+          </div>
+        )}
+
+        {screen === "chat" && (
+          <div className="flex-1 min-h-0 flex flex-col">
+            <ChatWindow sendMessage={sendMessage} />
+          </div>
+        )}
+
+        {screen === "thread" && (
+          <div className="flex-1 min-h-0 flex flex-col">
+            <ThreadPanel sendMessage={sendMessage} />
+          </div>
+        )}
+
+        {screen === "cron-list" && (
+          <div className="flex-1 min-h-0 overflow-y-auto" style={{ background: "var(--bg-secondary)" }}>
+            <CronSidebar />
+          </div>
+        )}
+
+        {screen === "cron-detail" && (
+          <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+            <CronDetail />
+          </div>
+        )}
+      </div>
+
+      {/* ---- Bottom tab bar (56px) ---- */}
+      <div
+        className="flex items-stretch flex-shrink-0"
+        style={{
+          height: 56,
+          background: "var(--bg-primary)",
+          borderTop: "1px solid var(--border)",
+          paddingBottom: "env(safe-area-inset-bottom, 0px)",
+        }}
+      >
+        <TabButton
+          label="Messages"
+          active={activeTab === "messages"}
+          onClick={() => setActiveTab("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>
+          }
+        />
+        <TabButton
+          label="Automations"
+          active={activeTab === "automations"}
+          onClick={() => setActiveTab("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>
+
+      {/* Settings modal */}
+      {showSettings && (
+        <MobileSettingsModal
+          state={state}
+          onClose={onCloseSettings}
+          handleDefaultModelChange={handleDefaultModelChange}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Mobile Settings modal — extracted to keep layout clean */
+function MobileSettingsModal({
+  state,
+  onClose,
+  handleDefaultModelChange,
+}: {
+  state: ReturnType<typeof useAppState>;
+  onClose: () => void;
+  handleDefaultModelChange: (modelId: string) => Promise<void>;
+}) {
+  const [tab, setTab] = useState<"general" | "connection">("general");
+
+  return (
+    <div
+      className="fixed inset-0 flex items-end justify-center z-50"
+      style={{ background: "rgba(0,0,0,0.5)" }}
+      onClick={onClose}
+    >
+      <div
+        className="w-full rounded-t-xl p-5 max-h-[85vh] flex flex-col"
+        style={{
+          background: "var(--bg-surface)",
+          paddingBottom: "calc(20px + env(safe-area-inset-bottom, 0px))",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="w-10 h-1 rounded-full mx-auto mb-4" style={{ background: "var(--text-muted)" }} />
+        <h2 className="text-h1 font-bold mb-3" style={{ color: "var(--text-primary)" }}>
+          Settings
+        </h2>
+
+        {/* Tab bar */}
+        <div className="flex gap-4 mb-4" style={{ borderBottom: "1px solid var(--border)" }}>
+          <button
+            className="pb-2 text-caption font-bold transition-colors"
+            style={{
+              color: tab === "general" ? "var(--text-primary)" : "var(--text-muted)",
+              borderBottom: tab === "general" ? "2px solid var(--bg-active)" : "2px solid transparent",
+              marginBottom: "-1px",
+            }}
+            onClick={() => setTab("general")}
+          >
+            General
+          </button>
+          <button
+            className="pb-2 text-caption font-bold transition-colors"
+            style={{
+              color: tab === "connection" ? "var(--text-primary)" : "var(--text-muted)",
+              borderBottom: tab === "connection" ? "2px solid var(--bg-active)" : "2px solid transparent",
+              marginBottom: "-1px",
+            }}
+            onClick={() => setTab("connection")}
+          >
+            Connection
+          </button>
+        </div>
+
+        {/* Tab content — scrollable */}
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {tab === "general" && (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-caption font-bold mb-1.5" style={{ color: "var(--text-secondary)" }}>
+                  Default Model
+                </label>
+                <ModelSelect
+                  value={state.defaultModel ?? ""}
+                  onChange={handleDefaultModelChange}
+                  models={state.models}
+                  placeholder="Not set (use agent default)"
+                />
+              </div>
+
+              <div>
+                <label className="block text-caption font-bold mb-1.5" style={{ color: "var(--text-secondary)" }}>
+                  Current Session Model
+                </label>
+                <span
+                  className="text-body font-mono"
+                  style={{ color: (state.sessionModel || state.defaultModel) ? "var(--text-primary)" : "var(--text-muted)" }}
+                >
+                  {state.sessionModel ?? state.defaultModel ?? "Not connected"}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {tab === "connection" && (
+            <ConnectionSettings />
+          )}
+        </div>
+
+        <button
+          onClick={onClose}
+          className="w-full mt-4 py-2.5 text-caption font-bold text-white rounded-md shrink-0"
+          style={{ background: "var(--bg-active)" }}
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({
+  label,
+  active,
+  onClick,
+  icon,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors"
+      style={{
+        color: active ? "var(--text-link)" : "var(--text-muted)",
+      }}
+    >
+      {icon}
+      <span className="text-[10px] leading-tight">{label}</span>
+    </button>
+  );
+}

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

@@ -116,28 +116,19 @@ export function OnboardingPage({ onSkip }: { onSkip: () => void }) {
     return () => { cancelled = true; };
   }, []);
 
-  // Load or create pairing token
+  // Create a pairing token for the setup command.
+  // Note: GET /pairing-tokens only returns masked tokenPreview (security),
+  // so we always create a fresh token for onboarding display.
   useEffect(() => {
     let cancelled = false;
 
     async function ensurePairingToken() {
       setLoadingToken(true);
       try {
-        // Check existing tokens
-        const { tokens } = await pairingApi.list();
-        if (cancelled) return;
-
-        if (tokens.length > 0) {
-          dlog.info("Onboarding", `Found ${tokens.length} existing pairing tokens`);
-          const { token } = await pairingApi.create("Onboarding setup");
-          if (!cancelled) setPairingToken(token);
-        } else {
-          dlog.info("Onboarding", "No pairing tokens found, creating one");
-          const { token } = await pairingApi.create("Default");
-          if (!cancelled) setPairingToken(token);
-        }
+        const { token } = await pairingApi.create("Default");
+        if (!cancelled) setPairingToken(token);
       } catch (err) {
-        dlog.error("Onboarding", `Failed to get pairing token: ${err}`);
+        dlog.error("Onboarding", `Failed to create pairing token: ${err}`);
       } finally {
         if (!cancelled) setLoadingToken(false);
       }
@@ -148,7 +139,7 @@ export function OnboardingPage({ onSkip }: { onSkip: () => void }) {
   }, []);
 
   const setupCommand = pairingToken
-    ? `openclaw plugins install @botschat/openclaw-plugin && \\
+    ? `openclaw plugins install @botschat/botschat && \\
 openclaw config set channels.botschat.cloudUrl ${cloudUrl} && \\
 openclaw config set channels.botschat.pairingToken ${pairingToken} && \\
 openclaw config set channels.botschat.enabled true && \\

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { Separator } from "react-resizable-panels";
+
+type ResizeHandleProps = {
+  direction?: "horizontal" | "vertical";
+  className?: string;
+};
+
+/**
+ * Custom drag handle for react-resizable-panels v4.
+ * Default (1px line) → Hover/Active (3px, blue highlight).
+ */
+export function ResizeHandle({ direction = "horizontal", className = "" }: ResizeHandleProps) {
+  const isVertical = direction === "vertical";
+
+  return (
+    <Separator
+      className={`resize-handle group relative flex items-center justify-center ${
+        isVertical ? "h-[6px] cursor-row-resize" : "w-[6px] cursor-col-resize"
+      } ${className}`}
+      style={{ flexShrink: 0, flexGrow: 0 }}
+    >
+      {/* Visible line */}
+      <div
+        className={`resize-handle-line transition-all duration-150 ${
+          isVertical
+            ? "w-full h-px group-hover:h-[3px]"
+            : "h-full w-px group-hover:w-[3px]"
+        }`}
+        style={{ background: "var(--border)" }}
+      />
+    </Separator>
+  );
+}

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

@@ -81,7 +81,7 @@ export function Sidebar() {
   return (
     <div
       className="flex flex-col h-full"
-      style={{ width: 220, minWidth: 160, background: "var(--bg-secondary)", borderRight: "1px solid var(--border)" }}
+      style={{ background: "var(--bg-secondary)" }}
     >
       {/* Workspace Switcher */}
       <div className="px-4 py-3 flex items-center gap-2">

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

@@ -274,7 +274,7 @@ export function TaskBar() {
               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]"
+              className="px-2 py-1 text-caption rounded-sm focus:outline-none flex-1 min-w-[100px] placeholder:text-[--text-muted]"
               style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
             />
           )}
@@ -283,7 +283,7 @@ export function TaskBar() {
             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]"
+            className="px-2 py-1 text-caption rounded-sm focus:outline-none flex-1 min-w-[100px] placeholder:text-[--text-muted]"
             style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
           />
         </div>

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

@@ -71,15 +71,12 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
     <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"
+        className="flex items-center justify-between px-4 flex-shrink-0"
         style={{ height: 44, borderBottom: "1px solid var(--border)" }}
       >
         <h3 className="text-h1" style={{ color: "var(--text-primary)" }}>Thread</h3>
@@ -96,7 +93,7 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
       </div>
 
       {/* Scrollable area: parent message + replies */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 min-h-0 overflow-y-auto">
         {/* Parent message */}
         {parentMessage && (
           <div className="px-5 py-3" style={{ borderBottom: "1px solid var(--border)" }}>

package/packages/web/src/hooks/useIsMobile.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+const MOBILE_BREAKPOINT = 768; // px — matches Tailwind's `md`
+
+/**
+ * Returns true when the viewport is narrower than the mobile breakpoint.
+ * Listens to `matchMedia` changes so it updates live on window resize.
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+
+    // Set initial value (SSR hydration guard)
+    setIsMobile(mql.matches);
+
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  return isMobile;
+}