fix: move bgp brief markdown into a modal workspace

VERSION

@@ -1 +1 @@
-0.24.7
+0.24.8

docs/CHANGELOG.md

@@ -7,6 +7,22 @@ This project follows the repository versioning rule:
 - `feature` -> `+0.1.0`
 - `bugfix` -> `+0.0.1`
 
+## 0.24.8
+
+Released: 2026-04-10
+
+### Highlights
+
+- Refined the BGP AI brief operator workflow so the tab now stays compact and metadata-focused, while the full Markdown brief opens in a bounded modal that respects the repo’s single-screen layout rules.
+
+### Improved
+
+- Improved [frontend/src/pages/BGP/BGP.tsx](/home/ray/dev/linkong/planet/frontend/src/pages/BGP/BGP.tsx) by turning the brief action row into a clearer `历史简报下拉框 + 查看 + 生成` flow, keeping inline metadata visible in the tab while moving full Markdown reading into a dedicated modal workspace.
+
+### Fixed
+
+- Fixed [frontend/src/index.css](/home/ray/dev/linkong/planet/frontend/src/index.css) and [frontend/src/pages/BGP/BGP.tsx](/home/ray/dev/linkong/planet/frontend/src/pages/BGP/BGP.tsx) so the BGP brief modal no longer spills below the viewport; long brief content now scrolls inside the modal body instead of extending past the visible screen.
+
 ## 0.24.7
 
 Released: 2026-04-10

docs/version-history.md

@@ -16,7 +16,7 @@
 ## Current Version
 
 - `main` 当前主线历史推导到：`0.16.5`
-- `dev` 当前开发分支历史推导到：`0.24.7`
+- `dev` 当前开发分支历史推导到：`0.24.8`
 
 ## Timeline
 
@@ -80,6 +80,7 @@
 | `0.24.5` | bugfix | `dev` | `pending` | add persistent BGP AI briefs with Markdown history, lazy-load BGP tabs, and move BGP hot-path filtering and aggregation back into the database |
 | `0.24.6` | bugfix | `dev` | `pending` | batch datasource and visualization hot-path queries, fix BGP collector JSON extraction, and rebuild the BGP AI brief tab layout and markdown rendering |
 | `0.24.7` | bugfix | `dev` | `pending` | formalize release workflow and frontend layout constraints with repo rules and a reusable release skill |
+| `0.24.8` | bugfix | `dev` | `pending` | move BGP brief markdown into a dedicated modal, keep tab content metadata-focused, and constrain modal scrolling to the viewport |
 
 ## Maintenance Commits Not Counted as Version Bumps
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "planet-frontend",
-  "version": "0.24.7",
+  "version": "0.24.8",
   "private": true,
   "packageManager": "bun@1",
   "dependencies": {

frontend/src/index.css

@@ -1038,15 +1038,6 @@ body {
   gap: 12px;
 }
 
-.bgp-page__brief-content {
-  min-height: 360px;
-  overflow: visible;
-  padding: 14px 16px;
-  border-radius: 14px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.98));
-  border: 1px solid rgba(5, 5, 5, 0.08);
-}
-
 .bgp-page__brief-head {
   display: flex;
   align-items: flex-start;
@@ -1058,10 +1049,20 @@ body {
   display: flex;
   align-items: center;
   gap: 12px;
+  margin-left: auto;
+  min-width: 0;
 }
 
 .bgp-page__brief-select {
-  min-width: 260px;
+  width: 320px;
+  min-width: 240px;
+}
+
+.bgp-page__brief-buttons {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 12px;
 }
 
 .bgp-page__brief-subtitle {
@@ -1071,6 +1072,22 @@ body {
   line-height: 1.5;
 }
 
+@media (max-width: 960px) {
+  .bgp-page__brief-head {
+    flex-direction: column;
+  }
+
+  .bgp-page__brief-actions {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .bgp-page__brief-select {
+    flex: 1 1 auto;
+    width: auto;
+  }
+}
+
 .bgp-page__brief-loading,
 .bgp-page__brief-empty {
   min-height: 72px;
@@ -1089,6 +1106,54 @@ body {
   padding: 8px 12px;
 }
 
+.bgp-page__brief-modal-body {
+  max-height: calc(100vh - 180px);
+  overflow: auto;
+  padding-right: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.88) transparent;
+}
+
+.bgp-page__brief-modal {
+  max-width: min(920px, calc(100vw - 32px));
+}
+
+.bgp-page__brief-modal .ant-modal-content {
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+}
+
+.bgp-page__brief-modal .ant-modal-body {
+  overflow: hidden;
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.88);
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@media (max-width: 768px) {
+  .bgp-page__brief-modal {
+    max-width: calc(100vw - 20px);
+  }
+
+  .bgp-page__brief-modal .ant-modal-content {
+    max-height: calc(100vh - 20px);
+  }
+
+  .bgp-page__brief-modal-body {
+    max-height: calc(100vh - 156px);
+  }
+}
+
 .markdown-renderer {
   color: #262626;
   font-size: 13px;

frontend/src/pages/BGP/BGP.tsx

@@ -6,6 +6,7 @@ import {
   Card,
   Col,
   Descriptions,
+  Modal,
   Row,
   Select,
   Space,
@@ -343,6 +344,7 @@ function BGP() {
   const [briefOptions, setBriefOptions] = useState<BGPBriefRecordSummary[]>([])
   const [selectedBriefId, setSelectedBriefId] = useState<string | null>(null)
   const [briefListLoaded, setBriefListLoaded] = useState(false)
+  const [briefModalOpen, setBriefModalOpen] = useState(false)
   const tableRegionRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
@@ -537,14 +539,22 @@ function BGP() {
               onChange={(value) => void handleBriefSelectionChange(value)}
               disabled={briefLoading || briefDetailLoading || briefOptions.length === 0}
             />
-            <Button
+            <div className="bgp-page__brief-buttons">
-              type="primary"
+              <Button
-              icon={<ReloadOutlined />}
+                onClick={() => setBriefModalOpen(true)}
-              loading={briefLoading}
+                disabled={!brief || briefLoading || briefDetailLoading}
-              onClick={() => void handleGenerateBrief()}
+              >
-            >
+                查看
-              生成 AI 简报
+              </Button>
-            </Button>
+              <Button
+                type="primary"
+                icon={<ReloadOutlined />}
+                loading={briefLoading}
+                onClick={() => void handleGenerateBrief()}
+              >
+                生成 AI 简报
+              </Button>
+            </div>
           </div>
         </div>
 
@@ -565,9 +575,6 @@ function BGP() {
                 {formatDateTimeZhCN(brief.generated_at)}
               </Descriptions.Item>
             </Descriptions>
-            <div className="bgp-page__brief-content">
-              <MarkdownRenderer markdown={brief.content_markdown} />
-            </div>
           </div>
         ) : (
           <div className="bgp-page__brief-empty">
@@ -706,6 +713,26 @@ function BGP() {
             </Card>
           </Space>
         </div>
+
+        <Modal
+          title="BGP AI 简报"
+          open={briefModalOpen}
+          onCancel={() => setBriefModalOpen(false)}
+          footer={null}
+          width={920}
+          className="bgp-page__brief-modal"
+          style={{ top: 24 }}
+          styles={{ body: { paddingTop: 12 } }}
+          destroyOnHidden
+        >
+          {brief ? (
+            <div className="bgp-page__brief-modal-body">
+              <MarkdownRenderer markdown={brief.content_markdown} />
+            </div>
+          ) : (
+            <Text type="secondary">当前没有可查看的简报内容。</Text>
+          )}
+        </Modal>
       </div>
     </AppLayout>
   )

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "planet"
-version = "0.24.7"
+version = "0.24.8"
 description = "智能星球计划 - 态势感知系统"
 requires-python = ">=3.14"
 dependencies = [

uv.lock

@@ -475,7 +475,7 @@ wheels = [
 
 [[package]]
 name = "planet"
-version = "0.24.7"
+version = "0.24.8"
 source = { virtual = "." }
 dependencies = [
     { name = "aiofiles" },