diff --git a/packages/extension/src/components/HistoryDetail.tsx b/packages/extension/src/components/HistoryDetail.tsx index 2f07966..eff8ff9 100644 --- a/packages/extension/src/components/HistoryDetail.tsx +++ b/packages/extension/src/components/HistoryDetail.tsx @@ -1,12 +1,20 @@ -import { ArrowLeft } from 'lucide-react' +import { ArrowLeft, RotateCcw, Trash2 } from 'lucide-react' import { useEffect, useState } from 'react' import { Button } from '@/components/ui/button' -import { type SessionRecord, getSession } from '@/lib/db' +import { type SessionRecord, deleteSession, getSession } from '@/lib/db' import { EventCard } from './cards' -export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack: () => void }) { +export function HistoryDetail({ + sessionId, + onBack, + onRerun, +}: { + sessionId: string + onBack: () => void + onRerun: (task: string) => void +}) { const [session, setSession] = useState(null) useEffect(() => { @@ -37,6 +45,27 @@ export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack
{session.task}
+
+ + +
{/* Events (read-only) */} diff --git a/packages/extension/src/components/HistoryList.tsx b/packages/extension/src/components/HistoryList.tsx index e663f3d..4597d83 100644 --- a/packages/extension/src/components/HistoryList.tsx +++ b/packages/extension/src/components/HistoryList.tsx @@ -1,9 +1,9 @@ -import { ArrowDownToLine, ArrowLeft, CheckCircle, Trash2, XCircle } from 'lucide-react' +import { ArrowDownToLine, ArrowLeft, CheckCircle, RotateCcw, Trash2, XCircle } from 'lucide-react' import { useCallback, useEffect, useState } from 'react' import { Button } from '@/components/ui/button' -import { downloadHistoryExport } from '@/lib/history-export' import { type SessionRecord, clearSessions, deleteSession, listSessions } from '@/lib/db' +import { downloadHistoryExport } from '@/lib/history-export' function timeAgo(ts: number): string { const seconds = Math.floor((Date.now() - ts) / 1000) @@ -19,9 +19,11 @@ function timeAgo(ts: number): string { export function HistoryList({ onSelect, onBack, + onRerun, }: { onSelect: (id: string) => void onBack: () => void + onRerun: (task: string) => void }) { const [sessions, setSessions] = useState([]) const [loading, setLoading] = useState(true) @@ -47,6 +49,11 @@ export function HistoryList({ downloadHistoryExport(session.task, session.createdAt, session.history) } + const handleRerun = (e: React.MouseEvent, task: string) => { + e.stopPropagation() + onRerun(task) + } + return (
{/* Header */} @@ -91,7 +98,12 @@ export function HistoryList({ role="button" tabIndex={0} onClick={() => onSelect(session.id)} - onKeyDown={(e) => e.key === 'Enter' && onSelect(session.id)} + onKeyDown={(e) => { + if (e.target !== e.currentTarget) return + if (e.key !== 'Enter' && e.key !== ' ') return + e.preventDefault() + onSelect(session.id) + }} className="w-full text-left px-3 py-2.5 border-b hover:bg-muted/50 transition-colors cursor-pointer flex items-start gap-2 group" > {/* Status icon */} @@ -104,30 +116,40 @@ export function HistoryList({ {/* Content */}

{session.task}

-

- {timeAgo(session.createdAt)} · {session.history.length} steps -

-
- -
- - +
+

+ {timeAgo(session.createdAt)} · {session.history.length} steps +

+
+ + + +
+
))} diff --git a/packages/extension/src/entrypoints/sidepanel/App.tsx b/packages/extension/src/entrypoints/sidepanel/App.tsx index db02f53..229c630 100644 --- a/packages/extension/src/entrypoints/sidepanel/App.tsx +++ b/packages/extension/src/entrypoints/sidepanel/App.tsx @@ -56,19 +56,27 @@ export default function App() { } }, [history, activity]) - const handleSubmit = useCallback( - (e?: React.SyntheticEvent) => { - e?.preventDefault() - if (!inputValue.trim() || status === 'running') return + const runTask = useCallback( + (task: string) => { + const normalizedTask = task.trim() + if (!normalizedTask || status === 'running') return - const taskToExecute = inputValue.trim() setInputValue('') + setView({ name: 'chat' }) - execute(taskToExecute).catch((error) => { + execute(normalizedTask).catch((error) => { console.error('[SidePanel] Failed to execute task:', error) }) }, - [inputValue, status, execute] + [execute, status] + ) + + const handleSubmit = useCallback( + (e?: React.SyntheticEvent) => { + e?.preventDefault() + runTask(inputValue) + }, + [inputValue, runTask] ) const handleStop = useCallback(() => { @@ -103,12 +111,19 @@ export default function App() { setView({ name: 'history-detail', sessionId: id })} onBack={() => setView({ name: 'chat' })} + onRerun={runTask} /> ) } if (view.name === 'history-detail') { - return setView({ name: 'history' })} /> + return ( + setView({ name: 'history' })} + onRerun={runTask} + /> + ) } // --- Chat view --- diff --git a/packages/page-controller/src/actions.ts b/packages/page-controller/src/actions.ts index 53b3c6c..7a6cca6 100644 --- a/packages/page-controller/src/actions.ts +++ b/packages/page-controller/src/actions.ts @@ -54,6 +54,9 @@ function blurLastClickedElement() { lastClickedElement.dispatchEvent( new MouseEvent('mouseout', { bubbles: true, cancelable: true }) ) + lastClickedElement.dispatchEvent( + new MouseEvent('mouseleave', { bubbles: false, cancelable: true }) + ) lastClickedElement = null } } @@ -119,9 +122,12 @@ export async function inputTextElement(element: HTMLElement, text: string) { // - Monaco/CodeMirror: Require direct JS instance access. No universal way to obtain. // - Draft.js: Not responsive to synthetic/execCommand/Range/DataTransfer. Unmaintained. // + // Strategy: Try Plan A (synthetic events) first, then verify and fall back + // to Plan B (execCommand) if the text wasn't actually inserted. + // // Plan A: Dispatch synthetic events - // Works: LinkedIn, React contenteditable, Quill. - // Fails: Slate.js + // Works: React contenteditable, Quill. + // Fails: Slate.js, some contenteditable editors that ignore synthetic events. // Sequence: beforeinput -> mutation -> input -> change -> blur // Dispatch beforeinput + mutation + input for clearing @@ -164,18 +170,34 @@ export async function inputTextElement(element: HTMLElement, text: string) { ) } + // Verify Plan A worked by checking if the text was actually inserted + const planASucceeded = element.innerText.trim() === text.trim() + + if (!planASucceeded) { + // Plan B: execCommand fallback (deprecated but widely supported) + // Works: Quill, Slate.js, react contenteditable components. + // This approach integrates with the browser's undo stack and is handled + // natively by most rich-text editors. + element.focus() + + // Select all existing content and delete it + const selection = window.getSelection() + const range = document.createRange() + range.selectNodeContents(element) + selection?.removeAllRanges() + selection?.addRange(range) + + // eslint-disable-next-line @typescript-eslint/no-deprecated + document.execCommand('delete', false) + // eslint-disable-next-line @typescript-eslint/no-deprecated + document.execCommand('insertText', false, text) + } + // Dispatch change event (for good measure) element.dispatchEvent(new Event('change', { bubbles: true })) // Trigger blur for validation element.blur() - - // Plan B: execCommand (deprecated but works better for some editors) - // Works: LinkedIn, Quill, Slate.js, react contenteditable components - // - // document.execCommand('selectAll') - // document.execCommand('delete') - // document.execCommand('insertText', false, text) } else if (element instanceof HTMLTextAreaElement) { nativeTextAreaValueSetter.call(element, text) } else {