@geminilight/mindos 0.6.53 → 0.6.54

package/app/components/agents/AgentsOverviewSection.tsx

@@ -4,7 +4,6 @@ import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import {
   AlertTriangle,
-  ArrowRight,
   Cable,
   ChevronDown,
   Globe,
@@ -62,6 +61,7 @@ export default function AgentsOverviewSection({
   mcpRunning,
   mcpPort,
   mcpToolCount,
+  mcpEnabled = true,
   enabledSkillCount,
   allAgents,
   pulseCopy,
@@ -73,12 +73,13 @@ export default function AgentsOverviewSection({
   mcpRunning: boolean;
   mcpPort: number | null;
   mcpToolCount: number;
+  mcpEnabled?: boolean;
   enabledSkillCount: number;
   allAgents: AgentInfo[];
   pulseCopy: PulseCopy;
   a2aCount?: number;
 }) {
-  const allHealthy = riskQueue.length === 0 && mcpRunning;
+  const allHealthy = riskQueue.length === 0 && (!mcpEnabled || mcpRunning);
   const [riskOpen, setRiskOpen] = useState(false);
 
   const sortedAgents = useMemo(
@@ -113,26 +114,20 @@ export default function AgentsOverviewSection({
             value={buckets.detected.length}
             tone={buckets.detected.length > 0 ? 'warn' : 'muted'}
           />
-          {buckets.notFound.length > 0 && (
-            <StatCell
-              icon={<AlertTriangle size={14} aria-hidden="true" />}
-              label={pulseCopy.notFound}
-              value={buckets.notFound.length}
-              tone="muted"
-            />
-          )}
           <StatCell
             icon={<Zap size={14} aria-hidden="true" />}
             label={pulseCopy.enabledSkills}
             value={enabledSkillCount}
             tone="ok"
           />
-          <StatCell
-            icon={<Server size={14} aria-hidden="true" />}
-            label={copy.pulseMcp as string}
-            value={mcpRunning ? `:${mcpPort}` : '—'}
-            tone={mcpRunning ? 'ok' : 'warn'}
-          />
+          {mcpEnabled && (
+            <StatCell
+              icon={<Server size={14} aria-hidden="true" />}
+              label={copy.pulseMcp as string}
+              value={mcpRunning ? `:${mcpPort}` : '—'}
+              tone={mcpRunning ? 'ok' : 'warn'}
+            />
+          )}
           {a2aCount != null && (
             <StatCell
               icon={<Globe size={14} aria-hidden="true" />}
@@ -144,26 +139,6 @@ export default function AgentsOverviewSection({
         </div>
       </section>
 
-      {/* ═══════════ QUICK NAVIGATION ═══════════ */}
-      <nav className="grid grid-cols-1 md:grid-cols-2 gap-3" aria-label="Quick navigation">
-        <QuickNavCard
-          href="/agents?tab=mcp"
-          icon={<Server size={18} aria-hidden="true" />}
-          title="MCP"
-          stat={mcpRunning ? copy.toolsUnit(mcpToolCount) : copy.mcpOffline}
-          statTone={mcpRunning ? 'ok' : 'warn'}
-          description={copy.nextActionHint as string}
-        />
-        <QuickNavCard
-          href="/agents?tab=skills"
-          icon={<Zap size={18} aria-hidden="true" />}
-          title="Skills"
-          stat={copy.enabledUnit(enabledSkillCount)}
-          statTone="ok"
-          description={`${pulseCopy.enabledSkills}: ${enabledSkillCount}`}
-        />
-      </nav>
-
       {/* ═══════════ RISK CAPSULE ═══════════ */}
       {riskQueue.length > 0 && (
         <div>
@@ -241,13 +216,13 @@ export default function AgentsOverviewSection({
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             {sortedAgents.map((agent, i) => (
-              <AgentCard key={agent.key} agent={agent} copy={copy} index={i} />
+              <AgentCard key={agent.key} agent={agent} copy={copy} index={i} mcpEnabled={mcpEnabled} />
             ))}
           </div>
         </section>
       ) : (
         <section
-          className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-12 text-center"
+          className="rounded-xl border border-border/40 bg-card/30 p-12 text-center"
           aria-label={copy.usagePulse}
         >
           <div className="w-14 h-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
@@ -316,69 +291,18 @@ function StatCell({
   );
 }
 
-/* ────────── Quick Nav Card ────────── */
-
-function QuickNavCard({
-  href,
-  icon,
-  title,
-  stat,
-  statTone,
-  description,
-}: {
-  href: string;
-  icon: React.ReactNode;
-  title: string;
-  stat: string;
-  statTone: 'ok' | 'warn';
-  description: string;
-}) {
-  return (
-    <Link
-      href={href}
-      className="group rounded-xl border border-border bg-card p-4 flex items-start gap-3.5
-        hover:border-[var(--amber)]/30 hover:shadow-[0_2px_12px_rgba(0,0,0,0.04)]
-        active:scale-[0.99]
-        transition-all duration-200
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <div className="shrink-0 w-10 h-10 rounded-xl bg-muted/50 flex items-center justify-center text-muted-foreground/70 group-hover:text-[var(--amber)] group-hover:bg-[var(--amber)]/[0.08] transition-all duration-200">
-        {icon}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-sm font-semibold text-foreground">{title}</span>
-          <span
-            className={`text-2xs px-2 py-0.5 rounded-full font-medium select-none ${
-              statTone === 'ok'
-                ? 'bg-muted text-muted-foreground'
-                : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
-            }`}
-          >
-            {stat}
-          </span>
-        </div>
-        <p className="text-xs text-muted-foreground/70 leading-relaxed line-clamp-2">{description}</p>
-      </div>
-      <ArrowRight
-        size={14}
-        className="shrink-0 mt-1.5 text-muted-foreground/20 group-hover:text-[var(--amber)] group-hover:translate-x-0.5 transition-all duration-200"
-        aria-hidden="true"
-      />
-    </Link>
-  );
-}
-
 /* ────────── Agent Card ────────── */
 
 function AgentCard({
   agent,
   copy,
   index,
+  mcpEnabled = true,
 }: {
   agent: AgentInfo;
   copy: OverviewCopy;
   index: number;
+  mcpEnabled?: boolean;
 }) {
   const status = resolveAgentStatus(agent);
   const mcpCount = agent.configuredMcpServerCount ?? agent.configuredMcpServers?.length ?? 0;
@@ -421,7 +345,9 @@ function AgentCard({
 
       {/* Metrics row */}
       <div className="flex items-center gap-1 pt-2.5 border-t border-border/40">
-        <MetricChip icon={<Server size={11} aria-hidden="true" />} value={mcpCount} label={copy.colMcp as string} />
+        {mcpEnabled && (
+          <MetricChip icon={<Server size={11} aria-hidden="true" />} value={mcpCount} label={copy.colMcp as string} />
+        )}
         <MetricChip icon={<Zap size={11} aria-hidden="true" />} value={skillCount} label={copy.colSkills as string} />
         <span className="flex-1 min-w-[4px]" />
         {hasRuntime && (

package/app/components/agents/AgentsPanelA2aTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import { Check, ChevronDown, ChevronUp, Clock, Code2, Download, Globe, Loader2, MessageSquare, Network, RefreshCw, RotateCcw, Save, Settings2, Trash2, Wifi, WifiOff, Wrench, Zap } from 'lucide-react';
+import { Check, ChevronDown, ChevronUp, Clock, Code2, Globe, Loader2, MessageSquare, Network, RefreshCw, RotateCcw, Save, Settings2, Trash2, Wifi, WifiOff, Wrench, Zap } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import { useAcpConfig } from '@/hooks/useAcpConfig';
 import type { RemoteAgent, DelegationRecord } from '@/lib/a2a/types';
@@ -60,7 +60,7 @@ export default function AgentsPanelA2aTab({
         <>
           {/* Remote A2A agent list */}
           {agents.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-8 text-center">
+            <div className="rounded-xl border border-border/40 bg-card/30 p-8 text-center">
               <div className="w-12 h-12 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-3">
                 <Globe size={20} className="text-muted-foreground/50" aria-hidden="true" />
               </div>
@@ -109,7 +109,7 @@ function NetworkEmptyState({
   const p = t.panels.agents;
 
   return (
-    <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-12 text-center">
+    <div className="rounded-xl border border-border/40 bg-card/30 p-12 text-center">
       <div className="w-14 h-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
         <Network size={22} className="text-muted-foreground/50" aria-hidden="true" />
       </div>
@@ -161,6 +161,7 @@ function AcpRegistrySection() {
   const acp = useAcpRegistry();
   const detection = useAcpDetection();
   const acpConfig = useAcpConfig();
+  const [showAvailable, setShowAvailable] = useState(false);
 
   if (acp.loading) {
     return (
@@ -198,7 +199,6 @@ function AcpRegistrySection() {
 
   if (acp.agents.length === 0) return null;
 
-  // Separate installed and not-installed agents
   const installedAgents: { agent: AcpRegistryEntry; info: { id: string; name: string; binaryPath: string } }[] = [];
   const notInstalledAgents: { agent: AcpRegistryEntry; installCmd: string | null; packageName: string | null }[] = [];
 
@@ -218,6 +218,7 @@ function AcpRegistrySection() {
 
   return (
     <div className="space-y-3">
+      {/* ── Installed Agents ── */}
       <div className="flex items-center justify-between">
         <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {p.acpSectionTitle}
@@ -232,43 +233,61 @@ function AcpRegistrySection() {
             <RefreshCw size={10} className={detection.loading ? 'animate-spin' : ''} />
             {p.acpScan}
           </button>
-          <span className="text-2xs text-muted-foreground/60">
-            {p.acpSectionDesc(acp.agents.length)}
-          </span>
+          {installedAgents.length > 0 && (
+            <span className="text-2xs text-muted-foreground/60">
+              {p.acpSectionDesc(installedAgents.length)}
+            </span>
+          )}
         </div>
       </div>
 
-      {/* Installed agents — prominent cards */}
-      {installedAgents.length > 0 && (
+      {installedAgents.length > 0 ? (
         <div className="space-y-2">
           {installedAgents.map(({ agent, info }) => (
             <AcpAgentCard
               key={agent.id}
               agent={agent}
               installed={info}
-              installCmd={null}
-              packageName={null}
               detectionDone={!detection.loading}
-              onInstalled={detection.refresh}
               acpConfig={acpConfig}
             />
           ))}
         </div>
-      )}
+      ) : !detection.loading ? (
+        <div className="rounded-lg border border-border/40 bg-card/30 p-5 text-center">
+          <p className="text-xs text-muted-foreground/70 leading-relaxed max-w-xs mx-auto">
+            {p.acpNoInstalled}
+          </p>
+        </div>
+      ) : null}
 
-      {/* Not-installed agents — compact rows grouped at bottom */}
-      {notInstalledAgents.length > 0 && (
-        <div className="space-y-1">
-          {notInstalledAgents.map(({ agent, installCmd, packageName }) => (
-            <AcpAgentCompactRow
-              key={agent.id}
-              agent={agent}
-              installCmd={installCmd}
-              packageName={packageName}
-              detectionDone={!detection.loading}
-              onInstalled={detection.refresh}
-            />
-          ))}
+      {/* ── Available (Not Installed) — collapsed by default, shown only after detection completes ── */}
+      {!detection.loading && notInstalledAgents.length > 0 && (
+        <div className="space-y-2">
+          <button
+            type="button"
+            onClick={() => setShowAvailable(v => !v)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground/70 hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            {showAvailable ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+            <span className="font-medium">{p.acpAvailableTitle}</span>
+            <span className="text-2xs">({p.acpAvailableDesc(notInstalledAgents.length)})</span>
+          </button>
+
+          {showAvailable && (
+            <div className="space-y-1 animate-in fade-in slide-in-from-top-1 duration-150">
+              {notInstalledAgents.map(({ agent, installCmd, packageName }) => (
+                <AcpAgentCompactRow
+                  key={agent.id}
+                  agent={agent}
+                  installCmd={installCmd}
+                  packageName={packageName}
+                  detectionDone={!detection.loading}
+                  onInstalled={detection.refresh}
+                />
+              ))}
+            </div>
+          )}
         </div>
       )}
     </div>
@@ -287,10 +306,7 @@ const TRANSPORT_STYLES: Record<string, string> = {
 function AcpAgentCard({ agent, installed, detectionDone, acpConfig }: {
   agent: AcpRegistryEntry;
   installed: { id: string; name: string; binaryPath: string; resolvedCommand?: { cmd: string; args: string[]; source: string } } | null;
-  installCmd: string | null;
-  packageName: string | null;
   detectionDone: boolean;
-  onInstalled: () => void;
   acpConfig: ReturnType<typeof useAcpConfig>;
 }) {
   const { t } = useLocale();
@@ -477,7 +493,7 @@ function AcpAgentCard({ agent, installed, detectionDone, acpConfig }: {
 
 /* ────────── ACP Agent Compact Row (Not Installed — subtle) ────────── */
 
-function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onInstalled }: {
+function AcpAgentCompactRow({ agent, installCmd }: {
   agent: AcpRegistryEntry;
   installCmd: string | null;
   packageName: string | null;
@@ -486,29 +502,17 @@ function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onI
 }) {
   const { t } = useLocale();
   const p = t.panels.agents;
-  const [installState, setInstallState] = useState<'idle' | 'installing' | 'done' | 'error'>('idle');
-
-  const handleInstall = async () => {
-    if (!packageName || installState === 'installing') return;
-    setInstallState('installing');
-    try {
-      const res = await fetch('/api/acp/install', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ agentId: agent.id, packageName }),
-      });
-      if (!res.ok) {
-        setInstallState('error');
-        return;
-      }
-      // Wait a bit for npm install to complete, then re-detect
-      await new Promise((r) => setTimeout(r, 8000));
-      onInstalled();
-      setInstallState('done');
-    } catch {
-      setInstallState('error');
-    }
-  };
+  const [copied, setCopied] = useState(false);
+
+  const effectiveCmd = installCmd || (agent.packageName ? `npm install -g ${agent.packageName}` : null);
+
+  const handleCopy = useCallback(() => {
+    if (!effectiveCmd) return;
+    navigator.clipboard.writeText(effectiveCmd).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }).catch(() => {});
+  }, [effectiveCmd]);
 
   return (
     <div className="group rounded-lg border border-border/60 bg-card/60 px-3 py-2 hover:border-border transition-all duration-150">
@@ -518,24 +522,21 @@ function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onI
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-xs text-muted-foreground truncate">{agent.name}</p>
+          {agent.description && (
+            <p className="text-2xs text-muted-foreground/50 truncate">{agent.description}</p>
+          )}
         </div>
-        {detectionDone && (
-          <span className="text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 bg-muted text-muted-foreground/60">
-            {p.acpNotInstalled}
-          </span>
-        )}
-        {detectionDone && packageName && (
+        {effectiveCmd && (
           <button
             type="button"
-            disabled={installState === 'installing'}
-            onClick={handleInstall}
-            className="inline-flex items-center gap-1 px-2 py-0.5 text-2xs font-medium rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-            title={installCmd ? p.acpInstallHint(installCmd) : undefined}
+            onClick={handleCopy}
+            className="inline-flex items-center gap-1 px-2 py-0.5 text-2xs font-medium rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
+            title={effectiveCmd}
           >
-            {installState === 'installing' ? (
-              <><Loader2 size={10} className="animate-spin" /> {p.acpInstalling}</>
+            {copied ? (
+              <><Check size={10} /> {p.acpCopied}</>
             ) : (
-              <><Download size={10} /> {p.acpInstall}</>
+              <><Code2 size={10} /> {p.acpCopyCmd}</>
             )}
           </button>
         )}

package/app/components/agents/AgentsPrimitives.tsx

@@ -119,7 +119,7 @@ export function BulkMessage({ message }: { message: string | null }) {
 
 export function EmptyState({ message, icon, className }: { message: string; icon?: React.ReactNode; className?: string }) {
   return (
-    <div className={`rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-10 text-center ${className ?? ''}`}>
+    <div className={`rounded-xl border border-border/40 bg-card/30 p-10 text-center ${className ?? ''}`}>
       {icon && (
         <div className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-3 text-muted-foreground/40">
           {icon}

package/app/components/agents/RecentActivityFeed.tsx

@@ -61,15 +61,15 @@ export default function RecentActivityFeed() {
 
   return (
     <section aria-label="Recent Activity">
-      <div className="flex items-center gap-2 mb-4">
-        <span className="text-[var(--amber)]"><Activity size={13} /></span>
-        <h2 className="text-sm font-semibold font-display text-foreground">
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Activity size={13} /></div>
+        <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
           {copy?.recentActivity ?? 'Recent Activity'}
         </h2>
         <div className="ml-auto">
           <Link
             href="/agents?tab=activity"
-            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors font-display"
+            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors"
           >
             <ArrowRight size={12} />
             <span>{copy?.viewAll ?? 'View all'}</span>
@@ -105,7 +105,7 @@ export default function RecentActivityFeed() {
 
               {/* agent name badge */}
               {op.agentName && (
-                <span className="text-[0.6rem] font-medium text-muted-foreground/70 bg-muted/60 px-1.5 py-0.5 rounded-full shrink-0 font-display" title={op.agentName}>
+                <span className="text-[0.6rem] font-medium text-muted-foreground/70 bg-muted/60 px-1.5 py-0.5 rounded-full shrink-0" title={op.agentName}>
                   {op.agentName.length > 20 ? op.agentName.slice(0, 20) + '...' : op.agentName}
                 </span>
               )}
@@ -115,7 +115,7 @@ export default function RecentActivityFeed() {
                 : <AlertCircle size={11} className="shrink-0 text-[var(--error)]/60" />
               }
 
-              <span className="text-2xs text-muted-foreground/40 tabular-nums shrink-0 font-display" title={op.ts}>
+              <span className="text-2xs text-muted-foreground/40 tabular-nums shrink-0" title={op.ts}>
                 {relativeTs(op.ts)}
               </span>
             </div>

package/app/components/agents/SkillDetailPopover.tsx

@@ -418,7 +418,7 @@ export default function SkillDetailPopover({
                 ))}
               </div>
             ) : (
-              <div className="rounded-lg border border-dashed border-border p-3 text-center">
+              <div className="rounded-lg border border-border/40 bg-card/30 p-3 text-center">
                 <p className="text-xs text-muted-foreground">{copy.noAgents}</p>
               </div>
             )}

package/app/components/agents/agents-content-model.ts

@@ -64,13 +64,15 @@ export interface RiskCopy {
 
 export function buildRiskQueue(args: {
   mcpRunning: boolean;
+  mcpEnabled: boolean;
   detectedCount: number;
   notFoundCount: number;
   allSkillsDisabled: boolean;
   copy: RiskCopy;
 }): RiskItem[] {
   const items: RiskItem[] = [];
-  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: args.copy.riskMcpStopped });
+  // Only show MCP-related risks if MCP is explicitly enabled
+  if (args.mcpEnabled && !args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: args.copy.riskMcpStopped });
   if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: args.copy.riskDetected(args.detectedCount) });
   if (args.allSkillsDisabled) items.push({ id: 'skills-disabled', severity: 'warn', title: args.copy.riskSkillsDisabled });
   return items;
@@ -188,6 +190,7 @@ const defaultRiskCopy: RiskCopy = {
 
 export function buildMcpRiskQueue(args: {
   mcpRunning: boolean;
+  mcpEnabled: boolean;
   detectedCount: number;
   notFoundCount: number;
 }): RiskItem[] {

package/app/components/ask/AskHeader.tsx

@@ -29,7 +29,7 @@ export default memo(function AskHeader({
       )}
       <div className="flex items-center gap-2 text-sm font-medium text-foreground">
         <Sparkles size={isPanel ? 14 : 15} className="text-[var(--amber)]" />
-        <span className={isPanel ? 'font-display text-xs uppercase tracking-wider text-muted-foreground' : 'font-display'}>
+        <span className={isPanel ? 'text-xs uppercase tracking-wider text-muted-foreground' : ''}>
           {isPanel ? 'MindOS Agent' : t.ask.title}
         </span>
       </div>

package/app/components/changes/ChangesContentPage.tsx

@@ -128,13 +128,17 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
     return t.changes.filters.system;
   }, [t]);
 
+  const opLabel = useCallback((op: string) => {
+    return (t.changes.operations as Record<string, string>)?.[op] ?? op;
+  }, [t]);
+
   return (
     <div className="min-h-screen">
       <div className="px-4 md:px-6 pt-6 md:pt-8">
         <div className="content-width xl:mr-[220px] rounded-xl border border-border bg-card px-4 py-3 md:px-5 md:py-4">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="min-w-0">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                 <History size={15} />
                 {t.changes.title}
               </div>
@@ -173,7 +177,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
           <div className="rounded-lg border border-border bg-card p-3">
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-2.5">
               <label className="block">
-                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.filePath}</span>
+                <span className="text-xs text-muted-foreground">{t.changes.filters.filePath}</span>
                 <input
                   value={pathFilter}
                   onChange={(e) => setPathFilter(e.target.value)}
@@ -182,7 +186,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                 />
               </label>
               <div className="block">
-                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.source}</span>
+                <span className="text-xs text-muted-foreground">{t.changes.filters.source}</span>
                 <CustomSelect
                   value={sourceFilter}
                   onChange={(v) => setSourceFilter(v as 'all' | 'agent' | 'user' | 'system')}
@@ -191,7 +195,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                 />
               </div>
               <div className="block">
-                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.operation}</span>
+                <span className="text-xs text-muted-foreground">{t.changes.filters.operation}</span>
                 <CustomSelect
                   value={opFilter}
                   onChange={setOpFilter}
@@ -200,7 +204,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                 />
               </div>
               <label className="block">
-                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.keyword}</span>
+                <span className="text-xs text-muted-foreground">{t.changes.filters.keyword}</span>
                 <input
                   value={queryFilter}
                   onChange={(e) => setQueryFilter(e.target.value)}
@@ -256,7 +260,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                         >
                           {event.path}
                         </span>
-                        <span className={opColorClass(event.op)}>{event.op}</span>
+                        <span className={opColorClass(event.op)}>{opLabel(event.op)}</span>
                         <span>·</span>
                         <span>{sourceLabel(event.source)}</span>
                         <span>·</span>

package/app/components/echo/EchoHero.tsx

@@ -30,7 +30,7 @@ export function EchoHero({
         <p className="mb-4 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber-text)]">
           {heroKicker}
         </p>
-        <h1 id={titleId} className="font-display text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
+        <h1 id={titleId} className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
           {pageTitle}
         </h1>
         <p className="mt-3 max-w-prose font-sans text-base leading-relaxed text-muted-foreground">{lead}</p>

package/app/components/echo/EchoPageSections.tsx

@@ -69,7 +69,7 @@ export function EchoContinuedGroups({
   footer?: ReactNode;
 }) {
   const cell = (label: string, icon: ReactNode) => (
-    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
+    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-border/40 bg-card/30 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
       <div className="flex items-center gap-2">
         <span className="shrink-0 text-muted-foreground" aria-hidden>{icon}</span>
         <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>

package/app/components/explore/ExploreContent.tsx

@@ -28,7 +28,7 @@ export default function ExploreContent() {
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-3">
           <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
-          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">
             {e.title}
           </h1>
         </div>

package/app/components/explore/UseCaseCard.tsx

@@ -37,7 +37,7 @@ export default function UseCaseCard({ icon, image, title, description, prompt, t
           {icon}
         </span>
         <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold font-display truncate text-foreground" title={title}>
+          <h3 className="text-sm font-semibold truncate text-foreground" title={title}>
             {title}
           </h3>
           <p className="text-xs leading-relaxed mt-1 line-clamp-2 text-muted-foreground" title={description}>

package/app/components/help/HelpContent.tsx

@@ -24,8 +24,8 @@ function Section({ id, icon, title, defaultOpen = false, children }: {
         className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
         aria-expanded={open}
       >
-        <span className="text-[var(--amber)]">{icon}</span>
-        <span className="text-base font-medium font-display text-foreground flex-1">{title}</span>
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)] shrink-0">{icon}</div>
+        <span className="text-[13px] font-semibold text-foreground flex-1 tracking-wide">{title}</span>
         <ChevronDown size={16} className={`text-muted-foreground transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
       </button>
       {open && (
@@ -186,7 +186,7 @@ export default function HelpContent() {
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-1">
           <div className="w-1 h-6 rounded-full bg-[var(--amber)]" />
-          <h1 className="text-2xl font-bold font-display text-foreground">{h.title}</h1>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">{h.title}</h1>
         </div>
         <p className="text-muted-foreground text-sm ml-3 mt-1">{h.subtitle}</p>
       </div>