fix(chart,reports): chart card hugs the drawing, symbol help as a bubble, sky button shows at once, report card spacing and copy (BUG-1100..1103)

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

frontend/src/components/birth-sky/birth-sky-entry.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { Sparkles } from "lucide-react";
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -14,18 +15,23 @@ const BirthSkyReplay = dynamic(
 export const BIRTH_SKY_ENTRY_LABEL = "那一刻的天空";
 
 /**
- * The chart header's one extra action. Rendered only when the cover is already
- * painted; the replay (convergence, controls and CSS) is a lazy chunk opened on
- * click, and every open plays it again (TASK-mobile-chart-and-confirmed-edit-20260929 M4).
+ * The chart header's one extra action. Shown as soon as the chart is ready,
+ * while the cover PNG may still be painting (2026-09-29: it used to pop in about
+ * a second late). A click before the cover is ready is remembered and the
+ * replay opens the moment it arrives — no spinner in between; the replay's own
+ * convergence is the wait. The replay is a lazy chunk and every open plays it
+ * again (TASK-mobile-chart-and-confirmed-edit-20260929 M4).
  */
-export function BirthSkyEntry({ cover }: { cover: BirthSkyCover }) {
-  const [open, setOpen] = useState(false);
+export function BirthSkyEntry({ cover }: { cover: BirthSkyCover | null }) {
+  const [wanted, setWanted] = useState(false);
+  const open = wanted && cover !== null;
   return (
     <>
-      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
+      <Button type="button" variant="secondary" size="sm" className="birth-sky-entry" onClick={() => setWanted(true)}>
+        <Sparkles aria-hidden="true" />
         {BIRTH_SKY_ENTRY_LABEL}
       </Button>
-      {open ? <BirthSkyReplay cover={cover} onClose={() => setOpen(false)} /> : null}
+      {open ? <BirthSkyReplay cover={cover} onClose={() => setWanted(false)} /> : null}
     </>
   );
 }

frontend/src/components/chart-page/chart-page-view.tsx

@@ -34,7 +34,8 @@ export function ChartPageRoute() {
       pendingLayers={pendingLayers}
       layerFailures={layerFailures}
       onNeedLayer={requestLayer}
-      birthSky={birthSky}
+      birthSky={birthSky.cover}
+      birthSkyPending={birthSky.pending}
     />
   );
 }
@@ -74,6 +75,7 @@ export function ChartPageView({
   onNeedLayer,
   initialTab = "vedic",
   birthSky = null,
+  birthSkyPending = false,
 }: {
   view: ChartViewResponse | null;
   pendingLayers?: ReadonlySet<ChartViewLayer>;
@@ -82,6 +84,8 @@ export function ChartPageView({
   initialTab?: ChartViewTabId;
   /** Painted cover for the header button; null until ready, and after any failure. */
   birthSky?: BirthSkyCover | null;
+  /** The cover is still painting: the button already shows and opens when it lands. */
+  birthSkyPending?: boolean;
 }) {
   const [tab, setTab] = useState<ChartViewTabId>(initialTab);
   const [vargaId, setVargaId] = useState<ChartTypeId>("D1");
@@ -108,7 +112,7 @@ export function ChartPageView({
     <SecondaryPageShell
       title="星盘"
       note={birthline}
-      actions={view?.status === "ok" && birthSky ? <BirthSkyEntry cover={birthSky} /> : undefined}
+      actions={view?.status === "ok" && (birthSky || birthSkyPending) ? <BirthSkyEntry cover={birthSky ?? null} /> : undefined}
     >
       {view != null && view.status !== "ok" ? (
         <section className="chart-page-message">

frontend/src/components/chart-page/chart-symbol-help.tsx

@@ -1,13 +1,21 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 
-type Explain = (text: string | null) => void;
+/** `anchor` is the mark the bubble points at; without one the last anchor is kept. */
+export type Explain = (text: string | null, anchor?: Element | null) => void;
 type Props = {
   resetKey: string;
   children: ReactNode | ((explain: Explain) => ReactNode);
 };
 
+/** How long a tapped bubble stays up on touch screens, which have no pointer-leave to close it. */
+export const TOUCH_BUBBLE_MS = 3000;
+/** Room kept between the bubble and the stage edge; the bubble never runs off it. */
+const EDGE = 8;
+/** Half the bubble's max width (see `.chart-symbol-bubble`), for clamping the centre. */
+const HALF_WIDTH = 110;
+
 /** The drawing only supplies facts. All transient help stays on the chart page. */
 export function ChartSymbolHelp({ resetKey, children }: Props) {
   return <SymbolHelpSession key={resetKey}>{children}</SymbolHelpSession>;
@@ -22,26 +30,94 @@ function helpTarget(target: EventTarget | null): Element | null {
   return null;
 }
 
+type Bubble = { text: string; x: number; y: number; below: boolean };
+
+/**
+ * Where the bubble goes, in the stage's own coordinates: centred over the mark,
+ * above it unless that would leave the stage, and pulled in from the sides so
+ * the text never runs off the chart (2026-09-29, product: a bubble at the mark,
+ * not a line of text under the chart).
+ */
+export function placeBubble(
+  mark: Pick<DOMRect, "left" | "top" | "width" | "height">,
+  stage: Pick<DOMRect, "left" | "top" | "width">,
+): Omit<Bubble, "text"> {
+  const centre = mark.left - stage.left + mark.width / 2;
+  const x = Math.min(Math.max(centre, HALF_WIDTH + EDGE), Math.max(stage.width - HALF_WIDTH - EDGE, HALF_WIDTH + EDGE));
+  const top = mark.top - stage.top;
+  const below = top < 48;
+  return { x, y: below ? top + mark.height : top, below };
+}
+
 function SymbolHelpSession({ children }: Pick<Props, "children">) {
-  const [help, setHelp] = useState<string | null>(null);
+  const stage = useRef<HTMLDivElement>(null);
+  const [bubble, setBubble] = useState<Bubble | null>(null);
+  const touchTimer = useRef<number | null>(null);
+
+  function show(text: string | null, anchor: Element | null | undefined) {
+    if (!text) {
+      setBubble(null);
+      return;
+    }
+    // Found from the mark rather than a ref: `explain` is handed to the drawing during render.
+    const box = anchor?.closest(".chart-page-symbol-help")?.getBoundingClientRect();
+    const mark = anchor?.getBoundingClientRect();
+    if (!box || !mark) {
+      // No geometry for this mark: keep the last position, or the stage corner. Never drop the text.
+      setBubble((current) => ({ x: HALF_WIDTH + EDGE, y: 0, below: true, ...current, text }));
+      return;
+    }
+    setBubble({ text, ...placeBubble(mark, box) });
+  }
   const explainTarget = (target: EventTarget | null) => {
-    setHelp(helpTarget(target)?.getAttribute("data-chart-help") ?? null);
+    const element = helpTarget(target);
+    show(element?.getAttribute("data-chart-help") ?? null, element);
   };
+  const explain: Explain = (text, anchor) => show(text, anchor);
+
+  function clearTouchTimer() {
+    if (touchTimer.current !== null) window.clearTimeout(touchTimer.current);
+    touchTimer.current = null;
+  }
+
+  // A tap anywhere outside the chart closes a tapped bubble.
+  useEffect(() => {
+    if (!bubble) return;
+    const close = (event: PointerEvent) => {
+      if (stage.current && event.target instanceof Node && !stage.current.contains(event.target)) setBubble(null);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [bubble]);
+  useEffect(() => clearTouchTimer, []);
+
   return (
     <div
+      ref={stage}
       className="chart-page-symbol-help"
-      onPointerOver={(event) => explainTarget(event.target)}
-      onPointerMove={(event) => explainTarget(event.target)}
+      onPointerOver={(event) => {
+        if (event.pointerType !== "touch") explainTarget(event.target);
+      }}
       onPointerOut={(event) => {
-        if (helpTarget(event.target) !== helpTarget(event.relatedTarget)) setHelp(null);
+        // Touch fires pointer-out right after the tap; the bubble must survive it.
+        if (event.pointerType === "touch") return;
+        if (helpTarget(event.target) !== helpTarget(event.relatedTarget)) setBubble(null);
+      }}
+      onPointerLeave={(event) => {
+        if (event.pointerType !== "touch") setBubble(null);
       }}
-      onPointerLeave={() => setHelp(null)}
       onFocus={(event) => explainTarget(event.target)}
-      onBlur={() => setHelp(null)}
+      onBlur={() => setBubble(null)}
       onClick={(event) => explainTarget(event.target)}
+      onPointerUp={(event) => {
+        if (event.pointerType !== "touch") return;
+        explainTarget(event.target);
+        clearTouchTimer();
+        touchTimer.current = window.setTimeout(() => setBubble(null), TOUCH_BUBBLE_MS);
+      }}
       onKeyDown={(event) => {
         if (event.key === "Escape") {
-          setHelp(null);
+          setBubble(null);
           event.stopPropagation();
         } else if (event.key === "Enter" || event.key === " ") {
           const target = helpTarget(event.target);
@@ -52,10 +128,18 @@ function SymbolHelpSession({ children }: Pick<Props, "children">) {
         }
       }}
     >
-      {typeof children === "function" ? children(setHelp) : children}
-      <p className="chart-page-note chart-page-symbol-note" role="status" aria-live="polite" aria-atomic="true">
-        {help ?? "停在或轻点盘内标记可查看说明。"}
-      </p>
+      {typeof children === "function" ? children(explain) : children}
+      {bubble ? (
+        <div
+          className={`chart-symbol-bubble${bubble.below ? " is-below" : ""}`}
+          role="tooltip"
+          style={{ left: bubble.x, top: bubble.y }}
+        >
+          {bubble.text}
+        </div>
+      ) : null}
+      {/* Screen readers still hear the same sentence the bubble shows. */}
+      <p className="sr-only" role="status" aria-live="polite" aria-atomic="true">{bubble?.text ?? ""}</p>
     </div>
   );
 }

frontend/src/components/chart-page/western-wheel-svg.tsx

@@ -85,7 +85,7 @@ export function WesternWheelSvg({
   skeleton?: boolean;
   selectedLabel?: string | null;
   onSelectPlanet?: (id: string) => void;
-  onExplain?: (text: string | null) => void;
+  onExplain?: (text: string | null, anchor?: Element | null) => void;
 }) {
   const western = skeleton ? EMPTY_WESTERN_WHEEL : suppliedWestern;
   const asc = western.ascendantLongitude;
@@ -134,16 +134,22 @@ export function WesternWheelSvg({
   function explainNearest(event: PointerEvent<SVGElement>, fallbackId: string) {
     if (!onExplain) return;
     event.stopPropagation();
-    onExplain(planetDescription(nearestId(event, fallbackId)));
+    const id = nearestId(event, fallbackId);
+    onExplain(planetDescription(id), planetAnchor(event.currentTarget, id));
   }
   function selectNearest(event: MouseEvent<SVGElement>, fallbackId: string) {
     const id = nearestId(event, fallbackId);
     onSelectPlanet?.(id);
     if (onExplain) {
       event.stopPropagation();
-      onExplain(planetDescription(id));
+      onExplain(planetDescription(id), planetAnchor(event.currentTarget, id));
     }
   }
+  /** The bubble points at the planet that was resolved, not merely the one under the pointer. */
+  function planetAnchor(from: EventTarget, id: string): Element | null {
+    if (!(from instanceof Element)) return null;
+    return from.closest("svg")?.querySelector(`[data-planet-id="${CSS.escape(id)}"]`) ?? from;
+  }
   function helpProps(text: string) {
     return onExplain ? {
       className: "chart-page-symbol-target", role: "button", tabIndex: 0,
@@ -236,6 +242,7 @@ export function WesternWheelSvg({
             key={planet.id}
             className={selected ? "chart-page-western-planet is-selected" : "chart-page-western-planet"}
             data-tier={placement.tier}
+            data-planet-id={planet.id}
             role="button"
             tabIndex={0}
             aria-pressed={selected}
@@ -246,14 +253,14 @@ export function WesternWheelSvg({
             onFocus={(event) => {
               if (!onExplain) return;
               event.stopPropagation();
-              onExplain(planetDescription(planet.id));
+              onExplain(planetDescription(planet.id), event.currentTarget);
             }}
             onClick={(event) => selectNearest(event, planet.id)}
             onKeyDown={(event) => {
               if (event.key !== "Enter" && event.key !== " ") return;
               event.preventDefault();
               onSelectPlanet?.(planet.id);
-              onExplain?.(planetDescription(planet.id));
+              onExplain?.(planetDescription(planet.id), event.currentTarget);
             }}
           >
             <line

frontend/src/components/personal-report/personal-report-center.tsx

@@ -157,8 +157,10 @@ export function PersonalReportCenter() {
           entry: the header no longer carries a second button (2026-09-29). */}
       <section className="report-center-create" aria-labelledby="report-center-create-title">
         <FileText aria-hidden="true" className="size-7" />
-        <h2 id="report-center-create-title">生成个人报告</h2>
-        <p>创建后即可离开，完成时下方列表会自动更新。</p>
+        {/* The title says what you get, the button says what it does (2026-09-29):
+            「生成个人报告」 over a 「生成报告」 button said the same thing twice. */}
+        <h2 id="report-center-create-title">完整本命报告</h2>
+        <p>星盘、力量、大运、年运、瑜伽共 6 章，中英两版；生成后可离开，完成时下方自动出现。</p>
         <GeneratePersonalReportButton onCreated={() => void load()} />
       </section>
       <section className="report-center-section">