feat: move material intake into sidebar

web/components/ad-recreation-board.tsx

@@ -2478,17 +2478,34 @@ export function AdRecreationBoard({
       <div className="skg-board-ambient pointer-events-none fixed inset-0" />
       <div className="relative z-10 mx-auto min-h-screen w-full min-w-[1280px] max-w-[1920px] px-4 py-4 xl:px-5">
         <div className="skg-board-shell flex gap-4 p-4">
-          <WorkbenchRail
-            job={job}
-            jobsCount={jobs.length}
-            audioReady={audioReady}
-            visualReady={visualReady}
-            subjectAssetCount={subjectAssetCount}
-            generatedVideoCount={generatedVideos.length}
-            onOpenLibrary={() => setLibraryOpen(true)}
-            onToggleTheme={toggleBoardTheme}
-            boardTheme={boardTheme}
-          />
+          <div className="flex shrink-0 gap-3 self-stretch">
+            <WorkbenchRail
+              job={job}
+              jobsCount={jobs.length}
+              audioReady={audioReady}
+              visualReady={visualReady}
+              subjectAssetCount={subjectAssetCount}
+              generatedVideoCount={generatedVideos.length}
+              onOpenLibrary={() => setLibraryOpen(true)}
+              onToggleTheme={toggleBoardTheme}
+              boardTheme={boardTheme}
+            />
+
+            <div className="w-[320px] shrink-0">
+              <MaterialColumn
+                data={data}
+                step={workflow.input}
+                jobs={jobs}
+                job={job}
+                activeJobId={activeJobId}
+                url={url}
+                setUrl={setUrl}
+                fileRef={fileRef}
+                onSubmitUrl={submitUrl}
+                onStartProduction={startProduction}
+              />
+            </div>
+          </div>
 
           <div className="flex min-w-0 flex-1 flex-col gap-3">
             <header className="skg-board-topbar flex items-center justify-between gap-4 rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3">
@@ -2502,7 +2519,7 @@ export function AdRecreationBoard({
                 </div>
                 <p className="mt-2 truncate text-[12px] text-white/42">源视频分析、转换层确认、主体套图、逐句分镜和视频候选集中生产。</p>
               </div>
-              <div className="grid min-w-[560px] grid-cols-5 gap-2 text-[11px]">
+              <div className="grid min-w-[440px] grid-cols-5 gap-2 text-[11px]">
                 <Metric label="素材" value={`${jobs.length}`} />
                 <Metric label="当前" value={shortId(activeJobId)} />
                 <Metric label="视频" value={job?.video_url ? "ready" : "-"} />
@@ -2511,67 +2528,52 @@ export function AdRecreationBoard({
               </div>
             </header>
 
-            <div className="grid min-h-0 flex-1 grid-cols-[340px_minmax(0,1fr)] gap-3">
-              <MaterialColumn
-                data={data}
-                step={workflow.input}
-                jobs={jobs}
-                job={job}
-                activeJobId={activeJobId}
-                url={url}
-                setUrl={setUrl}
-                fileRef={fileRef}
-                onSubmitUrl={submitUrl}
-                onStartProduction={startProduction}
-              />
-
-              <section className="skg-board-panel flex min-h-0 flex-col rounded-[20px] border border-white/10 bg-white/[0.035] shadow-2xl">
-                <header className="shrink-0 border-b border-white/10 p-3">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Mic className="h-4 w-4" /></span>
-                        <WorkflowStepBadge step={workflow.source} compact />
-                        <h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
-                      </div>
-                      <div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
-                        {statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
-                      </div>
+            <section className="skg-board-panel flex min-h-0 flex-1 flex-col rounded-[20px] border border-white/10 bg-white/[0.035] shadow-2xl">
+              <header className="shrink-0 border-b border-white/10 p-3">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Mic className="h-4 w-4" /></span>
+                      <WorkflowStepBadge step={workflow.source} compact />
+                      <h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
                     </div>
-                    <div className="flex shrink-0 items-center gap-2">
-                      <ModelTrace trace={audioModelTrace(runtimeModels)} compact />
-                      <ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
-                        <Mic className="h-3.5 w-3.5" />
-                        解析音频
-                      </ActionButton>
+                    <div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
+                      {statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
                     </div>
                   </div>
-                </header>
-
-                <div className="min-h-0 flex-1 overflow-y-auto p-4">
-                  <AudioIntakePanel
-                    job={job}
-                    selectedFrames={data.selectedFrames}
-                    onToggleFrame={data.onToggleFrame}
-                    onJobUpdate={data.onJobUpdate}
-                    onAddFrame={data.onAddManualFrameForJob}
-                    onDeleteFrame={data.onDeleteFrameForJob}
-                    runtimeModels={runtimeModels}
-                  />
-                  <AudioStoryboardPlanPanel
-                    job={job}
-                    selectedFrames={data.selectedFrames}
-                    onJobUpdate={data.onJobUpdate}
-                    onDeleteVideo={data.onDeleteVideo}
-                    runtimeModels={runtimeModels}
-                    productStep={workflow.product}
-                    scriptStep={workflow.script}
-                    sceneStep={workflow.scene}
-                    videoStep={workflow.video}
-                  />
+                  <div className="flex shrink-0 items-center gap-2">
+                    <ModelTrace trace={audioModelTrace(runtimeModels)} compact />
+                    <ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
+                      <Mic className="h-3.5 w-3.5" />
+                      解析音频
+                    </ActionButton>
+                  </div>
                 </div>
-              </section>
-            </div>
+              </header>
+
+              <div className="min-h-0 flex-1 overflow-y-auto p-4">
+                <AudioIntakePanel
+                  job={job}
+                  selectedFrames={data.selectedFrames}
+                  onToggleFrame={data.onToggleFrame}
+                  onJobUpdate={data.onJobUpdate}
+                  onAddFrame={data.onAddManualFrameForJob}
+                  onDeleteFrame={data.onDeleteFrameForJob}
+                  runtimeModels={runtimeModels}
+                />
+                <AudioStoryboardPlanPanel
+                  job={job}
+                  selectedFrames={data.selectedFrames}
+                  onJobUpdate={data.onJobUpdate}
+                  onDeleteVideo={data.onDeleteVideo}
+                  runtimeModels={runtimeModels}
+                  productStep={workflow.product}
+                  scriptStep={workflow.script}
+                  sceneStep={workflow.scene}
+                  videoStep={workflow.video}
+                />
+              </div>
+            </section>
           </div>
         </div>
       </div>
@@ -2683,7 +2685,7 @@ function MaterialColumn({
     ? job.video_url ? "重新解析" : "重新下载"
     : "开始分析"
   return (
-    <section className="skg-board-panel flex min-h-0 flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
+    <section className="skg-board-panel flex h-full min-h-[514px] flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
       <header className="shrink-0 border-b border-white/10 pb-3">
         <div className="mb-2 flex items-center gap-2">
           <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>