style(easy-mode): align onboarding heading typography

src/i18n/ja.ts

@@ -36,6 +36,9 @@ export const jaOverrides = {
   'app.close.exit': 'アプリを終了',
   'app.close.remember': 'この選択を記憶',
   'easyMode.steps.label': '接続ウィザードの手順',
+  'easyMode.steps.current': '{total} ステップ中 {current} ステップ目',
+  'easyMode.steps.step1Description': 'アカウントにログインするか API を接続',
+  'easyMode.steps.step2Description': 'クライアントとモデルを選んで起動',
   'easyMode.overview.coreTitle': '使い方',
   'easyMode.overview.providerTitle': 'モデルを接続',
   'easyMode.overview.agentTitle': 'エージェントを接続',

src/i18n/locales/en.ts

@@ -36,6 +36,9 @@ export const en: Record<MessageKey, string> = {
   'app.close.exit': 'Exit App',
   'app.close.remember': 'Remember this choice',
   'easyMode.steps.label': 'Connection wizard steps',
+  'easyMode.steps.current': 'Step {current} of {total}',
+  'easyMode.steps.step1Description': 'Sign in or connect an API',
+  'easyMode.steps.step2Description': 'Select a client and model, then start',
   'easyMode.overview.coreTitle': 'How to use',
   'easyMode.overview.providerTitle': 'Connect a model',
   'easyMode.overview.agentTitle': 'Connect an agent',

src/i18n/locales/zh-CN.ts

@@ -34,6 +34,9 @@ export const zhCN = {
   'app.close.exit': '退出程序',
   'app.close.remember': '记住选项',
   'easyMode.steps.label': '接入向导步骤',
+  'easyMode.steps.current': '第 {current} 步 / 共 {total} 步',
+  'easyMode.steps.step1Description': '先登录账号或接入 API',
+  'easyMode.steps.step2Description': '选择客户端和模型后启动',
   'easyMode.overview.coreTitle': '使用指导',
   'easyMode.overview.providerTitle': '接入模型',
   'easyMode.overview.agentTitle': '接入智能体',

src/pages/EasyModePage.tsx

@@ -390,8 +390,45 @@ export function EasyModePage({
     ];
   }, [apiSelectedModels, apiTestedModels]);
 
+  const setupStepStatus = t("easyMode.steps.current", {
+    current: activeStep,
+    total: 2,
+  });
+
   return (
     <section className="page simple-mode-page">
+      <nav className="simple-mode-step-status" aria-label={t("easyMode.steps.label")}>
+        <div className="simple-mode-step-status-heading">
+          <span>{t("easyMode.steps.label")}</span>
+          <strong>{setupStepStatus}</strong>
+        </div>
+        <div className="simple-mode-step-status-track">
+          <div
+            className={`simple-mode-step-status-item${activeStep === 1 ? " active" : " complete"}`}
+            aria-current={activeStep === 1 ? "step" : undefined}
+          >
+            <span className="simple-mode-step-status-number">
+              {activeStep > 1 ? <Check size={14} aria-hidden="true" /> : "1"}
+            </span>
+            <span className="simple-mode-step-status-copy">
+              <strong>{t("easyMode.overview.providerTitle")}</strong>
+              <small>{t("easyMode.steps.step1Description")}</small>
+            </span>
+          </div>
+          <span className={`simple-mode-step-status-connector${activeStep > 1 ? " complete" : ""}`} aria-hidden="true" />
+          <div
+            className={`simple-mode-step-status-item${activeStep === 2 ? " active" : ""}`}
+            aria-current={activeStep === 2 ? "step" : undefined}
+          >
+            <span className="simple-mode-step-status-number">2</span>
+            <span className="simple-mode-step-status-copy">
+              <strong>{t("easyMode.overview.agentTitle")}</strong>
+              <small>{t("easyMode.steps.step2Description")}</small>
+            </span>
+          </div>
+        </div>
+      </nav>
+
       {/* 第一步：接入模型 */}
       {activeStep === 1 ? (
         <section className="panel simple-mode-task">

src/styles.css

@@ -9982,6 +9982,21 @@ body.table-col-resizing * {
 }
 
 @media (max-width: 680px) {
+  .simple-mode-step-status-track {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .simple-mode-step-status-connector {
+    width: 1px;
+    height: 10px;
+    margin-left: 12px;
+  }
+
+  .simple-mode-step-status-copy small {
+    white-space: normal;
+  }
+
   .easy-mode-hero {
     flex-direction: column;
     gap: 14px;
@@ -10042,6 +10057,114 @@ body.table-col-resizing * {
   margin-inline: auto;
 }
 
+.simple-mode-step-status {
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-step-status-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+}
+
+.simple-mode-step-status-heading strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-step-status-track {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.simple-mode-step-status-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--theme-7a746c);
+}
+
+.simple-mode-step-status-item.active {
+  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db));
+  background: var(--ui-accent-soft);
+}
+
+.simple-mode-step-status-item.complete {
+  color: var(--theme-5f5a53);
+}
+
+.simple-mode-step-status-number {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  font-weight: 800;
+}
+
+.simple-mode-step-status-item.active .simple-mode-step-status-number {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: #ffffff;
+}
+
+.simple-mode-step-status-item.complete .simple-mode-step-status-number {
+  border-color: var(--theme-b6d3bd);
+  background: var(--theme-f1f8f1);
+  color: var(--theme-2f6b3a);
+}
+
+.simple-mode-step-status-copy {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.simple-mode-step-status-copy strong,
+.simple-mode-step-status-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-step-status-copy strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-step-status-copy small {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.simple-mode-step-status-connector {
+  height: 1px;
+  background: var(--theme-d5d2cb);
+}
+
+.simple-mode-step-status-connector.complete {
+  background: var(--theme-b6d3bd);
+}
+
 .simple-mode-core-alert {
   display: flex;
   align-items: center;
@@ -11565,6 +11688,8 @@ body.table-col-resizing * {
 }
 
 .agents-page-embedded .agent-embedded-header-copy h1 {
+  font-size: var(--font-size-panel-title);
+  line-height: var(--line-height-tight);
   white-space: normal;
 }