wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(web): show IwoooS owner response focus

Browse Source
This commit is contained in:
Your Name
2026-05-20 13:06:20 +08:00
parent 6367cd58d7
commit 5979e3d22d
11 changed files with 569 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,13 @@ type ProgressAccelerationLane = {
tone: 'steady' | 'warn' | 'locked'
}
type OwnerResponseNextActionFocusItem = {
key: string
focus: string
icon: typeof ShieldCheck
tone: 'steady' | 'warn' | 'locked'
}
type Pillar = {
key: string
icon: typeof ShieldCheck
@@ -323,6 +330,13 @@ const progressAccelerationLanes: ProgressAccelerationLane[] = [
{ key: 'cadenceCompression', lane: 'PAL6', icon: CheckCircle2, tone: 'steady' },
]
const ownerResponseNextActionFocusItems: OwnerResponseNextActionFocusItem[] = [
{ key: 'giteaOwnerAttestation', focus: 'S4.9', icon: ClipboardCheck, tone: 'warn' },
{ key: 'githubTargetOwnerDecision', focus: 'S4.10', icon: GitBranch, tone: 'warn' },
{ key: 'refsTruthOwnerResponse', focus: 'S4.11', icon: SearchCheck, tone: 'warn' },
{ key: 'workflowSecretOwnerResponse', focus: 'S4.12', icon: Lock, tone: 'locked' },
]
const posturePillars: Pillar[] = [
{ key: 'exposure', icon: Radar, tone: 'warn' },
{ key: 'sourceControl', icon: GitBranch, tone: 'warn' },
@@ -832,6 +846,38 @@ function ProgressAccelerationLaneCard({ item }: { item: ProgressAccelerationLane
)
}
function OwnerResponseNextActionFocusCard({ item }: { item: OwnerResponseNextActionFocusItem }) {
const t = useTranslations('iwooos.ownerResponseNextActionFocus')
const Icon = item.icon
return (
<div style={{ ...band, minHeight: 190, padding: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
<Icon size={18} color={toneColors[item.tone]} />
<span style={{ fontSize: 11, color: '#87867f' }}>{t('focusLabel')}</span>
</div>
<span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.focus}</span>
</div>
<h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
{t(`items.${item.key}.title` as never)}
</h2>
<p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
{t(`items.${item.key}.body` as never)}
</p>
<div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
<div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
<div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
{t(`items.${item.key}.next` as never)}
</div>
<div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
<div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
{t(`items.${item.key}.guard` as never)}
</div>
</div>
</div>
)
}
function PillarCard({ item }: { item: Pillar }) {
const t = useTranslations('iwooos.pillars')
const Icon = item.icon
@@ -895,6 +941,7 @@ function SurfaceCard({ item, locale }: { item: SecuritySurface; locale: string }
style={{
...band,
minHeight: 170,
minWidth: 0,
padding: 16,
color: 'inherit',
textDecoration: 'none',
@@ -905,9 +952,9 @@ function SurfaceCard({ item, locale }: { item: SecuritySurface; locale: string }
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
<Icon size={18} color={toneColors[item.tone]} />
<span style={{ fontSize: 11, color: '#87867f', wordBreak: 'break-word' }}>{item.href}</span>
<span style={{ minWidth: 0, fontSize: 11, color: '#87867f', overflowWrap: 'anywhere' }}>{item.href}</span>
</div>
<div>
<div style={{ minWidth: 0 }}>
<h2 style={{ fontSize: 14, margin: 0, color: '#141413' }}>
{t(`items.${item.key}.title` as never)}
</h2>
@@ -915,9 +962,9 @@ function SurfaceCard({ item, locale }: { item: SecuritySurface; locale: string }
{t(`items.${item.key}.body` as never)}
</p>
</div>
<div style={{ marginTop: 'auto', display: 'grid', gap: 5 }}>
<div style={{ minWidth: 0, marginTop: 'auto', display: 'grid', gap: 5 }}>
<div style={{ fontSize: 11, color: '#87867f' }}>{t('sourceLabel')}</div>
<div style={{ fontSize: 11, color: '#4f4c45', lineHeight: 1.45 }}>
<div style={{ fontSize: 11, color: '#4f4c45', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
{t(`items.${item.key}.source` as never)}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11, color: toneColors[item.tone] }}>
@@ -942,7 +989,9 @@ function CoverageCard({ item }: { item: CoverageGroup }) {
<p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
{t(`groups.${item.key}.body` as never)}
</p>
<div style={{ fontSize: 11, color: '#87867f', marginTop: 10, lineHeight: 1.45 }}>{item.surfaces}</div>
<div style={{ fontSize: 11, color: '#87867f', marginTop: 10, lineHeight: 1.45, overflowWrap: 'anywhere' }}>
{item.surfaces}
</div>
</div>
)
}
@@ -2036,6 +2085,26 @@ export default function IwoooSPage({ params }: { params: { locale: string } }) {
</div>
</section>
<section style={{ marginBottom: 14 }}>
<div style={{ marginBottom: 14 }}>
<h2 style={{ fontSize: 16, margin: 0 }}>{t('ownerResponseNextActionFocus.title')}</h2>
<p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
{t('ownerResponseNextActionFocus.subtitle')}
</p>
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
gap: 12,
}}
>
{ownerResponseNextActionFocusItems.map(item => (
<OwnerResponseNextActionFocusCard key={item.key} item={item} />
))}
</div>
</section>
<section style={{ marginBottom: 14 }}>
<div style={{ marginBottom: 14 }}>
<h2 style={{ fontSize: 16, margin: 0 }}>{t('journey.title')}</h2>