feat: minor UI adjustments

2026-06-02 22:31:29 -07:00
parent 5aacf01457
commit 4bdd0d5ea7
7 changed files with 593 additions and 7 deletions
@@ -8,6 +8,24 @@ vi.mock('../agent/core/AgentCore', () => ({
  }
 }));

+vi.mock('../core/KGCore', () => ({
+  KGCore: {
+    instance: vi.fn()
+  }
+}));
+
+vi.mock('../stores/projectStore', () => ({
+  useProjectStore: {
+    getState: vi.fn(() => ({
+      activeRegionId: null,
+      selectedRegionIds: [],
+      timeSignature: { numerator: 4, denominator: 4 },
+      tracks: [],
+      refreshProjectState: vi.fn(),
+    })),
+  },
+}));
+
 vi.mock('../utils/chatMessageUtils', () => ({
  createStreamingMessage: () => ({
    id: 'streaming-message',
@@ -24,6 +42,8 @@ vi.mock('../utils/chatMessageUtils', () => ({
 }));

 import { AgentCore } from '../agent/core/AgentCore';
+import { KGCore } from '../core/KGCore';
+import { KGMidiRegion } from '../core/region/KGMidiRegion';
 import { useStreamProcessor } from './useStreamProcessor';
 import type { ChatMessage } from '../types/projectTypes';

@@ -215,6 +235,94 @@ describe('useStreamProcessor', () => {

    const addedMessages = [...messages.values()];
    expect(addedMessages.some(message => message.content.includes('Calling tool: read_music'))).toBe(true);
+    expect(addedMessages.some(message => message.isToolCallMessage)).toBe(true);
    expect(addedMessages.some(message => message.toolName === 'update_todo_list')).toBe(false);
  });
+
+it('attaches add_notes summary metadata for chat-only rendering while preserving raw content', async () => {
+  const selectedRegion = new KGMidiRegion('region-1', '1', 0, 'Verse Melody');
+
+  vi.spyOn(AgentCore, 'instance').mockReturnValue({
+    getAgentState: () => ({
+      getTodos: () => [],
+    }),
+      processUserInput: async function* () {
+        yield {
+          type: 'tool_call',
+          content: '',
+        toolCall: {
+          id: 'add-notes-call-1',
+          type: 'function',
+          function: {
+            name: 'add_notes',
+            arguments: JSON.stringify({
+              notes: [
+                { pitch: 'C4', start: 16, length: 4 },
+                { pitch: 'E4', start: 20, length: 8 },
+              ],
+              }),
+            },
+          },
+        };
+        yield {
+          type: 'tool_result',
+          content: '',
+          toolResult: {
+            name: 'add_notes',
+            success: true,
+            result: 'Successfully created 2 notes: C4 (beat 16, length 4), E4 (beat 20, length 8)',
+          },
+        };
+        yield { type: 'done', content: '' };
+      },
+    } as unknown as AgentCore);
+
+  vi.spyOn(KGCore, 'instance').mockReturnValue({
+    getCurrentProject: () => ({
+      getTimeSignature: () => ({ numerator: 4, denominator: 4 }),
+      getTracks: () => [
+        {
+          getId: () => '1',
+          getName: () => 'Lead',
+          getRegions: () => [selectedRegion],
+        },
+      ],
+    }),
+    getSelectedItems: () => [selectedRegion],
+  } as unknown as KGCore);
+
+    const messages = new Map<string, ChatMessage>();
+
+    const { result } = renderHook(() => useStreamProcessor({
+      onMessageAdd: (message) => {
+        messages.set(message.id, message);
+      },
+      onMessageUpdate: (messageId, updater) => {
+        const current = messages.get(messageId);
+        if (!current) {
+          throw new Error(`Missing message ${messageId}`);
+        }
+        messages.set(messageId, updater(current));
+      },
+      onMessageRemove: (messageId) => {
+        messages.delete(messageId);
+      },
+      onProcessingChange: () => undefined,
+    }));
+
+    await act(async () => {
+      await result.current.processStream('add notes prompt');
+    });
+
+    const addedMessages = [...messages.values()];
+    const toolCallMessage = addedMessages.find(message => message.isToolCallMessage);
+    const addNotesMessage = addedMessages.find(message => message.toolName === 'add_notes');
+
+    expect(toolCallMessage?.content).toContain('Calling tool: add_notes');
+    expect(addNotesMessage?.content).toContain('Successfully created 2 notes:');
+    expect(addNotesMessage?.toolRawResult).toBe('Successfully created 2 notes: C4 (beat 16, length 4), E4 (beat 20, length 8)');
+    expect(addNotesMessage?.toolResultDisplayContent).toBe(
+      'Successfully created 2 notes in region **Verse Melody** on track **Lead**, spanning bars 5 to 7.'
+    );
+  });
 });
@@ -1,9 +1,148 @@
 import { useState, useCallback } from 'react';
 import { AgentCore } from '../agent/core/AgentCore';
+import { KGCore } from '../core/KGCore';
+import { KGMidiRegion } from '../core/region/KGMidiRegion';
 import { createStreamingMessage, createMessage } from '../utils/chatMessageUtils';
+import { useProjectStore } from '../stores/projectStore';
 import type { ChatMessage } from '../types/projectTypes';

 const TODO_TOOL_NAME = 'update_todo_list';
+const ADD_NOTES_TOOL_NAME = 'add_notes';
+
+interface PendingToolCall {
+  name: string;
+  arguments: Record<string, unknown> | null;
+}
+
+interface AddNotesToolArguments {
+  notes: Array<{
+    pitch: string;
+    start: number;
+    length: number;
+    velocity?: number;
+  }>;
+  region_id?: string;
+}
+
+const getBarNumberFromStartBeat = (beat: number, beatsPerBar: number): number => (
+  Math.floor(beat / beatsPerBar) + 1
+);
+
+const getBarNumberFromEndBeat = (beat: number, beatsPerBar: number): number => (
+  Math.max(1, Math.ceil(beat / beatsPerBar))
+);
+
+interface AddNotesSummaryData {
+  noteCount: number;
+  regionName: string;
+  trackName: string;
+  earliestNoteStartBar: number;
+  latestNoteEndBar: number;
+}
+
+const resolveTargetMidiRegion = (
+  regionId: string | undefined,
+  storeState: ReturnType<typeof useProjectStore.getState>,
+): { region: KGMidiRegion; trackName: string } | undefined => {
+  const project = KGCore.instance().getCurrentProject();
+  const tracks = project.getTracks();
+
+  const findById = (candidateRegionId: string): { region: KGMidiRegion; trackName: string } | undefined => {
+    for (const track of tracks) {
+      const region = track.getRegions().find(candidate => candidate.getId() === candidateRegionId);
+      if (region instanceof KGMidiRegion) {
+        return {
+          region,
+          trackName: track.getName(),
+        };
+      }
+    }
+
+    return undefined;
+  };
+
+  if (regionId) {
+    return findById(regionId);
+  }
+
+  if (storeState.activeRegionId) {
+    const activeRegion = findById(storeState.activeRegionId);
+    if (activeRegion) {
+      return activeRegion;
+    }
+  }
+
+  const selectedRegionId = storeState.selectedRegionIds.at(-1);
+  if (selectedRegionId) {
+    const selectedRegion = findById(selectedRegionId);
+    if (selectedRegion) {
+      return selectedRegion;
+    }
+  }
+
+  const selectedItems = KGCore.instance().getSelectedItems();
+  for (const item of selectedItems) {
+    if (item instanceof KGMidiRegion) {
+      const track = tracks.find(candidate => candidate.getId() === item.getTrackId());
+      return {
+        region: item,
+        trackName: track?.getName() ?? `Track ${item.getTrackIndex() + 1}`,
+      };
+    }
+  }
+
+  return undefined;
+};
+
+const buildAddNotesSummary = (args: Record<string, unknown> | null): AddNotesSummaryData | undefined => {
+  if (!args) {
+    return undefined;
+  }
+
+  const typedArgs = args as AddNotesToolArguments;
+  if (!Array.isArray(typedArgs.notes) || typedArgs.notes.length === 0) {
+    return undefined;
+  }
+
+  const storeState = useProjectStore.getState();
+  const project = KGCore.instance().getCurrentProject();
+  const beatsPerBar = project.getTimeSignature().numerator ?? storeState.timeSignature.numerator;
+  const targetRegion = resolveTargetMidiRegion(typedArgs.region_id, storeState);
+  if (!targetRegion) {
+    return undefined;
+  }
+
+  const earliestNoteStartBeat = Math.min(...typedArgs.notes.map(note => note.start));
+  const latestNoteEndBeat = Math.max(...typedArgs.notes.map(note => note.start + note.length));
+
+  return {
+    noteCount: typedArgs.notes.length,
+    regionName: targetRegion.region.getName(),
+    trackName: targetRegion.trackName,
+    earliestNoteStartBar: getBarNumberFromStartBeat(earliestNoteStartBeat, beatsPerBar),
+    latestNoteEndBar: getBarNumberFromEndBeat(latestNoteEndBeat, beatsPerBar),
+  };
+};
+
+const buildToolResultDisplayContent = (
+  toolName: string,
+  success: boolean,
+  rawResult: string,
+  toolArgs: Record<string, unknown> | null,
+): string => {
+  if (!success) {
+    return rawResult;
+  }
+
+  if (toolName === ADD_NOTES_TOOL_NAME) {
+    const summary = buildAddNotesSummary(toolArgs);
+    if (summary) {
+      return `Successfully created ${summary.noteCount} ${summary.noteCount === 1 ? 'note' : 'notes'} in region **${summary.regionName}** on track **${summary.trackName}**, spanning bars ${summary.earliestNoteStartBar} to ${summary.latestNoteEndBar}.`;
+    }
+  }
+
+  return rawResult;
+};

 interface StreamProcessorOptions {
  onMessageUpdate: (messageId: string, updater: (msg: ChatMessage) => ChatMessage) => void;
@@ -35,6 +174,7 @@ export const useStreamProcessor = (options: StreamProcessorOptions): StreamProce
    // Track the current streaming message ID (mutable)
    const initialStreamingMsg = createStreamingMessage();
    let currentStreamingId = initialStreamingMsg.id;
+    const pendingToolCalls: PendingToolCall[] = [];
    onMessageAdd(initialStreamingMsg);

    try {
@@ -91,14 +231,29 @@ export const useStreamProcessor = (options: StreamProcessorOptions): StreamProce
          try {
            const args = JSON.parse(chunk.toolCall.function.arguments);
            argsDisplay = JSON.stringify(args, null, 2);
+            pendingToolCalls.push({ name: toolName, arguments: args });
          } catch {
            argsDisplay = chunk.toolCall.function.arguments;
+            pendingToolCalls.push({ name: toolName, arguments: null });
          }
-          const toolCallMsg = createMessage('assistant', `🔧 **Calling tool: ${toolName}**\n\n\`\`\`json\n${argsDisplay}\n\`\`\``);
+          const toolCallMsg = {
+            ...createMessage('assistant', `🔧 **Calling tool: ${toolName}**\n\n\`\`\`json\n${argsDisplay}\n\`\`\``),
+            isToolCallMessage: true,
+          };
          onMessageAdd(toolCallMsg);
        } else if (chunk.type === 'tool_result' && chunk.toolResult) {
          // Show tool result in UI
          const { name, success, result } = chunk.toolResult;
+          const pendingToolCallIndex = pendingToolCalls.findIndex(toolCall => toolCall.name === name);
+          const pendingToolCall = pendingToolCallIndex >= 0
+            ? pendingToolCalls.splice(pendingToolCallIndex, 1)[0]
+            : undefined;
+          const toolResultDisplayContent = buildToolResultDisplayContent(
+            name,
+            success,
+            result,
+            pendingToolCall?.arguments ?? null,
+          );
          const toolResultMsg = name === TODO_TOOL_NAME
            ? {
              ...createMessage('assistant', result),
@@ -106,7 +261,13 @@ export const useStreamProcessor = (options: StreamProcessorOptions): StreamProce
              toolSuccess: success,
              todoSnapshot: AgentCore.instance().getAgentState().getTodos().map(todo => ({ ...todo })),
            }
-            : createMessage('assistant', `${success ? '✅' : '❌'} **${name}**\n\n └── ${result}`);
+            : {
+              ...createMessage('assistant', `${success ? '✅' : '❌'} **${name}**\n\n └── ${result}`),
+              toolName: name,
+              toolSuccess: success,
+              toolRawResult: result,
+              toolResultDisplayContent,
+            };
          onMessageAdd(toolResultMsg);

          // Reset for the next LLM turn in the agentic loop