docs: add tailwind refactor follow-up tasks

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.

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.

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.