Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeonghun-jj-lee merged 1 commit into from
Aug 12, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/session-ui/src/components/message-part-css.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { describe, expect, test } from "bun:test"
import { readFileSync } from "node:fs"
import { resolve } from "node:path"

// Regression guard: the text-card (kind:"text") CSS was accidentally deleted
// once (amicode#349 / opencode#121) during a file-reference feature refactor.
// Without these rules the textarea in a free-form question is transparent and
// borderless — effectively invisible. This test catches a future deletion.

const css = readFileSync(resolve(__dirname, "message-part.css"), "utf8")

describe("question text-card CSS (amicode#349 regression)", () => {
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)
})
Comment on lines +13 to +28

@coderabbitai coderabbitai Bot Aug 12, 2026

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.

})
30 changes: 30 additions & 0 deletions packages/session-ui/src/components/message-part.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1158,6 +1158,26 @@
}
}

/* Text-card (kind: "text") — the textarea is the ONLY affordance, so it
needs visible chrome (border + background) unlike the choice-card's
secondary custom-input which is borderless/transparent. */
[data-slot="question-text-form"] {
padding: 4px 8px;
}

[data-slot="question-text-form"] > [data-slot="question-custom-input"] {
border: 1px solid var(--v2-border-border-base);
border-radius: var(--radius-md);
padding: 8px 12px;
background: var(--v2-background-bg-layer-02);
min-height: 36px;

&:focus-visible {
border-color: var(--v2-border-border-focus);
outline: none;
}
}

[data-slot="question-footer"] {
display: flex;
align-items: center;
Expand Down Expand Up @@ -1623,6 +1643,16 @@ body:not([data-new-layout]) {
outline: 1px solid var(--border-interactive-base);
}
}

[data-slot="question-text-form"] > [data-slot="question-custom-input"] {
border-color: var(--border-weak-base);
background: var(--surface-weak);

&:focus-visible {
border-color: var(--border-interactive-base);
outline: none;
}
}
}

[data-component="question-answers"] {
Expand Down
Loading