@steerable/agent-shell-web 0.6.27 → 0.6.28

package/src/pages/SettingsPage.tsx

@@ -59,8 +59,8 @@ export function SettingsPage() {
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <header className="flex h-12 flex-shrink-0 items-center justify-between gap-3 border-b border-agent-border px-5">
-        <h1 className="text-sm font-semibold text-agent-foreground">{title}</h1>
+      <header className="flex h-9 flex-shrink-0 items-center justify-between gap-2 border-b border-agent-border px-2.5">
+        <h1 className="text-xs font-semibold text-agent-foreground">{title}</h1>
         {section === 'general' && (
           <SettingsSaveButton
             testId="settings-header-save"
@@ -73,7 +73,7 @@ export function SettingsPage() {
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl space-y-8 px-6 py-6">
+        <div className="mx-auto max-w-3xl space-y-4 px-3 py-3">
           {!isElectron() && (
             <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
               浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
@@ -81,9 +81,9 @@ export function SettingsPage() {
           )}
 
           {section === 'skills' && (
-            <section className="space-y-3" data-testid="settings-section-skills">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuBlocks className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-skills">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 本地技能
               </h2>
               <SkillsSettingsPanel />
@@ -91,9 +91,9 @@ export function SettingsPage() {
           )}
 
           {section === 'mcp' && (
-            <section className="space-y-3" data-testid="settings-section-mcp">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuPlug className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-mcp">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 MCP 服务
               </h2>
               <McpSettingsPanel />
@@ -101,9 +101,9 @@ export function SettingsPage() {
           )}
 
           {section === 'agents' && (
-            <section className="space-y-3" data-testid="settings-section-agents">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuBot className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-agents">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuBot className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 智能体
               </h2>
               <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
@@ -112,17 +112,17 @@ export function SettingsPage() {
 
           {section === 'general' && (
             <>
-              <section className="space-y-3" data-testid="settings-section-appearance">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuMonitor className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-appearance">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuMonitor className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   界面
                 </h2>
                 <AppearanceSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-llm">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuSettings className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-llm">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   本地模型设置
                 </h2>
                 <LlmSettingsPanel
@@ -132,49 +132,49 @@ export function SettingsPage() {
                 />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-web-search">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuSearch className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-web-search">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   网络搜索
                 </h2>
                 <WebSearchSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-usage">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-usage">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   用量与成本
                 </h2>
                 <UsagePanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-diagnose">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuNetwork className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-diagnose">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuNetwork className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   链路诊断
                 </h2>
                 <DiagnoseSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-security">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuShieldCheck className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-security">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   安全
                 </h2>
                 <SecuritySettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-insights">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-insights">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   帮助改进产品
                 </h2>
                 <InsightsSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-telemetry">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuActivity className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-telemetry">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuActivity className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   遥测(OTLP)
                 </h2>
                 <TelemetrySettingsPanel />
@@ -185,12 +185,12 @@ export function SettingsPage() {
               {getPackSettingsPanels().map((panel) => (
                 <section
                   key={panel.panelId}
-                  className="space-y-3"
+                  className="space-y-2"
                   data-testid={`settings-section-${panel.panelId}`}
                 >
-                  <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     {panel.Icon ? (
-                      <panel.Icon className="h-4 w-4 text-agent-muted-foreground" />
+                      <panel.Icon className="h-3.5 w-3.5 text-agent-muted-foreground" />
                     ) : null}
                     {panel.title}
                   </h2>

package/src/styles/index.css

@@ -58,8 +58,8 @@ body {
   margin: 0;
   font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 /*
@@ -87,6 +87,16 @@ body {
   white-space: nowrap;
 }
 
+/* 12px 字号下收紧工具行：框架卡默认还是 px-3 py-2。 */
+.steerable-tool-execution > button {
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+}
+
+.steerable-tool-execution > button + div {
+  padding: 0.375rem 0.625rem;
+}
+
 /*
  * ChatInput overlay: the contenteditable must keep a real text fill.
  * macOS Pinyin inspects fill during the first letter's keydown — before