@geminilight/mindos 0.5.52 → 0.5.55

package/README.md

@@ -40,7 +40,7 @@ MindOS is where you think, and where your AI agents act — a local-first knowle
 >
 > **✨ Try it now:** After installation, give these a try:
 > ```
-> Read my MindOS knowledge base, see what's inside, then help me write my self-introduction into Profile.
+> Here's my resume, read it and organize my info into MindOS.
 > ```
 > ```
 > Help me distill the experience from this conversation into MindOS as a reusable SOP.
@@ -51,19 +51,19 @@ MindOS is where you think, and where your AI agents act — a local-first knowle
 
 ## 🧠 Human-AI Shared Mind
 
-> No more fragmented memory, no more black-box behavior, no more lost experience.
+> You shape AI through thinking, AI empowers you through execution. Human and AI, growing together in one shared brain.
 
 **1. Global Sync — Breaking Memory Silos**
 
-Each Agent keeps its own memory — switching tools means manually hauling context. **MindOS lets all Agents share one knowledge base via MCP and Skills — record once, reuse everywhere.**
+Switch tools or start a new chat and you're re-transporting context, scattering knowledge. **With a built-in MCP server (20+ tools), MindOS connects all Agents to your core knowledge base with zero config. Record profile and project memory once to empower all AI tools.**
 
-**2. Transparent & Controllable — No More Black Boxes**
+**2. Transparent & Controllable — No Black Boxes**
 
-What did your Agent remember? Is it even correct? You have no way to know. **MindOS saves every read/write as local plain text — humans can audit, correct, and delete in the GUI.**
+Agent memory locked in black boxes makes reasoning unauditable, erasing trust as hallucinations compound. **MindOS saves every retrieval, reflection & action as local plain text. You hold absolute mind-correction rights with a full GUI to recalibrate Agents anytime.**
 
-**3. Symbiotic Evolution — Experience Flows Back as Instructions**
+**3. Symbiotic Evolution — Experience Flows Back As Instructions**
 
-All that experience from your conversations — gone the moment you close the window. **MindOS auto-distills conversation experience into Skills/SOPs. Notes are instructions. The knowledge base gets better with use.**
+You express preferences but the next chat starts from zero, leaving your thinking useless for AI. **MindOS auto-distills every thought into your knowledge base. Clarify your standards through interaction and sharpen your cognition with each iteration—AI will never repeat the same mistake.**
 
 > **Foundation:** Local-first by default — all data stays in local plain text for privacy, ownership, and speed.
 

package/README_zh.md

@@ -40,7 +40,7 @@ MindOS 是你思考的地方，也是 AI Agent 行动的起点——一个你和
 >
 > **✨ 立即体验：** 安装完成后，不妨试试：
 > ```
-> 读一下我的 MindOS 知识库，看看里面有什么，然后帮我把自我介绍写进 Profile。
+> 这是我的简历，读一下，把我的信息整理到 MindOS 里。
 > ```
 > ```
 > 帮我把这次对话的经验沉淀到 MindOS，形成一个可复用的工作流。
@@ -51,19 +51,19 @@ MindOS 是你思考的地方，也是 AI Agent 行动的起点——一个你和
 
 ## 🧠 人机共享心智
 
-> 记忆不再割裂，行为不再黑箱，经验不再断流。
+> 你在思考中塑造 AI，AI 在执行中反哺你。人和 AI，在同一个大脑里共同成长。
 
 **1. 全局同步 — 打破记忆割裂**
 
-多个 Agent 各记各的，切换工具靠人工搬运上下文。**MindOS 通过 MCP 和 Skill 让所有 Agent 共享同一份知识库——一处记录，全局复用。**
+切换工具带来上下文割裂，个人深度背景散落各处，导致知识无法复用。**MindOS 内置 MCP Server (支持 20+ 工具)，所有 Agent 零配置直连核心知识库。项目记忆与 SOP 仅需一处记录，全局赋能所有 AI 工具。**
 
 **2. 透明可控 — 消除记忆黑箱**
 
-Agent 记了什么、记对没有，用户无从知晓。**MindOS 将每次读写沉淀为本地纯文本，人类可在 GUI 中审查、修正、删除。**
+Agent 记忆锁在黑箱中，推理无法审查，错误极难纠正且幻觉持续累积。**MindOS 将每次检索与执行沉淀为本地纯文本，提供完整的审查干预界面，人类拥有绝对的心智纠偏权，随时校准 Agent 行为。**
 
 **3. 共生演进 — 经验回流为指令**
 
-对话里攒下的经验，关掉窗口就散了。**MindOS 自动将对话经验沉淀为 Skill/SOP，笔记即指令，知识库越用越好。**
+反复表达偏好但新对话又从零开始，思考未变成 AI 的能力与自身的方法论。**MindOS 将每次思考自动沉淀为知识库。在交互中厘清想法与标准，下次应对更默契拒绝重复犯错，认知随每次沉淀变得锐利。**
 
 > **底层原则：** 默认本地优先，全部数据以本地纯文本保存，兼顾隐私、主权与性能。
 

package/app/app/echo/[segment]/page.tsx

@@ -0,0 +1,15 @@
+import { notFound } from 'next/navigation';
+import { isEchoSegment } from '@/lib/echo-segments';
+import EchoSegmentPageClient from '@/components/echo/EchoSegmentPageClient';
+
+interface PageProps {
+  params: Promise<{ segment: string }>;
+}
+
+export default async function EchoSegmentPage({ params }: PageProps) {
+  const { segment } = await params;
+  if (!isEchoSegment(segment)) {
+    notFound();
+  }
+  return <EchoSegmentPageClient segment={segment} />;
+}

package/app/app/echo/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+import { defaultEchoSegment } from '@/lib/echo-segments';
+
+export default function EchoIndexPage() {
+  redirect(`/echo/${defaultEchoSegment()}`);
+}

package/app/components/ActivityBar.tsx

@@ -2,13 +2,13 @@
 
 import { useRef, useCallback, useState, useEffect } from 'react';
 import Link from 'next/link';
-import { FolderTree, Search, Settings, RefreshCw, Blocks, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { FolderTree, Search, Settings, RefreshCw, Blocks, Bot, Compass, HelpCircle, ChevronLeft, ChevronRight, Radio } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { DOT_COLORS, getStatusLevel } from './SyncStatusBar';
 import type { SyncStatus } from './settings/SyncTab';
 import Logo from './Logo';
 
-export type PanelId = 'files' | 'search' | 'plugins' | 'agents' | 'discover';
+export type PanelId = 'files' | 'search' | 'echo' | 'plugins' | 'agents' | 'discover';
 
 export const RAIL_WIDTH_COLLAPSED = 48;
 export const RAIL_WIDTH_EXPANDED = 180;
@@ -157,6 +157,7 @@ export default function ActivityBar({
         {/* ── Middle: Core panel toggles ── */}
         <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
           <RailButton icon={<FolderTree size={18} />} label={t.sidebar.files} active={activePanel === 'files'} expanded={expanded} onClick={() => toggle('files')} walkthroughId="files-panel" />
+          <RailButton icon={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => toggle('echo')} />
           <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} walkthroughId="search-button" />
           <RailButton icon={<Blocks size={18} />} label={t.sidebar.plugins} active={activePanel === 'plugins'} expanded={expanded} onClick={() => toggle('plugins')} />
           <RailButton icon={<Bot size={18} />} label={t.sidebar.agents} active={activePanel === 'agents'} expanded={expanded} onClick={() => toggle('agents')} />

package/app/components/Panel.tsx

@@ -26,6 +26,7 @@ function getMaxDepth(nodes: FileNode[], current = 0): number {
 const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   files: 280,
   search: 280,
+  echo: 280,
   plugins: 280,
   agents: 280,
   discover: 280,

package/app/components/RightAgentDetailPanel.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useMemo, useEffect } from 'react';
+import { useMcpData } from '@/hooks/useMcpData';
+import { useLocale } from '@/lib/LocaleContext';
+import { useResizeDrag } from '@/hooks/useResizeDrag';
+import AgentsPanelAgentDetail from '@/components/panels/AgentsPanelAgentDetail';
+import { resolveAgentDetailStatus } from '@/components/panels/agents-panel-resolve-status';
+
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 300;
+const MAX_WIDTH_ABS = 640;
+const MAX_WIDTH_RATIO = 0.42;
+
+interface RightAgentDetailPanelProps {
+  open: boolean;
+  agentKey: string | null;
+  onClose: () => void;
+  /** Right offset in px when Ask panel is open (stack panels side-by-side). */
+  rightOffset: number;
+  width: number;
+  onWidthChange: (w: number) => void;
+  onWidthCommit: (w: number) => void;
+}
+
+export default function RightAgentDetailPanel({
+  open,
+  agentKey,
+  onClose,
+  rightOffset,
+  width,
+  onWidthChange,
+  onWidthCommit,
+}: RightAgentDetailPanelProps) {
+  const mcp = useMcpData();
+  const { t } = useLocale();
+  const p = t.panels.agents;
+
+  const connected = mcp.agents.filter(a => a.present && a.installed);
+  const detected = mcp.agents.filter(a => a.present && !a.installed);
+  const notFound = mcp.agents.filter(a => !a.present);
+
+  const resolved = useMemo(() => {
+    if (!agentKey) return null;
+    const agent = mcp.agents.find(a => a.key === agentKey);
+    if (!agent) return null;
+    const status = resolveAgentDetailStatus(agentKey, connected, detected, notFound);
+    if (!status) return null;
+    return { agent, status };
+  }, [agentKey, mcp.agents, connected, detected, notFound]);
+
+  useEffect(() => {
+    if (agentKey && !resolved) {
+      const id = requestAnimationFrame(() => onClose());
+      return () => cancelAnimationFrame(id);
+    }
+  }, [agentKey, resolved, onClose]);
+
+  const handleMouseDown = useResizeDrag({
+    width,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH_ABS,
+    maxWidthRatio: MAX_WIDTH_RATIO,
+    direction: 'left',
+    onResize: onWidthChange,
+    onResizeEnd: onWidthCommit,
+  });
+
+  const detailCopy = {
+    connected: p.connected,
+    installing: p.installing,
+    install: p.install,
+    copyConfig: p.copyConfig,
+    copied: p.copied,
+    transportLocal: p.transportLocal,
+    transportRemote: p.transportRemote,
+    configPath: p.configPath,
+    notFoundDetail: p.notFoundDetail,
+    backToList: p.backToList,
+    closeDetail: p.closeAgentDetail,
+    agentDetailTransport: p.agentDetailTransport,
+    agentDetailSnippet: p.agentDetailSnippet,
+  };
+
+  return (
+    <aside
+      className={`
+        hidden md:flex fixed top-0 h-screen z-[31] flex-col bg-card border-l border-border shadow-sm
+        transition-transform duration-200 ease-out
+        ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
+      `}
+      style={{ width: `${width}px`, right: `${rightOffset}px` }}
+      role="complementary"
+      aria-label={p.agentDetailPanelAria}
+      aria-hidden={!open || !resolved}
+    >
+      {resolved && (
+        <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+          <AgentsPanelAgentDetail
+            agent={resolved.agent}
+            agentStatus={resolved.status}
+            mcpStatus={mcp.status}
+            onBack={onClose}
+            onInstallAgent={mcp.installAgent}
+            copy={detailCopy}
+            headerVariant="dock"
+          />
+        </div>
+      )}
+
+      <div
+        className="absolute top-0 -left-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
+        onMouseDown={handleMouseDown}
+      >
+        <div className="absolute left-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-[var(--amber)]/50 transition-opacity" />
+      </div>
+    </aside>
+  );
+}
+
+export { DEFAULT_WIDTH as RIGHT_AGENT_DETAIL_DEFAULT_WIDTH, MIN_WIDTH as RIGHT_AGENT_DETAIL_MIN_WIDTH, MAX_WIDTH_ABS as RIGHT_AGENT_DETAIL_MAX_WIDTH };

package/app/components/RightAskPanel.tsx

@@ -40,7 +40,7 @@ export default function RightAskPanel({
   return (
     <aside
       className={`
-        hidden md:flex fixed top-0 right-0 h-screen z-30
+        hidden md:flex fixed top-0 right-0 h-screen z-40
         flex-col bg-card border-l border-border
         transition-transform duration-200 ease-out
         ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
@@ -61,16 +61,19 @@ export default function RightAskPanel({
           </button>
         </div>
       }>
-        <AskContent
-          visible={open}
-          variant="panel"
-          currentFile={open ? currentFile : undefined}
-          initialMessage={initialMessage}
-          onFirstMessage={onFirstMessage}
-          onClose={onClose}
-          askMode={askMode}
-          onModeSwitch={onModeSwitch}
-        />
+        {/* Flex column + min-h-0 so MessageList flex-1 gets a bounded height (fragment children are direct flex items) */}
+        <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden">
+          <AskContent
+            visible={open}
+            variant="panel"
+            currentFile={open ? currentFile : undefined}
+            initialMessage={initialMessage}
+            onFirstMessage={onFirstMessage}
+            onClose={onClose}
+            askMode={askMode}
+            onModeSwitch={onModeSwitch}
+          />
+        </div>
       </ErrorBoundary>
 
       {/* Drag resize handle — LEFT edge */}

package/app/components/SidebarLayout.tsx

@@ -12,7 +12,13 @@ import SearchPanel from './panels/SearchPanel';
 import PluginsPanel from './panels/PluginsPanel';
 import AgentsPanel from './panels/AgentsPanel';
 import DiscoverPanel from './panels/DiscoverPanel';
+import EchoPanel from './panels/EchoPanel';
 import RightAskPanel from './RightAskPanel';
+import RightAgentDetailPanel, {
+  RIGHT_AGENT_DETAIL_DEFAULT_WIDTH,
+  RIGHT_AGENT_DETAIL_MIN_WIDTH,
+  RIGHT_AGENT_DETAIL_MAX_WIDTH,
+} from './RightAgentDetailPanel';
 import AskFab from './AskFab';
 import SyncPopover from './panels/SyncPopover';
 import SearchModal from './SearchModal';
@@ -48,6 +54,20 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   const [syncPopoverOpen, setSyncPopoverOpen] = useState(false);
   const [syncAnchorRect, setSyncAnchorRect] = useState<DOMRect | null>(null);
 
+  // ── Agent MCP detail (right dock, does not replace left Agents list) ──
+  const [agentDetailKey, setAgentDetailKey] = useState<string | null>(null);
+  const [agentDetailWidth, setAgentDetailWidth] = useState(() => {
+    if (typeof window === 'undefined') return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
+    try {
+      const stored = localStorage.getItem('right-agent-detail-panel-width');
+      if (stored) {
+        const w = parseInt(stored, 10);
+        if (w >= RIGHT_AGENT_DETAIL_MIN_WIDTH && w <= RIGHT_AGENT_DETAIL_MAX_WIDTH) return w;
+      }
+    } catch { /* ignore */ }
+    return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
+  });
+
   // ── Mobile state ──
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
@@ -90,7 +110,28 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   }, [ap.askOpenSource]);
 
   // Close mobile drawer on route change
-  useEffect(() => { setMobileOpen(false); }, [pathname]);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setMobileOpen(false));
+    return () => cancelAnimationFrame(id);
+  }, [pathname]);
+
+  // Deep-link Echo routes: keep left Echo panel aligned with URL
+  useEffect(() => {
+    if (pathname?.startsWith('/echo')) {
+      lp.setActivePanel('echo');
+    }
+  }, [pathname, lp.setActivePanel]);
+
+  const handleAgentDetailWidthCommit = useCallback((w: number) => {
+    setAgentDetailWidth(w);
+    try {
+      localStorage.setItem('right-agent-detail-panel-width', String(w));
+    } catch { /* ignore */ }
+  }, []);
+
+  const closeAgentDetailPanel = useCallback(() => setAgentDetailKey(null), []);
+
+  const agentDockOpen = agentDetailKey !== null && lp.activePanel === 'agents';
 
   // Refresh file tree periodically
   useEffect(() => {
@@ -112,6 +153,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         if (lp.panelMaximized) { lp.handlePanelMaximize(); return; }
+        if (agentDockOpen) { setAgentDetailKey(null); return; }
         if (ap.askPanelOpen) { ap.closeAskPanel(); return; }
         if (ap.desktopAskPopupOpen) { ap.closeDesktopAskPopup(); return; }
       }
@@ -138,7 +180,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [lp.panelMaximized, ap.askPanelOpen, ap.desktopAskPopupOpen, ap.toggleAskPanel, lp]);
+  }, [agentDockOpen, lp, ap]);
 
   // ── Settings helpers ──
   const openSyncSettings = useCallback(() => {
@@ -208,6 +250,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         maximized={lp.panelMaximized}
         onMaximize={lp.handlePanelMaximize}
       >
+        <div className={`flex flex-col h-full ${lp.activePanel === 'echo' ? '' : 'hidden'}`}>
+          <EchoPanel active={lp.activePanel === 'echo'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
+        </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
           <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
@@ -215,7 +260,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           <PluginsPanel active={lp.activePanel === 'plugins'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
-          <AgentsPanel active={lp.activePanel === 'agents'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
+          <AgentsPanel
+            active={lp.activePanel === 'agents'}
+            maximized={lp.panelMaximized}
+            onMaximize={lp.handlePanelMaximize}
+            selectedAgentKey={agentDockOpen ? agentDetailKey : null}
+            onOpenAgentDetail={setAgentDetailKey}
+          />
         </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'discover' ? '' : 'hidden'}`}>
           <DiscoverPanel active={lp.activePanel === 'discover'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
@@ -236,6 +287,16 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onModeSwitch={ap.handleAskModeSwitch}
       />
 
+      <RightAgentDetailPanel
+        open={agentDockOpen}
+        agentKey={agentDetailKey}
+        onClose={closeAgentDetailPanel}
+        rightOffset={ap.askPanelOpen ? ap.askPanelWidth : 0}
+        width={agentDetailWidth}
+        onWidthChange={setAgentDetailWidth}
+        onWidthCommit={handleAgentDetailWidthCommit}
+      />
+
       <AskModal
         open={ap.desktopAskPopupOpen}
         onClose={ap.closeDesktopAskPopup}
@@ -308,10 +369,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
       <style>{`
         @media (min-width: 768px) {
-          :root { --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px; }
+          :root {
+            --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px;
+            --right-agent-detail-width: ${agentDockOpen ? agentDetailWidth : 0}px;
+          }
           #main-content {
             padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
-            padding-right: var(--right-panel-width) !important;
+            padding-right: calc(var(--right-panel-width) + var(--right-agent-detail-width)) !important;
             padding-top: 0 !important;
           }
         }

package/app/components/ask/AskContent.tsx

@@ -12,6 +12,7 @@ import MentionPopover from '@/components/ask/MentionPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
+import { cn } from '@/lib/utils';
 
 interface AskContentProps {
   /** Controls visibility — 'open' for modal, 'active' for panel */
@@ -414,8 +415,15 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         </form>
       </div>
 
-      {/* Footer hints */}
-      <div className={`${isPanel ? 'px-3 pb-1.5' : 'hidden md:flex px-4 pb-2'} flex items-center gap-${isPanel ? '2' : '3'} text-${isPanel ? '[10px]' : 'xs'} text-muted-foreground/${isPanel ? '40' : '50'} shrink-0`}>
+      {/* Footer hints — use full class strings so Tailwind JIT includes utilities */}
+      <div
+        className={cn(
+          'flex shrink-0 items-center',
+          isPanel
+            ? 'gap-2 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
+            : 'hidden gap-3 px-4 pb-2 text-xs text-muted-foreground/50 md:flex',
+        )}
+      >
         <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
         <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
         {!isPanel && <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>}

package/app/components/echo/EchoHero.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import Link from 'next/link';
+
+/**
+ * Echo page hero: kicker, minimal breadcrumb (parent only — h1 holds the section title),
+ * lead. Avoids repeating the current segment name in both breadcrumb and h1.
+ */
+export function EchoHero({
+  breadcrumbNav,
+  parentHref,
+  parent,
+  heroKicker,
+  pageTitle,
+  lead,
+  titleId,
+}: {
+  breadcrumbNav: string;
+  parentHref: string;
+  parent: string;
+  heroKicker: string;
+  pageTitle: string;
+  lead: string;
+  titleId: string;
+}) {
+  return (
+    <header className="relative overflow-hidden rounded-xl border border-border bg-card px-5 py-6 shadow-sm sm:px-8 sm:py-8">
+      <div
+        className="absolute bottom-5 left-0 top-5 w-0.5 rounded-full bg-[var(--amber)] sm:bottom-6 sm:top-6"
+        aria-hidden
+      />
+      <div className="relative pl-4 sm:pl-5">
+        <p className="mb-3 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber)]">
+          {heroKicker}
+        </p>
+        <nav aria-label={breadcrumbNav} className="mb-5 font-sans text-sm">
+          <ol className="m-0 list-none p-0">
+            <li>
+              <Link
+                href={parentHref}
+                className="text-muted-foreground transition-colors duration-150 hover:text-[var(--amber)] focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {parent}
+              </Link>
+            </li>
+          </ol>
+        </nav>
+        <h1 id={titleId} className="font-display 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>
+      </div>
+    </header>
+  );
+}