Add a per-project Notes tab with a send-to-agent action #48

Merged
jknapp merged 20 commits from feat/project-notes into main 2026-09-02 20:42:07 +00:00
6 changed files with 169 additions and 10 deletions
Showing only changes of commit c16f0d5b70 - Show all commits
@@ -11,14 +11,22 @@ vi.mock("../../hooks/useTerminal", () => ({
})); }));
const setActiveTabKey = vi.fn(); const setActiveTabKey = vi.fn();
const requestTerminalFocus = vi.fn();
const pushToast = vi.fn(); const pushToast = vi.fn();
let projects: Project[] = []; let projects: Project[] = [];
vi.mock("../../store/appState", () => ({ vi.mock("../../store/appState", () => ({
useAppState: Object.assign( useAppState: Object.assign(
(selector: (s: unknown) => unknown) => (selector: (s: unknown) => unknown) =>
selector({ projects, setActiveTabKey, pushToast }), selector({ projects, setActiveTabKey, requestTerminalFocus, pushToast }),
{ getState: () => ({ projects, setActiveTabKey, pushToast }) }, {
getState: () => ({
projects,
setActiveTabKey,
requestTerminalFocus,
pushToast,
}),
},
), ),
terminalTabKey: (id: string) => `term:${id}`, terminalTabKey: (id: string) => `term:${id}`,
})); }));
@@ -149,4 +157,35 @@ describe("SendToAgentButton", () => {
// overflow, so a downward menu at the bottom edge is invisible. // overflow, so a downward menu at the bottom edge is invisible.
await waitFor(() => expect(screen.getByRole("menu")).toHaveClass("bottom-full")); await waitFor(() => expect(screen.getByRole("menu")).toHaveClass("bottom-full"));
}); });
// Switching to the tab is not enough. When the dock is open beside the
// terminal it sends to, that terminal is already the active tab, so
// `setActiveTabKey` changes nothing and no effect re-runs — leaving focus on
// this button, one click short of the Enter the user came to press.
it("hands focus to the terminal so the next keystroke is Enter", async () => {
sessions = [session()];
render(<SendToAgentButton projectId="p1" body="hello" />);
fireEvent.click(screen.getByRole("button", { name: /send to agent/i }));
await waitFor(() => expect(requestTerminalFocus).toHaveBeenCalledWith("s1"));
});
it("leaves focus alone when the send failed", async () => {
sessions = [session()];
sendInput.mockRejectedValueOnce(new Error("pty gone"));
render(<SendToAgentButton projectId="p1" body="hello" />);
fireEvent.click(screen.getByRole("button", { name: /send to agent/i }));
await waitFor(() => expect(pushToast).toHaveBeenCalled());
expect(requestTerminalFocus).not.toHaveBeenCalled();
});
it("focuses the session picked from the menu, not the first one", async () => {
sessions = [session(), session({ id: "s2", sessionName: "review" })];
render(<SendToAgentButton projectId="p1" body="hello" />);
fireEvent.click(screen.getByRole("button", { name: /send to agent/i }));
fireEvent.click(await screen.findByRole("menuitem", { name: "review" }));
await waitFor(() => expect(requestTerminalFocus).toHaveBeenCalledWith("s2"));
});
}); });
@@ -36,10 +36,12 @@ export default function SendToAgentButton({
fullWidth = false, fullWidth = false,
}: Props) { }: Props) {
const { sessions, sendInput } = useTerminal(); const { sessions, sendInput } = useTerminal();
const { projects, setActiveTabKey, pushToast } = useAppState( const { projects, setActiveTabKey, requestTerminalFocus, pushToast } =
useAppState(
useShallow((s) => ({ useShallow((s) => ({
projects: s.projects, projects: s.projects,
setActiveTabKey: s.setActiveTabKey, setActiveTabKey: s.setActiveTabKey,
requestTerminalFocus: s.requestTerminalFocus,
pushToast: s.pushToast, pushToast: s.pushToast,
})), })),
); );
@@ -86,6 +88,11 @@ export default function SendToAgentButton({
// A courtesy, not part of the send: if the tab cannot be focused the // A courtesy, not part of the send: if the tab cannot be focused the
// text still went. // text still went.
setActiveTabKey(terminalTabKey(sessionId)); setActiveTabKey(terminalTabKey(sessionId));
// Switching tabs is not the same as taking focus, and when the dock is
// open beside the terminal it just sent to, that tab is already the
// active one — so nothing above moves the caret off this button. The
// note is sitting in the prompt waiting for Enter; put the user there.
requestTerminalFocus(sessionId);
} catch (e) { } catch (e) {
pushToast({ pushToast({
kind: "error", kind: "error",
@@ -94,7 +101,7 @@ export default function SendToAgentButton({
}); });
} }
}, },
[body, sendInput, setActiveTabKey, pushToast], [body, sendInput, setActiveTabKey, requestTerminalFocus, pushToast],
); );
const onClick = useCallback(() => { const onClick = useCallback(() => {
@@ -538,3 +538,59 @@ describe("TerminalView — reaching the URL prompt without a mouse", () => {
expect(document.activeElement).toBe(before); expect(document.activeElement).toBe(before);
}); });
}); });
describe("TerminalView — focus on request", () => {
/** Mount, then deliberately give focus away, so what the assertions below
* observe is the *request* taking effect and never the focus `active`
* already grants on mount. That distinction is the whole point: the notes
* dock sends to a terminal whose tab is already active, where nothing
* changes and no `active` effect re-runs. */
async function mountAndBlur() {
const view = mountSession("claude");
await act(async () => {});
const elsewhere = document.createElement("button");
document.body.appendChild(elsewhere);
elsewhere.focus();
expect(document.activeElement).toBe(elsewhere);
return view;
}
it("focuses the terminal named by the request", async () => {
const view = await mountAndBlur();
await act(async () => {
useAppState.getState().requestTerminalFocus("s1");
});
expect(document.activeElement).toBe(helperTextarea(view.container));
});
it("ignores a request meant for another session", async () => {
const view = await mountAndBlur();
const before = document.activeElement;
await act(async () => {
useAppState.getState().requestTerminalFocus("s2");
});
expect(document.activeElement).toBe(before);
expect(document.activeElement).not.toBe(helperTextarea(view.container));
});
it("clears the request, so a second send focuses again", async () => {
const view = await mountAndBlur();
await act(async () => {
useAppState.getState().requestTerminalFocus("s1");
});
expect(useAppState.getState().pendingTerminalFocus).toBeNull();
const elsewhere = document.querySelector("button");
(elsewhere as HTMLButtonElement).focus();
await act(async () => {
useAppState.getState().requestTerminalFocus("s1");
});
expect(document.activeElement).toBe(helperTextarea(view.container));
});
});
@@ -731,6 +731,21 @@ export default function TerminalView({ sessionId, active }: Props) {
} }
}, [active, gpuRenderingSetting]); }, [active, gpuRenderingSetting]);
// Focus on demand, for the caller that cannot rely on the effect above.
// That one keys off `active`, so it covers switching *to* a terminal and
// nothing else — and the notes dock sends to the terminal already on screen,
// where `active` never changes. Consumed once and cleared, so asking twice
// for the same terminal works.
const pendingTerminalFocus = useAppState((s) => s.pendingTerminalFocus);
const clearPendingTerminalFocus = useAppState(
(s) => s.clearPendingTerminalFocus,
);
useEffect(() => {
if (pendingTerminalFocus !== sessionId) return;
termRef.current?.focus();
clearPendingTerminalFocus();
}, [pendingTerminalFocus, sessionId, clearPendingTerminalFocus]);
// Auto-dismiss toast after 30 seconds — unless the user is standing in it. // Auto-dismiss toast after 30 seconds — unless the user is standing in it.
// A keyboard user who has just jumped into the toast is mid-decision, and // A keyboard user who has just jumped into the toast is mid-decision, and
// pulling it out from under them costs them the only route to finishing a // pulling it out from under them costs them the only route to finishing a
+24
View File
@@ -112,3 +112,27 @@ describe("toasts", () => {
expect(toasts()).toHaveLength(2); expect(toasts()).toHaveLength(2);
}); });
}); });
describe("terminal focus requests", () => {
beforeEach(() => useAppState.setState({ pendingTerminalFocus: null }));
const pending = () => useAppState.getState().pendingTerminalFocus;
it("names the session that should take focus", () => {
useAppState.getState().requestTerminalFocus("s1");
expect(pending()).toBe("s1");
});
// Consumed once, exactly like `pendingHomeTab`. Without the clear, the
// second send to a terminal already holding the request would set the same
// value, no state would change, and no effect would re-run — which is the
// failure this whole mechanism exists to fix.
it("is cleared once consumed, so the same terminal can be asked again", () => {
useAppState.getState().requestTerminalFocus("s1");
useAppState.getState().clearPendingTerminalFocus();
expect(pending()).toBeNull();
useAppState.getState().requestTerminalFocus("s1");
expect(pending()).toBe("s1");
});
});
+18
View File
@@ -144,6 +144,21 @@ interface AppState {
/** Consumed once by `ProjectHome`, then cleared. */ /** Consumed once by `ProjectHome`, then cleared. */
pendingHomeTab: { projectId: string; tab: string } | null; pendingHomeTab: { projectId: string; tab: string } | null;
clearPendingHomeTab: () => void; clearPendingHomeTab: () => void;
/**
* Ask a terminal to take keyboard focus.
*
* `TerminalView` already focuses when its tab *becomes* active, which covers
* switching to a terminal. It cannot cover being asked to focus the terminal
* that is already on screen — nothing changes, so no effect re-runs — and
* that is the ordinary case for the notes dock, which sits beside the
* terminal it sends to.
*
* Consumed once and cleared, like `pendingHomeTab`: holding the id would
* make a second request for the same terminal a no-op state write.
*/
pendingTerminalFocus: string | null;
requestTerminalFocus: (sessionId: string) => void;
clearPendingTerminalFocus: () => void;
closeHomeTab: (projectId: string) => void; closeHomeTab: (projectId: string) => void;
setActiveTabKey: (key: string) => void; setActiveTabKey: (key: string) => void;
cycleTab: (delta: number) => void; cycleTab: (delta: number) => void;
@@ -352,6 +367,9 @@ export const useAppState = create<AppState>((set) => ({
}), }),
pendingHomeTab: null, pendingHomeTab: null,
clearPendingHomeTab: () => set({ pendingHomeTab: null }), clearPendingHomeTab: () => set({ pendingHomeTab: null }),
pendingTerminalFocus: null,
requestTerminalFocus: (sessionId) => set({ pendingTerminalFocus: sessionId }),
clearPendingTerminalFocus: () => set({ pendingTerminalFocus: null }),
closeHomeTab: (projectId) => closeHomeTab: (projectId) =>
set((state) => { set((state) => {
const key = homeTabKey(projectId); const key = homeTabKey(projectId);