Compact left column layout and require manual cast start.

Stop stretching input cards to match AI panel height, and show a start button before online/offline hexagram casting begins.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/shared/hexagram-input.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { Play } from "lucide-react";
 import { bool } from "aimless.js";
 import Coin from "@/components/coin";
 import Hexagram from "@/components/hexagram";
@@ -18,6 +19,8 @@ const AUTO_DELAY = 800;
 interface HexagramInputProps {
   mode: "online" | "offline";
   enabled: boolean;
+  active: boolean;
+  onStart: () => void;
   onResult: (data: GuaResult) => void;
   onClear: () => void;
 }
@@ -25,6 +28,8 @@ interface HexagramInputProps {
 export default function HexagramInput({
   mode,
   enabled,
+  active,
+  onStart,
   onResult,
   onClear,
 }: HexagramInputProps) {
@@ -43,6 +48,14 @@ export default function HexagramInput({
     setRotation(false);
   }, [mode]);
 
+  useEffect(() => {
+    if (!active) {
+      setHexagramList([]);
+      setOfflineCounts(Array(6).fill(null));
+      setRotation(false);
+    }
+  }, [active]);
+
   const finishList = useCallback(
     (list: GuaResult["list"]) => {
       const result = computeGuaResult(list);
@@ -76,20 +89,28 @@ export default function HexagramInput({
   }, [frontList, finishList]);
 
   const startOnlineCast = useCallback(() => {
-    if (rotation || !enabled || hexagramList.length >= 6) {
+    if (rotation || !enabled || !active || hexagramList.length >= 6) {
       return;
     }
     setFrontList([bool(), bool(), bool()]);
     setRotation(true);
-  }, [rotation, enabled, hexagramList.length]);
+  }, [rotation, enabled, active, hexagramList.length]);
 
   useEffect(() => {
-    if (mode !== "online" || !enabled || rotation || complete) {
+    if (mode !== "online" || !enabled || !active || rotation || complete) {
       return;
     }
     const timer = setTimeout(startOnlineCast, AUTO_DELAY);
     return () => clearTimeout(timer);
-  }, [mode, enabled, rotation, complete, hexagramList.length, startOnlineCast]);
+  }, [
+    mode,
+    enabled,
+    active,
+    rotation,
+    complete,
+    hexagramList.length,
+    startOnlineCast,
+  ]);
 
   function handleOfflineSelect(index: number, frontCount: number) {
     const next = [...offlineCounts];
@@ -123,6 +144,20 @@ export default function HexagramInput({
     );
   }
 
+  if (!active) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-1">
+        <p className="text-center text-sm text-muted-foreground">
+          信息已填写完毕，确认无误后手动开始起卦
+        </p>
+        <Button type="button" onClick={onStart}>
+          <Play size={16} className="mr-1" />
+          开始起卦
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex w-full flex-col items-center gap-4">
       {mode === "online" && (