diff --git a/README.md b/README.md
index 256f79d..ac509ba 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ StoryForge 现在拆成独立项目目录，和 `AI-glasses` 分开维护。
 - [新媒体运营中台产品逻辑手册](./docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md)
 - [新媒体运营平台 UI 参考包](./output/ui/new-media-ops-reference-2026-03-22/README.md)
 - [Web V4 UI 原型](./output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md)
+- [Web V4 前端骨架](./web/storyforge-web-v4/README.md)
 - [Mobile V4 UI 原型](./output/ui/storyforge-mobile-v4-html-prototype-2026-03-22/README.md)
 
 ## Android
diff --git a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt
index c2dd881..9811ca0 100644
--- a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt
@@ -53,14 +53,19 @@ fun StoryForgeScreen(
     onInstallLatestUpdate: () -> Unit
 ) {
     val heroBrush = Brush.linearGradient(
-        colors = listOf(Color(0xFF0B3C5D), Color(0xFF1F6E5F), Color(0xFFB97524))
+        colors = listOf(Color(0xFFEAF3FF), Color(0xFFD6E9FF), Color(0xFFF7FBFF))
     )
 
     Scaffold(
         bottomBar = {
             if (state.isAuthenticated && state.isApproved) {
-                NavigationBar(modifier = Modifier.navigationBarsPadding()) {
-                    BottomTabItem(label = "探索", tab = StoryForgeTab.Explore, state = state, onSelect = vm::selectTab)
+                NavigationBar(
+                    modifier = Modifier.navigationBarsPadding(),
+                    containerColor = MaterialTheme.colorScheme.surface
+                ) {
+                    BottomTabItem(label = "总览", tab = StoryForgeTab.Overview, state = state, onSelect = vm::selectTab)
+                    BottomTabItem(label = "对标", tab = StoryForgeTab.Benchmark, state = state, onSelect = vm::selectTab)
+                    BottomTabItem(label = "Agent", tab = StoryForgeTab.Agent, state = state, onSelect = vm::selectTab)
                     BottomTabItem(label = "生产", tab = StoryForgeTab.Production, state = state, onSelect = vm::selectTab)
                     BottomTabItem(label = "我的", tab = StoryForgeTab.Mine, state = state, onSelect = vm::selectTab)
                 }
@@ -100,13 +105,29 @@ private fun BottomTabItem(
         modifier = Modifier
             .clip(RoundedCornerShape(18.dp))
             .clickable { onSelect(tab) }
-            .background(if (selected) MaterialTheme.colorScheme.primaryContainer else Color.Transparent)
-            .padding(horizontal = 14.dp, vertical = 10.dp),
+            .background(
+                if (selected) MaterialTheme.colorScheme.primary.copy(alpha = 0.12f) else Color.Transparent
+            )
+            .padding(horizontal = 10.dp, vertical = 10.dp),
         contentAlignment = Alignment.Center
     ) {
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
-            Text(text = label.take(1), fontWeight = FontWeight.Bold)
-            Text(label, style = MaterialTheme.typography.labelSmall)
+            Box(
+                modifier = Modifier
+                    .size(10.dp)
+                    .clip(RoundedCornerShape(999.dp))
+                    .background(
+                        if (selected) MaterialTheme.colorScheme.primary
+                        else MaterialTheme.colorScheme.outline.copy(alpha = 0.45f)
+                    )
+            )
+            Spacer(modifier = Modifier.height(6.dp))
+            Text(
+                text = label,
+                style = MaterialTheme.typography.labelSmall,
+                fontWeight = if (selected) FontWeight.Bold else FontWeight.Medium,
+                color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.72f)
+            )
         }
     }
 }
@@ -127,7 +148,7 @@ private fun AuthScreen(
         Card(
             colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
             shape = RoundedCornerShape(28.dp),
-            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
             modifier = Modifier.fillMaxWidth()
         ) {
             Column(
@@ -136,15 +157,21 @@ private fun AuthScreen(
                     .padding(22.dp),
                 verticalArrangement = Arrangement.spacedBy(12.dp)
             ) {
-                Text("StoryForge AI", style = MaterialTheme.typography.headlineSmall)
+                Text("StoryForge", style = MaterialTheme.typography.headlineMedium)
                 Text(
-                    if (state.authMode == StoryForgeAuthMode.Login) "登录账号" else "注册新账号，提交后等待主管理员审批",
+                    if (state.authMode == StoryForgeAuthMode.Login) "登录工作区，继续对标、Agent 和生产流程。"
+                    else "先创建账号，审批通过后就能开始搭项目和 Agent。",
                     style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.72f)
                 )
                 ChoiceRow(
-                    options = listOf("登录" to (state.authMode == StoryForgeAuthMode.Login), "注册" to (state.authMode == StoryForgeAuthMode.Register)),
-                    onSelect = { label -> vm.setAuthMode(if (label == "登录") StoryForgeAuthMode.Login else StoryForgeAuthMode.Register) }
+                    options = listOf(
+                        "登录" to (state.authMode == StoryForgeAuthMode.Login),
+                        "注册" to (state.authMode == StoryForgeAuthMode.Register)
+                    ),
+                    onSelect = { label ->
+                        vm.setAuthMode(if (label == "登录") StoryForgeAuthMode.Login else StoryForgeAuthMode.Register)
+                    }
                 )
                 OutlinedTextField(
                     value = state.username,
@@ -168,7 +195,7 @@ private fun AuthScreen(
                     if (state.busy) {
                         CircularProgressIndicator(modifier = Modifier.size(18.dp), strokeWidth = 2.dp)
                     } else {
-                        Text(if (state.authMode == StoryForgeAuthMode.Login) "登录" else "注册")
+                        Text(if (state.authMode == StoryForgeAuthMode.Login) "进入工作区" else "提交注册")
                     }
                 }
                 if (state.statusMessage.isNotBlank()) {
@@ -197,22 +224,22 @@ private fun PendingApprovalScreen(
     ) {
         HeroCard(
             title = "等待审批",
-            subtitle = "${account?.display_name ?: account?.username ?: "当前账号"} 已登录，但尚未通过主管理员审批。",
+            subtitle = "${account?.display_name ?: account?.username ?: "当前账号"} 已登录，待主管理员通过后继续使用。",
             heroBrush = heroBrush,
             badges = listOf(
-                "审批状态：${account?.approval_status ?: "pending"}",
-                if (state.resolvedIp.isNotBlank()) "已解析到 ${state.resolvedIp}" else ""
+                "状态 ${account?.approval_status ?: "pending"}",
+                if (state.resolvedIp.isNotBlank()) "已解析 ${state.resolvedIp}" else ""
             ).filter { it.isNotBlank() }
         )
         SectionCard(title = "当前说明", subtitle = state.statusMessage) {
-            Text("新注册账号在主管理员通过前，无法访问探索、生产和知识库功能。")
+            Text("审批通过前，项目、对标、Agent 和生产入口都会先锁定。")
             Spacer(modifier = Modifier.height(12.dp))
             Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
                 Button(onClick = vm::refreshApprovalStatus, enabled = !state.busy) {
-                    Text("刷新审批状态")
+                    Text("刷新状态")
                 }
                 OutlinedButton(onClick = vm::logout) {
-                    Text("退出登录")
+                    Text("退出")
                 }
             }
             if (state.errorMessage.isNotBlank()) {
@@ -241,11 +268,19 @@ private fun AppShell(
     ) {
         HeroCard(
             title = when (state.currentTab) {
-                StoryForgeTab.Explore -> "探索素材"
-                StoryForgeTab.Production -> "生产文案"
-                StoryForgeTab.Mine -> "我的工作台"
+                StoryForgeTab.Overview -> "项目总览"
+                StoryForgeTab.Benchmark -> "找对标"
+                StoryForgeTab.Agent -> "Agent"
+                StoryForgeTab.Production -> "生产中心"
+                StoryForgeTab.Mine -> "我的"
+            },
+            subtitle = when (state.currentTab) {
+                StoryForgeTab.Overview -> "今天先看项目状态、跟踪日报和高价值动作。"
+                StoryForgeTab.Benchmark -> "导入主页、作品或本地视频，让 Agent 识别并归类学习。"
+                StoryForgeTab.Agent -> "定义账号方向、主模型和调研目标，再生成内容。"
+                StoryForgeTab.Production -> "把文案、封面、实拍剪辑和 AI 视频放进同一条生产泳道。"
+                StoryForgeTab.Mine -> "管理账号、模型、审批、OTA 和系统状态。"
             },
-            subtitle = state.statusMessage,
             heroBrush = heroBrush,
             badges = listOf(
                 state.account?.display_name ?: state.account?.username.orEmpty(),
@@ -255,7 +290,9 @@ private fun AppShell(
         )
         StatusStrip(state = state, onRefresh = vm::refreshWorkspace)
         when (state.currentTab) {
-            StoryForgeTab.Explore -> ExploreTab(state = state, vm = vm, onPickVideo = onPickVideo)
+            StoryForgeTab.Overview -> OverviewTab(state = state, vm = vm)
+            StoryForgeTab.Benchmark -> BenchmarkTab(state = state, vm = vm, onPickVideo = onPickVideo)
+            StoryForgeTab.Agent -> AgentTab(state = state, vm = vm)
             StoryForgeTab.Production -> ProductionTab(state = state, vm = vm)
             StoryForgeTab.Mine -> MineTab(state = state, vm = vm, onInstallLatestUpdate = onInstallLatestUpdate)
         }
@@ -267,9 +304,9 @@ private fun StatusStrip(state: StoryForgeUiState, onRefresh: () -> Unit) {
     SectionCard(title = "连接状态", subtitle = if (state.busy) "正在同步" else "已连接") {
         Text(
             text = if (state.originalHost.isNotBlank()) {
-                "外网域名已解析为 ${state.resolvedIp}，请求会携带 Host=${state.originalHost}"
+                "当前请求会保留 Host=${state.originalHost}，解析 IP=${state.resolvedIp.ifBlank { "未解析" }}"
             } else {
-                "当前使用地址：${state.baseUrl}"
+                "当前地址：${state.baseUrl}"
             },
             style = MaterialTheme.typography.bodySmall
         )
@@ -289,224 +326,292 @@ private fun StatusStrip(state: StoryForgeUiState, onRefresh: () -> Unit) {
 }
 
 @Composable
-private fun ExploreTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onPickVideo: () -> Unit) {
-    SectionCard(title = "素材入口", subtitle = "视频链接、上传视频、输入文字都会转成文本并做风格分析") {
+private fun OverviewTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
+    SectionCard(title = "今日概览", subtitle = "先看库存、活跃 Agent 和待处理任务。") {
+        StatsRow(
+            metrics = listOf(
+                "知识库" to state.knowledgeBases.size.toString(),
+                "Agent" to state.assistants.size.toString(),
+                "任务" to state.jobs.size.toString(),
+                "素材" to state.documents.size.toString()
+            )
+        )
+    }
+
+    SectionCard(title = "跟踪日报", subtitle = "这里先用最近任务和时间线模拟移动端日报摘要。") {
+        val latest = state.jobs.take(3)
+        if (latest.isEmpty()) {
+            Text("今天还没有新的更新，先去找对标导入一个账号或作品。")
+        } else {
+            latest.forEach { job ->
+                MiniCard(
+                    title = job.title,
+                    subtitle = buildString {
+                        append("状态 ${job.status}")
+                        if (job.workflow_key.isNotBlank()) append(" · ${job.workflow_key}")
+                        if (job.style_summary.isNotBlank()) append(" · ${job.style_summary.take(42)}")
+                    }
+                )
+                Spacer(modifier = Modifier.height(10.dp))
+            }
+        }
+    }
+
+    SectionCard(title = "今天先做什么", subtitle = "把最高频动作放到首屏。") {
+        ActionRow(
+            actions = listOf(
+                "找对标" to { vm.selectTab(StoryForgeTab.Benchmark) },
+                "配 Agent" to { vm.selectTab(StoryForgeTab.Agent) },
+                "去生产" to { vm.selectTab(StoryForgeTab.Production) },
+                "看我的" to { vm.selectTab(StoryForgeTab.Mine) }
+            )
+        )
+    }
+
+    SectionCard(title = "最近动态", subtitle = "确认最近一次导入、审批和生成结果。") {
+        state.timeline.take(6).forEach { item ->
+            Text(item, style = MaterialTheme.typography.bodySmall)
+            Spacer(modifier = Modifier.height(6.dp))
+        }
+    }
+}
+
+@Composable
+private fun BenchmarkTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onPickVideo: () -> Unit) {
+    SectionCard(title = "导入对标", subtitle = "导入主页、视频或本地素材，再决定手动绑定还是交给 Agent 自动归类。") {
         ChoiceRow(
             options = listOf(
-                "账号同步" to (state.exploreInputMode == ExploreInputMode.ContentSource),
-                "视频链接" to (state.exploreInputMode == ExploreInputMode.VideoLink),
-                "上传视频" to (state.exploreInputMode == ExploreInputMode.UploadVideo),
-                "输入文字" to (state.exploreInputMode == ExploreInputMode.Text)
+                "主页" to (state.exploreInputMode == ExploreInputMode.ContentSource),
+                "视频" to (state.exploreInputMode == ExploreInputMode.VideoLink),
+                "上传" to (state.exploreInputMode == ExploreInputMode.UploadVideo),
+                "文本" to (state.exploreInputMode == ExploreInputMode.Text)
             ),
             onSelect = { label ->
                 vm.setExploreInputMode(
                     when (label) {
-                        "账号同步" -> ExploreInputMode.ContentSource
-                        "视频链接" -> ExploreInputMode.VideoLink
-                        "上传视频" -> ExploreInputMode.UploadVideo
+                        "主页" -> ExploreInputMode.ContentSource
+                        "视频" -> ExploreInputMode.VideoLink
+                        "上传" -> ExploreInputMode.UploadVideo
                         else -> ExploreInputMode.Text
                     }
                 )
             }
         )
         Spacer(modifier = Modifier.height(12.dp))
-        KnowledgeBaseSelector(state = state, onSelect = vm::selectKnowledgeBase)
-        Spacer(modifier = Modifier.height(12.dp))
         AssistantSelector(state = state, onSelect = vm::selectAssistant)
         Spacer(modifier = Modifier.height(12.dp))
-        Text(
-            text = "当前分析模型：${state.modelProfiles.firstOrNull { it.id == state.account?.preferred_analysis_model_id }?.name ?: "本机默认模型"}",
-            style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
-        )
+        KnowledgeBaseSelector(state = state, onSelect = vm::selectKnowledgeBase)
         Spacer(modifier = Modifier.height(12.dp))
-        when (state.exploreInputMode) {
-            ExploreInputMode.ContentSource -> {
-                Text(
-                    text = "适合导入抖音、B 站、小红书创作者账号主页。抖音 public 页面抓不到时，也可以把分享页链接和账号标识手工填进来。",
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
+        BenchmarkInputPanel(state = state, vm = vm, onPickVideo = onPickVideo)
+    }
+
+    SectionCard(title = "对标池", subtitle = "已经导入的任务和沉淀素材会先堆在这里。") {
+        if (state.jobs.isEmpty() && state.documents.isEmpty()) {
+            Text("先导入一个主页或作品，这里会开始形成你的学习池。")
+        } else {
+            state.jobs.take(3).forEach { job ->
+                MiniCard(
+                    title = job.title,
+                    subtitle = "${job.source_type} · ${job.status} · ${job.line_type.ifBlank { "analysis" }}"
                 )
                 Spacer(modifier = Modifier.height(10.dp))
-                ChoiceRow(
-                    options = listOf(
-                        "抖音" to (state.accountSyncPlatform == "抖音"),
-                        "B站" to (state.accountSyncPlatform == "bilibili"),
-                        "小红书" to (state.accountSyncPlatform == "小红书")
-                    ),
-                    onSelect = { label ->
-                        vm.updateAccountSyncPlatform(
-                            when (label) {
-                                "B站" -> "bilibili"
-                                else -> label
-                            }
-                        )
-                    }
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.accountSyncUrl,
-                    onValueChange = vm::updateAccountSyncUrl,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("账号主页或分享页链接") },
-                    minLines = 2
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.accountSyncHandle,
-                    onValueChange = vm::updateAccountSyncHandle,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("账号标识（可选）") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.accountSyncTitle,
-                    onValueChange = vm::updateAccountSyncTitle,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("任务标题（可选）") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.accountSyncMaxItems,
-                    onValueChange = vm::updateAccountSyncMaxItems,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("最多拉取视频数（1-20）") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.spacedBy(12.dp)
-                ) {
-                    Row(
-                        modifier = Modifier.weight(1f),
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.SpaceBetween
-                    ) {
-                        Text("跳过已存在视频", style = MaterialTheme.typography.bodySmall)
-                        Switch(
-                            checked = state.accountSyncSkipExisting,
-                            onCheckedChange = vm::setAccountSyncSkipExisting
-                        )
-                    }
-                    Row(
-                        modifier = Modifier.weight(1f),
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.SpaceBetween
-                    ) {
-                        Text("自动触发分析", style = MaterialTheme.typography.bodySmall)
-                        Switch(
-                            checked = state.accountSyncAutoTriggerAnalysis,
-                            onCheckedChange = vm::setAccountSyncAutoTriggerAnalysis
-                        )
-                    }
-                }
-                Spacer(modifier = Modifier.height(12.dp))
-                Button(onClick = vm::submitContentSourceSync, enabled = !state.busy) {
-                    Text("同步账号内容")
-                }
             }
-            ExploreInputMode.VideoLink -> {
-                OutlinedTextField(
-                    value = state.videoUrl,
-                    onValueChange = vm::updateVideoUrl,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("短视频链接") },
-                    minLines = 2
+            state.documents.take(2).forEach { document ->
+                MiniCard(
+                    title = document.title,
+                    subtitle = document.style_summary.ifBlank { document.transcript_text.take(48) }
                 )
                 Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.videoTitle,
-                    onValueChange = vm::updateVideoTitle,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("素材标题（可选）") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-                Button(onClick = vm::submitVideoLink, enabled = !state.busy) {
-                    Text("提交视频链接")
-                }
-            }
-            ExploreInputMode.UploadVideo -> {
-                OutlinedTextField(
-                    value = state.videoTitle,
-                    onValueChange = vm::updateVideoTitle,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("素材标题（可选）") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
-                    OutlinedButton(onClick = onPickVideo) {
-                        Text(if (state.pickedVideoName.isBlank()) "选择视频文件" else "重新选择")
-                    }
-                    Text(
-                        text = if (state.pickedVideoName.isBlank()) "未选择文件" else state.pickedVideoName,
-                        modifier = Modifier.weight(1f),
-                        maxLines = 2,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                }
-                Spacer(modifier = Modifier.height(12.dp))
-                Button(onClick = vm::submitUploadVideo, enabled = !state.busy && state.pickedVideoName.isNotBlank()) {
-                    Text("上传并开始学习")
-                }
-            }
-            ExploreInputMode.Text -> {
-                OutlinedTextField(
-                    value = state.textTitle,
-                    onValueChange = vm::updateTextTitle,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("素材标题") },
-                    singleLine = true
-                )
-                Spacer(modifier = Modifier.height(10.dp))
-                OutlinedTextField(
-                    value = state.textContent,
-                    onValueChange = vm::updateTextContent,
-                    modifier = Modifier.fillMaxWidth(),
-                    label = { Text("素材文字") },
-                    minLines = 5
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-                Button(onClick = vm::submitText, enabled = !state.busy) {
-                    Text("分析并沉淀到知识库")
-                }
             }
         }
     }
 
-    state.latestJob?.let { latestJob ->
-        SectionCard(title = "最新任务", subtitle = latestJob.title) {
-            KeyValueRow(label = "状态", value = latestJob.status)
-            KeyValueRow(label = "上传状态", value = latestJob.upload_status)
-            if (latestJob.transcript_text.isNotBlank()) {
-                KeyValueBlock(label = "文本转写", value = latestJob.transcript_text)
+    state.latestJob?.let { latest ->
+        SectionCard(title = "参考详情", subtitle = latest.title) {
+            KeyValueRow(label = "状态", value = latest.status)
+            KeyValueRow(label = "工作流", value = latest.workflow_key.ifBlank { latest.line_type.ifBlank { "-" } })
+            if (latest.transcript_text.isNotBlank()) {
+                KeyValueBlock(label = "文本转写", value = latest.transcript_text)
             }
-            if (latestJob.style_summary.isNotBlank()) {
-                KeyValueBlock(label = "风格提炼", value = latestJob.style_summary)
-            }
-            if (latestJob.error.isNotBlank()) {
-                Text(latestJob.error, color = MaterialTheme.colorScheme.error)
-            }
-        }
-    }
-
-    if (state.documents.isNotEmpty()) {
-        SectionCard(title = "当前知识库素材", subtitle = "已经沉淀到所选知识库的文本样本") {
-            state.documents.forEach { document ->
-                MiniCard(title = document.title, subtitle = document.style_summary.ifBlank { document.transcript_text.take(100) })
-                Spacer(modifier = Modifier.height(10.dp))
+            if (latest.style_summary.isNotBlank()) {
+                KeyValueBlock(label = "学习摘要", value = latest.style_summary)
             }
         }
     }
 }
 
 @Composable
-private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
-    SectionCard(title = "智能体列表", subtitle = "一个智能体默认关联一个知识库，也可以关联多个知识库") {
+private fun BenchmarkInputPanel(
+    state: StoryForgeUiState,
+    vm: StoryForgeViewModel,
+    onPickVideo: () -> Unit
+) {
+    when (state.exploreInputMode) {
+        ExploreInputMode.ContentSource -> {
+            ChoiceRow(
+                options = listOf(
+                    "抖音" to (state.accountSyncPlatform == "抖音"),
+                    "B站" to (state.accountSyncPlatform == "bilibili"),
+                    "小红书" to (state.accountSyncPlatform == "小红书")
+                ),
+                onSelect = { label ->
+                    vm.updateAccountSyncPlatform(if (label == "B站") "bilibili" else label)
+                }
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.accountSyncUrl,
+                onValueChange = vm::updateAccountSyncUrl,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("主页链接或分享页") },
+                minLines = 2
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.accountSyncHandle,
+                onValueChange = vm::updateAccountSyncHandle,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("账号标识，可选") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.accountSyncTitle,
+                onValueChange = vm::updateAccountSyncTitle,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("导入标题，可选") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.accountSyncMaxItems,
+                onValueChange = vm::updateAccountSyncMaxItems,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("最近拉取数量") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                Row(
+                    modifier = Modifier.weight(1f),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Text("跳过旧内容", style = MaterialTheme.typography.bodySmall)
+                    Switch(
+                        checked = state.accountSyncSkipExisting,
+                        onCheckedChange = vm::setAccountSyncSkipExisting
+                    )
+                }
+                Row(
+                    modifier = Modifier.weight(1f),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Text("自动分析", style = MaterialTheme.typography.bodySmall)
+                    Switch(
+                        checked = state.accountSyncAutoTriggerAnalysis,
+                        onCheckedChange = vm::setAccountSyncAutoTriggerAnalysis
+                    )
+                }
+            }
+            Spacer(modifier = Modifier.height(12.dp))
+            ActionRow(
+                actions = listOf(
+                    "手动绑定" to vm::submitContentSourceSync,
+                    "交给 Agent" to vm::submitContentSourceSync
+                )
+            )
+        }
+
+        ExploreInputMode.VideoLink -> {
+            OutlinedTextField(
+                value = state.videoUrl,
+                onValueChange = vm::updateVideoUrl,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("作品链接") },
+                minLines = 2
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.videoTitle,
+                onValueChange = vm::updateVideoTitle,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("作品标题，可选") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            ActionRow(
+                actions = listOf(
+                    "手动导入" to vm::submitVideoLink,
+                    "交给 Agent" to vm::submitVideoLink
+                )
+            )
+        }
+
+        ExploreInputMode.UploadVideo -> {
+            OutlinedTextField(
+                value = state.videoTitle,
+                onValueChange = vm::updateVideoTitle,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("素材标题，可选") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
+                OutlinedButton(onClick = onPickVideo) {
+                    Text(if (state.pickedVideoName.isBlank()) "选择视频" else "重新选择")
+                }
+                Text(
+                    text = if (state.pickedVideoName.isBlank()) "未选择文件" else state.pickedVideoName,
+                    modifier = Modifier.weight(1f),
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
+            Spacer(modifier = Modifier.height(12.dp))
+            ActionRow(
+                actions = listOf(
+                    "手动导入" to vm::submitUploadVideo,
+                    "交给 Agent" to vm::submitUploadVideo
+                ),
+                enabled = !state.busy && state.pickedVideoName.isNotBlank()
+            )
+        }
+
+        ExploreInputMode.Text -> {
+            OutlinedTextField(
+                value = state.textTitle,
+                onValueChange = vm::updateTextTitle,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("标题") },
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            OutlinedTextField(
+                value = state.textContent,
+                onValueChange = vm::updateTextContent,
+                modifier = Modifier.fillMaxWidth(),
+                label = { Text("正文") },
+                minLines = 5
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            ActionRow(
+                actions = listOf(
+                    "手动导入" to vm::submitText,
+                    "交给 Agent" to vm::submitText
+                )
+            )
+        }
+    }
+}
+
+@Composable
+private fun AgentTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
+    SectionCard(title = "Agent 列表", subtitle = "一个 Agent 可以学习多个知识库，并服务多个平台。") {
         ChoiceRow(
             options = state.assistants.map { it.name to (state.selectedAssistantId == it.id) },
             onSelect = { label ->
@@ -515,16 +620,16 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
         )
         Spacer(modifier = Modifier.height(12.dp))
         OutlinedButton(onClick = vm::startNewAssistant) {
-            Text("新建智能体")
+            Text("新建 Agent")
         }
     }
 
-    SectionCard(title = "编辑智能体", subtitle = "提示词由用户提供，可随时调整模型和知识库绑定") {
+    SectionCard(title = "Agent 定义", subtitle = "先定义账号方向、变现方式和主模型，再决定学习哪些知识库。") {
         OutlinedTextField(
             value = state.assistantName,
             onValueChange = vm::updateAssistantName,
             modifier = Modifier.fillMaxWidth(),
-            label = { Text("智能体名称") },
+            label = { Text("Agent 名称") },
             singleLine = true
         )
         Spacer(modifier = Modifier.height(10.dp))
@@ -532,7 +637,7 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
             value = state.assistantDescription,
             onValueChange = vm::updateAssistantDescription,
             modifier = Modifier.fillMaxWidth(),
-            label = { Text("智能体说明") },
+            label = { Text("账号方向 / 变现方式") },
             minLines = 2
         )
         Spacer(modifier = Modifier.height(10.dp))
@@ -548,11 +653,25 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
             value = state.assistantGenerationGoal,
             onValueChange = vm::updateAssistantGenerationGoal,
             modifier = Modifier.fillMaxWidth(),
-            label = { Text("生成目标") },
+            label = { Text("Agent 目标") },
             minLines = 3
         )
         Spacer(modifier = Modifier.height(12.dp))
-        Text("选择生成模型", style = MaterialTheme.typography.titleSmall)
+        Text("目标平台", style = MaterialTheme.typography.titleSmall)
+        Spacer(modifier = Modifier.height(8.dp))
+        ChoiceRow(
+            options = listOf(
+                "抖音" to state.generationPlatform.contains("抖音"),
+                "小红书" to state.generationPlatform.contains("小红书"),
+                "快手" to state.generationPlatform.contains("快手"),
+                "视频号" to state.generationPlatform.contains("视频号"),
+                "YouTube" to state.generationPlatform.contains("YouTube"),
+                "B站" to state.generationPlatform.contains("B站")
+            ),
+            onSelect = {}
+        )
+        Spacer(modifier = Modifier.height(12.dp))
+        Text("主模型", style = MaterialTheme.typography.titleSmall)
         Spacer(modifier = Modifier.height(8.dp))
         ChoiceRow(
             options = state.modelProfiles.map { it.name to (state.assistantModelProfileId == it.id) },
@@ -561,7 +680,7 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
             }
         )
         Spacer(modifier = Modifier.height(12.dp))
-        Text("选择要关联的知识库", style = MaterialTheme.typography.titleSmall)
+        Text("学习知识库", style = MaterialTheme.typography.titleSmall)
         Spacer(modifier = Modifier.height(8.dp))
         ChoiceRow(
             options = state.knowledgeBases.map { it.name to state.selectedAssistantKnowledgeBaseIds.contains(it.id) },
@@ -571,16 +690,16 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
         )
         Spacer(modifier = Modifier.height(14.dp))
         Button(onClick = vm::saveAssistant, enabled = !state.busy) {
-            Text(if (state.assistantEditorId.isNullOrBlank()) "创建智能体" else "保存智能体配置")
+            Text(if (state.assistantEditorId.isNullOrBlank()) "创建 Agent" else "保存 Agent")
         }
     }
 
-    SectionCard(title = "生成文案", subtitle = "选择智能体后，直接基于关联知识库输出文案") {
+    SectionCard(title = "调研与试跑", subtitle = "创建完 Agent 后，先跑一轮调研，再试一次文案输出。") {
         OutlinedTextField(
             value = state.generationBrief,
             onValueChange = vm::updateGenerationBrief,
             modifier = Modifier.fillMaxWidth(),
-            label = { Text("文案需求") },
+            label = { Text("本轮调研或文案需求") },
             minLines = 4
         )
         Spacer(modifier = Modifier.height(10.dp))
@@ -589,14 +708,14 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
                 value = state.generationPlatform,
                 onValueChange = vm::updateGenerationPlatform,
                 modifier = Modifier.weight(1f),
-                label = { Text("平台") },
+                label = { Text("主平台") },
                 singleLine = true
             )
             OutlinedTextField(
                 value = state.generationAudience,
                 onValueChange = vm::updateGenerationAudience,
                 modifier = Modifier.weight(1f),
-                label = { Text("目标受众") },
+                label = { Text("人群") },
                 singleLine = true
             )
         }
@@ -613,12 +732,72 @@ private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
             if (state.generateBusy) {
                 CircularProgressIndicator(modifier = Modifier.size(18.dp), strokeWidth = 2.dp)
             } else {
-                Text("开始生成")
+                Text("开始试跑")
             }
         }
         if (state.generationOutput.isNotBlank()) {
             Spacer(modifier = Modifier.height(16.dp))
-            KeyValueBlock(label = "生成结果", value = state.generationOutput)
+            KeyValueBlock(label = "最近输出", value = state.generationOutput)
+        }
+    }
+}
+
+@Composable
+private fun ProductionTab(state: StoryForgeUiState, vm: StoryForgeViewModel) {
+    SectionCard(title = "生产泳道", subtitle = "同一页管理文案、封面、实拍剪辑和 AI 视频。") {
+        StatsRow(
+            metrics = listOf(
+                "文案" to if (state.generationOutput.isNotBlank()) "就绪" else "待生成",
+                "封面" to "待接入",
+                "实拍剪辑" to state.jobs.count { it.line_type == "real_cut" }.toString(),
+                "AI 视频" to state.jobs.count { it.line_type == "ai_video" }.toString()
+            )
+        )
+        Spacer(modifier = Modifier.height(12.dp))
+        ActionRow(
+            actions = listOf(
+                "写文案" to vm::generateCopy,
+                "补封面" to {},
+                "实拍剪辑" to {},
+                "AI 视频" to {}
+            ),
+            enabled = !state.generateBusy
+        )
+    }
+
+    SectionCard(title = "作品与成片", subtitle = "这里承接生产完成后的作品库和当前任务。") {
+        state.latestJob?.let { latest ->
+            MiniCard(
+                title = latest.title,
+                subtitle = buildString {
+                    append("状态 ${latest.status}")
+                    if (latest.upload_status.isNotBlank()) append(" · 上传 ${latest.upload_status}")
+                    if (latest.style_summary.isNotBlank()) append(" · ${latest.style_summary.take(32)}")
+                }
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+        }
+        state.documents.take(3).forEach { document ->
+            MiniCard(
+                title = document.title,
+                subtitle = document.style_summary.ifBlank { document.transcript_text.take(54) }
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+        }
+        if (state.latestJob == null && state.documents.isEmpty()) {
+            Text("还没有可看的作品，先去找对标导入，或者先创建一个 Agent。")
+        }
+    }
+
+    SectionCard(title = "文案结果", subtitle = "先保留当前可用链路，后续把封面和视频能力一起接进来。") {
+        if (state.generationOutput.isBlank()) {
+            Text("还没有生成结果，先到 Agent 页完成一次试跑。")
+        } else {
+            KeyValueBlock(label = "文案", value = state.generationOutput)
+            if (state.generationPromptExcerpt.isNotBlank()) {
+                Spacer(modifier = Modifier.height(10.dp))
+                KeyValueBlock(label = "提示词摘要", value = state.generationPromptExcerpt)
+            }
         }
     }
 }
@@ -629,17 +808,17 @@ private fun MineTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onInstall
         KeyValueRow(label = "用户名", value = state.account?.username ?: "-")
         KeyValueRow(label = "角色", value = state.account?.role ?: "-")
         KeyValueRow(label = "审批", value = state.account?.approval_status ?: "-")
-        KeyValueRow(label = "Base URL", value = state.baseUrl)
+        KeyValueRow(label = "地址", value = state.baseUrl)
         if (state.resolvedIp.isNotBlank()) {
             KeyValueRow(label = "解析 IP", value = state.resolvedIp)
         }
         Spacer(modifier = Modifier.height(12.dp))
         OutlinedButton(onClick = vm::logout) {
-            Text("退出登录")
+            Text("退出")
         }
     }
 
-    SectionCard(title = "分析模型", subtitle = "探索页默认使用这里选中的模型") {
+    SectionCard(title = "分析模型", subtitle = "用户不管 Key，只切主模型和默认分析模型。") {
         ChoiceRow(
             options = state.modelProfiles.map { it.name to (state.account?.preferred_analysis_model_id == it.id) },
             onSelect = { label ->
@@ -682,22 +861,22 @@ private fun MineTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onInstall
         )
         Spacer(modifier = Modifier.height(12.dp))
         Button(onClick = vm::createModelProfile) {
-            Text("保存为默认分析模型")
+            Text("保存默认模型")
         }
     }
 
-    SectionCard(title = "OTA 更新", subtitle = state.otaStatus.ifBlank { "检查新版本并执行安装" }) {
+    SectionCard(title = "OTA 更新", subtitle = state.otaStatus.ifBlank { "检查并安装最新版本。" }) {
         Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
             Button(onClick = vm::checkForUpdates) {
-                Text("检查更新")
+                Text("检查")
             }
             OutlinedButton(onClick = onInstallLatestUpdate, enabled = state.otaInfo?.hasUpdate == true) {
-                Text("安装最新版本")
+                Text("安装")
             }
         }
         state.otaInfo?.let { ota ->
             Spacer(modifier = Modifier.height(12.dp))
-            KeyValueRow(label = "最新版本", value = "${ota.latestVersionName} (${ota.latestVersionCode})")
+            KeyValueRow(label = "版本", value = "${ota.latestVersionName} (${ota.latestVersionCode})")
             if (ota.releaseNotes.isNotBlank()) {
                 KeyValueBlock(label = "更新说明", value = ota.releaseNotes)
             }
@@ -705,13 +884,18 @@ private fun MineTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onInstall
     }
 
     if (state.account?.role == "super_admin") {
-        SectionCard(title = "主管理员审批", subtitle = "新注册账号需要你审批后才能正常使用全部功能") {
+        SectionCard(title = "审批", subtitle = "主管理员审批新用户。") {
             if (state.pendingAccounts.isEmpty()) {
-                Text("当前没有待审批账号")
+                Text("当前没有待审批账号。")
             } else {
                 state.pendingAccounts.forEach { account ->
                     Card(colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)) {
-                        Column(modifier = Modifier.fillMaxWidth().padding(14.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                        Column(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(14.dp),
+                            verticalArrangement = Arrangement.spacedBy(8.dp)
+                        ) {
                             Text(account.display_name, fontWeight = FontWeight.Bold)
                             Text(account.username, style = MaterialTheme.typography.bodySmall)
                             Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
@@ -728,62 +912,10 @@ private fun MineTab(state: StoryForgeUiState, vm: StoryForgeViewModel, onInstall
                 }
             }
         }
-
-        SectionCard(title = "发布 OTA", subtitle = "主管理员可直接更新在线版本号和下载地址") {
-            Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-                OutlinedTextField(
-                    value = state.publishVersionCode,
-                    onValueChange = vm::updatePublishVersionCode,
-                    modifier = Modifier.weight(1f),
-                    label = { Text("VersionCode") },
-                    singleLine = true
-                )
-                OutlinedTextField(
-                    value = state.publishMinSupportedCode,
-                    onValueChange = vm::updatePublishMinSupportedCode,
-                    modifier = Modifier.weight(1f),
-                    label = { Text("最低支持") },
-                    singleLine = true
-                )
-            }
-            Spacer(modifier = Modifier.height(10.dp))
-            OutlinedTextField(
-                value = state.publishVersionName,
-                onValueChange = vm::updatePublishVersionName,
-                modifier = Modifier.fillMaxWidth(),
-                label = { Text("VersionName") },
-                singleLine = true
-            )
-            Spacer(modifier = Modifier.height(10.dp))
-            OutlinedTextField(
-                value = state.publishApkUrl,
-                onValueChange = vm::updatePublishApkUrl,
-                modifier = Modifier.fillMaxWidth(),
-                label = { Text("APK 下载地址") },
-                minLines = 2
-            )
-            Spacer(modifier = Modifier.height(10.dp))
-            OutlinedTextField(
-                value = state.publishNotes,
-                onValueChange = vm::updatePublishNotes,
-                modifier = Modifier.fillMaxWidth(),
-                label = { Text("更新说明") },
-                minLines = 3
-            )
-            Spacer(modifier = Modifier.height(12.dp))
-            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-                Text("强制更新")
-                Switch(checked = state.publishForceUpdate, onCheckedChange = vm::setPublishForceUpdate)
-            }
-            Spacer(modifier = Modifier.height(12.dp))
-            Button(onClick = vm::publishUpdate) {
-                Text("发布 OTA")
-            }
-        }
     }
 
-    SectionCard(title = "最近日志", subtitle = "用于确认审批、解析、任务和 OTA 状态") {
-        state.timeline.forEach { item ->
+    SectionCard(title = "最近日志", subtitle = "用来确认审批、解析、任务和 OTA 状态。") {
+        state.timeline.take(8).forEach { item ->
             Text(item, style = MaterialTheme.typography.bodySmall)
             Spacer(modifier = Modifier.height(6.dp))
         }
@@ -796,7 +928,10 @@ private fun ChoiceRow(
     options: List<Pair<String, Boolean>>,
     onSelect: (String) -> Unit
 ) {
-    FlowRow(horizontalArrangement = Arrangement.spacedBy(10.dp), verticalArrangement = Arrangement.spacedBy(10.dp)) {
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp)
+    ) {
         options.forEach { (label, selected) ->
             FilterChip(
                 selected = selected,
@@ -807,6 +942,54 @@ private fun ChoiceRow(
     }
 }
 
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun ActionRow(
+    actions: List<Pair<String, () -> Unit>>,
+    enabled: Boolean = true
+) {
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp)
+    ) {
+        actions.forEachIndexed { index, (label, action) ->
+            if (index == 0) {
+                Button(onClick = action, enabled = enabled) {
+                    Text(label)
+                }
+            } else {
+                OutlinedButton(onClick = action, enabled = enabled) {
+                    Text(label)
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun StatsRow(metrics: List<Pair<String, String>>) {
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp)
+    ) {
+        metrics.forEach { (label, value) ->
+            Box(
+                modifier = Modifier
+                    .width(140.dp)
+                    .clip(RoundedCornerShape(18.dp))
+                    .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.55f))
+                    .padding(14.dp)
+            ) {
+                Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(label, style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.68f))
+                    Text(value, style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold)
+                }
+            }
+        }
+    }
+}
+
 @Composable
 private fun KnowledgeBaseSelector(state: StoryForgeUiState, onSelect: (String) -> Unit) {
     Text("选择知识库", style = MaterialTheme.typography.titleSmall)
@@ -821,7 +1004,7 @@ private fun KnowledgeBaseSelector(state: StoryForgeUiState, onSelect: (String) -
 
 @Composable
 private fun AssistantSelector(state: StoryForgeUiState, onSelect: (String) -> Unit) {
-    Text("选择关联智能体", style = MaterialTheme.typography.titleSmall)
+    Text("绑定 Agent", style = MaterialTheme.typography.titleSmall)
     Spacer(modifier = Modifier.height(8.dp))
     ChoiceRow(
         options = state.assistants.map { it.name to (state.selectedAssistantId == it.id) },
@@ -838,11 +1021,16 @@ private fun HeroCard(title: String, subtitle: String, heroBrush: Brush, badges:
             .fillMaxWidth()
             .clip(RoundedCornerShape(28.dp))
             .background(heroBrush)
+            .border(
+                width = 1.dp,
+                color = MaterialTheme.colorScheme.outline.copy(alpha = 0.12f),
+                shape = RoundedCornerShape(28.dp)
+            )
             .padding(20.dp)
     ) {
         Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
-            Text(title, style = MaterialTheme.typography.headlineLarge, color = Color.White)
-            Text(subtitle, style = MaterialTheme.typography.bodyLarge, color = Color(0xFFF8F5EF))
+            Text(title, style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onSurface)
+            Text(subtitle, style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.74f))
             if (badges.isNotEmpty()) {
                 ChoiceRow(options = badges.map { it to true }, onSelect = {})
             }
@@ -868,7 +1056,7 @@ private fun SectionCard(title: String, subtitle: String, content: @Composable ()
                 Text(
                     subtitle,
                     style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.72f)
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.68f)
                 )
             }
             Spacer(modifier = Modifier.height(6.dp))
@@ -898,7 +1086,11 @@ private fun KeyValueBlock(label: String, value: String) {
         modifier = Modifier
             .fillMaxWidth()
             .clip(RoundedCornerShape(16.dp))
-            .border(1.dp, MaterialTheme.colorScheme.outline.copy(alpha = 0.2f), RoundedCornerShape(16.dp))
+            .border(
+                1.dp,
+                MaterialTheme.colorScheme.outline.copy(alpha = 0.2f),
+                RoundedCornerShape(16.dp)
+            )
             .padding(14.dp)
     ) {
         Text(value)
@@ -907,10 +1099,20 @@ private fun KeyValueBlock(label: String, value: String) {
 
 @Composable
 private fun MiniCard(title: String, subtitle: String) {
-    Card(colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)) {
-        Column(modifier = Modifier.fillMaxWidth().padding(14.dp), verticalArrangement = Arrangement.spacedBy(6.dp)) {
+    Card(colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.58f))) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(14.dp),
+            verticalArrangement = Arrangement.spacedBy(6.dp)
+        ) {
             Text(title, fontWeight = FontWeight.Bold)
-            Text(subtitle, maxLines = 4, overflow = TextOverflow.Ellipsis, style = MaterialTheme.typography.bodySmall)
+            Text(
+                subtitle,
+                maxLines = 4,
+                overflow = TextOverflow.Ellipsis,
+                style = MaterialTheme.typography.bodySmall
+            )
         }
     }
 }
diff --git a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt
index ce60245..b2267bb 100644
--- a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt
@@ -15,7 +15,9 @@ import kotlinx.coroutines.launch
 import retrofit2.HttpException
 
 enum class StoryForgeTab {
-    Explore,
+    Overview,
+    Benchmark,
+    Agent,
     Production,
     Mine
 }
@@ -53,7 +55,7 @@ data class StoryForgeUiState(
     val originalHost: String = "",
     val isAuthenticated: Boolean = false,
     val isApproved: Boolean = false,
-    val currentTab: StoryForgeTab = StoryForgeTab.Explore,
+    val currentTab: StoryForgeTab = StoryForgeTab.Overview,
     val busy: Boolean = false,
     val generateBusy: Boolean = false,
     val statusMessage: String = "准备连接 StoryForge",
@@ -847,7 +849,7 @@ class StoryForgeViewModel(application: Application) : AndroidViewModel(applicati
         _state.value = state.value.copy(
             latestJob = job,
             latestJobId = job.id,
-            currentTab = StoryForgeTab.Explore
+            currentTab = StoryForgeTab.Benchmark
         )
         refreshWorkspace()
         startJobPolling(job.id)
diff --git a/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt b/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt
index 47e1d8c..ec1302b 100644
--- a/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt
@@ -13,51 +13,82 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 
 private val LightColors = lightColorScheme(
-    primary = Color(0xFF0E4B43),
-    secondary = Color(0xFF9C6427),
-    tertiary = Color(0xFF2A5B8A),
-    background = Color(0xFFF7F3EC),
-    surface = Color(0xFFFFFCF8),
+    primary = Color(0xFF4E89F5),
+    secondary = Color(0xFF87AEEB),
+    tertiary = Color(0xFF17283A),
+    background = Color(0xFFF2F7FF),
+    surface = Color(0xFFFFFFFF),
+    surfaceVariant = Color(0xFFEAF2FF),
     onPrimary = Color.White,
     onSecondary = Color.White,
-    onBackground = Color(0xFF1A1713),
-    onSurface = Color(0xFF1A1713)
+    onBackground = Color(0xFF152332),
+    onSurface = Color(0xFF152332),
+    outline = Color(0xFFC9D8EA)
 )
 
 private val DarkColors = darkColorScheme(
-    primary = Color(0xFF7FD6C7),
-    secondary = Color(0xFFFFC27A),
-    tertiary = Color(0xFF98C7FF),
-    background = Color(0xFF101714),
-    surface = Color(0xFF18211D),
-    onPrimary = Color(0xFF062D29),
-    onSecondary = Color(0xFF4B2B00),
-    onBackground = Color(0xFFF0E8DB),
-    onSurface = Color(0xFFF0E8DB)
+    primary = Color(0xFF8CB7FF),
+    secondary = Color(0xFF7EA5DE),
+    tertiary = Color(0xFFE6EEF9),
+    background = Color(0xFF101823),
+    surface = Color(0xFF162131),
+    surfaceVariant = Color(0xFF1D2B3D),
+    onPrimary = Color(0xFF0C1B30),
+    onSecondary = Color(0xFF0C1B30),
+    onBackground = Color(0xFFEAF1FB),
+    onSurface = Color(0xFFEAF1FB),
+    outline = Color(0xFF35506F)
 )
 
 private val AppTypography = Typography(
     headlineLarge = TextStyle(
-        fontFamily = FontFamily.Serif,
+        fontFamily = FontFamily.SansSerif,
         fontWeight = FontWeight.Bold,
-        fontSize = 34.sp,
-        lineHeight = 40.sp
+        fontSize = 30.sp,
+        lineHeight = 36.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Bold,
+        fontSize = 26.sp,
+        lineHeight = 32.sp
     ),
     headlineSmall = TextStyle(
-        fontFamily = FontFamily.Serif,
+        fontFamily = FontFamily.SansSerif,
         fontWeight = FontWeight.SemiBold,
         fontSize = 22.sp,
         lineHeight = 28.sp
     ),
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Bold,
+        fontSize = 20.sp,
+        lineHeight = 26.sp
+    ),
     bodyLarge = TextStyle(
         fontFamily = FontFamily.SansSerif,
         fontSize = 16.sp,
         lineHeight = 24.sp
     ),
+    bodyMedium = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontSize = 14.sp,
+        lineHeight = 21.sp
+    ),
+    bodySmall = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontSize = 12.sp,
+        lineHeight = 18.sp
+    ),
     labelLarge = TextStyle(
         fontFamily = FontFamily.SansSerif,
         fontWeight = FontWeight.Medium,
         fontSize = 14.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp
     )
 )
 
diff --git a/web/storyforge-web-v4/README.md b/web/storyforge-web-v4/README.md
new file mode 100644
index 0000000..0faa8c7
--- /dev/null
+++ b/web/storyforge-web-v4/README.md
@@ -0,0 +1,30 @@
+# StoryForge Web V4
+
+这是 `StoryForge` 当前面向正式前端实现的 Web 承载目录。
+
+## 入口
+
+- 页面：`index.html`
+- 样式：`assets/styles.css`
+- 页面交互：`assets/app.js`
+
+## 当前定位
+
+- 这不是最终生产版，而是从 `Web V4` 高保真原型提升出来的真实前端骨架
+- 目录已经从 `output/ui/` 原型区独立出来，后续应直接在这里继续接真实接口
+- 当前保留的核心页面结构：
+  - 项目总台
+  - 我的项目
+  - 找对标
+  - 跟踪账号
+  - 自动流程
+  - Agent
+  - 生产中心
+  - 发布与复盘
+  - 额度
+
+## 后续建议
+
+- 先补前端服务层，再接业务接口
+- 不要把这套页面重新塞回 `scripts/douyin-browser-capture/control_panel.mjs`
+- 抖音采集控制台仍作为独立工具存在，这里才是正式业务应用壳
diff --git a/web/storyforge-web-v4/assets/app.js b/web/storyforge-web-v4/assets/app.js
new file mode 100644
index 0000000..c2fefee
--- /dev/null
+++ b/web/storyforge-web-v4/assets/app.js
@@ -0,0 +1,24 @@
+const navButtons = document.querySelectorAll("[data-screen-target]");
+const screens = document.querySelectorAll("[data-screen]");
+
+function activateScreen(id) {
+  navButtons.forEach((button) => {
+    const active = button.dataset.screenTarget === id;
+    button.classList.toggle("is-active", active);
+  });
+
+  screens.forEach((screen) => {
+    screen.classList.toggle("is-active", screen.dataset.screen === id);
+  });
+}
+
+navButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    const next = button.dataset.screenTarget;
+    activateScreen(next);
+    window.location.hash = next;
+  });
+});
+
+const initial = window.location.hash.replace("#", "") || "dashboard";
+activateScreen(initial);
diff --git a/web/storyforge-web-v4/assets/styles.css b/web/storyforge-web-v4/assets/styles.css
new file mode 100644
index 0000000..1ee93af
--- /dev/null
+++ b/web/storyforge-web-v4/assets/styles.css
@@ -0,0 +1,865 @@
+:root {
+  --bg: #f4f8fd;
+  --bg-soft: #eef4fb;
+  --panel: #ffffff;
+  --panel-soft: #f7fbff;
+  --line: #d9e5f2;
+  --line-strong: #c8d8ea;
+  --text: #182433;
+  --muted: #66788f;
+  --blue-50: #f3f8ff;
+  --blue-100: #e8f1ff;
+  --blue-200: #d9e8ff;
+  --blue-300: #c4ddff;
+  --blue-500: #6aa4ff;
+  --blue-600: #4f8fee;
+  --blue-700: #3977d8;
+  --green: #2db584;
+  --orange: #f29a38;
+  --red: #e46767;
+  --shadow: 0 18px 40px rgba(67, 93, 125, 0.12);
+  --shadow-soft: 0 10px 24px rgba(67, 93, 125, 0.08);
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 14px;
+  --radius-sm: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(129, 180, 255, 0.18), transparent 28%),
+    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
+  color: var(--text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 272px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  background: rgba(255, 255, 255, 0.82);
+  border-right: 1px solid rgba(201, 220, 239, 0.75);
+  backdrop-filter: blur(14px);
+  padding: 22px 18px 18px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px 20px;
+}
+
+.brand-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #b9d7ff 0%, #6ea8ff 100%);
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.brand p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.nav-group {
+  margin-top: 14px;
+}
+
+.nav-title {
+  padding: 0 10px 8px;
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  border-radius: 14px;
+  padding: 11px 12px;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+  transition: 0.18s ease;
+}
+
+.nav-item:hover {
+  background: rgba(106, 164, 255, 0.08);
+}
+
+.nav-item.is-active {
+  background: linear-gradient(180deg, #edf5ff 0%, #e6f0ff 100%);
+  box-shadow: inset 0 0 0 1px rgba(106, 164, 255, 0.22);
+  color: var(--blue-700);
+}
+
+.nav-item .icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  background: var(--blue-50);
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+}
+
+.sidebar-foot {
+  margin-top: 22px;
+  padding: 14px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
+  border: 1px solid var(--line);
+}
+
+.sidebar-foot h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+
+.sidebar-foot p {
+  margin: 0 0 10px;
+  color: var(--muted);
+  line-height: 1.55;
+  font-size: 12px;
+}
+
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--blue-50);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.chip.active {
+  background: var(--blue-100);
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.22);
+}
+
+.content {
+  padding: 18px 22px 26px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(201, 220, 239, 0.75);
+  box-shadow: var(--shadow-soft);
+}
+
+.topbar-left,
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.workspace-switch,
+.search,
+.mini-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+}
+
+.workspace-switch {
+  padding: 10px 14px;
+  min-width: 190px;
+}
+
+.workspace-switch strong {
+  display: block;
+  font-size: 13px;
+}
+
+.workspace-switch span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 340px;
+  padding: 12px 14px;
+  color: var(--muted);
+}
+
+.search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  color: var(--text);
+}
+
+.top-pill {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: var(--blue-50);
+  color: var(--muted);
+  border: 1px solid var(--line);
+  font-size: 12px;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #bedcff 0%, #82b8ff 100%);
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  color: white;
+  font-weight: 700;
+}
+
+.screen {
+  display: none;
+  margin-top: 18px;
+}
+
+.screen.is-active {
+  display: block;
+}
+
+.screen-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.screen-head h2 {
+  margin: 0 0 6px;
+  font-size: 28px;
+}
+
+.screen-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  max-width: 560px;
+}
+
+.action-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  border: none;
+  border-radius: 12px;
+  padding: 10px 13px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: 0.18s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%);
+  color: white;
+  box-shadow: 0 8px 18px rgba(79, 143, 238, 0.22);
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--text);
+  border: 1px solid var(--line);
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.layout-grid {
+  display: grid;
+  gap: 18px;
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-main {
+  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
+}
+
+.grid-split {
+  grid-template-columns: 280px minmax(0, 1fr) 310px;
+}
+
+.panel {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(201, 220, 239, 0.9);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.panel.pad {
+  padding: 17px;
+}
+
+.panel h3,
+.panel h4 {
+  margin: 0;
+}
+
+.panel-subtitle {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.stat-card {
+  padding: 18px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
+  border: 1px solid rgba(201, 220, 239, 0.9);
+  box-shadow: var(--shadow);
+}
+
+.stat-card small {
+  color: var(--muted);
+}
+
+.stat-card strong {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.stat-foot {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.positive { color: var(--green); }
+.warn { color: var(--orange); }
+.negative { color: var(--red); }
+
+.list {
+  display: grid;
+  gap: 10px;
+}
+
+.task-item,
+.entity-card,
+.topic-card,
+.review-card,
+.queue-card {
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
+}
+
+.task-item,
+.queue-card,
+.review-card {
+  padding: 15px;
+}
+
+.task-item h4,
+.entity-card h4,
+.topic-card h4,
+.queue-card h4,
+.review-card h4 {
+  margin: 0 0 6px;
+  font-size: 15px;
+}
+
+.task-item p,
+.entity-card p,
+.topic-card p,
+.queue-card p,
+.review-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.4;
+  font-size: 11px;
+}
+
+.task-meta,
+.entity-meta,
+.row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 10px;
+}
+
+.tag {
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: #f6f9fe;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.1;
+}
+
+.row-meta .tag {
+  background: var(--blue-50);
+  border-color: rgba(106, 164, 255, 0.18);
+  color: var(--blue-700);
+  font-weight: 600;
+}
+
+.tag.blue {
+  background: var(--blue-100);
+  color: var(--blue-700);
+}
+
+.tag.green {
+  background: rgba(45, 181, 132, 0.1);
+  border-color: rgba(45, 181, 132, 0.18);
+  color: #1b8b61;
+}
+
+.tag.orange {
+  background: rgba(242, 154, 56, 0.1);
+  border-color: rgba(242, 154, 56, 0.18);
+  color: #b76d16;
+}
+
+.tag.red {
+  background: rgba(228, 103, 103, 0.1);
+  border-color: rgba(228, 103, 103, 0.18);
+  color: #b24c4c;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+}
+
+.three-col {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.table-wrap {
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 920px;
+}
+
+th,
+td {
+  padding: 12px 12px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+thead th {
+  background: #f8fbff;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+tbody tr:hover {
+  background: rgba(106, 164, 255, 0.055);
+}
+
+.entity-cell {
+  display: flex;
+  gap: 12px;
+  align-items: start;
+}
+
+.avatar-lg {
+  width: 46px;
+  height: 46px;
+  border-radius: 15px;
+  background: linear-gradient(145deg, #c9e2ff 0%, #8bbcff 100%);
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 700;
+}
+
+.cell-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.cell-desc {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.kpi-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.metric {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 16px;
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
+}
+
+.toolbar-stack {
+  display: grid;
+  gap: 10px;
+  min-width: min(760px, 100%);
+}
+
+.search-inline {
+  min-width: 320px;
+  width: min(720px, 100%);
+  padding: 10px 12px;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.filter {
+  min-width: 132px;
+  padding: 10px 11px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: white;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 12px;
+}
+
+.side-stack {
+  display: grid;
+  gap: 16px;
+}
+
+.insight-card {
+  padding: 15px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
+}
+
+.insight-card h4 {
+  margin: 0 0 8px;
+  font-size: 15px;
+}
+
+.insight-card ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+  line-height: 1.5;
+  font-size: 11px;
+}
+
+.tab-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 16px 0 18px;
+}
+
+.tab {
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.tab.active {
+  background: var(--blue-100);
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.2);
+}
+
+.hero-card {
+  padding: 20px;
+  border-radius: 24px;
+  background: linear-gradient(145deg, rgba(212, 230, 255, 0.85) 0%, rgba(245, 250, 255, 0.96) 72%);
+  border: 1px solid rgba(180, 210, 248, 0.85);
+  box-shadow: var(--shadow-soft);
+}
+
+.hero-card h3 {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
+
+.hero-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.45;
+  font-size: 13px;
+}
+
+.mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.mini-card {
+  padding: 14px;
+}
+
+.mini-card strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 17px;
+}
+
+.playbook-list {
+  display: grid;
+  gap: 12px;
+}
+
+.playbook-item {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
+}
+
+.playbook-item.active {
+  border-color: rgba(79, 143, 238, 0.24);
+  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
+}
+
+.timeline {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.step {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.step.done {
+  color: #167657;
+  border-color: rgba(45, 181, 132, 0.18);
+  background: rgba(45, 181, 132, 0.08);
+}
+
+.step.current {
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.2);
+  background: var(--blue-100);
+}
+
+.bar-chart {
+  display: grid;
+  gap: 10px;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 108px minmax(0, 1fr) 48px;
+  gap: 10px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.bar-track {
+  height: 10px;
+  border-radius: 999px;
+  background: #eef3f8;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #93c3ff 0%, #5c95ef 100%);
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.day {
+  min-height: 118px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 12px;
+  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
+}
+
+.day strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.slot {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: var(--blue-50);
+  border: 1px solid rgba(106, 164, 255, 0.16);
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.footer-note {
+  margin-top: 18px;
+  color: var(--muted);
+  font-size: 12px;
+  text-align: right;
+}
+
+@media (max-width: 1320px) {
+  .grid-main,
+  .grid-split,
+  .grid-5,
+  .grid-4,
+  .grid-3,
+  .three-col,
+  .two-col {
+    grid-template-columns: 1fr;
+  }
+  .calendar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1080px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: relative;
+    height: auto;
+  }
+  .topbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .topbar-left,
+  .topbar-right {
+    flex-wrap: wrap;
+  }
+  .search {
+    min-width: 0;
+  }
+}
diff --git a/web/storyforge-web-v4/index.html b/web/storyforge-web-v4/index.html
new file mode 100644
index 0000000..a48731e
--- /dev/null
+++ b/web/storyforge-web-v4/index.html
@@ -0,0 +1,1916 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>StoryForge Web V4 Prototype</title>
+    <link rel="stylesheet" href="./assets/styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="sidebar">
+        <div class="brand">
+          <div class="brand-mark">SF</div>
+          <div>
+            <h1>StoryForge</h1>
+            <p>多平台新媒体运营中台</p>
+          </div>
+        </div>
+
+        <div class="nav-group">
+          <div class="nav-title">主工作台</div>
+          <button class="nav-item is-active" data-screen-target="dashboard">
+            <span class="icon">⌘</span>
+            <span>项目总台</span>
+          </button>
+          <button class="nav-item" data-screen-target="intake">
+            <span class="icon">⊕</span>
+            <span>我的项目</span>
+          </button>
+          <button class="nav-item" data-screen-target="discovery">
+            <span class="icon">◎</span>
+            <span>找对标</span>
+          </button>
+          <button class="nav-item" data-screen-target="tracking">
+            <span class="icon">◌</span>
+            <span>跟踪账号</span>
+          </button>
+          <button class="nav-item" data-screen-target="owned">
+            <span class="icon">◉</span>
+            <span>我的账号</span>
+          </button>
+          <button class="nav-item" data-screen-target="playbook">
+            <span class="icon">≣</span>
+            <span>Agent</span>
+          </button>
+          <button class="nav-item" data-screen-target="production">
+            <span class="icon">↗</span>
+            <span>生产中心</span>
+          </button>
+          <button class="nav-item" data-screen-target="review">
+            <span class="icon">⌁</span>
+            <span>发布与复盘</span>
+          </button>
+        </div>
+
+        <div class="nav-group">
+          <div class="nav-title">辅助模块</div>
+          <button class="nav-item" data-screen-target="automation">
+            <span class="icon">⚑</span>
+            <span>自动流程</span>
+          </button>
+          <button class="nav-item" data-screen-target="credits">
+            <span class="icon">¤</span>
+            <span>额度</span>
+          </button>
+          <button class="nav-item">
+            <span class="icon">☰</span>
+            <span>设置</span>
+          </button>
+        </div>
+
+        <div class="sidebar-foot">
+          <h3>当前设计原则</h3>
+          <p>先建项目，再建 Agent；导入内容后自动归类，最后进入生产和复盘。</p>
+          <div class="chip-row">
+            <span class="chip active">项目优先</span>
+            <span class="chip">跨平台</span>
+            <span class="chip">Agent 驱动</span>
+            <span class="chip">分析 + 动作</span>
+          </div>
+        </div>
+      </aside>
+
+      <main class="content">
+        <div class="topbar">
+          <div class="topbar-left">
+            <div class="workspace-switch">
+              <strong>项目：星流内容组</strong>
+              <span>1 个已绑定账号项目 · 2 个预调研项目</span>
+            </div>
+            <div class="chip-row">
+              <span class="chip active">全平台</span>
+              <span class="chip">抖音</span>
+              <span class="chip">小红书</span>
+              <span class="chip">B站</span>
+              <span class="chip">YouTube</span>
+            </div>
+          </div>
+          <div class="topbar-right">
+            <label class="search">
+              <span>⌕</span>
+              <input value="搜项目、账号、内容、Agent" />
+            </label>
+            <span class="top-pill">流程 7/8</span>
+            <span class="top-pill">更新 12</span>
+            <span class="top-pill">待调研 4</span>
+            <div class="avatar">KR</div>
+          </div>
+        </div>
+
+        <section class="screen is-active" data-screen="dashboard">
+          <div class="screen-head">
+            <div>
+              <h2>项目总台</h2>
+              <p>先做最能推进项目的事。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">新建项目</button>
+              <button class="btn btn-secondary">导入对标</button>
+              <button class="btn btn-primary">创建 Agent</button>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-5">
+            <div class="stat-card">
+              <small>活跃项目</small>
+              <strong>5</strong>
+              <div class="stat-foot"><span>其中 2 个为预调研项目</span><span class="positive">3 个已绑定平台账号</span></div>
+            </div>
+            <div class="stat-card">
+              <small>待接入参考内容</small>
+              <strong>14</strong>
+              <div class="stat-foot"><span>近 24 小时导入</span><span class="positive">8 条待 Agent 归类</span></div>
+            </div>
+            <div class="stat-card">
+              <small>跟踪更新</small>
+              <strong>12</strong>
+              <div class="stat-foot"><span>自上次打开后新增</span><span class="positive">7 条有借鉴点</span></div>
+            </div>
+            <div class="stat-card">
+              <small>待完成首轮调研 Agent</small>
+              <strong>4</strong>
+              <div class="stat-foot"><span>创建后未跑市场调研</span><span class="warn">2 个变现定义不完整</span></div>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main" style="margin-top: 18px;">
+            <div class="side-stack">
+              <div class="hero-card">
+                <h3>主流程</h3>
+                <p>项目 -> Agent -> 调研 -> 导入 -> 生产 -> 复盘</p>
+                <div class="chip-row" style="margin-top:14px;">
+                  <span class="chip active">1. 我的项目</span>
+                  <span class="chip">2. 创建 Agent</span>
+                  <span class="chip">3. 首轮调研</span>
+                  <span class="chip">4. 导入并绑定</span>
+                  <span class="chip">5. 生产与封面</span>
+                  <span class="chip">6. 发布复盘</span>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>今日重点动作</h3>
+                    <div class="panel-subtitle">按优先级</div>
+                  </div>
+                  <span class="tag blue">优先执行 4 项</span>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>为“副业增长实验室”新建预调研项目</h4>
+                    <p>先开项目，再补账号绑定。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">项目</span>
+                      <span class="tag">预调研</span>
+                      <span class="tag green">无账号也可启动</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>给“教育切片增长助手”补完平台与变现定义</h4>
+                    <p>补齐平台和变现后再跑调研。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">Agent 创建</span>
+                      <span class="tag">待补字段</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>把 5 条新导入的抖音作品交给导入分析 Agent 自动归类</h4>
+                    <p>交给导入分析 Agent 判归属。</p>
+                    <div class="task-meta">
+                      <span class="tag orange">导入分析 Agent</span>
+                      <span class="tag">自动绑定</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>补齐 2 条待生产内容的封面生成方案</h4>
+                    <p>先补封面对比，再进生产。</p>
+                    <div class="task-meta">
+                      <span class="tag red">封面生成</span>
+                      <span class="tag">多模型对比</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>高分对标</h3>
+                    <div class="panel-subtitle">先选要学的</div>
+                  </div>
+                  <span class="tag">找对标</span>
+                </div>
+                <div class="three-col">
+                  <div class="entity-card pad">
+                    <div class="entity-cell">
+                      <div class="avatar-lg">A</div>
+                      <div>
+                        <div class="cell-title">阿元创业手记</div>
+                        <div class="cell-desc">抖音 · 创业成长 · 强观点短视频</div>
+                      </div>
+                    </div>
+                    <div class="entity-meta">
+                      <span class="tag blue">涨粉快</span>
+                      <span class="tag">高互动</span>
+                      <span class="tag green">可学习度 93</span>
+                    </div>
+                  </div>
+                  <div class="entity-card pad">
+                    <div class="entity-cell">
+                      <div class="avatar-lg">晨</div>
+                      <div>
+                        <div class="cell-title">晨风老师</div>
+                        <div class="cell-desc">小红书 · 教育规划 · 图文 + 视频</div>
+                      </div>
+                    </div>
+                    <div class="entity-meta">
+                      <span class="tag blue">稳定更新</span>
+                      <span class="tag">收藏高</span>
+                      <span class="tag green">商业价值 88</span>
+                    </div>
+                  </div>
+                  <div class="entity-card pad">
+                    <div class="entity-cell">
+                      <div class="avatar-lg">YT</div>
+                      <div>
+                        <div class="cell-title">Grow With Data</div>
+                        <div class="cell-desc">YouTube · Knowledge Shorts</div>
+                      </div>
+                    </div>
+                    <div class="entity-meta">
+                      <span class="tag blue">短视频强</span>
+                      <span class="tag">系列化明显</span>
+                      <span class="tag green">结构清晰</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>跟踪日报</h3>
+                    <div class="panel-subtitle">自上次打开后</div>
+                  </div>
+                  <span class="tag blue">5 天汇总</span>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>秋芝2046 新增 3 条作品</h4>
+                    <p>导入分析 Agent 判断其中 2 条适合“教育切片助手”学习。</p>
+                    <div class="task-meta">
+                      <span class="tag">抖音</span>
+                      <span class="tag green">已标借鉴点</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>晨风老师 新增 2 条图文</h4>
+                    <p>更适合补进小红书搜索承接模板，建议今天加入 Playbook。</p>
+                    <div class="task-meta">
+                      <span class="tag">小红书</span>
+                      <span class="tag blue">适合图文线</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="hero-card">
+                <h3>本周计划</h3>
+                <p>先把“高信任知识切片”做稳。</p>
+                <div class="mini-grid">
+                  <div class="mini-card">
+                    <small>待生成选题</small>
+                    <strong>11</strong>
+                  </div>
+                  <div class="mini-card">
+                    <small>待脚本</small>
+                    <strong>6</strong>
+                  </div>
+                  <div class="mini-card">
+                    <small>待制作</small>
+                    <strong>4</strong>
+                  </div>
+                  <div class="mini-card">
+                    <small>待复盘</small>
+                    <strong>5</strong>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>高分内容</h3>
+                    <div class="panel-subtitle">直接找可复制点</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>3 秒抓住家长注意力的开头怎么写</h4>
+                    <p>适合做系列开场。</p>
+                    <div class="task-meta">
+                      <span class="tag">小红书</span>
+                      <span class="tag blue">AI 综合分 94</span>
+                      <span class="tag">收藏率高</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>副业失败的 3 个真实坑</h4>
+                    <p>适合走 AI 视频线。</p>
+                    <div class="task-meta">
+                      <span class="tag">抖音</span>
+                      <span class="tag blue">传播热度 91</span>
+                      <span class="tag orange">商业价值 87</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>异常提醒</h3>
+                    <div class="panel-subtitle">先处理阻塞</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>小红书竞品同步任务延迟 48 分钟</h4>
+                    <p>建议先暂停低优先级同步。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>2 个 Agent 学习集 7 天未更新</h4>
+                    <p>今天优先补学习集。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="intake">
+          <div class="screen-head">
+            <div>
+              <h2>我的项目</h2>
+              <p>先建项目，再决定是否绑定自己的账号。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">绑定账号</button>
+              <button class="btn btn-secondary">导入对标</button>
+              <button class="btn btn-primary">新建项目</button>
+            </div>
+          </div>
+
+          <div class="hero-card">
+            <h3>推荐流程</h3>
+            <p>建项目 → 建 Agent → 跑调研 → 导入 → 开始生产</p>
+            <div class="chip-row" style="margin-top: 14px;">
+              <span class="chip active">项目</span>
+              <span class="chip">账号接入</span>
+              <span class="chip">Agent 创建</span>
+              <span class="chip">市场调研</span>
+              <span class="chip">导入绑定</span>
+              <span class="chip">生产</span>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main" style="margin-top: 18px;">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>项目状态</h3>
+                    <div class="panel-subtitle">预调研也能先跑</div>
+                  </div>
+                </div>
+                <div class="three-col">
+                  <div class="entity-card pad">
+                    <div class="cell-title">星流主号增长项目</div>
+                    <div class="cell-desc">已绑定抖音创作者平台 / 小红书专业号</div>
+                    <div class="entity-meta">
+                      <span class="tag green">已绑定账号</span>
+                      <span class="tag">进入分析中</span>
+                    </div>
+                  </div>
+                  <div class="entity-card pad">
+                    <div class="cell-title">副业增长实验室</div>
+                    <div class="cell-desc">还没绑账号，先做调研</div>
+                    <div class="entity-meta">
+                      <span class="tag blue">预调研</span>
+                      <span class="tag">可导入参考内容</span>
+                    </div>
+                  </div>
+                  <div class="entity-card pad">
+                    <div class="cell-title">海外 Shorts 试水项目</div>
+                    <div class="cell-desc">已确定平台为 YouTube，尚未正式开账号，先做题材验证</div>
+                    <div class="entity-meta">
+                      <span class="tag orange">待绑定账号</span>
+                      <span class="tag">先做调研</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>导入中心</h3>
+                    <div class="panel-subtitle">导入后直接进入学习</div>
+                  </div>
+                </div>
+                <div class="three-col">
+                  <div class="insight-card">
+                    <h4>导入单条作品</h4>
+                    <ul>
+                      <li>支持抖音 / 小红书 / B站 / 视频号 / YouTube 链接</li>
+                      <li>可选择“手动关联 Agent”或“自动关联最近使用 Agent”</li>
+                      <li>进入导入分析 Agent 队列后再分类</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>导入创作者主页</h4>
+                    <ul>
+                      <li>输入抖音、小红书、B站、快手、视频号、YouTube 主页链接</li>
+                      <li>自动建立参考账号卡片</li>
+                      <li>也可手动指定 Agent</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>上传本地视频</h4>
+                    <ul>
+                      <li>适合内部素材和竞品录屏</li>
+                      <li>自动做 ASR 和摘要</li>
+                      <li>可直接送入学习集</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>导入绑定策略</h3>
+                    <div class="panel-subtitle">导入时定归属</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>手动关联 Agent</h4>
+                    <p>已知归属时直接指定。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">导入前选择</span>
+                      <span class="tag">最稳妥</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>自动关联最近使用 Agent</h4>
+                    <p>适合连续导入同批内容。</p>
+                    <div class="task-meta">
+                      <span class="tag orange">半自动</span>
+                      <span class="tag">效率更高</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>暂不绑定，进入待归类池</h4>
+                    <p>信息不全时先放待归类。</p>
+                    <div class="task-meta">
+                      <span class="tag red">待归类</span>
+                      <span class="tag">需要人工确认</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>平台账号同步</h3>
+                    <div class="panel-subtitle">先绑账号再看现状</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>抖音创作者平台</h4>
+                    <p>已绑定 · 最近同步：今天 09:12 · 当前账号健康度：中上</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>小红书专业号</h4>
+                    <p>已绑定 · 最近同步：今天 08:46 · 当前图文收藏信号强于视频信号</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>视频号 / 快手 / YouTube / 哔哩哔哩</h4>
+                    <p>不绑定也能先做预调研。</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>最近导入队列</h3>
+                    <div class="panel-subtitle">统一交给导入 Agent</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="review-card">
+                    <h4>抖音作品《副业失败的 3 个真实坑》</h4>
+                    <p>单条作品 · 已建议绑定“副业增长助手”</p>
+                    <div class="task-meta">
+                      <span class="tag green">自动绑定候选</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>抖音主页《秋芝2046》</h4>
+                    <p>主页链接 · 已建卡片，等待确认 Agent</p>
+                    <div class="task-meta">
+                      <span class="tag orange">待人工确认</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="discovery">
+          <div class="screen-head">
+            <div>
+              <h2>找对标</h2>
+              <p>在这里找值得持续学习的对标账号。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">保存筛选</button>
+              <button class="btn btn-secondary">批量导入</button>
+              <button class="btn btn-primary">分析并绑定</button>
+            </div>
+          </div>
+
+          <div class="panel">
+            <div class="toolbar">
+              <div class="toolbar-stack">
+                <label class="search search-inline">
+                  <span>⌕</span>
+                  <input value="搜账号名、主页链接、作品链接、关键词" />
+                </label>
+                <div class="filters">
+                  <div class="filter">平台：全平台</div>
+                  <div class="filter">模式：榜单发现</div>
+                  <div class="filter">赛道：教育 / 创业</div>
+                  <div class="filter">地区：全国</div>
+                  <div class="filter">粉丝量级：10w - 500w</div>
+                  <div class="filter">变现：不限</div>
+                </div>
+              </div>
+              <div class="side-stack">
+                <div class="chip-row">
+                  <span class="chip active">不限</span>
+                  <span class="chip">知识付费</span>
+                  <span class="chip">广告合作</span>
+                  <span class="chip">带货转化</span>
+                  <span class="chip">私域咨询</span>
+                </div>
+                <div class="chip-row">
+                <span class="chip active">涨粉</span>
+                <span class="chip">互动</span>
+                <span class="chip">商业价值</span>
+                <span class="chip">可学习度</span>
+                <span class="chip">最近活跃</span>
+                </div>
+              </div>
+            </div>
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>账号</th>
+                    <th>平台 / 赛道</th>
+                    <th>粉丝</th>
+                    <th>近 30 天涨粉</th>
+                    <th>AI 可学习度</th>
+                    <th>商业价值</th>
+                    <th>最近高分作品</th>
+                    <th>动作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div class="entity-cell">
+                        <div class="avatar-lg">阿</div>
+                        <div>
+                          <div class="cell-title">阿元创业手记</div>
+                          <div class="cell-desc">强观点开头 · 案例拆解 · 行动建议</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td><div class="kpi-inline"><span class="tag">抖音</span><span>创业成长</span></div></td>
+                    <td><span class="metric">182.4w</span></td>
+                    <td class="positive">+28.7w</td>
+                    <td><span class="tag blue">93</span></td>
+                    <td><span class="tag green">88</span></td>
+                    <td>《副业失败的 3 个坑》</td>
+                    <td><div class="row-meta"><span class="tag">查看</span><span class="tag">导入</span><span class="tag">绑 Agent</span></div></td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="entity-cell">
+                        <div class="avatar-lg">晨</div>
+                        <div>
+                          <div class="cell-title">晨风老师</div>
+                          <div class="cell-desc">家长决策内容 · 图文收藏高 · 节奏稳定</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td><div class="kpi-inline"><span class="tag">小红书</span><span>教育规划</span></div></td>
+                    <td><span class="metric">95.2w</span></td>
+                    <td class="positive">+14.2w</td>
+                    <td><span class="tag blue">91</span></td>
+                    <td><span class="tag green">86</span></td>
+                    <td>《3 秒抓住家长注意力的开头》</td>
+                    <td><div class="row-meta"><span class="tag">查看</span><span class="tag">导入</span><span class="tag">交给 Agent</span></div></td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="entity-cell">
+                        <div class="avatar-lg">数</div>
+                        <div>
+                          <div class="cell-title">数据见闻录</div>
+                          <div class="cell-desc">B站长视频切片能力强 · 系列化明显</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td><div class="kpi-inline"><span class="tag">B站</span><span>商业认知</span></div></td>
+                    <td><span class="metric">48.1w</span></td>
+                    <td class="positive">+6.4w</td>
+                    <td><span class="tag blue">84</span></td>
+                    <td><span class="tag green">79</span></td>
+                    <td>《做二创最容易踩的 3 个坑》</td>
+                    <td><div class="row-meta"><span class="tag">查看</span><span class="tag">导入</span><span class="tag">加对标池</span></div></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="layout-grid grid-main" style="padding:18px; border-top:1px solid var(--line);">
+              <div class="side-stack">
+                <div class="panel pad" style="box-shadow:none;">
+                  <div class="panel-head">
+                    <div>
+                      <h3>当前选中对标</h3>
+                      <div class="panel-subtitle">点开后直接看详情和动作</div>
+                    </div>
+                    <span class="tag blue">阿元创业手记</span>
+                  </div>
+
+                  <div class="hero-card" style="padding:18px;">
+                    <div class="entity-cell">
+                      <div class="avatar-lg">阿</div>
+                      <div>
+                        <h3>阿元创业手记</h3>
+                        <p>抖音 · 创业成长 · 最近 30 天涨粉 28.7w</p>
+                      </div>
+                    </div>
+                    <div class="mini-grid">
+                      <div class="mini-card"><small>AI 可学习度</small><strong>93</strong></div>
+                      <div class="mini-card"><small>商业价值</small><strong>88</strong></div>
+                      <div class="mini-card"><small>高分作品</small><strong>17</strong></div>
+                      <div class="mini-card"><small>已提炼打法</small><strong>6</strong></div>
+                    </div>
+                  </div>
+
+                  <div class="tab-row">
+                    <span class="tab active">总览</span>
+                    <span class="tab">高分作品</span>
+                    <span class="tab">账号画像</span>
+                    <span class="tab">相似账号</span>
+                  </div>
+
+                  <div class="three-col">
+                    <div class="insight-card">
+                      <h4>账号画像</h4>
+                      <ul>
+                        <li>反常识切入</li>
+                        <li>案例推进强</li>
+                        <li>结尾行动建议明确</li>
+                      </ul>
+                    </div>
+                    <div class="insight-card">
+                      <h4>高分作品</h4>
+                      <ul>
+                        <li>《副业失败的 3 个真实坑》</li>
+                        <li>《为什么努力的人反而更容易做错副业》</li>
+                        <li>适合提炼成系列模板</li>
+                      </ul>
+                    </div>
+                    <div class="insight-card">
+                      <h4>下一步动作</h4>
+                      <ul>
+                        <li>导入项目</li>
+                        <li>创建 Agent</li>
+                        <li>加入 Playbook</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="side-stack">
+                <div class="panel pad" style="box-shadow:none;">
+                  <div class="panel-head">
+                    <div>
+                      <h3>相似对标</h3>
+                      <div class="panel-subtitle">别只学一个</div>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="task-item">
+                      <h4>小口方法论</h4>
+                      <p>更强结论表达。</p>
+                    </div>
+                    <div class="task-item">
+                      <h4>Grow With Data</h4>
+                      <p>更强结构和镜头节奏。</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="tracking">
+          <div class="screen-head">
+            <div>
+              <h2>跟踪账号</h2>
+              <p>跟踪创作者更新，系统自动汇总成日报。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">刷新</button>
+              <button class="btn btn-secondary">看日报</button>
+              <button class="btn btn-primary">新增跟踪</button>
+            </div>
+          </div>
+
+          <div class="hero-card">
+            <h3>日报逻辑</h3>
+            <p>按上次打开后汇总更新。5 天没登录，就看 5 天汇总，再由 Agent 标借鉴点。</p>
+            <div class="chip-row" style="margin-top:14px;">
+              <span class="chip active">按上次打开汇总</span>
+              <span class="chip">支持多天补报</span>
+              <span class="chip">Agent 自动标借鉴点</span>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main" style="margin-top:18px;">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>跟踪列表</h3>
+                    <div class="panel-subtitle">手动选择长期跟踪</div>
+                  </div>
+                  <span class="tag">共 18 个</span>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>秋芝2046</h4>
+                    <p>抖音 · 关联 Agent：教育切片助手 · 最近更新：今天 08:14</p>
+                    <div class="task-meta">
+                      <span class="tag green">自动跟踪中</span>
+                      <span class="tag">日报已生成</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>晨风老师</h4>
+                    <p>小红书 · 关联 Agent：图文增长助手 · 最近更新：昨天 21:40</p>
+                    <div class="task-meta">
+                      <span class="tag green">自动跟踪中</span>
+                      <span class="tag blue">2 条新内容</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>Grow With Data</h4>
+                    <p>YouTube · 关联 Agent：海外 Shorts 助手 · 最近更新：3 天前</p>
+                    <div class="task-meta">
+                      <span class="tag">等待下次抓取</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>本次汇总范围</h3>
+                    <div class="panel-subtitle">不是自然日，而是上次打开后</div>
+                  </div>
+                </div>
+                <div class="three-col">
+                  <div class="insight-card">
+                    <h4>上次打开</h4>
+                    <ul>
+                      <li>2026/03/17 19:42</li>
+                      <li>距今 5 天</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>本次汇总</h4>
+                    <ul>
+                      <li>新增内容 12 条</li>
+                      <li>涉及 5 个跟踪账号</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>Agent 标注</h4>
+                    <ul>
+                      <li>7 条有借鉴点</li>
+                      <li>3 条建议入学习集</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>更新日报</h3>
+                    <div class="panel-subtitle">打开平台先看这组更新</div>
+                  </div>
+                  <span class="tag blue">汇总 5 天</span>
+                </div>
+                <div class="list">
+                  <div class="review-card">
+                    <h4>秋芝2046 · 《家长最容易忽略的一步》</h4>
+                    <p>教育切片助手判断：开头“错误认知”很强，适合借去做你的下一条 30 秒口播。</p>
+                    <div class="task-meta">
+                      <span class="tag green">有借鉴点</span>
+                      <span class="tag">建议加入学习集</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>晨风老师 · 《志愿填报前先别急着选学校》</h4>
+                    <p>图文增长助手判断：标题结构和收藏导向很强，适合转成图文选题。</p>
+                    <div class="task-meta">
+                      <span class="tag green">适合图文线</span>
+                      <span class="tag">建议加入 Playbook</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>Grow With Data · 《3 hooks for Shorts》</h4>
+                    <p>海外 Shorts 助手判断：更适合补充节奏和结构，不建议直接照搬表达。</p>
+                    <div class="task-meta">
+                      <span class="tag">结构可借</span>
+                      <span class="tag orange">表达不直接照搬</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>自动流程规则</h3>
+                    <div class="panel-subtitle">把跟踪变成日常动作</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>抓取触发</h4>
+                    <p>账号更新即入队；用户再次打开平台时补齐未读期间的全部更新。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>日报生成</h4>
+                    <p>按账号聚合，再按 Agent 给出借鉴点、风险点和建议动作。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>结果回写</h4>
+                    <p>高价值更新可一键加入 Agent 学习集、Playbook 或生产中心作品区。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="automation">
+          <div class="screen-head">
+            <div>
+              <h2>自动流程</h2>
+              <p>把同步、日报、补跑和提醒交给系统。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">看计划</button>
+              <button class="btn btn-secondary">看异常</button>
+              <button class="btn btn-primary">新建流程</button>
+            </div>
+          </div>
+
+          <div class="hero-card">
+            <div class="entity-cell">
+              <div class="avatar-lg">⚙</div>
+              <div>
+                <h3>自动流程</h3>
+                <p>负责自动同步、生成日报、补跑失败任务和提醒异常。</p>
+              </div>
+            </div>
+            <div class="mini-grid">
+              <div class="mini-card"><small>自动同步</small><strong>7</strong></div>
+              <div class="mini-card"><small>日报生成</small><strong>3</strong></div>
+              <div class="mini-card"><small>失败重跑</small><strong>2</strong></div>
+              <div class="mini-card"><small>异常提醒</small><strong>4</strong></div>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>常用自动流程</h3>
+                    <div class="panel-subtitle">适合后台持续运行</div>
+                  </div>
+                </div>
+                <div class="three-col">
+                  <div class="insight-card">
+                    <h4>账号同步</h4>
+                    <ul>
+                      <li>同步自运营账号数据</li>
+                      <li>更新项目现状</li>
+                      <li>补充账号诊断</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>跟踪日报</h4>
+                    <ul>
+                      <li>抓取跟踪账号更新</li>
+                      <li>按上次打开后汇总</li>
+                      <li>由 Agent 标借鉴点</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>失败补跑</h4>
+                    <ul>
+                      <li>剪辑失败自动重试</li>
+                      <li>AI 视频失败补跑</li>
+                      <li>超时任务自动提醒</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>当前流程列表</h3>
+                    <div class="panel-subtitle">按计划持续执行</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>每天 08:00 同步自运营账号</h4>
+                    <p>刷新抖音 / 小红书 / 视频号项目数据。</p>
+                    <div class="task-meta">
+                      <span class="tag green">运行正常</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>每次登录前生成跟踪日报</h4>
+                    <p>汇总用户上次打开后的全部更新，并由 Agent 给借鉴点。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">高频使用</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>为什么需要它</h3>
+                    <div class="panel-subtitle">把重复动作交给系统</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>减少重复手工操作</h4>
+                    <p>不用每天手动点同步、点抓取、点汇总。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>让更新更快变成学习资产</h4>
+                    <p>抓到新内容后，直接由 Agent 标注借鉴点和建议动作。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>把异常收口到后台</h4>
+                    <p>失败补跑、超时提醒、额度预警都放在这里看。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="owned">
+          <div class="screen-head">
+            <div>
+              <h2>我的账号</h2>
+              <p>这里看自己账号的现状和下一步动作。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">调目标</button>
+              <button class="btn btn-secondary">加 Playbook</button>
+              <button class="btn btn-primary">生成选题</button>
+            </div>
+          </div>
+
+          <div class="hero-card">
+            <div class="entity-cell">
+              <div class="avatar-lg">你</div>
+              <div>
+                <h3>你自己的知识成长号</h3>
+                <p>主平台：抖音 / 小红书 · 当前目标：做稳“高信任知识切片”栏目。</p>
+              </div>
+            </div>
+            <div class="mini-grid">
+              <div class="mini-card"><small>本周发布目标</small><strong>14 条</strong></div>
+              <div class="mini-card"><small>在产内容</small><strong>6 条</strong></div>
+              <div class="mini-card"><small>待脚本</small><strong>4 条</strong></div>
+              <div class="mini-card"><small>待复盘</small><strong>5 条</strong></div>
+            </div>
+          </div>
+
+          <div class="tab-row">
+            <span class="tab active">总览</span>
+            <span class="tab">内容计划</span>
+            <span class="tab">候选选题</span>
+            <span class="tab">在产内容</span>
+            <span class="tab">已发布</span>
+            <span class="tab">复盘</span>
+          </div>
+
+          <div class="layout-grid grid-main">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>本周策略卡</h3>
+                    <div class="panel-subtitle">先看本周重点</div>
+                  </div>
+                </div>
+                <div class="insight-card">
+                  <h4>阶段策略</h4>
+                  <ul>
+                    <li>先把“副业避坑”做成 7 条系列内容，形成稳定栏目。</li>
+                    <li>内容结构优先借参考账号的强观点开头，但案例改成你自己的客户场景。</li>
+                    <li>本周实拍剪辑和 AI 视频各做 2 条，验证哪条转化更高。</li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>下一批建议选题</h3>
+                    <div class="panel-subtitle">Agent 输出直接接业务目标</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="topic-card" style="padding:16px;">
+                    <h4>为什么越努力的人越容易做错副业</h4>
+                    <p>适合先走短视频观点切片。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">钩子强</span>
+                      <span class="tag">预估价值高</span>
+                      <span class="tag orange">待脚本</span>
+                    </div>
+                  </div>
+                  <div class="topic-card" style="padding:16px;">
+                    <h4>普通家长最容易忽略的教育规划错误</h4>
+                    <p>适合小红书图文 + 抖音口播双测。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">跨平台</span>
+                      <span class="tag">收藏潜力高</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>已绑定 Playbook</h3>
+                    <div class="panel-subtitle">这里是 Agent 的真实学习源</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>强观点短视频开头模板</h4>
+                    <p>来源：抖音创业类高分账号 14 条作品</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>高信任教育图文结构模板</h4>
+                    <p>来源：小红书教育规划账号 9 条高收藏图文</p>
+                  </div>
+                </div>
+              </div>
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>已绑定 Agent</h3>
+                    <div class="panel-subtitle">看产出，不看技术配置</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>选题助手-教育切片</h4>
+                    <p>最近产出：4 个候选选题，2 个已进入脚本阶段。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>分镜助手-副业避坑</h4>
+                    <p>最近产出：2 条 AI 视频分镜，1 条进入生产。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="playbook">
+          <div class="screen-head">
+            <div>
+              <h2>Agent</h2>
+              <p>项目之后先建 Agent。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">新建 Playbook</button>
+              <button class="btn btn-secondary">跑调研</button>
+              <button class="btn btn-primary">创建 Agent</button>
+            </div>
+          </div>
+
+          <div class="hero-card">
+            <h3>创建前置</h3>
+            <p>先定平台、变现和主模型，再跑首轮调研。</p>
+            <div class="chip-row" style="margin-top:14px;">
+              <span class="chip active">先选项目</span>
+              <span class="chip">定义账号类型</span>
+              <span class="chip">选择平台</span>
+              <span class="chip">选择变现</span>
+              <span class="chip">设置主模型</span>
+              <span class="chip">启动调研</span>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-split">
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>策略资产与 Playbook</h3>
+                    <div class="panel-subtitle">打法资产服务 Agent</div>
+                </div>
+              </div>
+              <div class="playbook-list">
+                <div class="playbook-item active">
+                  <h4>强观点短视频开头模板</h4>
+                  <p>抖音 / YouTube Shorts · 反常识开头 · 高评论</p>
+                </div>
+                <div class="playbook-item">
+                  <h4>高信任教育图文结构模板</h4>
+                  <p>小红书 · 高收藏 · 适合家长决策内容</p>
+                </div>
+                <div class="playbook-item">
+                  <h4>案例拆解型长视频切片模板</h4>
+                  <p>B站 / YouTube · 适合做知识型切片</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>Agent 创建器</h3>
+                    <div class="panel-subtitle">先定目标，再调研</div>
+                </div>
+              </div>
+              <div class="two-col">
+                <div class="insight-card">
+                  <h4>账号类型</h4>
+                  <ul>
+                    <li>知识 IP / 教育型账号</li>
+                    <li>品牌型账号 / 带货账号</li>
+                    <li>个人成长 / 生活方式 / 案例拆解账号</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>变现方式</h4>
+                  <ul>
+                    <li>知识付费</li>
+                    <li>广告接单 / 品牌合作</li>
+                    <li>带货转化 / 私域咨询 / 会员订阅</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="three-col" style="margin-top:16px;">
+                <div class="insight-card">
+                  <h4>覆盖平台</h4>
+                  <ul>
+                    <li>抖音 / 小红书 / 快手</li>
+                    <li>微信视频号 / YouTube / 哔哩哔哩</li>
+                    <li>按勾选平台先跑市场调研</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>默认主大模型</h4>
+                  <ul>
+                    <li>设置 1 个主模型作为标准输出</li>
+                    <li>可同时启用多个对比模型</li>
+                    <li>用户不管理 API Key，只选择模型</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>首轮动作</h4>
+                  <ul>
+                    <li>先做市场调研</li>
+                    <li>再吸收导入的主页与作品</li>
+                    <li>最后进入文案和内容计划生成</li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="chip-row" style="margin-top:16px;">
+                <span class="chip active">抖音</span>
+                <span class="chip active">小红书</span>
+                <span class="chip">快手</span>
+                <span class="chip">微信视频号</span>
+                <span class="chip">YouTube</span>
+                <span class="chip">哔哩哔哩</span>
+              </div>
+
+              <div class="chip-row" style="margin-top:12px;">
+                <span class="chip active">知识付费</span>
+                <span class="chip">广告合作</span>
+                <span class="chip">带货转化</span>
+                <span class="chip">私域咨询</span>
+                <span class="chip">会员订阅</span>
+              </div>
+
+              <div class="three-col" style="margin-top:16px;">
+                <div class="task-item">
+                  <h4>文案模型</h4>
+                  <p>主模型：通义千问 Max，可开对比模型。</p>
+                  <div class="task-meta">
+                    <span class="tag blue">主模型</span>
+                    <span class="tag">多模型对比</span>
+                  </div>
+                </div>
+                <div class="task-item">
+                  <h4>封面模型</h4>
+                  <p>支持阿里、火山和统一图像模型。</p>
+                  <div class="task-meta">
+                    <span class="tag orange">封面生成前置</span>
+                  </div>
+                </div>
+                <div class="task-item">
+                  <h4>视频模型</h4>
+                  <p>脚本、分镜、封面确认后再进视频队列。</p>
+                  <div class="task-meta">
+                    <span class="tag green">后台统一管理 Key</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>已创建 Agent</h3>
+                    <div class="panel-subtitle">导入分析也交给 Agent</div>
+                </div>
+              </div>
+              <div class="list">
+                <div class="task-item">
+                  <h4>选题助手-教育切片</h4>
+                  <p>学习源：高信任图文 + 强观点短视频 · 平台：抖音 / 小红书 / 视频号 · 变现：知识付费 + 私域咨询</p>
+                  <div class="task-meta">
+                    <span class="tag blue">最近产出 6 条</span>
+                    <span class="tag">主模型：通义千问</span>
+                    <span class="tag green">首轮调研已完成</span>
+                  </div>
+                </div>
+                <div class="task-item">
+                  <h4>分镜助手-副业避坑</h4>
+                  <p>学习源：反常识开头 + 失败案例 Playbook · 平台：抖音 / YouTube Shorts · 变现：广告合作</p>
+                  <div class="task-meta">
+                    <span class="tag orange">待补学习集</span>
+                    <span class="tag">主模型：豆包</span>
+                    <span class="tag">最近产出 2 条</span>
+                  </div>
+                </div>
+                <div class="task-item">
+                  <h4>导入分析 Agent</h4>
+                  <p>负责解析主页、单条作品和本地视频，自动给出分类和绑定建议。</p>
+                  <div class="task-meta">
+                    <span class="tag red">替代规则判断</span>
+                    <span class="tag">支持复核</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="screen" data-screen="production">
+          <div class="screen-head">
+            <div>
+              <h2>生产中心</h2>
+              <p>文案、封面、剪辑、AI 视频都在这里。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">批量封面</button>
+              <button class="btn btn-secondary">看作品</button>
+              <button class="btn btn-secondary">看异常</button>
+              <button class="btn btn-primary">新建任务</button>
+            </div>
+          </div>
+
+          <div class="panel pad">
+            <div class="panel-head">
+              <div>
+                <h3>生产队列</h3>
+                <div class="panel-subtitle">统一看进度</div>
+              </div>
+            </div>
+            <div class="timeline">
+              <span class="step done">已选题</span>
+              <span class="step done">文案生成</span>
+              <span class="step current">封面生成</span>
+              <span class="step">分镜 / 素材</span>
+              <span class="step">生产中</span>
+              <span class="step">待审核</span>
+              <span class="step">待发布</span>
+            </div>
+            <div class="layout-grid grid-4" style="margin-top:16px;">
+              <div class="queue-card">
+                <h4>文案生成</h4>
+                <p>《孩子为什么总在临门一脚放弃》</p>
+                <div class="task-meta">
+                  <span class="tag">主模型：通义</span>
+                  <span class="tag blue">对比 2 个模型</span>
+                </div>
+              </div>
+              <div class="queue-card">
+                <h4>封面生成</h4>
+                <p>《副业避坑：别把努力浪费在错方向》</p>
+                <div class="task-meta">
+                  <span class="tag">阿里 / 火山 / 通用图像</span>
+                  <span class="tag orange">待最终选图</span>
+                </div>
+              </div>
+              <div class="queue-card">
+                <h4>实拍剪辑</h4>
+                <p>《教育规划里最容易拖延的一步》</p>
+                <div class="task-meta">
+                  <span class="tag">来源：自营账号</span>
+                  <span class="tag blue">ETA 2h</span>
+                </div>
+              </div>
+              <div class="queue-card">
+                <h4>AI 视频</h4>
+                <p>《副业避坑：别把努力浪费在错方向》</p>
+                <div class="task-meta">
+                  <span class="tag">来源：Playbook</span>
+                  <span class="tag orange">待审核</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main" style="margin-top:18px;">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>本周生产看板</h3>
+                    <div class="panel-subtitle">先看卡点</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>AI 视频试投版《低预算露营也能拍出高级感》</h4>
+                    <p>卡在封面确认，今天 17:30 前可进待审核。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">AI 视频</span>
+                      <span class="tag orange">卡在封面</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>《副业避坑》实拍快剪版</h4>
+                    <p>已回片，等人工看样后排期。</p>
+                    <div class="task-meta">
+                      <span class="tag green">待审核</span>
+                      <span class="tag">实拍剪辑</span>
+                    </div>
+                  </div>
+                  <div class="task-item">
+                    <h4>《办公室反差感穿搭》图文版</h4>
+                    <p>文案已完成，还要补两组封面版本。</p>
+                    <div class="task-meta">
+                      <span class="tag purple">图文制作</span>
+                      <span class="tag orange">待补封面</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>生产瓶颈</h3>
+                    <div class="panel-subtitle">直接看阻塞</div>
+                  </div>
+                </div>
+                <div class="bar-chart">
+                  <div class="bar-row">
+                    <span>封面确认</span>
+                    <div class="bar-track"><div class="bar-fill" style="width:76%;"></div></div>
+                    <span>4 条</span>
+                  </div>
+                  <div class="bar-row">
+                    <span>人工审核</span>
+                    <div class="bar-track"><div class="bar-fill" style="width:54%;"></div></div>
+                    <span>3 条</span>
+                  </div>
+                  <div class="bar-row">
+                    <span>排期决策</span>
+                    <div class="bar-track"><div class="bar-fill" style="width:62%;"></div></div>
+                    <span>5 条</span>
+                  </div>
+                </div>
+                <div class="list" style="margin-top:16px;">
+                  <div class="review-card">
+                    <h4>当前最容易拖慢效率的是“封面确认”</h4>
+                    <p>把封面确认单独拆出来，并支持多模型 AB 对比。</p>
+                    <div class="task-meta">
+                      <span class="tag orange">流程优化建议</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>流程运行与异常</h3>
+                    <div class="panel-subtitle">先看哪里要人工兜底</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>实拍剪辑线</h4>
+                    <p>Windows cutvideo 调度正常，最近 24 小时成功 6 / 6。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>AI 视频线</h4>
+                    <p>本周 2 条任务等待凭证刷新，建议保留重试入口。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>封面多模型协作</h4>
+                    <p>3 条任务都卡在首图方案，建议加封面优先队列。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-split" style="margin-top:18px;">
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>作品与成片</h3>
+                  <div class="panel-subtitle">生产中和已沉淀内容都在这里</div>
+                </div>
+              </div>
+              <div class="list">
+                <div class="filter">平台：全平台</div>
+                <div class="filter">类型：视频 / 图文 / AI 视频 / 实拍</div>
+                <div class="filter">来源：对标导入 / 我的账号 / 生产任务</div>
+                <div class="filter">状态：生产中 / 待审核 / 已发布</div>
+                <div class="filter">时间：近 30 天</div>
+                <div class="filter">排序：综合分 / 热度 / 商业价值 / 发布时间</div>
+              </div>
+              <div class="panel-head" style="margin-top:16px;">
+                <div>
+                  <h3>快捷动作</h3>
+                </div>
+              </div>
+              <div class="chip-row">
+                <span class="chip active">高分</span>
+                <span class="chip">最新</span>
+                <span class="chip">补封面</span>
+                <span class="chip">加 Playbook</span>
+              </div>
+            </div>
+
+            <div class="panel">
+              <div class="toolbar">
+                <div>
+                  <h3 style="margin:0;">当前内容列表</h3>
+                  <div class="panel-subtitle">从结果反看最值得推进的内容</div>
+                </div>
+                <div class="chip-row">
+                  <span class="chip active">高分内容</span>
+                  <span class="chip">最新产出</span>
+                  <span class="chip">全部内容</span>
+                </div>
+              </div>
+              <div class="table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>内容</th>
+                      <th>来源</th>
+                      <th>平台</th>
+                      <th>当前阶段</th>
+                      <th>发布时间</th>
+                      <th>综合分</th>
+                      <th>热度</th>
+                      <th>商业价值</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div class="cell-title">3 秒抓住家长注意力的开头怎么写</div>
+                        <div class="cell-desc">图文 · 教育规划 · 高收藏</div>
+                      </td>
+                      <td>晨风老师 / 对标导入</td>
+                      <td><span class="tag">小红书</span></td>
+                      <td><span class="tag green">已进入文案</span></td>
+                      <td>2026/03/19</td>
+                      <td><span class="tag blue">94</span></td>
+                      <td>91</td>
+                      <td>85</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="cell-title">副业失败的 3 个真实坑</div>
+                        <div class="cell-desc">视频 · 创业成长 · 高评论</div>
+                      </td>
+                      <td>阿元创业手记 / 对标导入</td>
+                      <td><span class="tag">抖音</span></td>
+                      <td><span class="tag orange">待封面确认</span></td>
+                      <td>2026/03/18</td>
+                      <td><span class="tag blue">94</span></td>
+                      <td>93</td>
+                      <td>87</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="cell-title">做二创最容易踩的 3 个坑</div>
+                        <div class="cell-desc">长视频切片 · 结构清晰</div>
+                      </td>
+                      <td>数据见闻录 / 对标导入</td>
+                      <td><span class="tag">B站</span></td>
+                      <td><span class="tag blue">已入 Playbook</span></td>
+                      <td>2026/03/17</td>
+                      <td><span class="tag blue">88</span></td>
+                      <td>79</td>
+                      <td>76</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>当前选中内容</h3>
+                  <div class="panel-subtitle">当前选中：副业失败的 3 个真实坑</div>
+                </div>
+              </div>
+              <div class="side-stack">
+                <div class="insight-card">
+                  <h4>AI 摘要</h4>
+                  <ul>
+                    <li>高互动原因在于“反常识 + 具体案例 + 明确建议”的组合。</li>
+                    <li>节奏短促，适合口播或 AI 视频切片。</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>可借鉴点</h4>
+                  <ul>
+                    <li>开头直接否定常见认知</li>
+                    <li>中段按 1 / 2 / 3 结构推进</li>
+                    <li>结尾给出可执行动作</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>下一步建议</h4>
+                  <ul>
+                    <li>优先送入“副业增长助手”继续生成脚本</li>
+                    <li>封面先跑 3 个模型做对比</li>
+                    <li>成片进入待审核后再决定走实拍还是 AI 视频</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>风险提醒</h4>
+                  <ul>
+                    <li>如果过度强化“失败”情绪，容易降低信任感。</li>
+                    <li>商业承接不能直接硬转化，需要加过渡案例。</li>
+                  </ul>
+                </div>
+                <div class="chip-row">
+                  <span class="chip active">继续做</span>
+                  <span class="chip">补封面</span>
+                  <span class="chip">加 Playbook</span>
+                  <span class="chip">看成片</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="footer-note">StoryForge Web V4 prototype · UI only · no live data binding</div>
+        </section>
+
+        <section class="screen" data-screen="review">
+          <div class="screen-head">
+            <div>
+              <h2>发布与复盘</h2>
+              <p>在这里看发布结果和下一轮动作。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">看 7 日</button>
+              <button class="btn btn-secondary">看 30 日</button>
+              <button class="btn btn-primary">新建复盘</button>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>发布排期</h3>
+                    <div class="panel-subtitle">先保栏目节奏</div>
+                  </div>
+                </div>
+                <div class="calendar">
+                  <div class="day"><strong>周一</strong><div class="slot">抖音：副业避坑短视频<br />19:30</div></div>
+                  <div class="day"><strong>周二</strong><div class="slot">小红书：教育图文<br />12:00</div></div>
+                  <div class="day"><strong>周三</strong><div class="slot">抖音：AI 视频版<br />20:00</div></div>
+                  <div class="day"><strong>周四</strong><div class="slot">B站：长视频切片<br />18:30</div></div>
+                  <div class="day"><strong>周五</strong><div class="slot">抖音：栏目连载 03<br />20:00</div></div>
+                  <div class="day"><strong>周六</strong><div class="slot">小红书：案例图文<br />13:00</div></div>
+                  <div class="day"><strong>周日</strong><div class="slot">YouTube Shorts：A/B 版<br />21:00</div></div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>复盘对比</h3>
+                    <div class="panel-subtitle">同主题不同生产方式对比</div>
+                  </div>
+                </div>
+                <div class="bar-chart">
+                  <div class="bar-row">
+                    <span>实拍剪辑版</span>
+                    <div class="bar-track"><div class="bar-fill" style="width:82%;"></div></div>
+                    <span>82</span>
+                  </div>
+                  <div class="bar-row">
+                    <span>AI 视频版</span>
+                    <div class="bar-track"><div class="bar-fill" style="width:68%;"></div></div>
+                    <span>68</span>
+                  </div>
+                </div>
+                <div class="list" style="margin-top:16px;">
+                  <div class="review-card">
+                    <h4>结论：建议继续做实拍剪辑版</h4>
+                    <p>下周优先做实拍剪辑版，AI 视频继续低成本测试。</p>
+                    <div class="task-meta">
+                      <span class="tag green">建议继续</span>
+                      <span class="tag">可变体复刻</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>最新复盘卡</h3>
+                    <div class="panel-subtitle">把结果写回策略和学习集</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="review-card">
+                    <h4>《副业失败的 3 个真实坑》</h4>
+                    <p>播放 128w · 点赞 8.9w · 评论 1.9w · 收藏 2.1w · 咨询转化 3.2%</p>
+                    <div class="task-meta">
+                      <span class="tag green">建议继续</span>
+                      <span class="tag">适合系列化</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>《教育规划里最容易忽略的一步》</h4>
+                    <p>更适合做图文矩阵延展。</p>
+                    <div class="task-meta">
+                      <span class="tag orange">适合图文扩展</span>
+                      <span class="tag">建议补系列</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>下一轮动作</h3>
+                    <div class="panel-subtitle">复盘后进入下一轮</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>更新 Playbook</h4>
+                    <p>把“评论区问题前置”写回模板。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>更新 Agent 学习源</h4>
+                    <p>把 2 条高表现内容写回 Agent 学习集。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>安排下一轮测试</h4>
+                    <p>同主题保留实拍主线，AI 视频继续低成本验证。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="footer-note">StoryForge Web V4 prototype · review loop separated from production</div>
+        </section>
+
+        <section class="screen" data-screen="credits">
+          <div class="screen-head">
+            <div>
+              <h2>额度</h2>
+              <p>用户只看可用额度，不看底层密钥。</p>
+            </div>
+            <div class="action-row">
+              <button class="btn btn-secondary">看明细</button>
+              <button class="btn btn-secondary">看套餐</button>
+              <button class="btn btn-primary">补额度</button>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-4">
+            <div class="stat-card">
+              <small>文案积分</small>
+              <strong>12,640</strong>
+              <div class="stat-foot"><span>本周消耗 1,120</span><span class="positive">主模型 + 对比模型共用</span></div>
+            </div>
+            <div class="stat-card">
+              <small>封面积分</small>
+              <strong>4,320</strong>
+              <div class="stat-foot"><span>本周消耗 680</span><span class="warn">多模型对比消耗更快</span></div>
+            </div>
+            <div class="stat-card">
+              <small>视频积分</small>
+              <strong>1,180</strong>
+              <div class="stat-foot"><span>本周消耗 290</span><span class="negative">需控制试投数量</span></div>
+            </div>
+            <div class="stat-card">
+              <small>当前计费策略</small>
+              <strong>Phase 1</strong>
+              <div class="stat-foot"><span>按额度池表达</span><span class="positive">后续再细化成本模型</span></div>
+            </div>
+          </div>
+
+          <div class="layout-grid grid-main" style="margin-top:18px;">
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>额度池逻辑</h3>
+                    <div class="panel-subtitle">先让用户看懂自己还能做什么</div>
+                  </div>
+                </div>
+                <div class="three-col">
+                  <div class="insight-card">
+                    <h4>文案积分</h4>
+                    <ul>
+                      <li>覆盖选题、文案、脚本、复盘建议</li>
+                      <li>支持 1 个主模型 + 多个对比模型</li>
+                      <li>适合高频日常使用</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>封面积分</h4>
+                    <ul>
+                      <li>覆盖封面主图、首图、首尾帧辅助图</li>
+                      <li>支持阿里、火山和统一图像模型</li>
+                      <li>适合多版本 AB 测试</li>
+                    </ul>
+                  </div>
+                  <div class="insight-card">
+                    <h4>视频积分</h4>
+                    <ul>
+                      <li>覆盖 AI 视频生成与重试</li>
+                      <li>适合关键选题的低成本试投</li>
+                      <li>建议和封面额度联动观察</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>项目消耗排行</h3>
+                    <div class="panel-subtitle">先看哪个项目最吃额度</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="task-item">
+                    <h4>星流主号增长项目</h4>
+                    <p>文案积分 420 / 封面积分 110 / 视频积分 68。主要消耗在抖音 + 小红书双平台连续出稿。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>副业增长实验室</h4>
+                    <p>文案积分 265 / 封面积分 182 / 视频积分 41。主要消耗在高分参考内容导入后的封面多版本测试。</p>
+                  </div>
+                  <div class="task-item">
+                    <h4>海外 Shorts 试水项目</h4>
+                    <p>视频积分占比偏高，建议先多做文案和封面验证，再放大视频试投。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="side-stack">
+              <div class="panel pad">
+                <div class="panel-head">
+                  <div>
+                    <h3>额度产品化建议</h3>
+                    <div class="panel-subtitle">先用简单表达上线</div>
+                  </div>
+                </div>
+                <div class="list">
+                  <div class="review-card">
+                    <h4>第一阶段：三类额度池</h4>
+                    <p>先统一成文案 / 封面 / 视频三类额度池。</p>
+                    <div class="task-meta">
+                      <span class="tag blue">可快速上线</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>第二阶段：项目包 + 增值包</h4>
+                    <p>后续再加项目包、试投包、封面增强包。</p>
+                    <div class="task-meta">
+                      <span class="tag orange">后续迭代</span>
+                    </div>
+                  </div>
+                  <div class="review-card">
+                    <h4>后台托管密钥</h4>
+                    <p>密钥统一后台托管，用户只选模型和看额度。</p>
+                    <div class="task-meta">
+                      <span class="tag green">降低使用门槛</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="footer-note">StoryForge Web V4 prototype · credit system expressed as user-facing quota pools</div>
+        </section>
+      </main>
+    </div>
+
+    <script src="./assets/app.js"></script>
+  </body>
+</html>