feat(ui): importanceScore relevance sort + phase badges in NewsPanel

[koala73]

Summary

• src/styles/main.css: adds .phase-badge, .phase-badge.breaking (pulsing orange), .phase-badge.developing (yellow), .phase-badge.sustained (slate) CSS classes used by NewsPanel.

All other feature work landed in main via prerequisite PRs:

• importanceScore + corroborationCount types → PR feat(scoring): composite importance score + story tracking infrastructure #2604 (merged)
• storyMeta?: StoryMeta on NewsItem, StoryPhase client type → PR feat(e3): story persistence tracking #2620 E3 (merged)
• data-loader.ts storyMeta mapping with PROTO_TO_CLIENT_PHASE → PR feat(e3): story persistence tracking #2620 E3 (merged)
• NewsPanel.ts relevance sort + phase badge rendering (item.storyMeta?.phase) → PR feat(e3): story persistence tracking #2620 E3 (merged)

This PR was rebased onto main after those merges; the CSS was the only missing piece.

Test plan

• npm run typecheck passes
• npm run lint passes (no errors)
• Diff is CSS-only (27 lines added)

Post-Deploy Monitoring & Validation

• What to monitor: Phase badges render in NewsPanel for breaking/developing/sustained stories
• Expected healthy behavior: BREAKING badge (orange, pulsing) appears on first-cycle stories; DEVELOPING ×N (yellow) on repeat stories; ONGOING (slate) on sustained stories
• Failure signal: No visual badges despite storyMeta being populated in digest → check CSS selector specificity
• No additional operational monitoring required: pure CSS addition, no backend impact

🤖 Generated with Claude Sonnet 4.6 via Claude Code + Compound Engineering v2.49.0

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
worldmonitor	Ready	Preview, Comment	Apr 2, 2026 5:56pm

[greptile-apps]

Greptile Summary

This PR wires up three new proto scoring fields (importanceScore, corroborationCount, storyPhase) through the client type layer and into the NewsPanel UI — adding a relevance-first sort and phase badges — while gracefully falling back when the upstream scoring PR (#2604) has not yet deployed. The approach is well-structured and the fallback behaviour is solid.

Key changes:

• src/types/index.ts: Adds StoryPhase union and three optional fields to NewsItem.
• src/app/data-loader.ts: Maps the new proto fields via a type-cast IIFE; uses falsy checks that will silently drop zero-valued importanceScore/corroborationCount fields.
• src/components/NewsPanel.ts: Relevance sort (importanceScore → threat level → recency) and BREAKING/DEVELOPING phase badges in renderFlat().
• src/styles/main.css: Three new CSS classes; .phase-breaking reuses the existing pulse-alert keyframe correctly.

Issues found:

• The truthiness check on importanceScore and corroborationCount in data-loader.ts drops valid zero values — undefined checks should be used instead.
• StoryPhase includes STORY_PHASE_UNSPECIFIED but items with that value are filtered before being stored on NewsItem, making the type on that field misleading; splitting into a proto-layer type and a narrower ActiveStoryPhase for NewsItem would be cleaner.

Confidence Score: 4/5

• Safe to merge — the one logic issue (zero-score drop) has no practical effect on sort ordering today, but is worth fixing before PR feat(scoring): composite importance score + story tracking infrastructure #2604 ships scores.
• The rendering and sort logic are correct and have safe fallbacks. The falsy-check bug in data-loader.ts is a latent correctness issue that doesn't break anything right now (sort uses ?? 0 so zero-valued and absent scores rank equally), but will matter once real scores arrive from PR feat(scoring): composite importance score + story tracking infrastructure #2604. The type inconsistency is minor style feedback. Overall the change is low-risk.
• src/app/data-loader.ts — falsy check on importanceScore/corroborationCount should be an undefined check before PR feat(scoring): composite importance score + story tracking infrastructure #2604 deploys scores.

Important Files Changed

Filename	Overview
src/app/data-loader.ts	Maps new proto scoring fields to NewsItem via type cast; falsy check on importanceScore/corroborationCount will silently drop zero values.
src/components/NewsPanel.ts	Adds relevance sort by importanceScore → threat level → recency, and injects BREAKING/DEVELOPING phase badges; logic is correct and gracefully falls back when scores are absent.
src/types/index.ts	Adds StoryPhase union and three optional fields to NewsItem; StoryPhase includes STORY_PHASE_UNSPECIFIED which is filtered out in practice, making the field type slightly misleading.
src/styles/main.css	Adds .phase-badge, .phase-breaking (pulsing, reuses existing pulse-alert keyframe), and .phase-developing CSS classes; straightforward and correct.

Sequence Diagram

sequenceDiagram
    participant Proto as ProtoNewsItem (wire)
    participant DL as data-loader.ts<br/>protoItemToNewsItem()
    participant NI as NewsItem (client)
    participant NP as NewsPanel<br/>renderFlat()
    participant UI as DOM

    Proto->>DL: importanceScore, corroborationCount, storyPhase
    Note over DL: Type-cast IIFE<br/>filters STORY_PHASE_UNSPECIFIED<br/>⚠ falsy check drops score=0
    DL->>NI: importanceScore?, corroborationCount?, storyPhase?
    NI->>NP: items[]
    Note over NP: sortMode === 'relevance'?<br/>Sort: importanceScore desc<br/>→ threat level desc<br/>→ recency desc
    NP->>UI: Sorted HTML list
    Note over UI: storyPhase=BREAKING → pulsing orange badge<br/>storyPhase=DEVELOPING → yellow badge

Loading

_{Reviews (1): Last reviewed commit: "revert(gen): restore service_client.ts t..." | Re-trigger Greptile}

[greptile-apps]

Falsy check silently drops zero-valued scores

Both importanceScore and corroborationCount use a truthiness check (ext.field ? ...), which means a valid value of 0 is treated as absent and dropped from the mapped NewsItem.

For importanceScore, the downstream sort comparator uses a.importanceScore ?? 0, so the ordering is the same whether the field is 0 or undefined — but the distinction between "scored at 0" and "unscored" is lost.

For corroborationCount, this is more meaningful: 0 corroborations is semantically different from "corroboration not computed", and a future consumer could make wrong decisions based on the missing value.

Suggested change

	...(ext.importanceScore ? { importanceScore: ext.importanceScore } : {}),
	...(ext.corroborationCount ? { corroborationCount: ext.corroborationCount } : {}),
	...(ext.importanceScore !== undefined ? { importanceScore: ext.importanceScore } : {}),
	...(ext.corroborationCount !== undefined ? { corroborationCount: ext.corroborationCount } : {}),

[greptile-apps]

STORY_PHASE_UNSPECIFIED included in type but never stored on NewsItem

StoryPhase includes 'STORY_PHASE_UNSPECIFIED' as a valid member. However, data-loader.ts explicitly filters this value out before assigning storyPhase to a NewsItem, meaning a NewsItem will never actually carry STORY_PHASE_UNSPECIFIED at runtime. The type on the storyPhase field of NewsItem therefore misleads future callers into thinking they need to handle that sentinel.

Consider narrowing the field type to exclude the sentinel:

Suggested change

	export type StoryPhase = 'STORY_PHASE_UNSPECIFIED' | 'STORY_PHASE_BREAKING' | 'STORY_PHASE_DEVELOPING' | 'STORY_PHASE_SUSTAINED' | 'STORY_PHASE_FADING';
	export type StoryPhase = 'STORY_PHASE_UNSPECIFIED' | 'STORY_PHASE_BREAKING' | 'STORY_PHASE_DEVELOPING' | 'STORY_PHASE_SUSTAINED' | 'STORY_PHASE_FADING';
	export type ActiveStoryPhase = Exclude<StoryPhase, 'STORY_PHASE_UNSPECIFIED'>;

Then use ActiveStoryPhase for the storyPhase field on NewsItem (line 112), keeping the full StoryPhase union available for proto-layer casting in data-loader.ts.