From da6d018857fe5f73976f2ad33ca76d495824cf89 Mon Sep 17 00:00:00 2001
From: Wibias <37517432+Wibias@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:38:01 +0200
Subject: [PATCH] gui: port Storage workspace UI and tighten policy chrome

Bring the rail/overview Storage workspace onto tip, flatten nested scroll, and align Rescan/Run now/policy form controls with Codex Auth patterns.
---
 gui/src/components/NumberStepper.tsx          |  43 ++
 .../storage-workspace/StorageWorkspace.tsx    | 208 ++++++++++
 gui/src/i18n/de.ts                            |  11 +-
 gui/src/i18n/en.ts                            |  11 +-
 gui/src/i18n/ja.ts                            |  11 +-
 gui/src/i18n/ko.ts                            |  11 +-
 gui/src/i18n/ru.ts                            |  11 +-
 gui/src/i18n/zh.ts                            |  11 +-
 gui/src/pages/Storage.tsx                     | 376 ++++++++----------
 gui/src/styles-storage-workspace.css          | 351 ++++++++++++++++
 gui/src/styles.css                            |  30 ++
 11 files changed, 862 insertions(+), 212 deletions(-)
 create mode 100644 gui/src/components/NumberStepper.tsx
 create mode 100644 gui/src/components/storage-workspace/StorageWorkspace.tsx
 create mode 100644 gui/src/styles-storage-workspace.css

diff --git a/gui/src/components/NumberStepper.tsx b/gui/src/components/NumberStepper.tsx
new file mode 100644
index 000000000..1b9f85528
--- /dev/null
+++ b/gui/src/components/NumberStepper.tsx
@@ -0,0 +1,43 @@
+import { IconChevron } from "../icons";
+
+export interface NumberStepperProps {
+  disabled?: boolean;
+  /** Increase the bound value (parent owns parsing / clamping). */
+  onIncrement(): void;
+  /** Decrease the bound value. */
+  onDecrement(): void;
+  incrementLabel: string;
+  decrementLabel: string;
+}
+
+/** Compact up/down chevron pair matching dashboard control chrome. */
+export function NumberStepper({
+  disabled = false,
+  onIncrement,
+  onDecrement,
+  incrementLabel,
+  decrementLabel,
+}: NumberStepperProps) {
+  return (
+    <div className="ocx-stepper" role="group">
+      <button
+        type="button"
+        className="ocx-stepper__btn"
+        disabled={disabled}
+        aria-label={incrementLabel}
+        onClick={onIncrement}
+      >
+        <IconChevron width={10} height={10} aria-hidden="true" style={{ transform: "rotate(-90deg)" }} />
+      </button>
+      <button
+        type="button"
+        className="ocx-stepper__btn"
+        disabled={disabled}
+        aria-label={decrementLabel}
+        onClick={onDecrement}
+      >
+        <IconChevron width={10} height={10} aria-hidden="true" style={{ transform: "rotate(90deg)" }} />
+      </button>
+    </div>
+  );
+}
diff --git a/gui/src/components/storage-workspace/StorageWorkspace.tsx b/gui/src/components/storage-workspace/StorageWorkspace.tsx
new file mode 100644
index 000000000..c4485d3fa
--- /dev/null
+++ b/gui/src/components/storage-workspace/StorageWorkspace.tsx
@@ -0,0 +1,208 @@
+/**
+ * StorageWorkspace — rail + main workspace for the Storage tab, mirroring the
+ * Providers workspace DNA. Left rail lists buckets sorted by size; the main pane
+ * shows either the overview (totals + largest files across buckets) or a
+ * per-bucket detail view.
+ */
+/* eslint-disable react-refresh/only-export-components -- bucket label helper co-locates with the rail rows */
+import { useMemo, useState } from "react";
+import { IconChevron, IconHardDrive } from "../../icons";
+import { useT, type TFn, type TKey, type Locale } from "../../i18n/shared";
+import { formatBytes } from "../../format-bytes";
+
+export interface StorageLargestEntry {
+  path: string;
+  bytes: number;
+}
+
+export interface StorageBucket {
+  key: string;
+  label: string;
+  bytes: number;
+  fileCount: number;
+  oldest?: number;
+  newest?: number;
+  largest?: StorageLargestEntry[];
+  rows?: number | null;
+}
+
+export interface StorageReport {
+  codexHome: string;
+  generatedAt: number;
+  total: { bytes: number; fileCount: number };
+  buckets: StorageBucket[];
+  error?: string;
+}
+
+// Known scanner bucket keys → localized labels; unknown future keys fall back to the API label.
+const BUCKET_TKEYS: Record<string, TKey> = {
+  sessions: "storage.bucket.sessions",
+  archived_sessions: "storage.bucket.archived_sessions",
+  logs_db: "storage.bucket.logs_db",
+  state_db: "storage.bucket.state_db",
+  attachments: "storage.bucket.attachments",
+  deletion_manifests: "storage.bucket.deletion_manifests",
+  other: "storage.bucket.other",
+};
+
+export function bucketLabel(bucket: StorageBucket, t: TFn): string {
+  const tkey = BUCKET_TKEYS[bucket.key];
+  return tkey ? t(tkey) : bucket.label;
+}
+
+function formatDate(ms: number | undefined, locale: Locale): string {
+  return ms === undefined ? "—" : new Date(ms).toLocaleDateString(locale);
+}
+
+function rowsDisplay(bucket: StorageBucket, locale: Locale, t: TFn): string {
+  if (bucket.rows === undefined) return "—";
+  if (bucket.rows === null) return t("storage.rows.unknown");
+  return bucket.rows.toLocaleString(locale);
+}
+
+export interface StorageWorkspaceProps {
+  report: StorageReport;
+  locale: Locale;
+}
+
+export default function StorageWorkspace({ report, locale }: StorageWorkspaceProps) {
+  const t = useT();
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+
+  const sortedBuckets = useMemo(
+    () => [...report.buckets].sort((a, b) => b.bytes - a.bytes),
+    [report.buckets],
+  );
+  const selected = sortedBuckets.find(b => b.key === selectedKey) ?? null;
+
+  const largestAcross = useMemo(() => {
+    const rows: Array<StorageLargestEntry & { bucketKey: string }> = [];
+    for (const bucket of report.buckets) {
+      for (const entry of bucket.largest ?? []) rows.push({ ...entry, bucketKey: bucket.key });
+    }
+    return rows.sort((a, b) => b.bytes - a.bytes).slice(0, 10);
+  }, [report.buckets]);
+
+  const bucketByKey = useMemo(
+    () => new Map(report.buckets.map(b => [b.key, b])),
+    [report.buckets],
+  );
+
+  return (
+    <div className="storage-workspace-root">
+      <aside className="storage-workspace-rail" aria-label={t("storage.section.buckets")}>
+        <div className="storage-workspace-rail-header">
+          <span className="storage-workspace-rail-title">{t("storage.section.buckets")}</span>
+          <span className="storage-workspace-rail-count">{sortedBuckets.length}</span>
+        </div>
+        <div className="storage-workspace-rail-list">
+          {sortedBuckets.length === 0 ? (
+            <span className="storage-workspace-rail-empty">{t("storage.empty")}</span>
+          ) : (
+            sortedBuckets.map(bucket => (
+              <button
+                key={bucket.key}
+                type="button"
+                className={`storage-workspace-rail-row${selectedKey === bucket.key ? " storage-workspace-rail-row--selected" : ""}`}
+                onClick={() => setSelectedKey(prev => (prev === bucket.key ? null : bucket.key))}
+                aria-current={selectedKey === bucket.key ? "true" : undefined}
+              >
+                <span className="storage-workspace-rail-primary">
+                  <span className="storage-workspace-rail-name">{bucketLabel(bucket, t)}</span>
+                  <span className="storage-workspace-rail-size">{formatBytes(bucket.bytes, locale)}</span>
+                </span>
+                <span className="storage-workspace-rail-meta">
+                  {bucket.fileCount.toLocaleString(locale)} {t("storage.col.files").toLowerCase()}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      </aside>
+
+      <main className="storage-workspace-main">
+        {selected ? (
+          <div className="stw-detail">
+            <button type="button" className="stw-detail-back" onClick={() => setSelectedKey(null)}>
+              <IconChevron className="stw-detail-back-chevron" />
+              {t("modal.back")}
+            </button>
+            <h2 className="stw-detail-title">{bucketLabel(selected, t)}</h2>
+            <dl className="stw-kv">
+              <div className="stw-kv-row">
+                <dt>{t("storage.col.size")}</dt>
+                <dd className="stw-kv-mono">{formatBytes(selected.bytes, locale)}</dd>
+              </div>
+              <div className="stw-kv-row">
+                <dt>{t("storage.col.files")}</dt>
+                <dd className="stw-kv-mono">{selected.fileCount.toLocaleString(locale)}</dd>
+              </div>
+              <div className="stw-kv-row">
+                <dt>{t("storage.col.oldest")}</dt>
+                <dd>{formatDate(selected.oldest, locale)}</dd>
+              </div>
+              <div className="stw-kv-row">
+                <dt>{t("storage.col.newest")}</dt>
+                <dd>{formatDate(selected.newest, locale)}</dd>
+              </div>
+              <div className="stw-kv-row">
+                <dt>{t("storage.col.rows")}</dt>
+                <dd className="stw-kv-mono">{rowsDisplay(selected, locale, t)}</dd>
+              </div>
+            </dl>
+
+            {(selected.largest?.length ?? 0) > 0 && (
+              <div className="stw-section">
+                <h3 className="stw-section-title">{t("storage.section.largest")}</h3>
+                {selected.largest!.map(entry => (
+                  <div key={entry.path} className="stw-file-row">
+                    <span className="stw-file-path" title={entry.path}>{entry.path}</span>
+                    <span className="stw-file-size">{formatBytes(entry.bytes, locale)}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className="usage-cards">
+              <div className="stat">
+                <div className="muted">{t("storage.card.total")}</div>
+                <div className="stat-value">{formatBytes(report.total.bytes, locale)}</div>
+              </div>
+              <div className="stat">
+                <div className="muted">{t("storage.card.files")}</div>
+                <div className="stat-value">{report.total.fileCount.toLocaleString(locale)}</div>
+              </div>
+              <div className="stat">
+                <div className="muted">{t("storage.card.home")}</div>
+                <div className="stat-value mono" style={{ fontSize: "var(--text-body)", wordBreak: "break-all" }}>{report.codexHome}</div>
+              </div>
+            </div>
+
+            {largestAcross.length > 0 ? (
+              <div className="stw-section">
+                <h3 className="stw-section-title">{t("storage.section.largest")}</h3>
+                {largestAcross.map(entry => {
+                  const owner = bucketByKey.get(entry.bucketKey);
+                  return (
+                    <div key={`${entry.bucketKey}:${entry.path}`} className="stw-file-row">
+                      <span className="stw-file-path" title={entry.path}>{entry.path}</span>
+                      {owner && <span className="stw-file-bucket">{bucketLabel(owner, t)}</span>}
+                      <span className="stw-file-size">{formatBytes(entry.bytes, locale)}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="stw-hint">
+                <IconHardDrive style={{ width: 14, height: 14, verticalAlign: "text-bottom", marginRight: 6 }} aria-hidden="true" />
+                {t("storage.workspace.selectBucket")}
+              </p>
+            )}
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
diff --git a/gui/src/i18n/de.ts b/gui/src/i18n/de.ts
index 11167fc3b..f2b8048e9 100644
--- a/gui/src/i18n/de.ts
+++ b/gui/src/i18n/de.ts
@@ -906,11 +906,14 @@ export const de: Record<TKey, string> = {
   "storage.empty": "CODEX_HOME ist leer oder fehlt — nichts zu berichten.",
   "storage.error": "Speicher-Scan fehlgeschlagen. Prüfe, ob CODEX_HOME auf ein gültiges Verzeichnis zeigt.",
   "storage.refresh": "Neu scannen",
+  "storage.rescanned": "Scan abgeschlossen.",
   "storage.card.total": "Gesamtgröße",
   "storage.card.files": "Dateien",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "Bereiche",
   "storage.section.largest": "Größte Dateien",
+  "storage.workspace.overview": "Übersicht",
+  "storage.workspace.selectBucket": "Wähle einen Bucket aus der Liste, um die Aufschlüsselung zu sehen.",
   "storage.col.bucket": "Bereich",
   "storage.col.size": "Größe",
   "storage.col.files": "Dateien",
@@ -928,7 +931,7 @@ export const de: Record<TKey, string> = {
   "storage.cleanup.title": "Archivbereinigung",
   "storage.cleanup.help": "Entfernt die ältesten archivierten Sitzungen nach Prozentsatz. Aktive Sitzungen werden nie angefasst. Standard ist Quarantäne — Dateien wandern nach CODEX_HOME/.trash.",
   "storage.cleanup.slider": "Ältester Archivanteil",
-  "storage.cleanup.percent": "Älteste {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "Vorschau",
   "storage.cleanup.confirmTitle": "Archivbereinigung bestätigen",
@@ -999,6 +1002,12 @@ export const de: Record<TKey, string> = {
   "storage.policy.target": "Bereinigungsziel",
   "storage.policy.targetPercent": "Ältesten Archivanteil entfernen",
   "storage.policy.targetReduce": "Archivgröße reduzieren auf (GiB)",
+  "storage.policy.thresholdInc": "Schwellwert erhöhen",
+  "storage.policy.thresholdDec": "Schwellwert verringern",
+  "storage.policy.percentInc": "Prozent erhöhen",
+  "storage.policy.percentDec": "Prozent verringern",
+  "storage.policy.reduceInc": "Zielgröße erhöhen",
+  "storage.policy.reduceDec": "Zielgröße verringern",
   "storage.policy.schedule": "Zeitplan",
   "storage.policy.schedule.manual": "Nur manuell",
   "storage.policy.schedule.startup": "Beim Proxy-Start",
diff --git a/gui/src/i18n/en.ts b/gui/src/i18n/en.ts
index edb244f48..8633ec4d6 100644
--- a/gui/src/i18n/en.ts
+++ b/gui/src/i18n/en.ts
@@ -632,11 +632,14 @@ export const en = {
   "storage.empty": "CODEX_HOME is empty or missing — nothing to report.",
   "storage.error": "Storage scan failed. Check that CODEX_HOME points at a valid directory.",
   "storage.refresh": "Rescan",
+  "storage.rescanned": "Scan complete.",
   "storage.card.total": "Total size",
   "storage.card.files": "Files",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "Buckets",
   "storage.section.largest": "Largest files",
+  "storage.workspace.overview": "Overview",
+  "storage.workspace.selectBucket": "Select a bucket from the list to see its breakdown.",
   "storage.col.bucket": "Bucket",
   "storage.col.size": "Size",
   "storage.col.files": "Files",
@@ -654,7 +657,7 @@ export const en = {
   "storage.cleanup.title": "Archived cleanup",
   "storage.cleanup.help": "Remove the oldest archived sessions by percentage. Active sessions are never touched. Quarantine is the default — files move to CODEX_HOME/.trash.",
   "storage.cleanup.slider": "Oldest archived percent",
-  "storage.cleanup.percent": "Oldest {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "Preview",
   "storage.cleanup.confirmTitle": "Confirm archived cleanup",
@@ -725,6 +728,12 @@ export const en = {
   "storage.policy.target": "Cleanup target",
   "storage.policy.targetPercent": "Remove oldest archived percent",
   "storage.policy.targetReduce": "Reduce archived size to (GiB)",
+  "storage.policy.thresholdInc": "Increase threshold",
+  "storage.policy.thresholdDec": "Decrease threshold",
+  "storage.policy.percentInc": "Increase percent",
+  "storage.policy.percentDec": "Decrease percent",
+  "storage.policy.reduceInc": "Increase reduce-to size",
+  "storage.policy.reduceDec": "Decrease reduce-to size",
   "storage.policy.schedule": "Schedule",
   "storage.policy.schedule.manual": "Manual only",
   "storage.policy.schedule.startup": "On proxy startup",
diff --git a/gui/src/i18n/ja.ts b/gui/src/i18n/ja.ts
index 3a6981701..bf682bbca 100644
--- a/gui/src/i18n/ja.ts
+++ b/gui/src/i18n/ja.ts
@@ -599,11 +599,14 @@ export const ja: Record<TKey, string> = {
   "storage.empty": "CODEX_HOME が空か存在しません — 報告するものはありません。",
   "storage.error": "ストレージのスキャンに失敗しました。CODEX_HOME が有効なディレクトリを指しているか確認してください。",
   "storage.refresh": "再スキャン",
+  "storage.rescanned": "スキャンが完了しました。",
   "storage.card.total": "合計サイズ",
   "storage.card.files": "ファイル",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "バケット",
   "storage.section.largest": "最大ファイル",
+  "storage.workspace.overview": "概要",
+  "storage.workspace.selectBucket": "一覧からバケットを選ぶと内訳が表示されます。",
   "storage.col.bucket": "バケット",
   "storage.col.size": "サイズ",
   "storage.col.files": "ファイル",
@@ -621,7 +624,7 @@ export const ja: Record<TKey, string> = {
   "storage.cleanup.title": "アーカイブのクリーンアップ",
   "storage.cleanup.help": "古いアーカイブセッションを割合で削除します。アクティブセッションには触れません。既定は隔離で、ファイルは CODEX_HOME/.trash へ移動します。",
   "storage.cleanup.slider": "古いアーカイブの割合",
-  "storage.cleanup.percent": "古い {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "プレビュー",
   "storage.cleanup.confirmTitle": "アーカイブクリーンアップの確認",
@@ -692,6 +695,12 @@ export const ja: Record<TKey, string> = {
   "storage.policy.target": "クリーンアップ目標",
   "storage.policy.targetPercent": "古いアーカイブの割合を削除",
   "storage.policy.targetReduce": "アーカイブを次のサイズまで縮小（GiB）",
+  "storage.policy.thresholdInc": "しきい値を上げる",
+  "storage.policy.thresholdDec": "しきい値を下げる",
+  "storage.policy.percentInc": "パーセントを上げる",
+  "storage.policy.percentDec": "パーセントを下げる",
+  "storage.policy.reduceInc": "削減目標を上げる",
+  "storage.policy.reduceDec": "削減目標を下げる",
   "storage.policy.schedule": "スケジュール",
   "storage.policy.schedule.manual": "手動のみ",
   "storage.policy.schedule.startup": "プロキシ起動時",
diff --git a/gui/src/i18n/ko.ts b/gui/src/i18n/ko.ts
index 5e206ab31..0e2821c2a 100644
--- a/gui/src/i18n/ko.ts
+++ b/gui/src/i18n/ko.ts
@@ -926,11 +926,14 @@ export const ko: Record<TKey, string> = {
   "storage.empty": "CODEX_HOME이 비어 있거나 없습니다 — 표시할 내용이 없습니다.",
   "storage.error": "저장소 스캔에 실패했습니다. CODEX_HOME이 올바른 디렉터리를 가리키는지 확인하세요.",
   "storage.refresh": "다시 스캔",
+  "storage.rescanned": "스캔이 완료되었습니다.",
   "storage.card.total": "전체 크기",
   "storage.card.files": "파일 수",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "버킷",
   "storage.section.largest": "가장 큰 파일",
+  "storage.workspace.overview": "개요",
+  "storage.workspace.selectBucket": "목록에서 버킷을 선택하면 세부 내역을 볼 수 있습니다.",
   "storage.col.bucket": "버킷",
   "storage.col.size": "크기",
   "storage.col.files": "파일",
@@ -948,7 +951,7 @@ export const ko: Record<TKey, string> = {
   "storage.cleanup.title": "보관 정리",
   "storage.cleanup.help": "가장 오래된 보관 세션을 비율로 제거합니다. 활성 세션은 건드리지 않습니다. 기본은 격리이며 파일은 CODEX_HOME/.trash로 이동합니다.",
   "storage.cleanup.slider": "오래된 보관 비율",
-  "storage.cleanup.percent": "오래된 {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "미리보기",
   "storage.cleanup.confirmTitle": "보관 정리 확인",
@@ -1019,6 +1022,12 @@ export const ko: Record<TKey, string> = {
   "storage.policy.target": "정리 목표",
   "storage.policy.targetPercent": "가장 오래된 보관 비율 제거",
   "storage.policy.targetReduce": "보관 용량을 다음까지 줄이기 (GiB)",
+  "storage.policy.thresholdInc": "임계값 증가",
+  "storage.policy.thresholdDec": "임계값 감소",
+  "storage.policy.percentInc": "퍼센트 증가",
+  "storage.policy.percentDec": "퍼센트 감소",
+  "storage.policy.reduceInc": "축소 목표 증가",
+  "storage.policy.reduceDec": "축소 목표 감소",
   "storage.policy.schedule": "일정",
   "storage.policy.schedule.manual": "수동만",
   "storage.policy.schedule.startup": "프록시 시작 시",
diff --git a/gui/src/i18n/ru.ts b/gui/src/i18n/ru.ts
index 97e1d68da..1773772b1 100644
--- a/gui/src/i18n/ru.ts
+++ b/gui/src/i18n/ru.ts
@@ -631,11 +631,14 @@ export const ru: Record<TKey, string> = {
   "storage.empty": "CODEX_HOME пуст или отсутствует — показывать нечего.",
   "storage.error": "Не удалось просканировать хранилище. Убедитесь, что CODEX_HOME указывает на корректный каталог.",
   "storage.refresh": "Пересканировать",
+  "storage.rescanned": "Сканирование завершено.",
   "storage.card.total": "Общий размер",
   "storage.card.files": "Файлы",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "Категории",
   "storage.section.largest": "Крупнейшие файлы",
+  "storage.workspace.overview": "Обзор",
+  "storage.workspace.selectBucket": "Выберите сегмент в списке, чтобы увидеть разбивку.",
   "storage.col.bucket": "Категория",
   "storage.col.size": "Размер",
   "storage.col.files": "Файлы",
@@ -653,7 +656,7 @@ export const ru: Record<TKey, string> = {
   "storage.cleanup.title": "Очистка архива",
   "storage.cleanup.help": "Удаляет самые старые архивные сессии по проценту. Активные сессии не затрагиваются. По умолчанию — карантин: файлы перемещаются в CODEX_HOME/.trash.",
   "storage.cleanup.slider": "Доля самых старых архивов",
-  "storage.cleanup.percent": "Самые старые {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "Предпросмотр",
   "storage.cleanup.confirmTitle": "Подтвердить очистку архива",
@@ -724,6 +727,12 @@ export const ru: Record<TKey, string> = {
   "storage.policy.target": "Цель очистки",
   "storage.policy.targetPercent": "Удалить процент самых старых архивов",
   "storage.policy.targetReduce": "Уменьшить архив до (ГиБ)",
+  "storage.policy.thresholdInc": "Увеличить порог",
+  "storage.policy.thresholdDec": "Уменьшить порог",
+  "storage.policy.percentInc": "Увеличить процент",
+  "storage.policy.percentDec": "Уменьшить процент",
+  "storage.policy.reduceInc": "Увеличить целевой размер",
+  "storage.policy.reduceDec": "Уменьшить целевой размер",
   "storage.policy.schedule": "Расписание",
   "storage.policy.schedule.manual": "Только вручную",
   "storage.policy.schedule.startup": "При запуске прокси",
diff --git a/gui/src/i18n/zh.ts b/gui/src/i18n/zh.ts
index ee16b561c..d7bed7261 100644
--- a/gui/src/i18n/zh.ts
+++ b/gui/src/i18n/zh.ts
@@ -926,11 +926,14 @@ export const zh: Record<TKey, string> = {
   "storage.empty": "CODEX_HOME 为空或不存在——没有可显示的内容。",
   "storage.error": "存储扫描失败。请检查 CODEX_HOME 是否指向有效目录。",
   "storage.refresh": "重新扫描",
+  "storage.rescanned": "扫描完成。",
   "storage.card.total": "总大小",
   "storage.card.files": "文件数",
   "storage.card.home": "CODEX_HOME",
   "storage.section.buckets": "分类",
   "storage.section.largest": "最大文件",
+  "storage.workspace.overview": "概览",
+  "storage.workspace.selectBucket": "从列表中选择一个存储桶以查看明细。",
   "storage.col.bucket": "分类",
   "storage.col.size": "大小",
   "storage.col.files": "文件",
@@ -948,7 +951,7 @@ export const zh: Record<TKey, string> = {
   "storage.cleanup.title": "归档清理",
   "storage.cleanup.help": "按百分比移除最旧的归档会话。不会触碰活动会话。默认隔离——文件移至 CODEX_HOME/.trash。",
   "storage.cleanup.slider": "最旧归档百分比",
-  "storage.cleanup.percent": "最旧 {percent}%",
+  "storage.cleanup.percent": "{percent}%",
   "storage.cleanup.preset": "{percent}",
   "storage.cleanup.preview": "预览",
   "storage.cleanup.confirmTitle": "确认归档清理",
@@ -1019,6 +1022,12 @@ export const zh: Record<TKey, string> = {
   "storage.policy.target": "清理目标",
   "storage.policy.targetPercent": "删除最旧归档百分比",
   "storage.policy.targetReduce": "将归档缩小至（GiB）",
+  "storage.policy.thresholdInc": "提高阈值",
+  "storage.policy.thresholdDec": "降低阈值",
+  "storage.policy.percentInc": "提高百分比",
+  "storage.policy.percentDec": "降低百分比",
+  "storage.policy.reduceInc": "提高缩减目标",
+  "storage.policy.reduceDec": "降低缩减目标",
   "storage.policy.schedule": "计划",
   "storage.policy.schedule.manual": "仅手动",
   "storage.policy.schedule.startup": "代理启动时",
diff --git a/gui/src/pages/Storage.tsx b/gui/src/pages/Storage.tsx
index 0fc3e9e9b..f55032022 100644
--- a/gui/src/pages/Storage.tsx
+++ b/gui/src/pages/Storage.tsx
@@ -1,32 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useI18n, type TFn, type TKey, type Locale } from "../i18n/shared";
+import { useI18n, type TFn, type Locale } from "../i18n/shared";
 import { EmptyState } from "../ui";
 import { IconRefresh } from "../icons";
 import { formatBytes } from "../format-bytes";
+import { NumberStepper } from "../components/NumberStepper";
+import StorageWorkspace, {
+  type StorageReport,
+} from "../components/storage-workspace/StorageWorkspace";
 
-interface StorageLargestEntry {
-  path: string;
-  bytes: number;
-}
-
-interface StorageBucket {
-  key: string;
-  label: string;
-  bytes: number;
-  fileCount: number;
-  oldest?: number;
-  newest?: number;
-  largest?: StorageLargestEntry[];
-  rows?: number | null;
-}
-
-interface StorageReport {
-  codexHome: string;
-  generatedAt: number;
-  total: { bytes: number; fileCount: number };
-  buckets: StorageBucket[];
-  error?: string;
-}
 
 interface CleanupPreview {
   percent: number;
@@ -96,18 +77,16 @@ interface CleanupPolicy {
   };
 }
 
-const BUCKET_TKEYS: Record<string, TKey> = {
-  sessions: "storage.bucket.sessions",
-  archived_sessions: "storage.bucket.archived_sessions",
-  logs_db: "storage.bucket.logs_db",
-  state_db: "storage.bucket.state_db",
-  attachments: "storage.bucket.attachments",
-  deletion_manifests: "storage.bucket.deletion_manifests",
-  other: "storage.bucket.other",
-};
-
 const PRESETS = [10, 25, 50] as const;
 
+function clampDraft(raw: string, delta: number, min: number, max: number, step = 1): string {
+  const parsed = Number(raw);
+  const base = Number.isFinite(parsed) ? parsed : min;
+  const next = Math.min(max, Math.max(min, base + delta));
+  // Keep one decimal for GiB-style steps; integers for percent.
+  return step < 1 ? String(Math.round(next * 10) / 10) : String(Math.round(next));
+}
+
 const localizedCatch = (e: unknown, fallback: string): string => {
   if (!(e instanceof Error)) return fallback;
   const msg = e.message;
@@ -123,78 +102,6 @@ const localizedCatch = (e: unknown, fallback: string): string => {
   return msg || fallback;
 };
 
-function bucketLabel(bucket: StorageBucket, t: TFn): string {
-  const tkey = BUCKET_TKEYS[bucket.key];
-  return tkey ? t(tkey) : bucket.label;
-}
-
-function formatDate(ms: number | undefined, locale: Locale): string {
-  return ms === undefined ? "—" : new Date(ms).toLocaleDateString(locale);
-}
-
-function BucketsTable({ buckets, locale, t }: { buckets: StorageBucket[]; locale: Locale; t: TFn }) {
-  return (
-    <section className="panel" style={{ marginTop: 16 }} aria-labelledby="storage-buckets-title">
-      <h3 id="storage-buckets-title" className="panel-title">{t("storage.section.buckets")}</h3>
-      <div className="tbl-wrap">
-        <table className="tbl">
-          <thead>
-            <tr>
-              <th>{t("storage.col.bucket")}</th>
-              <th className="num">{t("storage.col.size")}</th>
-              <th className="num">{t("storage.col.files")}</th>
-              <th>{t("storage.col.oldest")}</th>
-              <th>{t("storage.col.newest")}</th>
-              <th className="num">{t("storage.col.rows")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {buckets.map(bucket => (
-              <tr key={bucket.key}>
-                <td>{bucketLabel(bucket, t)}</td>
-                <td className="num mono">{formatBytes(bucket.bytes, locale)}</td>
-                <td className="num">{bucket.fileCount}</td>
-                <td className="muted">{formatDate(bucket.oldest, locale)}</td>
-                <td className="muted">{formatDate(bucket.newest, locale)}</td>
-                <td className="num mono">
-                  {bucket.rows === undefined ? "—" : bucket.rows === null ? t("storage.rows.unknown") : bucket.rows.toLocaleString(locale)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-}
-
-function LargestFilesPanel({ buckets, locale, t }: { buckets: StorageBucket[]; locale: Locale; t: TFn }) {
-  const withLargest = buckets.filter(bucket => (bucket.largest?.length ?? 0) > 0);
-  if (withLargest.length === 0) return null;
-  return (
-    <section className="panel" style={{ marginTop: 16 }} aria-labelledby="storage-largest-title">
-      <h3 id="storage-largest-title" className="panel-title">{t("storage.section.largest")}</h3>
-      {withLargest.map(bucket => (
-        <details key={bucket.key} style={{ marginTop: 8 }}>
-          <summary>{bucketLabel(bucket, t)}</summary>
-          <div className="tbl-wrap" style={{ marginTop: 8 }}>
-            <table className="tbl">
-              <tbody>
-                {bucket.largest!.map(entry => (
-                  <tr key={entry.path}>
-                    <td className="mono">{entry.path}</td>
-                    <td className="num mono">{formatBytes(entry.bytes, locale)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </details>
-      ))}
-    </section>
-  );
-}
-
 function ArchivedCleanupPanel({
   apiBase,
   locale,
@@ -339,7 +246,9 @@ function ArchivedCleanupPanel({
 
       <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", marginTop: 12 }}>
         <label style={{ display: "flex", alignItems: "center", gap: 8, flex: "1 1 220px" }}>
-          <span className="muted">{t("storage.cleanup.percent", { percent: String(percent) })}</span>
+          <span className="muted mono" style={{ minWidth: "3.5rem", fontVariantNumeric: "tabular-nums" }}>
+            {t("storage.cleanup.percent", { percent: String(percent) })}
+          </span>
           <input
             type="range"
             min={1}
@@ -839,10 +748,13 @@ function AutoCleanupPolicyPanel({
         setError(t("storage.policy.invalid"));
         return;
       }
+      // Run now is a manual action: if auto-cleanup is still off, turn it on so the
+      // job is not immediately skipped as "disabled".
+      const saveBody = base.enabled ? base : { ...base, enabled: true };
       const saveRes = await fetch(`${apiBase}/api/storage/cleanup-policy`, {
         method: "PUT",
         headers: { "content-type": "application/json" },
-        body: JSON.stringify(base),
+        body: JSON.stringify(saveBody),
         signal,
       });
       if (signal.aborted) return;
@@ -1000,38 +912,51 @@ function AutoCleanupPolicyPanel({
       <h3 id="storage-policy-title" className="panel-title">{t("storage.policy.title")}</h3>
       <p className="muted" style={{ marginTop: 4 }}>{t("storage.policy.help")}</p>
 
-      <label className="row" style={{ marginTop: 12, gap: 8, alignItems: "center" }}>
-        <input
-          type="checkbox"
-          checked={policy.enabled}
+      <label className="row" style={{ marginTop: 12, gap: 10, alignItems: "center" }}>
+        <button
+          type="button"
+          className={`toggle${policy.enabled ? " on" : ""}`}
           disabled={saving || running}
-          onChange={e => {
-            const enabled = e.target.checked;
-            void savePolicy({ enabled });
-          }}
-        />
+          aria-pressed={policy.enabled}
+          aria-label={t("storage.policy.enabled")}
+          onClick={() => void savePolicy({ enabled: !policy.enabled })}
+        >
+          <span className="toggle-knob" />
+        </button>
         <span>{t("storage.policy.enabled")}</span>
       </label>
       <p className="muted" style={{ marginTop: 4, fontSize: "var(--text-sm)" }}>{t("storage.policy.enabledHint")}</p>
 
-      <div style={{ display: "grid", gap: 12, marginTop: 16, maxWidth: 420 }}>
-        <label>
-          <span className="muted">{t("storage.policy.threshold")}</span>
-          <input
-            type="number"
-            min={0}
-            step={0.1}
-            value={thresholdGb}
-            disabled={saving || running}
-            onChange={e => setThresholdGb(e.target.value)}
-            onBlur={() => void savePolicy()}
-            style={{ display: "block", marginTop: 4, width: "100%" }}
-          />
+      <div className="storage-policy-fields">
+        <label className="field" htmlFor="storage-policy-threshold">
+          <span className="field-label">{t("storage.policy.threshold")}</span>
+          <span className="codex-auto-switch-input-wrap">
+            <input
+              id="storage-policy-threshold"
+              className="input mono codex-auto-switch-input"
+              type="number"
+              min={0}
+              step={0.1}
+              inputMode="decimal"
+              value={thresholdGb}
+              disabled={saving || running}
+              aria-label={t("storage.policy.threshold")}
+              onChange={e => setThresholdGb(e.target.value)}
+              onBlur={() => void savePolicy()}
+            />
+            <NumberStepper
+              disabled={saving || running}
+              incrementLabel={t("storage.policy.thresholdInc")}
+              decrementLabel={t("storage.policy.thresholdDec")}
+              onIncrement={() => setThresholdGb(clampDraft(thresholdGb, 0.1, 0, 10_000, 0.1))}
+              onDecrement={() => setThresholdGb(clampDraft(thresholdGb, -0.1, 0, 10_000, 0.1))}
+            />
+          </span>
         </label>
 
-        <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
-          <legend className="muted">{t("storage.policy.target")}</legend>
-          <label className="row" style={{ gap: 8, alignItems: "center", marginTop: 4 }}>
+        <fieldset className="field">
+          <legend className="field-label">{t("storage.policy.target")}</legend>
+          <label className="row" style={{ gap: 8, alignItems: "center" }}>
             <input
               type="radio"
               name="storage-policy-target"
@@ -1042,17 +967,30 @@ function AutoCleanupPolicyPanel({
             <span>{t("storage.policy.targetPercent")}</span>
           </label>
           {targetMode === "percent" && (
-            <input
-              type="number"
-              min={1}
-              max={100}
-              value={percent}
-              disabled={saving || running}
-              aria-label={t("storage.policy.targetPercent")}
-              onChange={e => setPercent(e.target.value)}
-              onBlur={() => void savePolicy()}
-              style={{ display: "block", marginTop: 4, width: "100%" }}
-            />
+            <span className="codex-auto-switch-input-wrap">
+              <input
+                id="storage-policy-percent"
+                className="input mono codex-auto-switch-input"
+                type="number"
+                min={1}
+                max={100}
+                step={1}
+                inputMode="numeric"
+                value={percent}
+                disabled={saving || running}
+                aria-label={t("storage.policy.targetPercent")}
+                onChange={e => setPercent(e.target.value)}
+                onBlur={() => void savePolicy()}
+              />
+              <span className="codex-auto-switch-unit" aria-hidden="true">%</span>
+              <NumberStepper
+                disabled={saving || running}
+                incrementLabel={t("storage.policy.percentInc")}
+                decrementLabel={t("storage.policy.percentDec")}
+                onIncrement={() => setPercent(clampDraft(percent, 1, 1, 100))}
+                onDecrement={() => setPercent(clampDraft(percent, -1, 1, 100))}
+              />
+            </span>
           )}
           <label className="row" style={{ gap: 8, alignItems: "center", marginTop: 8 }}>
             <input
@@ -1065,30 +1003,42 @@ function AutoCleanupPolicyPanel({
             <span>{t("storage.policy.targetReduce")}</span>
           </label>
           {targetMode === "reduce" && (
-            <input
-              type="number"
-              min={0}
-              step={0.1}
-              value={reduceGb}
-              disabled={saving || running}
-              aria-label={t("storage.policy.targetReduce")}
-              onChange={e => setReduceGb(e.target.value)}
-              onBlur={() => void savePolicy()}
-              style={{ display: "block", marginTop: 4, width: "100%" }}
-            />
+            <span className="codex-auto-switch-input-wrap">
+              <input
+                id="storage-policy-reduce"
+                className="input mono codex-auto-switch-input"
+                type="number"
+                min={0}
+                step={0.1}
+                inputMode="decimal"
+                value={reduceGb}
+                disabled={saving || running}
+                aria-label={t("storage.policy.targetReduce")}
+                onChange={e => setReduceGb(e.target.value)}
+                onBlur={() => void savePolicy()}
+              />
+              <NumberStepper
+                disabled={saving || running}
+                incrementLabel={t("storage.policy.reduceInc")}
+                decrementLabel={t("storage.policy.reduceDec")}
+                onIncrement={() => setReduceGb(clampDraft(reduceGb, 0.1, 0, 10_000, 0.1))}
+                onDecrement={() => setReduceGb(clampDraft(reduceGb, -0.1, 0, 10_000, 0.1))}
+              />
+            </span>
           )}
         </fieldset>
 
-        <label>
-          <span className="muted">{t("storage.policy.schedule")}</span>
+        <label className="field" htmlFor="storage-policy-schedule">
+          <span className="field-label">{t("storage.policy.schedule")}</span>
           <select
+            id="storage-policy-schedule"
+            className="input"
             value={policy.schedule}
             disabled={saving || running}
             onChange={e => {
               const schedule = e.target.value as CleanupPolicy["schedule"];
               void savePolicy({ schedule });
             }}
-            style={{ display: "block", marginTop: 4, width: "100%" }}
           >
             <option value="manual">{t("storage.policy.schedule.manual")}</option>
             <option value="startup">{t("storage.policy.schedule.startup")}</option>
@@ -1097,16 +1047,17 @@ function AutoCleanupPolicyPanel({
           </select>
         </label>
 
-        <label>
-          <span className="muted">{t("storage.policy.mode")}</span>
+        <label className="field" htmlFor="storage-policy-mode">
+          <span className="field-label">{t("storage.policy.mode")}</span>
           <select
+            id="storage-policy-mode"
+            className="input"
             value={policy.mode}
             disabled={saving || running}
             onChange={e => {
               const mode = e.target.value as CleanupPolicy["mode"];
               void savePolicy({ mode });
             }}
-            style={{ display: "block", marginTop: 4, width: "100%" }}
           >
             <option value="quarantine">{t("storage.policy.mode.quarantine")}</option>
             <option value="permanent">{t("storage.policy.mode.permanent")}</option>
@@ -1136,16 +1087,21 @@ function AutoCleanupPolicyPanel({
         </div>
       </div>
 
-      <div className="row" style={{ marginTop: 16, gap: 8, flexWrap: "wrap" }}>
+      <div className="storage-policy-actions">
         <button type="button" className="btn btn-ghost btn-sm" disabled={saving || running} onClick={() => void savePolicy()}>
           {t("storage.policy.save")}
         </button>
-        <button type="button" className="btn btn-sm" disabled={saving || running || !policy.enabled} onClick={() => void runNow()}>
+        <button type="button" className="btn btn-sm" disabled={saving || running} onClick={() => void runNow()}>
           {running ? t("storage.policy.running") : t("storage.policy.runNow")}
         </button>
+        <span
+          className={`storage-policy-actions__status${error ? " is-error" : ""}`}
+          role={error ? "alert" : "status"}
+          aria-live="polite"
+        >
+          {error ?? status ?? ""}
+        </span>
       </div>
-      {status && <p className="muted" style={{ marginTop: 8 }} role="status">{status}</p>}
-      {error && <p className="err" style={{ marginTop: 8 }} role="alert">{error}</p>}
     </section>
   );
 }
@@ -1154,6 +1110,7 @@ export default function Storage({ apiBase }: { apiBase: string }) {
   const { t, locale } = useI18n();
   const [data, setData] = useState<StorageReport | null>(null);
   const [loading, setLoading] = useState(true);
+  const [scanStatus, setScanStatus] = useState<string | null>(null);
   const [trashReloadToken, setTrashReloadToken] = useState(0);
   // Stamp trash awareness with apiBase so a base change invalidates without an effect.
   const [trashInfo, setTrashInfo] = useState({ apiBase, settled: false, hasEntries: false });
@@ -1168,9 +1125,11 @@ export default function Storage({ apiBase }: { apiBase: string }) {
       const json = await res.json() as StorageReport;
       if (signal?.aborted || generation !== loadGenerationRef.current) return;
       setData(json);
+      return json;
     } catch {
       if (signal?.aborted || generation !== loadGenerationRef.current) return;
       setData(null);
+      return null;
     } finally {
       if (generation === loadGenerationRef.current) setLoading(false);
     }
@@ -1188,10 +1147,14 @@ export default function Storage({ apiBase }: { apiBase: string }) {
     };
   }, [fetchStorage]);
 
-  const refreshAll = useCallback(() => {
-    void fetchStorage();
+  const refreshAll = useCallback(async () => {
+    setScanStatus(null);
+    const report = await fetchStorage();
     setTrashReloadToken(n => n + 1);
-  }, [fetchStorage]);
+    if (report && report.error === undefined) {
+      setScanStatus(t("storage.rescanned"));
+    }
+  }, [fetchStorage, t]);
 
   const onTrashEntriesChange = useCallback((entries: TrashEntry[]) => {
     setTrashInfo({ apiBase, settled: true, hasEntries: entries.length > 0 });
@@ -1211,9 +1174,14 @@ export default function Storage({ apiBase }: { apiBase: string }) {
     <>
       <div className="page-head">
         <h2 id="storage-page-title">{t("storage.title")}</h2>
-        <button type="button" className="btn btn-ghost btn-sm" disabled={loading} onClick={() => refreshAll()}>
-          <IconRefresh /> {t("storage.refresh")}
-        </button>
+        <div className="storage-page-head-actions">
+          <span className="storage-page-head-feedback" role="status" aria-live="polite">
+            {scanStatus ?? ""}
+          </span>
+          <button type="button" className="btn btn-ghost btn-sm" disabled={loading} onClick={() => void refreshAll()}>
+            <IconRefresh /> {t("storage.refresh")}
+          </button>
+        </div>
       </div>
       <p className="page-sub">{t("storage.subtitle")}</p>
 
@@ -1224,50 +1192,46 @@ export default function Storage({ apiBase }: { apiBase: string }) {
       ) : empty ? (
         <>
           <EmptyState title={t("storage.empty")} />
-          <AutoCleanupPolicyPanel
-            apiBase={apiBase}
-            locale={locale}
-            t={t}
-            onDone={() => refreshAll()}
-          />
-        </>
-      ) : (
-        <>
-          {data && data.total.fileCount > 0 && (
-            <>
-              <div className="usage-cards">
-                <div className="stat"><div className="muted">{t("storage.card.total")}</div><div className="stat-value">{formatBytes(data.total.bytes, locale)}</div></div>
-                <div className="stat"><div className="muted">{t("storage.card.files")}</div><div className="stat-value">{data.total.fileCount.toLocaleString(locale)}</div></div>
-                <div className="stat"><div className="muted">{t("storage.card.home")}</div><div className="stat-value mono" style={{ fontSize: "var(--text-body)", wordBreak: "break-all" }}>{data.codexHome}</div></div>
-              </div>
-              <BucketsTable buckets={data.buckets} locale={locale} t={t} />
-              <LargestFilesPanel buckets={data.buckets} locale={locale} t={t} />
-            </>
-          )}
-          <AutoCleanupPolicyPanel
-            apiBase={apiBase}
-            locale={locale}
-            t={t}
-            onDone={() => refreshAll()}
-          />
-          {archivedCount > 0 && (
-            <ArchivedCleanupPanel
+          <div className="storage-below-workspace">
+            <AutoCleanupPolicyPanel
               apiBase={apiBase}
               locale={locale}
               t={t}
-              onDone={() => refreshAll()}
+              onDone={() => void refreshAll()}
             />
+          </div>
+        </>
+      ) : (
+        <>
+          {data && data.total.fileCount > 0 && (
+            <StorageWorkspace report={data} locale={locale} />
           )}
-          {showTrashWhileSettling && (
-            <QuarantineTrashPanel
+          <div className="storage-below-workspace">
+            <AutoCleanupPolicyPanel
               apiBase={apiBase}
               locale={locale}
               t={t}
-              reloadToken={trashReloadToken}
-              onEntriesChange={onTrashEntriesChange}
-              onDone={() => refreshAll()}
+              onDone={() => void refreshAll()}
             />
-          )}
+            {archivedCount > 0 && (
+              <ArchivedCleanupPanel
+                apiBase={apiBase}
+                locale={locale}
+                t={t}
+                onDone={() => void refreshAll()}
+              />
+            )}
+            {showTrashWhileSettling && (
+              <QuarantineTrashPanel
+                apiBase={apiBase}
+                locale={locale}
+                t={t}
+                reloadToken={trashReloadToken}
+                onEntriesChange={onTrashEntriesChange}
+                onDone={() => void refreshAll()}
+              />
+            )}
+          </div>
         </>
       )}
     </>
diff --git a/gui/src/styles-storage-workspace.css b/gui/src/styles-storage-workspace.css
new file mode 100644
index 000000000..9ff3ed97e
--- /dev/null
+++ b/gui/src/styles-storage-workspace.css
@@ -0,0 +1,351 @@
+/* ============================================================================
+   storage-workspace — rail + overview/detail (providers-workspace DNA, flattened)
+   Namespace: storage-workspace-  |  widgets: stw-
+   Uses only design tokens from styles.css.
+   ============================================================================ */
+
+.main-inner:has(.storage-workspace-root) {
+  max-width: 1200px;
+}
+
+.storage-workspace-root {
+  display: grid;
+  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 100%;
+  align-items: start;
+}
+
+/* ── Rail ─────────────────────────────────────────────── */
+
+.storage-workspace-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  border-right: 1px solid var(--border);
+  padding-right: var(--space-3);
+  min-width: 0;
+}
+
+.storage-workspace-rail-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.storage-workspace-rail-title {
+  font-size: var(--text-body);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+}
+
+.storage-workspace-rail-count {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.storage-workspace-rail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+}
+
+.storage-workspace-rail-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  width: 100%;
+  min-height: 40px;
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-2);
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  overflow: hidden;
+  transition: background var(--motion-fast), box-shadow var(--motion-fast);
+}
+
+.storage-workspace-rail-row:hover {
+  background: var(--surface);
+}
+
+.storage-workspace-rail-row--selected {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.storage-workspace-rail-row:focus-visible {
+  outline: 2px solid var(--accent-ring);
+  outline-offset: -2px;
+}
+
+.storage-workspace-rail-primary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.storage-workspace-rail-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-body);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-ui);
+}
+
+.storage-workspace-rail-size {
+  flex-shrink: 0;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.storage-workspace-rail-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-caption);
+  line-height: var(--leading-ui);
+  color: var(--muted);
+}
+
+.storage-workspace-rail-empty {
+  font-size: 12px;
+  padding: 8px 4px;
+  color: var(--muted);
+}
+
+/* ── Main ─────────────────────────────────────────────── */
+
+.storage-workspace-main {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+.storage-workspace-main .usage-cards {
+  margin-bottom: 16px;
+}
+
+.stw-section {
+  margin-bottom: 16px;
+}
+
+.stw-section-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  margin: 0 0 8px 0;
+}
+
+.stw-hint {
+  color: var(--muted);
+  font-size: 13px;
+  padding: 4px 0 12px;
+}
+
+/* Largest-files rows — flat list, no card-in-card */
+.stw-file-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-soft, var(--border));
+}
+
+.stw-file-row:last-child {
+  border-bottom: none;
+}
+
+.stw-file-path {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+}
+
+.stw-file-size {
+  flex-shrink: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.stw-file-bucket {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--faint);
+}
+
+/* Bucket detail */
+.stw-detail {
+  display: flex;
+  flex-direction: column;
+  max-width: 760px;
+}
+
+.stw-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: 0.82rem;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 8px;
+}
+
+.stw-detail-back:hover {
+  text-decoration: underline;
+}
+
+.stw-detail-back-chevron {
+  width: 12px;
+  height: 12px;
+  transform: rotate(180deg);
+}
+
+.stw-detail-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.stw-kv {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 16px 0;
+}
+
+.stw-kv-row {
+  display: flex;
+  gap: 12px;
+  padding: 4px 0;
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.stw-kv-row dt {
+  flex-shrink: 0;
+  width: 110px;
+  color: var(--muted);
+  font-weight: 400;
+}
+
+.stw-kv-row dd {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.stw-kv-row dd code,
+.stw-kv-mono {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Policy form fields (Codex Auth field + stepper DNA) */
+.storage-policy-fields {
+  display: grid;
+  gap: 12px;
+  margin-top: 12px;
+  max-width: 420px;
+}
+
+.storage-policy-fields .field {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+}
+
+.storage-policy-fields fieldset.field {
+  border: none;
+  padding: 0;
+}
+
+.storage-policy-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+  min-height: 32px;
+}
+
+.storage-policy-actions__status {
+  min-width: 7rem;
+  font-size: var(--text-label);
+  color: var(--muted);
+  line-height: var(--leading-body);
+}
+
+.storage-policy-actions__status.is-error {
+  color: var(--red);
+}
+
+.storage-page-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.storage-page-head-feedback {
+  min-width: 7rem;
+  max-width: 16rem;
+  text-align: right;
+  font-size: var(--text-label);
+  color: var(--muted);
+  line-height: var(--leading-body);
+}
+
+.storage-below-workspace {
+  margin-top: 16px;
+}
+
+/* ── Responsive ───────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .storage-workspace-root {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .storage-workspace-rail {
+    border-right: none;
+    padding-right: 0;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: var(--space-3);
+  }
+  .storage-workspace-rail-list {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+}
diff --git a/gui/src/styles.css b/gui/src/styles.css
index 29a04a56d..512a8644b 100644
--- a/gui/src/styles.css
+++ b/gui/src/styles.css
@@ -16,6 +16,7 @@
 @import "./styles-combos-workspace.css";
 @import "./styles-models-workspace.css";
 @import "./styles-dashboard-workspace.css";
+@import "./styles-storage-workspace.css";
 
 :root {
   /* default: follow the OS; [data-theme] below pins color-scheme so light-dark() obeys it */
@@ -843,9 +844,38 @@ dialog.modal-overlay::backdrop {
 .codex-auto-switch-input-wrap { display: flex; align-items: center; gap: 6px; }
 .codex-auto-switch-input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
 .codex-auto-switch-input[readonly] { cursor: progress; opacity: 0.7; }
+/* Hide native number spinners — we use .ocx-stepper chevrons instead. */
+.codex-auto-switch-input::-webkit-outer-spin-button,
+.codex-auto-switch-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.codex-auto-switch-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
 .codex-auto-switch-unit { color: var(--muted); font-size: var(--text-control); }
 .codex-auto-switch-feedback { flex: 1 0 100%; margin-top: -8px; color: var(--muted); font-size: var(--text-label); line-height: var(--leading-body); text-align: right; }
 .codex-auto-switch-feedback.is-error { color: var(--red); }
+
+.ocx-stepper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+.ocx-stepper__btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 16px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-2xs);
+  background: var(--raised);
+  color: var(--muted);
+  cursor: pointer;
+}
+.ocx-stepper__btn:hover:not(:disabled) { color: var(--text); border-color: var(--faint); }
+.ocx-stepper__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.ocx-stepper__btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
+.ocx-stepper__btn svg { display: block; }
 .notice-warn { font-size: var(--text-label); line-height: var(--leading-body); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
 .notice-warn svg { width: 14px; height: 14px; flex-shrink: 0; }