Design: a home feed card is the design system's card, and the fcard-head/acts/more classes leave §5d #3180

Home feed items, thought cards and the stalled-step cards now render with the design system's card(). .fcard, .fcard-head, .fcard-acts and .fcard-more are gone, along with their rules and their names in DESIGN.md §5d.

Not done

• Before/after pictures: I didn't produce them. I couldn't run the looks here, so the four pictures (desktop and 360px, light and dark) need to come from the pull's look run.
• Type check: tsc didn't run. bun install failed because bun couldn't write to its temp directory in the sandbox, so there were no types to check against.
• Full suite: I ran the home, feed, flow-card, studio-phone, asks and design tests (121 tests across the two runs, 0 failures) rather than all of bun test. bun scripts/design-lint.ts passes.
• Layout shift: I didn't measure it. The card's height depends only on its content, which is the same before and after the live fragment swaps in.

What changed

• Feed items: the avatar, name, app, time and kind badge sit in the card head. The link into the thing and the reason sit in the body. The tell/steer, dismiss and mute controls sit in the foot, behind .quiet-details. The dismiss and mute buttons are laid out with .bar.
• card(): it gained an optional attrs for the data hooks and tabindex on the card itself. The default output is unchanged.
• Feed script: it finds cards by [data-item] instead of .fcard. x to dismiss and the focus move after a dismissal work as before.
• Timeline: it is now spaced cards (the card's own margin) rather than divided rows. That is the visible change to look at.
• Phone rules: the 360px rules in style.ts now target .feed .card-head and .feed .bar .btn.

Left alone

• The other .fcard-* classes (reason, who, why, reply, text, form, unblock, app) stay, since the issue names only four.
• The composer and the apps rail are untouched.

Tests

• Four tests followed the markup: feed-page, home-feed, studio-phone and flow-card. They look for card/quiet-details instead of the removed classes.

To try it

• Open / and check the feed, a thought, a stalled step, then dismiss with x.

🤖 Generated with Claude Code

Closes #3166

Home feed items, thought cards and the stalled-step cards now render with the design system's card(). .fcard, .fcard-head, .fcard-acts and .fcard-more are gone, along with their rules and their names in DESIGN.md §5d.

Not done

• Before/after pictures: I didn't produce them. I couldn't run the looks here, so the four pictures (desktop and 360px, light and dark) need to come from the pull's look run.
• Type check: tsc didn't run. bun install failed because bun couldn't write to its temp directory in the sandbox, so there were no types to check against.
• Full suite: I ran the home, feed, flow-card, studio-phone, asks and design tests (121 tests across the two runs, 0 failures) rather than all of bun test. bun scripts/design-lint.ts passes.
• Layout shift: I didn't measure it. The card's height depends only on its content, which is the same before and after the live fragment swaps in.

What changed

• Feed items: the avatar, name, app, time and kind badge sit in the card head. The link into the thing and the reason sit in the body. The tell/steer, dismiss and mute controls sit in the foot, behind .quiet-details. The dismiss and mute buttons are laid out with .bar.
• card(): it gained an optional attrs for the data hooks and tabindex on the card itself. The default output is unchanged.
• Feed script: it finds cards by [data-item] instead of .fcard. x to dismiss and the focus move after a dismissal work as before.
• Timeline: it is now spaced cards (the card's own margin) rather than divided rows. That is the visible change to look at.
• Phone rules: the 360px rules in style.ts now target .feed .card-head and .feed .bar .btn.

Left alone

• The other .fcard-* classes (reason, who, why, reply, text, form, unblock, app) stay, since the issue names only four.
• The composer and the apps rail are untouched.

Tests

• Four tests followed the markup: feed-page, home-feed, studio-phone and flow-card. They look for card/quiet-details instead of the removed classes.

To try it

• Open / and check the feed, a thought, a stalled step, then dismiss with x.

🤖 Generated with Claude Code

Home feed items, thought cards and stalled-step cards now render with the design system's card(). .fcard, .fcard-head, .fcard-acts and .fcard-more are gone, along with their rules and their names in DESIGN.md §5d. The other .fcard-* classes stay, because the issue names only these four. The timeline is now spaced cards rather than divided rows, which is the visible change.

Review feedback

• Tests for attrs: test/card-attrs.test.ts is new and passes. It checks that attrs land on the root .card element, and that without attrs there are no data- or tabindex attributes. A third test checks that feedCard puts data-item, data-nav and tabindex="0" on that same element. The "unchanged without attrs" check is a plain card() against card(…, {}) with the root tag pinned, not a comparison with pre-change output.
• Phone thumb target: the 600px block now has .feed .quiet-details > summary { min-height: 44px; display: flex; align-items: center }. The base .quiet-details summary already had min-height: 44px, so this rule restates it for the feed.
• Landmark: the card is now a div rather than an article, so the feed loses its article landmarks. I chose not to add a role, since the feed sits inside a labelled region and the old articles were not individually labelled.
• Checks: bun x tsc --noEmit is clean. It ran after setting BUN_TMPDIR and installing dependencies. I ran the tests for the feed, home, flow card, studio phone, asks, design lint and the new card tests, all passing. I did not run the whole bun test suite here, so the forge's check will be the first full run.

Still open

• Pictures: I could not produce the before/after pictures. The four (desktop and 360px, light and dark) need to come from the pull's look run. That run is also where to confirm the summary is not a hairline strip in the card foot, which I have not seen.

To try it: open /, check the feed, a thought and a stalled step, then dismiss a card with x.

🤖 Generated with Claude Code