diff --git a/tasks/todo/046-prompt-input-refactor.md b/tasks/todo/046-prompt-input-refactor.md new file mode 100644 index 00000000..5da391cc --- /dev/null +++ b/tasks/todo/046-prompt-input-refactor.md @@ -0,0 +1,34 @@ +# Task 046 - Prompt Input Tailwind Refactor + +## Goal +Port the prompt input stack to Tailwind utilities and shared tokens so it no longer depends on custom selectors in `src/index.css`. + +## Prerequisites +- Tasks 043-045 complete (color and typography tokens available, message item refactored). + +## Acceptance Criteria +- [ ] `src/components/prompt-input.tsx` and nested elements use Tailwind + token classes for layout, borders, and typography. +- [ ] Legacy selectors in `src/index.css` matching `.prompt-input-container`, `.prompt-input-wrapper`, `.prompt-input`, `.send-button`, `.prompt-input-hints`, `.hint`, `.hint kbd`, and related variants are removed or replaced with token-based utilities. +- [ ] Input states (focus, disabled, multi-line expansion) and keyboard hint row look identical in light/dark modes. +- [ ] Esc debounce handling and attachment hooks remain functional. + +## Steps +1. Audit existing markup in `prompt-input.tsx` and note the current class usage. +2. Replace className strings with Tailwind utility stacks that reference CSS variables (e.g., `bg-[var(--surface-base)]`, `text-[var(--text-muted)]`). +3. Introduce small reusable helpers (e.g., `.kbd` token utility) in `src/styles/components.css` if patterns recur elsewhere. +4. Delete superseded CSS blocks from `src/index.css` once equivalents exist. +5. Verify light/dark theme parity and interaction states manually. + +## Testing Checklist +- [ ] Run `npm run build`. +- [ ] In dev mode, send a message with/without attachments, toggle disabled state, and confirm keyboard hints render correctly. + +## Dependencies +- Blocks future component refactors for the input stack. + +## Estimated Time +0.75 hours + +## Notes +- Branch suggestion: `feature/task-046-prompt-input-refactor`. +- Capture light/dark screenshots for review if any subtle spacing changes occur. diff --git a/tasks/todo/047-tabs-tailwind-refactor.md b/tasks/todo/047-tabs-tailwind-refactor.md new file mode 100644 index 00000000..2bd25e15 --- /dev/null +++ b/tasks/todo/047-tabs-tailwind-refactor.md @@ -0,0 +1,35 @@ +# Task 047 - Tabs Tailwind Refactor + +## Goal +Refactor instance and session tab components to rely on Tailwind utilities and shared tokens, aligning with the design spec for spacing, typography, and state indicators. + +## Prerequisites +- Task 046 complete (prompt input refactor) to keep merges manageable. + +## Acceptance Criteria +- [ ] `src/components/instance-tabs.tsx` and `src/components/session-tabs.tsx` no longer reference legacy `.instance-tabs`, `.session-tabs`, `.session-tab` classes from `src/index.css`. +- [ ] Global CSS for tab bars (`.connection-status`, `.status-indicator`, `.status-dot`, `.session-view`) is replaced or minimized in favor of Tailwind utilities and token variables. +- [ ] Active, hover, and error states match the UI spec in both themes, including badges/icons. +- [ ] Tab bar layout remains responsive with overflow scrolling where applicable. + +## Steps +1. Catalogue existing tab-related classes used in both components and in `src/index.css`. +2. Convert markup to Tailwind class lists, leveraging tokens for colors/borders (e.g., `bg-[var(--surface-secondary)]`). +3. Add any reusable tab utilities to `src/styles/components.css` if needed. +4. Remove obsolete CSS blocks from `src/index.css` once coverage is confirmed. +5. Smoke-test tab interactions: switching, closing (where allowed), error state display, and overflow behavior. + +## Testing Checklist +- [ ] Run `npm run build`. +- [ ] In dev mode, load multiple instances/sessions to verify active styling and horizontal scrolling. + +## Dependencies +- Depends on Task 046 completion. +- Blocks subsequent polish tasks for tab-level layout. + +## Estimated Time +1.0 hour + +## Notes +- Branch suggestion: `feature/task-047-tabs-tailwind-refactor`. +- Provide before/after screenshots (light/dark) of both tab bars in the PR for clarity. diff --git a/tasks/todo/048-message-stream-refactor.md b/tasks/todo/048-message-stream-refactor.md new file mode 100644 index 00000000..8859bedc --- /dev/null +++ b/tasks/todo/048-message-stream-refactor.md @@ -0,0 +1,34 @@ +# Task 048 - Message Stream & Tool Call Refactor + +## Goal +Finish migrating the message stream container, tool call blocks, and reasoning UI to Tailwind utilities and shared tokens. + +## Prerequisites +- Tasks 045-047 complete (message item, prompt input, and tabs refactored). + +## Acceptance Criteria +- [ ] `src/components/message-stream.tsx`, `src/components/message-part.tsx`, and tool call subcomponents no longer depend on legacy classes (`.message-stream`, `.tool-call-message`, `.tool-call`, `.tool-call-header`, `.tool-call-preview`, `.tool-call-details`, `.reasoning-*`, `.scroll-to-bottom`, etc.). +- [ ] Global CSS definitions for these selectors are removed from `src/index.css`, replaced by Tailwind utilities and token-aware helpers. +- [ ] Scroll behavior (auto-scroll, “scroll to bottom” button) and collapsing/expanding tool calls behave as before in light/dark modes. +- [ ] Markdown/code blocks continue to render properly within the new layout. + +## Steps +1. Inventory remaining global selectors in `src/index.css` associated with the stream/tool-call UI. +2. Update component markup to use Tailwind classes, creating shared helpers in `src/styles/components.css` when patterns repeat. +3. Remove or rewrite the corresponding CSS blocks in `src/index.css` to avoid duplication. +4. Validate tool call states (pending/running/success/error), reasoning blocks, and markdown rendering visually. + +## Testing Checklist +- [ ] Run `npm run build`. +- [ ] In dev mode, stream a message with tool calls and reasoning to ensure toggles and scroll helpers work. + +## Dependencies +- Depends on prompt input and tab refactors to reduce merge conflicts. +- Unlocks subsequent layout cleanups for logs and empty states. + +## Estimated Time +1.25 hours + +## Notes +- Branch suggestion: `feature/task-048-message-stream-refactor`. +- Capture short screen recording or screenshots if tool call layout adjustments were required.