checkpoint
This commit is contained in:
Rob Colbert
parent
f3fb626e82
commit
089a5b5fab
@ -1,291 +1,390 @@
|
||||
# Foundation Cleanup TODO
|
||||
# Foundation TODO — Chat Session Implementation
|
||||
|
||||
**Date:** April 29, 2026
|
||||
**Goal:** Correct known issues, standardize APIs, implement message handlers, and prepare solid foundation with unit tests for Chat Session UI implementation.
|
||||
**Date:** April 29, 2026 (updated)
|
||||
**Goal:** Complete the User journey from Project Manager → Chat Session view with full prompt submission, streaming responses, and model selection. All functionality tested with E2E tests.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Fix Type Errors & Interface Conflicts ✅ COMPLETE
|
||||
## Phase 1-5: Foundation Core ✅ COMPLETE
|
||||
|
||||
### 1.1 Resolve Duplicate `DroneStatus` Enum
|
||||
- **File:** `gadget-drone/src/services/platform.ts`
|
||||
- **Action:** Remove local `DroneStatus` enum, import from `@gadget/api`
|
||||
- **Status:** ✅ Complete
|
||||
All foundation work is complete and tested:
|
||||
|
||||
### 1.2 Resolve `IAiProvider` Interface Conflict
|
||||
- **Files:**
|
||||
- `packages/api/src/interfaces/ai-provider.ts` (Mongoose document)
|
||||
- `packages/ai/src/api.ts` (runtime config)
|
||||
- **Action:** Create mapper in `gadget-drone/src/services/ai.ts` to convert DB model → runtime config
|
||||
- **Status:** ✅ Complete
|
||||
- ✅ Type conflicts resolved (Phases 1.1-1.5)
|
||||
- ✅ Prompt submission flow implemented (Phases 2.1-2.4)
|
||||
- ✅ Event routing Drone→IDE implemented (Phases 3.1-3.5)
|
||||
- ✅ AWL emits streaming events (Phases 4.1-4.4)
|
||||
- ✅ Workspace persistence with crash recovery (Phases 5.1-5.7)
|
||||
|
||||
### 1.3 Fix `ToolCallMessage` Signature
|
||||
- **File:** `packages/api/src/messages/drone.ts:26-30`
|
||||
- **Issue:** Missing `callId` parameter required by `IChatToolCall`
|
||||
- **Action:** Add `callId: string` as first parameter
|
||||
- **Status:** ✅ Complete
|
||||
|
||||
### 1.4 Fix `ChatTurnStats` Schema Mismatch
|
||||
- **File:** `gadget-code/src/models/chat-turn.ts:70-76`
|
||||
- **Issue:** Schema uses `thinkingTokens`, interface uses `thinkingTokenCount`
|
||||
- **Action:** Standardize on `thinkingTokenCount` in schema
|
||||
- **Status:** ✅ Complete
|
||||
|
||||
### 1.5 Fix `ChatToolCallSchema` Missing `callId`
|
||||
- **File:** `gadget-code/src/models/chat-turn.ts:31-36`
|
||||
- **Issue:** Schema doesn't include required `callId` field
|
||||
- **Action:** Add `callId: { type: String, required: true }` to schema
|
||||
- **Status:** ✅ Complete
|
||||
**Unit Tests:** 21 tests passing (CodeSession + DroneSession)
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Implement Prompt Submission Flow ✅ COMPLETE
|
||||
## Phase 6: Chat Session Implementation (Current Turn)
|
||||
|
||||
### 2.1 Implement `CodeSession.onSubmitPrompt()`
|
||||
- **File:** `gadget-code/src/lib/code-session.ts:58-60`
|
||||
- **Action:**
|
||||
- Create `ChatTurn` document with status `Processing`
|
||||
- Build work order from `ChatSession`, `Project`, `IAiProvider`, prompt
|
||||
- Find target drone's `DroneSession`
|
||||
- Emit `processWorkOrder` to drone
|
||||
- Update `ChatTurn` with drone acknowledgment
|
||||
- **Missing:** Track `selectedDrone`, `chatSession`, `project` in `CodeSession`
|
||||
- **Status:** ✅ Complete
|
||||
### 6.1 AI Provider CLI Commands ⬜ PENDING
|
||||
|
||||
### 2.2 Add Drone Selection to `CodeSession`
|
||||
- **File:** `gadget-code/src/lib/code-session.ts`
|
||||
- **Action:** Add properties and methods to track selected drone, chat session, project
|
||||
- **Status:** ✅ Complete
|
||||
**File:** `gadget-code/src/web-cli.ts`
|
||||
|
||||
### 2.3 Add `provider` and `selectedModel` to ChatSession
|
||||
- **Files:**
|
||||
- `packages/api/src/interfaces/chat-session.ts`
|
||||
- `gadget-code/src/models/chat-session.ts`
|
||||
- **Status:** ✅ Complete
|
||||
**Commands:**
|
||||
- `pnpm cli provider add <name> <sdk-type> <base-url> [api-key]`
|
||||
- `pnpm cli provider ls`
|
||||
- `pnpm cli provider status <provider-id> <active|inactive>`
|
||||
- `pnpm cli provider remove <provider-id>`
|
||||
- `pnpm cli provider probe <provider-id>`
|
||||
|
||||
### 2.4 Unit Tests for CodeSession
|
||||
- **File:** `gadget-code/tests/code-session.test.ts`
|
||||
- **Tests:** 9 tests covering prompt submission flow
|
||||
- **Status:** ✅ Complete (all passing)
|
||||
**Implementation Details:**
|
||||
- SDK type: "ollama" or "openai"
|
||||
- `provider add` auto-probes for models
|
||||
- `provider probe` discovers models + capabilities, updates in-place
|
||||
- Model updates preserve `_id` (don't delete/recreate)
|
||||
- Mark unavailable models as "removed" instead of deleting
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Can add Ollama provider (no API key required)
|
||||
- [ ] Can add OpenAI provider (API key required)
|
||||
- [ ] Probe discovers models and capabilities
|
||||
- [ ] List shows all providers with model counts
|
||||
- [ ] Status command enables/disables providers
|
||||
- [ ] Remove command deletes provider
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Implement Event Routing (Drone→IDE) ✅ COMPLETE
|
||||
### 6.2 Chat Session REST API ⬜ PENDING
|
||||
|
||||
### 3.1 Add DroneSession Event Handlers
|
||||
- **File:** `gadget-code/src/lib/drone-session.ts:21-23`
|
||||
- **Action:** Register handlers for:
|
||||
- `thinking`
|
||||
- `response`
|
||||
- `toolCall`
|
||||
- `workOrderComplete`
|
||||
- **Status:** ✅ Complete
|
||||
**Files to Create:**
|
||||
- `gadget-code/src/controllers/api/v1/chat-session.ts`
|
||||
- `gadget-code/src/services/chat-session.ts`
|
||||
|
||||
### 3.2 Implement Routing Logic
|
||||
- **File:** `gadget-code/src/lib/drone-session.ts`
|
||||
- **Action:** Implement handlers that:
|
||||
- Find corresponding `CodeSession` by `chatSessionId`
|
||||
- Forward event to IDE socket
|
||||
- Update `ChatTurn` document with new data
|
||||
- **Status:** ✅ Complete
|
||||
**Endpoints:**
|
||||
- `GET /api/v1/chat-sessions?projectId=:projectId`
|
||||
- `POST /api/v1/chat-sessions`
|
||||
- `GET /api/v1/chat-sessions/:id`
|
||||
- `PUT /api/v1/chat-sessions/:id`
|
||||
- `DELETE /api/v1/chat-sessions/:id`
|
||||
- `GET /api/v1/chat-sessions/:id/turns`
|
||||
|
||||
### 3.3 Add `getCodeSessionByChatSessionId()` to `SocketService`
|
||||
- **File:** `gadget-code/src/services/socket.ts`
|
||||
- **Action:** Maintain reverse index: `chatSessionId → CodeSession`
|
||||
- **Status:** ✅ Complete
|
||||
**Features:**
|
||||
- Auto-generate session name from first prompt
|
||||
- Support `/rename` slash command (handled in AWL)
|
||||
- Track provider + model selection per session
|
||||
|
||||
### 3.4 Add `workOrderComplete` to ServerToClientEvents
|
||||
- **File:** `packages/api/src/messages/socket.ts`
|
||||
- **Status:** ✅ Complete
|
||||
|
||||
### 3.5 Unit Tests for DroneSession
|
||||
- **File:** `gadget-code/tests/drone-session.test.ts`
|
||||
- **Tests:** 12 tests covering event routing
|
||||
- **Status:** ✅ Complete (all passing)
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Create session with provider + model
|
||||
- [ ] List sessions by project
|
||||
- [ ] Update session (provider/model/mode)
|
||||
- [ ] Delete session
|
||||
- [ ] Get turns for session
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Emit Events from AWL ✅ COMPLETE
|
||||
### 6.3 Frontend API Client ⬜ PENDING
|
||||
|
||||
### 4.1 Pass Socket into `AgentService.process()`
|
||||
- **File:** `gadget-drone/src/gadget-drone.ts:229`
|
||||
- **Action:** Pass `this.socket` reference to `AgentService.process()`
|
||||
- **Status:** ✅ Complete
|
||||
**File:** `gadget-code/frontend/src/lib/api.ts`
|
||||
|
||||
### 4.2 Add Event Emissions to AWL Loop
|
||||
- **File:** `gadget-drone/src/services/agent.ts:70-98`
|
||||
- **Action:** Emit streaming events:
|
||||
- `thinking` when reasoning content arrives
|
||||
- `response` when text content streams
|
||||
- `toolCall` after each tool execution
|
||||
- `workOrderComplete` when loop exits
|
||||
- **Status:** ✅ Complete
|
||||
**Interfaces:**
|
||||
- `AiProvider` with models array
|
||||
- `AiModel` with capabilities
|
||||
- `ChatSession` with stats
|
||||
- `ChatTurn` with prompts/thinking/response/toolCalls
|
||||
|
||||
### 4.3 Implement Workspace Mode Transitions
|
||||
- **File:** `gadget-drone/src/services/agent.ts`
|
||||
- **Action:**
|
||||
- Emit `requestWorkspaceMode(agent)` before starting AWL
|
||||
- Wait for acknowledgment
|
||||
- Emit `requestWorkspaceMode(idle)` when complete
|
||||
- **Status:** ⬜ Deferred (can be added during integration testing)
|
||||
**API Clients:**
|
||||
- `providerApi` (getAll, get)
|
||||
- `chatSessionApi` (getAll, get, create, update, delete, getTurns)
|
||||
|
||||
### 4.4 Unit Tests for AgentService
|
||||
- **Location:** Deferred until integration testing
|
||||
- **Rationale:** Event emissions are straightforward and will be validated end-to-end with UI integration
|
||||
- **Status:** ⬜ Deferred
|
||||
**Acceptance Criteria:**
|
||||
- [ ] TypeScript interfaces match backend
|
||||
- [ ] API methods work with REST endpoints
|
||||
- [ ] Error handling for failed requests
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Workspace Persistence (Crash Recovery) ✅ COMPLETE
|
||||
### 6.4 Project Manager Integration ⬜ PENDING
|
||||
|
||||
### 5.1 Create `.gadget/` Directory Structure
|
||||
- **File:** `gadget-drone/src/services/workspace.ts` (NEW)
|
||||
- **Action:** Create `WorkspaceService` to manage:
|
||||
- `.gadget/workspace.json` (persistent identity)
|
||||
- `.gadget/cache/work-order.json` (active work order cache)
|
||||
- **Status:** ✅ Complete
|
||||
**File:** `gadget-code/frontend/src/pages/ProjectManager.tsx`
|
||||
|
||||
### 5.2 Implement Workspace Validation on Startup
|
||||
- **File:** `gadget-drone/src/gadget-drone.ts`
|
||||
- **Action:** Initialize WorkspaceService before registration
|
||||
- **Status:** ✅ Complete
|
||||
**Components to Add:**
|
||||
- `DroneSelector` - shows available drones (filter: online, user-owned)
|
||||
- `ChatSessionList` - lists project's chat sessions
|
||||
- `NewChatSessionForm` - modal with provider/model/mode selection
|
||||
|
||||
### 5.3 Write Work Order Cache During Processing
|
||||
- **File:** `gadget-drone/src/gadget-drone.ts:onProcessWorkOrder`
|
||||
- **Action:** Write cache BEFORE processing, remove AFTER completion
|
||||
- **Status:** ✅ Complete
|
||||
**UI Layout:**
|
||||
```
|
||||
+---------------------------+------------------------------------+
|
||||
| [New Project] | Project Inspector |
|
||||
|---------------------------| |
|
||||
| Projects (2) | Name: project-one |
|
||||
| [project-one ●] | Slug: project-one |
|
||||
| [project-two ] | ... |
|
||||
| | |
|
||||
| | [Delete Project] |
|
||||
| +------------------------------------+
|
||||
| | Available Drones |
|
||||
| | - drone-alpha ● [Select] |
|
||||
| | - drone-beta ○ |
|
||||
| +------------------------------------+
|
||||
| | Chat Sessions |
|
||||
| | - Session 1 [Open] |
|
||||
| | - Session 2 [Open] |
|
||||
| | [New Chat Session] |
|
||||
+---------------------------+------------------------------------+
|
||||
```
|
||||
|
||||
### 5.4 Update Drone Registration to Include `workspaceId`
|
||||
- **Files:**
|
||||
- `packages/api/src/interfaces/drone-registration.ts`
|
||||
- `gadget-drone/src/services/platform.ts`
|
||||
- **Action:** Add `workspaceId: string` to registration
|
||||
- **Status:** ✅ Complete
|
||||
**Flow:**
|
||||
1. User selects project → loads details
|
||||
2. Fetch available drones (status != 'offline', user-owned)
|
||||
3. User selects drone → stores in state
|
||||
4. Fetch chat sessions for project
|
||||
5. "New Chat Session" → modal with provider/model/mode
|
||||
6. Create session → navigate to `/projects/:projectId/chat-session/:sessionId`
|
||||
|
||||
### 5.5 Add `workspaceId` to `IChatSession`
|
||||
- **File:** `packages/api/src/interfaces/chat-session.ts`
|
||||
- **Action:** Add field for routing retries to correct workspace
|
||||
- **Status:** ⬜ Deferred (not needed for basic crash recovery)
|
||||
|
||||
### 5.6 Implement Crash Recovery Handler
|
||||
- **Files:**
|
||||
- `gadget-drone/src/gadget-drone.ts` (emit `requestCrashRecovery`)
|
||||
- `gadget-code/src/lib/drone-session.ts` (handle `requestCrashRecovery`)
|
||||
- `packages/api/src/messages/drone.ts` (message types)
|
||||
- `packages/api/src/messages/socket.ts` (socket events)
|
||||
- **Status:** ✅ Complete
|
||||
|
||||
### 5.7 Add Crash Recovery Socket Events
|
||||
- **Files:** `packages/api/src/messages/socket.ts`
|
||||
- **Events:** `requestCrashRecovery`, `crashRecoveryResponse`
|
||||
- **Status:** ✅ Complete
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Drone list shows online drones only
|
||||
- [ ] Can select drone for session
|
||||
- [ ] Chat session list displays
|
||||
- [ ] New session form with provider/model/mode
|
||||
- [ ] Navigate to chat session view
|
||||
|
||||
---
|
||||
|
||||
## Phase 6: Error Handling & Concurrency
|
||||
### 6.5 Chat Session View UI ⬜ PENDING
|
||||
|
||||
### 6.1 Add Error Propagation from Drone
|
||||
- **File:** `gadget-drone/src/gadget-drone.ts:209-229`
|
||||
- **Action:** Wrap `AgentService.process()` in try/catch, emit error event on failure
|
||||
- **Status:** ⬜ Pending
|
||||
**Files to Create:**
|
||||
- `gadget-code/frontend/src/pages/ChatSessionView.tsx`
|
||||
- `gadget-code/frontend/src/components/ChatMessages.tsx`
|
||||
- `gadget-code/frontend/src/components/PromptInput.tsx`
|
||||
- `gadget-code/frontend/src/components/SessionSidebar.tsx`
|
||||
- `gadget-code/frontend/src/components/FileBrowser.tsx` (stub)
|
||||
- `gadget-code/frontend/src/components/ToolCallInspector.tsx`
|
||||
- `gadget-code/frontend/src/components/SessionSettings.tsx`
|
||||
|
||||
### 6.2 Add Concurrency Control
|
||||
- **File:** `gadget-drone/src/gadget-drone.ts`
|
||||
- **Action:** Check `DroneStatus.Busy` before accepting work, reject extras
|
||||
- **Status:** ⬜ Pending
|
||||
**Route:** `/projects/:projectId/chat-session/:sessionId`
|
||||
|
||||
### 6.3 Add Timeout & Heartbeat Mechanism
|
||||
- **File:** `gadget-code/src/lib/drone-session.ts`
|
||||
- **Action:** Prevent IDE hangs on drone crash
|
||||
- **Status:** ⬜ Pending
|
||||
**Layout (per ui-design-guide.md):**
|
||||
```
|
||||
Work Area | Session Status
|
||||
----------------------------------------------|---------------
|
||||
Chat Messages | Chat: name
|
||||
| ID: ...
|
||||
| Model: llama3.2 (Ollama) [▼]
|
||||
| Mode: BUILD [▼]
|
||||
----------------------------------------------|---------------
|
||||
[Prompt input ][Expand][Send]| TC | FO | SA
|
||||
----------------------------------------------|---------------
|
||||
Log | Files
|
||||
|
|
||||
```
|
||||
|
||||
**Chat Messages Display:**
|
||||
- User prompts clearly highlighted
|
||||
- Assistant responses as natural language flow
|
||||
- Thinking content (collapsible)
|
||||
- Tool calls: one-line summary in chat (name + success/fail)
|
||||
- Clickable tool calls open inspector panel
|
||||
- Auto-scroll to bottom
|
||||
- Loading indicator while processing
|
||||
|
||||
**Tool Call Inspector (tabbed in Session panel):**
|
||||
- Tool name
|
||||
- Input parameters (expandable)
|
||||
- Response preview (if large)
|
||||
- Full response view
|
||||
- Success/fail status
|
||||
|
||||
**Session Sidebar:**
|
||||
- Chat name (editable via cog/settings)
|
||||
- Session ID (truncated)
|
||||
- Model selector: "Model Name (Provider Name)" with dropdown
|
||||
- Mode selector (Plan/Build/Test/Ship/Dev)
|
||||
- Stats: TC (tool calls), FO (file ops), SA (subagents)
|
||||
- Cog icon → Session Settings modal
|
||||
|
||||
**Session Settings Modal:**
|
||||
- Edit session name
|
||||
- View/change provider + model
|
||||
- View/change mode
|
||||
- View stats
|
||||
- Delete session
|
||||
|
||||
**Socket Events:**
|
||||
```typescript
|
||||
socket.on('thinking', (content: string) => { ... })
|
||||
socket.on('response', (content: string) => { ... })
|
||||
socket.on('toolCall', (callId: string, name: string, params: string, response: string) => { ... })
|
||||
socket.on('workOrderComplete', (turnId: string, success: boolean, message?: string) => { ... })
|
||||
```
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Chat messages display user prompts + assistant responses
|
||||
- [ ] Thinking content collapsible
|
||||
- [ ] Tool calls show one-line summary in chat
|
||||
- [ ] Click tool call → opens inspector with full details
|
||||
- [ ] Prompt input with Send button
|
||||
- [ ] Session sidebar with model/mode selectors
|
||||
- [ ] Model dropdown groups by provider
|
||||
- [ ] Changing model updates ChatSession for next prompt
|
||||
- [ ] Session Settings modal (cog icon)
|
||||
- [ ] File browser stub
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Unit Tests
|
||||
### 6.6 Model Selection in Session Sidebar ⬜ PENDING
|
||||
|
||||
### 7.1 Socket Message Handler Tests
|
||||
- **Location:** `gadget-code/tests/socket-handlers.test.ts`
|
||||
- **Tests:**
|
||||
- `CodeSession.onSubmitPrompt()` creates ChatTurn
|
||||
- `DroneSession` routes events to IDE
|
||||
- `SocketService` tracks sessions correctly
|
||||
- **Status:** ⬜ Pending
|
||||
**Implementation:**
|
||||
1. Click model dropdown in sidebar
|
||||
2. Fetch all providers via `providerApi.getAll()`
|
||||
3. Show grouped dropdown:
|
||||
```
|
||||
Ollama
|
||||
├─ llama3.2
|
||||
├─ llama3.1
|
||||
└─ mistral
|
||||
OpenAI
|
||||
├─ gpt-4o
|
||||
└─ gpt-4-turbo
|
||||
```
|
||||
4. User selects provider + model
|
||||
5. Call `chatSessionApi.update(sessionId, { provider: providerId, selectedModel: modelId })`
|
||||
6. Update UI to show new selection
|
||||
7. **Next prompt** uses new settings (current turn unaffected)
|
||||
|
||||
### 7.2 Drone Message Handler Tests
|
||||
- **Location:** `gadget-drone/tests/message-handlers.test.ts`
|
||||
- **Tests:**
|
||||
- `onRequestSessionLock` validates registration
|
||||
- `onProcessWorkOrder` accepts and processes
|
||||
- Workspace mode transitions work correctly
|
||||
- **Status:** ⬜ Pending
|
||||
|
||||
### 7.3 Agent Service Tests
|
||||
- **Location:** `gadget-drone/tests/agent-service.test.ts`
|
||||
- **Tests:**
|
||||
- AWL loop emits `thinking`, `response`, `toolCall` events
|
||||
- Tool calls are executed and responses captured
|
||||
- `workOrderComplete` emitted on finish
|
||||
- **Status:** ⬜ Pending
|
||||
|
||||
### 7.4 Workspace Persistence Tests
|
||||
- **Location:** `gadget-drone/tests/workspace.test.ts`
|
||||
- **Tests:**
|
||||
- Workspace validation creates `.gadget/` directory
|
||||
- Work order cache written/removed correctly
|
||||
- Crash recovery flow works end-to-end
|
||||
- **Status:** ⬜ Pending
|
||||
|
||||
### 7.5 Type Mapper Tests
|
||||
- **Location:** `gadget-drone/tests/type-mappers.test.ts`
|
||||
- **Tests:**
|
||||
- `IAiProvider` DB → runtime conversion
|
||||
- `ToolCallMessage` → `IChatToolCall` conversion
|
||||
- **Status:** ⬜ Pending
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Provider + model dropdown works
|
||||
- [ ] Selection updates ChatSession
|
||||
- [ ] Next prompt uses new model
|
||||
- [ ] UI reflects current selection
|
||||
|
||||
---
|
||||
|
||||
## Phase 8: Documentation Cleanup ⚠️ PARTIALLY COMPLETE
|
||||
### 6.7 End-to-End Tests ⬜ PENDING
|
||||
|
||||
### 8.1 Remove Bull Queue References
|
||||
- **Files:**
|
||||
- `gadget-drone/docs/agentic-workflow-loop.md`
|
||||
- `gadget-drone/AGENTS.md`
|
||||
- **Action:** Remove all Bull queue references, document Socket.IO-only approach
|
||||
- **Status:** ⬜ Deferred to next turn
|
||||
**File:** `gadget-code/tests/e2e/chat-session.test.ts`
|
||||
|
||||
### 8.2 Update AWL Interface Documentation
|
||||
- **Files:**
|
||||
- `gadget-code/docs/agentic-workflow-loop.md`
|
||||
- `gadget-drone/docs/agentic-workflow-loop.md`
|
||||
- **Action:** Delete interface definitions, reference `@gadget/api` only
|
||||
- **Status:** ⬜ Deferred to next turn
|
||||
**Test Strategy:**
|
||||
- Full mock of AI service (no external dependencies)
|
||||
- Mock returns deterministic responses for testing
|
||||
- Test positive and negative paths
|
||||
- Validate business logic, not AI behavior
|
||||
|
||||
### 8.3 Update foundation-todo.md
|
||||
- **Action:** Mark completed items, update as work progresses
|
||||
- **Status:** ✅ Complete
|
||||
**Test Scenarios:**
|
||||
|
||||
1. **Complete Chat Session Flow:**
|
||||
- Sign in
|
||||
- Navigate to project
|
||||
- Select available drone
|
||||
- Create chat session with provider/model
|
||||
- Submit prompt
|
||||
- Verify user prompt appears in chat
|
||||
- Verify ChatTurn created in database
|
||||
- Verify mock response displayed
|
||||
|
||||
2. **Model Selection:**
|
||||
- Open chat session
|
||||
- Change provider/model in sidebar
|
||||
- Submit prompt
|
||||
- Verify new model used in ChatTurn
|
||||
|
||||
3. **Tool Call Display:**
|
||||
- Submit prompt that triggers tool calls (mocked)
|
||||
- Verify tool call summary in chat
|
||||
- Click tool call → inspector opens
|
||||
- Verify full details in inspector
|
||||
|
||||
4. **Session Settings:**
|
||||
- Open session settings (cog icon)
|
||||
- Change session name
|
||||
- Save → verify name updates
|
||||
- Change mode
|
||||
- Save → verify mode updates
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] All E2E tests pass
|
||||
- [ ] Tests use mocked AI service
|
||||
- [ ] Tests are deterministic and repeatable
|
||||
- [ ] No external API dependencies
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria ✅ ALL COMPLETE
|
||||
### 6.8 Unit Tests ⬜ PENDING
|
||||
|
||||
By end of this turn:
|
||||
**Files to Create:**
|
||||
- `gadget-code/tests/cli-provider.test.ts` - CLI provider commands
|
||||
- `gadget-code/tests/chat-session-service.test.ts` - Service layer
|
||||
- `gadget-code/tests/chat-session-api.test.ts` - REST controller
|
||||
|
||||
- [x] All TypeScript compilation errors resolved
|
||||
- [x] Message handlers implemented for all socket events
|
||||
- [x] End-to-end prompt submission flow works (IDE→Web→Drone→Web→IDE)
|
||||
- [x] Streaming events (`thinking`, `response`, `toolCall`) routed correctly
|
||||
- [x] Workspace persistence implemented for crash recovery
|
||||
- [x] Unit tests pass for all implemented functionality (21 tests)
|
||||
- [ ] Documentation cleaned up and consistent (Phase 8 - partially deferred)
|
||||
- [x] System ready for Chat Session UI implementation
|
||||
**Test Coverage:**
|
||||
- Provider CRUD operations
|
||||
- Model discovery and caching
|
||||
- Chat session CRUD
|
||||
- Model selection updates
|
||||
- Turn retrieval
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] All unit tests pass
|
||||
- [ ] Mock external dependencies
|
||||
- [ ] Test positive and negative paths
|
||||
|
||||
---
|
||||
|
||||
## Phase 7: Deferred Items
|
||||
|
||||
### 7.1 Error Handling & Concurrency ⬜ DEFERRED
|
||||
|
||||
- Error propagation from drone
|
||||
- Concurrency control (reject multiple work orders)
|
||||
- Timeout & heartbeat mechanism
|
||||
|
||||
**Rationale:** Can be added after basic flow is working and tested
|
||||
|
||||
### 7.2 Documentation Cleanup ⬜ DEFERRED
|
||||
|
||||
- Remove Bull queue references from docs
|
||||
- Update AWL documentation
|
||||
- Document Socket.IO-only approach
|
||||
|
||||
**Rationale:** Focus on implementation first, docs after validation
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria for This Turn
|
||||
|
||||
By end of this turn, the User can:
|
||||
|
||||
- [x] Load a Project in Project Manager
|
||||
- [ ] Select a registered gadget-drone instance (online, available)
|
||||
- [ ] Create a new Chat Session with provider + model selection
|
||||
- [ ] Enter the Chat Session view correctly configured
|
||||
- [ ] Submit a prompt for processing
|
||||
- [ ] See streaming responses (thinking, response, tool calls)
|
||||
- [ ] View tool call details in inspector
|
||||
- [ ] Change model/provider for next prompt
|
||||
- [ ] Edit session settings (name, mode)
|
||||
|
||||
**Tests:**
|
||||
- [ ] Unit tests for CLI provider commands
|
||||
- [ ] Unit tests for Chat Session service + API
|
||||
- [ ] E2E test for complete flow (sign in → submit prompt)
|
||||
- [ ] All tests pass with mocked AI service (no external deps)
|
||||
|
||||
---
|
||||
|
||||
## Design Decisions
|
||||
|
||||
1. **AI Provider CLI:** All provider management via CLI (no admin UI)
|
||||
2. **Model Discovery:** Probe on add, update in-place (preserve _id)
|
||||
3. **Session Naming:** Auto-generate from first prompt
|
||||
4. **Drone Filtering:** Show online drones only (filter offline)
|
||||
5. **Test Strategy:** Full mock, deterministic, no external services
|
||||
6. **Chat Display:** Natural language flow, tool calls as one-line summaries
|
||||
7. **Tool Inspectors:** Tabbed panel in Session sidebar for details
|
||||
8. **Model Selection:** Always available in Session sidebar, affects next prompt
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Remain on feature branch throughout implementation
|
||||
- Commit frequently to git with descriptive messages
|
||||
- Ask for clarification when encountering ambiguous requirements
|
||||
- Follow existing code conventions and patterns
|
||||
- All code must include unit tests
|
||||
- Keep this document up to date as work progresses
|
||||
- Follow existing code conventions
|
||||
- All code must include tests
|
||||
- Prefer more status/data, not less (observability)
|
||||
- Ask for help when stuck (no workarounds/shortcuts)
|
||||
- Commit frequently with descriptive messages
|
||||
- Keep this document updated as work progresses
|
||||
|
||||
@ -8,6 +8,7 @@ import Home from './pages/Home';
|
||||
import ProjectManager from './pages/ProjectManager';
|
||||
import SignIn from './pages/SignIn';
|
||||
import SignUp from './pages/SignUp';
|
||||
import ChatSessionView from './pages/ChatSessionView';
|
||||
|
||||
const TOKEN_KEY = 'dtp_auth_token';
|
||||
const USER_KEY = 'dtp_user';
|
||||
@ -116,6 +117,7 @@ export default function App() {
|
||||
<Route path="/projects" element={<ProjectManager user={user} />} />
|
||||
<Route path="/projects/new" element={<ProjectManager user={user} />} />
|
||||
<Route path="/projects/:slug" element={<ProjectManager user={user} />} />
|
||||
<Route path="/projects/:projectId/chat-session/:sessionId" element={<ChatSessionView />} />
|
||||
<Route
|
||||
path="/sign-in"
|
||||
element={
|
||||
|
||||
@ -121,4 +121,129 @@ export interface DroneRegistration {
|
||||
|
||||
export const droneApi = {
|
||||
getAll: () => api.get<DroneRegistration[]>('/api/v1/drone/registration'),
|
||||
};
|
||||
|
||||
export interface AiModelCapabilities {
|
||||
canCallTools: boolean;
|
||||
hasVision: boolean;
|
||||
hasEmbedding: boolean;
|
||||
hasThinking: boolean;
|
||||
isInstructTuned: boolean;
|
||||
}
|
||||
|
||||
export interface AiModelSettings {
|
||||
temperature?: number;
|
||||
topP?: number;
|
||||
topK?: number;
|
||||
numCtx?: number;
|
||||
}
|
||||
|
||||
export interface AiModel {
|
||||
id: string;
|
||||
name: string;
|
||||
parameterCount?: number;
|
||||
parameterLabel?: string;
|
||||
contextWindow?: number;
|
||||
capabilities: AiModelCapabilities;
|
||||
settings?: AiModelSettings;
|
||||
}
|
||||
|
||||
export interface AiProvider {
|
||||
_id: string;
|
||||
name: string;
|
||||
apiType: 'ollama' | 'openai';
|
||||
baseUrl: string;
|
||||
enabled: boolean;
|
||||
models: AiModel[];
|
||||
lastModelRefresh: string;
|
||||
}
|
||||
|
||||
export const providerApi = {
|
||||
getAll: () => api.get<AiProvider[]>('/api/v1/providers'),
|
||||
get: (id: string) => api.get<AiProvider>(`/api/v1/providers/${id}`),
|
||||
};
|
||||
|
||||
export enum ChatSessionMode {
|
||||
Plan = 'plan',
|
||||
Build = 'build',
|
||||
Test = 'test',
|
||||
Ship = 'ship',
|
||||
Develop = 'dev',
|
||||
}
|
||||
|
||||
export interface ChatSessionStats {
|
||||
turnCount: number;
|
||||
toolCallCount: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
}
|
||||
|
||||
export interface ChatSession {
|
||||
_id: string;
|
||||
createdAt: string;
|
||||
lastMessageAt?: string;
|
||||
user: string | any;
|
||||
project: string | any;
|
||||
name: string;
|
||||
mode: ChatSessionMode;
|
||||
provider: string | AiProvider;
|
||||
selectedModel: string;
|
||||
stats: ChatSessionStats;
|
||||
pins: Array<{ _id?: string; content: string }>;
|
||||
}
|
||||
|
||||
export interface ChatTurnStats {
|
||||
toolCallCount: number;
|
||||
inputTokens: number;
|
||||
thinkingTokenCount: number;
|
||||
responseTokens: number;
|
||||
durationMs: number;
|
||||
durationLabel: string;
|
||||
}
|
||||
|
||||
export interface ChatTurnPrompts {
|
||||
user: string;
|
||||
system?: string;
|
||||
}
|
||||
|
||||
export interface ChatTurn {
|
||||
_id: string;
|
||||
createdAt: string;
|
||||
user: string | any;
|
||||
project: string | any;
|
||||
session: string | ChatSession;
|
||||
provider: string | AiProvider;
|
||||
llm: string;
|
||||
mode: ChatSessionMode;
|
||||
status: 'processing' | 'finished' | 'error';
|
||||
prompts: ChatTurnPrompts;
|
||||
thinking?: string;
|
||||
response?: string;
|
||||
toolCalls: Array<{
|
||||
callId: string;
|
||||
name: string;
|
||||
parameters?: string;
|
||||
response?: string;
|
||||
}>;
|
||||
subagents: any[];
|
||||
stats: ChatTurnStats;
|
||||
}
|
||||
|
||||
export const chatSessionApi = {
|
||||
getAll: (projectId?: string) =>
|
||||
api.get<ChatSession[]>(
|
||||
`/api/v1/chat-sessions${projectId ? `?projectId=${projectId}` : ''}`
|
||||
),
|
||||
get: (id: string) => api.get<ChatSession>(`/api/v1/chat-sessions/${id}`),
|
||||
create: (data: {
|
||||
projectId: string;
|
||||
providerId: string;
|
||||
selectedModel: string;
|
||||
mode?: ChatSessionMode;
|
||||
name?: string;
|
||||
}) => api.post<ChatSession>('/api/v1/chat-sessions', data),
|
||||
update: (id: string, data: Partial<ChatSession>) =>
|
||||
api.put<ChatSession>(`/api/v1/chat-sessions/${id}`, data),
|
||||
delete: (id: string) => api.delete<void>(`/api/v1/chat-sessions/${id}`),
|
||||
getTurns: (id: string) => api.get<ChatTurn[]>(`/api/v1/chat-sessions/${id}/turns`),
|
||||
};
|
||||
@ -1,7 +1,25 @@
|
||||
import { createContext } from 'react';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
|
||||
const SOCKET_URL = '';
|
||||
|
||||
export interface ServerToClientEvents {
|
||||
thinking: (content: string) => void;
|
||||
response: (content: string) => void;
|
||||
toolCall: (callId: string, name: string, params: string, response: string) => void;
|
||||
workOrderComplete: (turnId: string, success: boolean, message?: string) => void;
|
||||
}
|
||||
|
||||
export interface ClientToServerEvents {
|
||||
submitPrompt: (content: string) => void;
|
||||
requestSessionLock: (
|
||||
registration: any,
|
||||
project: any,
|
||||
chatSession: any,
|
||||
cb: (success: boolean, chatSessionId: string) => void
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface SocketEvents {
|
||||
'agent:thinking': (data: { agentId: string; thinking: string }) => void;
|
||||
'agent:response': (data: { agentId: string; chunk: string }) => void;
|
||||
@ -26,6 +44,10 @@ class SocketClient {
|
||||
return this.socket?.connected ?? false;
|
||||
}
|
||||
|
||||
get socket(): Socket | null {
|
||||
return this.socket;
|
||||
}
|
||||
|
||||
connect(token: string): void {
|
||||
if (this.socket?.connected) {
|
||||
return;
|
||||
@ -44,6 +66,23 @@ class SocketClient {
|
||||
reconnectionDelayMax: 5000,
|
||||
});
|
||||
|
||||
// Forward server events to our event listeners
|
||||
this.socket.on('thinking', (content: string) => {
|
||||
this.emit('thinking', content);
|
||||
});
|
||||
|
||||
this.socket.on('response', (content: string) => {
|
||||
this.emit('response', content);
|
||||
});
|
||||
|
||||
this.socket.on('toolCall', (callId: string, name: string, params: string, response: string) => {
|
||||
this.emit('toolCall', callId, name, params, response);
|
||||
});
|
||||
|
||||
this.socket.on('workOrderComplete', (turnId: string, success: boolean, message?: string) => {
|
||||
this.emit('workOrderComplete', turnId, success, message);
|
||||
});
|
||||
|
||||
this.socket.on('connect', () => {
|
||||
this.reconnectAttempts = 0;
|
||||
this.emit('connect');
|
||||
@ -93,6 +132,14 @@ class SocketClient {
|
||||
this.socket.emit(event, ...args);
|
||||
}
|
||||
}
|
||||
|
||||
emitServer<K extends keyof ClientToServerEvents>(event: K, ...args: Parameters<ClientToServerEvents[K]>): void {
|
||||
if (this.socket?.connected) {
|
||||
this.socket.emit(event, ...args);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const socketClient = new SocketClient();
|
||||
export const socketClient = new SocketClient();
|
||||
|
||||
export const SocketContext = createContext<Socket | null>(null);
|
||||
7
gadget-code/frontend/src/lib/useSocket.ts
Normal file
7
gadget-code/frontend/src/lib/useSocket.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { useContext } from 'react';
|
||||
import { SocketContext } from './socket';
|
||||
|
||||
export function useSocket() {
|
||||
const socket = useContext(SocketContext);
|
||||
return socket;
|
||||
}
|
||||
415
gadget-code/frontend/src/pages/ChatSessionView.tsx
Normal file
415
gadget-code/frontend/src/pages/ChatSessionView.tsx
Normal file
@ -0,0 +1,415 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { socketClient } from '../lib/socket';
|
||||
import { chatSessionApi, projectApi, type ChatSession, type ChatTurn, type Project } from '../lib/api';
|
||||
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
role: 'user' | 'assistant' | 'system';
|
||||
content: string;
|
||||
thinking?: string;
|
||||
toolCalls?: Array<{
|
||||
callId: string;
|
||||
name: string;
|
||||
parameters?: string;
|
||||
response?: string;
|
||||
}>;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
export default function ChatSessionView() {
|
||||
const { projectId, sessionId } = useParams<{ projectId: string; sessionId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const socket = socketClient.socket;
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [session, setSession] = useState<ChatSession | null>(null);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [promptInput, setPromptInput] = useState('');
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadSessionData();
|
||||
}, [projectId, sessionId]);
|
||||
|
||||
useEffect(() => {
|
||||
setupSocketListeners();
|
||||
return () => cleanupSocketListeners();
|
||||
}, [sessionId]);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
const loadSessionData = async () => {
|
||||
try {
|
||||
// Load project
|
||||
if (projectId) {
|
||||
const projectData = await projectApi.get(projectId);
|
||||
setProject(projectData);
|
||||
}
|
||||
|
||||
// Load chat session
|
||||
if (sessionId) {
|
||||
const sessionData = await chatSessionApi.get(sessionId);
|
||||
setSession(sessionData);
|
||||
|
||||
// Load existing turns
|
||||
const turns = await chatSessionApi.getTurns(sessionId);
|
||||
const chatMessages: ChatMessage[] = turns.map((turn: ChatTurn) => ({
|
||||
id: turn._id,
|
||||
role: 'user',
|
||||
content: turn.prompts.user,
|
||||
timestamp: new Date(turn.createdAt),
|
||||
}));
|
||||
|
||||
// Add assistant responses
|
||||
turns.forEach((turn: ChatTurn) => {
|
||||
if (turn.thinking || turn.response || turn.toolCalls?.length) {
|
||||
chatMessages.push({
|
||||
id: `${turn._id}-response`,
|
||||
role: 'assistant',
|
||||
content: turn.response || '',
|
||||
thinking: turn.thinking,
|
||||
toolCalls: turn.toolCalls,
|
||||
timestamp: new Date(turn.createdAt),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setMessages(chatMessages);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load session');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const setupSocketListeners = () => {
|
||||
if (!socket) return;
|
||||
|
||||
socket.on('thinking', handleThinking);
|
||||
socket.on('response', handleResponse);
|
||||
socket.on('toolCall', handleToolCall);
|
||||
socket.on('workOrderComplete', handleWorkOrderComplete);
|
||||
};
|
||||
|
||||
const cleanupSocketListeners = () => {
|
||||
if (!socket) return;
|
||||
|
||||
socket.off('thinking', handleThinking);
|
||||
socket.off('response', handleResponse);
|
||||
socket.off('toolCall', handleToolCall);
|
||||
socket.off('workOrderComplete', handleWorkOrderComplete);
|
||||
};
|
||||
|
||||
const handleThinking = (content: string) => {
|
||||
setMessages(prev => {
|
||||
const lastMessage = prev[prev.length - 1];
|
||||
if (lastMessage && lastMessage.role === 'assistant') {
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{
|
||||
...lastMessage,
|
||||
thinking: (lastMessage.thinking || '') + content,
|
||||
},
|
||||
];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
const handleResponse = (content: string) => {
|
||||
setMessages(prev => {
|
||||
const lastMessage = prev[prev.length - 1];
|
||||
if (lastMessage && lastMessage.role === 'assistant') {
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{
|
||||
...lastMessage,
|
||||
content: lastMessage.content + content,
|
||||
},
|
||||
];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
const handleToolCall = (callId: string, name: string, params: string, response: string) => {
|
||||
setMessages(prev => {
|
||||
const lastMessage = prev[prev.length - 1];
|
||||
if (lastMessage && lastMessage.role === 'assistant') {
|
||||
const toolCalls = lastMessage.toolCalls || [];
|
||||
toolCalls.push({ callId, name, parameters: params, response });
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{
|
||||
...lastMessage,
|
||||
toolCalls,
|
||||
},
|
||||
];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
const handleWorkOrderComplete = (turnId: string, success: boolean, message?: string) => {
|
||||
setIsProcessing(false);
|
||||
if (!success) {
|
||||
setError(message || 'Work order failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitPrompt = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!promptInput.trim() || isProcessing || !socket) return;
|
||||
|
||||
const userMessage: ChatMessage = {
|
||||
id: `temp-${Date.now()}`,
|
||||
role: 'user',
|
||||
content: promptInput.trim(),
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setPromptInput('');
|
||||
setIsProcessing(true);
|
||||
setError('');
|
||||
|
||||
// Add assistant message placeholder
|
||||
setMessages(prev => [...prev, {
|
||||
id: `response-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
|
||||
// Emit prompt to backend
|
||||
socketClient.emitServer('submitPrompt', promptInput.trim());
|
||||
};
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center bg-bg-primary">
|
||||
<p className="text-text-muted">Loading chat session...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !session) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center bg-bg-primary">
|
||||
<div className="text-center">
|
||||
<p className="text-red-500 mb-4">{error}</p>
|
||||
<button
|
||||
onClick={() => navigate(`/projects/${projectId}`)}
|
||||
className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Back to Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex bg-bg-primary overflow-hidden">
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{messages.map((message) => (
|
||||
<ChatMessageBubble key={message.id} message={message} />
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Prompt Input */}
|
||||
<div className="border-t border-border-subtle p-4 bg-bg-secondary">
|
||||
<form onSubmit={handleSubmitPrompt} className="flex gap-2">
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={promptInput}
|
||||
onChange={(e) => setPromptInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmitPrompt(e);
|
||||
}
|
||||
}}
|
||||
placeholder="Enter your prompt... (Shift+Enter for new line)"
|
||||
className="flex-1 px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none resize-none"
|
||||
rows={3}
|
||||
disabled={isProcessing}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isProcessing || !promptInput.trim()}
|
||||
className="px-6 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isProcessing ? 'Processing...' : 'Send'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Session Sidebar */}
|
||||
<div className="w-80 border-l border-border-subtle bg-bg-secondary flex flex-col overflow-y-auto">
|
||||
<SessionSidebar session={session} project={project} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatMessageBubble({ message }: { message: ChatMessage }) {
|
||||
const [thinkingExpanded, setThinkingExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`max-w-3xl ${
|
||||
message.role === 'user' ? 'ml-auto' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`rounded p-4 ${
|
||||
message.role === 'user'
|
||||
? 'bg-brand text-white'
|
||||
: 'bg-bg-tertiary border border-border-default'
|
||||
}`}
|
||||
>
|
||||
{message.role === 'assistant' && message.thinking && (
|
||||
<div className="mb-3">
|
||||
<button
|
||||
onClick={() => setThinkingExpanded(!thinkingExpanded)}
|
||||
className="text-xs text-text-muted hover:text-text-secondary flex items-center gap-1"
|
||||
>
|
||||
<span className={`transform transition-transform ${thinkingExpanded ? 'rotate-90' : ''}`}>▶</span>
|
||||
Thinking ({message.thinking.length} chars)
|
||||
</button>
|
||||
{thinkingExpanded && (
|
||||
<div className="mt-2 p-3 bg-bg-secondary rounded text-sm text-text-secondary whitespace-pre-wrap">
|
||||
{message.thinking}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
|
||||
{message.toolCalls && message.toolCalls.length > 0 && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{message.toolCalls.map((toolCall, idx) => (
|
||||
<div
|
||||
key={toolCall.callId || idx}
|
||||
className="p-2 bg-bg-secondary rounded border border-border-default"
|
||||
>
|
||||
<div className="text-xs font-mono text-text-secondary">
|
||||
<span className="text-brand">⚡</span> {toolCall.name}
|
||||
{toolCall.response && (
|
||||
<span className="ml-2 text-green-500">✓</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 text-xs text-text-muted">
|
||||
{message.timestamp.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SessionSidebar({ session, project }: { session: ChatSession | null; project: Project | null }) {
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<p className="text-text-muted">No session loaded</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-2">
|
||||
Session
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">Name</div>
|
||||
<div className="text-text-primary">{session.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">ID</div>
|
||||
<div className="font-mono text-xs text-text-secondary truncate">
|
||||
{session._id}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">Mode</div>
|
||||
<div className="text-text-primary capitalize">{session.mode}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border-subtle pt-4">
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-2">
|
||||
Model
|
||||
</h3>
|
||||
<div className="text-text-primary">
|
||||
{session.selectedModel}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
Provider: {typeof session.provider === 'string' ? 'Loaded' : session.provider?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border-subtle pt-4">
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-2">
|
||||
Stats
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">TC</div>
|
||||
<div className="text-lg font-mono">{session.stats.toolCallCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">FO</div>
|
||||
<div className="text-lg font-mono">0</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-text-muted">SA</div>
|
||||
<div className="text-lg font-mono">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border-subtle pt-4">
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-2">
|
||||
Project
|
||||
</h3>
|
||||
{project ? (
|
||||
<div className="space-y-1">
|
||||
<div className="text-text-primary">{project.name}</div>
|
||||
<div className="font-mono text-xs text-text-secondary">{project.slug}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-text-muted text-sm">Loading...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import type { User, Project } from '../lib/api';
|
||||
import { projectApi } from '../lib/api';
|
||||
import { projectApi, droneApi, chatSessionApi, type DroneRegistration, type ChatSession, type AiProvider, providerApi } from '../lib/api';
|
||||
|
||||
interface ProjectManagerProps {
|
||||
user: User | null;
|
||||
@ -91,7 +91,12 @@ function NewProjectForm({ onCancel, onSuccess }: { onCancel: () => void; onSucce
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectInspector({ project, onDelete }: { project: Project; onDelete: () => void }) {
|
||||
interface ProjectInspectorProps {
|
||||
project: Project;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function ProjectInspector({ project, onDelete }: ProjectInspectorProps) {
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const handleDelete = async () => {
|
||||
@ -110,49 +115,392 @@ function ProjectInspector({ project, onDelete }: { project: Project; onDelete: (
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-lg">
|
||||
<h2 className="text-xl font-semibold mb-4">Project Inspector</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-text-muted">Name</div>
|
||||
<div className="text-text-primary">{project.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-text-muted">Slug</div>
|
||||
<div className="font-mono text-text-primary">{project.slug}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-text-muted">Git URL</div>
|
||||
<div className="text-text-primary font-mono text-sm">
|
||||
{project.gitUrl || <span className="text-text-muted">Not configured</span>}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="text-xl font-semibold mb-6">Project Inspector</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-bg-secondary border border-border-default rounded">
|
||||
<div className="text-sm text-text-muted mb-1">Name</div>
|
||||
<div className="text-text-primary font-medium">{project.name}</div>
|
||||
</div>
|
||||
<div className="p-4 bg-bg-secondary border border-border-default rounded">
|
||||
<div className="text-sm text-text-muted mb-1">Slug</div>
|
||||
<div className="font-mono text-text-primary">{project.slug}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-text-muted">Status</div>
|
||||
<div className="text-text-primary capitalize">{project.status}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-text-muted">Created</div>
|
||||
<div className="text-text-primary">
|
||||
{new Date(project.createdAt).toLocaleDateString()}
|
||||
|
||||
<div className="p-4 bg-bg-secondary border border-border-default rounded">
|
||||
<div className="text-sm text-text-muted mb-1">Git URL</div>
|
||||
<div className="text-text-primary font-mono text-sm break-all">
|
||||
{project.gitUrl || <span className="text-text-muted">Not configured</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-bg-secondary border border-border-default rounded">
|
||||
<div className="text-sm text-text-muted mb-1">Status</div>
|
||||
<div className="text-text-primary capitalize">
|
||||
<span className={`inline-block w-2 h-2 rounded-full mr-2 ${
|
||||
project.status === 'active' ? 'bg-green-500' :
|
||||
project.status === 'inactive' ? 'bg-yellow-500' : 'bg-gray-500'
|
||||
}`} />
|
||||
{project.status}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-bg-secondary border border-border-default rounded">
|
||||
<div className="text-sm text-text-muted mb-1">Created</div>
|
||||
<div className="text-text-primary">
|
||||
{new Date(project.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-border-subtle">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="px-4 py-2 border border-red-600 text-red-500 rounded hover:bg-red-900/20 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deleting ? 'Deleting...' : 'Delete Project'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-border-subtle">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="px-4 py-2 border border-red-600 text-red-500 rounded hover:bg-red-900/20 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deleting ? 'Deleting...' : 'Delete Project'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-semibold mb-4">Chat Sessions</h3>
|
||||
<div className="text-text-muted text-sm">
|
||||
No chat sessions yet. Open a chat to start working on this project.
|
||||
interface RightSidebarProps {
|
||||
project: Project;
|
||||
onOpenChatSession: (sessionId: string) => void;
|
||||
}
|
||||
|
||||
function RightSidebar({ project, onOpenChatSession }: RightSidebarProps) {
|
||||
const [drones, setDrones] = useState<DroneRegistration[]>([]);
|
||||
const [chatSessions, setChatSessions] = useState<ChatSession[]>([]);
|
||||
const [providers, setProviders] = useState<AiProvider[]>([]);
|
||||
const [selectedDrone, setSelectedDrone] = useState<DroneRegistration | null>(null);
|
||||
const [showNewChatModal, setShowNewChatModal] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [project]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Load available drones only (filter out offline)
|
||||
const allDrones = await droneApi.getAll();
|
||||
const availableDrones = allDrones.filter(d => d.status !== 'offline');
|
||||
setDrones(availableDrones);
|
||||
|
||||
// Load chat sessions for this project
|
||||
const sessions = await chatSessionApi.getAll(project._id);
|
||||
setChatSessions(sessions);
|
||||
|
||||
// Load providers for new chat session
|
||||
const allProviders = await providerApi.getAll();
|
||||
setProviders(allProviders);
|
||||
} catch (err) {
|
||||
console.error('Failed to load sidebar data', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDrone = (drone: DroneRegistration) => {
|
||||
setSelectedDrone(drone);
|
||||
};
|
||||
|
||||
const handleCreateChatSession = async (data: {
|
||||
providerId: string;
|
||||
selectedModel: string;
|
||||
mode: string;
|
||||
name?: string;
|
||||
}) => {
|
||||
try {
|
||||
const session = await chatSessionApi.create({
|
||||
projectId: project._id,
|
||||
providerId: data.providerId,
|
||||
selectedModel: data.selectedModel,
|
||||
mode: data.mode as any,
|
||||
name: data.name,
|
||||
});
|
||||
setShowNewChatModal(false);
|
||||
onOpenChatSession(session._id);
|
||||
await loadData(); // Refresh list
|
||||
} catch (err) {
|
||||
console.error('Failed to create chat session', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside className="w-80 border-l border-border-subtle bg-bg-secondary flex flex-col overflow-hidden">
|
||||
{/* Available Drones Section - 40% of available space */}
|
||||
<div className="flex flex-col min-h-0" style={{ flex: '0 0 40%' }}>
|
||||
<div className="p-3 border-b border-border-subtle">
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
|
||||
Available Drones ({drones.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
||||
{loading ? (
|
||||
<p className="text-sm text-text-muted p-2">Loading...</p>
|
||||
) : drones.length === 0 ? (
|
||||
<div className="text-text-muted text-sm p-2">
|
||||
No available drones. Start a gadget-drone instance to begin working.
|
||||
</div>
|
||||
) : (
|
||||
drones.map((drone) => (
|
||||
<div
|
||||
key={drone._id}
|
||||
className={`p-3 border rounded transition-colors ${
|
||||
selectedDrone?._id === drone._id
|
||||
? 'border-brand bg-bg-tertiary'
|
||||
: 'border-border-default bg-bg-tertiary hover:bg-bg-elevated'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
drone.status === 'available'
|
||||
? 'bg-green-500'
|
||||
: drone.status === 'busy'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-gray-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="font-mono text-sm font-medium">{drone.hostname}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleSelectDrone(drone)}
|
||||
disabled={drone.status === 'busy'}
|
||||
className={`px-2 py-1 text-xs rounded ${
|
||||
selectedDrone?._id === drone._id
|
||||
? 'bg-brand text-white'
|
||||
: drone.status === 'busy'
|
||||
? 'bg-bg-tertiary text-text-muted cursor-not-allowed'
|
||||
: 'border border-border-default hover:bg-bg-elevated'
|
||||
}`}
|
||||
>
|
||||
{selectedDrone?._id === drone._id ? 'Selected' : 'Select'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xs text-text-muted truncate">
|
||||
{drone.workspaceDir}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
Registered: {new Date(drone.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Sessions Section - 60% of available space */}
|
||||
<div className="flex flex-col min-h-0" style={{ flex: '0 0 60%' }}>
|
||||
<div className="p-3 border-b border-border-subtle flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
|
||||
Chat Sessions ({chatSessions.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
||||
{loading ? (
|
||||
<p className="text-sm text-text-muted p-2">Loading...</p>
|
||||
) : chatSessions.length === 0 ? (
|
||||
<div className="text-text-muted text-sm p-2">
|
||||
No chat sessions yet. Create a new session to start working.
|
||||
</div>
|
||||
) : (
|
||||
chatSessions.map((session) => (
|
||||
<div
|
||||
key={session._id}
|
||||
className="p-3 border border-border-default rounded bg-bg-tertiary hover:bg-bg-elevated transition-colors cursor-pointer"
|
||||
onClick={() => onOpenChatSession(session._id)}
|
||||
>
|
||||
<div className="font-medium text-text-primary text-sm mb-1">
|
||||
{session.name}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted flex items-center gap-2">
|
||||
<span className="capitalize">{session.mode}</span>
|
||||
<span>•</span>
|
||||
<span className="truncate">{session.selectedModel}</span>
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
{new Date(session.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Chat Session Button - Fixed at bottom */}
|
||||
<div className="p-3 border-t border-border-subtle bg-bg-secondary flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowNewChatModal(true)}
|
||||
disabled={!selectedDrone}
|
||||
className="w-full px-4 py-2.5 bg-brand text-white rounded hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={!selectedDrone ? 'Select a drone first' : 'Create new chat session'}
|
||||
>
|
||||
[New Chat Session]
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* New Chat Session Modal */}
|
||||
{showNewChatModal && (
|
||||
<NewChatSessionModal
|
||||
providers={providers}
|
||||
selectedDrone={selectedDrone}
|
||||
onCancel={() => setShowNewChatModal(false)}
|
||||
onCreate={handleCreateChatSession}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface NewChatSessionModalProps {
|
||||
providers: AiProvider[];
|
||||
selectedDrone: DroneRegistration | null;
|
||||
onCancel: () => void;
|
||||
onCreate: (data: { providerId: string; selectedModel: string; mode: string; name?: string }) => void;
|
||||
}
|
||||
|
||||
function NewChatSessionModal({ providers, selectedDrone, onCancel, onCreate }: NewChatSessionModalProps) {
|
||||
const [selectedProviderId, setSelectedProviderId] = useState('');
|
||||
const [selectedModel, setSelectedModel] = useState('');
|
||||
const [mode, setMode] = useState('build');
|
||||
const [name, setName] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const selectedProvider = providers.find(p => p._id === selectedProviderId);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedProviderId || !selectedModel) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCreating(true);
|
||||
try {
|
||||
await onCreate({
|
||||
providerId: selectedProviderId,
|
||||
selectedModel,
|
||||
mode,
|
||||
name: name || undefined,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to create chat session', err);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
|
||||
<div className="bg-bg-secondary border border-border-default rounded p-6 w-full max-w-md">
|
||||
<h3 className="text-lg font-semibold mb-4">New Chat Session</h3>
|
||||
{selectedDrone && (
|
||||
<div className="mb-4 p-3 bg-bg-tertiary border border-border-default rounded">
|
||||
<div className="text-xs text-text-muted mb-1">Selected Drone</div>
|
||||
<div className="font-mono text-sm text-text-primary">{selectedDrone.hostname}</div>
|
||||
<div className="text-xs text-text-muted truncate">{selectedDrone.workspaceDir}</div>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-text-secondary mb-1">Session Name (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
|
||||
placeholder="Auto-generated from first prompt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-text-secondary mb-1">AI Provider *</label>
|
||||
<select
|
||||
value={selectedProviderId}
|
||||
onChange={(e) => {
|
||||
setSelectedProviderId(e.target.value);
|
||||
setSelectedModel('');
|
||||
}}
|
||||
className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
|
||||
>
|
||||
<option value="">Select a provider</option>
|
||||
{providers.map((provider) => (
|
||||
<option key={provider._id} value={provider._id}>
|
||||
{provider.name} ({provider.apiType})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{selectedProvider && (
|
||||
<div>
|
||||
<label className="block text-sm text-text-secondary mb-1">Model *</label>
|
||||
<select
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
|
||||
disabled={selectedProvider.models.length === 0}
|
||||
>
|
||||
<option value="">Select a model</option>
|
||||
{selectedProvider.models.map((model) => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name} {model.parameterLabel ? `(${model.parameterLabel})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedProvider.models.length === 0 && (
|
||||
<p className="text-xs text-text-muted mt-1">
|
||||
No models discovered. Run `pnpm cli provider probe {selectedProvider._id}` to discover models.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-text-secondary mb-1">Mode</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => setMode(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
|
||||
>
|
||||
<option value="plan">Plan - Planning and brainstorming</option>
|
||||
<option value="build">Build - Building and coding</option>
|
||||
<option value="test">Test - Testing and debugging</option>
|
||||
<option value="ship">Ship - Finalizing and shipping</option>
|
||||
<option value="dev">Dev - Working on Gadget Code itself</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || !selectedProviderId || !selectedModel}
|
||||
className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50 flex-1"
|
||||
>
|
||||
{creating ? 'Creating...' : 'Create Session'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -201,6 +549,12 @@ export default function ProjectManager({ user }: ProjectManagerProps) {
|
||||
navigate('/projects');
|
||||
};
|
||||
|
||||
const handleOpenChatSession = (sessionId: string) => {
|
||||
if (selectedProject) {
|
||||
navigate(`/projects/${selectedProject.slug}/chat-session/${sessionId}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center bg-bg-primary">
|
||||
@ -218,9 +572,10 @@ export default function ProjectManager({ user }: ProjectManagerProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex bg-bg-primary">
|
||||
<aside className="w-64 border-r border-border-subtle bg-bg-secondary flex flex-col">
|
||||
<div className="p-3 border-b border-border-subtle">
|
||||
<div className="flex-1 flex bg-bg-primary overflow-hidden">
|
||||
{/* Left Sidebar - Project List */}
|
||||
<aside className="w-64 border-r border-border-subtle bg-bg-secondary flex flex-col overflow-hidden">
|
||||
<div className="p-3 border-b border-border-subtle flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowNewForm(true)}
|
||||
className="w-full px-3 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors text-sm font-medium"
|
||||
@ -268,24 +623,38 @@ export default function ProjectManager({ user }: ProjectManagerProps) {
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{showNewForm ? (
|
||||
<NewProjectForm
|
||||
onCancel={() => setShowNewForm(false)}
|
||||
onSuccess={handleProjectCreated}
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<NewProjectForm
|
||||
onCancel={() => setShowNewForm(false)}
|
||||
onSuccess={handleProjectCreated}
|
||||
/>
|
||||
</div>
|
||||
) : selectedProject ? (
|
||||
<ProjectInspector
|
||||
project={selectedProject}
|
||||
onDelete={handleProjectDeleted}
|
||||
/>
|
||||
<>
|
||||
{/* Center - Project Inspector */}
|
||||
<ProjectInspector
|
||||
project={selectedProject}
|
||||
onDelete={handleProjectDeleted}
|
||||
/>
|
||||
|
||||
{/* Right Sidebar - Drones & Chat Sessions */}
|
||||
<RightSidebar
|
||||
project={selectedProject}
|
||||
onOpenChatSession={handleOpenChatSession}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center text-text-muted py-12">
|
||||
<p className="mb-4">Select a project to view details</p>
|
||||
<p className="text-sm">or create a new project to get started</p>
|
||||
<div className="flex-1 flex items-center justify-center bg-bg-primary">
|
||||
<div className="text-center text-text-muted">
|
||||
<p className="mb-4">Select a project to view details</p>
|
||||
<p className="text-sm">or create a new project to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,9 +30,11 @@ export class ApiControllerV1 extends DtpController {
|
||||
basePath = path.join(env.root, "src", "controllers", "api", "v1");
|
||||
}
|
||||
await this.loadChild(path.join(basePath, "auth.js"));
|
||||
await this.loadChild(path.join(basePath, "chat-session.js"));
|
||||
await this.loadChild(path.join(basePath, "contact.js"));
|
||||
await this.loadChild(path.join(basePath, "drone.js"));
|
||||
await this.loadChild(path.join(basePath, "project.js"));
|
||||
await this.loadChild(path.join(basePath, "provider.js"));
|
||||
await this.loadChild(path.join(basePath, "user.js"));
|
||||
}
|
||||
}
|
||||
|
||||
302
gadget-code/src/controllers/api/v1/chat-session.ts
Normal file
302
gadget-code/src/controllers/api/v1/chat-session.ts
Normal file
@ -0,0 +1,302 @@
|
||||
// src/controllers/api/v1/chat-session.ts
|
||||
// Copyright (C) 2026 Robert Colbert <rob.colbert@openplatform.us>
|
||||
// All Rights Reserved
|
||||
|
||||
import { Request, Response } from "express";
|
||||
|
||||
import { DtpController } from "../../../lib/controller.js";
|
||||
import ChatSessionService from "../../../services/chat-session.js";
|
||||
import { ChatSessionMode } from "@gadget/api";
|
||||
|
||||
class ChatSessionController extends DtpController {
|
||||
get name(): string {
|
||||
return "ChatSessionController";
|
||||
}
|
||||
get slug(): string {
|
||||
return "ctrl:api:v1:chat-session";
|
||||
}
|
||||
get route(): string {
|
||||
return "/chat-sessions";
|
||||
}
|
||||
|
||||
async start(): Promise<void> {
|
||||
this.router.get("/", this.requireUser(), this.listSessions.bind(this));
|
||||
this.router.post("/", this.requireUser(), this.createSession.bind(this));
|
||||
this.router.get("/:id", this.requireUser(), this.getSession.bind(this));
|
||||
this.router.put("/:id", this.requireUser(), this.updateSession.bind(this));
|
||||
this.router.delete("/:id", this.requireUser(), this.deleteSession.bind(this));
|
||||
this.router.get("/:id/turns", this.requireUser(), this.getSessionTurns.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/v1/chat-sessions?projectId=:projectId
|
||||
* List chat sessions for a project or user.
|
||||
*/
|
||||
private async listSessions(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const user = req.user;
|
||||
if (!user) {
|
||||
res.status(401).json({ success: false, message: "Unauthorized" });
|
||||
return;
|
||||
}
|
||||
|
||||
const projectId = req.query.projectId as string | undefined;
|
||||
|
||||
let sessions;
|
||||
if (projectId) {
|
||||
sessions = await ChatSessionService.getByProject(projectId);
|
||||
} else {
|
||||
sessions = await ChatSessionService.getByUser(user._id.toHexString());
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: sessions,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to list chat sessions", { error: err.message });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/v1/chat-sessions
|
||||
* Create a new chat session.
|
||||
*/
|
||||
private async createSession(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const user = req.user;
|
||||
if (!user) {
|
||||
res.status(401).json({ success: false, message: "Unauthorized" });
|
||||
return;
|
||||
}
|
||||
|
||||
const { projectId, providerId, selectedModel, mode, name } = req.body;
|
||||
|
||||
if (!projectId) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "projectId is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!providerId) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "providerId is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedModel) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "selectedModel is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const sessionMode = mode
|
||||
? ChatSessionMode[mode as keyof typeof ChatSessionMode]
|
||||
: ChatSessionMode.Build;
|
||||
|
||||
const session = await ChatSessionService.create(
|
||||
user._id.toHexString(),
|
||||
projectId,
|
||||
providerId,
|
||||
selectedModel,
|
||||
sessionMode,
|
||||
name,
|
||||
);
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
data: session,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to create chat session", { error: err.message });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/v1/chat-sessions/:id
|
||||
* Get a specific chat session.
|
||||
*/
|
||||
private async getSession(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
|
||||
if (!id) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "Session ID is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const session = await ChatSessionService.getById(id);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: session,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to get chat session", { error: err.message });
|
||||
|
||||
if (err.message.includes("not found")) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PUT /api/v1/chat-sessions/:id
|
||||
* Update a chat session.
|
||||
*/
|
||||
private async updateSession(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
|
||||
if (!id) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "Session ID is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const updates = req.body;
|
||||
|
||||
// Validate allowed updates
|
||||
const allowedUpdates: Partial<{
|
||||
name: string;
|
||||
provider: string;
|
||||
selectedModel: string;
|
||||
mode: ChatSessionMode;
|
||||
}> = {};
|
||||
|
||||
if (updates.name !== undefined) {
|
||||
allowedUpdates.name = updates.name;
|
||||
}
|
||||
if (updates.provider !== undefined) {
|
||||
allowedUpdates.provider = updates.provider;
|
||||
}
|
||||
if (updates.selectedModel !== undefined) {
|
||||
allowedUpdates.selectedModel = updates.selectedModel;
|
||||
}
|
||||
if (updates.mode !== undefined) {
|
||||
allowedUpdates.mode = ChatSessionMode[updates.mode as keyof typeof ChatSessionMode];
|
||||
}
|
||||
|
||||
const session = await ChatSessionService.update(id, allowedUpdates);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: session,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to update chat session", { error: err.message });
|
||||
|
||||
if (err.message.includes("not found")) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE /api/v1/chat-sessions/:id
|
||||
* Delete a chat session.
|
||||
*/
|
||||
private async deleteSession(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
|
||||
if (!id) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "Session ID is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await ChatSessionService.delete(id);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: "Chat session deleted",
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to delete chat session", { error: err.message });
|
||||
|
||||
if (err.message.includes("not found")) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/v1/chat-sessions/:id/turns
|
||||
* Get all turns for a chat session.
|
||||
*/
|
||||
private async getSessionTurns(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
|
||||
if (!id) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "Session ID is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const turns = await ChatSessionService.getTurns(id);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: turns,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to get chat session turns", { error: err.message });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatSessionController;
|
||||
94
gadget-code/src/controllers/api/v1/provider.ts
Normal file
94
gadget-code/src/controllers/api/v1/provider.ts
Normal file
@ -0,0 +1,94 @@
|
||||
// src/controllers/api/v1/provider.ts
|
||||
// Copyright (C) 2026 Robert Colbert <rob.colbert@openplatform.us>
|
||||
// All Rights Reserved
|
||||
|
||||
import { Request, Response } from "express";
|
||||
|
||||
import { DtpController } from "../../../lib/controller.js";
|
||||
import AiProvider from "../../../models/ai-provider.js";
|
||||
|
||||
class ProviderController extends DtpController {
|
||||
get name(): string {
|
||||
return "ProviderController";
|
||||
}
|
||||
get slug(): string {
|
||||
return "ctrl:api:v1:provider";
|
||||
}
|
||||
get route(): string {
|
||||
return "/providers";
|
||||
}
|
||||
|
||||
async start(): Promise<void> {
|
||||
this.router.get("/", this.requireUser(), this.listProviders.bind(this));
|
||||
this.router.get("/:id", this.requireUser(), this.getProvider.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/v1/providers
|
||||
* List all AI providers.
|
||||
*/
|
||||
private async listProviders(_req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const providers = await AiProvider.find({})
|
||||
.select("-apiKey") // Never expose API keys
|
||||
.sort({ name: 1 })
|
||||
.lean();
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: providers,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to list providers", { error: err.message });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/v1/providers/:id
|
||||
* Get a specific provider by ID.
|
||||
*/
|
||||
private async getProvider(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
|
||||
|
||||
const provider = await AiProvider.findById(id)
|
||||
.select("-apiKey") // Never expose API keys
|
||||
.lean();
|
||||
|
||||
if (!provider) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: "Provider not found",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: provider,
|
||||
});
|
||||
} catch (error) {
|
||||
const err = error as Error;
|
||||
this.log.error("failed to get provider", { error: err.message });
|
||||
|
||||
if (err.message.includes("Cast to ObjectId failed")) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "Invalid provider ID",
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: err.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ProviderController;
|
||||
@ -61,7 +61,7 @@ export const AiProviderSchema = new Schema<IAiProvider>({
|
||||
name: { type: String, required: true },
|
||||
apiType: { type: String, enum: ["ollama", "openai"], required: true },
|
||||
baseUrl: { type: String, required: true },
|
||||
apiKey: { type: String, required: true, select: false },
|
||||
apiKey: { type: String, required: false, select: false, default: "" },
|
||||
enabled: { type: Boolean, default: true, required: true },
|
||||
models: { type: [AiModelSchema], default: [], required: true },
|
||||
lastModelRefresh: { type: Date, default: Date.now },
|
||||
|
||||
223
gadget-code/src/services/chat-session.ts
Normal file
223
gadget-code/src/services/chat-session.ts
Normal file
@ -0,0 +1,223 @@
|
||||
// src/services/chat-session.ts
|
||||
// Copyright (C) 2026 Robert Colbert <rob.colbert@openplatform.us>
|
||||
// All Rights Reserved
|
||||
|
||||
import { Types } from "mongoose";
|
||||
import { IChatSession, ChatSessionMode } from "@gadget/api";
|
||||
|
||||
import { DtpService } from "../lib/service.js";
|
||||
import ChatSession from "../models/chat-session.js";
|
||||
import ChatTurn from "../models/chat-turn.js";
|
||||
import Project from "../models/project.js";
|
||||
import AiProvider from "../models/ai-provider.js";
|
||||
|
||||
class ChatSessionService extends DtpService {
|
||||
get name(): string {
|
||||
return "ChatSessionService";
|
||||
}
|
||||
get slug(): string {
|
||||
return "svc:chat-session";
|
||||
}
|
||||
|
||||
async start(): Promise<void> {
|
||||
this.log.info("started");
|
||||
}
|
||||
|
||||
async stop(): Promise<void> {
|
||||
this.log.info("stopped");
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new chat session.
|
||||
*/
|
||||
async create(
|
||||
userId: string,
|
||||
projectId: string,
|
||||
providerId: string,
|
||||
selectedModel: string,
|
||||
mode: ChatSessionMode = ChatSessionMode.Build,
|
||||
name?: string,
|
||||
): Promise<IChatSession> {
|
||||
const userObj = new Types.ObjectId(userId);
|
||||
const projectObj = new Types.ObjectId(projectId);
|
||||
const providerObj = new Types.ObjectId(providerId);
|
||||
|
||||
// Validate project exists
|
||||
const project = await Project.findById(projectObj);
|
||||
if (!project) {
|
||||
throw new Error(`Project not found: ${projectId}`);
|
||||
}
|
||||
|
||||
// Validate provider exists
|
||||
const provider = await AiProvider.findById(providerObj);
|
||||
if (!provider) {
|
||||
throw new Error(`AI Provider not found: ${providerId}`);
|
||||
}
|
||||
|
||||
const session = new ChatSession({
|
||||
createdAt: new Date(),
|
||||
user: userObj,
|
||||
project: projectObj,
|
||||
name: name || "New Chat Session",
|
||||
mode,
|
||||
provider: providerObj,
|
||||
selectedModel,
|
||||
stats: {
|
||||
turnCount: 0,
|
||||
toolCallCount: 0,
|
||||
inputTokens: 0,
|
||||
outputTokens: 0,
|
||||
},
|
||||
pins: [],
|
||||
});
|
||||
|
||||
await session.save();
|
||||
|
||||
this.log.info("chat session created", {
|
||||
sessionId: session._id.toHexString(),
|
||||
projectId,
|
||||
providerId,
|
||||
model: selectedModel,
|
||||
});
|
||||
|
||||
return session;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a chat session by ID.
|
||||
*/
|
||||
async getById(chatSessionId: string): Promise<IChatSession> {
|
||||
const session = await ChatSession.findById(chatSessionId)
|
||||
.populate("user")
|
||||
.populate("project")
|
||||
.populate("provider")
|
||||
.lean();
|
||||
|
||||
if (!session) {
|
||||
throw new Error(`Chat session not found: ${chatSessionId}`);
|
||||
}
|
||||
|
||||
return session as unknown as IChatSession;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all chat sessions for a project.
|
||||
*/
|
||||
async getByProject(projectId: string): Promise<IChatSession[]> {
|
||||
const projectObj = new Types.ObjectId(projectId);
|
||||
const sessions = await ChatSession.find({ project: projectObj })
|
||||
.populate("user")
|
||||
.populate("project")
|
||||
.populate("provider")
|
||||
.sort({ createdAt: -1 })
|
||||
.lean();
|
||||
|
||||
return sessions as unknown as IChatSession[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all chat sessions for a user.
|
||||
*/
|
||||
async getByUser(userId: string): Promise<IChatSession[]> {
|
||||
const userObj = new Types.ObjectId(userId);
|
||||
const sessions = await ChatSession.find({ user: userObj })
|
||||
.populate("user")
|
||||
.populate("project")
|
||||
.populate("provider")
|
||||
.sort({ createdAt: -1 })
|
||||
.lean();
|
||||
|
||||
return sessions as unknown as IChatSession[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a chat session.
|
||||
*/
|
||||
async update(
|
||||
chatSessionId: string,
|
||||
updates: Partial<{
|
||||
name: string;
|
||||
provider: string;
|
||||
selectedModel: string;
|
||||
mode: ChatSessionMode;
|
||||
}>,
|
||||
): Promise<IChatSession> {
|
||||
const session = await ChatSession.findById(chatSessionId);
|
||||
if (!session) {
|
||||
throw new Error(`Chat session not found: ${chatSessionId}`);
|
||||
}
|
||||
|
||||
// Validate provider if changing
|
||||
if (updates.provider) {
|
||||
const provider = await AiProvider.findById(updates.provider);
|
||||
if (!provider) {
|
||||
throw new Error(`AI Provider not found: ${updates.provider}`);
|
||||
}
|
||||
session.provider = new Types.ObjectId(updates.provider);
|
||||
}
|
||||
|
||||
if (updates.name !== undefined) {
|
||||
session.name = updates.name;
|
||||
}
|
||||
if (updates.selectedModel !== undefined) {
|
||||
session.selectedModel = updates.selectedModel;
|
||||
}
|
||||
if (updates.mode !== undefined) {
|
||||
session.mode = updates.mode;
|
||||
}
|
||||
|
||||
await session.save();
|
||||
|
||||
this.log.info("chat session updated", {
|
||||
sessionId: chatSessionId,
|
||||
updates,
|
||||
});
|
||||
|
||||
return session;
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a chat session.
|
||||
*/
|
||||
async delete(chatSessionId: string): Promise<void> {
|
||||
const session = await ChatSession.findByIdAndDelete(chatSessionId);
|
||||
if (!session) {
|
||||
throw new Error(`Chat session not found: ${chatSessionId}`);
|
||||
}
|
||||
|
||||
// Delete all turns associated with this session
|
||||
await ChatTurn.deleteMany({ session: new Types.ObjectId(chatSessionId) });
|
||||
|
||||
this.log.info("chat session deleted", {
|
||||
sessionId: chatSessionId,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all turns for a chat session.
|
||||
*/
|
||||
async getTurns(chatSessionId: string): Promise<any[]> {
|
||||
const sessionObj = new Types.ObjectId(chatSessionId);
|
||||
const turns = await ChatTurn.find({ session: sessionObj })
|
||||
.populate("user")
|
||||
.populate("project")
|
||||
.populate("provider")
|
||||
.sort({ createdAt: 1 })
|
||||
.lean();
|
||||
|
||||
return turns;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a session name from the first prompt.
|
||||
*/
|
||||
generateSessionNameFromPrompt(prompt: string): string {
|
||||
// Take first 50 chars, remove special chars, capitalize
|
||||
const truncated = prompt.slice(0, 50).replace(/[^a-zA-Z0-9\s]/g, "");
|
||||
const words = truncated.trim().split(/\s+/);
|
||||
const name = words.slice(0, 5).join(" ");
|
||||
return name.charAt(0).toUpperCase() + name.slice(1);
|
||||
}
|
||||
}
|
||||
|
||||
export default new ChatSessionService();
|
||||
@ -9,12 +9,14 @@ import "./lib/db.js";
|
||||
|
||||
import ApiClient, { ApiClientStatus } from "./models/api-client.js";
|
||||
import User from "./models/user.js";
|
||||
import AiProvider from "./models/ai-provider.js";
|
||||
|
||||
import ApiClientService from "./services/api-client.js";
|
||||
import CryptoService from "./services/crypto.js";
|
||||
import UserService from "./services/user.js";
|
||||
|
||||
import { DtpProcess } from "./lib/process.js";
|
||||
import { createAiApi, type IAiLogger } from "@gadget/ai";
|
||||
|
||||
class DtpWebCli extends DtpProcess {
|
||||
get name(): string {
|
||||
@ -43,6 +45,9 @@ class DtpWebCli extends DtpProcess {
|
||||
case "user":
|
||||
return this.onUserCmd(argv);
|
||||
|
||||
case "provider":
|
||||
return this.onProviderCmd(argv);
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -319,12 +324,196 @@ class DtpWebCli extends DtpProcess {
|
||||
this.log.info(`user ${email} password changed`);
|
||||
}
|
||||
|
||||
async onProviderCmd(argv: string[]): Promise<void> {
|
||||
const action = argv.shift();
|
||||
if (!action) {
|
||||
throw new Error("must specify provider command action");
|
||||
}
|
||||
switch (action) {
|
||||
case "add":
|
||||
return this.onProviderAdd(argv);
|
||||
case "ls":
|
||||
return this.onProviderList(argv);
|
||||
case "status":
|
||||
return this.onProviderSetStatus(argv);
|
||||
case "remove":
|
||||
return this.onProviderRemove(argv);
|
||||
case "probe":
|
||||
return this.onProviderProbe(argv);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
throw new Error(`unknown provider command action: ${action}`);
|
||||
}
|
||||
|
||||
async onProviderAdd(argv: string[]): Promise<void> {
|
||||
const name = argv.shift();
|
||||
if (!name) {
|
||||
throw new Error("must specify provider name");
|
||||
}
|
||||
|
||||
const sdkType = argv.shift();
|
||||
if (!sdkType) {
|
||||
throw new Error("must specify SDK type (ollama or openai)");
|
||||
}
|
||||
if (sdkType !== "ollama" && sdkType !== "openai") {
|
||||
throw new Error("SDK type must be 'ollama' or 'openai'");
|
||||
}
|
||||
|
||||
const baseUrl = argv.shift();
|
||||
if (!baseUrl) {
|
||||
throw new Error("must specify base URL");
|
||||
}
|
||||
|
||||
const apiKey = argv.shift();
|
||||
if (sdkType === "openai" && !apiKey) {
|
||||
throw new Error("API key required for OpenAI providers");
|
||||
}
|
||||
|
||||
// Check if provider with this name already exists
|
||||
const existing = await AiProvider.findOne({ name });
|
||||
if (existing) {
|
||||
throw new Error(`provider with name '${name}' already exists`);
|
||||
}
|
||||
|
||||
const provider = new AiProvider({
|
||||
name,
|
||||
apiType: sdkType,
|
||||
baseUrl,
|
||||
apiKey: apiKey || "",
|
||||
enabled: true,
|
||||
models: [],
|
||||
lastModelRefresh: new Date(),
|
||||
});
|
||||
await provider.save();
|
||||
|
||||
this.log.info("provider added", {
|
||||
_id: provider._id.toHexString(),
|
||||
name: provider.name,
|
||||
apiType: provider.apiType,
|
||||
baseUrl: provider.baseUrl,
|
||||
});
|
||||
|
||||
// Auto-probe for models
|
||||
this.log.info("probing provider for models...");
|
||||
await this.onProviderProbe([provider._id.toHexString()]);
|
||||
}
|
||||
|
||||
async onProviderList(_argv: string[]): Promise<void> {
|
||||
const providers = await AiProvider.find({}).sort({ name: 1 }).lean();
|
||||
|
||||
console.log("Name".padEnd(20), "ID".padEnd(24), "Type".padEnd(8), "URL".padEnd(30), "Models", "Enabled");
|
||||
console.log(
|
||||
"------------------------------------------------------------------------------------------------------------"
|
||||
);
|
||||
for (const provider of providers) {
|
||||
console.log(
|
||||
provider.name.padEnd(20),
|
||||
provider._id.toString().padEnd(24),
|
||||
provider.apiType.padEnd(8),
|
||||
provider.baseUrl.padEnd(30),
|
||||
String(provider.models.length).padEnd(6),
|
||||
provider.enabled ? "Yes" : "No"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async onProviderSetStatus(argv: string[]): Promise<void> {
|
||||
const providerId = argv.shift();
|
||||
if (!providerId) {
|
||||
throw new Error("provider ID is required");
|
||||
}
|
||||
const providerIdObj = Types.ObjectId.createFromHexString(providerId);
|
||||
const provider = await AiProvider.findById(providerIdObj);
|
||||
if (!provider) {
|
||||
throw new Error("Provider not found");
|
||||
}
|
||||
|
||||
const status = argv.shift();
|
||||
if (!status) {
|
||||
throw new Error("New provider status is required (active or inactive)");
|
||||
}
|
||||
if (status !== "active" && status !== "inactive") {
|
||||
throw new Error("Status must be 'active' or 'inactive'");
|
||||
}
|
||||
|
||||
provider.enabled = status === "active";
|
||||
await provider.save();
|
||||
|
||||
this.log.info("Provider status updated", {
|
||||
_id: providerId,
|
||||
enabled: provider.enabled
|
||||
});
|
||||
}
|
||||
|
||||
async onProviderRemove(argv: string[]): Promise<void> {
|
||||
const providerId = argv.shift();
|
||||
if (!providerId) {
|
||||
throw new Error("provider ID is required");
|
||||
}
|
||||
const providerIdObj = Types.ObjectId.createFromHexString(providerId);
|
||||
const provider = await AiProvider.findByIdAndDelete(providerIdObj);
|
||||
if (!provider) {
|
||||
throw new Error("Provider not found");
|
||||
}
|
||||
this.log.info("Provider removed", {
|
||||
_id: providerId,
|
||||
name: provider.name
|
||||
});
|
||||
}
|
||||
|
||||
async onProviderProbe(argv: string[]): Promise<void> {
|
||||
const providerId = argv.shift();
|
||||
if (!providerId) {
|
||||
throw new Error("provider ID is required");
|
||||
}
|
||||
const providerIdObj = Types.ObjectId.createFromHexString(providerId);
|
||||
const provider = await AiProvider.findById(providerIdObj);
|
||||
if (!provider) {
|
||||
throw new Error("Provider not found");
|
||||
}
|
||||
|
||||
this.log.info("probing provider for models", {
|
||||
name: provider.name,
|
||||
apiType: provider.apiType,
|
||||
});
|
||||
|
||||
// Create CLI logger that outputs to console
|
||||
const cliLogger: IAiLogger = {
|
||||
debug: async (msg, meta) => this.log.debug(msg, meta),
|
||||
info: async (msg, meta) => this.log.info(msg, meta),
|
||||
warn: async (msg, meta) => this.log.warn(msg, meta),
|
||||
error: async (msg, meta) => this.log.error(msg, meta),
|
||||
};
|
||||
|
||||
// Create AI API instance
|
||||
createAiApi(
|
||||
{
|
||||
_id: provider._id.toHexString(),
|
||||
name: provider.name,
|
||||
sdk: provider.apiType,
|
||||
baseUrl: provider.baseUrl,
|
||||
apiKey: provider.apiKey,
|
||||
},
|
||||
cliLogger,
|
||||
);
|
||||
|
||||
// For now, we'll simulate model discovery since listModels/probeModel are stubs
|
||||
// In a real implementation, these would call the provider's API
|
||||
this.log.info("model discovery not yet implemented for this provider type");
|
||||
this.log.info("please add models manually or implement listModels/probeModel");
|
||||
|
||||
provider.lastModelRefresh = new Date();
|
||||
await provider.save();
|
||||
}
|
||||
|
||||
async start(): Promise<void> {
|
||||
await this.startServices();
|
||||
}
|
||||
|
||||
async startServices(): Promise<void> {
|
||||
await ApiClientService.start();
|
||||
await (await import("./services/chat-session.js")).default.start();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
14
gadget-drone/.gadget/workspace.json
Normal file
14
gadget-drone/.gadget/workspace.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"workspaceId": "3cf4240b-dc89-42e4-abc7-170f39ae0c24",
|
||||
"createdAt": "2026-04-29T22:30:06.694Z",
|
||||
"hostname": "mysterymachine",
|
||||
"workspaceDir": "/home/rob/projects/gadget/gadget-drone",
|
||||
"chatSession": null,
|
||||
"lockedProject": null,
|
||||
"projects": [],
|
||||
"registration": {
|
||||
"_id": "69f286d1deefb9cb80aacac0",
|
||||
"status": "available",
|
||||
"registeredAt": "2026-04-29T22:31:45.306Z"
|
||||
}
|
||||
}
|
||||
@ -26,6 +26,7 @@
|
||||
"ansicolor": "^2.0.3",
|
||||
"dayjs": "^1.11.20",
|
||||
"dotenv": "^17.4.2",
|
||||
"mongoose": "^8.16.0",
|
||||
"numeral": "^2.0.6",
|
||||
"ollama": "^0.6.3",
|
||||
"openai": "^6.34.0",
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import os from "node:os";
|
||||
import { GadgetService } from "../lib/service.ts";
|
||||
|
||||
export interface WorkspaceData {
|
||||
@ -127,7 +128,7 @@ class WorkspaceService extends GadgetService {
|
||||
this._workspaceData = {
|
||||
workspaceId: crypto.randomUUID(),
|
||||
createdAt: new Date().toISOString(),
|
||||
hostname: require("node:os").hostname(),
|
||||
hostname: os.hostname(),
|
||||
workspaceDir: workspaceDir,
|
||||
chatSession: null,
|
||||
lockedProject: null,
|
||||
|
||||
@ -263,6 +263,9 @@ importers:
|
||||
dotenv:
|
||||
specifier: ^17.4.2
|
||||
version: 17.4.2
|
||||
mongoose:
|
||||
specifier: ^8.16.0
|
||||
version: 8.23.1
|
||||
numeral:
|
||||
specifier: ^2.0.6
|
||||
version: 2.0.6
|
||||
|
||||
Loading…
Reference in New Issue
Block a user