From 316eaa4c7de3a9658c16a724fb90c3298ef29d00 Mon Sep 17 00:00:00 2001
From: jasxyz <jas@opinionlabs.xyz>
Date: Wed, 5 Aug 2026 23:08:32 -0700
Subject: [PATCH 1/2] feat: add Market Resolution dashboard page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把設計側完成的 Market Resolution 集中結算頁接進 production：真 @olab/components、
真 token、真 route。資料層仍是 mock（Api.Detail.getResolutionList / DisputeApi 未接），
這一版的目的是讓定稿設計在 production 環境下可被實際檢視與驗證。

內容：
- src/components/ResolutionDashboard/：結算列表 + My Disputes + How it works +
  dispute flow。原本設計 repo 裡的 @olab 轉接層已拆除，全部直接 import
  @olab/components。
- packages/components/.../TextLink/：設計側新增、production 原本沒有的元件，
  以新檔案加入，並在 index.tsx 補一行 export（不動既有元件）。
- src/index.css：補 --font-number（指向既有的 --font-secondary）。設計側以
  font-number 標記所有數字欄位，production 原本沒有這個變數，缺了會靜默失效、
  金額數字全部掉回內文字體。
- src/app/resolution/：route 與 SEO metadata / breadcrumb JSON-LD。

與既有元件的關係：
- ResolutionDashboard/dispute-modal.tsx 是既有 src/components/DisputeModal 的超集，
  多了 marketTitle / subtopic（集中列表頁沒有 market detail 的標題上下文）與
  DisputeUnavailableReason（列表頁才會遇到的搶先 / 視窗關閉）。刻意不覆蓋原元件，
  兩者是否合併留待決定。
- 既有 src/components/MarketResolution 是單一市場的結算時間軸，與本頁互補，未改動。

已驗證：tsc 對本次新增檔案 0 error；dev server 實跑 /resolution，dark / light 兩模式
渲染正常、倒數運作、dispute modal 走得通、font-number 實測解析到 spaceMono。

待確認的唯一視覺偏離：dispute modal 的 textarea placeholder 使用 text-quaternary
取代既有的 raw hex #86868D，兩者非同色。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/TextLink/TextLink.stories.tsx  | 180 +++++
 .../src/components/TextLink/index.tsx         |  89 +++
 packages/components/src/index.tsx             |   1 +
 src/app/resolution/layout.tsx                 |  57 ++
 src/app/resolution/page.tsx                   |  10 +
 .../ResolutionDashboard/countdown-timer.tsx   |  70 ++
 .../dashboard-rows-view.tsx                   | 226 ++++++
 .../ResolutionDashboard/dispute-modal.tsx     | 320 ++++++++
 .../ResolutionDashboard/dispute-table.tsx     | 261 +++++++
 .../how-it-works-dashboard.tsx                | 418 +++++++++++
 .../ResolutionDashboard/leg-derive.ts         | 118 +++
 .../ResolutionDashboard/leg-parts.tsx         | 236 ++++++
 .../ResolutionDashboard/mock-data.ts          | 688 ++++++++++++++++++
 .../ResolutionDashboard/my-disputes-rows.tsx  | 500 +++++++++++++
 .../resolution-list-view.tsx                  | 548 ++++++++++++++
 .../ResolutionDashboard/stage-icons.tsx       | 175 +++++
 .../ResolutionDashboard/step-tabs.tsx         | 152 ++++
 src/index.css                                 |   3 +
 18 files changed, 4052 insertions(+)
 create mode 100644 packages/components/src/components/TextLink/TextLink.stories.tsx
 create mode 100644 packages/components/src/components/TextLink/index.tsx
 create mode 100644 src/app/resolution/layout.tsx
 create mode 100644 src/app/resolution/page.tsx
 create mode 100644 src/components/ResolutionDashboard/countdown-timer.tsx
 create mode 100644 src/components/ResolutionDashboard/dashboard-rows-view.tsx
 create mode 100644 src/components/ResolutionDashboard/dispute-modal.tsx
 create mode 100644 src/components/ResolutionDashboard/dispute-table.tsx
 create mode 100644 src/components/ResolutionDashboard/how-it-works-dashboard.tsx
 create mode 100644 src/components/ResolutionDashboard/leg-derive.ts
 create mode 100644 src/components/ResolutionDashboard/leg-parts.tsx
 create mode 100644 src/components/ResolutionDashboard/mock-data.ts
 create mode 100644 src/components/ResolutionDashboard/my-disputes-rows.tsx
 create mode 100644 src/components/ResolutionDashboard/resolution-list-view.tsx
 create mode 100644 src/components/ResolutionDashboard/stage-icons.tsx
 create mode 100644 src/components/ResolutionDashboard/step-tabs.tsx

diff --git a/packages/components/src/components/TextLink/TextLink.stories.tsx b/packages/components/src/components/TextLink/TextLink.stories.tsx
new file mode 100644
index 0000000..43fd5a9
--- /dev/null
+++ b/packages/components/src/components/TextLink/TextLink.stories.tsx
@@ -0,0 +1,180 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TextLink } from ".";
+import { Icon } from "../Icon";
+
+const meta: Meta<typeof TextLink> = {
+  title: "Components/Atoms/TextLink",
+  component: TextLink,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "文字連結。核心規則：字與底線永遠同色；hover 沿自身色階亮一階（具名 token）；pressed 統一 opacity 80%；inline（句中）常駐底線、standalone（獨立成行）rest 藏線 hover 浮現。有 href 渲染 <a>、無 href 渲染 <button>。規格：docs/live-ds-spec/textlink.md §5。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      description:
+        "quiet＝次要動作（預設）；brand＝品牌色行動；inherit＝跟句色（僅限一般內文句）；entity＝人名/market 名等內容連結",
+      control: { type: "select" },
+      options: ["quiet", "brand", "inherit", "entity"],
+    },
+    context: {
+      description:
+        "inline＝句中（常駐底線）；standalone＝獨立成行（rest 藏線，hover 浮現）。inherit 強制 inline、entity 永遠藏線",
+      control: { type: "select" },
+      options: ["inline", "standalone"],
+    },
+    disabled: {
+      description: "opacity 50% + 不可點（不用 gray-3——TextLink 無背景會與 quiet rest 撞色）",
+      control: { type: "boolean" },
+    },
+    href: {
+      description: "有值渲染 <a>（導航），無值渲染 <button>（動作）",
+      control: { type: "text" },
+    },
+    children: { control: { type: "text" } },
+  },
+  args: {
+    children: "View NO",
+    href: "#",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: { variant: "quiet", context: "inline" },
+};
+
+// ---- Interactive Demo：四個 variant 在真實情境中（真 hover / 按住） ----
+export const InteractiveDemo: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 text-bodyM">
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">quiet · inline（句中／表格）</p>
+        <span className="text-tertiary">
+          Prefer the other side? <TextLink href="#">View NO</TextLink>
+        </span>
+      </div>
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">quiet · standalone（區塊導航）</p>
+        <TextLink href="#" context="standalone">
+          View All
+          <Icon name="chevronRight" size="sm" className="[&_path]:fill-current" />
+        </TextLink>
+      </div>
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">brand · inline</p>
+        <span className="text-tertiary">
+          Points reset weekly. <TextLink href="#" variant="brand">Learn More</TextLink>
+        </span>
+      </div>
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">inherit · inline（法務句）</p>
+        <span className="text-tertiary">
+          By trading, you agree to the <TextLink href="#" variant="inherit">Terms of Use</TextLink> and{" "}
+          <TextLink href="#" variant="inherit">Privacy Policy</TextLink>.
+        </span>
+      </div>
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">entity（人名／market 名）</p>
+        <TextLink href="#" variant="entity">0xJasmine</TextLink>
+      </div>
+      <div>
+        <p className="text-quaternary text-bodyS mb-2">無 href → 渲染 button（動作型，如 Show more）</p>
+        <span className="text-tertiary">
+          <TextLink onClick={() => {}}>Show more</TextLink>
+        </span>
+      </div>
+    </div>
+  ),
+};
+
+// ---- Static State Matrix：hover/pressed 無法靜態觸發，以同 token 的顯式 class 模擬 ----
+const Cell = ({ cls, tok, children }: { cls: string; tok: string; children: React.ReactNode }) => (
+  <td className="border-secondary border p-3 align-middle">
+    <span className={`underline decoration-1 underline-offset-3 ${cls}`}>{children}</span>
+    <span className="text-quaternary mt-1.5 block font-mono text-[10px]/[14px]">{tok}</span>
+  </td>
+);
+
+export const StaticStateMatrix: Story = {
+  render: () => (
+    <table className="text-bodyM border-collapse">
+      <thead>
+        <tr>
+          {["variant × context", "rest", "hover", "pressed", "disabled"].map((h) => (
+            <th key={h} className="border-secondary text-quaternary text-bodyS border p-3 text-left font-normal">
+              {h}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className="border-secondary text-tertiary text-bodyS border p-3">quiet · inline</td>
+          <Cell cls="text-tertiary decoration-text-tertiary" tok="字＋線 text-tertiary">View NO</Cell>
+          <Cell cls="text-secondary decoration-text-secondary" tok="字＋線 text-secondary">View NO</Cell>
+          <Cell cls="text-secondary decoration-text-secondary opacity-80" tok="text-secondary + opacity 80%">View NO</Cell>
+          <Cell cls="text-tertiary decoration-text-tertiary opacity-50" tok="text-tertiary + opacity 50%">View NO</Cell>
+        </tr>
+        <tr>
+          <td className="border-secondary text-tertiary text-bodyS border p-3">quiet · standalone</td>
+          <Cell cls="text-tertiary decoration-transparent font-medium" tok="字 text-tertiary／線 transparent">View All</Cell>
+          <Cell cls="text-secondary decoration-text-secondary font-medium" tok="字＋線 text-secondary">View All</Cell>
+          <Cell cls="text-secondary decoration-text-secondary font-medium opacity-80" tok="text-secondary + opacity 80%">View All</Cell>
+          <Cell cls="text-tertiary decoration-transparent font-medium opacity-50" tok="text-tertiary／線 transparent + opacity 50%">View All</Cell>
+        </tr>
+        <tr>
+          <td className="border-secondary text-tertiary text-bodyS border p-3">brand · inline</td>
+          <Cell cls="text-brand-secondary decoration-text-brand-secondary" tok="字＋線 text-brand-secondary（= brand-600）">Learn More</Cell>
+          <Cell cls="text-brand-500 decoration-brand-500" tok="字＋線 brand-500">Learn More</Cell>
+          <Cell cls="text-brand-500 decoration-brand-500 opacity-80" tok="brand-500 + opacity 80%">Learn More</Cell>
+          <Cell cls="text-brand-secondary decoration-text-brand-secondary opacity-50" tok="text-brand-secondary + opacity 50%">Learn More</Cell>
+        </tr>
+        <tr>
+          <td className="border-secondary text-tertiary text-bodyS border p-3">entity</td>
+          <Cell cls="text-primary decoration-transparent font-medium" tok="字 text-primary／線 transparent">0xJasmine</Cell>
+          <Cell cls="text-primary decoration-text-primary font-medium" tok="字＋線 text-primary">0xJasmine</Cell>
+          <Cell cls="text-primary decoration-text-primary font-medium opacity-80" tok="text-primary + opacity 80%">0xJasmine</Cell>
+          <Cell cls="text-primary decoration-transparent font-medium opacity-50" tok="text-primary／線 transparent + opacity 50%">0xJasmine</Cell>
+        </tr>
+        <tr>
+          <td className="border-secondary text-tertiary text-bodyS border p-3">inherit · inline（法務句）</td>
+          <Cell cls="text-tertiary decoration-current" tok="字＋線 currentColor（此句 = text-tertiary）">Terms of Use</Cell>
+          <Cell cls="text-secondary decoration-text-secondary" tok="字＋線 text-secondary">Terms of Use</Cell>
+          <Cell cls="text-secondary decoration-text-secondary opacity-80" tok="text-secondary + opacity 80%">Terms of Use</Cell>
+          <Cell cls="text-tertiary decoration-current opacity-50" tok="currentColor + opacity 50%">Terms of Use</Cell>
+        </tr>
+      </tbody>
+    </table>
+  ),
+};
+
+// ---- 範圍劃界：dotted ≠ 連結（tooltip 觸發器專用，cursor 是 help） ----
+export const DottedIsNotALink: Story = {
+  render: () => (
+    <div className="text-bodyM flex flex-col gap-3" style={{ maxWidth: 360 }}>
+      <div className="flex justify-between">
+        <span className="text-tertiary cursor-help underline decoration-dotted decoration-1 underline-offset-2" title="Average cost per share, including fees.">
+          Avg. Cost
+        </span>
+        <span className="text-primary tabular-nums">62.4¢</span>
+      </div>
+      <div className="flex justify-between border-t border-secondary pt-3">
+        <span className="text-tertiary">
+          Wrong side? <TextLink href="#">View NO</TextLink>
+        </span>
+        <TextLink href="#" context="standalone">
+          View All
+          <Icon name="chevronRight" size="sm" className="[&_path]:fill-current" />
+        </TextLink>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/components/src/components/TextLink/index.tsx b/packages/components/src/components/TextLink/index.tsx
new file mode 100644
index 0000000..8ebfd45
--- /dev/null
+++ b/packages/components/src/components/TextLink/index.tsx
@@ -0,0 +1,89 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { memo } from "react";
+import cn from "classnames";
+
+type TextLinkVariant = "quiet" | "brand" | "inherit" | "entity";
+type TextLinkContext = "inline" | "standalone";
+
+export interface TextLinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+  variant?: TextLinkVariant;
+  context?: TextLinkContext;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+// Spec: docs/live-ds-spec/textlink.md §5（2026-07-16/17 拍板）。
+// 核心規則：字與底線永遠同色；hover 沿自身色階亮一階（具名 token，禁濾鏡算色）；
+// pressed 統一 opacity 80%；inline 常駐底線、standalone rest 藏線 hover 浮現。
+const variantClasses = {
+  quiet:
+    "text-tertiary hover:text-secondary hover:decoration-text-secondary",
+  brand:
+    "text-brand-secondary hover:text-brand-500 hover:decoration-brand-500",
+  // inherit 僅限一般內文句（法務句）；有色表面另案（見 spec §5.2）
+  inherit: "hover:text-secondary hover:decoration-text-secondary",
+  // entity 字已是 primary 頂階：hover 只浮現同色底線
+  entity: "text-primary font-medium hover:decoration-text-primary",
+};
+
+const restDecorationClasses = {
+  quiet: "decoration-text-tertiary",
+  brand: "decoration-text-brand-secondary",
+  inherit: "decoration-current",
+  entity: "decoration-transparent",
+};
+
+const TextLink = memo(function TextLink({
+  variant = "quiet",
+  context = "inline",
+  disabled = false,
+  href,
+  className,
+  children,
+  ...otherProps
+}: TextLinkProps) {
+  // inherit 跟隨句子，只允許句中使用；entity rest 藏線與 standalone 同邏輯
+  const resolvedContext = variant === "inherit" ? "inline" : context;
+  const hiddenRestUnderline =
+    resolvedContext === "standalone" || variant === "entity";
+
+  const classes = cn(
+    "cursor-pointer underline decoration-1 underline-offset-3 transition-normal active:opacity-80",
+    variantClasses[variant],
+    hiddenRestUnderline
+      ? "decoration-transparent"
+      : restDecorationClasses[variant],
+    resolvedContext === "standalone" &&
+      "inline-flex items-center gap-1 font-medium",
+    disabled && "opacity-50 pointer-events-none cursor-default",
+    className
+  );
+
+  // 導航（有 href）→ <a>；動作 → <button>。禁止消費端用 div+onClick 模擬。
+  if (href) {
+    return (
+      <a
+        href={disabled ? undefined : href}
+        className={classes}
+        aria-disabled={disabled || undefined}
+        {...otherProps}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      disabled={disabled}
+      {...(otherProps as object)}
+    >
+      {children}
+    </button>
+  );
+});
+
+export { TextLink };
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 8e22a97..76dfd4b 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -20,6 +20,7 @@ export * from "./components/Spinner";
 export * from "./components/Switch";
 export * from "./components/Table";
 export * from "./components/Tabs";
+export * from "./components/TextLink";
 export * from "./components/Toast";
 export * from "./components/Typography";
 export * from "./components/Tooltip";
diff --git a/src/app/resolution/layout.tsx b/src/app/resolution/layout.tsx
new file mode 100644
index 0000000..4a53dc6
--- /dev/null
+++ b/src/app/resolution/layout.tsx
@@ -0,0 +1,57 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "OPINION | Market Resolution",
+  description:
+    "Track how OPINION Prediction Markets settle: proposed outcomes, dispute windows, committee review, and payouts.",
+  openGraph: {
+    title: "OPINION | Market Resolution",
+    description:
+      "Track how OPINION Prediction Markets settle: proposed outcomes, dispute windows, committee review, and payouts.",
+  },
+  twitter: {
+    title: "OPINION | Market Resolution",
+    description:
+      "Track how OPINION Prediction Markets settle: proposed outcomes, dispute windows, committee review, and payouts.",
+    card: "summary_large_image",
+    site: "@opinionlabsxyz",
+  },
+  alternates: {
+    canonical: "/resolution",
+  },
+};
+
+const breadcrumbJsonLd = {
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  itemListElement: [
+    {
+      "@type": "ListItem",
+      position: 1,
+      name: "Home",
+      item: "https://app.opinion.trade",
+    },
+    {
+      "@type": "ListItem",
+      position: 2,
+      name: "Market Resolution",
+      item: "https://app.opinion.trade/resolution",
+    },
+  ],
+};
+
+export default function ResolutionLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
+      />
+      {children}
+    </>
+  );
+}
diff --git a/src/app/resolution/page.tsx b/src/app/resolution/page.tsx
new file mode 100644
index 0000000..981e801
--- /dev/null
+++ b/src/app/resolution/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+// Market Resolution 集中結算頁。目前接的是 ResolutionDashboard/mock-data 的假資料，
+// 資料層（Api.Detail.getResolutionList / DisputeApi）尚未接上——這一版的目的是讓
+// 設計稿在 production 環境與真 @olab 元件、真 token 下跑起來可被檢視。
+import { DashboardRowsView } from "@/components/ResolutionDashboard/dashboard-rows-view";
+
+export default function ResolutionPage() {
+  return <DashboardRowsView />;
+}
diff --git a/src/components/ResolutionDashboard/countdown-timer.tsx b/src/components/ResolutionDashboard/countdown-timer.tsx
new file mode 100644
index 0000000..40f37e2
--- /dev/null
+++ b/src/components/ResolutionDashboard/countdown-timer.tsx
@@ -0,0 +1,70 @@
+
+// Vendored verbatim from OpinionLabs/frontend src/components/ResolutionCard/CountdownTimer.tsx。
+import React, { useEffect, useState } from "react";
+import { MediumText, SmallText, Text } from "@olab/components";
+
+interface CountdownTimerProps {
+    deadlineTimestamp: number; // Unix timestamp in seconds
+    /**
+     * 與 production 的第二處偏離（2026-08-05 user 裁決）：多一個 `medium`（14px /
+     * MediumText）。production 只有 12px 與 16px 兩種，因為它只出現在單一結算卡上；
+     * 表格的儲存格一律 14px，倒數混一個 12px 進去會讓那一欄看起來比別欄小一號。
+     * 沿用 size prop 而不是在呼叫端用 className 蓋——字級綁在 Typography 元件上，
+     * 同權重的 className 不保證蓋得過。
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * 與 production 的唯一偏離：production 的倒數永遠是 warning 色，因為它只出現在
+     * 單一市場的結算卡上——那裡沒有別的倒數可比。集中列表頁一次列出幾十個窗，
+     * 「還有兩天」與「還有 40 秒」用同一個顏色講，等於沒講。urgent 由呼叫端依
+     * 各自階段的門檻決定（列表用最後一小時），元件不自己猜。
+     */
+    tone?: "default" | "urgent";
+}
+
+export const CountdownTimer: React.FC<CountdownTimerProps> = ({ deadlineTimestamp, size = "small", tone = "default" }) => {
+    const [timeLeft, setTimeLeft] = useState("");
+
+    useEffect(() => {
+        const calculateTimeLeft = () => {
+            const difference = deadlineTimestamp * 1000 - Date.now();
+
+            if (difference <= 0) {
+                return "0h 0m 0s";
+            }
+
+            const hours = Math.floor(difference / (1000 * 60 * 60));
+            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+
+            const parts = [];
+            if (hours > 0) parts.push(`${hours}h`);
+            if (minutes > 0 || hours > 0) parts.push(`${minutes}m`);
+            parts.push(`${seconds}s`);
+
+            return parts.join(" ");
+        };
+
+        setTimeLeft(calculateTimeLeft());
+
+        const timer = setInterval(() => {
+            const newTimeLeft = calculateTimeLeft();
+            setTimeLeft(newTimeLeft);
+
+            if (newTimeLeft === "0h 0m 0s") {
+                clearInterval(timer);
+            }
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [deadlineTimestamp]);
+
+    // tabular-nums 讓每秒換一次的數字不橫向抖動（font-variant-numeric 會繼承，
+    // 所以不必動 vendored 的 Typography 元件本身）。
+    const toneClass = tone === "urgent" ? "text-error-solid" : "text-warning-solid";
+
+    const className = `${toneClass} tabular-nums whitespace-nowrap`;
+
+    if (size === "medium") return <MediumText className={className}>{timeLeft}</MediumText>;
+    return size === "small" ? <SmallText className={className}>{timeLeft}</SmallText> : <Text className={className}>{timeLeft}</Text>;
+};
diff --git a/src/components/ResolutionDashboard/dashboard-rows-view.tsx b/src/components/ResolutionDashboard/dashboard-rows-view.tsx
new file mode 100644
index 0000000..8329540
--- /dev/null
+++ b/src/components/ResolutionDashboard/dashboard-rows-view.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+
+// Market Resolution 定案組合的完整頁：HowItWorksDashboard 在最上、MyDisputesRows
+// 居中、公開列表（All Proposals = ResolutionListView）在最下——2026-08-04 與 PM
+// 收斂後的頁面順序，三段共用同一份 mock legs，一份資料不會兩邊各說各話。
+//
+// 抽出來的理由：同一份組合要出現在三個地方——/live 的 preview（DS 殼內）、
+// /standalone（1440 走查）、/demo（production chrome）。demo 的互動邏輯
+// （tick、帳號情境、dispute 提交、Claim 之後真的搬走）只能寫一份，三個殼各自
+// 包自己的 chrome。
+//
+// dispute flow 走得完（可分享 demo 的底線）：公開列表按 Dispute → vendored
+// production DisputeModal → 提交後該腿進 in_review 且掛在 CURRENT_USER_ADDRESS
+// 名下，馬上出現在上面的 My Disputes。
+//
+// 情境切換用 key 重掛（initialScenario 變 → 整組 state 重來）：情境是「換一個
+// 人的帳號」，不是同一個人的 state transition，殘留的 claimedIds 反而是 bug。
+import { useEffect, useMemo, useRef, useState } from "react";
+import { H1, H3 } from "@olab/components";
+import { DisputeModal, type DisputeType } from "./dispute-modal";
+import { HowItWorksDashboard } from "./how-it-works-dashboard";
+import { MyDisputesRows } from "./my-disputes-rows";
+import { ResolutionListView } from "./resolution-list-view";
+import { advanceLeg } from "./leg-derive";
+import {
+    AVAILABLE_BALANCE,
+    CURRENT_USER_ADDRESS,
+    MOCK_NOW,
+    RESOLUTION_LEGS,
+    type DisputeKind,
+    type ResolutionLeg,
+    formatOpn,
+} from "./mock-data";
+
+// 與 split page 同值：審理窗 mock 為 48h（真值是鏈上合約參數，PRD §7）
+const REVIEW_WINDOW_SECONDS = 48 * 3600;
+
+// PRD §6 的四個帳號狀態。playground 用四份 mock 切換；這裡從同一份
+// RESOLUTION_LEGS 推導——none 換一個沒有卷宗的地址、allclaimed 把可領的標成
+// 已領、審理中的讓給別人，資料只有一份，不會兩邊各說各話。
+export type DashboardRowsScenario = "signedout" | "none" | "claimable" | "allclaimed";
+
+export const DASHBOARD_ROWS_SCENARIOS: { key: DashboardRowsScenario; label: string }[] = [
+    { key: "signedout", label: "Signed out" },
+    { key: "none", label: "No disputes" },
+    { key: "claimable", label: "Has claimable" },
+    { key: "allclaimed", label: "All claimed" },
+];
+
+export const parseDashboardRowsScenario = (value: string | null): DashboardRowsScenario =>
+    DASHBOARD_ROWS_SCENARIOS.some(({ key }) => key === value) ? (value as DashboardRowsScenario) : "claimable";
+
+const NOBODY = "0x0000000000000000000000000000000000000000";
+
+export const toAllClaimed = (legs: ResolutionLeg[]): ResolutionLeg[] =>
+    legs.map((leg) => {
+        if (leg.disputor?.toLowerCase() !== CURRENT_USER_ADDRESS.toLowerCase()) return leg;
+        if (leg.stage === "in_review") return { ...leg, disputor: NOBODY };
+        if (leg.disputeResult === "accepted" && !leg.claimed) return { ...leg, claimed: true };
+        return leg;
+    });
+
+interface LocalDispute {
+    kind: DisputeKind;
+    reason: string;
+    at: number;
+}
+
+export interface DashboardRowsViewProps {
+    initialScenario?: DashboardRowsScenario;
+    /** 真資料唯讀模式：Claim / Dispute 停用加 tooltip */
+    readOnly?: boolean;
+}
+
+export function DashboardRowsView({ initialScenario = "claimable", readOnly = false }: DashboardRowsViewProps) {
+    const [scenario, setScenario] = useState<DashboardRowsScenario>(initialScenario);
+    const [claimedIds, setClaimedIds] = useState<Set<string>>(new Set());
+    const [localDisputes, setLocalDisputes] = useState<Record<string, LocalDispute>>({});
+    const listRef = useRef<HTMLDivElement>(null);
+
+    // 從 MOCK_NOW 起 tick：Dashboard 的倒數要會動、倒數歸零的腿要真的進下一階段
+    const [now, setNow] = useState(MOCK_NOW);
+    useEffect(() => {
+        const timer = setInterval(() => setNow((prev) => prev + 1), 1000);
+        return () => clearInterval(timer);
+    }, []);
+
+    // 順序：情境底稿 → 本地提交覆寫 → 倒數推進（advanceLeg）→ 已領。
+    // 「已領」必須在 advanceLeg 之後——它的 in_review → finalized 分支寫死
+    // claimed: false，反過來套會把剛按的 Claim 蓋掉（split page 同一條註解）。
+    const legs = useMemo(() => {
+        const base = scenario === "allclaimed" ? toAllClaimed(RESOLUTION_LEGS) : RESOLUTION_LEGS;
+        return base.map((leg) => {
+            const local = localDisputes[leg.id];
+            const withLocal: ResolutionLeg = local
+                ? {
+                      ...leg,
+                      stage: "in_review",
+                      disputor: CURRENT_USER_ADDRESS,
+                      disputeKind: local.kind,
+                      disputeReason: local.reason,
+                      stakedAmount: leg.requiredStake,
+                      reviewEndsAt: local.at + REVIEW_WINDOW_SECONDS,
+                      enteredStageAt: local.at,
+                      raceLost: false,
+                  }
+                : leg;
+            const advanced = advanceLeg(withLocal, now);
+            return claimedIds.has(leg.id) ? { ...advanced, claimed: true } : advanced;
+        });
+    }, [scenario, localDisputes, claimedIds, now]);
+
+    const claim = (targets: ResolutionLeg[]) =>
+        setClaimedIds((prev) => {
+            const next = new Set(prev);
+            targets.forEach((leg) => next.add(leg.id));
+            return next;
+        });
+
+    // 公開列表就在同一頁下面：See all proposals 捲過去，不再開新分頁
+    const browse = () => listRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+
+    // ── Dispute modal（vendored production 組件；mock flow 要走得完）──────────
+    const [disputeTargetId, setDisputeTargetId] = useState<string | null>(null);
+    const [isAuthorized, setIsAuthorized] = useState(false);
+    const [isAuthorizing, setIsAuthorizing] = useState(false);
+    const disputeTarget = disputeTargetId ? (legs.find((leg) => leg.id === disputeTargetId) ?? null) : null;
+
+    // ⚠ @olab Modal 既有缺陷（open=false 直接 return null，preventScroll 清理跑
+    // 不到）：關閉後 body 卡 overflow:hidden。元件層問題，這裡只善後（split 同款）。
+    useEffect(() => {
+        if (disputeTargetId) return;
+        document.body.style.removeProperty("overflow");
+        document.body.style.removeProperty("pointer-events");
+    }, [disputeTargetId]);
+
+    // modal 開著的時候 window 也可能關掉（§4.4）——即時算，畫面當場換成說明
+    const unavailableReason =
+        disputeTarget && (disputeTarget.stage !== "proposed" || (disputeTarget.windowEndsAt ?? 0) <= now)
+            ? ("window_closed" as const)
+            : undefined;
+
+    const openDispute = (leg: ResolutionLeg) => {
+        setIsAuthorized(false);
+        setIsAuthorizing(false);
+        setDisputeTargetId(leg.id);
+    };
+
+    const handleAuthorize = () => {
+        setIsAuthorizing(true);
+        setTimeout(() => {
+            setIsAuthorizing(false);
+            setIsAuthorized(true);
+        }, 900);
+    };
+
+    const handleSubmitDispute = async (kind: DisputeType, reason: string) => {
+        const target = disputeTarget;
+        if (!target) return;
+        await new Promise((resolve) => setTimeout(resolve, 900));
+        setLocalDisputes((prev) => ({ ...prev, [target.id]: { kind, reason, at: now } }));
+        setDisputeTargetId(null);
+        // 提交完的人要追的是「我這筆」——捲回上面的 My Disputes
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
+    const isConnected = scenario !== "signedout";
+
+    return (
+        <div className="flex flex-col gap-8">
+            {/* 頁面標題在卡片外（2026-08-04 user 裁決）：它是這一頁的名字，不是這張
+                卡的標題——放進卡裡會讀成「這張卡叫 Market Resolution」。
+                標題與它所屬的卡片自成一組（gap 16），不吃外層 section 之間的 32。 */}
+            <div className="flex flex-col gap-4">
+                <H1 className="text-primary font-bold">Market Resolution</H1>
+                {/* walkthrough：brand 框每 5 秒走一站，把三站的流程講給第一次看的人
+                    （2026-08-04 user 裁決選定 slide 版） */}
+                <HowItWorksDashboard legs={legs} now={now} walkthrough />
+            </div>
+            <MyDisputesRows
+                legs={legs}
+                isConnected={isConnected}
+                disputorAddress={scenario === "none" ? NOBODY : CURRENT_USER_ADDRESS}
+                readOnly={readOnly}
+                // 模擬登入：demo 不帶錢包也要能走完流程，Sign In 直接換上模擬身分
+                onSignIn={() => setScenario("claimable")}
+                onBrowse={browse}
+                onView={() => {}}
+                onClaim={(leg) => claim([leg])}
+                onClaimAll={claim}
+            />
+
+            {/* 公開列表：與 My Disputes 同一層級的區塊標題，內容 = 定案的 v2 公開列表組件 */}
+            <div ref={listRef} className="flex scroll-mt-6 flex-col gap-4">
+                {/* 副標（N inside their dispute window）已刪（2026-08-04 user 裁決）：
+                    StepTabs 的 Proposed (N) 已經是同一個數字。 */}
+                <div className="flex items-baseline gap-2">
+                    <H3 className="text-primary font-bold">All Proposals</H3>
+                </div>
+                <ResolutionListView legs={legs} now={now} isConnected={isConnected} onDispute={openDispute} />
+            </div>
+
+            {disputeTarget ? (
+                <DisputeModal
+                    isOpen
+                    onClose={() => setDisputeTargetId(null)}
+                    marketTitle={disputeTarget.marketTitle}
+                    subtopic={disputeTarget.subtopic}
+                    stakeAmount={formatOpn(disputeTarget.requiredStake)}
+                    rewardAmount={formatOpn(disputeTarget.potentialReward)}
+                    currencySymbol="OPN"
+                    availableBalance={String(AVAILABLE_BALANCE)}
+                    userAddress={CURRENT_USER_ADDRESS}
+                    isAuthorized={isAuthorized}
+                    isInsufficientBalance={disputeTarget.requiredStake > AVAILABLE_BALANCE}
+                    isAuthorizing={isAuthorizing}
+                    unavailableReason={unavailableReason}
+                    onAuthorize={handleAuthorize}
+                    onSubmit={handleSubmitDispute}
+                    onAddFunds={() => {}}
+                />
+            ) : null}
+        </div>
+    );
+}
diff --git a/src/components/ResolutionDashboard/dispute-modal.tsx b/src/components/ResolutionDashboard/dispute-modal.tsx
new file mode 100644
index 0000000..4fdfdb3
--- /dev/null
+++ b/src/components/ResolutionDashboard/dispute-modal.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+// 集中結算列表頁專用的 dispute modal —— 是 src/components/DisputeModal 的超集。
+// 相對於既有 DisputeModal 多出兩件事，兩者未來可考慮合併：
+// ① marketTitle / subtopic：market detail 頁的標題就在背景裡，集中列表頁沒有這個
+//    上下文，所以 modal 內要自己補一行；
+// ② DisputeUnavailableReason：列表頁才會遇到「開著 modal 的那幾秒輸掉」的狀況。
+//
+// 唯一刻意保留的視覺偏離：placeholder 用 text-quaternary 取代既有的 raw hex
+// #86868D（兩者非同色，待確認後決定是否統一）。
+import React, { useState } from "react";
+import { Button, CryptoIcon, H2, Icon, Inline, MediumText, Modal, SmallText, Stack, Text } from "@olab/components";
+import { formatNumber, truncateTextMid } from "@/utils/format";
+import BigNumber from "bignumber.js";
+import cn from "classnames";
+
+export type DisputeType = "incorrect_outcome" | "too_early";
+
+/**
+ * 為什麼會打不開表單：一個 resolution 只能被 dispute 一次，所以在集中列表頁
+ * 「開著 modal 的那幾秒」是真的會輸掉的——別人可能剛提交，或 window 剛關。
+ * 這兩件事讀者的下一步不同（前者去看審理進度、後者這場已經沒了），所以分兩種
+ * 原因，不共用一句「無法提交」。
+ */
+export type DisputeUnavailableReason = "taken" | "window_closed";
+
+const formatAmount = (value: string) => formatNumber(BigNumber(value), { average: false });
+
+export interface DisputeModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+
+    // Data props
+    /** 被 dispute 的 market 名稱（production 的 modal 從 market detail page 開啟，
+        標題就在背景裡；集中列表頁沒有這個上下文，所以標題底下補一行） */
+    marketTitle?: string;
+    /** multi-choice market 的子話題（腿）；binary 為 null */
+    subtopic?: string | null;
+    stakeAmount: string; // e.g., "800"
+    rewardAmount: string; // e.g., "800"
+    currencySymbol: string; // e.g., "USDT"
+    availableBalance: string; // e.g., "400"
+    userAddress?: string;
+
+    // Authorization State
+    isAuthorized: boolean;
+    isInsufficientBalance: boolean;
+
+    // Tx loading states
+    isAuthorizing?: boolean;
+    isDisputing?: boolean;
+
+    /** 有值時整個表單換成「這場已經不能提了」的說明 + 返回路徑 */
+    unavailableReason?: DisputeUnavailableReason;
+
+    // Actions
+    onAuthorize: () => void;
+    onSubmit: (type: DisputeType, reason: string) => Promise<void>;
+    onAddFunds: () => void;
+}
+
+export const DisputeModal: React.FC<DisputeModalProps> = ({
+    isOpen,
+    onClose,
+    marketTitle,
+    subtopic,
+    stakeAmount,
+    rewardAmount,
+    currencySymbol = "OPN",
+    availableBalance,
+    isAuthorized,
+    isInsufficientBalance,
+    isAuthorizing = false,
+    isDisputing = false,
+    unavailableReason,
+    onAuthorize,
+    onSubmit,
+    userAddress,
+}) => {
+    const [selectedType, setSelectedType] = useState<DisputeType>("incorrect_outcome");
+    const [reason, setReason] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const MAX_CHAR_COUNT = 1000;
+    const charsRemaining = MAX_CHAR_COUNT - reason.length;
+
+    const handleSubmit = async () => {
+        if (isInsufficientBalance || !isAuthorized || !reason.trim()) return;
+        setIsSubmitting(true);
+        try {
+            await onSubmit(selectedType, reason);
+            onClose?.();
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const isSubmitLoading = isSubmitting || isDisputing;
+
+    const isSubmitDisabled = isInsufficientBalance || !isAuthorized || reason.trim().length === 0 || isSubmitLoading;
+
+    // Render Tabs
+    const renderTab = (type: DisputeType, label: string) => {
+        const isActive = selectedType === type;
+        const baseClass =
+            "flex h-8 items-center justify-center rounded-full px-4 text-[14px]/[20px] transition-all cursor-pointer";
+        const activeClass = "bg-brand-2 text-brand-secondary"; // Equivalent to bg-brand-solid/20
+        const inactiveClass = "bg-secondary text-tertiary hover:bg-white-16";
+
+        return (
+            <div className={cn(baseClass, isActive ? activeClass : inactiveClass)} onClick={() => setSelectedType(type)}>
+                {label}
+            </div>
+        );
+    };
+
+    // 提交路徑已經關掉時，表單整塊換成說明——留著一張填不出結果的表單，讀者會
+    // 以為是自己哪裡填錯。標題直接講狀態，內文講「為什麼」與「還能做什麼」。
+    if (unavailableReason) {
+        const copy =
+            unavailableReason === "taken"
+                ? {
+                      title: "Someone disputed this first",
+                      body: "Each resolution can only be disputed once, and another wallet submitted a dispute for this outcome moments ago. It has moved to committee review — nothing was staked from your wallet.",
+                  }
+                : {
+                      title: "The dispute window closed",
+                      body: "This market's dispute window ended while this dialog was open. The proposed outcome will finalize as published, and nothing was staked from your wallet.",
+                  };
+
+        return (
+            <Modal
+                open={isOpen}
+                onClose={onClose}
+                closable={true}
+                width="600px"
+                classNames={{
+                    content: "p-6 bg-primary border-white-05 rounded-[16px]",
+                }}
+            >
+                <Stack className="gap-6">
+                    <Stack className="gap-4">
+                        <div className="bg-warning-solid flex size-10 items-center justify-center rounded-full">
+                            <Icon name="alertTriangle" size="24px" className="[--icon-color:var(--color-black)]" />
+                        </div>
+                        <Stack className="gap-1">
+                            <H2 className="text-primary font-bold">{copy.title}</H2>
+                            {marketTitle ? (
+                                <MediumText className="text-tertiary">
+                                    {marketTitle}
+                                    {subtopic ? ` · ${subtopic}` : ""}
+                                </MediumText>
+                            ) : null}
+                        </Stack>
+                    </Stack>
+
+                    <MediumText className="text-primary">{copy.body}</MediumText>
+
+                    <div className="bg-tertiary h-px w-full" />
+
+                    <Inline className="items-center justify-end">
+                        <Button size="lg" skin="secondary" onClick={onClose}>
+                            Back to list
+                        </Button>
+                    </Inline>
+                </Stack>
+            </Modal>
+        );
+    }
+
+    return (
+        <Modal
+            open={isOpen}
+            onClose={onClose}
+            closable={true}
+            width="600px"
+            classNames={{
+                content: "p-6 bg-primary border-white-05 rounded-[16px]", // 24px padding matching Figma
+            }}
+        >
+            <Stack className="gap-6">
+                {/* Header */}
+                <Stack className="gap-1">
+                    <H2 className="text-primary font-bold">Dispute Proposal</H2>
+                    {marketTitle ? (
+                        <MediumText className="text-tertiary">
+                            {marketTitle}
+                            {/* 分隔用 · 不用 —：市場名本身就常含 em dash（"NBA Finals 2026 — series
+                                winner"），再接一個 — 會讀成同一句話的第三段 */}
+                            {subtopic ? ` · ${subtopic}` : ""}
+                        </MediumText>
+                    ) : null}
+                </Stack>
+
+                {/* Dispute Type Selection */}
+                <Stack className="gap-3">
+                    <Text className="text-primary font-medium">1. Choose dispute type</Text>
+                    <Inline className="border-secondary mt-0.5 items-center gap-1 rounded-full border p-1 *:flex-1">
+                        {renderTab("incorrect_outcome", "Incorrect outcome")}
+                        {renderTab("too_early", "Too early to resolve")}
+                    </Inline>
+                </Stack>
+
+                {/* Reason Textarea */}
+                <Stack className="gap-1.5">
+                    <Text className="text-primary font-medium">2. Enter reason for dispute</Text>
+                    <Stack className="mt-0.5 gap-1.5">
+                        <textarea
+                            className="bg-secondary focus:border-secondary text-primary placeholder:text-quaternary h-[120px] w-full resize-none rounded-[12px] border border-transparent p-[12px_14px] text-[14px]/[20px] transition-colors outline-none"
+                            placeholder="Briefly explain why this resolution is incorrect or premature. Include links or data sources if possible."
+                            value={reason}
+                            onChange={(e) => setReason(e.target.value.slice(0, MAX_CHAR_COUNT))}
+                        />
+                        <SmallText className="text-secondary self-start">
+                            {charsRemaining}/{MAX_CHAR_COUNT} characters left
+                        </SmallText>
+                    </Stack>
+                </Stack>
+
+                {/* Review Stake & Reward section */}
+                <Stack className="gap-2">
+                    <Inline className="w-full items-center justify-between">
+                        <Text className="text-primary font-medium">3. Review stake &amp; reward amount</Text>
+                        {!isAuthorized && !isInsufficientBalance && (
+                            <Button size="sm" skin="brand-subtle" onClick={onAuthorize} disabled={isAuthorizing} loading={isAuthorizing}>
+                                Authorize Stake
+                            </Button>
+                        )}
+                    </Inline>
+
+                    <MediumText className="text-tertiary">
+                        The stake will be deducted from your connected wallet ({userAddress ? truncateTextMid(userAddress, 6, 4) : ""}
+                        ), where rewards will also be distributed.
+                    </MediumText>
+
+                    <Stack className="bg-white-04 mt-1 gap-5 rounded-[12px] p-4">
+                        {/* Stake Amount Data */}
+                        <Inline className="items-start justify-between">
+                            <Stack className="max-w-[70%] gap-1">
+                                <Inline className="items-center gap-1">
+                                    <MediumText className="text-primary">Stake Amount</MediumText>
+                                    <a href="https://docs.opinion.trade/trade-on-opinion.trade/dispute" target="_blank" rel="noopener noreferrer">
+                                        <Icon name="helpCircle" size="sm" className="cursor-pointer [--icon-color:var(--color-text-tertiary)]" />
+                                    </a>
+                                </Inline>
+                                <SmallText className="text-tertiary">Your stake will not be refunded if your dispute is rejected.</SmallText>
+                            </Stack>
+                            <Inline className="shrink-0 items-center gap-1">
+                                <CryptoIcon name="OPN" className="size-4" />
+                                <Text className="font-monospace text-primary">{stakeAmount}</Text>
+                                <Text>{currencySymbol}</Text>
+                            </Inline>
+                        </Inline>
+
+                        {/* Reward Amount Data */}
+                        <Inline className="items-start justify-between">
+                            <Stack className="max-w-[70%] gap-1">
+                                <Inline className="items-center gap-1">
+                                    <MediumText className="text-primary">Reward Amount</MediumText>
+                                    <a href="https://docs.opinion.trade/trade-on-opinion.trade/dispute" target="_blank" rel="noopener noreferrer">
+                                        <Icon name="helpCircle" size="sm" className="cursor-pointer [--icon-color:var(--color-text-tertiary)]" />
+                                    </a>
+                                </Inline>
+                                <SmallText className="text-tertiary">Additional reward if your dispute is successful.</SmallText>
+                            </Stack>
+                            <Inline className="shrink-0 items-center gap-1">
+                                <CryptoIcon name="OPN" className="size-4" />
+                                <Text className="font-monospace text-primary">{rewardAmount}</Text>
+                                <Text>{currencySymbol}</Text>
+                            </Inline>
+                        </Inline>
+                    </Stack>
+
+                    {/* Insufficient Balance Alert */}
+                    <Inline className="w-full items-center justify-between">
+                        {isInsufficientBalance ? (
+                            <>
+                                <Inline className="items-center gap-2">
+                                    <Icon name="alertTriangle" size="sm" className="icon-currentcolor text-error-solid" />
+                                    <MediumText className="text-primary">
+                                        Insufficient balance. Available:{" "}
+                                        <span className="text-error-solid">
+                                            {formatAmount(availableBalance)} {currencySymbol}
+                                        </span>
+                                    </MediumText>
+                                </Inline>
+                                <Button
+                                    size="sm"
+                                    skin="brand-subtle"
+                                    onClick={() => {
+                                        window.open("https://www.binance.com/en/trade/OPN_USDT", "_blank");
+                                    }}
+                                >
+                                    Buy OPN
+                                </Button>
+                            </>
+                        ) : (
+                            <MediumText className="text-primary">
+                                Available balance: {formatAmount(availableBalance)} {currencySymbol}
+                            </MediumText>
+                        )}
+                    </Inline>
+                </Stack>
+
+                {/* Divider */}
+                <div className="bg-tertiary h-px w-full" />
+
+                {/* Actions Bottom */}
+                <Inline className="items-center justify-end gap-3">
+                    <Button size="lg" skin="secondary" onClick={onClose} className="bg-white-05 hover:bg-white-16 text-primary min-w-[100px] border-none">
+                        Cancel
+                    </Button>
+                    <Button size="lg" skin="brand" disabled={isSubmitDisabled} loading={isSubmitLoading} onClick={handleSubmit} className="min-w-[200px]">
+                        Stake &amp; Submit Dispute
+                    </Button>
+                </Inline>
+            </Stack>
+        </Modal>
+    );
+};
diff --git a/src/components/ResolutionDashboard/dispute-table.tsx b/src/components/ResolutionDashboard/dispute-table.tsx
new file mode 100644
index 0000000..efdb5e0
--- /dev/null
+++ b/src/components/ResolutionDashboard/dispute-table.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+
+// Dispute Portal 的分群列表。
+//
+// 為什麼不用 @olab Table：這張表需要三種列型並存——市場標題列、腿的資料列、
+// 以及「binary market 一整行寫完」的單行列（市場名與該腿的數值同一行）。
+// Table 的 group 模式一定會先渲染一列標題再接資料列，binary market 就會多出
+// 一列空的子話題欄；而 data 模式雖然能用 colspan 拼出標題列，卻拿不到逐群交替
+// 底色（Table 的 bg 只在 group 模式依 groupIndex 上）。兩個需求無法同時滿足，
+// 所以照 AssetRow 的先例改用 grid 手排（該組件也是因為 Table 表達不了列的長相
+// 才獨立出來）。
+//
+// 幾何刻意對齊 @olab Table 的量測值：表頭 py-3、首末 20px 內距、
+// 逐群交替 bg-white-02、空狀態 "No data yet."。資料列改為固定 h-11（44px，
+// 2026-08-05 user 裁決）而不是 py-2 由內容撐開：一列裡有沒有按鈕、有沒有倒數，
+// 高度都必須一樣——不然掃表時列距會忽寬忽窄，看起來像資料有輕重。sm 按鈕是
+// h-7（28px），44 裝得下且上下各留 8px。
+// 欄寬用 inline style 而非 Tailwind
+// arbitrary class，因為值是依 tab 動態算出來的（arbitrary class 會被 purge）。
+//
+// ── Mobile fold（md / 960 以下）─────────────────────────────────────────────
+// 做法照 production 的四張表（OpinionLabs/frontend src/app/profile/components/
+// Orders/{Resolution,Position,Transactions,OpenOrders}Table）：**手機換一整組欄**，
+// 把桌面的每一欄折進少數幾欄裡垂直堆疊、標籤內嵌到格子中，於是表頭整排藏起來
+// （`header: "h-15 max-md:hidden"`），列與列之間改用底線分隔（`row:
+// "max-md:border-b max-md:border-[var(--color-bg-secondary)]"`）。production 的
+// fold 是 `useBreakpoints()` 的 `mobile = max-width: 959px`，與本 repo
+// `--breakpoint-md: 60rem` 同一條線，所以直接用 `md:` / `max-md:`。
+//
+// 與 production 的一處刻意偏離：它用 JS hook 換 columns 陣列，首幀會先當桌面
+// 再跳成手機；這裡改成兩組 markup 各自掛 `max-md:hidden` / `md:hidden`，CSS
+// 決定，沒有那一下閃動。代價是兩組儲存格同時在 DOM 裡。
+//
+// **桌面完全不受影響**：mobileColumns 沒傳（dispute-portal 的
+// MarketResolutionPage 就沒傳）時這一整段不存在；傳了也只加 `max-md:` 前綴的
+// class，960 以上一律解析不到。
+import { Fragment, type ReactNode } from "react";
+import { Icon, MediumText, Pagination } from "@olab/components";
+import cn from "classnames";
+
+export type SortDirection = "asc" | "desc";
+
+export interface DisputeTableSort {
+    column: string;
+    direction: SortDirection;
+}
+
+export interface DisputeTableColumn<T> {
+    name: string;
+    title: ReactNode;
+    /** CSS grid track，例如 "47%" */
+    width: string;
+    align?: "left" | "right";
+    /** 可排序。實際排序由呼叫端做（它才知道每一欄背後是哪個值） */
+    sortable?: boolean;
+    render: (_row: T) => ReactNode;
+}
+
+export interface DisputeTableGroup<T> {
+    key: string;
+    /** 市場名（通常是連結） */
+    title: ReactNode;
+    rows: T[];
+    /** true = 市場名與唯一那支腿寫在同一行（binary market，沒有子話題可分行） */
+    singleLine?: boolean;
+}
+
+interface DisputeTableProps<T> {
+    columns: DisputeTableColumn<T>[];
+    groups: DisputeTableGroup<T>[];
+    rowKey: (_row: T) => string;
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (_page: number) => void;
+    /**
+     * 空狀態內容。省略時退回 @olab Table 的預設文案；但「這個階段沒有東西」
+     * 與「篩選條件濾空了」是兩件不同的事，讀者需要不同的下一步，所以呼叫端
+     * 可以逐階段傳自己的空狀態。
+     */
+    emptyState?: ReactNode;
+    /**
+     * md（960）以下改畫這個（見檔頭 Mobile fold）。省略 = 沒有手機版，桌面那組欄
+     * 在所有寬度都照畫（既有消費者的行為完全不變）。
+     *
+     * 是「整列自己畫」而不是「另一組欄」：手機的列不是變窄的表格列，是兩段式的
+     * 卡片（身分行 + 度量列），欄的模型表達不了它。幾何由 leg-parts 的
+     * `MobileLeadLine` / `MobileMetrics` 共用，兩張表才不會各排一套。
+     */
+    mobileRow?: (_row: T) => ReactNode;
+    /** 目前排序；null = 未排序（照呼叫端的預設順序） */
+    sort?: DisputeTableSort | null;
+    /** 點可排序欄名時觸發。循環照 production Table：desc → asc → 取消 */
+    onSortChange?: (_sort: DisputeTableSort | null) => void;
+}
+
+export function DisputeTable<T>({
+    columns,
+    groups,
+    rowKey,
+    page,
+    pageSize,
+    totalCount,
+    onPageChange,
+    emptyState,
+    mobileRow,
+    sort,
+    onSortChange,
+}: DisputeTableProps<T>) {
+    const gridTemplateColumns = columns.map((column) => column.width).join(" ");
+
+    const cellClass = (column: DisputeTableColumn<T>) =>
+        cn("flex min-w-0 items-center", column.align === "right" && "justify-end");
+
+    // ── 手機列的外框 ─────────────────────────────────────────────────────────
+    // 桌面 class 一個都不共用，全部自帶 md:hidden，所以 960 以上完全不參與版面。
+    // 內距 12px（production 手機的 first:pl-3 / last:pr-3；桌面是 20px），
+    // 兩段之間 8px，列與列之間底線。
+    const hasMobile = Boolean(mobileRow);
+    const mobileRowClass = "md:hidden flex flex-col gap-2 border-b border-[var(--color-bg-secondary)] px-3 py-3";
+
+    // 「這批內容」的識別：頁碼、排序、以及本頁有哪些群組。任一改變 = 換了一批列，
+    // 用它當 key 讓下面那層重新掛載、跑一次淡入。
+    const contentKey = `${page}|${sort?.column ?? ""}${sort?.direction ?? ""}|${groups.map((group) => group.key).join(",")}`;
+
+    // production Table 的同一組循環：點未排序的欄 → desc，再點 → asc，再點 → 取消
+    const toggleSort = (name: string) => {
+        if (!onSortChange) return;
+        if (sort?.column !== name) return onSortChange({ column: name, direction: "desc" });
+        if (sort.direction === "desc") return onSortChange({ column: name, direction: "asc" });
+        onSortChange(null);
+    };
+
+    return (
+        // pb-5 補回卡片下緣的留白——原本由 Card 的 p-5 提供，改成 p-0! 之後
+        // 分頁（或最後一列）會直接貼著卡緣。
+        <div className="flex flex-col pb-5">
+            {/* 表頭。手機整排藏起來——欄名已經內嵌到每個格子裡（production 同款
+                `header: "h-15 max-md:hidden"`）。 */}
+            <div className={cn("grid px-5 py-3", hasMobile && "max-md:hidden")} style={{ gridTemplateColumns }}>
+                {columns.map((column) => (
+                    <div key={column.name} className={cellClass(column)}>
+                        {/* 照 production Table 表頭：MediumText（14px）+ text-tertiary
+                            （2026-08-04 對照 OpinionLabs/frontend Table 修正；原本誤用
+                            SmallText 12px + 舊扁平名 gray-3）。可排序欄再照 production
+                            包一層 group + sort 圖示（sort / sortAsc / sortDesc）。 */}
+                        <div
+                            className={cn("flex items-center gap-1", column.sortable && "group cursor-pointer")}
+                            onClick={column.sortable ? () => toggleSort(column.name) : undefined}
+                        >
+                            <MediumText
+                                className={cn(
+                                    "text-tertiary font-normal",
+                                    column.sortable && "group-hover:text-primary transition-normal",
+                                )}
+                            >
+                                {column.title}
+                            </MediumText>
+                            {column.sortable ? (
+                                sort?.column === column.name ? (
+                                    // key 讓 asc / desc 互換時重新掛載 → 淡入，不是直接換圖
+                                    <Icon
+                                        key={sort.direction}
+                                        name={sort.direction === "desc" ? "sortDesc" : "sortAsc"}
+                                        size="xs"
+                                        className="duration-150 ease-out animate-in fade-in"
+                                    />
+                                ) : (
+                                    <Icon
+                                        name="sort"
+                                        size="xs"
+                                        className="transition-normal group-hover:[--icon-color:var(--color-text-primary)]"
+                                    />
+                                )
+                            ) : null}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* 內容換一批（切 tab / 換排序 / 翻頁）時整塊淡入 + 微微上移，
+                而不是硬換一批列（2026-08-04 user 要求）。key 一變就重新掛載，
+                animate-in 才會再跑一次。 */}
+            <div key={contentKey} className="duration-200 ease-out animate-in fade-in slide-in-from-top-1">
+            {groups.length === 0 ? (
+                <div className="flex min-h-45 items-center justify-center px-5 py-6">
+                    {emptyState ?? <MediumText className="text-tertiary">No data yet.</MediumText>}
+                </div>
+            ) : (
+                groups.map((group, groupIndex) => (
+                    <div key={group.key} className={cn(groupIndex % 2 === 0 && "bg-white-02")}>
+                        {group.singleLine ? (
+                            // binary market：市場名佔第一欄，數值接在同一行，不另立標題列。
+                            // text-bodyM 讓市場名跟同排其他儲存格同一級——它在這裡是「列的內容」，
+                            // 不是像多腿市場那樣的標題列，跟著放大會讓整排讀起來高低不齊。
+                            <>
+                                <div
+                                    className={cn("grid h-11 items-center px-5 text-bodyM", hasMobile && "max-md:hidden")}
+                                    style={{ gridTemplateColumns }}
+                                >
+                                    <div className="flex min-w-0 items-center">{group.title}</div>
+                                    {columns.slice(1).map((column) => (
+                                        <div key={column.name} className={cellClass(column)}>
+                                            {column.render(group.rows[0])}
+                                        </div>
+                                    ))}
+                                </div>
+                                {mobileRow ? (
+                                    // 手機的 singleLine 不擠在同一排：市場名獨佔一行在上，底下走
+                                    // 與多腿市場**完全相同**的那份手機列。桌面把市場名塞進第一欄
+                                    // 是因為欄寬夠；手機一整個市場問句擠進身分行會把動作按鈕推掉。
+                                    // 這也正是參考圖 Portfolio 的排法：市場名一行、部位列在底下。
+                                    <div className={mobileRowClass}>
+                                        <div className="min-w-0 text-bodyM">{group.title}</div>
+                                        {mobileRow(group.rows[0])}
+                                    </div>
+                                ) : null}
+                            </>
+                        ) : (
+                            <>
+                                {/* 市場標題列：底下每支腿各自 propose / dispute。
+                                    text-bodyM 與 singleLine 的市場名同一級（2026-08-05 user
+                                    指出兩者字級不一致）：同一張表上「市場名」只該有一種大小，
+                                    群組標題與單行列的差別是版位（獨佔一行 vs 併進第一欄），
+                                    不是層級。 */}
+                                <div className={cn("px-5 pt-3 pb-1 text-bodyM", hasMobile && "max-md:px-3")}>{group.title}</div>
+                                {group.rows.map((row) => (
+                                    <Fragment key={rowKey(row)}>
+                                        <div
+                                            className={cn("grid h-11 items-center px-5", hasMobile && "max-md:hidden")}
+                                            style={{ gridTemplateColumns }}
+                                        >
+                                            {columns.map((column) => (
+                                                <div key={column.name} className={cellClass(column)}>
+                                                    {column.render(row)}
+                                                </div>
+                                            ))}
+                                        </div>
+                                        {mobileRow ? <div className={mobileRowClass}>{mobileRow(row)}</div> : null}
+                                    </Fragment>
+                                ))}
+                            </>
+                        )}
+                    </div>
+                ))
+            )}
+            </div>
+
+            {totalCount > pageSize && (
+                <Pagination
+                    count={totalCount}
+                    pageSize={pageSize}
+                    page={page}
+                    onPageChange={(details: { page: number }) => onPageChange(details.page)}
+                    className="mt-4"
+                />
+            )}
+        </div>
+    );
+}
diff --git a/src/components/ResolutionDashboard/how-it-works-dashboard.tsx b/src/components/ResolutionDashboard/how-it-works-dashboard.tsx
new file mode 100644
index 0000000..f67d7f2
--- /dev/null
+++ b/src/components/ResolutionDashboard/how-it-works-dashboard.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+
+// How it works · Dashboard 版（user 2026-08-04 於組合 playground 收斂選定的 HW-5）。
+//
+// 真相來源：prototypes/market-resolution-layouts/market-resolution-playground.html
+// 的 HW.dash——左欄 pitch（slogan 直接講賠付）、右欄三個階段各一格帶全站計數。
+//
+// 2026-08-04（與 PM 談後）：More 的四問展開整塊移除，規則細節一律走 Full rules
+// 連到 docs；「一次機會」的三點小卡也移除——先到先得屬於規則細節，不是這張卡的
+// 職責（這張卡回答的是「現在每筆結算走到哪」）。
+//
+// 這一份是真組件翻譯：@olab 元件 + Live DS token。與 playground 的偏離全部列在
+// /live/market-resolution-dashboard-rows 的「組件對照與缺口」一節，不在這裡靜默吸收。
+//
+// 字級：playground 的大數字與 pitch 標題都是 24px = 已批准的 text-h1 階，
+// 不再需要 variants 探索稿那個 32–56px 的 display 提案值。
+//
+// ── Walkthrough 動畫（2026-08-04 user 裁決選定 slide 版；fade 跳燈版落選收掉）──
+// highlight 每 5 秒走一站（Proposed → In review → Finalized → 回到 Proposed），
+// 把「一筆結算會依序經過這三站」的流程講給第一次看的人：一個獨立的 brand 框
+// 覆蓋層在三格之間平移（軌跡本身在畫流向）；3 → 1 的回頭刻意不滑動、改淡出
+// 淡入——流程是單向的，框倒退滑回去會畫出「結算會退回去」的錯誤敘事。
+// md 以下三格疊直排，位移幾何不成立，覆蓋層收掉、逐格 transition-colors 淡切。
+// 互動讓位：hover 進整組卡片就暫停（人在讀，別抽走 highlight）；
+// prefers-reduced-motion 直接停用，退回靜態的 Proposed 強調。
+import { useEffect, useRef, useState, type CSSProperties, type ComponentType } from "react";
+import { H2, H3, MediumText, SmallText, Stack, TextLink } from "@olab/components";
+import { CountdownTimer } from "./countdown-timer";
+import cn from "classnames";
+import { DISPUTE_DOCS_URL, type ResolutionLeg } from "./mock-data";
+import { Eyebrow } from "./leg-parts";
+import { FinalizedIcon, InReviewIcon, ProposedIcon } from "./stage-icons";
+
+// 只看**還沒關**的窗：mock 裡最快的窗只剩幾十秒，歸零之後 chip 若停在 0s，
+// 讀起來像壞掉——下一個窗才是「next」。全部關完就把 chip 收掉。
+const soonestWindow = (legs: ResolutionLeg[], now: number) =>
+    legs
+        .filter((leg) => leg.stage === "proposed" && (leg.windowEndsAt ?? 0) > now)
+        .sort((a, b) => (a.windowEndsAt ?? 0) - (b.windowEndsAt ?? 0))[0];
+
+interface StageCell {
+    key: string;
+    title: string;
+    count: number;
+    /** Finalized 是歷史堆積，量級跟前兩格差一個數量級——照 playground 一樣照印 */
+    body: string;
+    /**
+     * 標題左邊的插畫（2026-08-05 user 指定，附參考圖）：托著文件的手 / 放大鏡 / 落槌。
+     * 三顆是這張卡專用的插畫（見 stage-icons.tsx），不是 @olab 的單色 line icon —— 
+     * 那組畫不出「線稿 + 局部橘色實塊」這兩層關係。
+     */
+    Icon: ComponentType<{ size?: number; className?: string }>;
+}
+
+// ── 箭頭形（2026-08-05 user 要求，參考 StepTabs 那排箭頭 tab）──────────────────
+//
+// 第一格左邊是平的（外側兩角照卡片的 rounded-2xl），後兩格左邊凹一個與箭頭同尺寸
+// 的缺口；相鄰兩格用 -4px 負 margin 咬合（同 StepTabs 的 --tab-gap），缺口與箭頭之間
+// 留下的空隙就是視覺上那道分隔。md 以下三格是直排的卡，箭頭幾何不成立 —— 桌面才切。
+//
+// 所有尖角都帶圓角（2026-08-05 user 要求）：箭頭尖、缺口尖、上下四個轉折全部以二次
+// 貝茲補圓，做法照 StepTabs 的 getRoundedStepPath。因為要畫曲線，形狀從
+// clip-path: polygon（只吃直線、可混 %）改成 clip-path: path()——後者只吃絕對 px，
+// 所以要量尺寸；三格等寬，量一次容器就夠（見 gridRef）。
+const ARROW = 20;
+const OVERLAP = 4;
+/** 整排最外側那兩個角，對齊卡片自己的 rounded-2xl */
+const OUTER_RADIUS = 16;
+/** 箭頭尖 / 缺口尖 / 中間轉折的圓角。太大會把箭頭削鈍 */
+const JOINT_RADIUS = 5;
+
+/** x, y, 該點的圓角半徑 */
+type Corner = readonly [number, number, number];
+
+/** 逐點以二次貝茲補圓角（照 StepTabs 的 getRoundedStepPath，改成每點各自帶半徑） */
+const roundedPath = (corners: Corner[]) =>
+    corners
+        .map((corner, index) => {
+            const previous = corners[(index - 1 + corners.length) % corners.length];
+            const next = corners[(index + 1) % corners.length];
+            const previousLength = Math.hypot(corner[0] - previous[0], corner[1] - previous[1]);
+            const nextLength = Math.hypot(next[0] - corner[0], next[1] - corner[1]);
+            const radius = Math.min(corner[2], previousLength / 2, nextLength / 2);
+            const start = [
+                corner[0] + ((previous[0] - corner[0]) / previousLength) * radius,
+                corner[1] + ((previous[1] - corner[1]) / previousLength) * radius,
+            ];
+            const end = [
+                corner[0] + ((next[0] - corner[0]) / nextLength) * radius,
+                corner[1] + ((next[1] - corner[1]) / nextLength) * radius,
+            ];
+            return `${index === 0 ? "M" : "L"} ${start[0]} ${start[1]} Q ${corner[0]} ${corner[1]} ${end[0]} ${end[1]}`;
+        })
+        .join(" ")
+        .concat(" Z");
+
+/**
+ * 箭頭形的頂點。`inset` 給描邊用：1px 的 stroke 要往內縮半格，否則一半畫在框外被裁掉。
+ */
+const chevronPath = (width: number, height: number, isFirst: boolean, inset = 0) => {
+    const [left, right, top, bottom] = [inset, width - inset, inset, height - inset];
+    const middle = height / 2;
+    const tip = right - ARROW;
+    const outer = isFirst ? OUTER_RADIUS : JOINT_RADIUS;
+    const corners: Corner[] = [
+        [left, top, outer],
+        [tip, top, JOINT_RADIUS],
+        [right, middle, JOINT_RADIUS],
+        [tip, bottom, JOINT_RADIUS],
+        [left, bottom, outer],
+    ];
+    return roundedPath(isFirst ? corners : [...corners, [left + ARROW, middle, JOINT_RADIUS]]);
+};
+
+/** 每站停留（含移動時間）。2026-08-05 user 裁決：4 秒。 */
+const STEP_MS = 4000;
+/** slide 版 3 → 1 回頭的淡出時長；淡完才瞬移回第一格再淡入 */
+const WRAP_FADE_MS = 300;
+
+/**
+ * 站點輪播的共用 state：目前站 index、hover 暫停、reduced-motion 停用。
+ * 回傳 -1 表示輪播未啟用（off / reduced motion），此時外層照舊固定強調 Proposed。
+ */
+const useWalkthrough = (on: boolean, paused: boolean) => {
+    const [stage, setStage] = useState(0);
+    const [reduced, setReduced] = useState(false);
+
+    useEffect(() => {
+        const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setReduced(query.matches);
+        const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
+        query.addEventListener("change", onChange);
+        return () => query.removeEventListener("change", onChange);
+    }, []);
+
+    const enabled = on && !reduced;
+
+    useEffect(() => {
+        if (!enabled || paused) return;
+        const timer = setInterval(() => setStage((prev) => (prev + 1) % 3), STEP_MS);
+        return () => clearInterval(timer);
+    }, [enabled, paused]);
+
+    return enabled ? stage : -1;
+};
+
+export interface HowItWorksDashboardProps {
+    legs: ResolutionLeg[];
+    /** Unix seconds。倒數 chip 用；由呼叫端 tick，元件自己不開 interval */
+    now: number;
+    /** 站點輪播動畫（slide 版）；關閉時固定強調 Proposed */
+    walkthrough?: boolean;
+}
+
+export function HowItWorksDashboard({ legs, now, walkthrough = false }: HowItWorksDashboardProps) {
+    const next = soonestWindow(legs, now);
+
+    const [hovered, setHovered] = useState(false);
+    const stage = useWalkthrough(walkthrough, hovered);
+    // -1 = 輪播未啟用 → 維持現狀語意：Proposed 是常駐入口
+    const activeIndex = stage === -1 ? 0 : stage;
+    // reduced-motion / SSR 期間 stage = -1 → 覆蓋層不畫，退回靜態強調
+    const isSlide = stage !== -1;
+
+    // ── slide 版的覆蓋框：平移前進、回頭淡切 ─────────────────────────────────
+    // frameStage 是框「畫在哪一格」，跟 activeIndex 分開管理：回頭時要先淡出、
+    // 瞬移（暫時關 transition）、再淡入，中間框的位置與 activeIndex 短暫不同步。
+    const [frameStage, setFrameStage] = useState(0);
+    const [frameHidden, setFrameHidden] = useState(false);
+    const [frameInstant, setFrameInstant] = useState(false);
+    // 三格與覆蓋框的形狀都要絕對 px（clip-path: path() 不吃 %），所以量容器一次：
+    // 咬合吃掉 2×OVERLAP，每格寬 = (容器 + 2×OVERLAP) / 3，高就是容器高（三格 h-full）。
+    const gridRef = useRef<HTMLDivElement | null>(null);
+    const [gridSize, setGridSize] = useState<{ width: number; height: number } | null>(null);
+    // 手機不切形狀（直排卡），而 clip-path 是 inline style、沒有 media query 可掛，
+    // 所以這裡自己判斷斷點（--breakpoint-md = 60rem，同 max-md: / md: 那條線）。
+    const [isDesktop, setIsDesktop] = useState(false);
+    const wrapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        const query = window.matchMedia("(min-width: 60rem)");
+        setIsDesktop(query.matches);
+        const onChange = (event: MediaQueryListEvent) => setIsDesktop(event.matches);
+        query.addEventListener("change", onChange);
+        return () => query.removeEventListener("change", onChange);
+    }, []);
+
+    useEffect(() => {
+        const node = gridRef.current;
+        if (!node) return;
+        const observer = new ResizeObserver(([entry]) => {
+            const box = entry.contentRect;
+            setGridSize({ width: box.width, height: box.height });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+
+    useEffect(() => {
+        if (!isSlide) return;
+        if (activeIndex === 0 && frameStage === 2) {
+            // 3 → 1 回頭：淡出 → 關 transition 瞬移 → 下一幀開回 transition 淡入
+            setFrameHidden(true);
+            wrapTimer.current = setTimeout(() => {
+                setFrameInstant(true);
+                setFrameStage(0);
+                requestAnimationFrame(() =>
+                    requestAnimationFrame(() => {
+                        setFrameInstant(false);
+                        setFrameHidden(false);
+                    }),
+                );
+            }, WRAP_FADE_MS);
+        } else {
+            setFrameStage(activeIndex);
+        }
+        return () => {
+            if (wrapTimer.current) clearTimeout(wrapTimer.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSlide, activeIndex]);
+
+    // 三格等寬：咬合吃掉 2×OVERLAP，所以每格 = (容器 + 2×OVERLAP) / 3
+    const cardBox = gridSize ? { width: (gridSize.width + 2 * OVERLAP) / 3, height: gridSize.height } : null;
+    const cardShape = isDesktop && cardBox ? (isFirst: boolean) => chevronPath(cardBox.width, cardBox.height, isFirst) : null;
+
+    const cells: StageCell[] = [
+        {
+            key: "proposed",
+            title: "Proposed",
+            count: legs.filter((leg) => leg.stage === "proposed").length,
+            body: "Payouts are on hold. Stake OPN if the outcome is incorrect, or too early to resolve.",
+            Icon: ProposedIcon,
+        },
+        {
+            key: "in_review",
+            title: "In review",
+            count: legs.filter((leg) => leg.stage === "in_review").length,
+            body: "Someone staked against the result. Both sides wait for the ruling.",
+            Icon: InReviewIcon,
+        },
+        {
+            key: "finalized",
+            title: "Finalized",
+            count: legs.filter((leg) => leg.stage === "finalized").length,
+            body: "Nobody disputed it, or the committee has ruled. It will not change again.",
+            Icon: FinalizedIcon,
+        },
+    ];
+
+    return (
+        // 2026-08-05 user 裁決：外框與內距拿掉——這一段是頁面的導言區，不是一張卡；
+        // 卡片感反而讓它跟底下兩張真的表格看起來同一層。三張階段卡自己還是卡。
+        <div>
+            {/* 欄距 40（兩欄之間）、列距 16（卡內件之間）——playground 的 gap:16px 40px。
+                1fr:3fr 是照 user 參考稿量的比例（左欄約 300 / 1240）。 */}
+            {/* 右欄的 eyebrow 已刪（2026-08-04 user 裁決）；左欄 eyebrow 提出到 grid 之外
+                佔滿整列，讓 H1 與右邊卡片同列起頭、頂部對齊。 */}
+            {/* items-stretch（預設）讓右欄跟左欄一樣高，三張卡再各自撐滿那個高度
+                （2026-08-04 user 裁決；原本是 items-start，卡片只有內容高度）。 */}
+            <div className="grid grid-cols-1 gap-x-10 gap-y-4 md:grid-cols-[1fr_3fr] md:gap-y-2">
+                <Stack className="gap-2">
+                    {/* 20px（2026-08-04 user 裁決，同日先降到 16px 再升一階）：大標讓給頁面標題，這句 pitch
+                        讀起來是導言而不是第二個標題。用 H3 元件而不是 H1 + text-h3 ——
+                        production Typography 的字級綁在元件上，同權重的 className 蓋不過
+                        它自己的 text-h1。同日稍早曾是 text-3xl / text-h1，都是在還沒有
+                        頁面標題的前提下做的決定。 */}
+                    {/* 斷句斷在句號上（2026-08-04 user 裁決）：讓寬度決定換行會斷成
+                        「…Put OPN on / it.」，把一句話截成兩半。 */}
+                    <H2 className="text-primary font-bold">
+                        Think the result is wrong?
+                        <br />
+                        Put OPN on it.
+                    </H2>
+                    <MediumText className="text-tertiary leading-5">
+                        A settled result is not final yet. Anyone can stake OPN to say it is wrong, and a committee decides.
+                        Right doubles your stake. Wrong loses it.
+                    </MediumText>
+                </Stack>
+
+                <Stack className="h-full gap-2">
+                    <div
+                        ref={gridRef}
+                        className="relative flex h-full flex-col gap-4 md:flex-row md:gap-0"
+                        onMouseEnter={() => setHovered(true)}
+                        onMouseLeave={() => setHovered(false)}
+                    >
+                        {cells.map((cell, index) => {
+                            const active = index === activeIndex;
+                            return (
+                                <div
+                                    key={cell.key}
+                                    className={cn(
+                                        // 格內堆疊用 8（貼身節奏）；16 是「區塊之間」的值，拿來當格內
+                                        // 堆疊會把三格一起撐虛（playground 同一條註解）。
+                                        "flex h-full min-w-0 flex-col justify-between gap-3 rounded-2xl p-4",
+                                        // 三格必須**等寬**，覆蓋層才對得上：咬合吃掉 2×4px，
+                                        // 所以每格 = (100% + 8px) / 3。flex-1 在這裡不行——
+                                        // 左右內距不同（第一格沒有缺口要讓）會讓三格差 12px。
+                                        "w-full md:w-[calc((100%+8px)/3)] md:shrink-0 md:grow-0",
+                                        // 箭頭形（md+）：左右各讓出箭頭 / 缺口的 20px。
+                                        // border-radius 必須關掉：它會在右上 / 右下各啃掉一塊
+                                        // 16px 的圓角，而那塊正好壓在箭頭的斜邊上——結果背景的
+                                        // 角看起來比 highlight 的框鈍（2026-08-05 user 指出）。
+                                        // 桌面的所有圓角一律由 clip-path 的 path 提供（第一格左側
+                                        // 的 16、其餘轉折的 5），手機沒有 clip 才用 rounded-2xl。
+                                        "md:rounded-none md:pr-7",
+                                        // 咬合：後一格的缺口疊回前一格的箭頭上 4px（同 StepTabs）
+                                        index > 0 && "md:-ml-1 md:pl-7",
+                                        // 輪播時底色 / 文字用 transition-colors 淡切；靜態時無 transition
+                                        // 也無害，一起掛著讓兩版共用同一份 markup。
+                                        "transition-colors duration-300",
+                                        // 強調格走 tint + brand 框（比稿 F 案，user 2026-08-04 裁決）：
+                                        // 不用 solid 對抗對比問題，文字回到頁面原生層級。
+                                        // slide 版的 tint 與框由覆蓋層畫（md+），格子自己只切文字色；
+                                        // md 以下覆蓋層收掉，退回跟 fade 相同的逐格樣式。
+                                        // ring 只在手機（未被 clip）有效；桌面被箭頭形切過只會
+                                        // 剩上下兩條直邊，所以 md 以上一律關掉、由 tint 承擔強調。
+                                        active && !isSlide && "bg-brand-1 ring-brand ring-1 ring-inset md:ring-0",
+                                        active && isSlide && "bg-brand-1 ring-brand ring-1 ring-inset md:bg-transparent md:ring-0",
+                                        !active && "bg-white-04",
+                                    )}
+                                    // 形狀是 clip-path: path()（要絕對 px），所以只有量到尺寸、
+                                    // 且真的在桌面時才掛；手機維持原本的圓角矩形卡。
+                                    style={cardShape ? { clipPath: `path("${cardShape(index === 0)}")` } : undefined}
+                                >
+                                    <div className="flex items-baseline justify-between gap-4">
+                                        {/* icon 與標題同一行（2026-08-05 user 要求）：三個階段各自一顆
+                                            line icon（提出 / 等待 / 定案），跟著標題的文字色一起淡切。 */}
+                                        <div className="flex min-w-0 items-center gap-2">
+                                            <cell.Icon
+                                                size={28}
+                                                className={cn(
+                                                    "shrink-0 transition-opacity duration-300",
+                                                    active ? "opacity-100" : "opacity-60",
+                                                )}
+                                            />
+                                            <H2 className="text-primary truncate font-bold">{cell.title}</H2>
+                                        </div>
+                                        <span className="font-number text-h1 text-primary shrink-0 leading-6" data-kind="numeric">
+                                            {cell.count}
+                                        </span>
+                                    </div>
+                                    {/* 14px（2026-08-04 user 裁決，SmallText → MediumText 升一階）：
+                                        這段是三格的說明正文，跟左欄的導言同一個層級。 */}
+                                    <MediumText
+                                        className={cn(
+                                            "leading-5 transition-colors duration-300",
+                                            active ? "text-primary" : "text-tertiary",
+                                        )}
+                                    >
+                                        {cell.body}
+                                    </MediumText>
+                                </div>
+                            );
+                        })}
+
+                        {isSlide ? (
+                            // 覆蓋框：三格咬合後每格寬 = (100% + 2×4px) / 3，位移一格 =
+                            // 自身寬 − 4px（負 margin 吃掉的那段）。只動 transform / opacity
+                            // （不觸發 reflow）；pointer-events-none 讓 hover 落在底下的格子上。
+                            // md 以下位移幾何不成立，整層收掉。
+                            //
+                            // tint 與 1px brand 邊框都由一支 SVG path 畫（2026-08-05 user 要求把
+                            // 邊框加回來）。三種做法試過：ring / border 是矩形描邊，被 clip-path
+                            // 切過只剩上下兩條直邊；四向 drop-shadow 描邊需要不透明的來源，
+                            // 套在 10% 的 tint 上會把整格疊成實心橘。SVG 的 fill + stroke 是唯一
+                            // 能讓斜邊也帶 1px 線、又保住半透明填色的做法（同 StepTabs 的選擇）。
+                            // viewBox 用實際 px 尺寸（ResizeObserver 量），stroke-width 1 才等於 1px。
+                            <div
+                                aria-hidden
+                                className={cn(
+                                    "pointer-events-none absolute inset-y-0 hidden md:block",
+                                    !frameInstant && "transition-[transform,opacity] duration-[450ms] ease-in-out",
+                                    frameHidden ? "opacity-0" : "opacity-100",
+                                )}
+                                style={
+                                    {
+                                        width: `calc((100% + ${2 * OVERLAP}px) / 3)`,
+                                        transform: `translateX(calc((100% - ${OVERLAP}px) * ${frameStage}))`,
+                                    } as CSSProperties
+                                }
+                            >
+                                {cardBox ? (
+                                    <svg
+                                        className="absolute inset-0 h-full w-full overflow-visible"
+                                        viewBox={`0 0 ${cardBox.width} ${cardBox.height}`}
+                                        focusable="false"
+                                    >
+                                        <path
+                                            d={chevronPath(cardBox.width, cardBox.height, frameStage === 0, 0.5)}
+                                            fill="var(--color-brand-1)"
+                                            stroke="var(--color-bg-brand-solid)"
+                                            strokeWidth={1}
+                                        />
+                                    </svg>
+                                ) : null}
+                            </div>
+                        ) : null}
+                    </div>
+                </Stack>
+
+                {/* Full Rules 自成第二列（2026-08-04 user 裁決）：它留在第一列的話會把
+                    列高撐到它自己那一行，三張卡就跟著長高；卡片要對齊的是左邊那段
+                    灰字的底，不是這個補充連結。TextLink 字級跟隨外層，包 SmallText
+                    降一階——它是補充入口，不該跟正文同大小搶注意力。 */}
+                <div className="md:col-start-1">
+                    <SmallText className="leading-4">
+                        <TextLink variant="brand" context="standalone" href={DISPUTE_DOCS_URL} target="_blank" rel="noreferrer">
+                            Full Rules
+                        </TextLink>
+                    </SmallText>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ResolutionDashboard/leg-derive.ts b/src/components/ResolutionDashboard/leg-derive.ts
new file mode 100644
index 0000000..790da6b
--- /dev/null
+++ b/src/components/ResolutionDashboard/leg-derive.ts
@@ -0,0 +1,118 @@
+// 腿的推導邏輯：倒數歸零怎麼走、列表怎麼排、怎麼分群。
+//
+// 全部是 pure function，兩個 view 共用。放在頁面外面的理由是這裡藏著 PRD 的三條
+// 規則（§3 Timeout 視為 accepted、§4.2 預設排序、§5 分群），改規則時要能一眼找到。
+import { type OutcomeLabel, type OutcomeSlot, type ResolutionLeg } from "./mock-data";
+
+/**
+ * 最後 15 分鐘視為「快關了」——倒數改用 urgent 色（見 CountdownTimer.tone）。
+ * 門檻不是「最後一小時」：window 通常只有兩小時，一小時等於半數的列都紅著，
+ * 全部都在喊就等於沒有喊。15 分鐘 ≈ 剩一成多，是真的要現在決定的那一段。
+ */
+export const URGENT_SECONDS = 15 * 60;
+
+const FLIPPED_LABEL: Record<OutcomeLabel, OutcomeLabel> = { YES: "NO", NO: "YES", TIE: "TIE" };
+const FLIPPED_SLOT: Record<OutcomeSlot, OutcomeSlot> = { 0: 1, 1: 0, 2: 2 };
+
+/**
+ * 倒數歸零的瞬間行為（PRD §6）。前端只是把「時間到了」翻譯成下一個階段，真值
+ * 由鏈上決定；prototype 裡這是唯一讓 mock 資料會動的地方。
+ *
+ * - Proposed 歸零 = 無人 dispute → 直接定案，結果就是 proposed outcome（§3）
+ * - In review 歸零 = committee 沒趕上 = Timeout → 依 §3 一律視為 accepted
+ *   （原結算被推翻，disputor 照領），產品上不另設 Timeout 狀態
+ */
+export function advanceLeg(leg: ResolutionLeg, now: number): ResolutionLeg {
+    if (leg.stage === "proposed" && leg.windowEndsAt && leg.windowEndsAt <= now) {
+        return {
+            ...leg,
+            stage: "finalized",
+            disputeResult: "none",
+            finalOutcome: leg.proposedOutcome,
+            finalOutcomeSlot: leg.proposedOutcomeSlot,
+            finalOutcomeLabel: leg.proposedOutcomeLabel,
+            enteredStageAt: leg.windowEndsAt,
+        };
+    }
+
+    if (leg.stage === "in_review" && leg.reviewEndsAt && leg.reviewEndsAt <= now) {
+        const flippedSlot = FLIPPED_SLOT[leg.proposedOutcomeSlot];
+        return {
+            ...leg,
+            stage: "finalized",
+            disputeResult: "accepted",
+            finalOutcome: FLIPPED_LABEL[leg.proposedOutcome],
+            finalOutcomeSlot: flippedSlot,
+            // 具名選項（賽事）翻面後要印**另一隊**的名字。少了這一行會退回印
+            // YES / NO 並染上 outcome 綠紅，等於在隊伍市場上混用兩套色系。
+            finalOutcomeLabel: leg.outcomeLabels?.[flippedSlot],
+            rewardAmount: leg.potentialReward,
+            claimed: false,
+            enteredStageAt: leg.reviewEndsAt,
+        };
+    }
+
+    return leg;
+}
+
+export interface LegGroup {
+    key: string;
+    marketId: string;
+    marketTitle: string;
+    legs: ResolutionLeg[];
+}
+
+/** 排序鍵：Proposed 用「還剩多久」，其餘用「何時進到這一格」（PRD §4.2） */
+const sortKey = (leg: ResolutionLeg) =>
+    leg.stage === "proposed" ? (leg.windowEndsAt ?? Number.MAX_SAFE_INTEGER) : leg.enteredStageAt;
+
+/**
+ * 先排序再分群，群的排序鍵取群內最小值——同一個 market 的腿必須整塊移動。
+ * 若直接對腿全域排序再「合併相鄰同 market」，deadline 略有差異的多選市場就會被
+ * 別的市場插進中間、裂成好幾個同名群組。
+ */
+export function groupLegs(legs: ResolutionLeg[]): LegGroup[] {
+    const byMarket = new Map<string, LegGroup>();
+
+    legs.forEach((leg) => {
+        const existing = byMarket.get(leg.marketId);
+        if (existing) {
+            existing.legs.push(leg);
+            return;
+        }
+        byMarket.set(leg.marketId, {
+            key: leg.marketId,
+            marketId: leg.marketId,
+            marketTitle: leg.marketTitle,
+            legs: [leg],
+        });
+    });
+
+    const groups: LegGroup[] = Array.from(byMarket.values());
+    groups.forEach((group) => group.legs.sort((a, b) => sortKey(a) - sortKey(b) || a.id.localeCompare(b.id)));
+    groups.sort((a, b) => sortKey(a.legs[0]) - sortKey(b.legs[0]) || a.marketId.localeCompare(b.marketId));
+
+    return groups;
+}
+
+/**
+ * 只分群、不排序 —— 接真資料時用這一支。
+ *
+ * server 端已經排好序（Proposed 依 deadline、Finalized 最新在最上），而且我們一次
+ * 只拿到 20 筆中的一頁；在頁內用自己的鍵重排，會讓這一頁的順序跟前後頁對不上。
+ * 分群鍵仍是 marketId，但群的先後照腿第一次出現的順序。
+ */
+export function groupLegsInOrder(legs: ResolutionLeg[]): LegGroup[] {
+    const byMarket = new Map<string, LegGroup>();
+
+    legs.forEach((leg) => {
+        const existing = byMarket.get(leg.marketId);
+        if (existing) {
+            existing.legs.push(leg);
+            return;
+        }
+        byMarket.set(leg.marketId, { key: leg.marketId, marketId: leg.marketId, marketTitle: leg.marketTitle, legs: [leg] });
+    });
+
+    return Array.from(byMarket.values());
+}
diff --git a/src/components/ResolutionDashboard/leg-parts.tsx b/src/components/ResolutionDashboard/leg-parts.tsx
new file mode 100644
index 0000000..7f29ced
--- /dev/null
+++ b/src/components/ResolutionDashboard/leg-parts.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+
+// 兩個 flow 共用的儲存格。抽出來的理由不是省行數，是「同一件事在兩張表上必須長得
+// 一樣」——市場名的層級、OPN 金額的寫法、outcome 的顏色，公開列表與 My disputes
+// 不能各寫一套。
+import { CryptoIcon, Inline, MediumText, SmallText, TextLink } from "@olab/components";
+import cn from "classnames";
+import { type DisputeKind, type DisputeResult, type OutcomeLabel, type OutcomeSlot, type ResolutionLeg, formatOpn } from "./mock-data";
+
+/**
+ * caps eyebrow（12px / tracking-wider / uppercase）。原本活在 variants/（探索層），
+ * Dashboard × Rows 定案後搬進共用層——真組件不能 import 探索資料夾，那裡的東西
+ * 隨時會被整批刪掉。
+ */
+export const Eyebrow = ({ children, tone = "quiet" }: { children: React.ReactNode; tone?: "quiet" | "brand" }) => (
+    <SmallText className={cn("tracking-wider uppercase", tone === "brand" ? "text-brand-secondary" : "text-quaternary")}>
+        {children}
+    </SmallText>
+);
+
+export const DISPUTE_KIND_LABELS: Record<DisputeKind, string> = {
+    incorrect_outcome: "Incorrect outcome",
+    too_early: "Too early to resolve",
+};
+
+/** outcome 是 binary 預測極性 → 走 outcome family；TIE 借 team-draw 的中性色 */
+const OUTCOME_TEXT_CLASS: Record<OutcomeSlot, string> = {
+    0: "text-outcome-yes-solid",
+    1: "text-outcome-no-solid",
+    2: "text-team-draw-solid",
+};
+
+/**
+ * displayLabel 有值 = 這個市場的選項是具名的（隊伍名、UP/DOWN），只出現在真資料。
+ * 這時刻意改用中性色：outcome 綠 / 紅 是「會不會發生」的極性語意，把它套在隊伍名
+ * 上等於同時宣告兩套互斥的色系（見根目錄 CLAUDE.md 的 Outcome / Team Dual System）。
+ * 賽事該用的是 Team Identity 色，但那需要知道哪一隊是 home —— API 沒給。
+ */
+export const OutcomeText = ({ label, slot, displayLabel }: { label: OutcomeLabel; slot: OutcomeSlot; displayLabel?: string }) =>
+    displayLabel ? (
+        <MediumText className="text-primary truncate font-bold">{displayLabel}</MediumText>
+    ) : (
+        <MediumText className={cn("font-bold", OUTCOME_TEXT_CLASS[slot])}>{label}</MediumText>
+    );
+
+/** 市場名（群組標題）本身就是進 market detail page 的連結——不另設 View Market */
+export const MarketTitleLink = ({ title, href }: { title: string; href?: string }) =>
+    href ? (
+        <TextLink variant="entity" context="standalone" href={href} target="_blank" rel="noreferrer">
+            {title}
+        </TextLink>
+    ) : (
+        <TextLink variant="entity" context="standalone" href="#" onClick={(event) => event.preventDefault()}>
+            {title}
+        </TextLink>
+    );
+
+/**
+ * 子話題往右縮 16px：市場名是它的上一層（群組標題列），縮排把這層關係畫出來。
+ * binary market 只有一支腿、沒有子話題 → 整行由群組標題自己寫完（見 DisputeTable
+ * 的 singleLine），這裡回 null。
+ */
+export const SubtopicCell = ({ leg }: { leg: ResolutionLeg }) =>
+    leg.subtopic ? <MediumText className="text-tertiary pl-4">{leg.subtopic}</MediumText> : null;
+
+/**
+ * 幣別由 OPN icon 交代，欄名與儲存格都不重複寫一次 symbol。
+ *
+ * 2026-08-05 user 裁決：表格內的值一律白字，所以拿掉了原本的 `muted` 變體（已領的
+ * 押金、被駁回的獎勵曾降灰）。那件事現在只由 Status 欄交代——同一列用兩種訊號講
+ * 同一件事，其中一種還是「把數字變暗」，掃表時反而看不出重點。
+ */
+export const OpnAmount = ({ value, note }: { value?: number; note?: string }) => {
+    if (value === undefined) return <MediumText className="text-quaternary">—</MediumText>;
+    return (
+        <Inline className="items-center gap-1">
+            <CryptoIcon name="OPN" className="size-4" />
+            <MediumText className="text-primary font-number" data-kind="numeric">
+                {formatOpn(value)}
+            </MediumText>
+            {/* 這筆錢後來怎麼了（目前只有 rejected 的 (Forfeited)）。不用 font-number
+                ——它是註記不是數字，跟著等寬字會被讀成金額的一部分。 */}
+            {note ? <MediumText className="text-primary">({note})</MediumText> : null}
+        </Inline>
+    );
+};
+
+/**
+ * 定案時間（Finalized 檢視）。`enteredStageAt` = 進入 Finalized 的那一刻。
+ * 走 tabular-nums（T4 tier-2）而不是 font-number：這是一段日期文字，不是要跟上下
+ * 列對齊比大小的數字欄。
+ */
+export const TimestampCell = ({ timestamp }: { timestamp?: number }) => {
+    if (!timestamp) return <MediumText className="text-quaternary">—</MediumText>;
+    const date = new Date(timestamp * 1000);
+    const day = date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+    const time = date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
+    return (
+        <MediumText className="text-primary tabular-nums" data-kind="numeric">
+            {day} · {time}
+        </MediumText>
+    );
+};
+
+/**
+ * 審理結果的紅 / 綠圓點（2026-08-05 user 裁決）：結果本身回白字，極性交給點。
+ * 顏色走 system state 的 success / error，不是 outcome-yes/no——後者是預測極性，
+ * 跟「委員會怎麼判」無關。
+ */
+export const ResultDot = ({ tone }: { tone: "success" | "error" }) => (
+    <span
+        aria-hidden
+        className={cn("size-2 shrink-0 rounded-full", tone === "success" ? "bg-success-solid" : "bg-error-solid")}
+    />
+);
+
+const DISPUTE_RESULT_LABELS: Record<DisputeResult, string> = {
+    none: "No dispute",
+    accepted: "Dispute accepted",
+    rejected: "Dispute rejected",
+};
+
+/**
+ * Finalized 階段唯一「有故事」的欄位（PRD §4.2）。文字一律白（2026-08-05 user
+ * 裁決），accepted / rejected 前面掛一顆綠 / 紅點；沒人 dispute 的那些沒有點，
+ * 也不再降灰——它是大多數，但一列裡只有一種訊號負責「這筆的結果是什麼」。
+ */
+export const DisputeResultCell = ({ result }: { result?: DisputeResult }) => {
+    const value = result ?? "none";
+    return (
+        <Inline className="items-center gap-2">
+            {value === "accepted" ? <ResultDot tone="success" /> : value === "rejected" ? <ResultDot tone="error" /> : null}
+            <MediumText className="text-primary">{DISPUTE_RESULT_LABELS[value]}</MediumText>
+        </Inline>
+    );
+};
+
+/**
+ * 定案結果。原本會為被推翻的那些補一句 was YES，已於 2026-08-04 依 user 裁決移除
+ * ——沒有資訊增量：讀者要的是「最後是什麼」，中途被改過是流程細節，不是這張表的
+ * 職責（要追過程走 market detail）。
+ */
+export const FinalOutcomeCell = ({ leg }: { leg: ResolutionLeg }) => {
+    if (!leg.finalOutcome) return <MediumText className="text-quaternary">—</MediumText>;
+    return <OutcomeText label={leg.finalOutcome} slot={leg.finalOutcomeSlot ?? 2} displayLabel={leg.finalOutcomeLabel} />;
+};
+
+/**
+ * 公開列表 Finalized 的「有沒有被吵過」（2026-08-05 user 要求）。只有兩個值：
+ * Disputed / No dispute。刻意不寫成 accepted / rejected —— 這個讀者是旁觀者，他要
+ * 的是「這個結果經不經過爭議」這個可信度訊號；審理判給誰是 dispute 提出者才在意
+ * 的事，在 My Disputes 那張表上。也因此不上任何極性色，也不掛圓點。
+ */
+export const ChallengedCell = ({ leg }: { leg: ResolutionLeg }) => {
+    const disputed = (leg.disputeResult ?? "none") !== "none";
+    return <MediumText className="text-primary">{disputed ? "Disputed" : "No dispute"}</MediumText>;
+};
+
+export const DisputeKindCell = ({ kind }: { kind?: DisputeKind }) => (
+    <MediumText className={cn("truncate", kind ? "text-primary" : "text-quaternary")}>
+        {kind ? DISPUTE_KIND_LABELS[kind] : "—"}
+    </MediumText>
+);
+
+// ── 手機列（md/960 以下才會被畫到；見 dispute-table 檔頭的 Mobile fold）─────────
+//
+// 兩段式，照 production 手機版 Position 列（user 2026-08-04 指定的參考排法）：
+//
+//   Donald Trump - YES              $18.489   [Trade]   ← 身分行
+//   Shares   Avg. Cost   Last Price   Unrealized PnL     ← 標籤列
+//   10       68¢         45           +$1,800 ▲27.4%     ← 值列
+//
+// 關鍵是**度量列橫向鋪滿整個列寬**，標籤與值上下對齊成兩排。原本那版把欄位全部
+// 堆進一個 112px 的窄欄裡往下長，一列七個欄位會堆得比一張卡還高、左邊留一大片
+// 空白——那是把「摺疊」誤讀成「換方向」。
+
+/**
+ * 手機列的身分行：左邊是這支腿是誰、右邊是動作。
+ *
+ * 與 production 的一處刻意偏離：production 把「Donald Trump - YES」整串上
+ * outcome 綠 / 紅；這裡只有 outcome 那個字上色，選項名維持中性。理由是
+ * `OutcomeText` 已經編碼了一條既有裁決——具名選項（隊伍名 / 候選人名）不得套
+ * outcome 極性色，否則同一個字串同時宣告兩套互斥色系（見根目錄 CLAUDE.md 的
+ * Outcome / Team Dual System）。要改成 production 那樣得先推翻那條裁決。
+ */
+export const MobileLeadLine = ({
+    identity,
+    sub,
+    action,
+}: {
+    identity: React.ReactNode;
+    /** 身分底下一行安靜的補充（例如 dispute 的理由）。放不進度量列的長文字歸這裡。 */
+    sub?: React.ReactNode;
+    action?: React.ReactNode;
+}) => (
+    <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 flex-col gap-0.5">
+            <div className="flex min-w-0 items-center gap-1.5">{identity}</div>
+            {sub}
+        </div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+);
+
+/**
+ * 手機列的度量列：標籤一排、值一排，欄數由 items 決定、等寬鋪滿列寬。
+ *
+ * 單一 grid 排 2N 個子項（前 N 個是標籤、後 N 個是值），讓標籤與值落在同一組
+ * 軌道上——這就是參考圖那種「值對齊在自己標籤底下」的來源。各自 flex 排會讓
+ * 兩排的斷點不一致。
+ *
+ * 第一欄靠左、其餘靠右（同參考圖的 Shares 靠左、其餘靠右）：數字靠右才掃得動。
+ *
+ * 欄寬是 `max-content` 而非等分：參考圖的欄本來就不等寬（Shares 那欄很窄、
+ * Unrealized PnL 那欄要裝「+$1,800 ▲27.4%」）。等分會讓最寬的那欄被截掉、
+ * 最窄的那欄留一堆空白。`minmax(0,max-content)` 讓每欄拿自己需要的寬度，
+ * space-between 把剩下的空間攤在欄與欄之間；真的裝不下時仍可縮並 truncate。
+ */
+export const MobileMetrics = ({ items }: { items: { label: string; node: React.ReactNode }[] }) => (
+    <div
+        className="grid justify-between gap-x-3 gap-y-1"
+        style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0,max-content))` }}
+    >
+        {items.map((item, index) => (
+            <div key={`label-${index}`} className={cn("flex min-w-0", index > 0 && "justify-end")}>
+                <SmallText className="text-tertiary truncate">{item.label}</SmallText>
+            </div>
+        ))}
+        {items.map((item, index) => (
+            <div key={`value-${index}`} className={cn("flex min-w-0 items-center", index > 0 && "justify-end")}>
+                {item.node}
+            </div>
+        ))}
+    </div>
+);
diff --git a/src/components/ResolutionDashboard/mock-data.ts b/src/components/ResolutionDashboard/mock-data.ts
new file mode 100644
index 0000000..8d8df7f
--- /dev/null
+++ b/src/components/ResolutionDashboard/mock-data.ts
@@ -0,0 +1,688 @@
+// Market Resolution（PRD v3 版）mock 資料 — 不接 API、不接錢包。
+//
+// 與 dispute-portal/mock-data.ts 的差異，全部來自 PRD v3 §5 的欄位表：
+// - stake 與 reward 從「一個值兩個欄名」拆成兩個獨立欄位：
+//   `requiredStake` / `potentialReward`（Proposed 階段的入場費與可得獎勵）與
+//   `stakedAmount` / `rewardAmount`（已提交後的實際值）。目前合約參數讓兩者
+//   相等，但它們是兩個獨立的合約值，資料層必須分開存。
+// - required stake 一律 ≥ 1000：PRD §3 的門檻是 max(1% OI, 1,000 OPN)，
+//   舊 mock 的 600 / 800 是規則上不可能出現的數字。
+// - `disputeResult`（none / accepted / rejected）補上 Finalized 階段
+//   「是否有過 dispute」這一欄的資料來源。
+// - `enteredStageAt`：In review / Finalized 的預設排序鍵（進入該階段的先後）。
+// - `raceLost`：prototype 專用旗標，用來演示「開著 modal 卻被別人搶先提交」。
+//
+// 時間一律 Unix 秒。MOCK_NOW 在 module load 時算一次，頁面的 tick 以它為起點，
+// 這樣 server 與 client 第一次渲染看到的階段一致（絕對值不同，相對關係相同）。
+
+export type ResolutionStage = "proposed" | "in_review" | "finalized";
+
+export type DisputeKind = "incorrect_outcome" | "too_early";
+
+/** Finalized 階段的 dispute 歷史。Timeout 依 PRD §3 一律併入 accepted。 */
+export type DisputeResult = "none" | "accepted" | "rejected";
+
+export type OutcomeLabel = "YES" | "NO" | "TIE";
+
+/** 0 = YES、1 = NO、2 = TIE（對照 production original_win_slot） */
+export type OutcomeSlot = 0 | 1 | 2;
+
+export interface ResolutionLeg {
+    /** leg id（對照 production questionId） */
+    id: string;
+    /** 這支腿隸屬的 market（分群用） */
+    marketId: string;
+    marketTitle: string;
+    /** multi-choice market 的子話題；binary 為 null */
+    subtopic: string | null;
+    /** 線上 market detail 的 slug。只有接真資料時才有值 */
+    slug?: string;
+    category: string;
+    proposedOutcome: OutcomeLabel;
+    proposedOutcomeSlot: OutcomeSlot;
+    /**
+     * 具名選項的顯示字（隊伍名、UP/DOWN…）。只有接真資料時才有值——production
+     * 的市場多半不是 YES/NO。有值時顯示層改印這個字並用中性色：隊伍名染 YES 綠
+     * 會把 Team Identity 與 Outcome 兩套互斥色系混在一起。
+     */
+    proposedOutcomeLabel?: string;
+    /**
+     * 具名選項的完整對照（slot → 顯示字）。倒數歸零把結果翻面時需要「另一邊叫什麼」
+     * ——只存贏家的名字的話，翻面後會退回印 YES / NO 並染上 outcome 色，那正是
+     * proposedOutcomeLabel 要避免的事。
+     */
+    outcomeLabels?: Partial<Record<OutcomeSlot, string>>;
+    stage: ResolutionStage;
+    /** 目前用戶是否交易過這個 market（Traded markets 開關用） */
+    traded: boolean;
+    /**
+     * 價格預言機自動結算的市場（BTC/ETH/BNB 每小時那批）。這類市場不經過
+     * propose / dispute 流程，只有真資料模式會出現。
+     */
+    isPriceOracle?: boolean;
+
+    // ── Proposed ───────────────────────────────────────────────────────────
+    /** 提交 dispute 所需押注（真值 = max(1% OI, 1,000 OPN)） */
+    requiredStake: number;
+    /** dispute accepted 時的額外 reward（獨立合約值，目前參數等於 required stake） */
+    potentialReward: number;
+    /** dispute window 截止 */
+    windowEndsAt?: number;
+    /** prototype：開 modal 後模擬「別人剛剛搶先提交」 */
+    raceLost?: boolean;
+
+    // ── In review ──────────────────────────────────────────────────────────
+    /** committee 審理截止 */
+    reviewEndsAt?: number;
+
+    // ── 卷宗（In review 起；完整內容僅本人可見）────────────────────────────
+    disputor?: string;
+    disputeKind?: DisputeKind;
+    disputeReason?: string;
+    disputeTxHash?: string;
+    /** 實際押注金額 */
+    stakedAmount?: number;
+    /** 審理結果對應的 reward（accepted 才有） */
+    rewardAmount?: number;
+
+    // ── Finalized ──────────────────────────────────────────────────────────
+    finalOutcome?: OutcomeLabel;
+    finalOutcomeSlot?: OutcomeSlot;
+    /** 同 proposedOutcomeLabel，定案結果的具名顯示字 */
+    finalOutcomeLabel?: string;
+    disputeResult?: DisputeResult;
+    claimed?: boolean;
+
+    /** 進入「當前階段」的時間 — In review / Finalized 的預設排序鍵 */
+    enteredStageAt: number;
+}
+
+/** mock 的「目前連線錢包」 */
+export const CURRENT_USER_ADDRESS = "0x18f6A94c43E1249E5D2D8B3F41d7C2aB90eF79d1";
+
+const OTHER_DISPUTOR = "0x7bC431fA02D8e3990a5528dD24C1e6D80B4a92E6";
+
+/** 錢包餘額（OPN）——夠付 2,400 的 stake、不夠付 3,100，讓餘額不足態可演示 */
+export const AVAILABLE_BALANCE = 2500;
+
+export const DISPUTE_DOCS_URL = "https://docs.opinion.trade/trade-on-opinion.trade/dispute";
+
+export const MOCK_NOW = Math.floor(Date.now() / 1000);
+
+const MIN = 60;
+const HOUR = 3600;
+
+export const CATEGORIES = ["Crypto", "Macro", "Politics", "Sports", "Tech", "Entertainment"] as const;
+
+export const RESOLUTION_LEGS: ResolutionLeg[] = [
+    // ── Proposed（dispute window 開放中）───────────────────────────────────
+    // 只剩不到一分鐘：同時演示「快到期」的緊迫感與倒數歸零後自動定案
+    {
+        id: "p-fed",
+        marketId: "m-fed-cut",
+        marketTitle: "Will the Fed cut rates at the July meeting?",
+        subtopic: null,
+        category: "Macro",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: true,
+        requiredStake: 1500,
+        potentialReward: 1500,
+        windowEndsAt: MOCK_NOW + 55,
+        enteredStageAt: MOCK_NOW - 2 * HOUR,
+    },
+    // 這支腿被設定成「開了 modal 才發現已被搶先」
+    {
+        id: "p-apple",
+        marketId: "m-apple-wearable",
+        marketTitle: "Will Apple announce an AI wearable at WWDC 2026?",
+        subtopic: null,
+        category: "Tech",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        windowEndsAt: MOCK_NOW + 12 * MIN,
+        raceLost: true,
+        enteredStageAt: MOCK_NOW - 1 * HOUR,
+    },
+    // multi-choice：三支腿一起進入 dispute window
+    {
+        id: "p-nba-a",
+        marketId: "m-nba-finals",
+        marketTitle: "NBA Finals 2026 — series winner",
+        subtopic: "Oklahoma City Thunder",
+        category: "Sports",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "proposed",
+        traded: true,
+        requiredStake: 3100,
+        potentialReward: 3100,
+        windowEndsAt: MOCK_NOW + 26 * MIN,
+        enteredStageAt: MOCK_NOW - 94 * MIN,
+    },
+    {
+        id: "p-nba-b",
+        marketId: "m-nba-finals",
+        marketTitle: "NBA Finals 2026 — series winner",
+        subtopic: "Boston Celtics",
+        category: "Sports",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: true,
+        requiredStake: 3100,
+        potentialReward: 3100,
+        windowEndsAt: MOCK_NOW + 26 * MIN,
+        enteredStageAt: MOCK_NOW - 94 * MIN,
+    },
+    {
+        id: "p-nba-c",
+        marketId: "m-nba-finals",
+        marketTitle: "NBA Finals 2026 — series winner",
+        subtopic: "Denver Nuggets",
+        category: "Sports",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: true,
+        requiredStake: 3100,
+        potentialReward: 3100,
+        windowEndsAt: MOCK_NOW + 26 * MIN,
+        enteredStageAt: MOCK_NOW - 94 * MIN,
+    },
+    // multi-choice：四支腿，倒數相同（同一場結算一起 propose）
+    {
+        id: "p-dem-a",
+        marketId: "m-dem-primary",
+        marketTitle: "Democratic nominee for 2028 — who wins the primary?",
+        subtopic: "Gavin Newsom",
+        category: "Politics",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        windowEndsAt: MOCK_NOW + 47 * MIN,
+        enteredStageAt: MOCK_NOW - 73 * MIN,
+    },
+    {
+        id: "p-dem-b",
+        marketId: "m-dem-primary",
+        marketTitle: "Democratic nominee for 2028 — who wins the primary?",
+        subtopic: "Josh Shapiro",
+        category: "Politics",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        windowEndsAt: MOCK_NOW + 47 * MIN,
+        enteredStageAt: MOCK_NOW - 73 * MIN,
+    },
+    {
+        id: "p-dem-c",
+        marketId: "m-dem-primary",
+        marketTitle: "Democratic nominee for 2028 — who wins the primary?",
+        subtopic: "Alexandria Ocasio-Cortez",
+        category: "Politics",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "proposed",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        windowEndsAt: MOCK_NOW + 47 * MIN,
+        enteredStageAt: MOCK_NOW - 73 * MIN,
+    },
+    {
+        id: "p-dem-d",
+        marketId: "m-dem-primary",
+        marketTitle: "Democratic nominee for 2028 — who wins the primary?",
+        subtopic: "Pete Buttigieg",
+        category: "Politics",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "proposed",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        windowEndsAt: MOCK_NOW + 47 * MIN,
+        enteredStageAt: MOCK_NOW - 73 * MIN,
+    },
+    {
+        id: "p-sol",
+        marketId: "m-sol-etf",
+        marketTitle: "Will the SEC approve a Solana spot ETF by June 30?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "proposed",
+        traded: true,
+        requiredStake: 2400,
+        potentialReward: 2400,
+        windowEndsAt: MOCK_NOW + 92 * MIN,
+        enteredStageAt: MOCK_NOW - 28 * MIN,
+    },
+
+    // ── In review（committee 審理中）────────────────────────────────────────
+    // 審理倒數只剩 95 秒：演示 Timeout（committee 沒趕上）→ 依 PRD §3 視為 accepted
+    {
+        id: "r-eth",
+        marketId: "m-eth-etf-options",
+        marketTitle: "Will Ethereum spot ETF options begin trading in Q2?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "in_review",
+        traded: true,
+        requiredStake: 2400,
+        potentialReward: 2400,
+        reviewEndsAt: MOCK_NOW + 95,
+        disputor: OTHER_DISPUTOR,
+        disputeKind: "incorrect_outcome",
+        disputeTxHash: "0xba51c60e92d34f7a8801fe4d3b976c25da10e84fc7b3d2960ac5f18e74d20c93",
+        stakedAmount: 2400,
+        enteredStageAt: MOCK_NOW - 47 * HOUR,
+    },
+    {
+        id: "r-btc",
+        marketId: "m-btc-150k",
+        marketTitle: "Will BTC close above $150K on May 31?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "in_review",
+        traded: true,
+        requiredStake: 2400,
+        potentialReward: 2400,
+        reviewEndsAt: MOCK_NOW + 18 * HOUR,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "The market was resolved to YES, but the official close on May 31 (UTC) was $148,220 per the agreed Coinbase reference feed.\n\nAccording to the market rules, the outcome should be NO.",
+        disputeTxHash: "0x9f2c41d88a3be7c05f16d2b09e5a44cd310f8a26bb74e0912c5d8ce03b6a71f4",
+        stakedAmount: 2400,
+        enteredStageAt: MOCK_NOW - 6 * HOUR,
+    },
+    // multi-choice：同一個 market 兩支腿被不同人 dispute
+    {
+        id: "r-grammy-a",
+        marketId: "m-grammys-aoty",
+        marketTitle: "Grammys 2026 — Album of the Year",
+        subtopic: "Olivia Rodrigo",
+        category: "Entertainment",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "in_review",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        reviewEndsAt: MOCK_NOW + 40 * HOUR,
+        disputor: OTHER_DISPUTOR,
+        disputeKind: "too_early",
+        disputeTxHash: "0x3d84ab02c7e1f6690b2245ad18c9ef73a60d15b8f4c2e97d01aa6cf258e93b07",
+        stakedAmount: 1000,
+        enteredStageAt: MOCK_NOW - 2 * HOUR,
+    },
+    {
+        id: "r-grammy-b",
+        marketId: "m-grammys-aoty",
+        marketTitle: "Grammys 2026 — Album of the Year",
+        subtopic: "Tyler, The Creator",
+        category: "Entertainment",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "in_review",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        reviewEndsAt: MOCK_NOW + 40 * HOUR,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "The Recording Academy has not published the final ballot; the resolution cites a leaked list, not the rulebook source.",
+        disputeTxHash: "0x60d2ba15fc9037e8410ad5b2c7e94f3168d0a72be5c418f9037ac6de52b19048",
+        stakedAmount: 1000,
+        enteredStageAt: MOCK_NOW - 2 * HOUR,
+    },
+    {
+        id: "r-cpi",
+        marketId: "m-cpi-march",
+        marketTitle: "Will US CPI YoY fall below 2.5% in the March print?",
+        subtopic: null,
+        category: "Macro",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "in_review",
+        traded: false,
+        requiredStake: 1800,
+        potentialReward: 1800,
+        reviewEndsAt: MOCK_NOW + 8 * HOUR,
+        disputor: OTHER_DISPUTOR,
+        disputeKind: "too_early",
+        disputeTxHash: "0x1c47ae90b2d5f8630a91de24c7b5f0e83d6a41cb90e2f7583a14dc6be05f9273",
+        stakedAmount: 1800,
+        enteredStageAt: MOCK_NOW - 30 * MIN,
+    },
+
+    // ── Finalized ───────────────────────────────────────────────────────────
+    // 我的 dispute 成立、還沒領 → My disputes 的「可領」區
+    {
+        id: "f-nfp",
+        marketId: "m-nfp-june",
+        marketTitle: "Will June nonfarm payrolls come in above 150K?",
+        subtopic: null,
+        category: "Macro",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1800,
+        potentialReward: 1800,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "The BLS revision published on July 3 puts the June print at 139K. The resolution used the preliminary release, which the rules exclude.",
+        disputeTxHash: "0x8d31c07ae2b46f9508a1de73c2b9f04e61da85cf37b0e2941ac6df58e2470b19",
+        stakedAmount: 1800,
+        rewardAmount: 1800,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "accepted",
+        claimed: false,
+        enteredStageAt: MOCK_NOW - 3 * HOUR,
+    },
+    {
+        id: "f-btc-opt",
+        marketId: "m-btc-etf-options",
+        marketTitle: "Will the SEC approve a BTC ETF options expansion by Oct 31?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 2400,
+        potentialReward: 2400,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "The market was resolved to YES, but the official SEC announcement on Oct 29 clearly states that the ETF decision was postponed to June 15.\n\nAccording to the market rules, the outcome should remain unresolved until the final decision is published.",
+        disputeTxHash: "0x51f0de772c48a9b3e6d04c15fb28a790c3d6e412ba09f857c624de1a80b53f96",
+        stakedAmount: 2400,
+        rewardAmount: 2400,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "accepted",
+        claimed: false,
+        enteredStageAt: MOCK_NOW - 4 * HOUR,
+    },
+    // multi-choice：三支腿一起定案，其中一支被我 dispute 但沒成立
+    {
+        id: "f-wc-a",
+        marketId: "m-wc-top-scorer",
+        marketTitle: "FIFA World Cup 2026 — group stage top scorer team",
+        subtopic: "Argentina",
+        category: "Sports",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "Official FIFA stats page credits France with 11 group-stage goals vs Argentina's 9. Resolution source was a fan aggregator, not the rulebook source.",
+        disputeTxHash: "0xe86b3f14ac02d5790cb1268a4fe5d9370a2c41b6de08f7532b19ac60e5d7248a",
+        stakedAmount: 1000,
+        finalOutcome: "YES",
+        finalOutcomeSlot: 0,
+        disputeResult: "rejected",
+        enteredStageAt: MOCK_NOW - 20 * HOUR,
+    },
+    {
+        id: "f-wc-b",
+        marketId: "m-wc-top-scorer",
+        marketTitle: "FIFA World Cup 2026 — group stage top scorer team",
+        subtopic: "France",
+        category: "Sports",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "none",
+        enteredStageAt: MOCK_NOW - 20 * HOUR,
+    },
+    {
+        id: "f-wc-c",
+        marketId: "m-wc-top-scorer",
+        marketTitle: "FIFA World Cup 2026 — group stage top scorer team",
+        subtopic: "Brazil",
+        category: "Sports",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "none",
+        enteredStageAt: MOCK_NOW - 20 * HOUR,
+    },
+    {
+        id: "f-openai",
+        marketId: "m-openai-device",
+        marketTitle: "Will OpenAI ship an on-device model for iPhone this year?",
+        subtopic: null,
+        category: "Tech",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        finalOutcome: "YES",
+        finalOutcomeSlot: 0,
+        disputeResult: "none",
+        enteredStageAt: MOCK_NOW - 30 * HOUR,
+    },
+    {
+        id: "f-picture",
+        marketId: "m-best-picture",
+        marketTitle: "Best Picture 2026 — Academy Awards",
+        subtopic: "Sinners 2",
+        category: "Entertainment",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1200,
+        potentialReward: 1200,
+        disputor: OTHER_DISPUTOR,
+        disputeKind: "incorrect_outcome",
+        disputeTxHash: "0x2a90cd47e13b58f6a2d07c94be86f1350c4d2e8ba761f0e925ac83d1604b97ce",
+        stakedAmount: 1200,
+        rewardAmount: 1200,
+        finalOutcome: "YES",
+        finalOutcomeSlot: 0,
+        disputeResult: "accepted",
+        enteredStageAt: MOCK_NOW - 52 * HOUR,
+    },
+    // 我的 dispute 成立、已經領過 → My disputes 的「已結案」區
+    {
+        id: "f-ton",
+        marketId: "m-ton-top10",
+        marketTitle: "Will TON enter the top 10 by market cap before July?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1500,
+        potentialReward: 1500,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "too_early",
+        disputeReason:
+            "Resolution was proposed before the month-end snapshot defined in the rules. CoinGecko month-end ranking was not yet published.",
+        disputeTxHash: "0x77c1e04fb92ad6385a10de52c94b7f2e60d3a81cf45b9e37012dc8f6ae54b210",
+        stakedAmount: 1500,
+        rewardAmount: 1500,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "accepted",
+        claimed: true,
+        enteredStageAt: MOCK_NOW - 70 * HOUR,
+    },
+    // ── 我的更多歷史卷宗（2026-08-04 user 要求）：補足 Rejected 範例、並把
+    //    My disputes 推過一頁（PAGE_SIZE=8）讓分頁真的出現 ─────────────────
+    {
+        id: "f-eth-etf-opt",
+        marketId: "m-eth-etf-options",
+        marketTitle: "Will ETH spot ETF options list by Sep 30?",
+        subtopic: null,
+        category: "Crypto",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1200,
+        potentialReward: 1200,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "CBOE listed the options on Oct 2, not Sep 30. The rulebook cutoff is exchange listing date, and the resolution used the SEC approval date instead.",
+        disputeTxHash: "0x2a9fd613c05e8b47a1f0de92c67b3e58d04a1cf9b6e2735810dc4f7ae96b3521",
+        stakedAmount: 1200,
+        finalOutcome: "YES",
+        finalOutcomeSlot: 0,
+        disputeResult: "rejected",
+        enteredStageAt: MOCK_NOW - 26 * HOUR,
+    },
+    {
+        id: "f-cpi-july",
+        marketId: "m-cpi-july",
+        marketTitle: "Will July CPI come in below 3.0%?",
+        subtopic: null,
+        category: "Macro",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "finalized",
+        traded: false,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "too_early",
+        disputeReason:
+            "The BLS release for July CPI is scheduled for Aug 12. Resolution was proposed nine days before the source data exists.",
+        disputeTxHash: "0x9c4e2b71fa06d3852c0b1ef748a95d63e17c0af25b8d4936e02fc1b7da685e40",
+        stakedAmount: 1000,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "rejected",
+        enteredStageAt: MOCK_NOW - 44 * HOUR,
+    },
+    {
+        id: "f-fold-iphone",
+        marketId: "m-foldable-iphone",
+        marketTitle: "Will Apple ship a foldable iPhone in 2026?",
+        subtopic: null,
+        category: "Tech",
+        proposedOutcome: "YES",
+        proposedOutcomeSlot: 0,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 2000,
+        potentialReward: 2000,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "The September keynote announced a concept device with no ship date. The rules require general availability, not an announcement.",
+        disputeTxHash: "0x6be03d97f24ac1580e9d3bf162c84a75d90e2cb841f6a3d752c8e01fb4d97a63",
+        stakedAmount: 2000,
+        rewardAmount: 2000,
+        finalOutcome: "NO",
+        finalOutcomeSlot: 1,
+        disputeResult: "accepted",
+        claimed: true,
+        enteredStageAt: MOCK_NOW - 90 * HOUR,
+    },
+    {
+        id: "f-oil-80",
+        marketId: "m-oil-80",
+        marketTitle: "Will Brent crude close above $80 in July?",
+        subtopic: null,
+        category: "Macro",
+        proposedOutcome: "NO",
+        proposedOutcomeSlot: 1,
+        stage: "finalized",
+        traded: true,
+        requiredStake: 1300,
+        potentialReward: 1300,
+        disputor: CURRENT_USER_ADDRESS,
+        disputeKind: "incorrect_outcome",
+        disputeReason:
+            "ICE settlement price on July 31 was $81.42. The resolution cited an intraday quote from July 30 instead of the rulebook's settlement print.",
+        disputeTxHash: "0x03fa8d52e67b1c49a2d0be91f38c5a76e14d2cf05b7e9a3861fc4d20eb75c918",
+        stakedAmount: 1300,
+        rewardAmount: 1300,
+        finalOutcome: "YES",
+        finalOutcomeSlot: 0,
+        disputeResult: "accepted",
+        claimed: false,
+        enteredStageAt: MOCK_NOW - 110 * HOUR,
+    },
+
+    // ── 無人 dispute 的定案（歷史）─────────────────────────────────────────
+    // 上面那批 mock 是為了演示 dispute 的各種狀態才存在的，所以爭議比例高得不真實。
+    // production 的實況是**絕大多數結算沒有人挑戰**——這件事本身是產品要傳達的訊息
+    // （見 HW-T2 的分岔粗細，粗細直接讀這裡的比例）。這批純粹補回那個母體。
+    ...([
+        ["m-eth-4k", "Will ETH close above $4,000 in June?", "Crypto", "YES", 0, 8],
+        ["m-uk-election", "Will the UK call a general election before September?", "Politics", "NO", 1, 11],
+        ["m-nvda-split", "Will NVIDIA announce another stock split this year?", "Tech", "NO", 1, 15],
+        ["m-ecb-cut", "Will the ECB cut rates before the Fed?", "Macro", "YES", 0, 19],
+        ["m-champions", "Champions League 2026 — will the final go to extra time?", "Sports", "NO", 1, 24],
+        ["m-taylor-tour", "Will Taylor Swift announce 2027 tour dates by July?", "Entertainment", "NO", 1, 29],
+        ["m-btc-dominance", "Will BTC dominance stay above 55% through Q2?", "Crypto", "YES", 0, 33],
+        ["m-jobless", "Will weekly jobless claims top 260K in June?", "Macro", "NO", 1, 38],
+        ["m-apple-vision", "Will Apple ship Vision Pro 2 before September?", "Tech", "NO", 1, 44],
+        ["m-nba-mvp", "NBA 2026 — will the MVP come from the Western Conference?", "Sports", "YES", 0, 51],
+        ["m-sol-flip", "Will Solana flip Ethereum by daily fees in June?", "Crypto", "NO", 1, 58],
+        ["m-cpi-core", "Will core CPI print below 3.0% in the June release?", "Macro", "YES", 0, 63],
+    ] as const).map(([marketId, marketTitle, category, outcome, slot, hoursAgo]) => ({
+        id: `f-quiet-${marketId}`,
+        marketId,
+        marketTitle,
+        subtopic: null,
+        category,
+        proposedOutcome: outcome as OutcomeLabel,
+        proposedOutcomeSlot: slot as OutcomeSlot,
+        stage: "finalized" as const,
+        traded: hoursAgo % 3 === 0,
+        requiredStake: 1000,
+        potentialReward: 1000,
+        finalOutcome: outcome as OutcomeLabel,
+        finalOutcomeSlot: slot as OutcomeSlot,
+        disputeResult: "none" as const,
+        enteredStageAt: MOCK_NOW - hoursAgo * HOUR,
+    })),
+];
+
+export const formatOpn = (value: number) => value.toLocaleString("en-US");
diff --git a/src/components/ResolutionDashboard/my-disputes-rows.tsx b/src/components/ResolutionDashboard/my-disputes-rows.tsx
new file mode 100644
index 0000000..e9aa815
--- /dev/null
+++ b/src/components/ResolutionDashboard/my-disputes-rows.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+
+// My Disputes（Dashboard × Rows 組合的下半部）。
+//
+// 2026-08-04（與 PM 談後）：這一區改成與公開列表（All Proposals，見
+// resolution-list-view.tsx）**同一套組件與做法**——DisputeTable 分群列表 + 欄名 +
+// 分頁，篩選走 In review / Finalized 兩顆（原本三顆，All 已於 2026-08-05 移除）。
+//
+// 這次收斂放棄了 MD-2 的那條 Filed → In review → Ruled → Claimed 進度軌：欄模型
+// 放不下一個固定寬的軌道欄（欄寬由 gridTemplateColumns 統一宣告），狀態改用文字欄
+// 表達。同一份清單在站上只有一種長相，比多一條圖形軌重要。
+//
+// 分法仍用「委員會裁決了沒」而不是四個 state：In review = 還在等，其餘（可領 /
+// 已領 / 被駁回）都已經有結果 = Finalized。刻意用公開列表的同一組詞——同一個階段
+// 在兩張表上叫不同名字，讀者會以為是兩件事。
+import { useMemo, useState } from "react";
+import { Button, Card, H3, MediumText, SmallText, Stack, Tooltip } from "@olab/components";
+import cn from "classnames";
+import { DisputeTable, type DisputeTableColumn, type DisputeTableSort } from "./dispute-table";
+import { CountdownTimer } from "./countdown-timer";
+import { StepTabs } from "./step-tabs";
+import { CURRENT_USER_ADDRESS, type ResolutionLeg, formatOpn } from "./mock-data";
+import { groupLegs, groupLegsInOrder } from "./leg-derive";
+import {
+    DisputeKindCell,
+    MarketTitleLink,
+    MobileLeadLine,
+    MobileMetrics,
+    OpnAmount,
+    ResultDot,
+    OutcomeText,
+    SubtopicCell,
+} from "./leg-parts";
+
+const PAGE_SIZE = 8;
+
+// ── 分桶 ─────────────────────────────────────────────────────────────────────
+
+type Bucket = "claimable" | "review" | "claimed" | "rejected";
+
+const bucketOf = (leg: ResolutionLeg): Bucket => {
+    if (leg.stage === "in_review") return "review";
+    if (leg.disputeResult === "rejected") return "rejected";
+    return leg.claimed ? "claimed" : "claimable";
+};
+
+/** 可以領的排最前面（那是 user 的錢），再是還在等的，最後是已經結案的 */
+const ORDER: Record<Bucket, number> = { claimable: 0, review: 1, claimed: 2, rejected: 3 };
+
+/**
+ * 可排序欄背後的值（2026-08-04 user 要求）。Status 排的是 bucket 的階段順序
+ * （ORDER），不是字母序——讀者按 Status 想看到的是「同一種狀態聚在一起」，
+ * 而且順序要跟預設那條「可領 → 審理中 → 已結案」的邏輯一致。
+ */
+const SORT_VALUE: Record<string, (_leg: ResolutionLeg) => number> = {
+    stake: (leg) => leg.stakedAmount ?? 0,
+    potentialReward: (leg) => leg.rewardAmount ?? leg.potentialReward,
+    // desc = 越「待辦」的排越前面，所以把 ORDER 反過來（ORDER 0 = 可領 = 最大）
+    status: (leg) => -ORDER[bucketOf(leg)],
+};
+
+// All 已於 2026-08-05 依 user 裁決移除：兩個檢視合起來就是全部，中間那顆 All 只是
+// 把同一批列再列一次，而且它是唯一需要「Status 欄混著三種狀態」的檢視。
+// 預設落在 Finalized：可以領的錢在那裡（上面那行 Ready to claim 講的就是它），
+// 進來先看到待辦比先看到「還在等」有用。
+type RowsTab = "review" | "finalized";
+
+// ── 狀態欄 ───────────────────────────────────────────────────────────────────
+
+// 狀態欄直接把「這筆走到哪」寫出來。文案直接講委員會的裁決（2026-08-04 user
+// 裁決）：「Ready to claim」講的是下一步動作，但讀者先想知道的是「我贏了沒」。
+//
+// 2026-08-05 user 裁決：四種狀態一律白字，Accepted / Rejected 的極性改由前面那顆
+// 綠 / 紅圓點承擔（見 leg-parts 的 ResultDot）。色票仍是 system state 的
+// success / error，不是 outcome-yes/no——後者是預測極性，跟審理結果無關。前一版的
+// 綠字 / 紅字 / 灰字 Claimed 當歷史紀錄讀。
+//
+// 2026-08-05 user 裁決：已領的那些 Result 也寫 Accepted——委員會的裁決是 accepted，
+// 「我領了沒」是另一件事，由 CTA 那顆按鈕（Claimed）交代。這一欄只講裁決結果。
+const STATUS_COPY: Record<Bucket, { label: string; dot?: "success" | "error" }> = {
+    claimable: { label: "Accepted", dot: "success" },
+    review: { label: "In review" },
+    claimed: { label: "Accepted", dot: "success" },
+    rejected: { label: "Rejected", dot: "error" },
+};
+
+// In review 檢視這一欄只印倒數（2026-08-05 user 裁決）：欄名已經是 Window ends in、
+// tab 也叫 In review，格子裡再寫一次 In review 是同一句話講三遍。
+// Finalized 檢視才印裁決結果 + 圓點。
+const StatusCell = ({ leg }: { leg: ResolutionLeg }) => {
+    const bucket = bucketOf(leg);
+    if (bucket === "review") {
+        return leg.reviewEndsAt ? (
+            <CountdownTimer deadlineTimestamp={leg.reviewEndsAt} size="medium" />
+        ) : (
+            <MediumText className="text-quaternary">—</MediumText>
+        );
+    }
+    const { label, dot } = STATUS_COPY[bucket];
+    return (
+        <div className="flex items-center gap-2">
+            {dot ? <ResultDot tone={dot} /> : null}
+            <MediumText className="text-primary truncate">{label}</MediumText>
+        </div>
+    );
+};
+
+// ── 空狀態 ───────────────────────────────────────────────────────────────────
+
+// 文案照 playground 定稿（PRD §4.3 / §6）：兩條都講完「這裡以後會出現什麼」，
+// 並給一條回公開列表的路。「Sign In」跟 production nav 用同一個詞——這裡再說
+// Connect wallet 等於同一個畫面上兩套講法。
+const EMPTY_COPY = {
+    signedout: {
+        title: "Sign in to see your disputes",
+        body: (openWindows: number) =>
+            `Stakes you file, how the committee ruled on them, and any reward waiting to be claimed are listed here. ${openWindows} proposed outcomes are inside their dispute window right now.`,
+        primary: "Sign In",
+    },
+    none: {
+        title: "You have not filed a dispute yet",
+        body: (openWindows: number) =>
+            `Stake against a proposed outcome and it stays here until the committee rules — with the reward if the dispute is accepted. ${openWindows} outcomes are inside their window right now.`,
+        primary: null,
+    },
+} as const;
+
+// ── 主體 ─────────────────────────────────────────────────────────────────────
+
+export interface MyDisputesRowsProps {
+    legs: ResolutionLeg[];
+    isConnected: boolean;
+    /** 「我」是誰。真資料模式下可傳某個真實 disputor 的地址 */
+    disputorAddress?: string;
+    /** 真資料模式：Claim 是鏈上交易，唯讀時停用 */
+    readOnly?: boolean;
+    onSignIn: () => void;
+    onBrowse: () => void;
+    onView: (_leg: ResolutionLeg) => void;
+    onClaim: (_leg: ResolutionLeg) => void;
+    onClaimAll?: (_legs: ResolutionLeg[]) => void;
+    /** 市場名連到 market detail（真資料模式才有 href） */
+    hrefForLeg?: (_leg: ResolutionLeg) => string | undefined;
+}
+
+export function MyDisputesRows({
+    legs,
+    isConnected,
+    disputorAddress = CURRENT_USER_ADDRESS,
+    readOnly = false,
+    onSignIn,
+    onBrowse,
+    onView,
+    onClaim,
+    onClaimAll,
+    hrefForLeg,
+}: MyDisputesRowsProps) {
+    const [tab, setTab] = useState<RowsTab>("finalized");
+    const [page, setPage] = useState(1);
+    const [sort, setSort] = useState<DisputeTableSort | null>(null);
+
+    // 地址大小寫不一致是常態（API 回小寫、前端常存 checksum 格式）
+    const mine = useMemo(
+        () =>
+            isConnected
+                ? [...legs.filter((leg) => leg.disputor?.toLowerCase() === disputorAddress.toLowerCase())].sort(
+                      (a, b) => ORDER[bucketOf(a)] - ORDER[bucketOf(b)] || b.enteredStageAt - a.enteredStageAt,
+                  )
+                : [],
+        [legs, isConnected, disputorAddress],
+    );
+
+    const claimable = mine.filter((leg) => bucketOf(leg) === "claimable");
+    const claimableTotal = claimable.reduce((sum, leg) => sum + (leg.stakedAmount ?? 0) + (leg.rewardAmount ?? 0), 0);
+    const allClaimed = mine.length > 0 && claimable.length === 0 && mine.every((leg) => bucketOf(leg) !== "review");
+    const openWindows = legs.filter((leg) => leg.stage === "proposed").length;
+
+    const buckets: Record<RowsTab, ResolutionLeg[]> = {
+        review: mine.filter((leg) => bucketOf(leg) === "review"),
+        finalized: mine.filter((leg) => bucketOf(leg) !== "review"),
+    };
+    // 排序在分群之前（分群只是把同一 market 的腿收在一起，不改順序）：sort 為 null
+    // 時維持 mine 的預設順序（可領 → 審理中 → 已結案，同組內新的在前）。
+    const sorted = useMemo(() => {
+        const rows = buckets[tab];
+        const value = sort && SORT_VALUE[sort.column];
+        if (!value) return rows;
+        const sign = sort!.direction === "desc" ? -1 : 1;
+        return [...rows].sort((a, b) => sign * (value(a) - value(b)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mine, tab, sort]);
+    const shown = sorted;
+
+    // 分頁切在腿的層級（同公開列表的已知缺口）：一個 market 的腿跨頁時，
+    // 兩頁各自會有一段同名群組。
+    const pageLegs = shown.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+    // 有排序時要用保序版分群：groupLegs 會照自己的 sortKey 重排群內的腿，會把
+    // 使用者剛選的排序蓋掉。
+    const pageGroups = useMemo(() => (sort ? groupLegsInOrder(pageLegs) : groupLegs(pageLegs)), [pageLegs, sort]);
+
+    // brand-subtle（2026-08-04 user 裁決）：Claim 仍是 brand 語意的動作，但一張表上
+    // 可能同時有好幾顆，實心橘會把整欄變成一排燈；tint 底 + brand 字保留識別度而
+    // 不搶版面。這顆 skin 是 production 既有的，本 repo 的 vendored 版本先前漏帶，
+    // 已依原始定義補上（見 packages/components/src/components/Button）。
+    // 三顆按鈕（Claim / Claimed / View）固定同寬（2026-08-05 user 裁決）：它們在
+    // 同一欄上下相鄰，寬度隨字數浮動會讓右邊界看起來歪。寬度取最長的那顆
+    // （Claimed），其餘兩顆撐到同寬。
+    const CTA_WIDTH = "w-[84px]";
+
+    const claimButton = (leg: ResolutionLeg) =>
+        readOnly ? (
+            <Tooltip content="Read-only mode — claiming is an on-chain transaction." asChild>
+                <div className="w-fit cursor-default">
+                    <Button size="sm" skin="brand-subtle" className={CTA_WIDTH} disabled>
+                        Claim
+                    </Button>
+                </div>
+            </Tooltip>
+        ) : (
+            <Button size="sm" skin="brand-subtle" className={CTA_WIDTH} onClick={() => onClaim(leg)}>
+                Claim
+            </Button>
+        );
+
+    // 可以領的那一列給 brand 按鈕（把錢拿回來），其餘一律 View——照 my-disputes-view
+    // 的同一條規則：一張表上只有一個動作值得 brand。
+    // 已領的那一列把狀態寫在按鈕上（2026-08-05 user 裁決）：Result 欄講的是委員會
+    // 判了什麼（Accepted），「我已經領走了」是我自己的進度，寫在動作的位置上最省。
+    // 它仍是可按的（開同一份卷宗），只是標籤陳述狀態而不是動作。
+    // 已領的那顆是 disabled（2026-08-05 user 裁決）：它的標籤陳述的是狀態
+    // （Claimed）而不是動作，一顆長得可按、按下去卻只是重複已完成的事的按鈕，
+    // 會讓人以為還有一步要做。這一列的卷宗仍可從 Result 欄的內容讀到。
+    const ctaCell = (leg: ResolutionLeg) => {
+        const bucket = bucketOf(leg);
+        if (bucket === "claimable") return claimButton(leg);
+        if (bucket === "claimed")
+            return (
+                <Button size="sm" skin="secondary" className={CTA_WIDTH} disabled>
+                    Claimed
+                </Button>
+            );
+        return (
+            <Button size="sm" skin="secondary" className={CTA_WIDTH} onClick={() => onView(leg)}>
+                View
+            </Button>
+        );
+    };
+
+    const marketsColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        // 欄名照公開列表寫 Markets：這一欄裝的是市場名（群組標題）與底下各支腿的子話題
+        name: "markets",
+        title: "Markets",
+        width,
+        render: (leg) => <SubtopicCell leg={leg} />,
+    });
+
+    // 這一欄的值是 leg.proposedOutcome —— 結算方提出、而「我」出手挑戰的那個結果。
+    // 欄名「Original outcome」（2026-08-04 user 最終裁決，與公開列表 In review
+    // 檢視同名）：original 只陳述「這是被挑戰前的原始值」，不宣稱是誰提的，也
+    // 短到單行放得下。同日曾試過 Disputed outcome / Outcome I disputed /
+    // Outcome I proposed，皆已被本裁決取代，當歷史紀錄讀。
+    const outcomeColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        name: "disputedOutcome",
+        title: "Original outcome",
+        width,
+        render: (leg) => (
+            <OutcomeText label={leg.proposedOutcome} slot={leg.proposedOutcomeSlot} displayLabel={leg.proposedOutcomeLabel} />
+        ),
+    });
+
+    // Stake 與 Reward 是兩個獨立的合約值，分兩欄（2026-08-04 user 裁決，同公開
+    // 列表 Required stake / Potential reward 的分欄理由）。
+    // 三個數值 / 狀態欄可排序（2026-08-04 user 要求）；Markets 與 Disputed outcome
+    // 不排——前者的順序由分群決定，後者是類別不是量級。
+    // 金額一律白字（2026-08-05 user 裁決）：原本已領的押金 / 被駁回的獎勵會降灰，
+    // 現在「這筆走到哪」只由 Status 欄講一次。
+    const stakeColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        name: "stake",
+        title: "My stake",
+        width,
+        sortable: true,
+        // 被駁回的押金後面掛 (Forfeited)（2026-08-05 user 裁決）：這筆錢沒有回來，
+        // 而數字本身看不出來——Status 的 Rejected 講的是裁決，這裡講的是我的錢。
+        render: (leg) => <OpnAmount value={leg.stakedAmount} note={bucketOf(leg) === "rejected" ? "Forfeited" : undefined} />,
+    });
+
+    // 這一欄講的是「這筆賭注的獎勵」。被駁回的印「—」（沒有這筆錢），審理中還沒有
+    // rewardAmount，退回合約的 potentialReward（那是「若 accepted 會拿到多少」）。
+    const rewardColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        name: "potentialReward",
+        title: "Potential reward",
+        width,
+        sortable: true,
+        render: (leg) => {
+            // 被駁回 = 這筆獎勵不存在，印「—」而不是印一個沒發生的數字
+            // （2026-08-05 user 裁決，推翻同年 08-04 的「照印再降灰」）。
+            if (bucketOf(leg) === "rejected") return <OpnAmount />;
+            return <OpnAmount value={leg.rewardAmount ?? leg.potentialReward} />;
+        },
+    });
+
+    // 我當初是以哪個理由 dispute 的（2026-08-04 user 要求加回；同公開列表 In review
+    // 檢視的同一欄與同一顆 cell）。
+    const kindColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        name: "disputeKind",
+        title: "Dispute type",
+        width,
+        render: (leg) => <DisputeKindCell kind={leg.disputeKind} />,
+    });
+
+    const ctaColumn = (width: string): DisputeTableColumn<ResolutionLeg> => ({
+        name: "cta",
+        title: "",
+        width,
+        align: "right",
+        render: ctaCell,
+    });
+
+    // 三個檢視共用同一組欄位（2026-08-04 user 裁決收斂）：Markets / Proposed
+    // outcome / Stake / reward / Status / CTA。倒數併進 Status、金額併進
+    // Stake / reward 之後，各檢視已沒有自己專屬的欄，差別只剩 Status 欄名
+    // （Finalized 檢視叫 Result）。
+    // In review 檢視這一欄裝的是倒數，欄名直接講那件事，且與公開列表 In review
+    // 檢視同名（Review ends in，2026-08-05 user 裁決）。
+    const statusTitle = tab === "finalized" ? "Result" : "Review ends in";
+    const columns: DisputeTableColumn<ResolutionLeg>[] = [
+        // Markets 維持 42%，與公開列表的第一道欄界對齊（那是兩張表之間最顯眼的
+        // 一條線）；加回 Dispute type 之後 7 欄擠不進同一組內部欄界，其餘各欄
+        // 依「欄名寬度」重新分配 —— 綁住的是表頭不是值。
+        marketsColumn("34%"),
+        outcomeColumn("12%"),
+        kindColumn("14%"),
+        stakeColumn("9%"),
+        rewardColumn("12%"),
+        { name: "status", title: statusTitle, width: "12%", sortable: true, render: (leg) => <StatusCell leg={leg} /> },
+        ctaColumn("7%"),
+    ];
+
+    // ── 手機列（md/960 以下；見 dispute-table 檔頭的 Mobile fold）───────────────
+    // 兩段式，照 production 手機版 Position 列（user 2026-08-04 指定的參考排法），
+    // 骨架與公開列表逐項相同：身分行（子話題 + 我當初挑戰的那個 outcome，右邊掛
+    // Claim / View）+ 度量列（標籤一排、值一排橫向鋪滿）。
+    //
+    // 七個欄位一個都沒少：三個進度量列、outcome 進身分行、CTA 進身分行右側、
+    // 市場名是它上面那一行（多腿市場的群組標題 / binary market 的自有一行）。
+    const mobileRow = (leg: ResolutionLeg) => (
+        <>
+            <MobileLeadLine
+                identity={
+                    <>
+                        {leg.subtopic ? <MediumText className="text-primary truncate">{leg.subtopic}</MediumText> : null}
+                        {leg.subtopic ? <MediumText className="text-quaternary shrink-0">-</MediumText> : null}
+                        <div className="shrink-0">
+                            <OutcomeText
+                                label={leg.proposedOutcome}
+                                slot={leg.proposedOutcomeSlot}
+                                displayLabel={leg.proposedOutcomeLabel}
+                            />
+                        </div>
+                    </>
+                }
+                // Dispute type 當身分底下的補充行而不是度量欄：「Incorrect outcome」
+                // 量到 ~118px，四欄擠在 375 的列裡它一定被截成「Incorr…」，而截掉的
+                // 正好是兩種理由的差異。放這裡它有整條列寬可用。
+                sub={<DisputeKindCell kind={leg.disputeKind} />}
+                action={ctaCell(leg)}
+            />
+            <MobileMetrics
+                items={[
+                    {
+                        label: "My stake",
+                        node: (
+                            <OpnAmount value={leg.stakedAmount} note={bucketOf(leg) === "rejected" ? "Forfeited" : undefined} />
+                        ),
+                    },
+                    {
+                        label: "Potential reward",
+                        node: bucketOf(leg) === "rejected" ? <OpnAmount /> : <OpnAmount value={leg.rewardAmount ?? leg.potentialReward} />,
+                    },
+                    { label: statusTitle, node: <StatusCell leg={leg} /> },
+                ]}
+            />
+        </>
+    );
+
+    const TAB_EMPTY: Record<RowsTab, string> = {
+        review: "Nothing under review.",
+        finalized: "Nothing has been ruled on yet.",
+    };
+
+    const emptyKey = !isConnected ? "signedout" : mine.length === 0 ? "none" : null;
+
+    return (
+        <Stack className="gap-4">
+            {/* 區塊標題列：My Disputes 與公開列表的 All Proposals 是同一層級。
+                副標（N still open / Not signed in）已刪（2026-08-04 user 裁決）：
+                tab 上已經帶著各檢視的計數，區塊標題旁再寫一次是重複。 */}
+            <H3 className="text-primary font-bold">My Disputes</H3>
+
+            {/* tabs 與「可領總額」同一排（2026-08-04 user 裁決）：兩者都是這張表的
+                取景資訊，貼著表頂比掛在區塊標題旁更接近它們描述的東西。
+                篩選用公開列表同款的箭頭形 StepTabs——兩張表的 tab 長相一致比
+                「取景維度 vs 流程階段」的語意區分重要。tab 只在真的有東西可篩時
+                才出現：未登入 / 從沒 dispute 過的時候，一排掛著 0 的 tab 是噪音。
+                手機同一排放不下（tabs 371px + 可領總額），改成上下兩層：tabs 在上、
+                可領總額在下靠左（它是這張表的摘要，不是 tab 的附屬）。 */}
+            <div className="flex min-h-8 items-center gap-4 max-md:flex-col max-md:items-start max-md:gap-2">
+                {mine.length > 0 ? (
+                    <div className="max-md:w-full max-md:overflow-x-auto max-md:pb-1 max-md:scrollbar-hide">
+                    <StepTabs
+                        value={tab}
+                        onChange={(value) => {
+                            setTab(value as RowsTab);
+                            setPage(1);
+                        }}
+                        items={(
+                            [
+                                ["review", "In review"],
+                                ["finalized", "Finalized"],
+                            ] as const
+                        ).map(([key, label]) => ({
+                            label: `${label} (${buckets[key].length})`,
+                            value: key,
+                        }))}
+                    />
+                    </div>
+                ) : null}
+                <div className="ml-auto flex items-center gap-4 max-md:ml-0">
+                    {claimable.length > 0 ? (
+                        // 標籤白、金額 + OPN 橘（2026-08-04 user 裁決）：橘只落在真正
+                        // 是「錢」的那幾個字，標籤本身回到一般文字層級。
+                        // Claim all 先隱藏（2026-08-04 PM：批次領獎的合約端可能做不
+                        // 出來）；確定做不出來後再連 onClaimAll 一起清掉。
+                        <SmallText className="text-primary inline-flex items-baseline gap-2 tracking-wider uppercase">
+                            {/* 金額大一階（bodyM → bodyL）、與標籤的間距補到 8px：這行的重點
+                                是數字，標籤只是它的說明（2026-08-04 user 裁決）。 */}
+                            Ready to claim
+                            <span
+                                className="font-number text-brand-secondary text-bodyL normal-case tracking-normal"
+                                data-kind="numeric"
+                            >
+                                {formatOpn(claimableTotal)} OPN
+                            </span>
+                        </SmallText>
+                    ) : allClaimed ? (
+                        // 全部已領是中性收尾：只陳述狀態，不慶祝，也不用 brand 色去搶眼。
+                        <SmallText className="text-quaternary">All rewards claimed</SmallText>
+                    ) : null}
+                </div>
+            </div>
+
+            {/* Table 自己的首末儲存格已有 20px 內距，Card 的 p-5 疊上去會變 40px */}
+            <Card className="overflow-hidden p-0!">
+                {emptyKey ? (
+                    <Stack className="items-start gap-2 p-5">
+                        <SmallText className="text-primary text-bodyM font-bold">{EMPTY_COPY[emptyKey].title}</SmallText>
+                        {/* 量到 640 就收：整條版心寬的一行字反而讀不動 */}
+                        <SmallText className="text-quaternary max-w-[640px] leading-5">
+                            {EMPTY_COPY[emptyKey].body(openWindows)}
+                        </SmallText>
+                        <div className="mt-2 flex items-center gap-2">
+                            {EMPTY_COPY[emptyKey].primary ? (
+                                <Button size="sm" skin="brand" onClick={onSignIn}>
+                                    {EMPTY_COPY[emptyKey].primary}
+                                </Button>
+                            ) : null}
+                            <Button size="sm" skin="secondary" onClick={onBrowse}>
+                                See all proposals
+                            </Button>
+                        </div>
+                    </Stack>
+                ) : (
+                    <DisputeTable<ResolutionLeg>
+                        columns={columns}
+                        mobileRow={mobileRow}
+                        rowKey={(leg) => leg.id}
+                        groups={pageGroups.map((group) => ({
+                            key: group.key,
+                            title: <MarketTitleLink title={group.marketTitle} href={hrefForLeg?.(group.legs[0])} />,
+                            rows: group.legs,
+                            // binary market（單腿、無子話題）整行寫在同一排，不另立標題列
+                            singleLine: group.legs.length === 1 && !group.legs[0].subtopic,
+                        }))}
+                        page={page}
+                        pageSize={PAGE_SIZE}
+                        totalCount={shown.length}
+                        onPageChange={setPage}
+                        sort={sort}
+                        onSortChange={(next) => {
+                            setSort(next);
+                            setPage(1);
+                        }}
+                        emptyState={<MediumText className="text-tertiary">{TAB_EMPTY[tab]}</MediumText>}
+                    />
+                )}
+            </Card>
+        </Stack>
+    );
+}
diff --git a/src/components/ResolutionDashboard/resolution-list-view.tsx b/src/components/ResolutionDashboard/resolution-list-view.tsx
new file mode 100644
index 0000000..b49578e
--- /dev/null
+++ b/src/components/ResolutionDashboard/resolution-list-view.tsx
@@ -0,0 +1,548 @@
+"use client";
+
+
+// 公開結算列表（PRD v3 §4.2）——所有人（含未登入）都看得到的那份清單。
+//
+// 這個 view 的職責只有兩件：看全站結算進度、在 window 內發動 dispute。所以唯一的
+// CTA 是 Proposed 階段的 Dispute；In review / Finalized 連 CTA 欄都不畫（不是畫了
+// 留白），這對應 production 的資料模型——列表只帶輕量 disputeInfo，卷宗要另一支
+// API 且只有本人拿得到。「我的 dispute」是另一個 flow，不在這張表上（見
+// my-disputes-view.tsx）。
+//
+// 每個階段的欄位各自照 §4.2 的清單，不共用一組欄位再逐格留白：三個階段的讀者問
+// 的是不同的問題（還來得及嗎 / 在吵什麼 / 結果是什麼），欄位不同才是正確的。
+import { useMemo, useState } from "react";
+import { Button, Card, Checkbox, Icon, Inline, MediumText, SmallText, Stack, Tabs, Tooltip } from "@olab/components";
+import { DisputeTable, type DisputeTableColumn } from "./dispute-table";
+import { StepTabs } from "./step-tabs";
+import { CountdownTimer } from "./countdown-timer";
+import { CATEGORIES, type ResolutionLeg, type ResolutionStage } from "./mock-data";
+import { URGENT_SECONDS, groupLegs, groupLegsInOrder } from "./leg-derive";
+import {
+    ChallengedCell,
+    DisputeKindCell,
+    FinalOutcomeCell,
+    MarketTitleLink,
+    OpnAmount,
+    OutcomeText,
+    MobileLeadLine,
+    MobileMetrics,
+    SubtopicCell,
+    TimestampCell,
+} from "./leg-parts";
+
+const PAGE_SIZE = 8;
+
+const ALL_CATEGORIES = "all";
+
+const STAGE_LABELS: Record<ResolutionStage, string> = {
+    proposed: "Proposed",
+    in_review: "In review",
+    finalized: "Finalized",
+};
+
+const CATEGORY_TABS = [ALL_CATEGORIES, ...CATEGORIES];
+
+const CategoryLabel: Record<string, string> = { [ALL_CATEGORIES]: "All" };
+
+const EmptyState = ({
+    icon,
+    title,
+    body,
+    action,
+}: {
+    icon: "hourglass" | "gavel" | "checkCircle" | "search";
+    title: string;
+    body: string;
+    action?: React.ReactNode;
+}) => (
+    <Stack className="max-w-[440px] items-center gap-2 text-center">
+        <div className="bg-white-04 mb-1 flex size-10 items-center justify-center rounded-full">
+            <Icon name={icon} size="sm" className="[--icon-color:var(--color-text-quaternary)]" />
+        </div>
+        <MediumText className="text-primary font-medium">{title}</MediumText>
+        <SmallText className="text-tertiary">{body}</SmallText>
+        {action ? <div className="mt-2">{action}</div> : null}
+    </Stack>
+);
+
+/**
+ * 接真 API 時由外部接管的部分。有帶這個 prop = 真資料模式：
+ * 階段、頁碼、總數都在 server 端，前端只負責畫這一頁拿到的東西。
+ */
+export interface ResolutionRemoteState {
+    stage: ResolutionStage;
+    onStageChange: (_stage: ResolutionStage) => void;
+    page: number;
+    onPageChange: (_page: number) => void;
+    pageSize: number;
+    /** 三個階段各自的全站總數 */
+    stageCounts: Record<ResolutionStage, number>;
+    /** 當前階段的總數（分頁用） */
+    total: number;
+    isLoading: boolean;
+    /** 市場名連結到線上 market detail */
+    hrefForLeg?: (_leg: ResolutionLeg) => string | undefined;
+    /**
+     * true = 唯讀（提交 dispute 需要錢包，按鈕停用加 tooltip）。
+     * demo 模式用模擬錢包，所以是 false —— 整條 flow 走得完。
+     */
+    readOnly?: boolean;
+}
+
+export interface ResolutionListViewProps {
+    /** 已經套過倒數推導的腿（見 leg-derive.advanceLeg）；真資料模式下是「這一頁」的腿 */
+    legs: ResolutionLeg[];
+    now: number;
+    isConnected: boolean;
+    onDispute: (_leg: ResolutionLeg) => void;
+    remote?: ResolutionRemoteState;
+}
+
+export function ResolutionListView({ legs, now, isConnected, onDispute, remote }: ResolutionListViewProps) {
+    const [localStage, setLocalStage] = useState<ResolutionStage>("proposed");
+    const [category, setCategory] = useState<string>(ALL_CATEGORIES);
+    const [onlyTraded, setOnlyTraded] = useState(false);
+    const [localPage, setLocalPage] = useState(1);
+
+    const isRemote = Boolean(remote);
+    const stage = remote ? remote.stage : localStage;
+    const page = remote ? remote.page : localPage;
+    const setPage = remote ? remote.onPageChange : setLocalPage;
+
+    const resetPage = () => setPage(1);
+
+    // 真資料模式沒有分類與持倉資料（見 resolution-api.ts 的 API_GAPS），
+    // 兩個收斂條件都停用，所以永遠不會處在「被篩選濾空」的狀態。
+    const isFiltered = !isRemote && (category !== ALL_CATEGORIES || onlyTraded);
+
+    // 分類擇一、Traded markets 是可疊加的開關（PRD §4.2）
+    const filtered = useMemo(
+        () =>
+            isRemote
+                ? legs
+                : legs.filter((leg) => {
+                      if (category !== ALL_CATEGORIES && leg.category !== category) return false;
+                      if (onlyTraded && !leg.traded) return false;
+                      return true;
+                  }),
+        [isRemote, legs, category, onlyTraded],
+    );
+
+    const localStageCounts = useMemo(() => {
+        const counts: Record<ResolutionStage, number> = { proposed: 0, in_review: 0, finalized: 0 };
+        filtered.forEach((leg) => {
+            counts[leg.stage] += 1;
+        });
+        return counts;
+    }, [filtered]);
+
+    const stageCounts = remote ? remote.stageCounts : localStageCounts;
+
+    // 排序與分群都在 groupLegs 裡（Proposed 按倒數、其餘按進入該階段的先後），
+    // 分頁再切在排好的腿上。真資料模式兩件事都在 server 端做完了，前端只分群。
+    const stageGroups = useMemo(
+        () => (isRemote ? groupLegsInOrder(filtered) : groupLegs(filtered.filter((leg) => leg.stage === stage))),
+        [isRemote, filtered, stage],
+    );
+    const orderedLegs = useMemo(() => stageGroups.flatMap((group) => group.legs), [stageGroups]);
+    const pageLegs = useMemo(
+        () => (isRemote ? orderedLegs : orderedLegs.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)),
+        [isRemote, orderedLegs, page],
+    );
+
+    // 分頁切在腿的層級（§7 已知缺口），所以這裡從「本頁的腿」重建群組；
+    // 一個 market 的腿跨頁時，兩頁各自會有一段同名群組。
+    const pageGroups = useMemo(() => (isRemote ? groupLegsInOrder(pageLegs) : groupLegs(pageLegs)), [isRemote, pageLegs]);
+
+    const marketsColumn: DisputeTableColumn<ResolutionLeg> = {
+        // 欄名是 Markets 而不是 Sub-topic：這一欄裝的是市場名（群組標題）與它底下
+        // 各支腿的子話題，兩者合起來才是這一欄的內容。
+        name: "markets",
+        title: "Markets",
+        // 三個檢視的欄寬都跟 My Disputes 的表對齊（2026-08-04 user 裁決：兩張表
+        // 上下疊在同一頁，欄不對齊看起來像兩套系統）。My Disputes 的欄界是
+        // 34 / 46 / 60 / 69 / 81 / 93 —— 下面三個檢視雖然欄數不同，每一道欄界
+        // 都落在這組數字上，語意相同的欄（outcome / Dispute type / Potential
+        // reward / CTA）也對到同一格。
+        width: "34%",
+        render: (leg) => <SubtopicCell leg={leg} />,
+    };
+
+    // 唯讀的真資料模式：提交 dispute 要錢包與鏈上交易。這裡不隱藏按鈕而是停用並
+    // 說明原因——隱藏會讓人以為這個階段本來就沒有動作。
+    // 抽成函式是為了讓手機那組欄用的是**同一顆**按鈕，不會兩邊各寫一次而走鐘。
+    const proposedCta = (leg: ResolutionLeg) =>
+        remote?.readOnly ? (
+            <Tooltip content="Read-only mode — submitting a dispute needs a connected wallet." asChild>
+                <div className="w-fit cursor-default">
+                    <Button size="sm" skin="secondary" disabled>
+                        Dispute
+                    </Button>
+                </div>
+            </Tooltip>
+        ) : (
+            <Button size="sm" skin="secondary" onClick={() => onDispute(leg)}>
+                Dispute
+            </Button>
+        );
+
+    const proposedColumns: DisputeTableColumn<ResolutionLeg>[] = [
+        marketsColumn,
+        {
+            name: "proposedOutcome",
+            title: "Proposed outcome",
+            // 三個階段的非 Markets 欄一律等分（2026-08-05 user 裁決，In review /
+            // Finalized 先改、Proposed 隨後跟上）：Proposed 有五欄，(100−34)/5 = 13.2%。
+            // 這也順便解掉了原本「把多出來的寬度堆在 outcome 欄」那個權宜做法。
+            // 代價是三個階段都不再逐欄對齊 My Disputes 的欄界 —— user 明確要求以
+            // 「每張表自己看起來勻」為優先。
+            width: "13.2%",
+            render: (leg) => (
+                <OutcomeText label={leg.proposedOutcome} slot={leg.proposedOutcomeSlot} displayLabel={leg.proposedOutcomeLabel} />
+            ),
+        },
+        // Stake 與 Reward 是一筆賭注的兩面（要押多少 / 贏了多拿多少），是兩個獨立的
+        // 合約值，即使目前參數相等也必須分欄——合起來寫等於宣稱它們永遠相等。
+        {
+            name: "requiredStake",
+            title: "Required stake",
+            width: "13.2%",
+            render: (leg) => <OpnAmount value={leg.requiredStake} />,
+        },
+        {
+            name: "potentialReward",
+            title: "Potential reward",
+            width: "13.2%",
+            render: (leg) => <OpnAmount value={leg.potentialReward} />,
+        },
+        {
+            // 倒數的語意由欄名交代：這裡歸零的是「還能提 dispute 多久」，
+            // 不是市場本身，也不是審理。
+            name: "windowEndsIn",
+            title: "Window ends in",
+            width: "13.2%",
+            render: (leg) =>
+                leg.windowEndsAt ? (
+                    <CountdownTimer
+                        deadlineTimestamp={leg.windowEndsAt}
+                        size="medium"
+                        tone={leg.windowEndsAt - now <= URGENT_SECONDS ? "urgent" : "default"}
+                    />
+                ) : null,
+        },
+        {
+            name: "cta",
+            title: "",
+            width: "13.2%",
+            align: "right",
+            render: proposedCta,
+        },
+    ];
+
+    const inReviewColumns: DisputeTableColumn<ResolutionLeg>[] = [
+        marketsColumn,
+        {
+            // 欄名寫 Original：這個結算正在被挑戰，讀者要知道現在看到的是「被吵的
+            // 那個值」，不是已經定案的結果。2026-08-04 由「Original proposed
+            // outcome」縮短為「Original outcome」——前者在對齊後的欄寬下會折成
+            // 兩行，且與 My Disputes 同一欄統一用同一個名字。
+            name: "originalOutcome",
+            title: "Original outcome",
+            // In review 與 Finalized 的非 Markets 欄一律等分（2026-08-05 user 裁決）：
+            // 這兩個檢視只有三欄，照原本那組欄界（12 / 14 / 40）會把最後一欄撐得
+            // 特別寬、看起來像沒排滿。等分之後不再逐欄對齊 My Disputes 那張表的
+            // 欄界——user 明確要求以「這張表自己看起來勻」為優先。
+            width: "22%",
+            render: (leg) => (
+                <OutcomeText label={leg.proposedOutcome} slot={leg.proposedOutcomeSlot} displayLabel={leg.proposedOutcomeLabel} />
+            ),
+        },
+        {
+            name: "disputeKind",
+            title: "Dispute type",
+            width: "22%",
+            render: (leg) => <DisputeKindCell kind={leg.disputeKind} />,
+        },
+        {
+            name: "reviewEndsIn",
+            title: "Review ends in",
+            // 這兩個階段最後一欄都靠右（2026-08-05 user 裁決）：它們是 40% 的寬欄，
+            // 靠左會讓值孤零零落在版心中間、右邊留一大片空白（其餘兩個階段那個
+            // 位置是有東西的——CTA 按鈕）。靠右等於把它擺在 CTA 的位置上。
+            width: "22%",
+            align: "right",
+            render: (leg) => (leg.reviewEndsAt ? <CountdownTimer deadlineTimestamp={leg.reviewEndsAt} size="medium" /> : null),
+        },
+    ];
+
+    // 2026-08-05 user 要求：Dispute type（Incorrect outcome / Too early）拿掉，換成
+    // 只講「有沒有被吵過」的 Challenged 欄。理由是這張表的讀者是旁觀者——他要的是
+    // 「這個結果有沒有經過爭議」這個可信度訊號，而不是當初那個人以什麼理由提的
+    // （那是 My Disputes 的讀者才在意的事，那張表仍保有 Dispute type 欄）。
+    // 定案時間留著：歷史紀錄要能定位在時間軸上。欄界仍落在共用的 34 / 46 / 60。
+    const finalizedColumns: DisputeTableColumn<ResolutionLeg>[] = [
+        marketsColumn,
+        {
+            name: "finalOutcome",
+            title: "Final outcome",
+            width: "22%",
+            render: (leg) => <FinalOutcomeCell leg={leg} />,
+        },
+        {
+            name: "challenged",
+            title: "Challenged",
+            width: "22%",
+            render: (leg) => <ChallengedCell leg={leg} />,
+        },
+        {
+            name: "finalizedAt",
+            title: "Finalized",
+            width: "22%",
+            align: "right",
+            render: (leg) => <TimestampCell timestamp={leg.enteredStageAt} />,
+        },
+    ];
+
+    const columns = stage === "proposed" ? proposedColumns : stage === "in_review" ? inReviewColumns : finalizedColumns;
+
+    // ── 手機列（md/960 以下；見 dispute-table 檔頭的 Mobile fold）───────────────
+    // 兩段式，照 production 手機版 Position 列（user 2026-08-04 指定的參考排法）：
+    // 身分行（子話題 + outcome，右邊掛動作）+ 度量列（標籤一排、值一排橫向鋪滿）。
+    // 三個階段共用這個骨架，也與 My Disputes 共用——手機上兩張表對齊的不再是欄寬
+    // 百分比，而是這個骨架（2026-08-04「欄要對得上」那條裁決在手機的等價物）。
+    //
+    // 一欄都沒有砍掉：Required stake 與 Potential reward 仍是兩個獨立的度量欄位，
+    // Window ends in 也完整保留。
+    const mobileIdentity = (leg: ResolutionLeg) => (
+        <>
+            {leg.subtopic ? <MediumText className="text-primary truncate">{leg.subtopic}</MediumText> : null}
+            {leg.subtopic ? <MediumText className="text-quaternary shrink-0">-</MediumText> : null}
+            <div className="shrink-0">
+                <OutcomeText label={leg.proposedOutcome} slot={leg.proposedOutcomeSlot} displayLabel={leg.proposedOutcomeLabel} />
+            </div>
+        </>
+    );
+
+    const proposedMobileRow = (leg: ResolutionLeg) => (
+        <>
+            <MobileLeadLine identity={mobileIdentity(leg)} action={proposedCta(leg)} />
+            <MobileMetrics
+                items={[
+                    { label: "Required stake", node: <OpnAmount value={leg.requiredStake} /> },
+                    { label: "Potential reward", node: <OpnAmount value={leg.potentialReward} /> },
+                    {
+                        label: "Window ends in",
+                        node: leg.windowEndsAt ? (
+                            <CountdownTimer
+                                deadlineTimestamp={leg.windowEndsAt}
+                                size="medium"
+                                tone={leg.windowEndsAt - now <= URGENT_SECONDS ? "urgent" : "default"}
+                            />
+                        ) : null,
+                    },
+                ]}
+            />
+        </>
+    );
+
+    const inReviewMobileRow = (leg: ResolutionLeg) => (
+        <>
+            <MobileLeadLine identity={mobileIdentity(leg)} />
+            <MobileMetrics
+                items={[
+                    { label: "Dispute type", node: <DisputeKindCell kind={leg.disputeKind} /> },
+                    {
+                        label: "Review ends in",
+                        node: leg.reviewEndsAt ? <CountdownTimer deadlineTimestamp={leg.reviewEndsAt} size="medium" /> : null,
+                    },
+                ]}
+            />
+        </>
+    );
+
+    // 定案結果掛在身分行右邊（它就是這一列的答案），新增的 Dispute type 與定案時間
+    // 走度量列——同公開列表另兩個階段的骨架。
+    const finalizedMobileRow = (leg: ResolutionLeg) => (
+        <>
+            <MobileLeadLine
+                identity={leg.subtopic ? <MediumText className="text-primary truncate">{leg.subtopic}</MediumText> : null}
+                action={<FinalOutcomeCell leg={leg} />}
+            />
+            <MobileMetrics
+                items={[
+                    { label: "Challenged", node: <ChallengedCell leg={leg} /> },
+                    { label: "Finalized", node: <TimestampCell timestamp={leg.enteredStageAt} /> },
+                ]}
+            />
+        </>
+    );
+
+    const mobileRow =
+        stage === "proposed" ? proposedMobileRow : stage === "in_review" ? inReviewMobileRow : finalizedMobileRow;
+
+    const clearFilters = (
+        <Button
+            size="sm"
+            skin="secondary"
+            onClick={() => {
+                setCategory(ALL_CATEGORIES);
+                setOnlyTraded(false);
+                resetPage();
+            }}
+        >
+            Clear filters
+        </Button>
+    );
+
+    // 「這個階段本來就空」與「被我的篩選濾空」是兩件不同的事，讀者的下一步也不同
+    // ——前者要知道東西什麼時候會出現，後者要能一鍵回到全部。
+    // 真資料模式多一種：還在等 API 回來。那既不是空也不是被濾掉。
+    const emptyState = remote?.isLoading ? (
+        <EmptyState icon="hourglass" title="Loading live data…" body="Fetching this page from the public Resolution API." />
+    ) : isFiltered ? (
+        <EmptyState
+            icon="search"
+            title="No markets match these filters"
+            body={`Try another category, or turn off "Only view traded markets" to see everything under ${STAGE_LABELS[stage]}.`}
+            action={clearFilters}
+        />
+    ) : stage === "proposed" ? (
+        <EmptyState
+            icon="gavel"
+            title="Nothing is open for dispute right now"
+            body="Markets land here the moment an outcome is proposed, and stay for the length of the dispute window — usually two hours."
+        />
+    ) : stage === "in_review" ? (
+        <EmptyState
+            icon="hourglass"
+            title="No disputes are under review"
+            body="Every proposed outcome so far has finalized unchallenged. Disputes appear here while the committee decides."
+        />
+    ) : (
+        <EmptyState icon="checkCircle" title="Nothing has finalized yet" body="Settled markets are kept here as a record." />
+    );
+
+    return (
+        <Stack className="gap-4">
+            {/* 階段 tabs 走箭頭形（StepTabs）：三個階段是有方向的流程，
+                箭頭把單向順序畫出來，underline tabs 只是並列的分頁。
+                Finalized 不標數字——那個數字只會單向累積，不代表任何待辦。
+                手機橫捲而不換形狀：箭頭形講的是「單向流程」，改成 pill 就會跟下面
+                的分類 pill 變成同一種東西。刻意不用負 margin 出血到版心外：三個殼
+                （/live、/standalone、/demo）的頁面 gutter 不同值，寫死一個會有殼算
+                錯 4px 就整頁橫捲。被切一半的第三格本身就是「還有更多」的提示。 */}
+            <div className="max-md:overflow-x-auto max-md:pb-1 max-md:scrollbar-hide">
+            <StepTabs
+                value={stage}
+                onChange={(value) => {
+                    const next = value as ResolutionStage;
+                    if (remote) remote.onStageChange(next);
+                    else setLocalStage(next);
+                    resetPage();
+                }}
+                items={(Object.keys(STAGE_LABELS) as ResolutionStage[]).map((key) => ({
+                    // 真資料的 Finalized 是一萬八千多筆的歷史堆積，寫出來反而讓人知道
+                    // 這一格的量級跟前兩格不是同一個數量級。
+                    label:
+                        key === "finalized" && !isRemote
+                            ? STAGE_LABELS[key]
+                            : `${STAGE_LABELS[key]} (${stageCounts[key].toLocaleString("en-US")})`,
+                    value: key,
+                }))}
+            />
+            </div>
+
+            {/* 分類是取景維度（擇一）→ pill tabs；Traded markets 是可疊加的開關
+                → checkbox 靠右。兩者形狀不同，因為它們不是同一種決定。
+                手機放不下同一排（實測 375 下 checkbox 被推到 647px），改成上下兩層：
+                分類在上、可橫捲，開關在下靠左。 */}
+            <Inline className="items-end justify-between gap-3 max-md:flex-col max-md:items-start">
+                {/* 手機的分類列橫捲（八個分類在 375 下是 544px）。 */}
+                <div className="min-w-0 max-md:w-full max-md:overflow-x-auto max-md:scrollbar-hide">
+                {isRemote ? (
+                    // 真資料模式：API 的 row 沒有分類欄位。跟未登入的 Traded markets
+                    // 一樣處理——留在原位、停用、說明原因，不假裝這個維度不存在。
+                    <Tooltip content="The public API returns no category on each market — only a labelId filter." asChild>
+                        <div className="w-fit cursor-default opacity-50">
+                            <Tabs
+                                variant="newPill"
+                                size="sm"
+                                value={ALL_CATEGORIES}
+                                tabs={CATEGORY_TABS.map((key) => ({
+                                    title: CategoryLabel[key] ?? key,
+                                    value: key,
+                                    content: null,
+                                }))}
+                            />
+                        </div>
+                    </Tooltip>
+                ) : (
+                    <Tabs
+                        variant="newPill"
+                        size="sm"
+                        value={category}
+                        onActiveTabChange={({ value }) => {
+                            setCategory(value);
+                            resetPage();
+                        }}
+                        tabs={CATEGORY_TABS.map((key) => ({ title: CategoryLabel[key] ?? key, value: key, content: null }))}
+                    />
+                )}
+                </div>
+
+                {isRemote ? (
+                    <Tooltip content="Needs the connected wallet's positions — the resolution API has no holdings data." asChild>
+                        <div className="w-fit cursor-default opacity-50">
+                            <Checkbox checked={false} disabled>
+                                Only view traded markets
+                            </Checkbox>
+                        </div>
+                    </Tooltip>
+                ) : isConnected ? (
+                    <Checkbox
+                        checked={onlyTraded}
+                        onCheckedChange={(checked) => {
+                            setOnlyTraded(checked === true);
+                            resetPage();
+                        }}
+                    >
+                        Only view traded markets
+                    </Checkbox>
+                ) : (
+                    // 未登入時這個開關沒有資料可濾。做法是留在原位但停用並說明原因，
+                    // 而不是整個藏起來：藏起來的話，登入後突然多一個控制項；停用則讓
+                    // 未登入的人知道「連上錢包會多一種看法」。
+                    <Tooltip content="Connect your wallet to filter by markets you've traded." asChild>
+                        <div className="w-fit cursor-default opacity-50">
+                            <Checkbox checked={false} disabled>
+                                Only view traded markets
+                            </Checkbox>
+                        </div>
+                    </Tooltip>
+                )}
+            </Inline>
+
+            {/* Table 自己的首末儲存格已有 20px 內距，Card 的 p-5 疊上去會變 40px */}
+            <Card className="overflow-hidden p-0!">
+                <DisputeTable<ResolutionLeg>
+                    columns={columns}
+                    mobileRow={mobileRow}
+                    rowKey={(leg) => leg.id}
+                    groups={pageGroups.map((group) => ({
+                        key: group.key,
+                        title: <MarketTitleLink title={group.marketTitle} href={remote?.hrefForLeg?.(group.legs[0])} />,
+                        rows: group.legs,
+                        // binary market（單腿、無子話題）整行寫在同一排，不另立標題列
+                        singleLine: group.legs.length === 1 && !group.legs[0].subtopic,
+                    }))}
+                    page={page}
+                    pageSize={remote ? remote.pageSize : PAGE_SIZE}
+                    totalCount={remote ? remote.total : orderedLegs.length}
+                    onPageChange={setPage}
+                    emptyState={emptyState}
+                />
+            </Card>
+        </Stack>
+    );
+}
diff --git a/src/components/ResolutionDashboard/stage-icons.tsx b/src/components/ResolutionDashboard/stage-icons.tsx
new file mode 100644
index 0000000..7b38066
--- /dev/null
+++ b/src/components/ResolutionDashboard/stage-icons.tsx
@@ -0,0 +1,175 @@
+
+// How it works 三個階段的插畫 icon —— user 2026-08-05 交付的三份 SVG 原稿
+// （Frame 1000004266 / Frame 1000004267 / 锤子-resolved），路徑逐點照抄，未重畫。
+//
+// 為什麼不是 @olab Icon：那組是單色 line icon，畫不出這種「粗描邊 + 局部橘色實塊 +
+// 紙面」的三層關係。這三顆是這張卡專用的插畫，不進 Icon 集。
+//
+// ── 顏色：原稿的兩個非橘色改走會反轉的 role token（2026-08-05 user 要求）────────
+// 原稿是照淺底畫的：描邊 / 記號是 #101319、紙面與鏡片是白。深底上要的是反過來的
+// 那一組（白描邊 + 深色紙面，見 user 附圖的 Section 3），所以兩個角色**交叉**接到
+// `.live-scope` 內會隨主題反轉的那對 role token：
+//
+//   原稿 #101319（描邊 / 記號 / 內文線）→ var(--color-white)  → dark #fff / light #101319
+//   原稿 white  （紙面 / 鏡片 / 手掌）  → var(--color-black)  → dark #101319 / light #fff
+//
+// 名字看起來是反的，因為那兩個 token 本身就是反轉用的 role（見 live-bridge.css
+// 的 `.live-scope` 與 `[data-opinion-theme="light"] .live-scope`）—— 不是字面顏色。
+// 效果：深底 = 白描邊 + 深色紙面；淺底 = 深色描邊 + 白紙面，兩張附圖各對一邊。
+//
+// 橘色仍是原稿的 #F96F3D，不是 brand 的 #ed6432。差距超過收斂門檻（ΔE 2.8），
+// 改掉等於改插畫的顏色而不是換個寫法 —— 待 user 裁決要不要收。
+import type { CSSProperties } from "react";
+
+/** 原稿的描邊色（#101319）。反轉後：深底 = 白、淺底 = 深 */
+const LINE = "var(--color-white)";
+/** 原稿的紙面色（white）。反轉後：深底 = 深、淺底 = 白 */
+const PAPER = "var(--color-black)";
+/** 原稿的橘（#F96F3D，不是 brand 橘，見檔頭） */
+const ACCENT = "#F96F3D";
+
+interface StageIconProps {
+    /** 邊長（px）。三份原稿共用 82×82 畫布，所以同一個值 = 同一個視覺大小 */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
+const svgProps = (size: number) => ({
+    width: size,
+    height: size,
+    viewBox: "0 0 82 82",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true as const,
+    focusable: "false" as const,
+});
+
+/** Proposed —— 一隻手托著一份提案文件（原稿 Frame 1000004266） */
+export const ProposedIcon = ({ size = 24, className, style }: StageIconProps) => (
+    <svg {...svgProps(size)} className={className} style={style}>
+        <g clipPath="url(#stage-proposed-clip)">
+            <path
+                d="M31.2753 6.17176C31.6014 6.13925 31.9908 6.12961 32.3206 6.12881C38.6629 6.11323 45.0133 6.11921 51.3548 6.1159L56.7876 6.11356C57.5723 6.11396 58.5578 6.00879 59.3196 6.16855C59.74 6.2567 60.3579 6.8217 60.6687 7.1252C61.9013 8.32861 71.4077 17.7427 71.8264 18.6282C71.9797 18.9522 71.9769 19.3954 71.9887 19.7518C72.0772 22.4199 71.9585 25.1367 71.962 27.81C71.9736 36.6151 71.8115 45.443 71.9658 54.2453C73.5208 54.474 74.8149 55.047 75.7876 56.3112C77.7214 58.8402 77.3304 62.5252 74.6542 64.3624C73.3782 65.2383 72.1848 65.3725 70.7495 65.8609L60.0776 69.454C56.6835 70.6333 53.2984 71.8149 49.8886 72.9422C46.3511 74.1118 45.5519 74.7855 41.6844 74.2217C40.4072 73.922 39.2435 73.4377 38.0008 73.0412L30.2223 70.5793C26.1932 69.2787 26.7827 69.0356 22.5846 69.8488C22.5574 70.4863 22.4814 71.154 22.2892 71.7645C21.9697 72.7804 21.1661 73.7199 20.2192 74.205C19.64 74.5018 14.1815 75.6156 13.3703 75.6566C12.804 75.6878 12.2371 75.6078 11.7012 75.4211C10.6087 75.0461 9.43438 74.0383 8.98772 72.9825C8.74477 72.4081 8.63988 71.1985 8.49854 70.5204L6.93864 63.0371C6.59033 61.3363 6.12871 59.6576 5.7597 57.961C5.56179 57.051 5.44298 56.1257 5.26773 55.2115C5.09369 54.3035 4.84153 53.4052 4.74728 52.4838C4.67796 51.8061 4.80244 51.2192 5.03259 50.5813C5.45496 49.4106 6.30306 48.4381 7.43562 47.9154C7.70684 47.7902 13.5828 46.5854 14.0426 46.5625C14.6241 46.5335 15.1977 46.6395 15.742 46.8416C17.1373 47.3597 17.9119 48.2925 18.5281 49.6262C21.0238 49.2264 22.9655 47.8724 25.9001 47.5546L25.9062 23.035L25.9055 15.8064C25.9052 13.3315 25.5866 10.9367 27.0342 8.82242C28.2124 7.10154 29.3089 6.57754 31.2753 6.17176Z"
+                fill={LINE}
+            />
+            <path
+                d="M31.8438 8.99615L45.9011 9.01971C48.0611 8.98769 50.2214 8.97846 52.3816 8.992C53.6393 8.99192 55.0445 8.96202 56.2892 9.04179C56.414 11.6563 56.1911 14.3669 56.3297 16.9829C56.4328 18.9281 57.4843 20.6692 59.132 21.6855C60.76 22.6898 62.3785 22.4131 64.2023 22.4487C65.8854 22.4784 67.5782 22.3996 69.2533 22.4961L69.2624 54.6372C67.1315 54.9906 66.1656 55.1998 64.0446 55.7851C62.0865 56.2797 60.1522 56.6932 58.1828 57.1422C56.6408 57.4939 54.0551 58.3073 52.5864 58.4978C52.4932 57.2242 52.2589 56.477 51.3901 55.5183C49.7528 53.7113 47.1168 53.3841 44.9048 52.7414C43.7201 52.3972 42.5284 51.9615 41.3381 51.612C40.7194 51.4303 39.8942 51.248 39.3104 51.0238C38.8454 50.8454 38.1017 50.3353 37.6309 50.1133C36.1947 49.4361 34.3903 48.3835 32.9571 47.8557C32.0852 47.5346 29.821 47.3453 28.8573 47.3071L28.8656 23.3221L28.8617 16.1683C28.8613 14.9635 28.6748 11.7479 29.216 10.6366C29.5574 9.93577 31.0328 9.14332 31.8438 8.99615Z"
+                fill={PAPER}
+            />
+            <path
+                d="M36.0793 38.7275C38.4248 38.6858 59.8694 38.596 60.3824 38.843C60.938 39.1105 61.1132 39.7188 61.3159 40.2534C61.047 40.9746 60.9464 41.3844 60.1591 41.6229C59.2471 41.7186 57.7307 41.6793 56.7817 41.6804L51.0436 41.6822L41.8817 41.6856C40.2226 41.6871 38.6265 41.6767 36.8988 41.6783C35.751 41.6794 34.7726 41.1973 35.0944 39.7451C35.1863 39.3305 35.6787 38.9086 36.0793 38.7275Z"
+                fill={LINE}
+            />
+            <path
+                d="M36.1888 30.9778C37.209 30.9245 38.6044 30.9659 39.646 30.9655L46.2769 30.964C50.653 30.9634 55.0299 30.9548 59.4059 30.9716C59.6863 30.9995 60.1903 30.9729 60.4269 31.1284C61.6442 31.9287 61.4609 33.3754 60.0817 33.7717C57.8703 33.8532 36.486 33.9208 35.7908 33.6567C35.4925 33.5434 35.2317 33.2513 35.1129 32.959C34.9799 32.6311 34.9736 32.2469 35.1127 31.9198C35.3111 31.453 35.7331 31.1529 36.1888 30.9778Z"
+                fill={LINE}
+            />
+            <path
+                d="M27.3472 50.1702C33.2339 49.4368 37.0746 54.2514 42.754 55.047C44.4547 55.2852 46.9706 56.4865 48.7159 56.8797C48.8922 56.9194 49.4119 57.5848 49.485 57.7566C50.6725 59.4238 49.1229 62.2014 47.1286 62.0351C45.5773 61.9058 43.6522 60.9969 42.0716 60.6071C40.2576 60.1597 38.4619 59.629 36.6518 59.0388L35.8625 59.311C35.5061 59.7153 35.4077 59.9354 35.1746 60.4061C35.3014 60.9755 35.4771 61.3231 35.7407 61.8274C36.3154 62.0053 37.0204 62.1 37.6367 62.2981C39.5533 62.9138 41.3862 63.5158 43.3486 63.9743C44.2852 64.1931 45.2457 64.5986 46.2317 64.7606C46.839 64.8603 47.4583 64.8624 48.0663 64.7668C50.1723 64.4419 51.1719 63.1351 52.3368 61.5466C55.0248 60.7485 57.3514 60.3698 59.9948 59.7353L66.4715 58.1845C67.764 57.8727 70.8196 56.952 71.9538 57.0581C73.4039 57.4298 74.0267 58.4885 74.3547 59.8503C74.1026 60.7842 73.8122 61.7459 72.8335 62.171C70.7646 63.0695 68.5154 63.5563 66.4172 64.32C64.8579 64.8875 63.3458 65.3454 61.7834 65.8702L51.3662 69.3873C49.0261 70.1804 46.2214 71.5444 43.7152 71.4805C41.8919 71.434 39.6323 70.6492 37.9227 70.0055C36.0737 69.3092 34.1907 68.8829 32.3492 68.1793C30.3022 67.4398 27.9415 66.6347 25.77 66.5274C24.689 66.474 23.1816 66.863 22.0983 67.0935C21.524 64.2133 20.8002 61.4716 20.3296 58.554C20.0341 56.7217 19.4445 54.3754 18.9984 52.5681C19.847 52.3102 20.6745 51.9438 21.5127 51.6809C23.4145 51.0845 25.3763 50.4496 27.3472 50.1702Z"
+                fill={PAPER}
+            />
+            <path
+                d="M13.6212 49.5446C14.4585 49.4376 15.408 49.4343 15.642 50.4008C17.2 56.7994 18.3434 63.3391 19.7247 69.7852C20.2201 72.0971 15.3814 72.5593 13.7767 72.746C13.1983 72.817 12.7721 72.7605 12.2135 72.6495C11.1467 71.3469 10.5533 66.1935 10.1246 64.3689C9.75104 62.7791 9.21997 60.7289 8.92694 59.1012C8.52841 56.8877 8.11297 54.7289 7.56532 52.5369C7.16786 50.7919 9.70003 50.2926 10.9057 50.0759C11.777 49.9193 12.687 49.6626 13.6212 49.5446Z"
+                fill={ACCENT}
+            />
+            <path
+                d="M59.199 10.0219C59.4028 10.0994 59.8373 10.3876 59.963 10.5335C60.8083 11.5141 68.614 18.8524 68.6398 19.46C67.2301 19.4649 65.8202 19.4771 64.4106 19.4965C62.0056 19.5264 58.9147 19.8816 59.1464 16.4158C59.2832 14.3695 58.9777 12.0488 59.199 10.0219Z"
+                fill={ACCENT}
+            />
+            <rect x="35" y="21" width="13" height="5" rx="2.5" fill={ACCENT} />
+        </g>
+        <defs>
+            <clipPath id="stage-proposed-clip">
+                <rect width="73" height="70" fill="white" transform="translate(4 6)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+/** In review —— 放大鏡（原稿 Frame 1000004267） */
+export const InReviewIcon = ({ size = 24, className, style }: StageIconProps) => (
+    <svg {...svgProps(size)} className={className} style={style}>
+        <g clipPath="url(#stage-in-review-clip)">
+            <path
+                d="M28.8756 5.73623C32.9025 5.64989 36.9038 6.38997 40.5321 8.17487C46.4345 11.1211 50.9097 16.3102 52.9567 22.5814C55.2486 29.3939 54.2914 36.0226 51.1412 42.3403L51.1813 42.3739C52.5857 43.5612 54.4535 45.5393 55.8331 46.9024C57.4244 46.6057 59.1841 47.171 60.3221 48.3189C63.8485 51.8755 67.416 55.3956 70.8866 59.0065C72.1559 60.4121 73.9926 61.8378 75.0858 63.3601C76.4837 65.3069 76.1289 68.1968 74.5128 69.8987C73.3309 71.1433 72.2584 72.207 71.0098 73.3343C69.5952 74.6112 68.5801 75.539 66.5782 75.529C65.8178 75.5327 65.0693 75.3401 64.405 74.9698C62.9539 74.1694 59.083 70.0515 57.7508 68.7154C54.9386 65.8983 52.11 63.0883 49.2959 60.2724C47.972 58.9477 47.4891 57.6269 47.5215 55.7735C46.0118 54.3029 44.1211 52.9143 42.812 51.2692C39.5028 53.5229 35.1626 54.9034 31.1804 55.1575C24.473 55.5958 17.8673 53.3442 12.8239 48.9005C8.08617 44.7415 5.19922 38.8675 4.8006 32.576C3.93145 17.9185 14.2959 6.57396 28.8756 5.73623Z"
+                fill={LINE}
+            />
+            <path
+                d="M28.7113 8.30701C40.9631 7.89041 51.2299 17.4907 51.6354 29.7428C52.041 41.9948 42.4315 52.253 30.1791 52.6476C17.9422 53.0417 7.69993 43.4471 7.29485 31.2105C6.88985 18.9741 16.4752 8.72312 28.7113 8.30701Z"
+                fill={ACCENT}
+            />
+            <path
+                d="M28.4875 12.5576C38.4166 12.049 46.8809 19.6797 47.4008 29.6082C47.9206 39.5367 40.2995 48.0096 30.3715 48.5407C20.4277 49.0725 11.9384 41.4366 11.4177 31.4922C10.897 21.5478 18.5426 13.0671 28.4875 12.5576Z"
+                fill={LINE}
+            />
+            <path
+                d="M28.6413 15.1674C37.1423 14.7713 44.355 21.341 44.7521 29.8418C45.1493 38.3428 38.5805 45.5563 30.0797 45.9546C21.5773 46.3529 14.3621 39.7826 13.965 31.2802C13.5677 22.7778 20.1388 15.5635 28.6413 15.1674Z"
+                fill={PAPER}
+            />
+            <path
+                d="M28.4617 18.2971L29.5519 18.2487L29.5572 20.7506C23.8783 20.9361 19.6728 25.1377 19.5737 30.8223L18.1174 30.8255L16.9948 30.8285C17.2297 26.8822 18.0748 24.0644 21.1379 21.4549C23.4145 19.5155 25.4945 18.6088 28.4617 18.2971Z"
+                fill={LINE}
+            />
+            <path
+                d="M56.3994 49.3902C56.8535 49.3404 57.7079 49.4004 58.0712 49.7285C62.9836 54.1644 67.2548 59.2945 72.0856 63.7992C74.6383 66.1797 73.3174 67.8145 71.0641 69.6711C69.7975 70.7148 68.6903 72.4576 67.0808 72.9663C65.6891 73.0983 64.9479 72.3335 64.0296 71.4039C59.7303 67.0485 55.2391 62.8561 51.0853 58.3637C50.6089 57.795 50.102 57.2967 50.0074 56.5584C49.735 54.9247 51.3496 53.7775 52.4189 52.7001C53.4772 51.6338 54.976 49.824 56.3994 49.3902Z"
+                fill={ACCENT}
+            />
+            <path
+                d="M49.8132 44.5205C50.9909 45.5754 52.2963 46.9825 53.4628 48.1233C52.1135 49.2689 49.8409 51.7439 48.5138 53.094C48.3694 53.0611 45.2616 50.2136 44.7999 49.7959C47.0857 48.0187 48.1464 46.9946 49.8132 44.5205Z"
+                fill={PAPER}
+            />
+        </g>
+        <defs>
+            <clipPath id="stage-in-review-clip">
+                <rect width="72" height="71" fill="white" transform="translate(4.5 5.5)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+/** Finalized —— 落槌（原稿 锤子-resolved） */
+export const FinalizedIcon = ({ size = 24, className, style }: StageIconProps) => (
+    <svg {...svgProps(size)} className={className} style={style}>
+        <g clipPath="url(#stage-finalized-clip)">
+            <path
+                d="M45.7007 7.97815C47.656 6.16102 50.6953 6.35388 52.5581 8.20471L52.5757 8.22229L52.5923 8.23987L65.7856 22.3854L65.7866 22.3873C67.5503 24.283 67.6031 27.4592 65.521 29.2994L65.522 29.3004L63.4546 31.1803C61.5624 32.9366 58.3968 32.9912 56.5562 30.9137V30.9147L43.3628 16.778L43.3608 16.777C41.5971 14.8813 41.5443 11.7031 43.6265 9.86292L45.7007 7.97717V7.97815Z"
+                fill={ACCENT}
+                stroke={LINE}
+                strokeWidth="2.5625"
+            />
+            <path
+                d="M42.8857 16.1649L56.3672 30.4813L57.2607 31.4305L56.2959 32.3075L55.2588 33.2499L57.5215 35.788L58.3662 36.7352L57.4277 37.5887L56.3213 38.5936L77.6875 61.1249C78.5324 61.9755 78.9543 62.9126 79.1641 63.6317C79.269 63.9917 79.3229 64.3032 79.3506 64.5321C79.3644 64.6466 79.372 64.7417 79.376 64.8134C79.378 64.8491 79.3792 64.8794 79.3799 64.9032C79.3801 64.9125 79.3798 64.9212 79.3799 64.9286L79.4697 69.0692L79.5039 70.6317L77.9639 70.3583L73.7412 69.6063H73.7383C73.7371 69.6061 73.7357 69.6056 73.7344 69.6053C73.7315 69.6049 73.7283 69.604 73.7246 69.6034C73.7171 69.6021 73.708 69.6005 73.6973 69.5985C73.6756 69.5945 73.6473 69.589 73.6133 69.5819C73.5454 69.5678 73.4533 69.5474 73.3418 69.5184C73.119 69.4605 72.8135 69.3684 72.4619 69.2284C71.7653 68.9511 70.8445 68.4684 70.0254 67.6493L70.0107 67.6346L69.9961 67.619L49.1436 45.3241L47.627 46.7255L46.6689 47.6093L45.8018 46.6366L43.5459 44.1063L42.7061 44.8544L41.7715 45.6864L40.918 44.7723L27.5352 30.4462L26.6582 29.5077L27.5996 28.6337L41.0811 16.1044L42.0127 15.2382L42.8857 16.1649Z"
+                fill={PAPER}
+                stroke={LINE}
+                strokeWidth="2.5625"
+            />
+            <path
+                d="M21.1493 29.7487C23.0425 27.9894 26.2018 27.9377 28.0399 30.0201H28.0409L41.2343 44.1666L41.2362 44.1676C43.0047 46.0687 43.0532 49.2596 40.953 51.0973L40.952 51.0963L38.9032 52.9586L38.9042 52.9596C36.9652 54.7513 33.8035 54.6284 32.0038 52.694V52.693L18.8026 38.5494L18.8007 38.5485C17.0363 36.652 16.9839 33.4713 19.079 31.6315L21.1493 29.7487Z"
+                fill={ACCENT}
+                stroke={LINE}
+                strokeWidth="2.5625"
+            />
+            <path
+                d="M36.2988 64.2545C38.1916 64.2545 39.5263 65.8816 39.5264 67.6979V70.276H13.0049V67.6979C13.005 65.8816 14.3397 64.2545 16.2324 64.2545H36.2988Z"
+                fill={ACCENT}
+                stroke={LINE}
+                strokeWidth="2.17813"
+            />
+            <path
+                d="M11.1992 70.276H41.332C41.4051 70.2761 41.6666 70.3329 41.9697 70.8551C42.2578 71.3515 42.4708 72.1115 42.4727 73.0192C42.4565 73.934 42.2356 74.703 41.9434 75.2067C41.6326 75.7421 41.377 75.7856 41.332 75.7858H11.1992C11.1261 75.7856 10.8646 75.7289 10.5615 75.2067C10.2722 74.7082 10.0576 73.9437 10.0576 73.0309C10.0576 72.118 10.2722 71.3536 10.5615 70.8551C10.8646 70.3329 11.1261 70.2761 11.1992 70.276Z"
+                fill={PAPER}
+                stroke={LINE}
+                strokeWidth="2.17813"
+            />
+            <path d="M18.2265 15.3594L20.6408 26.1934L24.2665 15.8616L18.2265 15.3594Z" fill={LINE} />
+            <path d="M6.17804 22.5442L2.31654 30.1196L15.6683 31.7663L6.17804 22.5442Z" fill={ACCENT} />
+            <path d="M6.82715 43.8439L9.92982 49.5059L16.6986 42.1524L6.82715 43.8439Z" fill={LINE} />
+        </g>
+        <defs>
+            <clipPath id="stage-finalized-clip">
+                <rect width="82" height="82" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git a/src/components/ResolutionDashboard/step-tabs.tsx b/src/components/ResolutionDashboard/step-tabs.tsx
new file mode 100644
index 0000000..f950dff
--- /dev/null
+++ b/src/components/ResolutionDashboard/step-tabs.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+
+// Vendored from OpinionLabs/frontend src/app/world-cup/components/WorldCupPageContent.tsx
+//（該檔頁內的 `Tabs` 元件 step 模式 + getRoundedStepPath / getStepTabPath 兩個 helper，
+// 以及 STEP_TAB_* 常數）。production 用在 World Cup 的 Group Stage → Round of 32 →
+// Quarter Final → Winner 那排箭頭 tab。
+//
+// 形狀是 SVG path 而非 clip-path：每一格右端凸出一個箭頭、左端凹進一個同尺寸的
+// 缺口（第一格除外），相鄰兩格用負 margin 咬合，轉角以二次貝茲補圓角。
+//
+// 與 production 的偏離：
+// - production 的 `Tabs` 同時服務 step 與 pill 兩種模式且寫死在頁內；這裡只取 step
+//   模式，並把每格寬度改成由 label 估算（production 是逐項手填 px，因為它的標籤固定；
+//   本頁標籤帶動態計數會變長）。
+// - 不含 mobile 分支（本頁目前只驗證桌面）。
+import { type CSSProperties } from "react";
+import { Inline, MediumText } from "@olab/components";
+import cn from "classnames";
+
+type Point = readonly [number, number];
+
+export interface StepTabItem {
+    label: string;
+    value: string;
+}
+
+const STEP_TAB_HEIGHT = 32;
+const STEP_TAB_ARROW_SIZE = 16;
+const STEP_TAB_RADIUS = 5;
+
+/** 每格寬度：文字估寬 + 左右內距 + 箭頭讓出的空間。production 是逐項手填 px。 */
+const CHAR_WIDTH = 7.6;
+const LABEL_PADDING = 40;
+
+const getRoundedStepPath = (points: Point[], radius: number) => {
+    if (points.length < 3) {
+        return "";
+    }
+
+    return points
+        .map((point, index) => {
+            const previous = points[(index - 1 + points.length) % points.length];
+            const next = points[(index + 1) % points.length];
+            const previousLength = Math.hypot(point[0] - previous[0], point[1] - previous[1]);
+            const nextLength = Math.hypot(next[0] - point[0], next[1] - point[1]);
+            const cornerRadius = Math.min(radius, previousLength / 2, nextLength / 2);
+            const start: Point = [
+                point[0] + ((previous[0] - point[0]) / previousLength) * cornerRadius,
+                point[1] + ((previous[1] - point[1]) / previousLength) * cornerRadius,
+            ];
+            const end: Point = [
+                point[0] + ((next[0] - point[0]) / nextLength) * cornerRadius,
+                point[1] + ((next[1] - point[1]) / nextLength) * cornerRadius,
+            ];
+
+            return `${index === 0 ? "M" : "L"} ${start[0]} ${start[1]} Q ${point[0]} ${point[1]} ${end[0]} ${end[1]}`;
+        })
+        .join(" ")
+        .concat(" Z");
+};
+
+const getStepTabPath = (width: number, isFirst: boolean, height = STEP_TAB_HEIGHT, arrowSize = STEP_TAB_ARROW_SIZE) => {
+    const points: Point[] = isFirst
+        ? [
+              [0, 0],
+              [width - arrowSize, 0],
+              [width, height / 2],
+              [width - arrowSize, height],
+              [0, height],
+          ]
+        : [
+              [0, 0],
+              [width - arrowSize, 0],
+              [width, height / 2],
+              [width - arrowSize, height],
+              [0, height],
+              [arrowSize, height / 2],
+          ];
+
+    return getRoundedStepPath(points, STEP_TAB_RADIUS);
+};
+
+interface StepTabsProps {
+    items: StepTabItem[];
+    value: string;
+    onChange?: (_value: string) => void;
+}
+
+export const StepTabs = ({ items, value, onChange }: StepTabsProps) => (
+    <Inline className="h-8 overflow-visible">
+        {items.map((item, index) => {
+            const isActive = item.value === value;
+            const width = Math.round(item.label.length * CHAR_WIDTH + LABEL_PADDING);
+
+            return (
+                <Inline
+                    key={item.value}
+                    className={cn(
+                        "group relative h-8 w-[var(--tab-width)] cursor-pointer items-center justify-center overflow-visible",
+                        // 相鄰兩格咬合：後一格左端的缺口疊回前一格的箭頭上
+                        index > 0 && "[margin-left:var(--tab-gap)]",
+                    )}
+                    role="button"
+                    tabIndex={0}
+                    style={
+                        {
+                            "--tab-width": `${width}px`,
+                            "--tab-gap": index > 0 ? "-4px" : "0px",
+                        } as CSSProperties
+                    }
+                    onClick={() => onChange?.(item.value)}
+                    onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            onChange?.(item.value);
+                        }
+                    }}
+                >
+                    <svg
+                        aria-hidden="true"
+                        className="pointer-events-none absolute inset-0 h-full w-full"
+                        focusable="false"
+                        viewBox={`0 0 ${width} ${STEP_TAB_HEIGHT}`}
+                    >
+                        {/* 底色與文字都走 DS 的 .transition-normal（150ms ease-out）：
+                            切 tab 時整格是淡入淡出而不是硬跳（2026-08-04 user 要求）。 */}
+                        <path
+                            className={cn(
+                                "transition-normal",
+                                isActive
+                                    ? "fill-[var(--color-bg-brand-solid)]"
+                                    : "fill-[var(--color-bg-secondary)] group-hover:fill-[var(--color-bg-tertiary)]",
+                            )}
+                            d={getStepTabPath(width, index === 0)}
+                        />
+                    </svg>
+                    <MediumText
+                        className={cn(
+                            "transition-normal relative z-10 text-[14px] leading-5 font-medium whitespace-nowrap",
+                            // 按下時整格微縮：點擊有實體回饋，放開就彈回
+                            "group-active:scale-95",
+                            isActive ? "text-black" : "text-primary",
+                        )}
+                    >
+                        {item.label}
+                    </MediumText>
+                </Inline>
+            );
+        })}
+    </Inline>
+);
diff --git a/src/index.css b/src/index.css
index ffdc92f..1126796 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,6 +83,9 @@
 @theme inline {
   --font-manrope: var(--next-font-manrope), sans-serif;
   --font-secondary: var(--next-font-space-mono), ui-monospace, monospace;
+  /* 金額 / 賠率等數字的字體。design system 側一律以 font-number 標記數字欄位，
+     指向既有的 --font-secondary，不引入新字體。 */
+  --font-number: var(--next-font-space-mono), ui-monospace, monospace;
 }
 
 @theme {
-- 
2.39.5 (Apple Git-154)