16 KiB
16 KiB
| phase | plan | type | wave | depends_on | files_modified | autonomous | gap_closure | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 21-chat-foundation | 06 | execute | 1 |
|
true | true |
|
|
Purpose: Complete the two remaining PARTIAL requirements that prevent Phase 21 from fully passing verification. Output: Searchable conversation list with server-side filtering, Cmd+K shortcut to focus search.
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/21-chat-foundation/21-VERIFICATION.mdFrom packages/shared/src/types/chat.ts:
export interface ChatConversationListItem {
id: string;
companyId: string;
title: string | null;
agentId: string | null;
pinnedAt: string | null;
archivedAt: string | null;
updatedAt: string;
lastMessagePreview: string | null;
}
export interface ChatConversationListResponse {
items: ChatConversationListItem[];
hasMore: boolean;
}
From server/src/services/chat.ts:
export function chatService(db: Db) {
return {
async listConversations(
companyId: string,
opts: { cursor?: string; limit?: number; includeArchived?: boolean },
) { ... },
// ... other methods
};
}
From ui/src/hooks/useKeyboardShortcuts.ts:
interface ShortcutHandlers {
onNewIssue?: () => void;
onToggleSidebar?: () => void;
onTogglePanel?: () => void;
}
export function useKeyboardShortcuts({ onNewIssue, onToggleSidebar, onTogglePanel }: ShortcutHandlers) { ... }
From ui/src/api/chat.ts:
export const chatApi = {
listConversations(companyId: string, opts?: { cursor?: string; limit?: number }) { ... },
// ... other methods
};
From ui/src/hooks/useChatConversations.ts:
export function useChatConversations(companyId: string | null) {
// useInfiniteQuery with queryKey: ["chat", "conversations", companyId]
// queryFn calls chatApi.listConversations(companyId!, { cursor: pageParam })
}
From ui/src/components/Layout.tsx (lines 159-163):
useKeyboardShortcuts({
onNewIssue: () => openNewIssue(),
onToggleSidebar: toggleSidebar,
onTogglePanel: togglePanel,
});
**server/src/routes/chat.ts** — Pass search and agentId from query params:
1. In the GET `/companies/:companyId/conversations` handler, destructure `search` and `agentId` from `req.query` alongside the existing `cursor, limit, includeArchived`
2. Pass them to `svc.listConversations`: `search: search as string | undefined, agentId: agentId as string | undefined`
**ui/src/api/chat.ts** — Add search and agentId to the API client:
1. Extend `listConversations` opts type: `opts?: { cursor?: string; limit?: number; search?: string; agentId?: string }`
2. In the URLSearchParams builder, add: `if (opts?.search) params.set("search", opts.search)` and `if (opts?.agentId) params.set("agentId", opts.agentId)`
**ui/src/hooks/useChatConversations.ts** — Accept search param and pass through:
1. Change signature: `export function useChatConversations(companyId: string | null, opts?: { search?: string })`
2. Add `opts?.search` to the queryKey: `queryKey: ["chat", "conversations", companyId, opts?.search ?? ""]`
3. In the queryFn, pass search: `chatApi.listConversations(companyId!, { cursor: pageParam as string | undefined, search: opts?.search || undefined })`
setSearchTerm(e.target.value)}
placeholder="Search conversations..."
className="h-7 pl-7 pr-7 text-xs"
/>
{searchTerm && (
)}
**ui/src/hooks/useKeyboardShortcuts.ts** — Add onSearch handler for Cmd+K:
1. Add `onSearch?: () => void` to the `ShortcutHandlers` interface
2. Add a new handler block BEFORE the existing shortcut checks (Cmd+K uses metaKey/ctrlKey, so it won't conflict with the input-guard since Cmd+K is a global shortcut that should work even from inputs):
```typescript
// Cmd+K / Ctrl+K → Search (global, works even from inputs)
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
onSearch?.();
return;
}
```
Place this check BEFORE the `if (target.tagName === "INPUT" ...)` early return, so Cmd+K fires even when focused in an input/textarea.
3. Add `onSearch` to the useEffect dependency array
**ui/src/components/Layout.tsx** — Wire Cmd+K to focus chat search:
1. Add `import { useRef } from "react"` (add useRef to the existing React import)
2. Add `import type { ChatConversationListHandle } from "./ChatConversationList"`
3. Create a ref: `const chatSearchRef = useRef<ChatConversationListHandle>(null)`
4. Add `onSearch` to the `useKeyboardShortcuts` call:
```typescript
useKeyboardShortcuts({
onNewIssue: () => openNewIssue(),
onToggleSidebar: toggleSidebar,
onTogglePanel: togglePanel,
onSearch: () => {
if (!chatOpen) setChatOpen(true);
// Use requestAnimationFrame to ensure panel is visible before focusing
requestAnimationFrame(() => chatSearchRef.current?.focusSearch());
},
});
```
5. Pass the ref down: The ChatConversationList is rendered inside ChatPanel, which is rendered inside Layout. The simplest approach is to expose a `searchRef` prop on ChatPanel and pass it through.
ALTERNATIVE (simpler): Instead of threading refs, add a dedicated `useEffect` in `ChatConversationList` that listens for a custom event:
- In ChatConversationList, add: `useEffect(() => { const handler = () => searchInputRef.current?.focus(); window.addEventListener("nexus:focus-chat-search", handler); return () => window.removeEventListener("nexus:focus-chat-search", handler); }, []);`
- In Layout's onSearch callback: `if (!chatOpen) setChatOpen(true); requestAnimationFrame(() => window.dispatchEvent(new Event("nexus:focus-chat-search")));`
- This avoids drilling refs through ChatPanel. Use this approach.
With the custom event approach, you do NOT need chatSearchRef, ChatConversationListHandle, or forwardRef. Simplify:
- ChatConversationList: do NOT use forwardRef or useImperativeHandle. Just add the event listener useEffect with searchInputRef.
- Layout: just dispatch the event in onSearch.
- useKeyboardShortcuts: add onSearch to interface and handler as described above.
<success_criteria>
- HIST-02 gap closed: conversation list is searchable via a search input with server-side ilike filtering on title; agentId filter parameter accepted by service and route
- INPUT-07 gap closed: Cmd+K / Ctrl+K keyboard shortcut opens chat panel and focuses the search input
- All existing tests continue to pass
- TypeScript compilation clean </success_criteria>