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/modes/combined-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Compass } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -35,6 +35,7 @@ export default function CombinedForm() {
   const [question, setQuestion] = useState("");
   const [withHexagram, setWithHexagram] = useState(false);
   const [castMode, setCastMode] = useState<"online" | "offline">("online");
+  const [castActive, setCastActive] = useState(false);
   const [guaData, setGuaData] = useState<GuaResult | null>(null);
 
   const [chart, setChart] = useState<BaziChart | null>(null);
@@ -48,6 +49,11 @@ export default function CombinedForm() {
     !withHexagram ||
     (question.trim() !== "" && currentLocation !== null && guaData !== null);
 
+  useEffect(() => {
+    setCastActive(false);
+    setGuaData(null);
+  }, [currentProvince, currentCity, castMode, question, withHexagram]);
+
   function validate(): string | null {
     if (!birthLocation) {
       return "请选择出生地域";
@@ -258,8 +264,13 @@ export default function CombinedForm() {
               key={castMode}
               mode={castMode}
               enabled={question.trim() !== "" && currentLocation !== null}
+              active={castActive}
+              onStart={() => setCastActive(true)}
               onResult={setGuaData}
-              onClear={() => setGuaData(null)}
+              onClear={() => {
+                setGuaData(null);
+                setCastActive(false);
+              }}
             />
             {guaData && (
               <div className="rounded-lg border bg-card p-3">

components/modes/liuyao-form.tsx

@@ -29,6 +29,7 @@ export default function LiuyaoForm() {
   const [calcDate, setCalcDate] = useState(nowDateString);
   const [calcTime, setCalcTime] = useState(nowTimeString);
   const [castMode, setCastMode] = useState<"online" | "offline">("online");
+  const [castActive, setCastActive] = useState(false);
   const [guaData, setGuaData] = useState<GuaResult | null>(null);
   const [completion, setCompletion] = useState("");
   const [error, setError] = useState("");
@@ -37,6 +38,11 @@ export default function LiuyaoForm() {
   const location = useRegionLocation(provinceCode, cityCode);
   const formReady = question.trim() !== "" && location !== null;
 
+  useEffect(() => {
+    setCastActive(false);
+    setGuaData(null);
+  }, [provinceCode, cityCode, castMode, question]);
+
   function validate(): string | null {
     if (!question.trim()) {
       return "请输入问事";
@@ -92,6 +98,8 @@ export default function LiuyaoForm() {
     setCityCode("");
     setCalcDate(nowDateString());
     setCalcTime(nowTimeString());
+    setCastMode("online");
+    setCastActive(false);
     setGuaData(null);
     setCompletion("");
     setError("");
@@ -117,7 +125,7 @@ export default function LiuyaoForm() {
         />
       }
     >
-      <ZenCard title="问事 · 心意" subtitle="所求何事，心诚则灵" className="flex h-full min-h-0 flex-col">
+      <ZenCard title="问事 · 心意" subtitle="所求何事，心诚则灵">
         <Textarea
           placeholder="您想算点什么？"
           value={question}
@@ -139,7 +147,7 @@ export default function LiuyaoForm() {
         </div>
       </ZenCard>
 
-      <ZenCard title="起卦 · 时空" subtitle="地域、时辰与六爻" className="flex h-full min-h-0 flex-col">
+      <ZenCard title="起卦 · 时空" subtitle="地域、时辰与六爻">
         <RegionSelect
           label="起卦地域"
           provinceCode={provinceCode}
@@ -182,8 +190,13 @@ export default function LiuyaoForm() {
           key={castMode}
           mode={castMode}
           enabled={formReady}
+          active={castActive}
+          onStart={() => setCastActive(true)}
           onResult={handleGuaResult}
-          onClear={() => setGuaData(null)}
+          onClear={() => {
+            setGuaData(null);
+            setCastActive(false);
+          }}
         />
         {guaData && (
           <div className="rounded-xl border border-primary/20 bg-primary/5 p-4">