From f705536fb12de8245145731dac183bfcab8a7448 Mon Sep 17 00:00:00 2001
From: oudecheng <13802883547@139.com>
Date: Sat, 15 Aug 2026 08:38:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E9=80=9A=E9=81=93/=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=9D=E5=88=87=E6=8D=A2=E7=A7=BB=E8=87=B3=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=20ConnectionTab=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=80=9A?=
 =?UTF-8?q?=E9=81=93=E5=A4=B1=E6=95=88=E5=9B=9E=E9=80=80=EF=BC=9B=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5=E7=8A=B6=E6=80=81=E4=B8=8A=E7=A7=BB=20Logo=20?=
 =?UTF-8?q?=E8=A1=8C=E5=B9=B6=E6=94=AF=E6=8C=81=E7=AA=84=E4=BE=A7=E6=A0=8F?=
 =?UTF-8?q?=20compact=20=E9=99=8D=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx                               | 26 +++-----
 web/src/components/Settings/ConfigPage.tsx    | 25 +++++++-
 .../Settings/tabs/ConnectionTab.tsx           | 63 ++++++++++++++++++-
 web/src/components/Settings/types.ts          |  8 +++
 web/src/hooks/useChat.ts                      | 20 +++++-
 5 files changed, 118 insertions(+), 24 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 33148cc..a4bd73b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -28,8 +28,6 @@ import {
 } from './components/Settings/SettingsModal';
 import { ConfigPage } from './components/Settings/ConfigPage';
 import { ConnectionStatus } from './components/ConnectionStatus';
-import { ChannelSelector } from './components/Header/ChannelSelector';
-import { SessionSelector } from './components/Header/SessionSelector';
 import { getVersion } from './api/config';
 import { useWebSocket } from './hooks/useWebSocket';
 import { useChat } from './hooks/useChat';
@@ -719,6 +717,8 @@ function App() {
                   v{appVersion}
                 </span>
               )}
+              {/* 窄侧栏时降级为 compact 图标，避免 Logo 行溢出裁剪折叠按钮 */}
+              <ConnectionStatus status={status} compact={sidebarWidth < 264} />
               <button
                 onClick={toggleSidebar}
                 className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-[var(--text-muted)] hover:bg-[var(--overlay-hover)] hover:text-[var(--text-primary)] transition-colors"
@@ -788,22 +788,6 @@ function App() {
           </div>
         ) : (
           <>
-            <div className="shrink-0 px-3 pb-2">
-              <ConnectionStatus status={status} />
-            </div>
-            <div className="flex shrink-0 flex-col gap-1.5 px-3 pb-2 text-sm text-[var(--text-secondary)]">
-              <ChannelSelector
-                channels={channels}
-                selectedChannel={selectedChannel}
-                onSelectChannel={handleSwitchChannel}
-              />
-              <SessionSelector
-                sessions={sessions}
-                selectedSessionId={selectedSessionId}
-                onSelectSession={handleSelectSession}
-              />
-            </div>
-
             {/* Tab 栏 */}
             <div className="flex shrink-0 border-b border-[var(--border-color)] px-3">
               <button
@@ -1148,6 +1132,12 @@ function App() {
           }}
           onSaveConnection={handleSaveConnection}
           initialTab={configInitialTab}
+          channels={channels}
+          selectedChannel={selectedChannel}
+          onSelectChannel={handleSwitchChannel}
+          sessions={sessions}
+          selectedSessionId={selectedSessionId}
+          onSelectSession={handleSelectSession}
         />
       )}
     </div>
diff --git a/web/src/components/Settings/ConfigPage.tsx b/web/src/components/Settings/ConfigPage.tsx
index 87720ba..586d908 100644
--- a/web/src/components/Settings/ConfigPage.tsx
+++ b/web/src/components/Settings/ConfigPage.tsx
@@ -42,7 +42,17 @@ function TabLoading() {
   );
 }
 
-export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPageProps) {
+export function ConfigPage({
+  onClose,
+  onSaveConnection,
+  initialTab,
+  channels,
+  selectedChannel,
+  onSelectChannel,
+  sessions,
+  selectedSessionId,
+  onSelectSession,
+}: ConfigPageProps) {
   const [config, setConfig] = useState<AppConfig | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(initialTab ?? 'providers');
   const [loading, setLoading] = useState(true);
@@ -192,7 +202,18 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
     const commonProps = { config, update };
     switch (activeTab) {
       case 'connection':
-        return <ConnectionTab onSaveConnection={onSaveConnection} setToast={showToast} />;
+        return (
+          <ConnectionTab
+            onSaveConnection={onSaveConnection}
+            setToast={showToast}
+            channels={channels}
+            selectedChannel={selectedChannel}
+            onSelectChannel={onSelectChannel}
+            sessions={sessions}
+            selectedSessionId={selectedSessionId}
+            onSelectSession={onSelectSession}
+          />
+        );
       case 'gateway':
         return <GatewayTab {...commonProps} />;
       case 'providers':
diff --git a/web/src/components/Settings/tabs/ConnectionTab.tsx b/web/src/components/Settings/tabs/ConnectionTab.tsx
index 3c07bd1..decb400 100644
--- a/web/src/components/Settings/tabs/ConnectionTab.tsx
+++ b/web/src/components/Settings/tabs/ConnectionTab.tsx
@@ -1,17 +1,34 @@
 // ConnectionTab - WebSocket 连接设置（localStorage 持久化，不走后端 config）
+// 同时承载通道/会话切换（立即生效，无需保存）
 import { useState } from 'react';
 import { Wifi, KeyRound } from 'lucide-react';
 import { Field, SectionCard } from '../ui';
-import { inputCls } from '../constants';
+import { inputCls, selectCls } from '../constants';
 import { ErrorBanner } from '../shared';
 import { getAuthToken, setAuthToken } from '../../../api/client';
+import type { Channel, SessionSummary } from '../../../types/protocol';
 
 interface ConnectionTabProps {
   onSaveConnection?: (host: string, port: number) => void;
   setToast: (msg: string) => void;
+  channels?: Channel[];
+  selectedChannel?: string | null;
+  onSelectChannel?: (id: string) => void;
+  sessions?: SessionSummary[];
+  selectedSessionId?: string | null;
+  onSelectSession?: (id: string) => void;
 }
 
-export function ConnectionTab({ onSaveConnection, setToast }: ConnectionTabProps) {
+export function ConnectionTab({
+  onSaveConnection,
+  setToast,
+  channels,
+  selectedChannel,
+  onSelectChannel,
+  sessions,
+  selectedSessionId,
+  onSelectSession,
+}: ConnectionTabProps) {
   const [connHost, setConnHost] = useState(() => {
     try {
       return localStorage.getItem('picobot-gateway-host') || '127.0.0.1';
@@ -55,6 +72,48 @@ export function ConnectionTab({ onSaveConnection, setToast }: ConnectionTabProps
 
   return (
     <div className="space-y-5">
+      <SectionCard title="通道与会话">
+        <Field label="当前通道">
+          <select
+            value={selectedChannel ?? ''}
+            onChange={(e) => onSelectChannel?.(e.target.value)}
+            disabled={!channels || channels.length === 0}
+            className={selectCls}
+          >
+            {channels && channels.length > 0 ? (
+              channels.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name}
+                  {c.isWritable ? '' : '（只读）'}
+                </option>
+              ))
+            ) : (
+              <option value="">暂无可用通道</option>
+            )}
+          </select>
+        </Field>
+        <Field label="当前会话">
+          <select
+            value={selectedSessionId ?? ''}
+            onChange={(e) => onSelectSession?.(e.target.value)}
+            disabled={!sessions || sessions.length <= 1}
+            className={selectCls}
+          >
+            {sessions && sessions.length > 0 ? (
+              sessions.map((s) => (
+                <option key={s.session_id} value={s.session_id}>
+                  {s.title}
+                </option>
+              ))
+            ) : (
+              <option value="">暂无会话</option>
+            )}
+          </select>
+        </Field>
+        <div className="text-xs text-[var(--text-muted)] bg-[var(--overlay-dim)] rounded-lg px-3 py-2">
+          通道与会话切换立即生效，无需保存；通道决定当前视图的消息来源与读写权限。
+        </div>
+      </SectionCard>
       <SectionCard title="WebSocket 连接">
         <Field label="主机地址">
           <input
diff --git a/web/src/components/Settings/types.ts b/web/src/components/Settings/types.ts
index 3b8f7e3..2e0837d 100644
--- a/web/src/components/Settings/types.ts
+++ b/web/src/components/Settings/types.ts
@@ -1,5 +1,7 @@
 // Config-related type definitions extracted from ConfigPage.tsx
 
+import type { Channel, SessionSummary } from '../../types/protocol';
+
 export interface ProviderConfig {
   type: string;
   base_url: string;
@@ -282,6 +284,12 @@ export interface ConfigPageProps {
   onClose: () => void;
   onSaveConnection?: (host: string, port: number) => void;
   initialTab?: TabId;
+  channels?: Channel[];
+  selectedChannel?: string | null;
+  onSelectChannel?: (id: string) => void;
+  sessions?: SessionSummary[];
+  selectedSessionId?: string | null;
+  onSelectSession?: (id: string) => void;
 }
 
 export interface KnownSource {
diff --git a/web/src/hooks/useChat.ts b/web/src/hooks/useChat.ts
index c139a17..b12db08 100644
--- a/web/src/hooks/useChat.ts
+++ b/web/src/hooks/useChat.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, type Dispatch, type SetStateAction } from 'react';
+import { useCallback, useMemo, useRef, type Dispatch, type SetStateAction } from 'react';
 import type {
   Command,
   ChatMessage,
@@ -166,6 +166,10 @@ export function useChat(): UseChatReturn {
   });
   const scheduler = useSchedulerView();
 
+  // selectedChannel 的 ref 镜像：handleServerMessage 空依赖闭包中读取当前值，
+  // 用于 channel_list 到达时校正失效的选中通道（如默认 'websocket' 在后端不存在）
+  const selectedChannelRef = useRef(sideData.selectedChannel);
+
   // ---- handleServerMessage: 纯路由分发（Tier 1 → Tier 2 → Tier 3） ----
   // 所有被调用的方法都是稳定引用（useState setter 或 useCallback([])），
   // 因此空依赖数组安全，不会产生过期闭包。
@@ -252,9 +256,20 @@ export function useChat(): UseChatReturn {
         sideData.setTodos(message.todos);
         return;
 
-      case 'channel_list':
+      case 'channel_list': {
         sideData.setChannels(message.channels);
+        // 当前选中通道不在列表中（默认 'websocket' 在后端不存在、或通道被移除）时，
+        // 回退到第一个通道，避免 ConnectionTab 通道下拉空白及 session 请求携带无效通道
+        if (
+          message.channels.length > 0 &&
+          !message.channels.some((c) => c.id === selectedChannelRef.current)
+        ) {
+          const fallback = message.channels[0].id;
+          selectedChannelRef.current = fallback;
+          sideData.setSelectedChannel(fallback);
+        }
         return;
+      }
 
       case 'pong':
         return;
@@ -300,6 +315,7 @@ export function useChat(): UseChatReturn {
   const selectChannel = useCallback(
     (channelId: string) => {
       if (channelId === sideData.selectedChannel) return;
+      selectedChannelRef.current = channelId;
       sideData.setSelectedChannel(channelId);
       sessions.setSessions([]);
       sessions.setSelectedSessionId(null);