#111 第 3 轮：建档不退回加载、右栏能拖宽、清单不迟到、月亮问句与别人的上升句（BUG-1455～1459）

- 建档重读人物名单时保留旧名单，失败也不卡在加载画面（BUG-1455）
- 对话右栏改用自己的拖宽把手，侧栏与右栏都能用方向键（BUG-1456/1457）
- 启程清单胶囊和首页一起出来，读状态时用上次的样子占位（BUG-1458）
- 起步第一问与别人的天空过场读一次已算好的星盘取星座，上升只在不会换座时用（BUG-1459，产品 10-27 同意）
- 补回删减的断言与三栏说明；登录代码改回原样，替身放进测试；删旧校正画面的无用样式
- 首屏 +7.54% 产品已接受，写进 DESIGN

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LutgzyJqNhPpZy1nFsJtN3

frontend/src/components/chat-chart-split.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import type { PanelImperativeHandle } from "react-resizable-panels";
-
 import { ChatNatalChart } from "@/components/chat-natal-chart";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Button } from "@/components/ui/button";
+import { useDragWidth } from "@/hooks/use-drag-width";
 import { CHAT_CHART_WIDTH_MAX, CHAT_CHART_WIDTH_MIN } from "@/lib/chat-chart-panel-state";
 
+/**
+ * The right-hand natal column. The chat column stays outside it, so loading this
+ * never remounts the chat (BUG-1448). Its left edge drags or takes the arrow
+ * keys; dragging below the minimum closes the panel (BUG-1456).
+ */
 export function ChatChartSplit({
   open,
   width,
@@ -20,44 +23,26 @@ export function ChatChartSplit({
   onOpenChange: (open: boolean) => void;
   onWidth: (width: number) => void;
 }) {
-  const panelRef = useRef<PanelImperativeHandle | null>(null);
-
-  useEffect(() => {
-    const panel = panelRef.current;
-    if (!panel) return;
-    if (open && panel.isCollapsed()) panel.expand();
-    if (!open && !panel.isCollapsed()) panel.collapse();
-  }, [open]);
-
-  function onLayoutChanged(_layout: Record<string, number>, meta: { isUserInteraction: boolean }) {
-    if (!meta.isUserInteraction) return;
-    const panel = panelRef.current;
-    if (!panel) return;
-    if (panel.isCollapsed()) {
-      onOpenChange(false);
-      return;
-    }
-    onOpenChange(true);
-    const pixels = panel.getSize().inPixels;
-    if (pixels >= CHAT_CHART_WIDTH_MIN) onWidth(Math.round(pixels));
-  }
+  const resize = useDragWidth({
+    width,
+    min: CHAT_CHART_WIDTH_MIN,
+    max: CHAT_CHART_WIDTH_MAX,
+    edge: "left",
+    onWidth,
+    onCollapse: () => onOpenChange(false),
+  });
 
   if (!open) return null;
   return (
-    <ResizablePanelGroup orientation="horizontal" className="chat-chart-split" style={{ width }} onLayoutChanged={onLayoutChanged}>
-      <ResizableHandle withHandle className="chat-chart-resize-handle" />
-      <ResizablePanel
-        id="chat-natal"
-        panelRef={panelRef}
-        collapsible
-        collapsedSize={0}
-        minSize={CHAT_CHART_WIDTH_MIN}
-        maxSize={CHAT_CHART_WIDTH_MAX}
-        defaultSize={open ? width : 0}
-        groupResizeBehavior="preserve-pixel-size"
-      >
-        <ChatNatalChart subjectId={subjectId} />
-      </ResizablePanel>
-    </ResizablePanelGroup>
+    <aside className="chat-chart-split" style={{ width }} aria-label="本命盘">
+      <Button
+        type="button"
+        variant="ghost"
+        className="chat-chart-resize-handle"
+        aria-label="调整本命盘宽度"
+        {...resize}
+      />
+      <ChatNatalChart subjectId={subjectId} />
+    </aside>
   );
 }