fix(session-ui): restore text-card question CSS (amicode#349) - #191
Conversation
…micode#349) The file-reference resolution feature (PR #143, c1e4862) accidentally removed the [data-slot="question-text-form"] CSS rules that gave the kind:"text" question textarea its border, background, radius, and min-height. Without them the textarea renders transparent and borderless — effectively invisible to the user. Restores the two rule blocks (v2 design tokens + legacy compat) and adds a regression test that asserts the selectors remain present. Closes harmoniqs/amicode#349
📝 WalkthroughWalkthroughThe text question form now displays a bordered, padded textarea with a minimum height, focus styling, and light and dark theme colors. Regression tests verify the selectors and key CSS declarations. ChangesText question card
Estimated code review effort: 2 (Simple) | ~10 minutes Mergeability Score: 🔵 Low · up to The change restores the visible text-card input with a localized CSS update and adds regression coverage. It is mergeable with owner awareness that the test should more precisely validate both restored CSS rule blocks to prevent future regressions. Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/session-ui/src/components/message-part-css.test.ts (1)
1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPrefer
Bun.file()for this Bun test.Because this suite runs under
bun:test, replace the synchronousnode:fsandnode:pathusage withBun.file(...).text(). This also removes the need for__dirname.Bun documents path and URL inputs for
Bun.file()and string reads through.text(). (bun.sh)Suggested change
-import { readFileSync } from "node:fs" -import { resolve } from "node:path" ... -const css = readFileSync(resolve(__dirname, "message-part.css"), "utf8") +const css = await Bun.file(new URL("message-part.css", import.meta.url)).text()Also applies to: 10-10
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/session-ui/src/components/message-part-css.test.ts` around lines 1 - 3, Update the test’s file-reading setup to use Bun.file(...).text() instead of the synchronous node:fs and node:path imports, and remove the associated __dirname-based path resolution. Preserve the existing test assertions and file contents while switching the read flow to the Bun API.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/session-ui/src/components/message-part-css.test.ts`:
- Around line 13-28: Update the tests in the message-part CSS test suite so each
selector assertion scopes to its specific CSS rule block and verifies the
expected border, background, and focus declarations rather than only selector
presence. Replace the broad dotall background match with block-scoped checks,
and add coverage for the legacy override in the question-text-form styles,
including its border, background, and focus rules.
---
Nitpick comments:
In `@packages/session-ui/src/components/message-part-css.test.ts`:
- Around line 1-3: Update the test’s file-reading setup to use
Bun.file(...).text() instead of the synchronous node:fs and node:path imports,
and remove the associated __dirname-based path resolution. Preserve the existing
test assertions and file contents while switching the read flow to the Bun API.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 198c58e5-4693-43dd-a57c-39a06563810b
📒 Files selected for processing (2)
packages/session-ui/src/components/message-part-css.test.tspackages/session-ui/src/components/message-part.css
| test("question-text-form selector is present", () => { | ||
| expect(css).toContain('[data-slot="question-text-form"]') | ||
| }) | ||
|
|
||
| test("text-form textarea has visible border", () => { | ||
| expect(css).toContain('[data-slot="question-text-form"] > [data-slot="question-custom-input"]') | ||
| }) | ||
|
|
||
| test("text-form textarea has min-height", () => { | ||
| expect(css).toContain("min-height: 36px") | ||
| }) | ||
|
|
||
| test("text-form textarea has background", () => { | ||
| // The v2 design token path | ||
| expect(css).toMatch(/question-text-form.*background.*bg-layer-02/s) | ||
| }) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the regression assertions prove each changed rule block.
Line 18 checks only the selector. It does not verify the border declaration. Line 27 uses .* with dotall matching across the entire CSS file, so it can match an unrelated later bg-layer-02 token. The test also does not cover the legacy override in packages/session-ui/src/components/message-part.css Lines 1647-1655.
Scope assertions to each selector block and verify the v2 and legacy border, background, and focus declarations.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/session-ui/src/components/message-part-css.test.ts` around lines 13
- 28, Update the tests in the message-part CSS test suite so each selector
assertion scopes to its specific CSS rule block and verifies the expected
border, background, and focus declarations rather than only selector presence.
Replace the broad dotall background match with block-scoped checks, and add
coverage for the legacy override in the question-text-form styles, including its
border, background, and focus rules.
The opencode commit c1e4862d (file-reference resolution, PR #143) accidentally deleted the [data-slot="question-text-form"] CSS rules that made the kind:"text" question textarea visible (border, background, min-height). This lock bump pins the fix (opencode PR #191). Source set to 'local' pending the next opencode release tag — once harmoniqs/opencode#191 merges and a release is cut, bump back to source:'release' with the new tag. Closes #349
Problem
Free-form questions (
kind: "text") render no visible textarea in the chat UI. The user sees the question text and footer buttons, but the input area is transparent/borderless — effectively invisible.Root cause
Commit c1e4862 (PR #143, file-reference resolution) accidentally deleted the
[data-slot="question-text-form"]CSS rules that PR #124 (fix #121) had added. These rules give the text-card textarea its:Without them, the textarea inherits the choice-card's transparent/borderless custom-input style — which is correct for the inline 'Type your own answer' field but makes the standalone text-card input invisible.
Fix
Restores the two deleted CSS rule blocks (v2 design tokens + legacy compat section) and adds a regression test that asserts the
question-text-formselectors remain present in the CSS file.Testing
bun test packages/session-ui/src/components/message-part-css.test.ts— 4/4 passbun test packages/app/src/pages/session/composer/session-question-dock.helpers.test.ts— 6/6 passCloses harmoniqs/amicode#349
Summary by CodeRabbit
New Features
Tests