fix(app): align memory textarea border and radius with DESIGN.md tokens

[Astro-Han]

Summary

Align settings-memory.tsx CSS tokens with DESIGN.md and registered Tailwind tokens. Two lines changed in one file.

• rounded → rounded-[var(--radius-md)] on textarea (DESIGN.md: input radius is --radius-md = 10px; bare rounded = 4px Tailwind default)
• border-border → border-border-weak on textarea (DESIGN.md: input fields use --border-weak)
• bg-bg-panel → bg-surface-base on textarea and profileTooLarge section (both): --color-bg-panel is not registered in tailwind/colors.css; it silently no-ops. bg-surface-base is the correct input/surface background token.

Why

The memory textarea and profileTooLarge warning section were referencing an unregistered Tailwind color token (bg-bg-panel), causing silent style failures. The textarea also used incorrect border and radius defaults that do not match DESIGN.md input spec.

Related Issue

No corresponding GitHub issue. Follow-up issue #566 tracks rounded radius consistency audit for the alert/banner sections.

Human Review Status

Opus second-pass: pass.
AstroHan waived visual review (trivial token-only fix, confirmed in Slock thread).

Review Focus

• Token correctness: all three tokens now resolve against tailwind/colors.css and theme.css
• Scope: two-line change in one file; no behavior changes

Risk Notes

None. Pure CSS token substitution; no logic, schema, or API changes. bg-bg-panel was already silently no-op, so there is no visual regression risk from removing it.

How To Verify

Typecheck: bun --cwd packages/app typecheck → pass
Diff check: two lines in settings-memory.tsx, no unrelated changes
Token audit: --color-bg-panel absent from tailwind/colors.css confirmed; --surface-base present

Screenshots or Recordings

Visual review waived by maintainer for this token-only fix. bg-bg-panel was a silent no-op (no visible change when replaced), and textarea border/radius changes are cosmetic alignment to existing DESIGN.md spec.

Checklist

• Human review status is stated above as pending, approved, or not required
• I linked the related issue, or stated why there is no issue
• This PR has type, primary area, and priority labels, or I requested maintainer labeling
• I described the review focus and any meaningful risks
• I listed the relevant verification steps and the key result for each
• I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope
• I manually checked visible UI or copy changes when needed, with screenshots or recordings
• I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes
• I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant
• I reviewed the final diff for unrelated changes and suspicious dependency changes
• I am targeting dev, and my PR title and commit messages use Conventional Commits in English

[coderabbitai]

📝 Walkthrough

Walkthrough

Two styling token changes in SettingsMemory: the profile "too large" warning panel background changed to bg-surface-base, and the raw memory editor textarea classes were updated to rounded-[var(--radius-md)], border-border-weak, and bg-surface-base.

Changes

SettingsMemory styling updates

Layer / File(s)	Summary
Profile warning panel background packages/app/src/components/settings-memory.tsx	section for the "profile too large" warning switched background utility from bg-bg-panel to bg-surface-base.
Raw memory textarea utilities packages/app/src/components/settings-memory.tsx	Raw memory textarea classes changed from rounded, border-border, bg-bg-panel to rounded-[var(--radius-md)], border-border-weak, bg-surface-base.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested Labels

ui

Poem

I hopped into code with a twitchy delight,
Rounded the corners and softened the light,
Borders now gentle, surfaces new,
A tiny style tweak—hoppy and true! 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR description and objectives show a significant mismatch with linked issue #34. The PR makes only styling token updates to a textarea component, while issue #34 concerns workspace adaptor registration, persistence, and sync restoration.	Verify that issue #34 is the correct linked issue or clarify the relationship. If unrelated, remove the link and ensure the PR addresses the intended issue objectives.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	The PR makes styling changes to the memory textarea that are necessary for alignment with DESIGN.md tokens. However, fixing the unregistered bg-bg-panel token at line 114 (profileTooLarge section) extends beyond the primary textarea styling scope.	Clarify whether the profileTooLarge background token fix is intentional scope expansion or incidental. If incidental, separate it into a follow-up change.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main change: aligning memory textarea styling tokens (border, radius) with DESIGN.md specifications.
Description check	✅ Passed	The PR description is comprehensive and well-structured, following the template with all major sections completed including summary, rationale, verification steps, and checklist confirmation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 slock/memory-textarea-design-fit

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request updates the styling of the raw memory settings textarea in settings-memory.tsx by replacing unregistered or hardcoded Tailwind classes with theme-specific tokens for borders, backgrounds, and border-radius. The reviewer recommends extending these updates to other parts of the component for consistency, specifically suggesting the use of standard Tailwind tokens like rounded-md instead of arbitrary CSS variables and addressing remaining instances of unregistered background classes.

[coderabbitai]

🧹 Nitpick comments (1)

packages/app/src/components/settings-memory.tsx (1)

126-126: ⚡ Quick win

Use Tailwind v4 CSS variable shorthand syntax for consistency.

Line 126 uses rounded-[var(--radius-md)], which is valid but verbose. Tailwind v4 recommends the shorthand rounded-(--radius-md) for consistency with v4 conventions. Both compile identically, but the shorthand form aligns with v4 idioms.

Suggested change

- class="min-h-[360px] w-full rounded-[var(--radius-md)] border border-border-weak bg-surface-base p-3 font-mono text-13-regular text-fg-strong"
+ class="min-h-[360px] w-full rounded-(--radius-md) border border-border-weak bg-surface-base p-3 font-mono text-13-regular text-fg-strong"

🤖 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/app/src/components/settings-memory.tsx` at line 126, Update the
Tailwind class in the settings-memory component to use Tailwind v4's CSS
variable shorthand: replace the verbose rounded-[var(--radius-md)] usage in the
element's class attribute with the v4 shorthand rounded-(--radius-md) so it
matches v4 idioms while keeping the same effect; locate the class string on the
element in settings-memory.tsx (the one containing min-h-[360px] w-full
rounded-[var(--radius-md)] border ...) and swap only the rounded token.

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

Nitpick comments:
In `@packages/app/src/components/settings-memory.tsx`:
- Line 126: Update the Tailwind class in the settings-memory component to use
Tailwind v4's CSS variable shorthand: replace the verbose
rounded-[var(--radius-md)] usage in the element's class attribute with the v4
shorthand rounded-(--radius-md) so it matches v4 idioms while keeping the same
effect; locate the class string on the element in settings-memory.tsx (the one
containing min-h-[360px] w-full rounded-[var(--radius-md)] border ...) and swap
only the rounded token.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a7632ca6-f0ed-4319-9cd1-db93bb056ede

📥 Commits

Reviewing files that changed from the base of the PR and between 4ab2f37 and 80ef87d.

📒 Files selected for processing (1)

• packages/app/src/components/settings-memory.tsx

[Astro-Han]

@coderabbitai

Linked Issues check: The earlier PR draft body contained a reference to `Closes #34` which was a Slock-internal task number (since removed). `gh pr view 565 --json closingIssuesReferences` returns an empty array — there is no actual linked GitHub issue. The warning should be stale.

Out of Scope Changes: The `bg-bg-panel` fix at line 114 is intentional scope expansion, not incidental. It is the same bug as the textarea fix: `--color-bg-panel` does not exist in `tailwind/colors.css`, so the token silently no-ops. Treating a sibling same-file same-bug as a separate PR would be artificial scope splitting for a 1-line change. The PR description now explicitly notes this, and a follow-up issue (#566) tracks the separate `rounded` radius consistency question.

Docstring Coverage: Not applicable to this PR — styling-only change with no new functions or methods added; existing functions in the file are unchanged.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@Astro-Han: Understood on all three points — thank you for the thorough context.

1. Linked Issues: Confirmed stale — the Closes feat(plugin): bridge workspace adaptors into opencode #34`` reference was a Slock-internal tracker number that no longer maps to a GitHub issue. I'll disregard that warning.

2. Out of Scope Changes: The rationale is sound. bg-bg-panel → bg-surface-base is the same class of bug (non-existent CSS custom property silently no-ops) in the same file, so bundling it avoids artificial scope splitting. With the PR description explicitly calling it out and #566 tracking the rounded radius follow-up, the scope is clearly communicated.

3. Docstring Coverage: Agreed — not applicable to a styling-only token substitution with no function signature changes.

---

✏️ Learnings added

Learnt from: Astro-Han
URL: https://github.com/Astro-Han/pawwork/pull/565

Timestamp: 2026-05-12T03:54:27.909Z
Learning: In the `pawwork` repository (`packages/app/src/components/settings-memory.tsx`), the Tailwind token `bg-bg-panel` silently no-ops because the CSS custom property `--color-bg-panel` does not exist in `tailwind/colors.css`. The correct surface token to use is `bg-surface-base`.

---

Learnt from: Astro-Han
URL: https://github.com/Astro-Han/pawwork/pull/565

Timestamp: 2026-05-12T03:54:27.909Z
Learning: In the `pawwork` repository, issue numbers like `#34` may refer to Slock-internal task numbers rather than GitHub issues. When `gh pr view <PR> --json closingIssuesReferences` returns an empty array, any `Closes `#N`` reference in the PR body is a stale internal tracker reference, not a real GitHub issue link.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.