Skip to content

fix(session-ui): restore text-card question CSS (amicode#349) - #191

Merged
jeonghun-jj-lee merged 1 commit into
local/amicodefrom
fix/amicode-349-text-card-css
Aug 12, 2026
Merged

fix(session-ui): restore text-card question CSS (amicode#349)#191
jeonghun-jj-lee merged 1 commit into
local/amicodefrom
fix/amicode-349-text-card-css

Conversation

@jeonghun-jj-lee

@jeonghun-jj-lee jeonghun-jj-lee commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

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:

  • border (1px solid)
  • background (layer-02)
  • border-radius (radius-md)
  • min-height (36px)
  • padding (8px 12px)

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-form selectors remain present in the CSS file.

Testing

  • bun test packages/session-ui/src/components/message-part-css.test.ts — 4/4 pass
  • bun test packages/app/src/pages/session/composer/session-question-dock.helpers.test.ts — 6/6 pass
  • Typecheck clean (turbo)

Closes harmoniqs/amicode#349

Summary by CodeRabbit

  • New Features

    • Improved text-question forms with a bordered, padded card layout.
    • Added minimum height and focus-state styling for easier interaction.
    • Added dark-theme colors for borders, backgrounds, and focus states.
  • Tests

    • Added coverage to verify the new text-question styling and theme tokens.

…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
@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The 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.

Changes

Text question card

Layer / File(s) Summary
Textarea styling and regression coverage
packages/session-ui/src/components/message-part.css, packages/session-ui/src/components/message-part-css.test.ts
The text question textarea now has padding, borders, rounded corners, a background token, a minimum height, and focus-state styling. Dark-theme overrides define border and background colors. Regression tests verify the selectors and required declarations.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: 🔵 Low · up to d50f3

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: arvsrn, usrnk1

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The CSS visibility requirement is met for [#349], but [#121] also requires focus-routing and measurement fixes absent from this changeset. Implement the missing focus-routing and container-measurement changes, or remove [#121] if this PR intentionally covers only CSS visibility.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the restoration of the text-card question CSS, which is the main change.
Description check ✅ Passed The description explains the problem, root cause, fix, testing, and linked issue; only optional template fields are absent.
Out of Scope Changes check ✅ Passed The CSS changes and regression test directly support the linked issues and contain no unrelated changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/amicode-349-text-card-css

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 win

Prefer Bun.file() for this Bun test.

Because this suite runs under bun:test, replace the synchronous node:fs and node:path usage with Bun.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

📥 Commits

Reviewing files that changed from the base of the PR and between d127d6d and d50f3e9.

📒 Files selected for processing (2)
  • packages/session-ui/src/components/message-part-css.test.ts
  • packages/session-ui/src/components/message-part.css

Comment on lines +13 to +28
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)
})

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

@jeonghun-jj-lee
jeonghun-jj-lee merged commit 72a0320 into local/amicode Aug 12, 2026
2 of 5 checks passed
@jeonghun-jj-lee
jeonghun-jj-lee deleted the fix/amicode-349-text-card-css branch August 12, 2026 23:09
jeonghun-jj-lee added a commit to harmoniqs/amicode that referenced this pull request Aug 12, 2026
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

BUG: Free-form questions don't render a text input textarea BUG: Free-form question card (kind: "text") renders no text input

1 participant