Add Observe/Interpret/Apply boxes to the translation compare view

The same notes as the Study page, editable beside the translations; long
pastes are tagged as pasted the same way.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/test/App.home.test.jsx

@@ -448,6 +448,18 @@ describe('Study workspace', () => {
     expect(notes).toHaveAttribute('aria-expanded', 'true');
   });
 
+  test('compare translations: the Observe / Interpret / Apply boxes edit the same notes', async () => {
+    const user = await studyOneChunk();
+    await user.click(screen.getByRole('button', { name: /compare…/i }));
+    await user.click(screen.getByRole('tab', { name: /translations/i }));
+    const dialog = screen.getByRole('dialog', { name: /compare/i });
+    expect(within(dialog).getByRole('textbox', { name: 'Interpret' })).toBeInTheDocument();
+    expect(within(dialog).getByRole('textbox', { name: 'Apply' })).toBeInTheDocument();
+    fireEvent.change(within(dialog).getByRole('textbox', { name: 'Observe' }), { target: { value: 'Written beside the translations.' } });
+    await user.click(within(dialog).getByRole('button', { name: /close/i }));
+    expect(screen.getByRole('textbox', { name: 'Observe' })).toHaveValue('Written beside the translations.');
+  });
+
   test('people & places: lists what is tagged in the chunk', async () => {
     const user = await studyOneChunk([['/d/theographic/TIT/1.json', { chapter: { people: [{ id: 'paul_1', name: 'Paul', verses: [1] }, { id: 'x_2', name: 'Elsewhere', verses: [9] }], places: [], events: [] } }]]);
     await user.click(screen.getByRole('tab', { name: /people & places/i }));