feat(ui): make What's Next feed scrollable beyond 5 items

frontend/src/components/AttentionFeed.tsx

@@ -43,18 +43,25 @@ function AttentionCard({
 
 // ─── Main component ────────────────────────────────────────────────────────
 
+const DEFAULT_VISIBLE_COUNT = 5;
+
 export function AttentionFeed() {
   const { items, tier1Count, loading } = useAttentionFeed();
   const navigate = useNavigate();
 
   const hasUrgent = tier1Count > 0;
   const [manualOpen, setManualOpen] = useState<boolean | null>(null);
+  const [showAll, setShowAll] = useState(false);
   const isOpen = manualOpen ?? true; // always open by default
 
   const toggleOpen = useCallback(() => {
     setManualOpen((prev) => !(prev ?? true));
   }, []);
 
+  const toggleShowAll = useCallback(() => {
+    setShowAll((prev) => !prev);
+  }, []);
+
   const handleTap = useCallback(
     (item: AttentionItem) => {
       selectionChanged();
@@ -69,6 +76,9 @@ export function AttentionFeed() {
   const t2Count = items.filter((i) => i.tier === 2).length;
   if (t2Count > 0) summaryParts.push(`${t2Count} in focus`);
 
+  const visibleItems = showAll ? items : items.slice(0, DEFAULT_VISIBLE_COUNT);
+  const hasMore = items.length > DEFAULT_VISIBLE_COUNT;
+
   return (
     <div className="attention-section">
       <button className="overview-header" onClick={toggleOpen}>
@@ -86,9 +96,14 @@ export function AttentionFeed() {
           {!loading && items.length === 0 && (
             <div className="attention-empty">Nothing needs your attention right now.</div>
           )}
-          {items.map((item) => (
+          {visibleItems.map((item) => (
             <AttentionCard key={item.id} item={item} onTap={handleTap} />
           ))}
+          {!loading && hasMore && (
+            <button className="attention-show-more" onClick={toggleShowAll}>
+              {showAll ? 'Show less' : `Show all ${items.length}`}
+            </button>
+          )}
         </div>
       )}
     </div>

frontend/src/hooks/__tests__/useAttentionFeed.test.ts

@@ -175,7 +175,7 @@ describe('useAttentionFeed', () => {
     expect(result.current.items[1].tier).toBe(2);
   });
 
-  it('caps output at 5 items', async () => {
+  it('returns all items without capping', async () => {
     const items = Array.from({ length: 10 }, (_, i) =>
       makeTodo({ id: `t${i}`, summary: `Item ${i}`, starred: true, urgency: 0.9 }),
     );
@@ -190,7 +190,8 @@ describe('useAttentionFeed', () => {
       expect(result.current.loading).toBe(false);
     });
 
-    expect(result.current.items).toHaveLength(5);
+    expect(result.current.items).toHaveLength(10);
+    expect(result.current.tier1Count).toBe(10);
   });
 
   it('subscribes to SSE events for live updates', () => {

frontend/src/hooks/useAttentionFeed.ts

@@ -214,8 +214,6 @@
 
 // ─── Hook ──────────────────────────────────────────────────────────────────
 
-const MAX_ITEMS = 5;
-
 export interface UseAttentionFeedReturn {
   items: AttentionItem[];
   tier1Count: number;
@@ -253,7 +251,7 @@
   }, []);
 
   // ATB tasks from store
   const tasks = useMitzoStore((s) => s.tasks.tree);
   const loadTasks = useMitzoStore((s) => s.loadTasks);
 
   useEffect(() => {
@@ -286,8 +284,7 @@
     const telosItems = telosToAttention(todos);
     const atbItems = atbToAttention(tasks);
     const sessionItems = sessionsToAttention(activities);
-    const all = sortAttention([...telosItems, ...atbItems, ...sessionItems]);
-    return all.slice(0, MAX_ITEMS);
+    return sortAttention([...telosItems, ...atbItems, ...sessionItems]);
   }, [todos, tasks, activities]);
 
   const tier1Count = useMemo(() => feed.filter((i) => i.tier === 1).length, [feed]);

frontend/src/styles/global.css

@@ -833,6 +833,26 @@ textarea:focus {
   text-align: center;
 }
 
+.attention-show-more {
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  color: var(--primary);
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.15s;
+}
+
+.attention-show-more:active {
+  background: var(--hover);
+}
+
 .service-status {
   display: flex;
   gap: var(--space-4);