From 5cdaff31e03cdb5c1248f1ad22f9ed567d9a65a4 Mon Sep 17 00:00:00 2001
From: root <root@v2202607378382480008.hotsrv.de>
Date: Mon, 13 Jul 2026 11:20:13 +0200
Subject: [PATCH] feat(web): establish admin operations workspace

---
 .../components/access/AccessMatrixPanel.vue   | 323 ++++++------------
 .../src/components/console/AuditTimeline.vue  |  10 +
 .../src/components/console/ConsoleIcon.vue    |  31 ++
 .../src/components/console/EntityIndex.vue    |  20 ++
 .../src/components/console/FactPath.vue       |  13 +
 .../src/components/console/InspectorPanel.vue |  16 +
 .../console/OperationsWorkspace.vue           |  15 +
 .../src/components/console/ViewModeSwitch.vue |  15 +
 .../src/components/layout/AppNavigation.vue   |  15 +-
 .../layout/SplitWorkspaceLayout.vue           |   2 +-
 .../src/components/mdtodo/MdtodoPageShell.vue |   9 +
 .../src/composables/useConsoleViewState.ts    |  24 +-
 .../src/styles/console-foundation.css         |  81 +++++
 .../src/views/admin/BillingView.vue           | 321 +++--------------
 .../src/views/admin/SecretsView.vue           | 282 +++++----------
 .../src/views/admin/UsersView.vue             |   3 +-
 16 files changed, 463 insertions(+), 717 deletions(-)
 create mode 100644 web/hwlab-cloud-web/src/components/console/AuditTimeline.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/ConsoleIcon.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/EntityIndex.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/FactPath.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/InspectorPanel.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/OperationsWorkspace.vue
 create mode 100644 web/hwlab-cloud-web/src/components/console/ViewModeSwitch.vue

diff --git a/web/hwlab-cloud-web/src/components/access/AccessMatrixPanel.vue b/web/hwlab-cloud-web/src/components/access/AccessMatrixPanel.vue
index d7bedd28..2503ba04 100644
--- a/web/hwlab-cloud-web/src/components/access/AccessMatrixPanel.vue
+++ b/web/hwlab-cloud-web/src/components/access/AccessMatrixPanel.vue
@@ -1,15 +1,15 @@
-<!-- SPEC: PJ2026-010405 云端控制台. -->
-<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
 <script setup lang="ts">
 import { computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
-import DataGrid from "@/components/common/DataGrid.vue";
-import type { DataGridColumn } from "@/components/common/DataGrid.vue";
 import EmptyState from "@/components/common/EmptyState.vue";
-import ResourceCollection from "@/components/common/ResourceCollection.vue";
-import BoundedWorkspace from "@/components/layout/BoundedWorkspace.vue";
-import TablePageLayout from "@/components/layout/TablePageLayout.vue";
+import EntityIndex from "@/components/console/EntityIndex.vue";
+import FactPath from "@/components/console/FactPath.vue";
+import InspectorPanel from "@/components/console/InspectorPanel.vue";
+import OperationsWorkspace from "@/components/console/OperationsWorkspace.vue";
+import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
+import StatusStrip from "@/components/layout/StatusStrip.vue";
 import { useConsoleViewState } from "@/composables/useConsoleViewState";
 import { useAccessStore } from "@/stores/access";
 import { accessUserLabel, type AccessUserRow } from "@/stores/admin-access-view";
@@ -18,34 +18,27 @@ import type { AccessUserRole, AccessUserStatus } from "@/types";
 const access = useAccessStore();
 const route = useRoute();
 const router = useRouter();
-const viewState = useConsoleViewState();
-const columns: DataGridColumn[] = [
-  { key: "user", label: "用户" },
-  { key: "role", label: "角色" },
-  { key: "status", label: "状态" },
-  { key: "tools", label: "工具" },
-  { key: "tuples", label: "Tuples", align: "right" },
-  { key: "actions", label: "操作", align: "right" }
-];
-
+const viewState = useConsoleViewState<"matrix" | "list">({ view: "matrix", viewValues: ["matrix", "list"] });
 const openfga = computed(() => access.summaryView.openfga);
-const query = computed({
-  get: () => viewState.q.value,
-  set: (value: string) => void viewState.update({ q: value.trim() })
-});
-const viewMode = computed<"cards" | "list">({
-  get: () => viewState.view.value,
-  set: (value) => void viewState.update({ view: value === "cards" ? undefined : value })
-});
+const query = computed({ get: () => viewState.q.value, set: (value: string) => void viewState.update({ q: value.trim() }) });
+const viewMode = computed({ get: () => viewState.view.value, set: (value: "matrix" | "list") => void viewState.update({ view: value === "matrix" ? undefined : value }, false) });
 const filteredRows = computed(() => {
-  const needle = query.value.trim().toLowerCase();
+  const needle = query.value.toLowerCase();
   return access.userRows.filter((row) => !needle || [row.id, row.username, row.displayName, row.role, row.status, ...Object.keys(row.tools)].filter(Boolean).join(" ").toLowerCase().includes(needle));
 });
-const asyncState = computed(() => {
-  if (access.loading) return access.userRows.length ? "refreshing" : "initial-loading";
-  if (access.error) return access.userRows.length ? "partial" : "error";
-  return access.users ? "ready" : "empty";
-});
+const asyncState = computed(() => access.loading ? (access.userRows.length ? "refreshing" : "initial-loading") : access.error ? (access.userRows.length ? "partial" : "error") : access.users ? "ready" : "empty");
+const statusItems = computed(() => [
+  { id: "users", label: "Users", value: access.summaryView.users },
+  { id: "tuples", label: "Tuples", value: access.summaryView.tuples },
+  { id: "grants", label: "Tool grants", value: access.summaryView.toolTuples },
+  { id: "openfga", label: "OpenFGA", value: valueText(openfga.value.status || (openfga.value.ready ? "ready" : "not ready")), tone: openfga.value.ready ? "ok" as const : "warn" as const }
+]);
+const factSteps = computed(() => [
+  { id: "identity", label: "Identity", value: access.selectedUser ? accessUserLabel(access.selectedUser) : "选择用户" },
+  { id: "role", label: "Role", value: access.selectedUser?.role || "-" },
+  { id: "tools", label: "Tool grants", value: access.selectedUser ? `${access.selectedUser.toolCount}/${Object.keys(access.selectedUser.tools).length}` : "-" },
+  { id: "tuples", label: "OpenFGA tuples", value: String(access.detailView.tuples.length), tone: openfga.value.ready ? "ok" as const : "warn" as const }
+]);
 
 onMounted(async () => {
   await access.refresh();
@@ -61,210 +54,92 @@ function selectRow(row: AccessUserRow): void {
   if (route.params.userId !== row.id) void router.push({ name: "AccessUserDetail", params: { userId: row.id }, query: route.query });
   void access.selectUser(row.id);
 }
-
-function onRoleChange(event: Event): void {
-  const role = (event.target as HTMLSelectElement | null)?.value as AccessUserRole | undefined;
-  if (role) void access.updateSelectedUser({ role });
-}
-
-function onStatusChange(event: Event): void {
-  const status = (event.target as HTMLSelectElement | null)?.value as AccessUserStatus | undefined;
-  if (status) void access.updateSelectedUser({ status });
-}
-
-function onToolChange(toolId: string, event: Event): void {
-  const checked = (event.target as HTMLInputElement | null)?.checked === true;
-  void access.setTool(toolId, checked);
-}
-
-function rowKey(row: AccessUserRow): string {
-  return row.id;
-}
-
-function valueText(value: unknown): string {
-  if (typeof value === "boolean") return value ? "yes" : "no";
-  if (typeof value === "number") return String(value);
-  if (typeof value === "string" && value.trim()) return value;
-  return "-";
-}
-
+function closeInspector(): void { void router.push({ name: "Access", query: route.query }); }
+function onRoleChange(event: Event): void { const role = (event.target as HTMLSelectElement).value as AccessUserRole; void access.updateSelectedUser({ role }); }
+function onStatusChange(event: Event): void { const status = (event.target as HTMLSelectElement).value as AccessUserStatus; void access.updateSelectedUser({ status }); }
+function onToolChange(toolId: string, event: Event): void { void access.setTool(toolId, (event.target as HTMLInputElement).checked); }
+function valueText(value: unknown): string { return typeof value === "string" && value.trim() ? value : typeof value === "number" ? String(value) : typeof value === "boolean" ? (value ? "yes" : "no") : "-"; }
 </script>
 
 <template>
-  <section class="route-stack access-admin-page">
-    <AsyncBoundary :state="asyncState" :has-content="Boolean(access.userRows.length)" label="加载 Access matrix" empty-title="暂无 Access 用户" empty-description="同源 Access API 当前未返回用户。" @retry="access.refresh">
-      <template #error><EmptyState title="Access 加载失败" :description="access.error || '请求未完成'" action-label="重试" @action="access.refresh" /></template>
-      <div class="overview-grid access-summary-grid">
-        <article class="metric-card">
-          <span>Users</span>
-          <strong>{{ access.summaryView.users }}</strong>
-        </article>
-        <article class="metric-card">
-          <span>Tuples</span>
-          <strong>{{ access.summaryView.tuples }}</strong>
-        </article>
-        <article class="metric-card">
-          <span>Tool grants</span>
-          <strong>{{ access.summaryView.toolTuples }}</strong>
-        </article>
+  <AsyncBoundary :state="asyncState" :has-content="Boolean(access.userRows.length)" label="加载授权工作区" empty-title="暂无授权用户" empty-description="同源 Access API 当前未返回用户。" @retry="access.refresh">
+    <template #error><EmptyState title="授权工作区加载失败" :description="access.error || '请求未完成'" action-label="重试" @action="access.refresh" /></template>
+    <StatusStrip :items="statusItems" live="polite" />
+    <OperationsWorkspace class="access-operations" label="授权运营工作区" :inspector-open="Boolean(access.selectedUser)">
+      <template #index>
+        <EntityIndex :items="filteredRows" :item-key="(row) => row.id" :selected-id="access.selectedUserId" label="授权用户索引" empty-text="没有匹配用户。" @select="selectRow">
+          <template #toolbar>
+            <label class="operations-search"><span>用户索引</span><input v-model="query" type="search" placeholder="用户、角色、状态或 tool" /></label>
+            <button class="table-action" type="button" :disabled="access.loading" @click="access.refresh">{{ access.loading ? "刷新中" : "刷新" }}</button>
+          </template>
+          <template #item="{ item }">
+            <strong>{{ accessUserLabel(item) }}</strong>
+            <small>{{ item.username || item.id }}</small>
+            <span class="entity-index-meta"><span class="status-pill" :data-status="item.status">{{ item.role }} / {{ item.status }}</span><code>{{ item.toolCount }} tools · {{ item.tupleCount }} tuples</code></span>
+          </template>
+        </EntityIndex>
+      </template>
+
+      <div class="operations-main-stack">
+        <FactPath :steps="factSteps" label="授权事实路径" />
+        <SectionFrame :title="viewMode === 'matrix' ? '权限矩阵' : '授权清单'" description="同一授权 read model 的矩阵比较与紧凑清单。" :body-padding="false">
+          <template #actions><ViewModeSwitch v-model="viewMode" :options="[{ value: 'matrix', label: '矩阵', icon: 'access' }, { value: 'list', label: '清单', icon: 'mdtodo' }]" /></template>
+          <div v-if="viewMode === 'matrix'" class="permission-matrix" role="grid" aria-label="用户权限矩阵">
+            <div class="permission-matrix-head" role="row"><span role="columnheader">用户</span><span v-for="tool in access.toolRows" :key="tool.id" role="columnheader">{{ tool.label }}</span></div>
+            <button v-for="row in filteredRows" :key="row.id" type="button" role="row" :data-selected="row.id === access.selectedUserId" @click="selectRow(row)">
+              <span role="gridcell"><strong>{{ accessUserLabel(row) }}</strong><small>{{ row.role }} · {{ row.status }}</small></span>
+              <span v-for="tool in access.toolRows" :key="tool.id" role="gridcell" :data-allowed="row.tools[tool.id] ? 'true' : 'false'">{{ row.tools[tool.id] ? "允许" : "—" }}</span>
+            </button>
+          </div>
+          <div v-else class="access-compact-list" role="list"><button v-for="row in filteredRows" :key="row.id" type="button" role="listitem" :data-selected="row.id === access.selectedUserId" @click="selectRow(row)"><span><strong>{{ accessUserLabel(row) }}</strong><small>{{ row.username || row.id }}</small></span><span class="status-pill" :data-status="row.status">{{ row.role }} / {{ row.status }}</span><code>{{ row.toolCount }} tools</code><code>{{ row.tupleCount }} tuples</code></button></div>
+        </SectionFrame>
+        <details class="technical-disclosure">
+          <summary>OpenFGA 技术详情</summary>
+          <dl class="field-grid"><div><dt>mode</dt><dd>{{ valueText(openfga.mode) }}</dd></div><div><dt>store</dt><dd>{{ valueText(openfga.storeName || openfga.storeId) }}</dd></div><div><dt>model</dt><dd>{{ valueText(openfga.modelId) }}</dd></div><div><dt>values</dt><dd>{{ openfga.valuesRedacted === false ? "visible" : "redacted" }}</dd></div></dl>
+        </details>
       </div>
 
-      <section id="access-openfga-panel" class="data-panel admin-crud-panel openfga-panel">
-        <header class="panel-header">
-          <h2>OpenFGA</h2>
-          <span class="status-pill" :data-status="valueText(openfga.status || (openfga.ready ? 'active' : 'disabled'))">{{ valueText(openfga.status || (openfga.ready ? 'ready' : 'not ready')) }}</span>
-        </header>
-        <dl class="field-grid">
-          <div><dt>mode</dt><dd>{{ valueText(openfga.mode) }}</dd></div>
-          <div><dt>store</dt><dd>{{ valueText(openfga.storeName || openfga.storeId) }}</dd></div>
-          <div><dt>model</dt><dd>{{ valueText(openfga.modelId) }}</dd></div>
-          <div><dt>values</dt><dd>{{ openfga.valuesRedacted === false ? "visible" : "redacted" }}</dd></div>
-        </dl>
-      </section>
-
-      <BoundedWorkspace class="access-workspace" :inspector-open="Boolean(access.selectedUser)" inspector-width="390px" label="Access 用户集合与详情">
-      <TablePageLayout title="Access users" subtitle="Cloud API 同源 admin access matrix">
-        <template #actions>
-          <button id="access-refresh" class="table-action" type="button" :disabled="access.loading" @click="access.refresh">刷新</button>
-        </template>
-        <template #filters><div class="access-collection-controls"><label><span>搜索</span><input v-model="query" type="search" placeholder="用户、角色、状态或 tool" /></label><span class="access-view-toggle"><button type="button" :data-active="viewMode === 'cards'" @click="viewMode = 'cards'">卡片</button><button type="button" :data-active="viewMode === 'list'" @click="viewMode = 'list'">列表</button></span></div></template>
-        <DataGrid v-if="viewMode === 'list'" :columns="columns" :rows="filteredRows" :row-key="rowKey" :selected-id="access.selectedUserId" empty-text="暂无用户记录。" @select="selectRow">
-          <template #cell-user="{ row }">
-            <button class="link-button" type="button" :data-selected="row.id === access.selectedUserId" @click="selectRow(row as AccessUserRow)">
-              <strong>{{ accessUserLabel(row as AccessUserRow) }}</strong>
-              <small>{{ (row as AccessUserRow).username || (row as AccessUserRow).id }}</small>
-            </button>
-          </template>
-          <template #cell-role="{ row }">
-            <span class="status-pill" :data-status="(row as AccessUserRow).role">{{ (row as AccessUserRow).role }}</span>
-          </template>
-          <template #cell-status="{ row }">
-            <span class="status-pill" :data-status="(row as AccessUserRow).status">{{ (row as AccessUserRow).status }}</span>
-          </template>
-          <template #cell-tools="{ row }">
-            {{ (row as AccessUserRow).toolCount }} / {{ Object.keys((row as AccessUserRow).tools).length }}
-          </template>
-          <template #cell-tuples="{ row }">
-            {{ (row as AccessUserRow).tupleCount }}
-          </template>
-          <template #cell-actions="{ row }">
-            <button class="table-action" type="button" @click="selectRow(row as AccessUserRow)">详情</button>
-          </template>
-        </DataGrid>
-        <ResourceCollection v-else-if="filteredRows.length" :items="filteredRows" :item-key="rowKey" view="cards" :selected-id="access.selectedUserId" :show-controls="false" aria-label="Access 用户卡片" @select="selectRow">
-          <template #card="{ item: row }"><button class="access-user-card" :data-selected="row.id === access.selectedUserId" type="button" @click="selectRow(row)">
-            <span class="access-user-glyph" aria-hidden="true">{{ row.role === 'admin' ? 'AD' : 'AC' }}</span>
-            <div><strong>{{ accessUserLabel(row) }}</strong><small>{{ row.username || row.id }}</small></div>
-            <span class="status-pill" :data-status="row.status">{{ row.role }} / {{ row.status }}</span>
-            <dl><div><dt>Tools</dt><dd>{{ row.toolCount }} / {{ Object.keys(row.tools).length }}</dd></div><div><dt>Tuples</dt><dd>{{ row.tupleCount }}</dd></div></dl>
-            <span aria-hidden="true">→</span>
-          </button></template>
-        </ResourceCollection>
-        <EmptyState v-else title="没有匹配用户" description="调整搜索；ACL 数据仍由同源 Access API 返回。" />
-      </TablePageLayout>
-
       <template #inspector>
-      <section v-if="access.selectedUser" id="access-user-detail" class="access-detail-panel">
-        <header class="panel-header">
-          <div>
-            <h2>Selected user</h2>
-            <small>{{ access.selectedUser ? access.selectedUser.id : "未选择" }}</small>
-          </div>
-          <span v-if="access.detailLoading" class="status-pill">loading</span>
-        </header>
-        <p v-if="access.mutationError" class="form-error">{{ access.mutationError }}</p>
-        <EmptyState v-if="!access.selectedUser" title="请选择用户" description="从 Access users 表格选择一个用户以编辑 role/status 和 tool matrix。" />
-        <template v-else>
-          <div class="access-user-head">
-            <strong>{{ accessUserLabel(access.selectedUser) }}</strong>
-            <small>{{ access.selectedUser.username || access.selectedUser.id }}</small>
-          </div>
+        <InspectorPanel v-if="access.selectedUser" :title="accessUserLabel(access.selectedUser)" :subtitle="access.selectedUser.id" @close="closeInspector">
+          <p v-if="access.mutationError" class="form-error">{{ access.mutationError }}</p>
           <div class="form-grid compact-form-grid">
-            <label>
-              <span>Role</span>
-              <select id="access-role-select" :value="access.selectedUser.role" :disabled="access.savingKey !== null" @change="onRoleChange">
-                <option value="admin">admin</option>
-                <option value="member">member</option>
-                <option value="viewer">viewer</option>
-              </select>
-            </label>
-            <label>
-              <span>Status</span>
-              <select id="access-status-select" :value="access.selectedUser.status" :disabled="access.savingKey !== null" @change="onStatusChange">
-                <option value="active">active</option>
-                <option value="disabled">disabled</option>
-                <option value="pending">pending</option>
-              </select>
-            </label>
+            <label><span>Role</span><select :value="access.selectedUser.role" :disabled="access.savingKey !== null" @change="onRoleChange"><option value="admin">admin</option><option value="member">member</option><option value="viewer">viewer</option></select></label>
+            <label><span>Status</span><select :value="access.selectedUser.status" :disabled="access.savingKey !== null" @change="onStatusChange"><option value="active">active</option><option value="disabled">disabled</option><option value="pending">pending</option></select></label>
           </div>
-          <div class="tool-toggle-grid">
-            <label v-for="tool in access.toolRows" :key="tool.id" class="tool-toggle-row" data-access-tool-toggle>
-              <span>
-                <strong>{{ tool.label }}</strong>
-                <small>{{ tool.id }}</small>
-              </span>
-              <input type="checkbox" :checked="tool.allowed" :disabled="access.savingKey !== null" @change="onToolChange(tool.id, $event)">
-            </label>
-          </div>
-          <div class="tuple-list">
-            <h3>Tuples</h3>
-            <p v-if="!access.detailView.tuples.length" class="muted-box">暂无 tuple。</p>
-            <ul v-else>
-              <li v-for="tuple in access.detailView.tuples" :key="String(tuple.object || tuple.relation || tuple.userId)">
-                <code>{{ valueText(tuple.userId) }}</code>
-                <span>{{ valueText(tuple.relation) }}</span>
-                <code>{{ valueText(tuple.object) }}</code>
-              </li>
-            </ul>
-          </div>
-        </template>
-      </section>
+          <section><h3>Tool grants</h3><div class="tool-toggle-grid"><label v-for="tool in access.toolRows" :key="tool.id" class="tool-toggle-row"><span><strong>{{ tool.label }}</strong><small>{{ tool.id }}</small></span><input type="checkbox" :checked="tool.allowed" :disabled="access.savingKey !== null" @change="onToolChange(tool.id, $event)"></label></div></section>
+          <section class="tuple-list"><h3>Tuples</h3><p v-if="!access.detailView.tuples.length" class="muted-box">暂无 tuple。</p><ul v-else><li v-for="tuple in access.detailView.tuples" :key="String(tuple.object || tuple.relation || tuple.userId)"><code>{{ valueText(tuple.userId) }}</code><span>{{ valueText(tuple.relation) }}</span><code>{{ valueText(tuple.object) }}</code></li></ul></section>
+        </InspectorPanel>
       </template>
-      </BoundedWorkspace>
-    </AsyncBoundary>
-  </section>
+    </OperationsWorkspace>
+  </AsyncBoundary>
 </template>
 
 <style scoped>
-.access-admin-page { min-width: 0; }
-.access-workspace { min-height: 500px; }
-.access-collection-controls { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 10px; align-items: end; }
-.access-collection-controls label { display: grid; gap: 4px; color: #60717a; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
-.access-collection-controls input { width: 100%; height: 34px; border: 1px solid #b8c5cc; border-radius: 6px; background: #fff; padding: 0 9px; color: #1c3038; }
-.access-view-toggle { display: inline-flex; padding: 2px; border: 1px solid #b8c5cc; border-radius: 7px; background: #eef3f4; }
-.access-view-toggle button { height: 28px; border: 0; border-radius: 5px; background: transparent; padding: 0 11px; color: #64757d; font-size: 10px; font-weight: 800; }
-.access-view-toggle button[data-active="true"] { background: #183b43; color: #fff; box-shadow: 0 1px 2px rgb(12 36 42 / 20%); }
-.access-user-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 9px; padding: 10px; }
-.access-user-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; border: 1px solid #c7d3d8; border-radius: 8px; background: #fff; padding: 11px; color: #1c3038; text-align: left; box-shadow: inset 3px 0 #90a6ad; }
-.access-user-card:hover,
-.access-user-card[data-selected="true"] { border-color: #1ba39e; box-shadow: inset 3px 0 #1ba39e, 0 4px 12px rgb(19 60 68 / 8%); }
-.access-user-card > div { display: grid; min-width: 0; }
-.access-user-card strong,
-.access-user-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.access-user-card small { color: #6b7c84; font: 700 10px/1.4 ui-monospace, monospace; }
-.access-user-card dl { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 0; }
-.access-user-card dl div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #e0e7e9; padding-top: 7px; }
-.access-user-card dt { color: #708087; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
-.access-user-card dd { margin: 0; font: 800 10px/1 ui-monospace, monospace; }
-.access-user-glyph { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; background: #dcefed; color: #126f6a; font: 900 11px/1 ui-monospace, monospace; }
-.access-summary-grid { gap: 9px; }
-.access-summary-grid .metric-card { border-color: #cbd6dc; background: linear-gradient(145deg, #fff, #f4f7f8); box-shadow: inset 3px 0 #1ba39e; }
-.openfga-panel,
-.access-detail-panel { min-width: 0; box-shadow: inset 3px 0 #1ba39e; }
-.access-detail-panel { display: grid; gap: 12px; }
-@media (max-width: 720px) {
-  .access-collection-controls { grid-template-columns: 1fr; }
-  .access-view-toggle { justify-self: stretch; }
-  .access-view-toggle button { flex: 1; }
-  .access-user-card-grid { grid-template-columns: 1fr; }
-}
-.access-user-head { border-color: #bbd8d5; background: #eff8f7; }
-.tool-toggle-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
-.tool-toggle-row { border-color: #d5dfe3; background: #f8fafb; }
+.access-operations { min-height: 610px; }
+.operations-search { display: grid; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
+.operations-search input { min-width: 0; height: 34px; border: 1px solid #b8c5cc; border-radius: 5px; padding: 0 9px; background: white; }
+.entity-index-row small { color: #64757d; }
+.entity-index-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
+.entity-index-meta code { color: #64757d; font-size: 10px; }
+.operations-main-stack { display: grid; gap: 14px; min-width: 0; }
+.permission-matrix { overflow: auto; }
+.permission-matrix-head, .permission-matrix > button { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(6, minmax(86px, 1fr)); min-width: 760px; }
+.permission-matrix-head { position: sticky; top: 0; z-index: 1; background: #eef3f4; }
+.permission-matrix-head span, .permission-matrix > button > span { padding: 9px; border-right: 1px solid #d8e1e4; border-bottom: 1px solid #d8e1e4; text-align: center; }
+.permission-matrix-head span:first-child, .permission-matrix > button > span:first-child { text-align: left; }
+.permission-matrix > button { width: 100%; border: 0; background: white; color: inherit; cursor: pointer; }
+.permission-matrix > button:hover, .permission-matrix > button[data-selected="true"] { background: #e8f6f5; }
+.permission-matrix strong, .permission-matrix small { display: block; }
+.permission-matrix small { color: #64757d; }
+.permission-matrix [data-allowed="true"] { color: #08756f; font-weight: 800; }
+.access-compact-list { display: grid; }
+.access-compact-list button { display: grid; grid-template-columns: minmax(180px, 1fr) 120px 90px 90px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid #d8e1e4; padding: 9px 11px; background: white; color: inherit; text-align: left; cursor: pointer; }
+.access-compact-list button:hover, .access-compact-list button[data-selected="true"] { background: #e8f6f5; }
+.access-compact-list strong, .access-compact-list small { display: block; }
+.technical-disclosure { border: 1px solid #d8e1e4; background: #f8fafb; }
+.technical-disclosure summary { cursor: pointer; padding: 11px 13px; font-weight: 800; }
+.technical-disclosure .field-grid { padding: 0 13px 13px; }
+.tool-toggle-grid { display: grid; gap: 7px; }
 .tuple-list { min-width: 0; overflow: auto; }
-.tuple-list li { min-width: 560px; }
-@media (max-width: 700px) {
-  .access-summary-grid { grid-template-columns: 1fr 1fr; }
-  .field-grid { grid-template-columns: 1fr 1fr; }
-}
+.tuple-list li { min-width: 520px; }
 </style>
diff --git a/web/hwlab-cloud-web/src/components/console/AuditTimeline.vue b/web/hwlab-cloud-web/src/components/console/AuditTimeline.vue
new file mode 100644
index 00000000..9e39f379
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/AuditTimeline.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts" generic="T extends object">
+withDefaults(defineProps<{ items: T[]; itemKey: (item: T) => string; label?: string; emptyText?: string }>(), { label: "审计时间线", emptyText: "暂无审计记录。" });
+</script>
+
+<template>
+  <ol v-if="items.length" class="audit-timeline" :aria-label="label">
+    <li v-for="item in items" :key="itemKey(item)"><slot name="item" :item="item" /></li>
+  </ol>
+  <p v-else class="muted-box">{{ emptyText }}</p>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/ConsoleIcon.vue b/web/hwlab-cloud-web/src/components/console/ConsoleIcon.vue
new file mode 100644
index 00000000..18aec46d
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/ConsoleIcon.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ name: string; size?: number }>(), { size: 18 });
+
+const paths: Record<string, string[]> = {
+  workbench: ["M4 5h16v11H4z", "M8 20h8", "M12 16v4"],
+  debug: ["M9 4h6", "M12 2v4", "M7 9h10v8a5 5 0 0 1-10 0z", "M4 13h3", "M17 13h3"],
+  code: ["m9 7-5 5 5 5", "m15 7 5 5-5 5", "m14 4-4 16"],
+  overview: ["M4 4h7v7H4z", "M13 4h7v4h-7z", "M13 10h7v10h-7z", "M4 13h7v7H4z"],
+  project: ["M3 7h7l2 2h9v10H3z", "M3 7V5h7l2 2"],
+  mdtodo: ["M5 4h14v16H5z", "M8 8h8", "M8 12h8", "M8 16h5"],
+  key: ["M14 7a5 5 0 1 0-4.5 7.2L4 19.7V22h2.3l1-1H10v-2.7l1-1h2.7l1.1-1.1", "M17 7h.01"],
+  usage: ["M4 19V9", "M10 19V5", "M16 19v-7", "M22 19H2"],
+  billing: ["M4 6h16v12H4z", "M4 10h16", "M8 15h4"],
+  access: ["M12 3 4 7v5c0 5 3.4 8.2 8 9 4.6-.8 8-4 8-9V7z", "M9 12l2 2 4-4"],
+  secrets: ["M7 10V7a5 5 0 0 1 10 0v3", "M5 10h14v11H5z", "M12 14v3"],
+  users: ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"],
+  hwpod: ["M4 6h16v12H4z", "M8 10h8", "M8 14h4", "M2 9h2", "M20 9h2", "M2 15h2", "M20 15h2"],
+  provider: ["M12 2v6", "M12 16v6", "M4.93 4.93l4.24 4.24", "m14.83 5.66 4.24-4.24", "M2 12h6", "M16 12h6", "M4.93 19.07l4.24-4.24", "m14.83-5.66 4.24 4.24", "M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"],
+  gate: ["M4 4h16v16H4z", "M9 12l2 2 4-4"],
+  performance: ["M4 18a8 8 0 1 1 16 0", "m12 14 4-4", "M12 6v2", "M6.3 8.3l1.4 1.4", "M17.7 8.3l-1.4 1.4"],
+  skills: ["M12 2 4 6v10l8 4 8-4V8z", "M4 8l8 4 8-4", "M12 12v10"],
+  settings: ["M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7", "M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.12 3.67-.08-.02a1.7 1.7 0 0 0-1.8.32l-.14.08a1.7 1.7 0 0 0-.82 1.72V23H9v-.29A1.7 1.7 0 0 0 8.18 21l-.14-.08a1.7 1.7 0 0 0-1.8-.32l-.08.02-2.12-3.67.06-.06A1.7 1.7 0 0 0 4.6 15v-.16a1.7 1.7 0 0 0-.5-1.2l-.06-.06L6.16 9.9l.08.02a1.7 1.7 0 0 0 1.8-.32l.14-.08A1.7 1.7 0 0 0 9 7.8V7.5h6v.29a1.7 1.7 0 0 0 .82 1.72l.14.08a1.7 1.7 0 0 0 1.8.32l.08-.02 2.12 3.67-.06.06a1.7 1.7 0 0 0-.5 1.2z"],
+  help: ["M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4", "M12 18h.01", "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20"]
+};
+</script>
+
+<template>
+  <svg :width="props.size" :height="props.size" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path v-for="path in paths[props.name] || paths.overview" :key="path" :d="path" />
+  </svg>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/EntityIndex.vue b/web/hwlab-cloud-web/src/components/console/EntityIndex.vue
new file mode 100644
index 00000000..9522e4a9
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/EntityIndex.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts" generic="T extends object">
+withDefaults(defineProps<{ items: T[]; itemKey: (item: T) => string; selectedId?: string | null; label: string; emptyText?: string }>(), {
+  selectedId: null,
+  emptyText: "暂无对象。"
+});
+const emit = defineEmits<{ select: [item: T] }>();
+</script>
+
+<template>
+  <section class="entity-index" :aria-label="label">
+    <header class="entity-index-toolbar"><slot name="toolbar" /></header>
+    <div v-if="items.length" class="entity-index-list" role="listbox" :aria-label="label">
+      <button v-for="item in items" :key="itemKey(item)" class="entity-index-row" type="button" role="option" :aria-selected="itemKey(item) === selectedId" :data-selected="itemKey(item) === selectedId ? 'true' : 'false'" @click="emit('select', item)">
+        <slot name="item" :item="item" :selected="itemKey(item) === selectedId" />
+      </button>
+    </div>
+    <p v-else class="muted-box">{{ emptyText }}</p>
+    <footer v-if="$slots.footer" class="entity-index-footer"><slot name="footer" /></footer>
+  </section>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/FactPath.vue b/web/hwlab-cloud-web/src/components/console/FactPath.vue
new file mode 100644
index 00000000..c9fc8e20
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/FactPath.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+export interface FactPathStep { id: string; label: string; value: string; tone?: "neutral" | "ok" | "warn" | "error"; }
+defineProps<{ steps: FactPathStep[]; label?: string }>();
+</script>
+
+<template>
+  <ol class="fact-path" :aria-label="label || '事实路径'">
+    <li v-for="(step, index) in steps" :key="step.id" :data-tone="step.tone || 'neutral'">
+      <span class="fact-path-index">{{ index + 1 }}</span>
+      <span><small>{{ step.label }}</small><strong>{{ step.value }}</strong></span>
+    </li>
+  </ol>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/InspectorPanel.vue b/web/hwlab-cloud-web/src/components/console/InspectorPanel.vue
new file mode 100644
index 00000000..95113ae4
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/InspectorPanel.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{ title: string; subtitle?: string }>();
+defineEmits<{ close: [] }>();
+</script>
+
+<template>
+  <section class="operations-inspector-panel">
+    <header class="operations-inspector-header">
+      <div><h2>{{ title }}</h2><p v-if="subtitle">{{ subtitle }}</p></div>
+      <button class="icon-button" type="button" aria-label="关闭详情" @click="$emit('close')">×</button>
+    </header>
+    <nav v-if="$slots.tabs" class="operations-inspector-tabs" aria-label="详情视图"><slot name="tabs" /></nav>
+    <div class="operations-inspector-body"><slot /></div>
+    <footer v-if="$slots.footer" class="operations-inspector-footer"><slot name="footer" /></footer>
+  </section>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/OperationsWorkspace.vue b/web/hwlab-cloud-web/src/components/console/OperationsWorkspace.vue
new file mode 100644
index 00000000..731feaf6
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/OperationsWorkspace.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ label: string; inspectorOpen?: boolean; indexWidth?: string; inspectorWidth?: string }>(), {
+  inspectorOpen: false,
+  indexWidth: "minmax(250px, 28%)",
+  inspectorWidth: "minmax(320px, 34%)"
+});
+</script>
+
+<template>
+  <section class="operations-workspace" :style="{ '--operations-index-width': indexWidth, '--operations-inspector-width': inspectorWidth }" :data-inspector-open="inspectorOpen ? 'true' : 'false'" :aria-label="label">
+    <aside class="operations-index"><slot name="index" /></aside>
+    <main class="operations-main"><slot /></main>
+    <aside v-if="inspectorOpen" class="operations-inspector"><slot name="inspector" /></aside>
+  </section>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/console/ViewModeSwitch.vue b/web/hwlab-cloud-web/src/components/console/ViewModeSwitch.vue
new file mode 100644
index 00000000..9d052b2b
--- /dev/null
+++ b/web/hwlab-cloud-web/src/components/console/ViewModeSwitch.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ConsoleIcon from "./ConsoleIcon.vue";
+
+export interface ViewModeOption { value: string; label: string; icon: string; }
+defineProps<{ modelValue: string; options: ViewModeOption[]; label?: string }>();
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+</script>
+
+<template>
+  <div class="view-mode-switch" role="group" :aria-label="label || '显示方式'">
+    <button v-for="option in options" :key="option.value" type="button" :aria-label="option.label" :aria-pressed="modelValue === option.value" :title="option.label" @click="emit('update:modelValue', option.value)">
+      <ConsoleIcon :name="option.icon" :size="16" /><span>{{ option.label }}</span>
+    </button>
+  </div>
+</template>
diff --git a/web/hwlab-cloud-web/src/components/layout/AppNavigation.vue b/web/hwlab-cloud-web/src/components/layout/AppNavigation.vue
index b777b091..9ecc07c8 100644
--- a/web/hwlab-cloud-web/src/components/layout/AppNavigation.vue
+++ b/web/hwlab-cloud-web/src/components/layout/AppNavigation.vue
@@ -4,6 +4,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import ConsoleIcon from "@/components/console/ConsoleIcon.vue";
 import { useAppStore } from "@/stores/app";
 import { useAuthStore } from "@/stores/auth";
 
@@ -18,7 +19,7 @@ interface NavItem {
   name: string;
   label: string;
   path: string;
-  glyph: string;
+  icon: string;
   navId: string;
 }
 
@@ -28,11 +29,11 @@ interface NavSection {
 }
 
 const navSections = [
-  { title: "工作入口", items: [{ name: "CodeWorkbench", label: "Code 工作台", path: "/workbench", glyph: "CW", navId: "workbench.code" }, { name: "WorkbenchDebug", label: "调试", path: "/workbench/debug", glyph: "DB", navId: "workbench.debug" }, { name: "OpenCode", label: "OpenCode", path: "/opencode", glyph: "OC", navId: "opencode.root" }, { name: "Dashboard", label: "平台概览", path: "/dashboard", glyph: "OV", navId: "user.dashboard" }] },
-  { title: "项目", items: [{ name: "Projects", label: "项目", path: "/projects", glyph: "PJ", navId: "project.overview" }, { name: "ProjectMdtodo", label: "MDTODO", path: "/projects/mdtodo", glyph: "MD", navId: "project.mdtodo" }] },
-  { title: "用户与运营", items: [{ name: "ApiKeys", label: "API Keys", path: "/api-keys", glyph: "AK", navId: "user.apiKeys" }, { name: "Usage", label: "用量", path: "/usage", glyph: "US", navId: "user.usage" }, { name: "Billing", label: "充值与订阅", path: "/billing", glyph: "BL", navId: "user.billing" }] },
-  { title: "管理", items: [{ name: "Access", label: "授权", path: "/admin/access", glyph: "AC", navId: "admin.access" }, { name: "AdminSecrets", label: "密钥", path: "/admin/secrets", glyph: "SK", navId: "admin.secrets" }, { name: "Users", label: "用户", path: "/admin/users", glyph: "UR", navId: "admin.users" }, { name: "AdminBilling", label: "账务", path: "/admin/billing", glyph: "AB", navId: "admin.billing" }, { name: "HwpodGroups", label: "HWPOD", path: "/admin/hwpod-groups", glyph: "HP", navId: "admin.hwpodGroups" }, { name: "ProviderProfiles", label: "Provider Profiles", path: "/admin/provider-profiles", glyph: "PP", navId: "admin.providerProfiles" }] },
-  { title: "系统", items: [{ name: "Gate", label: "内部复核", path: "/gate", glyph: "GT", navId: "system.gate" }, { name: "Performance", label: "性能", path: "/performance", glyph: "PF", navId: "system.performance" }, { name: "Skills", label: "Skills", path: "/skills", glyph: "SS", navId: "system.skills" }, { name: "Settings", label: "设置", path: "/settings", glyph: "ST", navId: "system.settings" }, { name: "Help", label: "帮助", path: "/help", glyph: "?", navId: "system.help" }] }
+  { title: "工作入口", items: [{ name: "CodeWorkbench", label: "Code 工作台", path: "/workbench", icon: "workbench", navId: "workbench.code" }, { name: "WorkbenchDebug", label: "调试", path: "/workbench/debug", icon: "debug", navId: "workbench.debug" }, { name: "OpenCode", label: "OpenCode", path: "/opencode", icon: "code", navId: "opencode.root" }, { name: "Dashboard", label: "平台概览", path: "/dashboard", icon: "overview", navId: "user.dashboard" }] },
+  { title: "项目", items: [{ name: "Projects", label: "项目", path: "/projects", icon: "project", navId: "project.overview" }, { name: "ProjectMdtodo", label: "MDTODO", path: "/projects/mdtodo", icon: "mdtodo", navId: "project.mdtodo" }] },
+  { title: "用户与运营", items: [{ name: "ApiKeys", label: "API Keys", path: "/api-keys", icon: "key", navId: "user.apiKeys" }, { name: "Usage", label: "用量", path: "/usage", icon: "usage", navId: "user.usage" }, { name: "Billing", label: "充值与订阅", path: "/billing", icon: "billing", navId: "user.billing" }] },
+  { title: "管理", items: [{ name: "Access", label: "授权", path: "/admin/access", icon: "access", navId: "admin.access" }, { name: "AdminSecrets", label: "密钥", path: "/admin/secrets", icon: "secrets", navId: "admin.secrets" }, { name: "Users", label: "用户", path: "/admin/users", icon: "users", navId: "admin.users" }, { name: "AdminBilling", label: "账务", path: "/admin/billing", icon: "billing", navId: "admin.billing" }, { name: "HwpodGroups", label: "HWPOD", path: "/admin/hwpod-groups", icon: "hwpod", navId: "admin.hwpodGroups" }, { name: "ProviderProfiles", label: "Provider Profiles", path: "/admin/provider-profiles", icon: "provider", navId: "admin.providerProfiles" }] },
+  { title: "系统", items: [{ name: "Gate", label: "内部复核", path: "/gate", icon: "gate", navId: "system.gate" }, { name: "Performance", label: "性能", path: "/performance", icon: "performance", navId: "system.performance" }, { name: "Skills", label: "Skills", path: "/skills", icon: "skills", navId: "system.skills" }, { name: "Settings", label: "设置", path: "/settings", icon: "settings", navId: "system.settings" }, { name: "Help", label: "帮助", path: "/help", icon: "help", navId: "system.help" }] }
 ] satisfies NavSection[];
 
 const visibleSections = computed(() => navSections
@@ -77,7 +78,7 @@ function isActive(item: NavItem): boolean {
         :aria-current="isActive(item) ? 'page' : undefined"
         @click="go(item)"
       >
-        <span class="nav-icon" aria-hidden="true">{{ item.glyph }}</span>
+        <span class="nav-icon" aria-hidden="true"><ConsoleIcon :name="item.icon" /></span>
         <span class="nav-label">{{ item.label }}</span>
       </button>
     </section>
diff --git a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
index a5d49f0c..13bbbe3c 100644
--- a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
+++ b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
@@ -116,7 +116,7 @@ function clamp(value: number, min: number, max: number): number {
 <template>
   <section
     ref="layoutRef"
-    class="split-workspace-layout"
+    class="split-workspace-layout operations-workspace"
     :style="layoutStyle"
     :aria-label="ariaLabel"
     :data-left-collapsed="leftCollapsed"
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
index a91cb0e1..98447f4f 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
@@ -11,6 +11,7 @@ import type { ApiError, ErrorDiagnostic, ProviderProfileCatalogResponse } from "
 import EmptyState from "@/components/common/EmptyState.vue";
 import LoadingState from "@/components/common/LoadingState.vue";
 import SplitWorkspaceLayout from "@/components/layout/SplitWorkspaceLayout.vue";
+import StatusStrip from "@/components/layout/StatusStrip.vue";
 import MdtodoToolbar from "@/components/mdtodo/MdtodoToolbar.vue";
 import MdtodoTaskTree from "@/components/mdtodo/MdtodoTaskTree.vue";
 import MdtodoTaskPanel from "@/components/mdtodo/MdtodoTaskPanel.vue";
@@ -100,6 +101,12 @@ const selectedSource = computed(() => source.sources.value.find((s) => s.sourceI
 const selectedFile = computed(() => taskData.files.value.find((f) => f.fileRef === selectedFileRef.value) ?? null);
 const selectedTask = computed(() => taskData.tasks.value.find((t) => t.taskRef === selectedTaskRef.value) ?? null);
 const selectedTaskProjection = computed(() => selectedTask.value?.task ?? null);
+const workspaceStatus = computed(() => [
+  { id: "source", label: "Source", value: selectedSource.value?.displayName || selectedSourceId.value || "-" },
+  { id: "file", label: "File", value: selectedFileName.value },
+  { id: "task", label: "Task", value: selectedTaskRef.value || "-", tone: selectedTask.value ? "ok" as const : "neutral" as const },
+  { id: "report", label: "Report", value: reportPaneOpen.value ? "open" : "closed", tone: reportPaneOpen.value ? "info" as const : "neutral" as const }
+]);
 const fileScopedTasks = computed(() => selectedFileRef.value ? taskData.tasks.value.filter((t) => t.fileRef === selectedFileRef.value) : taskData.tasks.value);
 const taskDetailPartial = computed(() => taskData.taskDetailAuthority.value?.state === "unavailable");
 const taskMutationDisabled = computed(() => Boolean(selectedTask.value && (taskData.taskDetailLoading.value || !taskData.taskDetail.value || taskDetailPartial.value)));
@@ -634,6 +641,8 @@ function setError(err: unknown): void {
         @open-create-task="openTaskCreateDialog"
       />
 
+      <StatusStrip :items="workspaceStatus" label="MDTODO 工作区状态" />
+
       <div v-if="source.sourceMessage.value || source.sourceError.value" class="mdtodo-notices">
         <div v-if="source.sourceMessage.value" class="source-message" data-testid="mdtodo-source-message">
         <span>{{ source.sourceMessage.value }}</span>
diff --git a/web/hwlab-cloud-web/src/composables/useConsoleViewState.ts b/web/hwlab-cloud-web/src/composables/useConsoleViewState.ts
index e8e6ef9f..ebf52cda 100644
--- a/web/hwlab-cloud-web/src/composables/useConsoleViewState.ts
+++ b/web/hwlab-cloud-web/src/composables/useConsoleViewState.ts
@@ -7,8 +7,9 @@ import { useRoute, useRouter, type LocationQueryRaw } from "vue-router";
 export type ConsoleCollectionView = "cards" | "list";
 export type ConsoleCollectionDensity = "compact" | "comfortable";
 
-export interface ConsoleViewStateDefaults {
-  view?: ConsoleCollectionView;
+export interface ConsoleViewStateDefaults<TView extends string = ConsoleCollectionView> {
+  view?: TView;
+  viewValues?: readonly TView[];
   density?: ConsoleCollectionDensity;
   q?: string;
   filter?: string;
@@ -17,22 +18,29 @@ export interface ConsoleViewStateDefaults {
   tab?: string;
 }
 
-export interface ConsoleViewState {
-  view: ComputedRef<ConsoleCollectionView>;
+export type ConsoleViewStatePatch<TView extends string = ConsoleCollectionView> = Omit<ConsoleViewStateDefaults<TView>, "viewValues">;
+
+export interface ConsoleViewState<TView extends string = ConsoleCollectionView> {
+  view: ComputedRef<TView>;
   density: ComputedRef<ConsoleCollectionDensity>;
   q: ComputedRef<string>;
   filter: ComputedRef<string>;
   sort: ComputedRef<string>;
   cursor: ComputedRef<string>;
   tab: ComputedRef<string>;
-  update: (patch: Partial<ConsoleViewStateDefaults>, replace?: boolean) => Promise<void>;
+  update: (patch: Partial<ConsoleViewStatePatch<TView>>, replace?: boolean) => Promise<void>;
 }
 
-export function useConsoleViewState(defaults: ConsoleViewStateDefaults = {}): ConsoleViewState {
+export function useConsoleViewState(): ConsoleViewState<ConsoleCollectionView>;
+export function useConsoleViewState(defaults: ConsoleViewStateDefaults<ConsoleCollectionView>): ConsoleViewState<ConsoleCollectionView>;
+export function useConsoleViewState<TView extends string>(defaults: ConsoleViewStateDefaults<TView> & { view: TView; viewValues: readonly TView[] }): ConsoleViewState<TView>;
+export function useConsoleViewState<TView extends string = ConsoleCollectionView>(defaults: ConsoleViewStateDefaults<TView> = {}): ConsoleViewState<TView> {
   const route = useRoute();
   const router = useRouter();
+  const viewValues = defaults.viewValues ?? (["cards", "list"] as unknown as readonly TView[]);
+  const defaultView = defaults.view ?? viewValues[0] ?? ("cards" as TView);
 
-  const view = computed(() => queryEnum(route.query.view, ["cards", "list"] as const, defaults.view ?? "cards"));
+  const view = computed<TView>(() => queryEnum(route.query.view, viewValues, defaultView));
   const density = computed(() => queryEnum(route.query.density, ["compact", "comfortable"] as const, defaults.density ?? "comfortable"));
   const q = computed(() => queryText(route.query.q) || defaults.q || "");
   const filter = computed(() => queryText(route.query.filter) || defaults.filter || "");
@@ -40,7 +48,7 @@ export function useConsoleViewState(defaults: ConsoleViewStateDefaults = {}): Co
   const cursor = computed(() => queryText(route.query.cursor) || defaults.cursor || "");
   const tab = computed(() => queryText(route.query.tab) || defaults.tab || "");
 
-  async function update(patch: Partial<ConsoleViewStateDefaults>, replace = true): Promise<void> {
+  async function update(patch: Partial<ConsoleViewStatePatch<TView>>, replace = true): Promise<void> {
     const query: LocationQueryRaw = { ...route.query };
     for (const [key, value] of Object.entries(patch)) {
       if (value === undefined || value === null || value === "") delete query[key];
diff --git a/web/hwlab-cloud-web/src/styles/console-foundation.css b/web/hwlab-cloud-web/src/styles/console-foundation.css
index 1184f728..d42df3cb 100644
--- a/web/hwlab-cloud-web/src/styles/console-foundation.css
+++ b/web/hwlab-cloud-web/src/styles/console-foundation.css
@@ -954,6 +954,87 @@ textarea {
   letter-spacing: 0.035em;
 }
 
+.operations-workspace {
+  display: grid;
+  grid-template-columns: var(--operations-index-width) minmax(0, 1fr);
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--console-graphite-200);
+  background: white;
+}
+
+.operations-workspace[data-inspector-open="true"] {
+  grid-template-columns: var(--operations-index-width) minmax(0, 1fr) var(--operations-inspector-width);
+}
+
+.operations-index,
+.operations-main,
+.operations-inspector {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.operations-index { border-right: 1px solid var(--console-graphite-200); background: var(--console-graphite-50); }
+.operations-inspector { border-left: 1px solid var(--console-graphite-200); background: white; }
+.operations-main { padding: var(--console-space-4); }
+
+.entity-index { display: flex; flex-direction: column; min-height: 100%; }
+.entity-index-toolbar { position: sticky; top: 0; z-index: 2; display: grid; gap: var(--console-space-2); padding: var(--console-space-3); border-bottom: 1px solid var(--console-graphite-200); background: color-mix(in srgb, var(--console-graphite-50) 94%, transparent); }
+.entity-index-list { display: grid; align-content: start; }
+.entity-index-row { width: 100%; display: grid; gap: 3px; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--console-graphite-200); background: transparent; color: inherit; text-align: left; cursor: pointer; }
+.entity-index-row:hover { background: white; }
+.entity-index-row[data-selected="true"] { background: var(--console-cyan-100); box-shadow: inset 3px 0 var(--console-cyan-700); }
+.entity-index-row:focus-visible { outline: 2px solid var(--console-cyan-700); outline-offset: -2px; }
+.entity-index-footer { margin-top: auto; padding: var(--console-space-3); border-top: 1px solid var(--console-graphite-200); }
+
+.fact-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--console-graphite-200); }
+.fact-path li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 10px; background: white; }
+.fact-path li:not(:last-child)::after { content: ""; position: absolute; right: -5px; z-index: 1; width: 9px; height: 9px; border-top: 1px solid var(--console-graphite-300); border-right: 1px solid var(--console-graphite-300); background: white; transform: rotate(45deg); }
+.fact-path-index { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--console-graphite-300); border-radius: 50%; font: 600 11px/1 var(--console-font-mono); }
+.fact-path small, .fact-path strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fact-path small { color: var(--console-graphite-600); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
+.fact-path strong { margin-top: 2px; font-size: 12px; }
+.fact-path li[data-tone="ok"] .fact-path-index { color: var(--console-green-700); border-color: var(--console-green-700); }
+.fact-path li[data-tone="warn"] .fact-path-index { color: var(--console-amber-700); border-color: var(--console-amber-500); }
+.fact-path li[data-tone="error"] .fact-path-index { color: var(--console-red-700); border-color: var(--console-red-700); }
+
+.operations-inspector-panel { display: flex; flex-direction: column; min-height: 100%; }
+.operations-inspector-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--console-graphite-200); background: white; }
+.operations-inspector-header h2, .operations-inspector-header p { margin: 0; }
+.operations-inspector-header h2 { font-size: 15px; }
+.operations-inspector-header p { margin-top: 3px; color: var(--console-graphite-600); font-size: 11px; }
+.operations-inspector-tabs { display: flex; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--console-graphite-200); overflow-x: auto; }
+.operations-inspector-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 7px 9px; background: transparent; color: var(--console-graphite-600); cursor: pointer; white-space: nowrap; }
+.operations-inspector-tabs button[aria-selected="true"] { border-color: var(--console-cyan-700); color: var(--console-graphite-950); }
+.operations-inspector-body { display: grid; align-content: start; gap: var(--console-space-4); padding: 14px; }
+.operations-inspector-footer { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--console-graphite-200); background: white; }
+
+.audit-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+.audit-timeline li { position: relative; padding: 0 0 16px 22px; border-left: 1px solid var(--console-graphite-300); }
+.audit-timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--console-cyan-700); box-shadow: 0 0 0 1px var(--console-cyan-700); }
+.view-mode-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--console-graphite-300); border-radius: 6px; background: var(--console-graphite-50); }
+.view-mode-switch button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; border: 0; border-radius: 4px; padding: 0 9px; background: transparent; color: var(--console-graphite-600); cursor: pointer; }
+.view-mode-switch button[aria-pressed="true"] { background: var(--console-graphite-950); color: white; }
+.view-mode-switch button:focus-visible { outline: 2px solid var(--console-cyan-700); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .view-mode-switch button { transition: none; } }
+
+@media (max-width: 1100px) {
+  .operations-workspace,
+  .operations-workspace[data-inspector-open="true"] { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
+  .operations-inspector { position: absolute; inset: 0 0 0 auto; z-index: 10; width: min(430px, 76vw); box-shadow: -12px 0 28px rgb(15 23 42 / .18); }
+}
+
+@media (max-width: 640px) {
+  .operations-workspace,
+  .operations-workspace[data-inspector-open="true"] { display: block; overflow: auto; }
+  .operations-index, .operations-main { min-height: 45vh; overflow: visible; }
+  .operations-inspector { position: fixed; inset: 56px 0 0; width: auto; }
+  .fact-path { grid-template-columns: 1fr; }
+  .fact-path li::after { display: none; }
+}
+
 .auth-main,
 .login-shell {
   background:
diff --git a/web/hwlab-cloud-web/src/views/admin/BillingView.vue b/web/hwlab-cloud-web/src/views/admin/BillingView.vue
index c712edc1..a58cb0c3 100644
--- a/web/hwlab-cloud-web/src/views/admin/BillingView.vue
+++ b/web/hwlab-cloud-web/src/views/admin/BillingView.vue
@@ -1,310 +1,71 @@
-<!-- SPEC: PJ2026-010405 云端控制台. -->
-<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { billingAPI } from "@/api";
 import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
 import BaseDialog from "@/components/common/BaseDialog.vue";
-import DataGrid from "@/components/common/DataGrid.vue";
-import type { DataGridColumn } from "@/components/common/DataGrid.vue";
-import ResourceCollection from "@/components/common/ResourceCollection.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import EntityIndex from "@/components/console/EntityIndex.vue";
+import OperationsWorkspace from "@/components/console/OperationsWorkspace.vue";
+import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
+import AuditTimeline from "@/components/console/AuditTimeline.vue";
 import PageCommandBar from "@/components/layout/PageCommandBar.vue";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
+import StatusStrip from "@/components/layout/StatusStrip.vue";
+import { useConsoleViewState } from "@/composables/useConsoleViewState";
 import type { RedeemCodeSummary, RedeemRedemptionSummary } from "@/types";
 
-const codes = ref<RedeemCodeSummary[]>([]);
 const route = useRoute();
 const router = useRouter();
+const viewState = useConsoleViewState<"summary" | "detail">({ view: "summary", viewValues: ["summary", "detail"], tab: "codes" });
+const codes = ref<RedeemCodeSummary[]>([]);
 const redemptions = ref<RedeemRedemptionSummary[]>([]);
 const loading = ref(true);
 const loaded = ref(false);
 const error = ref<string | null>(null);
 const pending = ref<string | null>(null);
-const createdCode = ref<string | null>(null);
+const selectedCodeId = ref<string | null>(typeof route.query.codeId === "string" ? route.query.codeId : null);
 const createOpen = ref(false);
-const filters = reactive({
-  status: typeof route.query.filter === "string" ? route.query.filter : "",
-  userId: typeof route.query.userId === "string" ? route.query.userId : "",
-  codeId: typeof route.query.codeId === "string" ? route.query.codeId : ""
-});
+const createdCode = ref<string | null>(null);
+const filters = reactive({ status: typeof route.query.filter === "string" ? route.query.filter : "", userId: typeof route.query.userId === "string" ? route.query.userId : "" });
 const form = reactive({ displayName: "", creditAmount: 10, reason: "redeem", maxRedemptions: 1, perUserLimit: 1, expiresAt: "" });
-const activeTab = computed<"codes" | "redemptions">({
-  get: () => route.query.tab === "redemptions" ? "redemptions" : "codes",
-  set: (value) => {
-    const query = { ...route.query };
-    if (value === "codes") delete query.tab;
-    else query.tab = value;
-    void router.replace({ query });
-  }
-});
-const viewMode = computed<"cards" | "list">({
-  get: () => route.query.view === "list" ? "list" : "cards",
-  set: (value) => {
-    const query = { ...route.query };
-    if (value === "cards") delete query.view;
-    else query.view = value;
-    void router.replace({ query });
-  }
-});
-const asyncState = computed(() => {
-  const hasContent = codes.value.length > 0 || redemptions.value.length > 0;
-  if (loading.value) return hasContent ? "refreshing" : "initial-loading";
-  if (error.value) return hasContent ? "partial" : "error";
-  return loaded.value ? "ready" : "empty";
-});
-const codeColumns: DataGridColumn[] = [
-  { key: "code", label: "Code" },
-  { key: "status", label: "Status" },
-  { key: "credits", label: "Credits", align: "right" },
-  { key: "usage", label: "Usage" },
-  { key: "expires", label: "Expires" },
-  { key: "actions", label: "Action", align: "right" }
-];
-const redemptionColumns: DataGridColumn[] = [
-  { key: "time", label: "Time" },
-  { key: "user", label: "User" },
-  { key: "code", label: "Code" },
-  { key: "credits", label: "Credits", align: "right" },
-  { key: "status", label: "Status" },
-  { key: "ledger", label: "Ledger" }
-];
-
-function codeKey(code: RedeemCodeSummary): string {
-  return code.id || code.codePrefix || "redeem-code";
-}
-
-function redemptionKey(row: RedeemRedemptionSummary): string {
-  return row.id || `${row.userId}:${row.codeId}`;
-}
+const activeTab = computed({ get: () => viewState.tab.value === "redemptions" ? "redemptions" : "codes", set: (value: string) => void viewState.update({ tab: value === "codes" ? undefined : "redemptions" }, false) });
+const viewMode = computed({ get: () => viewState.view.value, set: (value: "summary" | "detail") => void viewState.update({ view: value === "summary" ? undefined : value }, false) });
+const selectedCode = computed(() => codes.value.find((item) => codeKey(item) === selectedCodeId.value) ?? codes.value[0] ?? null);
+const asyncState = computed(() => loading.value ? (loaded.value ? "refreshing" : "initial-loading") : error.value ? (loaded.value ? "partial" : "error") : loaded.value ? "ready" : "empty");
+const statusItems = computed(() => [{ id: "codes", label: "Codes", value: codes.value.length }, { id: "active", label: "Active", value: codes.value.filter((item) => item.status === "active").length, tone: "ok" as const }, { id: "redemptions", label: "Redemptions", value: redemptions.value.length }, { id: "authority", label: "Authority", value: "user-billing" }]);
 
 onMounted(refreshAll);
-
-watch(() => [route.query.filter, route.query.userId, route.query.codeId].map((value) => typeof value === "string" ? value : "").join("\u0000"), () => {
-  const status = typeof route.query.filter === "string" ? route.query.filter : "";
-  const userId = typeof route.query.userId === "string" ? route.query.userId : "";
-  const codeId = typeof route.query.codeId === "string" ? route.query.codeId : "";
-  if (filters.status === status && filters.userId === userId && filters.codeId === codeId) return;
-  filters.status = status;
-  filters.userId = userId;
-  filters.codeId = codeId;
-  void refreshFromRoute();
-});
-
-async function refreshFromRoute(): Promise<void> {
-  loading.value = true;
-  error.value = null;
-  await Promise.all([fetchCodes(), fetchRedemptions()]);
-  loading.value = false;
-  loaded.value = true;
-}
-
-async function refreshAll(): Promise<void> {
-  loading.value = true;
-  error.value = null;
-  await persistFilters();
-  await Promise.all([fetchCodes(), fetchRedemptions()]);
-  loading.value = false;
-  loaded.value = true;
-}
-
-async function persistFilters(): Promise<void> {
-  const query = { ...route.query };
-  if (filters.status) query.filter = filters.status;
-  else delete query.filter;
-  if (filters.userId.trim()) query.userId = filters.userId.trim();
-  else delete query.userId;
-  if (filters.codeId.trim()) query.codeId = filters.codeId.trim();
-  else delete query.codeId;
-  await router.replace({ query });
-}
-
-async function loadCodes(): Promise<void> {
-  error.value = null;
-  await persistFilters();
-  await fetchCodes();
-}
-
-async function fetchCodes(): Promise<void> {
-  const response = await billingAPI.adminRedeemCodes({ limit: 100, status: filters.status });
-  if (!response.ok) {
-    error.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  codes.value = response.data?.codes ?? [];
-}
-
-async function loadRedemptions(): Promise<void> {
-  error.value = null;
-  await persistFilters();
-  await fetchRedemptions();
-}
-
-async function fetchRedemptions(): Promise<void> {
-  const response = await billingAPI.adminRedeemRedemptions({ limit: 100, userId: filters.userId, codeId: filters.codeId });
-  if (!response.ok) {
-    error.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  redemptions.value = response.data?.redemptions ?? [];
-}
-
-async function createCode(): Promise<void> {
-  pending.value = "create";
-  createdCode.value = null;
-  error.value = null;
-  const body: Record<string, unknown> = { ...form, creditAmount: Number(form.creditAmount), maxRedemptions: Number(form.maxRedemptions), perUserLimit: Number(form.perUserLimit) };
-  if (!String(form.expiresAt).trim()) delete body.expiresAt;
-  else body.expiresAt = new Date(form.expiresAt).toISOString();
-  const response = await billingAPI.createAdminRedeemCode(body);
-  pending.value = null;
-  if (!response.ok) {
-    error.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  createdCode.value = response.data?.redeemCode ?? null;
-  form.displayName = "";
-  await refreshAll();
-}
-
-async function setStatus(codeId: string | undefined, status: string): Promise<void> {
-  if (!codeId) return;
-  pending.value = `status:${codeId}`;
-  const response = await billingAPI.updateAdminRedeemCode(codeId, { status });
-  pending.value = null;
-  if (!response.ok) {
-    error.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  await refreshAll();
-}
-
-function formatNumber(value: unknown): string {
-  const number = Number(value ?? 0);
-  if (!Number.isFinite(number)) return "0";
-  return new Intl.NumberFormat("zh-CN").format(number);
-}
-
-function formatDate(value: unknown): string {
-  const text = String(value ?? "").trim();
-  if (!text) return "-";
-  const date = new Date(text);
-  if (Number.isNaN(date.getTime())) return text;
-  return date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
+watch(() => [route.query.filter, route.query.userId, route.query.codeId].join("\0"), () => { filters.status = typeof route.query.filter === "string" ? route.query.filter : ""; filters.userId = typeof route.query.userId === "string" ? route.query.userId : ""; selectedCodeId.value = typeof route.query.codeId === "string" ? route.query.codeId : null; void refreshAll(); });
+async function refreshAll(): Promise<void> { loading.value = true; error.value = null; const [codeResult, redemptionResult] = await Promise.all([billingAPI.adminRedeemCodes({ status: filters.status || undefined, limit: 100 }), billingAPI.adminRedeemRedemptions({ userId: filters.userId || undefined, limit: 100 })]); if (codeResult.ok) codes.value = codeResult.data?.codes ?? []; else error.value = codeResult.error ?? `HTTP ${codeResult.status}`; if (redemptionResult.ok) redemptions.value = redemptionResult.data?.redemptions ?? []; else error.value ||= redemptionResult.error ?? `HTTP ${redemptionResult.status}`; loading.value = false; loaded.value = true; }
+async function persistFilters(): Promise<void> { await router.push({ query: { ...route.query, filter: filters.status || undefined, userId: filters.userId || undefined } }); }
+async function selectCode(code: RedeemCodeSummary): Promise<void> { const codeId = codeKey(code); selectedCodeId.value = codeId; await router.push({ query: { ...route.query, codeId } }); }
+async function setStatus(code: RedeemCodeSummary): Promise<void> { if (!code.id) return; pending.value = `status:${code.id}`; const response = await billingAPI.updateAdminRedeemCode(code.id, { status: code.status === "disabled" ? "active" : "disabled" }); pending.value = null; if (!response.ok) error.value = response.error ?? `HTTP ${response.status}`; else await refreshAll(); }
+async function createCode(): Promise<void> { pending.value = "create"; const body: Record<string, unknown> = { ...form, creditAmount: Number(form.creditAmount), maxRedemptions: Number(form.maxRedemptions), perUserLimit: Number(form.perUserLimit) }; if (form.expiresAt) body.expiresAt = new Date(form.expiresAt).toISOString(); else delete body.expiresAt; const response = await billingAPI.createAdminRedeemCode(body); pending.value = null; if (!response.ok) { error.value = response.error ?? `HTTP ${response.status}`; return; } createdCode.value = response.data?.redeemCode ?? null; await refreshAll(); }
+function codeKey(item: RedeemCodeSummary): string { return item.id || item.codePrefix || "redeem-code"; }
+function redemptionKey(item: RedeemRedemptionSummary): string { return item.id || `${item.userId}:${item.codeId}:${item.createdAt}`; }
+function formatNumber(value: unknown): string { return new Intl.NumberFormat("zh-CN").format(Number(value ?? 0)); }
+function formatDate(value: unknown): string { const text = String(value ?? ""); if (!text) return "-"; const date = new Date(text); return Number.isNaN(date.getTime()) ? text : date.toLocaleString("zh-CN"); }
 </script>
 
 <template>
-  <section class="route-stack admin-billing-page">
-    <PageCommandBar eyebrow="Admin" title="兑换与订阅" description="管理员生成兑换码并审计 redemption；真实支付 provider 未配置时只显示 placeholder。" />
-    <AsyncBoundary :state="asyncState" :has-content="Boolean(codes.length || redemptions.length)" label="加载兑换码与兑换记录" error-title="账务审计加载失败" :error="error || '请求未完成'" @retry="refreshAll">
-      <p v-if="error" class="form-error admin-action-error">{{ error }}</p>
-      <section class="admin-billing-commandbar"><div><span>REDEEM AUTHORITY</span><strong>兑换码与 redemption 审计</strong><small>user-billing / bounded 100 rows</small></div><button type="button" @click="createdCode = null; createOpen = true">+ 创建兑换码</button></section>
-      <nav class="admin-billing-tabs" role="tablist" aria-label="管理员账务视图"><button type="button" role="tab" :aria-selected="activeTab === 'codes'" :data-active="activeTab === 'codes'" @click="activeTab = 'codes'">兑换码 <span>{{ codes.length }}</span></button><button type="button" role="tab" :aria-selected="activeTab === 'redemptions'" :data-active="activeTab === 'redemptions'" @click="activeTab = 'redemptions'">兑换记录 <span>{{ redemptions.length }}</span></button></nav>
-
-      <section v-if="activeTab === 'codes'" class="data-panel admin-billing-surface">
-        <header class="panel-header"><h2>兑换码</h2><div class="admin-billing-heading-actions"><small>{{ codes.length }} codes</small><span class="admin-billing-view-toggle"><button type="button" :data-active="viewMode === 'cards'" @click="viewMode = 'cards'">卡片</button><button type="button" :data-active="viewMode === 'list'" @click="viewMode = 'list'">列表</button></span></div></header>
-        <div class="admin-users-filters">
-          <select v-model="filters.status" class="input" @change="loadCodes"><option value="">全部状态</option><option value="active">active</option><option value="disabled">disabled</option><option value="expired">expired</option></select>
-          <button class="btn btn-secondary" type="button" @click="loadCodes">刷新</button>
+  <section class="route-stack billing-operations-page">
+    <PageCommandBar eyebrow="Admin" title="兑换运营与账本审计" description="兑换码与 redemption 使用同一稳定集合合同；创建动作进入 Dialog。"><template #actions><ViewModeSwitch v-model="viewMode" :options="[{ value: 'summary', label: '运营摘要', icon: 'billing' }, { value: 'detail', label: '账本明细', icon: 'usage' }]" /><button class="table-action" type="button" @click="createdCode = null; createOpen = true">创建兑换码</button></template></PageCommandBar>
+    <AsyncBoundary :state="asyncState" :has-content="Boolean(codes.length || redemptions.length)" label="加载兑换运营" @retry="refreshAll"><template #error><EmptyState title="兑换运营加载失败" :description="error || '请求未完成'" action-label="重试" @action="refreshAll" /></template>
+      <StatusStrip :items="statusItems" />
+      <OperationsWorkspace class="billing-operations" label="兑换运营工作区" :inspector-open="Boolean(selectedCode)">
+        <template #index><EntityIndex :items="codes" :item-key="codeKey" :selected-id="selectedCode ? codeKey(selectedCode) : null" label="兑换码索引" @select="selectCode"><template #toolbar><select v-model="filters.status" class="input" @change="persistFilters"><option value="">全部状态</option><option value="active">active</option><option value="disabled">disabled</option><option value="expired">expired</option></select><small>{{ codes.length }} codes</small></template><template #item="{ item }"><strong><code>{{ item.codePrefix }}</code> {{ item.displayName || item.id }}</strong><small>{{ formatNumber(item.creditAmount) }} credits · {{ formatNumber(item.redeemedCount) }}/{{ formatNumber(item.maxRedemptions) }}</small><span class="status-pill" :data-status="item.status">{{ item.status }}</span></template></EntityIndex></template>
+        <div class="billing-main-stack"><nav class="operations-tabs"><button type="button" :aria-selected="activeTab === 'codes'" @click="activeTab = 'codes'">Codes</button><button type="button" :aria-selected="activeTab === 'redemptions'" @click="activeTab = 'redemptions'">Redemptions</button></nav>
+          <SectionFrame v-if="activeTab === 'codes' && viewMode === 'summary'" title="兑换运营摘要" description="状态、额度、使用率与到期时间可直接扫描。" :body-padding="false"><div class="billing-summary-grid"><button v-for="code in codes" :key="code.id" type="button" @click="selectCode(code)"><span class="status-pill" :data-status="code.status">{{ code.status }}</span><strong>{{ code.codePrefix }}</strong><small>{{ code.displayName || code.reason }}</small><dl><div><dt>Credits</dt><dd>{{ formatNumber(code.creditAmount) }}</dd></div><div><dt>Usage</dt><dd>{{ formatNumber(code.redeemedCount) }}/{{ formatNumber(code.maxRedemptions) }}</dd></div><div><dt>Expires</dt><dd>{{ formatDate(code.expiresAt) }}</dd></div></dl></button></div></SectionFrame>
+          <SectionFrame v-else title="兑换与账本明细" description="同一 redemption DTO 的紧凑审计时间线。"><div class="billing-filters"><input v-model="filters.userId" class="input" placeholder="user id" @keyup.enter="persistFilters"><button class="table-action" type="button" @click="persistFilters">过滤</button></div><AuditTimeline :items="redemptions" :item-key="redemptionKey"><template #item="{ item }"><strong>{{ item.codePrefix || item.codeId }} · {{ item.userId }}</strong><small>{{ formatDate(item.createdAt) }} · {{ item.status }} · {{ item.id }}</small></template></AuditTimeline></SectionFrame>
         </div>
-        <DataGrid v-if="viewMode === 'list' && codes.length" :columns="codeColumns" :rows="codes" :row-key="codeKey" :interactive="false" empty-text="没有匹配兑换码。">
-          <template #cell-code="{ row }"><code>{{ (row as RedeemCodeSummary).codePrefix }}</code><small>{{ (row as RedeemCodeSummary).displayName || (row as RedeemCodeSummary).id }} / {{ (row as RedeemCodeSummary).reason }}</small></template>
-          <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as RedeemCodeSummary).status">{{ (row as RedeemCodeSummary).status }}</span></template>
-          <template #cell-credits="{ row }">{{ formatNumber((row as RedeemCodeSummary).creditAmount) }}</template>
-          <template #cell-usage="{ row }">{{ formatNumber((row as RedeemCodeSummary).redeemedCount) }} / {{ formatNumber((row as RedeemCodeSummary).maxRedemptions) }}<small>per user {{ formatNumber((row as RedeemCodeSummary).perUserLimit) }}</small></template>
-          <template #cell-expires="{ row }">{{ formatDate((row as RedeemCodeSummary).expiresAt) }}</template>
-          <template #cell-actions="{ row: item }"><button class="table-action" type="button" :disabled="pending === `status:${(item as RedeemCodeSummary).id}`" @click="setStatus((item as RedeemCodeSummary).id, (item as RedeemCodeSummary).status === 'disabled' ? 'active' : 'disabled')">{{ (item as RedeemCodeSummary).status === "disabled" ? "启用" : "禁用" }}</button></template>
-        </DataGrid>
-        <ResourceCollection v-else-if="codes.length" :items="codes" :item-key="codeKey" view="cards" :show-controls="false" aria-label="兑换码卡片">
-          <template #card="{ item: code }"><article class="admin-billing-card">
-            <header><span class="billing-glyph" aria-hidden="true">RC</span><div><code>{{ code.codePrefix }}</code><small>{{ code.displayName || code.id }} / {{ code.reason }}</small></div><span class="status-pill" :data-status="code.status">{{ code.status }}</span></header>
-            <dl><div><dt>Credits</dt><dd>{{ formatNumber(code.creditAmount) }}</dd></div><div><dt>Usage</dt><dd>{{ formatNumber(code.redeemedCount) }} / {{ formatNumber(code.maxRedemptions) }}</dd></div><div><dt>Expires</dt><dd>{{ formatDate(code.expiresAt) }}</dd></div></dl>
-            <footer><small>per user {{ formatNumber(code.perUserLimit) }}</small><button class="table-action" type="button" :disabled="pending === `status:${code.id}`" @click="setStatus(code.id, code.status === 'disabled' ? 'active' : 'disabled')">{{ code.status === "disabled" ? "启用" : "禁用" }}</button></footer>
-          </article></template>
-        </ResourceCollection>
-        <p v-else class="muted-box">没有匹配兑换码。</p>
-      </section>
-
-      <section v-if="activeTab === 'redemptions'" class="data-panel admin-billing-surface">
-        <header class="panel-header"><h2>兑换记录</h2><div class="admin-billing-heading-actions"><small>{{ redemptions.length }} rows</small><span class="admin-billing-view-toggle"><button type="button" :data-active="viewMode === 'cards'" @click="viewMode = 'cards'">卡片</button><button type="button" :data-active="viewMode === 'list'" @click="viewMode = 'list'">列表</button></span></div></header>
-        <div class="admin-users-filters">
-          <input v-model="filters.userId" class="input" placeholder="user id" @keyup.enter="loadRedemptions" />
-          <input v-model="filters.codeId" class="input" placeholder="code id" @keyup.enter="loadRedemptions" />
-          <button class="btn btn-secondary" type="button" @click="loadRedemptions">过滤</button>
-        </div>
-        <DataGrid v-if="viewMode === 'list' && redemptions.length" :columns="redemptionColumns" :rows="redemptions" :row-key="redemptionKey" :interactive="false" empty-text="暂无兑换记录。">
-          <template #cell-time="{ row }">{{ formatDate((row as RedeemRedemptionSummary).createdAt) }}<small>{{ (row as RedeemRedemptionSummary).id }}</small></template>
-          <template #cell-user="{ row }"><code>{{ (row as RedeemRedemptionSummary).userId }}</code></template>
-          <template #cell-code="{ row }"><code>{{ (row as RedeemRedemptionSummary).codePrefix }}</code><small>{{ (row as RedeemRedemptionSummary).codeId }}</small></template>
-          <template #cell-credits="{ row }">{{ formatNumber((row as RedeemRedemptionSummary).creditAmount) }}</template>
-          <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as RedeemRedemptionSummary).status">{{ (row as RedeemRedemptionSummary).status }}</span></template>
-          <template #cell-ledger="{ row }"><code>{{ (row as RedeemRedemptionSummary).ledgerId || "-" }}</code></template>
-        </DataGrid>
-        <ResourceCollection v-else-if="redemptions.length" :items="redemptions" :item-key="redemptionKey" view="cards" :show-controls="false" aria-label="兑换记录卡片">
-          <template #card="{ item: row }"><article class="admin-billing-card">
-            <header><span class="billing-glyph" aria-hidden="true">RD</span><div><strong>{{ row.codePrefix || row.codeId }}</strong><small>{{ formatDate(row.createdAt) }} / {{ row.id }}</small></div><span class="status-pill" :data-status="row.status">{{ row.status }}</span></header>
-            <dl><div><dt>User</dt><dd>{{ row.userId }}</dd></div><div><dt>Credits</dt><dd>{{ formatNumber(row.creditAmount) }}</dd></div><div><dt>Ledger</dt><dd>{{ row.ledgerId || '-' }}</dd></div></dl>
-          </article></template>
-        </ResourceCollection>
-        <p v-else class="muted-box">暂无兑换记录。</p>
-      </section>
-
-      <BaseDialog :open="createOpen" title="创建兑换码" description="Code 仅在创建响应中显示一次。" wide @close="createdCode = null; createOpen = false">
-        <form class="admin-billing-create" @submit.prevent="createCode">
-          <div class="form-grid two-col">
-            <label>名称<input v-model="form.displayName" class="input" placeholder="Campaign / manual recharge" /></label>
-            <label>Credits<input v-model.number="form.creditAmount" class="input" type="number" min="1" /></label>
-            <label>原因<input v-model="form.reason" class="input" /></label>
-            <label>最大兑换次数<input v-model.number="form.maxRedemptions" class="input" type="number" min="1" /></label>
-            <label>每用户限制<input v-model.number="form.perUserLimit" class="input" type="number" min="1" /></label>
-            <label>过期时间<input v-model="form.expiresAt" class="input" type="datetime-local" /></label>
-          </div>
-          <p v-if="createdCode" class="created-redeem-code"><strong>立即保存新兑换码</strong><code>{{ createdCode }}</code><small>关闭后不再显示完整值。</small></p>
-        </form>
-        <template #footer><button class="table-action" type="button" @click="createdCode = null; createOpen = false">{{ createdCode ? '已保存并关闭' : '取消' }}</button><button v-if="!createdCode" class="table-action" type="button" :disabled="pending === 'create'" @click="createCode">{{ pending === 'create' ? '创建中' : '创建' }}</button></template>
-      </BaseDialog>
-      <p class="muted-box">两个接口都使用后端支持的 `limit=100` 有界读取；契约未提供 cursor、nextCursor 或 total，因此不伪造分页。</p>
+        <template #inspector><section v-if="selectedCode" class="operations-inspector-panel"><header class="operations-inspector-header"><div><h2>{{ selectedCode.displayName || selectedCode.codePrefix }}</h2><p>{{ selectedCode.id }}</p></div></header><div class="operations-inspector-body"><dl class="inspector-facts"><div><dt>Status</dt><dd>{{ selectedCode.status }}</dd></div><div><dt>Credits</dt><dd>{{ formatNumber(selectedCode.creditAmount) }}</dd></div><div><dt>Per user</dt><dd>{{ formatNumber(selectedCode.perUserLimit) }}</dd></div><div><dt>Expires</dt><dd>{{ formatDate(selectedCode.expiresAt) }}</dd></div></dl><button class="table-action" type="button" :disabled="pending === `status:${selectedCode.id}`" @click="setStatus(selectedCode)">{{ selectedCode.status === 'disabled' ? '启用' : '禁用' }}</button></div></section></template>
+      </OperationsWorkspace>
+      <BaseDialog :open="createOpen" title="创建兑换码" description="写入 user-billing authority" :close-on-backdrop="!pending" @close="createOpen = false"><div class="form-grid two-col"><label>名称<input v-model="form.displayName" class="input"></label><label>Credits<input v-model.number="form.creditAmount" class="input" type="number"></label><label>Reason<input v-model="form.reason" class="input"></label><label>Max redemptions<input v-model.number="form.maxRedemptions" class="input" type="number"></label><label>Per user<input v-model.number="form.perUserLimit" class="input" type="number"></label><label>Expires<input v-model="form.expiresAt" class="input" type="datetime-local"></label></div><p v-if="createdCode" class="muted-box">新兑换码：<code>{{ createdCode }}</code></p><template #footer><button class="table-action" type="button" @click="createOpen = false">关闭</button><button class="table-action" type="button" :disabled="pending === 'create'" @click="createCode">{{ pending === 'create' ? '创建中' : '创建' }}</button></template></BaseDialog>
     </AsyncBoundary>
   </section>
 </template>
 
 <style scoped>
-.admin-billing-page { min-width: 0; }
-.admin-billing-commandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #c9d5db; border-radius: 8px; background: #17343c; padding: 10px 12px; color: #efffff; box-shadow: inset 3px 0 #21afa7; }
-.admin-billing-commandbar div { display: grid; gap: 4px; }
-.admin-billing-commandbar span { color: #7fd2cc; font: 850 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
-.admin-billing-commandbar strong { font-size: 13px; }
-.admin-billing-commandbar small { color: #abc8c6; font-size: 10px; }
-.admin-billing-commandbar button { min-height: 34px; border: 1px solid #72bcb7; border-radius: 6px; background: #efffff; padding: 0 12px; color: #155e5b; font-weight: 800; cursor: pointer; }
-.admin-billing-tabs { display: flex; gap: 4px; border-bottom: 1px solid #cbd6dc; }
-.admin-billing-tabs button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0 11px; color: #596b74; font-weight: 800; cursor: pointer; }
-.admin-billing-tabs button[data-active="true"] { border-bottom-color: #168d88; color: #145f5c; }
-.admin-billing-tabs span { display: inline-grid; min-width: 20px; height: 18px; place-items: center; border-radius: 9px; background: #e5eeee; padding: 0 6px; font-size: 9px; }
-.admin-billing-surface { min-width: 0; overflow: auto; box-shadow: inset 3px 0 #1ba39e; }
-.admin-billing-heading-actions { display: flex; align-items: center; gap: 9px; }
-.admin-billing-view-toggle { display: inline-flex; padding: 2px; border: 1px solid #b8c5cc; border-radius: 7px; background: #eef3f4; }
-.admin-billing-view-toggle button { height: 26px; border: 0; border-radius: 5px; background: transparent; padding: 0 10px; color: #64757d; font-size: 10px; font-weight: 800; }
-.admin-billing-view-toggle button[data-active="true"] { background: #183b43; color: #fff; }
-.admin-billing-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 9px; margin-top: 10px; }
-.admin-billing-card { display: grid; gap: 12px; min-width: 0; border: 1px solid #c7d3d8; border-radius: 8px; background: #fff; padding: 12px; box-shadow: inset 3px 0 #90a6ad; }
-.admin-billing-card header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
-.admin-billing-card header > div { display: grid; min-width: 0; }
-.admin-billing-card header code,
-.admin-billing-card header strong,
-.admin-billing-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.billing-glyph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: #dcefed; color: #126f6a; font: 900 10px/1 ui-monospace, monospace; }
-.admin-billing-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
-.admin-billing-card dl div { display: grid; gap: 3px; min-width: 0; border-top: 1px solid #e0e7e9; padding-top: 7px; }
-.admin-billing-card dt { color: #708087; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
-.admin-billing-card dd { overflow: hidden; margin: 0; font: 750 10px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
-.admin-billing-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.admin-billing-create { display: grid; gap: 12px; }
-.created-redeem-code { display: grid; gap: 7px; border: 1px solid #d8b45f; border-radius: 7px; background: #fff8de; padding: 11px; color: #604b17; }
-.created-redeem-code code { overflow-wrap: anywhere; }
-:deep(.admin-billing-surface table) { min-width: 720px; }
-@media (max-width: 640px) {
-  .admin-billing-commandbar { align-items: stretch; flex-direction: column; }
-  .admin-billing-heading-actions { align-items: flex-end; flex-direction: column; }
-  .admin-billing-card-grid { grid-template-columns: 1fr; }
-}
+.billing-operations { min-height: 620px; }.billing-main-stack { display: grid; gap: 14px; }.operations-tabs { display: flex; gap: 3px; border-bottom: 1px solid #d8e1e4; }.operations-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; background: transparent; }.operations-tabs button[aria-selected="true"] { border-color: #08756f; font-weight: 800; }.billing-summary-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1px; background: #d8e1e4; }.billing-summary-grid button { display: grid; gap: 7px; border: 0; padding: 12px; background: white; color: inherit; text-align: left; }.billing-summary-grid dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; }.billing-summary-grid dt { color: #64757d; font-size: 9px; text-transform: uppercase; }.billing-summary-grid dd { margin: 3px 0 0; font-size: 11px; }.billing-filters { display: flex; gap: 8px; margin-bottom: 12px; }.inspector-facts { display: grid; gap: 1px; margin: 0; background: #d8e1e4; }.inspector-facts div { padding: 10px; background: white; }.inspector-facts dt { color: #64757d; font-size: 10px; }.inspector-facts dd { margin: 4px 0 0; }
 </style>
diff --git a/web/hwlab-cloud-web/src/views/admin/SecretsView.vue b/web/hwlab-cloud-web/src/views/admin/SecretsView.vue
index 5d7ecf60..92cca954 100644
--- a/web/hwlab-cloud-web/src/views/admin/SecretsView.vue
+++ b/web/hwlab-cloud-web/src/views/admin/SecretsView.vue
@@ -1,37 +1,24 @@
-<!-- SPEC: PJ2026-010405 云端控制台. -->
-<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { adminSecretsAPI } from "@/api";
-import AdminSecretsPlanPanel from "./AdminSecretsPlanPanel.vue";
 import ApiErrorDiagnostic from "@/components/common/ApiErrorDiagnostic.vue";
 import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
-import DataGrid from "@/components/common/DataGrid.vue";
-import type { DataGridColumn } from "@/components/common/DataGrid.vue";
 import EmptyState from "@/components/common/EmptyState.vue";
-import ResourceCollection from "@/components/common/ResourceCollection.vue";
-import PageCommandBar from "@/components/layout/PageCommandBar.vue";
 import StatusBadge from "@/components/common/StatusBadge.vue";
-import TablePageLayout from "@/components/layout/TablePageLayout.vue";
+import EntityIndex from "@/components/console/EntityIndex.vue";
+import FactPath from "@/components/console/FactPath.vue";
+import OperationsWorkspace from "@/components/console/OperationsWorkspace.vue";
+import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
+import PageCommandBar from "@/components/layout/PageCommandBar.vue";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
+import StatusStrip from "@/components/layout/StatusStrip.vue";
 import { useConsoleViewState } from "@/composables/useConsoleViewState";
 import { normalizeAdminSecretsRows, normalizeAdminSecretsSummary, type AdminSecretsRow, type AdminSecretsSummaryView } from "@/stores/admin-secrets-view";
 import type { ApiError, ErrorDiagnostic } from "@/types";
-
-const columns: DataGridColumn[] = [
-  { key: "name", label: "NAME" },
-  { key: "status", label: "STATUS" },
-  { key: "namespace", label: "NAMESPACE" },
-  { key: "cluster", label: "CLUSTER" },
-  { key: "targetSecret", label: "K8S SECRET" },
-  { key: "store", label: "SECRET STORE" },
-  { key: "age", label: "AGE" }
-];
+import AdminSecretsPlanPanel from "./AdminSecretsPlanPanel.vue";
 
 const loading = ref(true);
-const route = useRoute();
-const router = useRouter();
-const viewState = useConsoleViewState({ filter: "all" });
 const refreshing = ref(false);
 const error = ref<string | null>(null);
 const apiError = ref<ApiError | null>(null);
@@ -39,198 +26,101 @@ const diagnostic = ref<ErrorDiagnostic | null>(null);
 const summary = ref<AdminSecretsSummaryView | null>(null);
 const rows = ref<AdminSecretsRow[]>([]);
 const planPanelOpen = ref(false);
-
+const route = useRoute();
+const router = useRouter();
+const viewState = useConsoleViewState<"flow" | "list">({ view: "flow", viewValues: ["flow", "list"], filter: "all" });
 const canPlan = computed(() => summary.value?.permissions.plan === true);
-const updatedText = computed(() => displayDate(summary.value?.generatedAt ?? ""));
-const query = computed({
-  get: () => viewState.q.value,
-  set: (value: string) => void viewState.update({ q: value.trim() })
-});
-const statusFilter = computed({
-  get: () => viewState.filter.value || "all",
-  set: (value: string) => void viewState.update({ filter: value === "all" ? "" : value })
-});
-const viewMode = computed<"cards" | "list">({
-  get: () => viewState.view.value,
-  set: (value) => void viewState.update({ view: value === "cards" ? undefined : value })
-});
-const filteredRows = computed(() => {
-  const needle = query.value.trim().toLowerCase();
-  return rows.value.filter((row) => {
-    if (statusFilter.value !== "all" && row.status.toLowerCase() !== statusFilter.value.toLowerCase()) return false;
-    return !needle || [row.name, row.namespace, row.cluster, row.targetSecretName, row.storeName, row.status, row.reason].join(" ").toLowerCase().includes(needle);
-  });
-});
-const asyncState = computed(() => {
-  if (loading.value || refreshing.value) return summary.value ? "refreshing" : "initial-loading";
-  if (error.value) return summary.value ? "partial" : "error";
-  return summary.value ? "ready" : "empty";
+const query = computed({ get: () => viewState.q.value, set: (value: string) => void viewState.update({ q: value.trim() }) });
+const statusFilter = computed({ get: () => viewState.filter.value || "all", set: (value: string) => void viewState.update({ filter: value === "all" ? "" : value }) });
+const viewMode = computed({ get: () => viewState.view.value, set: (value: "flow" | "list") => void viewState.update({ view: value === "flow" ? undefined : value }, false) });
+const filteredRows = computed(() => rows.value.filter((row) => {
+  if (statusFilter.value !== "all" && row.status.toLowerCase() !== statusFilter.value.toLowerCase()) return false;
+  const needle = query.value.toLowerCase();
+  return !needle || [row.name, row.namespace, row.cluster, row.targetSecretName, row.storeName, row.status, row.reason].join(" ").toLowerCase().includes(needle);
+}));
+const selected = computed(() => {
+  const namespace = typeof route.params.namespace === "string" ? route.params.namespace : "";
+  const name = typeof route.params.name === "string" ? route.params.name : "";
+  return rows.value.find((row) => row.namespace === namespace && row.name === name) ?? filteredRows.value[0] ?? null;
 });
+const asyncState = computed(() => loading.value || refreshing.value ? (summary.value ? "refreshing" : "initial-loading") : error.value ? (summary.value ? "partial" : "error") : summary.value ? "ready" : "empty");
+const statusItems = computed(() => [
+  { id: "objects", label: "ExternalSecrets", value: rows.value.length },
+  { id: "ready", label: "Ready", value: rows.value.filter((row) => row.status.toLowerCase() === "ready").length, tone: "ok" as const },
+  { id: "attention", label: "Attention", value: rows.value.filter((row) => !["ready", "unknown"].includes(row.status.toLowerCase())).length, tone: "warn" as const },
+  { id: "authority", label: "Values", value: "redacted", tone: "info" as const }
+]);
+const factSteps = computed(() => selected.value ? [
+  { id: "source", label: "sourceRef / store", value: `${selected.value.storeKind}/${selected.value.storeName}` },
+  { id: "external", label: "ExternalSecret", value: `${selected.value.namespace}/${selected.value.name}`, tone: selected.value.status.toLowerCase() === "ready" ? "ok" as const : "warn" as const },
+  { id: "target", label: "target Secret", value: selected.value.targetSecretName || "-" },
+  { id: "consumer", label: "consumer", value: selected.value.cluster || "cluster workload" }
+] : []);
 
 onMounted(() => void reload());
-
 async function reload(): Promise<void> {
   refreshing.value = true;
-  if (!summary.value) loading.value = true;
-  error.value = null;
-  apiError.value = null;
-  diagnostic.value = null;
-  const [summaryResult, listResult] = await Promise.all([
-    adminSecretsAPI.summary(),
-    adminSecretsAPI.externalSecrets()
-  ]);
-  if (!summaryResult.ok) {
-    error.value = summaryResult.error ?? `HTTP ${summaryResult.status}`;
-    apiError.value = summaryResult.apiError ?? null;
-    diagnostic.value = summaryResult.diagnostic ?? null;
-  } else {
+  error.value = null; apiError.value = null; diagnostic.value = null;
+  const [summaryResult, listResult] = await Promise.all([adminSecretsAPI.summary(), adminSecretsAPI.externalSecrets()]);
+  if (!summaryResult.ok) { error.value = summaryResult.error ?? `HTTP ${summaryResult.status}`; apiError.value = summaryResult.apiError ?? null; diagnostic.value = summaryResult.diagnostic ?? null; }
+  else {
     summary.value = normalizeAdminSecretsSummary(summaryResult.data);
-    const listItems = listResult.ok ? listResult.data?.items : summaryResult.data?.externalSecrets;
-    rows.value = normalizeAdminSecretsRows(listItems);
-    if (!listResult.ok) {
-      error.value = listResult.error ?? `HTTP ${listResult.status}`;
-      apiError.value = listResult.apiError ?? null;
-      diagnostic.value = listResult.diagnostic ?? null;
-    }
+    rows.value = normalizeAdminSecretsRows(listResult.ok ? listResult.data?.items : summaryResult.data?.externalSecrets);
+    if (!listResult.ok) { error.value = listResult.error ?? `HTTP ${listResult.status}`; apiError.value = listResult.apiError ?? null; diagnostic.value = listResult.diagnostic ?? null; }
   }
-  loading.value = false;
-  refreshing.value = false;
+  loading.value = false; refreshing.value = false;
 }
-
-function rowKey(row: AdminSecretsRow): string {
-  return `${row.namespace}/${row.name}`;
-}
-
-function detailLocation(row: AdminSecretsRow): { name: string; params: { namespace: string; name: string }; query: typeof route.query } {
-  return { name: "AdminExternalSecretDetail", params: { namespace: row.namespace, name: row.name }, query: route.query };
-}
-
-function openSecret(row: AdminSecretsRow): void {
-  void router.push(detailLocation(row));
-}
-
-function displayDate(value: string): string {
-  if (!value) return "-";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
-
+function rowKey(row: AdminSecretsRow): string { return `${row.namespace}/${row.name}`; }
+function openSecret(row: AdminSecretsRow): void { void router.push({ name: "AdminExternalSecretDetail", params: { namespace: row.namespace, name: row.name }, query: route.query }); }
+function displayDate(value: string): string { if (!value) return "-"; const date = new Date(value); return Number.isNaN(date.getTime()) ? value : date.toLocaleString("zh-CN"); }
 </script>
 
 <template>
   <section class="route-stack secrets-admin-page">
-    <PageCommandBar eyebrow="Admin" title="密钥" description="ExternalSecrets 只读状态来自同源脱敏 read model；页面只展示对象名、状态、presence 与 fingerprint。" />
-
-    <AsyncBoundary :state="asyncState" :has-content="Boolean(summary)" label="加载 ExternalSecrets" empty-title="暂无 Secret read model" empty-description="同源脱敏 API 当前未返回摘要。" @retry="reload">
-      <template #error><section class="data-panel admin-crud-panel">
-        <EmptyState title="密钥状态加载失败" :description="error || '请求未完成'" :api-error="apiError" :diagnostic="diagnostic" action-label="重试" @action="reload" />
-        <ApiErrorDiagnostic :error="error || '请求未完成'" :api-error="apiError" :diagnostic="diagnostic" compact />
-      </section></template>
-
-    <template v-if="summary">
-      <section class="secrets-compact-toolbar" aria-label="ExternalSecrets actions">
-        <div>
-          <strong>ExternalSecrets</strong>
-          <small>{{ rows.length }} rows / updated {{ updatedText }} / valuesPrinted={{ String(summary.valuesPrinted) }}</small>
-        </div>
-        <div class="table-actions-inline">
-          <button class="table-action" type="button" :disabled="refreshing" @click="reload">{{ refreshing ? "刷新中" : "刷新" }}</button>
-          <button v-if="canPlan" class="table-action" type="button" data-testid="admin-secrets-open-plan" @click="planPanelOpen = !planPanelOpen">{{ planPanelOpen ? "收起 Plan" : "Plan" }}</button>
-        </div>
-      </section>
-
-      <section class="secrets-filter-bar" aria-label="ExternalSecrets filters">
-        <label><span>搜索</span><input v-model="query" type="search" placeholder="名称、namespace、cluster 或 target" /></label>
-        <label><span>状态</span><select v-model="statusFilter"><option value="all">全部</option><option value="ready">ready</option><option value="pending">pending</option><option value="error">error</option><option value="unknown">unknown</option></select></label>
-        <small>{{ filteredRows.length }} / {{ rows.length }} objects</small>
-        <span class="secrets-view-toggle"><button type="button" :data-active="viewMode === 'cards'" @click="viewMode = 'cards'">卡片</button><button type="button" :data-active="viewMode === 'list'" @click="viewMode = 'list'">列表</button></span>
-      </section>
-
-      <AdminSecretsPlanPanel v-if="canPlan && planPanelOpen" :summary="summary" />
-
-      <TablePageLayout class="secrets-table-page" title="ExternalSecrets" subtitle="NAME / STATUS / NAMESPACE / CLUSTER / K8S SECRET / SECRET STORE / AGE">
-        <template #actions>
-          <StatusBadge :status="summary.status" :label="summary.status" />
+    <PageCommandBar eyebrow="Admin" title="密钥库存与流向" description="只展示 ExternalSecret 脱敏 read model；Secret 值永不进入浏览器。">
+      <template #actions><button class="table-action" type="button" :disabled="refreshing" @click="reload">{{ refreshing ? "刷新中" : "刷新" }}</button><button v-if="canPlan" class="table-action" type="button" @click="planPanelOpen = !planPanelOpen">{{ planPanelOpen ? "关闭 Plan" : "Plan" }}</button></template>
+    </PageCommandBar>
+    <AsyncBoundary :state="asyncState" :has-content="Boolean(summary)" label="加载密钥库存" empty-title="暂无密钥库存" empty-description="当前 admin secrets read model 为空。" @retry="reload">
+      <template #error><EmptyState title="密钥库存加载失败" :description="error || '请求未完成'" action-label="重试" @action="reload" /></template>
+      <ApiErrorDiagnostic v-if="error && summary" :api-error="apiError" :diagnostic="diagnostic" />
+      <StatusStrip :items="statusItems" live="polite" />
+      <AdminSecretsPlanPanel v-if="canPlan && planPanelOpen && summary" :summary="summary" />
+      <OperationsWorkspace class="secrets-operations" label="ExternalSecret 库存工作区">
+        <template #index>
+          <EntityIndex :items="filteredRows" :item-key="rowKey" :selected-id="selected ? rowKey(selected) : null" label="ExternalSecret 库存" @select="openSecret">
+            <template #toolbar><label class="operations-search"><span>ExternalSecret 库存</span><input v-model="query" type="search" placeholder="名称、namespace、cluster 或 target" /></label><select v-model="statusFilter" class="input"><option value="all">全部状态</option><option value="ready">ready</option><option value="pending">pending</option><option value="error">error</option><option value="unknown">unknown</option></select><small>{{ filteredRows.length }} / {{ rows.length }} objects</small></template>
+            <template #item="{ item }"><strong>{{ item.name }}</strong><small>{{ item.namespace }} · {{ item.cluster }}</small><span class="entity-index-meta"><StatusBadge :status="item.status" :label="item.status" /><code>{{ item.targetSecretName || "no target" }}</code></span></template>
+          </EntityIndex>
         </template>
-        <DataGrid v-if="viewMode === 'list'" class="secrets-external-table" :columns="columns" :rows="filteredRows" :row-key="rowKey" empty-text="当前筛选没有 ExternalSecret read model。" @select="openSecret">
-          <template #cell-name="{ row }">
-            <RouterLink class="secrets-name-link" :to="detailLocation(row as AdminSecretsRow)">
-              <strong>{{ (row as AdminSecretsRow).name }}</strong>
-              <small>{{ (row as AdminSecretsRow).refreshInterval }}</small>
-            </RouterLink>
-          </template>
-          <template #cell-status="{ row }">
-            <StatusBadge :status="(row as AdminSecretsRow).status" :label="(row as AdminSecretsRow).status" />
-            <small>{{ (row as AdminSecretsRow).reason }}</small>
-          </template>
-          <template #cell-namespace="{ row }">
-            <code>{{ (row as AdminSecretsRow).namespace }}</code>
-          </template>
-          <template #cell-cluster="{ row }">
-            {{ (row as AdminSecretsRow).cluster }}
-          </template>
-          <template #cell-targetSecret="{ row }">
-            <code>{{ (row as AdminSecretsRow).targetSecretName }}</code>
-            <small>{{ (row as AdminSecretsRow).targetSecretResourceVersion }}</small>
-          </template>
-          <template #cell-store="{ row }">
-            <code>{{ (row as AdminSecretsRow).storeKind }}/{{ (row as AdminSecretsRow).storeName }}</code>
-            <small>{{ (row as AdminSecretsRow).storeScope }}</small>
-          </template>
-          <template #cell-age="{ row }">
-            {{ (row as AdminSecretsRow).ageText }}
-            <small>{{ displayDate((row as AdminSecretsRow).lastUpdated) }}</small>
-          </template>
-        </DataGrid>
-        <ResourceCollection v-else-if="filteredRows.length" :items="filteredRows" :item-key="rowKey" view="cards" :show-controls="false" aria-label="ExternalSecret 卡片" @select="openSecret">
-          <template #card="{ item: row }"><RouterLink class="secret-card" :to="detailLocation(row)">
-            <header><span class="secret-glyph" aria-hidden="true">ES</span><div><strong>{{ row.name }}</strong><small>{{ row.namespace }} / {{ row.cluster }}</small></div><StatusBadge :status="row.status" :label="row.status" /></header>
-            <dl><div><dt>K8s Secret</dt><dd>{{ row.targetSecretName || '-' }}</dd></div><div><dt>Secret Store</dt><dd>{{ row.storeKind }}/{{ row.storeName }}</dd></div><div><dt>Age</dt><dd>{{ row.ageText }}</dd></div></dl>
-            <footer><span>{{ row.reason || row.refreshInterval || 'status reported' }}</span><strong>检查摘要 →</strong></footer>
-          </RouterLink></template>
-        </ResourceCollection>
-        <EmptyState v-else title="没有匹配 ExternalSecret" description="调整搜索或状态；页面不会从运行面反解 Secret 值。" />
-      </TablePageLayout>
-    </template>
+        <div v-if="selected" class="operations-main-stack">
+          <div class="view-mode-row"><ViewModeSwitch v-model="viewMode" :options="[{ value: 'flow', label: '流向', icon: 'secrets' }, { value: 'list', label: '清单', icon: 'mdtodo' }]" /></div>
+          <FactPath v-if="viewMode === 'flow'" :steps="factSteps" label="Secret 脱敏事实路径" />
+          <SectionFrame v-else title="库存清单" description="同一 ExternalSecret DTO 的紧凑字段视图。" :body-padding="false"><div class="secret-compact-list"><button v-for="row in filteredRows" :key="rowKey(row)" type="button" :data-selected="selected && rowKey(row) === rowKey(selected)" @click="openSecret(row)"><strong>{{ row.namespace }}/{{ row.name }}</strong><StatusBadge :status="row.status" :label="row.status" /><code>{{ row.storeKind }}/{{ row.storeName }}</code><code>{{ row.targetSecretName }}</code><span>{{ row.ageText }}</span></button></div></SectionFrame>
+          <SectionFrame title="ExternalSecret 事实" description="库存主面只保留可扫描的来源、目标、状态与 fingerprint 元数据。">
+            <dl class="fact-grid"><div><dt>Status</dt><dd><StatusBadge :status="selected.status" :label="selected.status" /></dd></div><div><dt>Reason</dt><dd>{{ selected.reason || "-" }}</dd></div><div><dt>Refresh</dt><dd>{{ selected.refreshInterval || "-" }}</dd></div><div><dt>Age</dt><dd>{{ selected.ageText }}</dd></div><div><dt>Store scope</dt><dd>{{ selected.storeScope || "-" }}</dd></div><div><dt>Resource version</dt><dd><code>{{ selected.targetSecretResourceVersion || "-" }}</code></dd></div><div><dt>Last updated</dt><dd>{{ displayDate(selected.lastUpdated) }}</dd></div><div><dt>Generated</dt><dd>{{ displayDate(summary?.generatedAt || "") }}</dd></div></dl>
+          </SectionFrame>
+          <SectionFrame title="安全边界" description="sourceRef/store → ExternalSecret → target Secret → consumer；不从运行面反解。"><p class="muted-box">本页不展示 Secret 值、原始 provider payload 或可逆凭据。Plan、事件、fingerprint 与原始诊断仅在授权详情层披露。</p><button class="table-action" type="button" @click="openSecret(selected)">打开详情 Inspector</button></SectionFrame>
+        </div>
+        <EmptyState v-else title="没有匹配对象" description="调整库存筛选。" />
+      </OperationsWorkspace>
     </AsyncBoundary>
   </section>
 </template>
 
 <style scoped>
-.secrets-admin-page { min-width: 0; }
-.secrets-compact-toolbar { border-color: #cbd6dc; border-radius: 8px; background: #17343c; color: #efffff; box-shadow: inset 3px 0 #21afa7; }
-.secrets-compact-toolbar small { color: #a9c9c7; }
-.secrets-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 170px auto auto; gap: 8px; align-items: end; border: 1px solid #cbd6dc; border-radius: 8px; background: #f4f7f8; padding: 9px 10px; }
-.secrets-filter-bar label { display: grid; gap: 4px; color: #60717a; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
-.secrets-filter-bar input,
-.secrets-filter-bar select { width: 100%; height: 34px; border: 1px solid #b8c5cc; border-radius: 6px; background: #fff; padding: 0 9px; color: #1c3038; }
-.secrets-filter-bar small { align-self: center; color: #667780; font: 750 10px/1 ui-monospace, monospace; }
-.secrets-view-toggle { display: inline-flex; padding: 2px; border: 1px solid #b8c5cc; border-radius: 7px; background: #e8eef0; }
-.secrets-view-toggle button { height: 28px; border: 0; border-radius: 5px; background: transparent; padding: 0 11px; color: #64757d; font-size: 10px; font-weight: 800; }
-.secrets-view-toggle button[data-active="true"] { background: #183b43; color: #fff; }
-.secrets-table-page { min-width: 0; box-shadow: inset 3px 0 #1ba39e; }
-.secrets-name-link { color: #176d6a; text-decoration: none; }
-.secrets-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 9px; padding: 10px; }
-.secret-card { display: grid; gap: 12px; min-width: 0; border: 1px solid #c7d3d8; border-radius: 8px; background: #fff; padding: 12px; color: #1c3038; text-decoration: none; box-shadow: inset 3px 0 #90a6ad; }
-.secret-card:hover { border-color: #1ba39e; box-shadow: inset 3px 0 #1ba39e, 0 4px 12px rgb(19 60 68 / 8%); }
-.secret-card header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
-.secret-card header > div { display: grid; min-width: 0; }
-.secret-card header strong,
-.secret-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.secret-card header small { color: #6b7c84; }
-.secret-glyph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: #dcefed; color: #126f6a; font: 900 10px/1 ui-monospace, monospace; }
-.secret-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
-.secret-card dl div { display: grid; gap: 3px; min-width: 0; border-top: 1px solid #e0e7e9; padding-top: 7px; }
-.secret-card dt { color: #708087; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
-.secret-card dd { overflow: hidden; margin: 0; font: 750 10px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
-.secret-card footer { display: flex; justify-content: space-between; gap: 8px; color: #677981; font-size: 10px; }
-.secret-card footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.secret-card footer strong { flex: none; color: #176d6a; }
-@media (max-width: 680px) {
-  .secrets-filter-bar { grid-template-columns: 1fr; }
-  .secrets-view-toggle { justify-self: stretch; }
-  .secrets-view-toggle button { flex: 1; }
-  .secrets-card-grid { grid-template-columns: 1fr; }
-}
+.secrets-operations { min-height: 610px; }
+.operations-search { display: grid; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
+.operations-search input { height: 34px; min-width: 0; border: 1px solid #b8c5cc; border-radius: 5px; padding: 0 9px; }
+.entity-index-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
+.entity-index-meta code { max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: #64757d; font-size: 10px; }
+.operations-main-stack { display: grid; gap: 14px; }
+.view-mode-row { display: flex; justify-content: flex-end; }
+.secret-compact-list { overflow: auto; }
+.secret-compact-list button { display: grid; grid-template-columns: minmax(190px, 1.4fr) 90px minmax(160px, 1fr) minmax(140px, 1fr) 70px; gap: 9px; width: 100%; min-width: 720px; align-items: center; border: 0; border-bottom: 1px solid #d8e1e4; padding: 9px 11px; background: white; color: inherit; text-align: left; cursor: pointer; }
+.secret-compact-list button:hover, .secret-compact-list button[data-selected="true"] { background: #e8f6f5; }
+.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: #d8e1e4; }
+.fact-grid div { min-width: 0; padding: 11px; background: white; }
+.fact-grid dt { color: #64757d; font-size: 10px; text-transform: uppercase; }
+.fact-grid dd { margin: 5px 0 0; overflow-wrap: anywhere; }
+@media (max-width: 640px) { .fact-grid { grid-template-columns: 1fr; } }
 </style>
diff --git a/web/hwlab-cloud-web/src/views/admin/UsersView.vue b/web/hwlab-cloud-web/src/views/admin/UsersView.vue
index e2eafda4..68279726 100644
--- a/web/hwlab-cloud-web/src/views/admin/UsersView.vue
+++ b/web/hwlab-cloud-web/src/views/admin/UsersView.vue
@@ -11,6 +11,7 @@ import type { DataGridColumn } from "@/components/common/DataGrid.vue";
 import EmptyState from "@/components/common/EmptyState.vue";
 import Pagination from "@/components/common/Pagination.vue";
 import ResourceCollection from "@/components/common/ResourceCollection.vue";
+import ConsoleIcon from "@/components/console/ConsoleIcon.vue";
 import PageCommandBar from "@/components/layout/PageCommandBar.vue";
 import type { AccessUserStatus, AdminBillingUserDetail, AdminBillingUserSummary, AdminUsageRow, ApiKeyRecord, AuthUser, BillingPlanDetail, ResourceEntitlementSummary, UsageLedgerRow, UsageReservationRow } from "@/types";
 
@@ -460,7 +461,7 @@ function metadataPreview(value: unknown): string {
           </DataGrid>
           <ResourceCollection v-else-if="users.length" :items="users" :item-key="userKey" view="cards" :selected-id="selectedUserId" :show-controls="false" aria-label="用户卡片" @select="(item) => selectUser(item.user?.id)">
             <template #card="{ item }"><article class="admin-user-card" :data-selected="selectedUserId === item.user?.id">
-              <span class="admin-user-glyph" aria-hidden="true">{{ item.user?.role === 'admin' ? 'AD' : 'US' }}</span>
+              <span class="admin-user-glyph" aria-hidden="true"><ConsoleIcon name="users" :size="19" /></span>
               <div class="admin-user-card-name"><strong>{{ item.user?.displayName || item.user?.username || item.user?.id }}</strong><small>{{ item.user?.email || item.user?.username }} · {{ item.planId ?? 'default' }}</small></div>
               <span class="status-pill" :data-status="item.user?.status">{{ item.user?.role }} / {{ item.user?.status }}</span>
               <dl><div><dt>Available</dt><dd>{{ formatNumber(item.credits?.available) }}<small>{{ formatNumber(item.credits?.balance) }} balance · {{ formatNumber(item.credits?.reserved) }} reserved</small></dd></div><div><dt>Usage</dt><dd>{{ formatNumber(item.usage?.totalCredits) }}<small>{{ formatNumber(item.usage?.recordCount) }} records</small></dd></div><div><dt>Keys</dt><dd>{{ formatNumber(item.apiKeys?.activeCount) }}<small>{{ formatNumber(item.apiKeys?.totalCount) }} total</small></dd></div></dl>