From 68f06344dcad9125e058c40fdd81017566db2a50 Mon Sep 17 00:00:00 2001
From: allen2fuc <allen2fuc@gmail.com>
Date: Fri, 8 May 2026 18:15:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0AI=E9=A1=B5=E9=9D=A2=E5=9C=A8?=
 =?UTF-8?q?=E5=85=B6=E5=AE=83=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.tsx                       |  22 +++--
 client/src/components/BottomNav.tsx      |  53 ++++++++--
 client/src/components/DesktopAIShell.tsx | 121 +++++++++++++++++++++++
 client/src/contexts/AIDrawerContext.tsx  |  78 +++++++++++++++
 client/src/hooks/useIsLgUp.ts            |  20 ++++
 client/src/locales/data-en.json          |   2 +
 client/src/locales/data-zh-HK.json       |   2 +
 client/src/locales/data-zh.json          |   2 +
 client/src/pages/AIPage.tsx              |  49 ++++++++-
 9 files changed, 334 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/DesktopAIShell.tsx
 create mode 100644 client/src/contexts/AIDrawerContext.tsx
 create mode 100644 client/src/hooks/useIsLgUp.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b8be9c2..5cac1cf 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -20,6 +20,12 @@ import VUPage from "./pages/VUPage";
 import SelectPage from "./pages/SelectPage";
 import AIPage from "./pages/AIPage";
 import CommunityPage from "./pages/CommunityPage";
+import { AIDrawerProvider } from "./contexts/AIDrawerContext";
+import DesktopAIShell from "./components/DesktopAIShell";
+
+function AIPageRoute() {
+  return <AIPage />;
+}
 
 function AppRouter() {
   return (
@@ -36,7 +42,7 @@ function AppRouter() {
       <Route path="/io" component={IOPage} />
       <Route path="/vu" component={VUPage} />
       <Route path="/select" component={SelectPage} />
-      <Route path="/ai" component={AIPage} />
+      <Route path="/ai" component={AIPageRoute} />
       <Route path="/community" component={CommunityPage} />
       <Route path="/404" component={NotFound} />
       <Route component={NotFound} />
@@ -52,12 +58,16 @@ function App() {
           <TooltipProvider>
             <Toaster />
             <Router hook={useHashLocation}>
-              {/* Desktop: narrow shell centered in the browser with side gutters */}
-              <div className="min-h-dvh bg-[#0d1117]">
-                <div className="mx-auto min-h-dvh w-full max-w-full lg:max-w-[min(1180px,calc(100vw-3rem))]">
-                  <AppRouter />
+              <AIDrawerProvider>
+                {/* Desktop: narrow shell centered in the browser with side gutters */}
+                <div className="min-h-dvh bg-[#0d1117]">
+                  <div className="mx-auto min-h-dvh w-full max-w-full lg:max-w-[min(1180px,calc(100vw-3rem))]">
+                    <DesktopAIShell>
+                      <AppRouter />
+                    </DesktopAIShell>
+                  </div>
                 </div>
-              </div>
+              </AIDrawerProvider>
             </Router>
           </TooltipProvider>
         </DeviceProvider>
diff --git a/client/src/components/BottomNav.tsx b/client/src/components/BottomNav.tsx
index 34f4e85..7e3f3ba 100644
--- a/client/src/components/BottomNav.tsx
+++ b/client/src/components/BottomNav.tsx
@@ -6,6 +6,8 @@
    - Inactive: muted icon + label
    ============================================================ */
 import { cn } from "@/lib/utils";
+import { useAIDrawer } from "@/contexts/AIDrawerContext";
+import { useIsLgUp } from "@/hooks/useIsLgUp";
 import {
   Activity,
   Bot,
@@ -31,6 +33,8 @@ const NAV_ITEMS: NavItem[] = [
 
 export default function BottomNav() {
   const [location] = useLocation();
+  const isLgUp = useIsLgUp();
+  const { open: aiDrawerOpen, setOpen: setAiDrawerOpen } = useAIDrawer();
 
   return (
     <nav
@@ -46,14 +50,16 @@ export default function BottomNav() {
     >
       <div className="flex items-stretch justify-around">
         {NAV_ITEMS.map((item) => {
-          const isActive = location === item.path ||
-            (item.path === "/" && location === "/") ||
-            (item.path !== "/" && location.startsWith(item.path));
+          const isActive =
+            item.path === "/ai"
+              ? location === "/ai" || (isLgUp && aiDrawerOpen)
+              : location === item.path ||
+                (item.path === "/" && location === "/") ||
+                (item.path !== "/" && location.startsWith(item.path));
           const Icon = item.icon;
 
-          return (
-            <Link key={item.path} href={item.path}>
-              <div className="flex flex-col items-center justify-center relative pt-2.5 pb-1.5 px-3">
+          const inner = (
+            <div className="flex flex-col items-center justify-center relative pt-2.5 pb-1.5 px-3">
                 {/* Active indicator bar */}
                 <div
                   className="absolute top-0 left-1/2 -translate-x-1/2 rounded-b-full transition-all duration-300"
@@ -99,6 +105,41 @@ export default function BottomNav() {
                   {item.label}
                 </span>
               </div>
+          );
+
+          if (item.path === "/ai") {
+            if (!isLgUp) {
+              return (
+                <Link key={item.path} href={item.path}>
+                  {inner}
+                </Link>
+              );
+            }
+            return (
+              <div
+                key={item.path}
+                role="button"
+                tabIndex={0}
+                className="cursor-pointer select-none"
+                onClick={() => {
+                  if (location === "/ai") return;
+                  setAiDrawerOpen((o) => !o);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key !== "Enter" && e.key !== " ") return;
+                  e.preventDefault();
+                  if (location === "/ai") return;
+                  setAiDrawerOpen((o) => !o);
+                }}
+              >
+                {inner}
+              </div>
+            );
+          }
+
+          return (
+            <Link key={item.path} href={item.path}>
+              {inner}
             </Link>
           );
         })}
diff --git a/client/src/components/DesktopAIShell.tsx b/client/src/components/DesktopAIShell.tsx
new file mode 100644
index 0000000..c961d7b
--- /dev/null
+++ b/client/src/components/DesktopAIShell.tsx
@@ -0,0 +1,121 @@
+import AIPage from "@/pages/AIPage";
+import { useAIDrawer } from "@/contexts/AIDrawerContext";
+import { useIsLgUp } from "@/hooks/useIsLgUp";
+import { cn } from "@/lib/utils";
+import { useLocation } from "wouter";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+function SplitDivider({
+  containerRef,
+  onResize,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+  onResize: (aiPercent: number) => void;
+}) {
+  const dragging = useRef(false);
+
+  const onMove = useCallback(
+    (e: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return;
+      const r = containerRef.current.getBoundingClientRect();
+      const w = r.width;
+      if (w <= 0) return;
+      const aiPct = ((r.right - e.clientX) / w) * 100;
+      onResize(aiPct);
+    },
+    [containerRef, onResize],
+  );
+
+  useEffect(() => {
+    const onUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mouseup", onUp);
+    window.addEventListener("mousemove", onMove);
+    return () => {
+      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("mousemove", onMove);
+    };
+  }, [onMove]);
+
+  return (
+    <div
+      className={cn(
+        "group relative z-10 w-2 shrink-0 cursor-col-resize bg-transparent",
+        "hover:bg-[#00FFF6]/10",
+      )}
+      onMouseDown={() => {
+        dragging.current = true;
+      }}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize panels"
+    >
+      <div className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-white/15 transition-colors group-hover:bg-[#00FFF6]/45" />
+    </div>
+  );
+}
+
+/**
+ * lg+: optional side-by-side AI panel with draggable divider. Mobile unchanged (router only).
+ */
+export default function DesktopAIShell({ children }: { children: ReactNode }) {
+  const isLgUp = useIsLgUp();
+  const [location] = useLocation();
+  const { open, setOpen, splitPercent, setSplitPercent } = useAIDrawer();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const showSplit = Boolean(isLgUp && open && location !== "/ai");
+
+  useEffect(() => {
+    if (location === "/ai" && isLgUp) setOpen(false);
+  }, [location, isLgUp, setOpen]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "w-full min-w-0",
+        showSplit
+          ? "flex h-dvh max-h-dvh flex-row overflow-hidden"
+          : "min-h-dvh",
+      )}
+    >
+      <div
+        className={cn(
+          "min-w-0",
+          showSplit
+            ? "h-full min-h-0 overflow-y-auto overflow-x-hidden"
+            : "min-h-dvh overflow-x-hidden",
+        )}
+        style={
+          showSplit
+            ? { flex: `${100 - splitPercent} 1 0%`, minWidth: 0 }
+            : { width: "100%" }
+        }
+      >
+        {children}
+      </div>
+      {showSplit && (
+        <>
+          <SplitDivider
+            containerRef={containerRef}
+            onResize={(aiPct) => setSplitPercent(aiPct)}
+          />
+          <div
+            className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden border-l border-white/[0.08] bg-[#0d1117]"
+            style={{ flex: `${splitPercent} 1 0%` }}
+          >
+            <AIPage variant="split" onClose={() => setOpen(false)} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/contexts/AIDrawerContext.tsx b/client/src/contexts/AIDrawerContext.tsx
new file mode 100644
index 0000000..1ef8ffa
--- /dev/null
+++ b/client/src/contexts/AIDrawerContext.tsx
@@ -0,0 +1,78 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+
+const SPLIT_STORAGE_KEY = "luxsin-ai-split-pct";
+const SPLIT_MIN = 28;
+const SPLIT_MAX = 72;
+
+function clampPct(n: number) {
+  return Math.min(SPLIT_MAX, Math.max(SPLIT_MIN, Math.round(n)));
+}
+
+function loadSplitPct(): number {
+  if (typeof window === "undefined") return 50;
+  try {
+    const v = sessionStorage.getItem(SPLIT_STORAGE_KEY);
+    if (v) {
+      const n = parseInt(v, 10);
+      if (!Number.isNaN(n)) return clampPct(n);
+    }
+  } catch {
+    /* ignore */
+  }
+  return 50;
+}
+
+type AIDrawerContextValue = {
+  /** Desktop split panel visible (only used when lg+ and route !== /ai) */
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  toggle: () => void;
+  /** Width share of the AI column (percent), used when split view is shown */
+  splitPercent: number;
+  setSplitPercent: (pct: number) => void;
+};
+
+const AIDrawerContext = createContext<AIDrawerContextValue | null>(null);
+
+export function AIDrawerProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [splitPercent, setSplitPercentState] = useState(loadSplitPct);
+
+  const toggle = useCallback(() => setOpen((o) => !o), []);
+
+  const setSplitPercent = useCallback((pct: number) => {
+    const next = clampPct(pct);
+    setSplitPercentState(next);
+    try {
+      sessionStorage.setItem(SPLIT_STORAGE_KEY, String(next));
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ open, setOpen, toggle, splitPercent, setSplitPercent }),
+    [open, splitPercent, setSplitPercent, toggle],
+  );
+
+  return (
+    <AIDrawerContext.Provider value={value}>{children}</AIDrawerContext.Provider>
+  );
+}
+
+export function useAIDrawer() {
+  const ctx = useContext(AIDrawerContext);
+  if (!ctx) {
+    throw new Error("useAIDrawer must be used within AIDrawerProvider");
+  }
+  return ctx;
+}
diff --git a/client/src/hooks/useIsLgUp.ts b/client/src/hooks/useIsLgUp.ts
new file mode 100644
index 0000000..29c5fd7
--- /dev/null
+++ b/client/src/hooks/useIsLgUp.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+/** Matches Tailwind `lg:` (1024px). Used for desktop-only UI such as the AI split panel. */
+export function useIsLgUp() {
+  const [lgUp, setLgUp] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(min-width: 1024px)").matches,
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia("(min-width: 1024px)");
+    const sync = () => setLgUp(mql.matches);
+    mql.addEventListener("change", sync);
+    sync();
+    return () => mql.removeEventListener("change", sync);
+  }, []);
+
+  return lgUp;
+}
diff --git a/client/src/locales/data-en.json b/client/src/locales/data-en.json
index 8670181..2854e31 100644
--- a/client/src/locales/data-en.json
+++ b/client/src/locales/data-en.json
@@ -506,6 +506,8 @@
     "ariaNewChat": "New chat",
     "ariaHistory": "History",
     "ariaClose": "Close",
+    "ariaFullPage": "Open full screen",
+    "ariaHidePanel": "Hide AI panel",
     "clearCurrent": "Clear this chat",
     "cleared": "Current chat cleared",
     "clearFailed": "Clear failed: {message}",
diff --git a/client/src/locales/data-zh-HK.json b/client/src/locales/data-zh-HK.json
index ecef9d2..27293f8 100644
--- a/client/src/locales/data-zh-HK.json
+++ b/client/src/locales/data-zh-HK.json
@@ -320,6 +320,8 @@
     "ariaNewChat": "新增會話",
     "ariaHistory": "歷史會話",
     "ariaClose": "關閉",
+    "ariaFullPage": "全螢幕開啟",
+    "ariaHidePanel": "收起 AI 面板",
     "clearCurrent": "清空目前會話",
     "cleared": "已清空目前會話",
     "clearFailed": "清空失敗：{message}",
diff --git a/client/src/locales/data-zh.json b/client/src/locales/data-zh.json
index 3774cb6..68ad70c 100644
--- a/client/src/locales/data-zh.json
+++ b/client/src/locales/data-zh.json
@@ -321,6 +321,8 @@
     "ariaNewChat": "新建会话",
     "ariaHistory": "历史会话",
     "ariaClose": "关闭",
+    "ariaFullPage": "全屏打开",
+    "ariaHidePanel": "收起 AI 面板",
     "clearCurrent": "清空当前会话",
     "cleared": "已清空当前会话",
     "clearFailed": "清空失败：{message}",
diff --git a/client/src/pages/AIPage.tsx b/client/src/pages/AIPage.tsx
index 647f08e..43f84d4 100644
--- a/client/src/pages/AIPage.tsx
+++ b/client/src/pages/AIPage.tsx
@@ -43,7 +43,10 @@ import {
   RotateCcw,
   Loader2,
   Trash2,
+  Maximize2,
+  ChevronsRight,
 } from "lucide-react";
+import { useLocation } from "wouter";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
 import { toast } from "sonner";
@@ -134,7 +137,17 @@ function makeId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
-export default function AIPage() {
+export type AIPageVariant = "page" | "split";
+
+export interface AIPageProps {
+  variant?: AIPageVariant;
+  /** Hide side panel (desktop split) */
+  onClose?: () => void;
+}
+
+export default function AIPage({ variant = "page", onClose }: AIPageProps = {}) {
+  const isEmbedded = variant === "split";
+  const [, setLocation] = useLocation();
   const { isConnected, deviceState, api } = useDevice();
   const mac = deviceState?.mac ?? "";
   const language = deviceState?.language ?? 2;
@@ -610,11 +623,41 @@ export default function AIPage() {
 
   return (
     <div
-      className="h-[100dvh] bg-black flex flex-col overflow-hidden pb-[calc(env(safe-area-inset-bottom,0px)+56px)]"
+      className={cn(
+        "flex flex-col overflow-hidden bg-black",
+        /* Same clearance as Layout/main above fixed BottomNav */
+        "pb-[calc(4rem+env(safe-area-inset-bottom,0px))]",
+        isEmbedded ? "h-full min-h-0" : "h-[100dvh]",
+      )}
     >
       {/* ── Header ── */}
       <div className="page-header flex-shrink-0">
         <div className="flex items-center gap-2 mr-auto">
+          {isEmbedded && onClose && (
+            <>
+              <button
+                type="button"
+                onClick={onClose}
+                className="mr-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
+                style={{ background: "rgba(44,44,46,0.6)" }}
+                aria-label={aiText.ariaHidePanel}
+              >
+                <ChevronsRight size={18} />
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setLocation("/ai");
+                  onClose();
+                }}
+                className="mr-1 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
+                style={{ background: "rgba(44,44,46,0.6)" }}
+                aria-label={aiText.ariaFullPage}
+              >
+                <Maximize2 size={16} />
+              </button>
+            </>
+          )}
           <div
             className="w-7 h-7 rounded-full flex items-center justify-center"
             style={{
@@ -790,7 +833,7 @@ export default function AIPage() {
         />
       )}
 
-      <BottomNav />
+      {!isEmbedded && <BottomNav />}
     </div>
   );
 }