docs: add agent preview conversation to homepage hero

Author: os-zhuang

apps/docs/app/[lang]/page.tsx

@@ -126,7 +126,7 @@ export default async function HomePage({
             cta={t.hero.cta}
             quickStart={t.hero.quickStart}
           />
-          <CodePreview />
+          <CodePreview t={t.agentPreview} />
         </section>
 
         {/* Deploy Modes */}

apps/docs/components/code-preview.tsx

@@ -1,24 +1,26 @@
 import { cn } from '@/lib/utils';
+import type { HomepageTranslations } from '@/lib/homepage-i18n';
 
 interface CodePreviewProps {
   className?: string;
+  t: HomepageTranslations['agentPreview'];
 }
 
 /**
- * Homepage code preview.
+ * Homepage hero preview.
  *
- * Shows a real docker-compose.yml that an enterprise operator can copy,
- * paste, and run to bring ObjectOS up against their own database in a
- * single command. Replaces the previous developer-flavored object
- * definition snippet.
+ * An end-user conversation with an ObjectOS Agent — querying, analyzing,
+ * and acting on live business data through natural language.
  */
-export function CodePreview({ className }: CodePreviewProps) {
-  const kw = 'text-purple-600 dark:text-purple-400 font-semibold';
-  const str = 'text-green-600 dark:text-green-300';
-  const num = 'text-amber-600 dark:text-yellow-300';
-  const key = 'text-cyan-600 dark:text-sky-300';
-  const fg = 'text-foreground';
-  const cm = 'text-foreground/40 italic';
+export function CodePreview({ className, t }: CodePreviewProps) {
+  const user = 'text-foreground';
+  const ai = 'text-foreground/90';
+  const label = 'text-cyan-600 dark:text-sky-300 font-semibold';
+  const aiLabel = 'text-purple-600 dark:text-purple-400 font-semibold';
+  const ok = 'text-green-600 dark:text-green-400';
+  const dim = 'text-foreground/50';
+  const accent = 'text-amber-600 dark:text-yellow-300';
+  const tool = 'text-blue-600 dark:text-blue-300';
 
   return (
     <div className={cn(
@@ -32,62 +34,52 @@ export function CodePreview({ className }: CodePreviewProps) {
           <div className="h-3 w-3 rounded-full bg-yellow-500/80" />
           <div className="h-3 w-3 rounded-full bg-green-500/80" />
           <div className="ml-2 text-xs font-medium text-muted-foreground font-mono">
-            docker-compose.yml
+            {t.windowTitle}
           </div>
         </div>
 
-        {/* Code Content — real docker-compose deployment */}
+        {/* Conversation */}
         <div className="overflow-x-auto p-6 text-left bg-gradient-to-br from-card to-muted/20">
-          <pre className="font-mono text-sm leading-7">
+          <pre className="font-mono text-sm leading-7 whitespace-pre-wrap break-words">
             <code>
-              <span className={cm}>{'# Run ObjectOS against your own Postgres'}</span>
+              <span className={label}>{t.userLabel}</span>
               <br/>
-              <span className={key}>services</span><span className={fg}>:</span>
+              <span className={user}>{t.user1Line1}</span>
               <br/>
-              {'  '}<span className={key}>objectos</span><span className={fg}>:</span>
-              <br/>
-              {'    '}<span className={key}>image</span><span className={fg}>:</span>{' '}
-              <span className={str}>ghcr.io/objectstack/objectos:latest</span>
-              <br/>
-              {'    '}<span className={key}>ports</span><span className={fg}>:</span>{' '}
-              [<span className={str}>&quot;3000:3000&quot;</span>]
-              <br/>
-              {'    '}<span className={key}>environment</span><span className={fg}>:</span>
-              <br/>
-              {'      '}<span className={key}>OS_ARTIFACT_FILE</span><span className={fg}>:</span>{' '}
-              <span className={str}>/artifacts/objectstack.json</span>
-              <br/>
-              {'      '}<span className={key}>OS_DATABASE_URL</span><span className={fg}>:</span>{' '}
-              <span className={str}>postgres://app@db:5432/objectos</span>
+              <span className={user}>{t.user1Line2}</span>
+              <br/><br/>
+
+              <span className={aiLabel}>{t.agentLabel}</span>
+              <span className={dim}>{'  '}</span>
+              <span className={tool}>{t.tool1Name}</span>
+              <span className={dim}>{t.tool1Target}</span>
               <br/>
-              {'      '}<span className={key}>OS_AUTH_SECRET</span><span className={fg}>:</span>{' '}
-              <span className={fg}>$</span><span className={key}>{'{AUTH_SECRET}'}</span>
+              <span className={ai}>{t.matchSummary}</span>
               <br/>
-              {'    '}<span className={key}>volumes</span><span className={fg}>:</span>
+              <span className={ai}>    • </span><span className={accent}>TKT-2041</span><span className={ai}>{t.ticket1Meta}</span><span className={dim}>{t.ticket1Note}</span>
               <br/>
-              {'      '}<span className={fg}>-</span>{' '}
-              <span className={str}>./artifacts:/artifacts:ro</span>
+              <span className={ai}>    • </span><span className={accent}>TKT-2038</span><span className={ai}>{t.ticket2Meta}</span><span className={dim}>{t.ticket2Note}</span>
               <br/>
-              {'      '}<span className={fg}>-</span>{' '}
-              <span className={str}>objectos-data:/var/lib/objectos</span>
+              <span className={ai}>    • </span><span className={accent}>TKT-2035</span><span className={ai}>{t.ticket3Meta}</span><span className={dim}>{t.ticket3Note}</span>
               <br/>
-              {'    '}<span className={key}>depends_on</span><span className={fg}>:</span>{' '}
-              [<span className={str}>db</span>]
+              <span className={ai}>{t.insight}</span>
               <br/><br/>
-              {'  '}<span className={key}>db</span><span className={fg}>:</span>
-              <br/>
-              {'    '}<span className={key}>image</span><span className={fg}>:</span>{' '}
-              <span className={str}>postgres:</span><span className={num}>16</span>
+
+              <span className={label}>{t.userLabel}</span>
               <br/>
-              {'    '}<span className={key}>volumes</span><span className={fg}>:</span>{' '}
-              [<span className={str}>db-data:/var/lib/postgresql/data</span>]
+              <span className={user}>{t.user2}</span>
               <br/><br/>
-              <span className={key}>volumes</span><span className={fg}>:</span>{' '}
-              <span className={fg}>{'{ objectos-data: {}, db-data: {} }'}</span>
-              <br/><br/>
-              <span className={cm}>{'# → Application at http://localhost:3000'}</span>
+
+              <span className={aiLabel}>{t.agentLabel}</span>
+              <span className={dim}>{'  '}</span>
+              <span className={tool}>{t.tool2Name}</span>
+              <span className={dim}>{t.tool2Count}</span>
+              <span className={tool}>{t.tool3Name}</span>
+              <span className={dim}>{t.tool3Count}</span>
+              <br/>
+              <span className={ok}>{t.actionResult}</span>
               <br/>
-              <span className={cm}>{'# → Setup app at  http://localhost:3000/_setup/'}</span>
+              <span className={dim}>{t.governance}</span>
             </code>
           </pre>
         </div>

apps/docs/lib/homepage-i18n.ts

@@ -104,6 +104,33 @@ export interface HomepageTranslations {
     secondaryHref: string;
   };
 
+  // Hero Agent Preview (conversation shown under the hero)
+  agentPreview: {
+    windowTitle: string;
+    userLabel: string;
+    agentLabel: string;
+    user1Line1: string;
+    user1Line2: string;
+    tool1Name: string;
+    tool1Target: string;
+    matchSummary: string;
+    ticket1Meta: string;
+    ticket1Note: string;
+    ticket2Meta: string;
+    ticket2Note: string;
+    ticket3Meta: string;
+    ticket3Note: string;
+    insight: string;
+    user2: string;
+    tool2Name: string;
+    tool2Count: string;
+    tool2Sep: string;
+    tool3Name: string;
+    tool3Count: string;
+    actionResult: string;
+    governance: string;
+  };
+
   // Footer
   footer: {
     copyright: string;
@@ -139,17 +166,17 @@ export interface HomepageTranslations {
  */
 export const en: HomepageTranslations = {
   badge: {
-    status: 'Customer-Hosted Runtime',
+    status: 'AI-Native Business OS',
     version: SPEC_VERSION,
   },
   hero: {
     title: {
-      line1: 'Your Data.',
-      line2: 'Your Network. Your Rules.',
+      line1: 'The Business OS',
+      line2: 'for the AI-Native Era.',
     },
     subtitle: {
-      line1: 'ObjectOS runs ObjectStack applications inside your own infrastructure — private cloud, customer data centers, or fully air-gapped networks.',
-      line2: 'No vendor lock-in. No data leaving your perimeter.',
+      line1: 'Define business objects, permissions, workflows, APIs, UI metadata, and Agent tools — once — as structured Zod metadata.',
+      line2: 'ObjectStack is the metadata-driven business backend that lets AI Agents safely understand, operate, and audit your systems. Agent-ready, permission-built-in, versioned, audit-friendly.',
     },
     cta: {
       primary: 'Quickstart',
@@ -249,24 +276,49 @@ export const en: HomepageTranslations = {
     terms: 'Terms of Service',
     termsHref: '/terms',
   },
+  agentPreview: {
+    windowTitle: 'Studio · Support Copilot',
+    userLabel: 'You',
+    agentLabel: 'Agent',
+    user1Line1: 'Which urgent tickets have been open more than 24h,',
+    user1Line2: "and who's on the hook?",
+    tool1Name: 'query_data',
+    tool1Target: ' · support_ticket',
+    matchSummary: '  3 tickets match — grouped by assignee:',
+    ticket1Meta: ' · 31h open · Maya  ',
+    ticket1Note: '(billing outage)',
+    ticket2Meta: ' · 28h open · Maya  ',
+    ticket2Note: '(SSO failure)',
+    ticket3Meta: ' · 26h open · Jordan',
+    ticket3Note: ' (export bug)',
+    insight: '  Maya is carrying 2/3 — likely the bottleneck.',
+    user2: "Escalate all three and reassign Maya's to the on-call.",
+    tool2Name: 'action_escalate_ticket',
+    tool2Count: ' ×3 · ',
+    tool2Sep: '',
+    tool3Name: 'action_reassign',
+    tool3Count: ' ×2',
+    actionResult: '  ✓ priority → urgent · on-call notified · audited',
+    governance: '  Runs as you. Permissions + field rules enforced.',
+  },
 };
 
 /**
  * Chinese Translations (中文翻译)
  */
 export const cn: HomepageTranslations = {
   badge: {
-    status: '客户自托管运行时',
+    status: 'AI-Native Business OS',
     version: SPEC_VERSION,
   },
   hero: {
     title: {
-      line1: '你的数据，',
-      line2: '你的网络，你的规则。',
+      line1: 'AI 原生时代的',
+      line2: '业务操作系统。',
     },
     subtitle: {
-      line1: 'ObjectOS 让 ObjectStack 应用运行在你自己的基础设施上 —— 私有云、客户数据中心、或完全离线的内网环境。',
-      line2: '无厂商锁定，数据不离开企业边界。',
+      line1: '把业务对象、权限、工作流、API、UI 元数据与 Agent 工具，一次性定义为结构化的 Zod 元数据。',
+      line2: 'ObjectStack 是一套元数据驱动的业务后端，让 AI Agent 能够安全地理解、操作并审计你的业务系统。Agent 就绪、权限内建、版本化、可审计。',
     },
     cta: {
       primary: '快速开始',
@@ -366,6 +418,31 @@ export const cn: HomepageTranslations = {
     terms: '服务条款',
     termsHref: '/terms',
   },
+  agentPreview: {
+    windowTitle: 'Studio · 客服副驾',
+    userLabel: '你',
+    agentLabel: 'Agent',
+    user1Line1: '哪些紧急工单已经超过 24 小时没关,',
+    user1Line2: '分别是谁在跟?',
+    tool1Name: 'query_data',
+    tool1Target: ' · support_ticket',
+    matchSummary: '  匹配到 3 条 —— 按负责人分组：',
+    ticket1Meta: ' · 已开 31h · Maya  ',
+    ticket1Note: '(账单中断)',
+    ticket2Meta: ' · 已开 28h · Maya  ',
+    ticket2Note: '(SSO 故障)',
+    ticket3Meta: ' · 已开 26h · Jordan',
+    ticket3Note: ' (导出 bug)',
+    insight: '  Maya 一人扛 2/3 —— 很可能是瓶颈。',
+    user2: '把三条都升级,Maya 的两条转给值班工程师。',
+    tool2Name: 'action_escalate_ticket',
+    tool2Count: ' ×3 · ',
+    tool2Sep: '',
+    tool3Name: 'action_reassign',
+    tool3Count: ' ×2',
+    actionResult: '  ✓ 优先级 → 紧急 · 值班已通知 · 已审计',
+    governance: '  以你本人身份执行。权限与字段规则照常生效。',
+  },
 };
 
 /**