Enhance CI deployment, refactor UI, and add new features

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/deploy-gh-pages.yml

@@ -0,0 +1,40 @@
+name: Deploy to gh-pages
+
+on:
+  push:
+    branches: [dev]
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build client
+        run: pnpm build:client
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: packages/client/dist
+          publish_branch: gh-pages
+          force_orphan: true

.github/workflows/pages.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -43,6 +43,8 @@ jobs:
 
       - name: Configure Pages
         uses: actions/configure-pages@v5
+        with:
+          enablement: true
 
       - name: Upload Packages Client
         uses: actions/upload-pages-artifact@v3

packages/client/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { HeaderBar } from './components/HeaderBar';
 import { Sidebar } from './components/Sidebar';
 import { MainPanel } from './components/MainPanel';
 import { loadWebExport } from './data';
@@ -14,7 +15,9 @@ const initialTheme = (): Theme => {
 
 export default function App() {
   const [data, setData] = useState<WebExport | null>(null);
-  const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading');
+  const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>(
+    'loading',
+  );
   const [theme, setTheme] = useState<Theme>(initialTheme);
   const [activeId, setActiveId] = useState<string | null>(null);
   const [query, setQuery] = useState('');
@@ -29,9 +32,12 @@ export default function App() {
       }
 
       setData(result);
-      const requestedId = new URLSearchParams(window.location.search).get('session');
+      const requestedId = new URLSearchParams(window.location.search).get(
+        'session',
+      );
       setActiveId(
-        requestedId && result?.sessions.some((session) => session.id === requestedId)
+        requestedId &&
+          result?.sessions.some((session) => session.id === requestedId)
           ? requestedId
           : (result?.sessions[0]?.id ?? null),
       );
@@ -64,33 +70,52 @@ export default function App() {
 
   if (loadState === 'loading') {
     return (
-      <div className="grid min-h-screen place-items-center bg-[#eef3f7] text-slate-500 dark:bg-[#05070a] dark:text-slate-400">
-        正在读取会话
+      <div className="app-shell">
+        <div
+          className="grid min-h-[60vh] place-items-center text-sm"
+          style={{ color: 'var(--text-tertiary)' }}
+        >
+          正在读取会话
+        </div>
       </div>
     );
   }
 
   if (loadState === 'error' || !data) {
     return (
-      <div className="grid min-h-screen place-items-center bg-[#eef3f7] text-slate-500 dark:bg-[#05070a] dark:text-slate-400">
-        无法读取会话数据
+      <div className="app-shell">
+        <div
+          className="grid min-h-[60vh] place-items-center text-sm"
+          style={{ color: 'var(--text-tertiary)' }}
+        >
+          无法读取会话数据
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-[#eef3f7] p-4 text-slate-800 dark:bg-[#05070a] dark:text-slate-100">
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(280px,340px)_1fr]">
-        <Sidebar
+    <div className="app-shell">
+      <div className="app-frame">
+        <HeaderBar
           sessions={filteredSessions}
-          activeId={activeId}
-          query={query}
           theme={theme}
-          onSelect={setActiveId}
-          onQueryChange={setQuery}
           onThemeChange={setTheme}
         />
-        <MainPanel session={activeSession} filter={filter} onFilterChange={setFilter} />
+        <div className="app-workspace">
+          <Sidebar
+            sessions={filteredSessions}
+            activeId={activeId}
+            query={query}
+            onSelect={setActiveId}
+            onQueryChange={setQuery}
+          />
+          <MainPanel
+            session={activeSession}
+            filter={filter}
+            onFilterChange={setFilter}
+          />
+        </div>
       </div>
     </div>
   );

packages/client/src/components/HeaderBar.tsx

@@ -0,0 +1,67 @@
+import type { Theme, WebSession } from '../types';
+import { entryRole } from '../utils';
+import logoUrl from '../../assets/call-code.png';
+
+interface HeaderBarProps {
+  sessions: WebSession[];
+  theme: Theme;
+  onThemeChange: (theme: Theme) => void;
+}
+
+export function HeaderBar({ sessions, theme, onThemeChange }: HeaderBarProps) {
+  const count = sessions.reduce(
+    (acc, session) => {
+      acc.messages += session.entries.length;
+      acc.tools += session.entries.filter(
+        (entry) => entryRole(entry) === 'tool',
+      ).length;
+      return acc;
+    },
+    { messages: 0, tools: 0 },
+  );
+
+  return (
+    <header className="header-bar">
+      <div className="flex min-w-0 items-center gap-3">
+        <img
+          src={logoUrl}
+          alt="Call Code"
+          className="h-9 w-9 shrink-0 rounded-xl border object-contain"
+          style={{
+            borderColor: 'rgb(var(--chip-border))',
+            background: 'rgb(var(--chip-bg))',
+          }}
+        />
+        <div className="min-w-0">
+          <h1
+            className="truncate text-[17px] font-semibold leading-tight"
+            style={{ color: 'var(--text-primary)' }}
+          >
+            Call Code
+          </h1>
+          <div
+            className="mt-0.5 truncate text-[11px]"
+            style={{ color: 'var(--text-tertiary)' }}
+          >
+            {sessions.length} 个会话 · {count.messages} 条消息 · {count.tools}{' '}
+            次工具
+          </div>
+        </div>
+      </div>
+
+      <div className="segmented shrink-0" role="tablist" aria-label="主题切换">
+        {(['light', 'dark'] as const).map((value) => (
+          <button
+            key={value}
+            type="button"
+            role="tab"
+            aria-pressed={theme === value}
+            onClick={() => onThemeChange(value)}
+          >
+            {value === 'light' ? '毛玻璃' : '高级黑'}
+          </button>
+        ))}
+      </div>
+    </header>
+  );
+}