feat(web): prepare owner record handoffs

apps/web/src/app/[locale]/iwooos/page.tsx

@@ -187,6 +187,14 @@ type OwnerResponseFormalRecordCandidateOutcomeLane = {
   tone: 'steady' | 'warn' | 'locked'
 }
 
+type OwnerResponseFormalRecordOwnerHandoffPacket = {
+  key: string
+  packet: string
+  value: string
+  icon: typeof ShieldCheck
+  tone: 'steady' | 'warn' | 'locked'
+}
+
 type CoverageGroup = {
   key: string
   count: string
@@ -813,6 +821,40 @@ const ownerResponseFormalRecordCandidateOutcomeBoundaries = [
   'gitea_disablement_authorized=false',
 ]
 
+const ownerResponseFormalRecordOwnerHandoffPackets: OwnerResponseFormalRecordOwnerHandoffPacket[] = [
+  { key: 'handoffIdentityBundle', packet: 'H1', value: '0', icon: FileText, tone: 'warn' },
+  { key: 'handoffDecisionContext', packet: 'H2', value: '0', icon: ClipboardCheck, tone: 'warn' },
+  { key: 'handoffEvidenceLock', packet: 'H3', value: '0', icon: SearchCheck, tone: 'warn' },
+  { key: 'handoffReviewerNotes', packet: 'H4', value: '0', icon: ListChecks, tone: 'warn' },
+  { key: 'handoffRiskRollback', packet: 'H5', value: '0', icon: Clock3, tone: 'warn' },
+  { key: 'handoffRuntimeGatePointer', packet: 'H6', value: '0', icon: ShieldCheck, tone: 'locked' },
+  { key: 'handoffSourceControlPointer', packet: 'H7', value: '0', icon: GitBranch, tone: 'locked' },
+]
+
+const ownerResponseFormalRecordOwnerHandoffBoundaries = [
+  'owner_response_formal_record_owner_handoff_packet_count=7',
+  'owner_response_formal_record_owner_handoff_ready_count=0',
+  'owner_response_formal_record_owner_assigned_count=0',
+  'owner_response_formal_record_created_count=0',
+  'owner_response_formal_record_approved_count=0',
+  'owner_response_formal_record_runtime_gate_count=0',
+  'owner_response_formal_record_owner_handoff_only=true',
+  'owner_response_formal_record_owner_assignment_authorized=false',
+  'owner_response_formal_record_write_authorized=false',
+  'owner_response_formal_record_approval_authorized=false',
+  'owner_response_formal_record_execution_authorized=false',
+  'runtime_execution_authorized=false',
+  'active_runtime_gate_count=0',
+  'action_buttons_allowed=false',
+  'not_authorization=true',
+  'secret_value_collection_allowed=false',
+  'repo_creation_authorized=false',
+  'refs_sync_authorized=false',
+  'workflow_modification_authorized=false',
+  'github_primary_switch_authorized=false',
+  'gitea_disablement_authorized=false',
+]
+
 const coverageGroups: CoverageGroup[] = [
   {
     key: 'signals',
@@ -2766,6 +2808,130 @@ function OwnerResponseFormalRecordCandidateOutcomeBoard() {
   )
 }
 
+function OwnerResponseFormalRecordOwnerHandoffCard({
+  item,
+}: {
+  item: OwnerResponseFormalRecordOwnerHandoffPacket
+}) {
+  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffBoard')
+  const Icon = item.icon
+  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
+  return (
+    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
+          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
+        </div>
+        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
+      </div>
+      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
+        {item.value}
+      </div>
+      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
+        {t(`items.${item.key}.title` as never)}
+      </h2>
+      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
+        {t(`items.${item.key}.body` as never)}
+      </p>
+      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
+        <span style={{ fontSize: 11, color: '#87867f' }}>{t('handoffLabel')}</span>
+        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
+          {t(`items.${item.key}.handoff` as never)}
+        </span>
+        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
+        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
+          {t(`items.${item.key}.guard` as never)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function OwnerResponseFormalRecordOwnerHandoffBoard() {
+  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffBoard')
+  const summaryItems = [
+    { key: 'packets', value: '7', tone: 'warn' as const },
+    { key: 'ready', value: '0', tone: 'warn' as const },
+    { key: 'assigned', value: '0', tone: 'locked' as const },
+    { key: 'runtime', value: '0', tone: 'locked' as const },
+  ]
+  return (
+    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-handoff-board">
+      <div style={{ marginBottom: 14 }}>
+        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
+        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
+          {t('subtitle')}
+        </p>
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+          gap: 10,
+          marginBottom: 12,
+        }}
+      >
+        {summaryItems.map(item => (
+          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
+              <ToneDot tone={item.tone} />
+            </div>
+            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
+              {item.value}
+            </div>
+            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
+              {t(`summary.${item.key}.detail` as never)}
+            </p>
+          </div>
+        ))}
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
+          gap: 12,
+        }}
+      >
+        {ownerResponseFormalRecordOwnerHandoffPackets.map(item => (
+          <OwnerResponseFormalRecordOwnerHandoffCard key={item.key} item={item} />
+        ))}
+      </div>
+      <div style={{ ...band, marginTop: 12, padding: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <ShieldCheck size={16} color={toneColors.locked} />
+          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
+            gap: 7,
+          }}
+        >
+          {ownerResponseFormalRecordOwnerHandoffBoundaries.map(item => (
+            <span
+              key={item}
+              style={{
+                border: '0.5px solid #eee9dd',
+                borderRadius: 8,
+                padding: '7px 9px',
+                color: '#4f4c45',
+                fontSize: 11,
+                lineHeight: 1.4,
+                overflowWrap: 'anywhere',
+              }}
+            >
+              {item}
+            </span>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
 function CoverageCard({ item }: { item: CoverageGroup }) {
   const t = useTranslations('iwooos.coverage')
   const Icon = item.icon
@@ -3913,6 +4079,8 @@ export default function IwoooSPage({ params }: { params: { locale: string } }) {
 
         <OwnerResponseFormalRecordCandidateOutcomeBoard />
 
+        <OwnerResponseFormalRecordOwnerHandoffBoard />
+
         <section style={{ marginBottom: 14 }}>
           <div style={{ marginBottom: 14 }}>
             <h2 style={{ fontSize: 16, margin: 0 }}>{t('awooopReadOnlyLandingReadiness.title')}</h2>