交互原型大版本

art-agent/frontend/src/app/page.tsx

@@ -4,6 +4,9 @@ import { useCallback, useEffect, useRef, useState, type DragEvent } from "react"
 import { motion, AnimatePresence } from "framer-motion";
 import { ChatMessages } from "@/components/chat/chat-messages";
 import { ChatInput, type ChatInputHandle } from "@/components/chat/chat-input";
+import { SessionQuickPicks } from "@/components/chat/session-quick-picks";
+import { AdvancedControls } from "@/components/workbench/advanced-controls";
+import { CandidatePanel } from "@/components/workbench/candidate-panel";
 import { Sidebar } from "@/components/sidebar/sidebar";
 import { TopNav } from "@/components/layout/top-nav";
 import { ImageDetailPanel } from "@/components/detail/image-detail-panel";
@@ -44,6 +47,7 @@ export default function Home() {
   const prevSessionId = useRef<string | null>(null);
   const isSwitching = useRef(false);
   const [showScrollBtn, setShowScrollBtn] = useState(false);
+  const [showCandidates, setShowCandidates] = useState(false);
 
   const scrollToBottom = useCallback((instant?: boolean) => {
     if (isSwitching.current && !instant) return;
@@ -460,6 +464,33 @@ export default function Home() {
             )}
           </AnimatePresence>
 
+          <div className="flex-shrink-0 border-t border-[var(--border)] bg-[var(--bg-secondary)]/60 backdrop-blur-md
+                          flex items-center">
+            <div className="flex-1 min-w-0">
+              <SessionQuickPicks />
+            </div>
+            <div className="px-3 md:px-5 py-2 flex items-center gap-1.5">
+              <AdvancedControls />
+              <button
+                onClick={() => setShowCandidates(true)}
+                className="h-7 px-2 rounded-lg text-xs flex items-center gap-1.5
+                           border border-[var(--border)] bg-[var(--bg-tertiary)]
+                           text-[var(--text-secondary)] hover:text-[var(--text-primary)]
+                           hover:border-[var(--accent)]/40 cursor-pointer transition-all"
+                title="候选评估（占位）"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <rect x="3" y="3" width="7" height="7" />
+                  <rect x="14" y="3" width="7" height="7" />
+                  <rect x="3" y="14" width="7" height="7" />
+                  <rect x="14" y="14" width="7" height="7" />
+                </svg>
+                候选
+                <span className="phase-chip">P1</span>
+              </button>
+            </div>
+          </div>
+
           <ChatInput
             ref={chatInputRef}
             onSend={handleSend}
@@ -482,6 +513,24 @@ export default function Home() {
           <ImageDetailPanel onAnnotationComplete={handleAnnotationComplete} />
         )}
       </div>
+
+      {showCandidates && (
+        <CandidatePanel
+          candidates={
+            messages
+              .slice()
+              .reverse()
+              .find((m) => m.role === "assistant" && m.images && m.images.length > 0)?.images ??
+            streamingImages ??
+            []
+          }
+          onPick={(id) => {
+            alert(`（占位）已选 ${id} 作为定稿`);
+            setShowCandidates(false);
+          }}
+          onClose={() => setShowCandidates(false)}
+        />
+      )}
     </div>
   );
 }