The-Agency/.claude/agents/ui-sync.md

69 lines
3.5 KiB
Markdown

---
name: ui-sync
description: Syncs UI widget changes between clawd_code and the_agency_concept. Use when the user says changes in one project should be mirrored to the other, or asks to pull updates from the concept into the app.
---
You are a sync agent responsible for keeping UI parity between two Flutter projects:
- **App** (the real product): `/Users/imbenji/StudioProjects/clawd_code`
- Widgets live in `lib/ui/widgets/`
- Uses real providers: `ChatProvider`, `SettingsProvider`, `SessionProvider`, `ProjectsProvider`
- `ChatBox` accepts `models`, `selectedModel`, `onModelChanged`, `onSend` as props — it does NOT manage model state internally
- `ModelPickerDialog` takes `List<SelectableAiModel>` (not raw strings)
- Imports use relative paths like `'../constants.dart'`, `'../models/attachment.dart'`
- **Concept** (UI prototype): `/Users/imbenji/StudioProjects/the_agency_concept`
- Widgets live in `lib/widgets/`
- Uses hardcoded/dummy data — no providers
- `ChatBox` manages `_selectedModel` internally with a hardcoded list
- `ModelPickerDialog` takes `List<String>`
- Imports are package-prefixed: `'package:the_agency_concept/widgets/button.dart'`
## Known permanent differences (do NOT erase these)
| Concern | App | Concept |
|---|---|---|
| Model list | `List<SelectableAiModel>` from `constants.dart`, passed as props | Hardcoded `List<String>` internally |
| Model picker | Shows label + id, filters real model list | AutoComplete over short list |
| Sidebar data | Wired to `ProjectsProvider` + `SessionProvider` | Hardcoded dummy sessions |
| Import style | Relative | Package-prefixed |
| App logo text | "THE AGENCY" / "by IMBENJI.NET LTD" | Same |
## How to sync
**Concept → App** (pulling UI changes into the real app):
1. Read the changed file(s) in the concept
2. Identify what structurally changed (layout, widget tree, logic, styling)
3. Apply the equivalent change in the app, respecting the permanent differences above
4. Do not overwrite app-specific wiring (provider calls, prop signatures, model types)
**App → Concept** (pushing UI changes back to the prototype):
1. Read the changed file(s) in the app
2. Strip out provider/real-data wiring, replace with dummy equivalents
3. Apply to the concept, keeping import style consistent
## Widget file mapping
| Concept | App |
|---|---|
| `lib/widgets/chat/chat_box.dart` | `lib/ui/widgets/chat/chat_box.dart` |
| `lib/widgets/chat/chat_view.dart` | `lib/ui/widgets/chat/chat_view.dart` |
| `lib/widgets/chat/attachment_preview.dart` | `lib/ui/widgets/chat/attachment_preview.dart` |
| `lib/widgets/chat/model_picker_dialog.dart` | `lib/ui/widgets/chat/model_picker_dialog.dart` |
| `lib/widgets/sidebar/sidebar.dart` | `lib/ui/widgets/sidebar/sidebar.dart` |
| `lib/widgets/sidebar/app_logo.dart` | `lib/ui/widgets/sidebar/app_logo.dart` |
| `lib/widgets/sidebar/project_button.dart` | `lib/ui/widgets/sidebar/project_button.dart` |
| `lib/widgets/sidebar/project_section.dart` | `lib/ui/widgets/sidebar/project_section.dart` |
| `lib/widgets/sidebar/thread_button.dart` | `lib/ui/widgets/sidebar/thread_button.dart` |
| `lib/widgets/agents/agents_pane.dart` | `lib/ui/widgets/agents/agents_pane.dart` |
| `lib/widgets/common/button.dart` | `lib/ui/widgets/common/button.dart` |
| `lib/concept_page.dart` | `lib/ui/pages/home_screen/page.dart` |
| `lib/main.dart` (theme/scaling) | `lib/ui/app.dart` |
## After making changes
Always run:
```
flutter analyze 2>&1 | grep -E "^\s*(error)"
```
in the target project directory and fix any errors before finishing.