157449a9ad
Restored from origin/main (b4663fb): - .github/ workflows and issue templates - .gitignore (proper exclusions) - .opencode/agent/web_developer.md - AGENTS.md, BUILD.md, PROGRESS.md - dev-docs/ (9 architecture/implementation docs) - docs/screenshots/ (4 UI screenshots) - images/ (CodeNomad icons) - package-lock.json (dependency lockfile) - tasks/ (25+ project task files) Also restored original source files that were modified: - packages/ui/src/App.tsx - packages/ui/src/lib/logger.ts - packages/ui/src/stores/instances.ts - packages/server/src/server/routes/workspaces.ts - packages/server/src/workspaces/manager.ts - packages/server/src/workspaces/runtime.ts - packages/server/package.json Kept new additions: - Install-*.bat/.sh (enhanced installers) - Launch-*.bat/.sh (new launchers) - README.md (SEO optimized with GLM 4.7)
1.7 KiB
1.7 KiB
Task 045 - Message Item Tailwind Refactor
Goal
Refactor MessageItem to rely on Tailwind utilities and the new token variables instead of bespoke global CSS.
Prerequisites
- Task 043 complete (color tokens available).
- Task 044 complete (typography baseline available).
Acceptance Criteria
src/components/message-item.tsxuses Tailwind utility classes (with CSS variable references where needed) for layout, colors, and typography.- Legacy
.message-item*styles are removed fromsrc/index.css. - Visual parity in light and dark modes is maintained for queued, sending, error, and generating states.
Steps
- Replace
class="message-item ..."and nested class usage with Tailwind class lists that reference tokens (e.g.,bg-[var(--surface-elevated)],text-[var(--text-secondary)]). - Create any small reusable utility classes (e.g.,
.chip,.card) in a newsrc/styles/components.cssif repeated patterns arise; keep them token-based. - Delete the now-unused
.message-itemblock fromsrc/index.css. - Verify conditional states (queued badge, sending indicator, error block) still render with correct colors/typography.
Testing Checklist
- Run
npm run devand load a session with mixed message states. - Toggle between light/dark themes to confirm token usage.
- Use dev tools to ensure no stale
.message-itemselectors remain in the DOM.
Dependencies
- Depends on Tasks 043 and 044.
- Blocks future component refactor tasks (046+).
Estimated Time
0.75 hours
Notes
- Capture before/after screenshots (light + dark, streamed message) for review.
- Mention any new utility classes in the PR description so reviewers know where to look.