@morlay/ui-conversation-manager 0.1.4 → 0.1.6

package/src/client/ConversationManagerPage.tsx

@@ -1,17 +1,23 @@
 // 「对话管理」页面：已归档会话的搜索、取消归档、导出、删除，以及导入为新会话与孤儿数据 GC。
 // 数据面：会话行读**我们自己的**列表路由（注入面 listRows，含归档；搜索 / 子代理过滤 / 分页都在后端），
 // 动作面只读注入面。
+// 形态：页面框架与上游一级页面同款（960px 居中列 + 标题行 + 过滤 chip 行 + 搜索行，见
+// `ConversationManagerPage.module.css`）；切换与过滤都用那套 chip（`role="group"` + `aria-pressed`），
+// 读取 / 空语料 / 读列表失败三种状态整屏居中。
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   Button,
-  Checkbox,
+  IconCloseOutlineRegular,
   IconSearchOutlineRegular,
   Input,
   Modal,
+  Row,
+  Spinner,
+  Stack,
   Tag,
+  Text,
   relativeTime,
-} from "@deepseek-ai/dsh-client-ui-primitives";
-import { styling } from "@morlay/dsh-client-ui-primitives/client";
+} from "@morlay/dsh-client-ui-primitives";
 import type { InjectFace, PropsLocale, PropsRuntime } from "@deepseek-ai/dsh-client-ui-slots";
 import type { SessionId } from "@deepseek-ai/dsh-session";
 import {
@@ -23,8 +29,8 @@ import {
   type UsageRangeKey,
   type UsageTotals,
 } from "./controller.ts";
+import frameCss from "./ConversationManagerPage.module.css";
 import { formatCount, formatPercent, formatTokens } from "./format.ts";
-import { styles } from "./ConversationManagerPage.styles.ts";
 
 // 一页的行数（会话列表）。
 const PAGE_SIZE = 20;
@@ -69,6 +75,69 @@ function failureText(error: unknown, t: Translate): string {
   return t("failure.other", { reason: error instanceof Error ? error.message : String(error) });
 }
 
+// 过滤 chip：上游一级页面那套（28px 胶囊，选中那档带填充 + 主标签色）。语义是**筛选**：`role="group"` 的组里
+// 每个 chip 用 `aria-pressed` 说选中，不是 tab 条。
+function FilterChip({
+  active,
+  label,
+  tab,
+  onSelect,
+}: {
+  active: boolean;
+  label: string;
+  // `data-tab` 标注（沟通与 e2e 按它定位那一个 chip）。
+  tab?: string;
+  onSelect: () => void;
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      className={active ? `${frameCss.filterTab} ${frameCss.filterTabActive}` : frameCss.filterTab}
+      aria-pressed={active}
+      {...(tab === undefined ? {} : { "data-tab": tab })}
+      onClick={onSelect}
+    >
+      {label}
+    </button>
+  );
+}
+
+// 整屏居中的状态态：列表还没就绪 / 一份会话都没有 / 读列表失败。这三种时候页面没有别的内容可看，状态占满
+// 整个面板（`.status` 住 `ConversationManagerPage.module.css`），因此不画标题行、过滤行与搜索行。
+function PageStatus({
+  t,
+  status,
+  text,
+  spinner = false,
+  failure = false,
+}: {
+  t: Translate;
+  status: "loading" | "empty" | "failure";
+  text: string;
+  spinner?: boolean;
+  failure?: boolean;
+}): ReactNode {
+  return (
+    <section className={frameCss.page} aria-label={t("title")}>
+      <div className={frameCss.listPane}>
+        <div className={frameCss.status} data-status={status}>
+          <div className={frameCss.statusBody}>
+            {spinner ? <Spinner label={t("loading")} /> : null}
+            <p
+              className={
+                failure ? `${frameCss.statusText} ${frameCss.statusFailure}` : frameCss.statusText
+              }
+              {...(failure ? { role: "alert" } : {})}
+            >
+              {text}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export function ConversationManagerPage({
   t,
   listRows,
@@ -91,6 +160,7 @@ export function ConversationManagerPage({
   const [view, setView] = useState<PageView>("sessions");
   const [usageTab, setUsageTab] = useState<UsageTab>("overview");
   const [usageRange, setUsageRange] = useState<UsageRange>("day");
+  const [usageOnlySubagents, setUsageOnlySubagents] = useState(false);
   const [usage, setUsage] = useState<SessionUsageReport | null>(null);
   const [usageLoading, setUsageLoading] = useState(false);
   const [usageError, setUsageError] = useState<string | null>(null);
@@ -208,7 +278,11 @@ export function ConversationManagerPage({
   };
 
   if (rowsPage === null) {
-    return <p {...styling.props(styles.status)}>{rowsFailure ?? t("loading")}</p>;
+    return rowsFailure === null ? (
+      <PageStatus t={t} status="loading" text={t("loading")} spinner />
+    ) : (
+      <PageStatus t={t} status="failure" text={rowsFailure} failure />
+    );
   }
 
   const now = Date.now();
@@ -220,257 +294,298 @@ export function ConversationManagerPage({
   const matched = rows;
   const confirmed = confirming;
 
+  // 一份会话都没有（也没在搜索）：标题行与搜索行都没有可做的事，整个面板就让给这个状态。
+  if (total === 0 && settledQuery === "") {
+    return <PageStatus t={t} status="empty" text={t("empty")} />;
+  }
+
   return (
-    <div {...styling.props(styles.page)} data-view={view}>
-      <div {...styling.props(styles.header)}>
-        <h1 {...styling.props(styles.title)}>{t("title")}</h1>
-        <div {...styling.props(styles.tabs)} role="tablist">
-          <button
-            type="button"
-            role="tab"
-            data-tab="sessions"
-            aria-selected={view === "sessions"}
-            className={styling.className(styles.tab, view === "sessions" && styles.tabActive)}
-            onClick={() => {
-              setView("sessions");
-            }}
-          >
-            {t("view.sessions")}
-          </button>
-          <button
-            type="button"
-            role="tab"
-            data-tab="usage"
-            aria-selected={view === "usage"}
-            className={styling.className(styles.tab, view === "usage" && styles.tabActive)}
-            onClick={openUsage}
-          >
-            {t("view.usage")}
-          </button>
-        </div>
-        <div {...styling.props(styles.headerActions)}>
-          <Button
-            variant="outline"
-            size="sm"
-            data-action="import"
-            disabled={importing}
-            aria-busy={importing}
-            aria-label={importing ? t("importing") : t("import")}
-            onClick={() => {
-              fileRef.current?.click();
-            }}
-          >
-            {importing ? t("importing") : t("import")}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            data-action="gc"
-            disabled={gcPhase !== "idle"}
-            aria-label={t("gc.button")}
-            onClick={() => {
-              setFailure(null);
-              setNotice(null);
-              setGcPhase("confirm");
-            }}
-          >
-            {t("gc.button")}
-          </Button>
-        </div>
-        <input
-          ref={fileRef}
-          type="file"
-          accept=".zip,application/zip"
-          hidden
-          onChange={(event) => {
-            const file = event.currentTarget.files?.[0];
-            event.currentTarget.value = "";
-            if (file === undefined) return;
-            setImporting(true);
-            setFailure(null);
-            setNotice(null);
-            void importZip(file)
-              .then(
-                () => {
-                  setNotice(t("imported"));
-                },
-                (error: unknown) => {
-                  setFailure(failureText(error, t));
-                },
-              )
-              .finally(() => {
-                setImporting(false);
-              });
-          }}
-        />
-      </div>
-      {view === "usage" ? (
-        <div {...styling.props(styles.scroll)} data-scroll="page">
-          <UsageView
-            report={usage}
-            loading={usageLoading}
-            error={usageError}
-            tab={usageTab}
-            onTab={setUsageTab}
-            range={usageRange}
-            onRange={requestUsage}
-            t={t}
-          />
-        </div>
-      ) : (
-        <>
-          <div {...styling.props(styles.filters)}>
-            <Input
-              className={styling.className(styles.search)}
-              data-filter="search"
-              type="search"
-              icon={<IconSearchOutlineRegular />}
-              value={query}
-              placeholder={t("search")}
-              aria-label={t("search")}
-              onChange={(event) => {
-                setQuery(event.currentTarget.value);
-                setPage(1);
-              }}
-            />
-            <span data-filter="subagents">
-              <Checkbox
-                checked={showSubagents}
-                label={t("showSubagents")}
-                onChange={(next) => {
-                  setShowSubagents(next);
-                  setPage(1);
-                }}
-              />
-            </span>
-          </div>
-          <div {...styling.props(styles.scroll)} data-scroll="page">
-            {notice === null ? null : (
-              <p {...styling.props(styles.status)} data-notice="result">
-                {notice}
-              </p>
-            )}
-            {failure === null ? null : (
-              <p {...styling.props(styles.failure)} data-failure="result" role="alert">
-                {failure}
-              </p>
-            )}
-            {total === 0 ? (
-              <p {...styling.props(styles.status)} data-status="empty">
-                {t(settledQuery === "" ? "empty" : "emptySearch")}
-              </p>
-            ) : null}
-            {visible.length > 0 ? (
-              <ul {...styling.props(styles.list)}>
-                {visible.map((row) => (
-                  <li
-                    key={row.id}
-                    {...styling.props(styles.row)}
-                    data-session-id={String(row.id)}
-                    data-archived={row.archived ? "true" : "false"}
-                    data-subagent={row.subagent ? "true" : "false"}
-                  >
-                    <span {...styling.props(styles.identity)}>
-                      <span {...styling.props(styles.titleLine)}>
-                        <span {...styling.props(styles.rowTitle)}>{row.title}</span>
-                        {row.archived ? <Tag tone="neutral">{t("archived")}</Tag> : null}
-                        {row.subagent ? <Tag tone="quiet">{t("subagent")}</Tag> : null}
-                      </span>
-                      <span {...styling.props(styles.meta)}>
-                        {[row.workspace, timeLabel(row.updatedAt, now, t)].join(" · ")}
-                      </span>
-                    </span>
-                    <span {...styling.props(styles.actions)}>
-                      {row.archived ? (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          data-action="unarchive"
-                          aria-label={t("unarchiveNamed", { title: row.title })}
-                          onClick={() => {
-                            run(unarchive(row.id));
-                          }}
-                        >
-                          {t("unarchive")}
-                        </Button>
-                      ) : (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          data-action="archive"
-                          aria-label={t("archiveNamed", { title: row.title })}
-                          onClick={() => {
-                            run(archive(row.id));
-                          }}
-                        >
-                          {t("archive")}
-                        </Button>
-                      )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        data-action="export"
-                        aria-label={t("exportNamed", { title: row.title })}
-                        onClick={() => {
-                          run(exportZip(row.id));
-                        }}
-                      >
-                        {t("export")}
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        disabled={!row.archived}
-                        data-action="remove"
-                        aria-label={t("removeNamed", { title: row.title })}
-                        onClick={() => {
-                          setFailure(null);
-                          setNotice(null);
-                          setConfirming(row);
-                        }}
-                      >
-                        {t("remove")}
-                      </Button>
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-            {matched.length > 0 ? (
-              <div
-                {...styling.props(styles.pagination)}
-                data-pagination=""
-                data-page-current={currentPage}
-                data-page-total={pageCount}
-              >
+    <section className={frameCss.page} data-view={view} aria-label={t("title")}>
+      <div className={frameCss.listPane}>
+        <div className={frameCss.pageScroll} data-scroll="page">
+          <div className={frameCss.pageContent}>
+            <div className={frameCss.pageHeading}>
+              <h1>{t("title")}</h1>
+              <div className={frameCss.headingActions}>
                 <Button
-                  variant="ghost"
+                  variant="outline"
                   size="sm"
-                  disabled={currentPage <= 1}
+                  data-action="import"
+                  disabled={importing}
+                  aria-busy={importing}
+                  aria-label={importing ? t("importing") : t("import")}
                   onClick={() => {
-                    setPage(currentPage - 1);
+                    fileRef.current?.click();
                   }}
                 >
-                  {t("page.previous")}
+                  {importing ? t("importing") : t("import")}
                 </Button>
-                <span {...styling.props(styles.paginationLabel)}>
-                  {t("page.label", { page: currentPage, total: pageCount })}
-                </span>
                 <Button
-                  variant="ghost"
+                  variant="outline"
                   size="sm"
-                  disabled={currentPage >= pageCount}
+                  data-action="gc"
+                  disabled={gcPhase !== "idle"}
+                  aria-label={t("gc.button")}
                   onClick={() => {
-                    setPage(currentPage + 1);
+                    setFailure(null);
+                    setNotice(null);
+                    setGcPhase("confirm");
                   }}
                 >
-                  {t("page.next")}
+                  {t("gc.button")}
                 </Button>
               </div>
-            ) : null}
+            </div>
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".zip,application/zip"
+              hidden
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0];
+                event.currentTarget.value = "";
+                if (file === undefined) return;
+                setImporting(true);
+                setFailure(null);
+                setNotice(null);
+                void importZip(file)
+                  .then(
+                    () => {
+                      setNotice(t("imported"));
+                    },
+                    (error: unknown) => {
+                      setFailure(failureText(error, t));
+                    },
+                  )
+                  .finally(() => {
+                    setImporting(false);
+                  });
+              }}
+            />
+            <div className={frameCss.filters}>
+              <div
+                className={frameCss.filterTabs}
+                role="group"
+                aria-label={t("filter.view")}
+                data-filter="view"
+              >
+                <FilterChip
+                  active={view === "sessions"}
+                  label={t("view.sessions")}
+                  tab="sessions"
+                  onSelect={() => {
+                    setView("sessions");
+                  }}
+                />
+                <FilterChip
+                  active={view === "usage"}
+                  label={t("view.usage")}
+                  tab="usage"
+                  onSelect={openUsage}
+                />
+              </div>
+            </div>
+            {view === "usage" ? null : (
+              <div className={frameCss.filters}>
+                <div
+                  className={frameCss.filterTabs}
+                  role="group"
+                  aria-label={t("filter.subagents")}
+                  data-filter="subagents"
+                >
+                  <FilterChip
+                    active={showSubagents}
+                    label={t("showSubagents")}
+                    onSelect={() => {
+                      setShowSubagents(!showSubagents);
+                      setPage(1);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            {view === "usage" ? null : (
+              <div className={frameCss.searchField}>
+                <Input
+                  data-filter="search"
+                  type="search"
+                  icon={<IconSearchOutlineRegular />}
+                  value={query}
+                  placeholder={t("search")}
+                  aria-label={t("search")}
+                  onChange={(event) => {
+                    setQuery(event.currentTarget.value);
+                    setPage(1);
+                  }}
+                />
+                {query === "" ? null : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={frameCss.searchClear}
+                    aria-label={t("clearSearch")}
+                    onClick={() => {
+                      setQuery("");
+                      setPage(1);
+                    }}
+                  >
+                    <IconCloseOutlineRegular />
+                  </Button>
+                )}
+              </div>
+            )}
+            {view === "usage" ? (
+              <UsageView
+                report={usage}
+                loading={usageLoading}
+                error={usageError}
+                tab={usageTab}
+                onTab={setUsageTab}
+                range={usageRange}
+                onRange={requestUsage}
+                onlySubagents={usageOnlySubagents}
+                onOnlySubagents={setUsageOnlySubagents}
+                t={t}
+              />
+            ) : (
+              <div className={frameCss.list}>
+                {notice === null ? null : (
+                  <Text data-notice="result" as="p" size="md" tone="tertiary">
+                    {notice}
+                  </Text>
+                )}
+                {failure === null ? null : (
+                  <Text data-failure="result" role="alert" as="p" size="md" tone="danger">
+                    {failure}
+                  </Text>
+                )}
+                {total === 0 ? (
+                  <div className={frameCss.listStatus} data-status="empty-search">
+                    <p className={frameCss.statusText}>{t("emptySearch")}</p>
+                  </div>
+                ) : null}
+                {visible.length > 0 ? (
+                  <Stack as="ul" gap={4} plain>
+                    {visible.map((row) => (
+                      <Row
+                        as="li"
+                        key={row.id}
+                        gap={16}
+                        justify="between"
+                        boxed
+                        pad="row"
+                        fixed
+                        data-session-id={String(row.id)}
+                        data-archived={row.archived ? "true" : "false"}
+                        data-subagent={row.subagent ? "true" : "false"}
+                      >
+                        <Stack gap={2} grow>
+                          <Row gap={8} grow>
+                            <Text size="md" truncate>
+                              {row.title}
+                            </Text>
+                            {row.archived ? <Tag tone="neutral">{t("archived")}</Tag> : null}
+                            {row.subagent ? <Tag tone="quiet">{t("subagent")}</Tag> : null}
+                          </Row>
+                          <Text size="sm" tone="tertiary">
+                            {[row.workspace, timeLabel(row.updatedAt, now, t)].join(" · ")}
+                          </Text>
+                        </Stack>
+                        <Row gap={8} fixed>
+                          {row.archived ? (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              data-action="unarchive"
+                              aria-label={t("unarchiveNamed", { title: row.title })}
+                              onClick={() => {
+                                run(unarchive(row.id));
+                              }}
+                            >
+                              {t("unarchive")}
+                            </Button>
+                          ) : (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              data-action="archive"
+                              aria-label={t("archiveNamed", { title: row.title })}
+                              onClick={() => {
+                                run(archive(row.id));
+                              }}
+                            >
+                              {t("archive")}
+                            </Button>
+                          )}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            data-action="export"
+                            aria-label={t("exportNamed", { title: row.title })}
+                            onClick={() => {
+                              run(exportZip(row.id));
+                            }}
+                          >
+                            {t("export")}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            disabled={!row.archived}
+                            data-action="remove"
+                            aria-label={t("removeNamed", { title: row.title })}
+                            onClick={() => {
+                              setFailure(null);
+                              setNotice(null);
+                              setConfirming(row);
+                            }}
+                          >
+                            {t("remove")}
+                          </Button>
+                        </Row>
+                      </Row>
+                    ))}
+                  </Stack>
+                ) : null}
+                {matched.length > 0 ? (
+                  <Row
+                    data-pagination=""
+                    data-page-current={currentPage}
+                    data-page-total={pageCount}
+                    gap={8}
+                    justify="end"
+                    fixed
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      disabled={currentPage <= 1}
+                      onClick={() => {
+                        setPage(currentPage - 1);
+                      }}
+                    >
+                      {t("page.previous")}
+                    </Button>
+                    <Text size="sm" tone="tertiary" tabular>
+                      {t("page.label", { page: currentPage, total: pageCount })}
+                    </Text>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      disabled={currentPage >= pageCount}
+                      onClick={() => {
+                        setPage(currentPage + 1);
+                      }}
+                    >
+                      {t("page.next")}
+                    </Button>
+                  </Row>
+                ) : null}
+              </div>
+            )}
           </div>
-        </>
-      )}
+        </div>
+      </div>
       <Modal
         open={confirmed !== null}
         onClose={() => {
@@ -529,12 +644,14 @@ export function ConversationManagerPage({
       />
       {/* 运行期不给关闭手段：没有关闭按钮，mask 与 Escape 都只走空 onClose。 */}
       <Modal open={gcPhase === "running"} onClose={() => {}} headless title={t("gc.title")}>
-        <div {...styling.props(styles.blocking)}>
-          <span {...styling.props(styles.spinner)} aria-hidden="true" />
-          <p {...styling.props(styles.blockingText)}>{t("gc.running")}</p>
-        </div>
+        <Stack align="center" gap={14} pad="blocking">
+          <Spinner label={t("gc.running")} />
+          <Text as="p" size="md">
+            {t("gc.running")}
+          </Text>
+        </Stack>
       </Modal>
-    </div>
+    </section>
   );
 }
 
@@ -647,6 +764,8 @@ interface UsageListRow {
   key: string;
   label: string;
   totals: UsageTotals;
+  // 子代理派生会话的行（按会话维度才有此维度；其余维度不带标记）。
+  subagent?: boolean;
 }
 
 function emptyTotals(): UsageTotals {
@@ -663,7 +782,7 @@ function emptyTotals(): UsageTotals {
   };
 }
 
-// 把桶按一个键折叠成行并按用量降序（按天 / 按模型都用它）。
+// 把桶按一个键折叠成行并按用量降序（按模型维度用它：人类的桶与子代理的桶折进同一行）。
 function foldBuckets(
   buckets: readonly UsageBucket[],
   keyOf: (bucket: UsageBucket) => string,
@@ -684,43 +803,60 @@ function foldBuckets(
   );
 }
 
-// 一行用量：label 在上，下面是横向排布的单项。
+// 一行用量：label 在上（子代理行另带标记），下面是横向排布的单项。
 function UsageRow({
   rowKey,
   label,
   totals,
   t,
+  subagent,
   withActivity = true,
 }: {
   rowKey: string;
   label: string;
   totals: UsageTotals;
   t: Translate;
+  subagent?: boolean;
   withActivity?: boolean;
 }): ReactNode {
   return (
-    <li {...styling.props(styles.usageRow)} data-usage-key={rowKey}>
-      <span {...styling.props(styles.usageRowLabel)}>{label}</span>
-      <span {...styling.props(styles.usageMetrics)}>
+    <Stack
+      as="li"
+      gap={6}
+      boxed
+      pad="row"
+      fixed
+      data-usage-key={rowKey}
+      {...(subagent === undefined ? {} : { "data-subagent": subagent ? "true" : "false" })}
+    >
+      <Row gap={8} grow>
+        <Text size="sm" tone="tertiary" truncate>
+          {label}
+        </Text>
+        {subagent === true ? <Tag tone="quiet">{t("subagent")}</Tag> : null}
+      </Row>
+      <Row gap="wide" wrap>
         {usageMetrics(totals, t, { withActivity }).map((metric) => (
-          <span
+          <Stack
             key={metric.key}
-            {...styling.props(styles.usageMetric)}
             data-usage-cell={metric.key}
             data-usage-value={metric.value}
+            gap={2}
           >
-            <span {...styling.props(styles.usageMetricLabel)}>{metric.label}</span>
-            <span {...styling.props(styles.usageMetricValue)}>
+            <Text size="sm" tone="tertiary">
+              {metric.label}
+            </Text>
+            <Text size="lg" weight="medium" tabular>
               {metric.kind === "percent"
                 ? formatPercent(metric.value)
                 : metric.kind === "count"
                   ? formatCount(metric.value)
                   : formatTokens(metric.value)}
-            </span>
-          </span>
+            </Text>
+          </Stack>
         ))}
-      </span>
-    </li>
+      </Row>
+    </Stack>
   );
 }
 
@@ -735,13 +871,13 @@ function UsageList({
 }): ReactNode {
   if (rows.length === 0) {
     return (
-      <p {...styling.props(styles.status)} data-usage-status="empty">
+      <Text data-usage-status="empty" as="p" size="md" tone="tertiary">
         {t("usage.empty")}
-      </p>
+      </Text>
     );
   }
   return (
-    <ul {...styling.props(styles.usageList)}>
+    <Stack as="ul" gap={4} plain>
       {rows.map((row) => (
         <UsageRow
           key={row.key}
@@ -749,20 +885,21 @@ function UsageList({
           label={row.label}
           totals={row.totals}
           t={t}
+          {...(row.subagent === undefined ? {} : { subagent: row.subagent })}
           withActivity={withActivity}
         />
       ))}
-    </ul>
+    </Stack>
   );
 }
 
 // 总览：全部与「其中子代理」两行，与列表行同形。
 function UsageOverview({ report, t }: { report: SessionUsageReport; t: Translate }): ReactNode {
   return (
-    <ul {...styling.props(styles.usageList)}>
+    <Stack as="ul" gap={4} plain>
       <UsageRow rowKey="all" label={t("usage.all")} totals={report.totals} t={t} />
       <UsageRow rowKey="subagent" label={t("usage.subagentOnly")} totals={report.subagent} t={t} />
-    </ul>
+    </Stack>
   );
 }
 
@@ -775,6 +912,8 @@ function UsageView({
   onTab,
   range,
   onRange,
+  onlySubagents,
+  onOnlySubagents,
   t,
 }: {
   report: SessionUsageReport | null;
@@ -784,6 +923,8 @@ function UsageView({
   onTab: (tab: UsageTab) => void;
   range: UsageRange;
   onRange: (range: UsageRange) => void;
+  onlySubagents: boolean;
+  onOnlySubagents: (next: boolean) => void;
   t: Translate;
 }): ReactNode {
   const items: UsageTab[] = ["overview", "models", "sessions"];
@@ -802,64 +943,85 @@ function UsageView({
               `${bucket.provider ?? t("usage.unknownModel")} / ${bucket.model ?? t("usage.unknownModel")}`,
           )
         : report.sessions
+            // 子代理会话单个用量小，混排时会被行数上限挤掉：给一个只看它们的开关（过滤在本页，数据已全量在手）。
+            .filter((row) => !onlySubagents || row.subagent)
             .map((row) => ({
               key: row.sessionId,
               label: row.title ?? row.sessionId,
               totals: row,
+              subagent: row.subagent,
             }))
             .sort((left, right) => sortWeight(right.totals) - sortWeight(left.totals))
             .slice(0, USAGE_SESSION_ROWS);
   return (
-    <div {...styling.props(styles.usage)} data-usage-view={tab} data-usage-range={range}>
-      <div {...styling.props(styles.tabs)} role="radiogroup" aria-label={t("usage.range")}>
+    <Stack data-usage-view={tab} data-usage-range={range} gap={12} fixed>
+      <div
+        className={frameCss.filterTabs}
+        role="group"
+        aria-label={t("usage.range")}
+        data-filter="usage-range"
+      >
         {USAGE_RANGES.map((option) => (
-          <button
+          <FilterChip
             key={option}
-            type="button"
-            role="radio"
-            aria-checked={range === option}
-            data-range={option}
-            className={styling.className(styles.tab, range === option && styles.tabActive)}
-            onClick={() => {
+            active={option === range}
+            label={rangeLabel(option, t)}
+            tab={option}
+            onSelect={() => {
               onRange(option);
             }}
-          >
-            {rangeLabel(option, t)}
-          </button>
+          />
         ))}
       </div>
-      <div {...styling.props(styles.tabs)} role="tablist">
+      <div
+        className={frameCss.filterTabs}
+        role="group"
+        aria-label={t("usage.dimension")}
+        data-filter="usage-tabs"
+      >
         {items.map((item) => (
-          <button
+          <FilterChip
             key={item}
-            type="button"
-            role="tab"
-            data-usage-tab={item}
-            aria-selected={tab === item}
-            className={styling.className(styles.tab, tab === item && styles.tabActive)}
-            onClick={() => {
+            active={item === tab}
+            label={labels[item]}
+            tab={item}
+            onSelect={() => {
               onTab(item);
             }}
-          >
-            {labels[item]}
-          </button>
+          />
         ))}
       </div>
+      {tab === "sessions" ? (
+        <div
+          className={frameCss.filterTabs}
+          role="group"
+          aria-label={t("filter.subagents")}
+          data-filter="usage-subagents"
+        >
+          <FilterChip
+            active={onlySubagents}
+            label={t("usage.onlySubagents")}
+            onSelect={() => {
+              onOnlySubagents(!onlySubagents);
+            }}
+          />
+        </div>
+      ) : null}
       {loading ? (
-        <p {...styling.props(styles.status)} data-usage-status="loading">
+        <Text data-usage-status="loading" as="p" size="md" tone="tertiary">
           {t("usage.loading")}
-        </p>
+        </Text>
       ) : null}
       {error === null ? null : (
-        <p {...styling.props(styles.failure)} data-usage-status="error" role="alert">
+        <Text data-usage-status="error" role="alert" as="p" size="md" tone="danger">
           {error}
-        </p>
+        </Text>
       )}
       {report === null ? null : tab === "overview" ? (
         <UsageOverview report={report} t={t} />
       ) : (
         <UsageList rows={rows} t={t} withActivity={tab === "sessions"} />
       )}
-    </div>
+    </Stack>
   );
 }