diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index b9da3fcb..b31190f9 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -380,6 +380,14 @@
       "remainingTitle": "仍待推進缺口",
       "openWorkItems": "打開 Work Items",
       "openRuns": "打開 Runs",
+      "matrix": {
+        "title": "交付與缺口矩陣",
+        "columns": {
+          "group": "類型",
+          "capability": "能力 / 證據",
+          "status": "狀態"
+        }
+      },
       "status": {
         "live": "已上線",
         "progress": "推進中",
diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json
index b9da3fcb..b31190f9 100644
--- a/apps/web/messages/zh-TW.json
+++ b/apps/web/messages/zh-TW.json
@@ -380,6 +380,14 @@
       "remainingTitle": "仍待推進缺口",
       "openWorkItems": "打開 Work Items",
       "openRuns": "打開 Runs",
+      "matrix": {
+        "title": "交付與缺口矩陣",
+        "columns": {
+          "group": "類型",
+          "capability": "能力 / 證據",
+          "status": "狀態"
+        }
+      },
       "status": {
         "live": "已上線",
         "progress": "推進中",
diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 387c46fd..0660090d 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -1243,6 +1243,16 @@ export default function Home({ params }: { params: { locale: string } }) {
       tone: callbackTraceSummary && missingTraceRecent24h > 0 ? 'progress' : callbackTraceSummary ? 'live' : 'watching',
     },
   ]
+  const automationDeliveryMatrixRows = [
+    ...automationDeliveryItems.map(item => ({
+      ...item,
+      group: tDashboard('automationDelivery.deliveredTitle'),
+    })),
+    ...automationRemainingItems.map(item => ({
+      ...item,
+      group: tDashboard('automationDelivery.remainingTitle'),
+    })),
+  ]
   const productDiagramCards = [
     {
       key: 'c4Runtime',
@@ -2602,109 +2612,136 @@ export default function Home({ params }: { params: { locale: string } }) {
             </aside>
           </div>
 
-          <div style={{ display: 'grid', gridTemplateColumns: dashboardGridTemplate, gap: compactViewport ? 10 : 14, padding: sectionPadding }}>
-            <div>
-              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
-                <h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
-                  {tDashboard('automationDelivery.deliveredTitle')}
-                </h2>
-                <a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
+          <div style={{ padding: sectionPadding }}>
+            <div style={{
+              display: 'flex',
+              alignItems: compactViewport ? 'flex-start' : 'baseline',
+              flexDirection: compactViewport ? 'column' : 'row',
+              justifyContent: 'space-between',
+              gap: 8,
+              marginBottom: 8,
+            }}>
+              <h2 style={{ margin: 0, fontSize: 14, fontWeight: 850, color: '#141413' }}>
+                {tDashboard('automationDelivery.matrix.title')}
+              </h2>
+              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                <a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
                   {tDashboard('automationDelivery.openWorkItems')}
                 </a>
-              </div>
-              <div style={{ display: 'grid', gap: 8 }}>
-                {automationDeliveryItems.map(item => {
-                  const tone = automationWorkToneStyle[item.tone]
-                  return (
-                    <a
-                      key={item.key}
-                      href={item.href}
-                      style={{
-                        display: 'grid',
-                        gridTemplateColumns: workItemGridTemplate,
-                        gap: 10,
-                        padding: '10px 12px',
-                        border: '0.5px solid #e0ddd4',
-                        borderRadius: 8,
-                        background: '#fbfaf6',
-                        color: 'inherit',
-                        textDecoration: 'none',
-                      }}
-                    >
-                      <div style={{ minWidth: 0 }}>
-                        <div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
-                        <div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
-                      </div>
-                      <span style={{
-                        alignSelf: 'start',
-                        justifySelf: compactViewport ? 'start' : 'auto',
-                        border: `0.5px solid ${tone.border}`,
-                        background: tone.bg,
-                        color: tone.color,
-                        borderRadius: 999,
-                        padding: '2px 8px',
-                        fontSize: 10,
-                        fontWeight: 800,
-                        whiteSpace: 'nowrap',
-                      }}>
-                        {item.status}
-                      </span>
-                    </a>
-                  )
-                })}
-              </div>
-            </div>
-
-            <div>
-              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
-                <h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
-                  {tDashboard('automationDelivery.remainingTitle')}
-                </h2>
-                <a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
+                <a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
                   {tDashboard('automationDelivery.openRuns')}
                 </a>
               </div>
-              <div style={{ display: 'grid', gap: 8 }}>
-                {automationRemainingItems.map(item => {
-                  const tone = automationWorkToneStyle[item.tone]
-                  return (
-                    <a
-                      key={item.key}
-                      href={item.href}
-                      style={{
-                        display: 'grid',
-                        gridTemplateColumns: workItemGridTemplate,
-                        gap: 10,
-                        padding: '10px 12px',
-                        border: `0.5px solid ${tone.border}`,
-                        borderRadius: 8,
-                        background: tone.bg,
-                        color: 'inherit',
-                        textDecoration: 'none',
-                      }}
-                    >
-                      <div style={{ minWidth: 0 }}>
-                        <div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
-                        <div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
-                      </div>
+            </div>
+            <div style={{
+              display: 'grid',
+              gap: 1,
+              border: '0.5px solid #e0ddd4',
+              borderRadius: 8,
+              background: '#e0ddd4',
+              overflow: 'hidden',
+            }}>
+              {!compactViewport && (
+                <div style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
+                  gap: 1,
+                  background: '#e0ddd4',
+                }}>
+                  {[
+                    tDashboard('automationDelivery.matrix.columns.group'),
+                    tDashboard('automationDelivery.matrix.columns.capability'),
+                    tDashboard('automationDelivery.matrix.columns.status'),
+                  ].map(label => (
+                    <div key={label} style={{
+                      background: '#faf9f3',
+                      padding: '7px 9px',
+                      fontSize: 10,
+                      fontWeight: 900,
+                      color: '#5f5b52',
+                      textTransform: 'uppercase',
+                      letterSpacing: 0.35,
+                    }}>
+                      {label}
+                    </div>
+                  ))}
+                </div>
+              )}
+              {automationDeliveryMatrixRows.map(item => {
+                const tone = automationWorkToneStyle[item.tone]
+                return (
+                  <a
+                    key={`matrix-${item.key}`}
+                    href={item.href}
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: compactViewport ? '1fr' : 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
+                      gap: compactViewport ? 6 : 1,
+                      background: compactViewport ? '#fff' : '#e0ddd4',
+                      color: 'inherit',
+                      textDecoration: 'none',
+                    }}
+                  >
+                    <div style={{
+                      background: compactViewport ? tone.bg : '#fff',
+                      borderLeft: compactViewport ? `3px solid ${tone.color}` : 'none',
+                      padding: compactViewport ? '8px 9px 0' : '8px 9px',
+                      minWidth: 0,
+                    }}>
                       <span style={{
-                        alignSelf: 'start',
-                        justifySelf: compactViewport ? 'start' : 'auto',
+                        display: 'inline-flex',
+                        maxWidth: '100%',
                         border: `0.5px solid ${tone.border}`,
-                        background: '#fff',
+                        background: tone.bg,
+                        color: tone.color,
+                        borderRadius: 999,
+                        padding: '1px 7px',
+                        fontSize: 10,
+                        fontWeight: 850,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        {item.group}
+                      </span>
+                    </div>
+                    <div style={{
+                      background: '#fff',
+                      padding: compactViewport ? '2px 9px 0' : '8px 9px',
+                      minWidth: 0,
+                    }}>
+                      <div style={{ fontSize: 12, fontWeight: 850, color: '#141413', lineHeight: 1.3, overflowWrap: 'anywhere' }}>
+                        {item.title}
+                      </div>
+                      <div style={{ marginTop: 3, fontSize: 10, lineHeight: 1.45, color: '#5f5b52', overflowWrap: 'anywhere' }}>
+                        {item.detail}
+                      </div>
+                    </div>
+                    <div style={{
+                      background: '#fff',
+                      padding: compactViewport ? '3px 9px 9px' : '8px 9px',
+                      minWidth: 0,
+                    }}>
+                      <span style={{
+                        display: 'inline-flex',
+                        maxWidth: '100%',
+                        border: `0.5px solid ${tone.border}`,
+                        background: tone.bg,
                         color: tone.color,
                         borderRadius: 999,
                         padding: '2px 8px',
                         fontSize: 10,
-                        fontWeight: 800,
+                        fontWeight: 850,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
                         whiteSpace: 'nowrap',
                       }}>
                         {item.status}
                       </span>
-                    </a>
-                  )
-                })}
-              </div>
+                    </div>
+                  </a>
+                )
+              })}
             </div>
           </div>
         </section>
diff --git a/docs/LOGBOOK.md b/docs/LOGBOOK.md
index 0053c134..919c525d 100644
--- a/docs/LOGBOOK.md
+++ b/docs/LOGBOOK.md
@@ -1,3 +1,31 @@
+## 2026-06-04｜首頁交付與缺口矩陣
+
+**背景**：上一階段已把首頁 Command Map 做成 4 條泳道式拓樸；本輪接著處理首頁下方仍偏卡片堆疊的「已上線能力 / 待推進缺口」。目標是用表格矩陣讓 operator 更快掃描能力、證據與狀態，而不是逐張卡閱讀。
+
+**本輪完成**：
+- `/zh-TW` 首頁 `automationDelivery` 區塊由兩欄卡片改為單一「交付與缺口矩陣」。
+- 矩陣欄位：類型、能力 / 證據、狀態。
+- 既有 5 筆已上線能力與 5 筆待推進缺口仍保留連結與 live detail，不新增假資料。
+- mobile 改為垂直 row layout，保留狀態色條與 badge，不使用水平 scroll。
+- 補 `zh-TW` / `en` i18n：`dashboard.automationDelivery.matrix.*`。
+
+**本機驗證**：
+- JSON / i18n parity：`json ok`、`i18n parity ok`。
+- `pnpm --dir apps/web exec tsc --noEmit --tsBuildInfoFile /tmp/home-delivery-matrix-20260604.tsbuildinfo`：通過。
+- `NEXT_PUBLIC_API_URL=https://awoooi.wooo.work NEXT_PRIVATE_BUILD_WORKER_COUNT=1 SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1 pnpm --dir apps/web run build`：通過；首頁 route size `33.6 kB`。
+- Playwright local production preview `localhost:3115`：
+  - desktop 1440x1100：矩陣存在、類型/欄位存在、關鍵列存在、可 scroll、`horizontalOverflow=0`。
+  - mobile 390x844：矩陣存在、類型與關鍵列存在、可 scroll、`horizontalOverflow=0`。
+  - 截圖：`/tmp/awoooi-home-matrix-desktop-delivery-matrix-local.png`、`/tmp/awoooi-home-matrix-mobile-delivery-matrix-local.png`。
+
+**目前整體進度（本階段完成後）**：
+- 首頁產品化入口：86%；已完成 Command Map 泳道與交付矩陣，仍待把更下方專業圖卡壓成更少層級。
+- Frontend AI provider health readability：88%；本輪未改 provider API。
+- AwoooP Runs route visibility：88%；維持已完成狀態。
+- Work Items route action readability：84%；維持已完成狀態。
+- Frontend design system / visual grammar：52%；矩陣 pattern 已在首頁落地，但尚未抽共用 component 或套到 Alerts / KM / Approvals。
+- 完整 AI Agent 自動化飛輪：69%；本輪改善 operator 理解成本，不代表自動執行成功率提升。
+
 ## 2026-06-04｜首頁 Command Map 泳道式拓樸
 
 **背景**：統帥持續要求前端不要再用大量文字堆疊，要改用圖、表、流程圖、架構圖、拓樸圖，讓 operator 快速理解 AI 自動化現在跑到哪裡、卡在哪裡、下一步誰負責。本輪不新增假數字，沿用既有 production truth-chain / AI route / KM / Ansible / dossier 資料，先把首頁 Command Map 再往產品化視覺前進一格。