diff --git a/backend/package.json b/backend/package.json index 17d0f0f9..637e07c5 100644 --- a/backend/package.json +++ b/backend/package.json @@ -9,7 +9,7 @@ "build": "bun build src/index.ts --outdir=dist --target=bun", "typecheck": "tsc --noEmit", "test": "pnpm run test:bun && pnpm run test:vitest", - "test:bun": "bun test test/services/assistant-mode.test.ts test/services/internal-token.test.ts test/auth/internal-token-middleware.test.ts test/routes/internal-schedules.test.ts test/routes/internal-notifications.test.ts test/routes/internal-settings.test.ts test/routes/internal-repos.test.ts test/routes/internal/repo-mirror.test.ts src/db/model-state.test.ts src/routes/providers.test.ts", + "test:bun": "bun test test/services/assistant-mode.test.ts test/services/internal-token.test.ts test/auth/internal-token-middleware.test.ts test/routes/internal-schedules.test.ts test/routes/internal-notifications.test.ts test/routes/internal-settings.test.ts test/routes/internal-repos.test.ts src/db/model-state.test.ts src/routes/providers.test.ts", "test:vitest": "vitest run", "test:ui": "vitest --ui", "test:watch": "vitest --watch", @@ -23,7 +23,6 @@ "archiver": "^7.0.1", "better-auth": "^1.4.17", "croner": "^10.0.1", - "dotenv": "^17.2.3", "eventsource": "^4.1.0", "hono": "^4.11.7", "jsonc-parser": "^3.3.1", diff --git a/backend/src/routes/internal/repo-mirror.ts b/backend/src/routes/internal/repo-mirror.ts index 68c0a2bc..63d1f591 100644 --- a/backend/src/routes/internal/repo-mirror.ts +++ b/backend/src/routes/internal/repo-mirror.ts @@ -4,7 +4,7 @@ import { spawn } from 'child_process' import { pipeline } from 'stream/promises' import { Readable } from 'stream' import { mkdtempSync, mkdirSync, readdirSync, statSync, existsSync, writeFileSync } from 'fs' -import { join } from 'path' +import { dirname, join } from 'path' import * as fsp from 'fs/promises' import { getReposPath } from '@opencode-manager/shared/config/env' import { getRepoById, updateLastPulled, updateRepoBranch, deleteRepo } from '../../db/queries' @@ -60,7 +60,7 @@ export function createInternalRepoMirrorRoutes(db: Database) { } let staging: string | undefined - let oldDirMoved = false + let backupDir: string | undefined try { const stagingParent = join(getReposPath(), '.ocm-staging') mkdirSync(stagingParent, { recursive: true }) @@ -100,17 +100,19 @@ export function createInternalRepoMirrorRoutes(db: Database) { } catch { /* ignore stat errors */ } } + await fsp.mkdir(dirname(fullPath), { recursive: true }) + if (existsSync(fullPath)) { - try { - await fsp.rename(fullPath, fullPath + '.ocm-old') - oldDirMoved = true - } catch { /* ignore rename errors */ } + backupDir = `${fullPath}.ocm-old-${Date.now()}-${Math.random().toString(36).slice(2)}` + await fsp.rename(fullPath, backupDir) } await fsp.rename(extractedRoot, fullPath) - const oldDir = fullPath + '.ocm-old' - await fsp.rm(oldDir, { recursive: true, force: true }).catch(() => {}) + if (backupDir) { + await fsp.rm(backupDir, { recursive: true, force: true }).catch(() => {}) + backupDir = undefined + } const branchName = await safeGitOut(fullPath, ['rev-parse', '--abbrev-ref', 'HEAD']) const head = await safeGitOut(fullPath, ['rev-parse', 'HEAD']) @@ -132,11 +134,14 @@ export function createInternalRepoMirrorRoutes(db: Database) { } catch (error) { logger.error('mirror POST failed:', error) - if (oldDirMoved) { + if (backupDir) { try { - await fsp.rename(fullPath + '.ocm-old', fullPath) + if (existsSync(fullPath)) { + await fsp.rm(fullPath, { recursive: true, force: true }) + } + await fsp.rename(backupDir, fullPath) } catch { - logger.error('failed to restore old repo from .ocm-old') + logger.error('failed to restore old repo from backup') } } diff --git a/backend/test/routes/internal/repo-mirror.test.ts b/backend/test/routes/internal/repo-mirror.test.ts index 402b9fd4..a438a664 100644 --- a/backend/test/routes/internal/repo-mirror.test.ts +++ b/backend/test/routes/internal/repo-mirror.test.ts @@ -156,6 +156,30 @@ describe('internal-repo-mirror routes', () => { expect(mockCreateRepoRow).toHaveBeenCalled() }) + it('creates the mirror target parent before final rename', async () => { + const targetPath = join(getTmpRoot(), 'nested', 'test-repo') + mockEnsureMirrorTargetPath.mockReturnValue({ localPath: 'nested/test-repo', fullPath: targetPath }) + mockCreateRepoRow.mockImplementation((_db: any, input: any) => ({ repo: { id: 1, fullPath: input.fullPath, localPath: input.localPath }, created: true })) + + const sourceDir = join(getTmpRoot(), 'source-nested') + mkdirSync(sourceDir, { recursive: true }) + writeFileSync(join(sourceDir, 'payload.txt'), 'payload data') + + const result = spawnSync('tar', ['-c', '-C', sourceDir, '.'], { encoding: 'buffer' }) + const tarball = result.stdout as Buffer + + const res = await app.request('/api/internal/repos/0/mirror?create=1&name=test-repo', { + method: 'POST', + body: tarball, + headers: { 'content-type': 'application/x-tar' }, + }) + + expect(res.status).toBe(200) + const json = (await res.json()) as { fullPath: string } + expect(json.fullPath).toBe(targetPath) + expect(existsSync(join(targetPath, 'payload.txt'))).toBe(true) + }) + it('returns 409 when repo is in use and force not set', async () => { const repoDir = join(getTmpRoot(), 'test-repo') mkdirSync(repoDir, { recursive: true }) diff --git a/frontend/package.json b/frontend/package.json index 0e6ef3a8..cd5c45be 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,7 +17,6 @@ "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@hookform/resolvers": "^5.2.2", - "@monaco-editor/react": "^4.7.0", "@opencode-manager/shared": "workspace:*", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-dialog": "^1.1.15", @@ -33,12 +32,10 @@ "better-auth": "^1.4.17", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "cmdk": "^1.1.1", "cronstrue": "^3.13.0", "date-fns": "^4.1.0", "diff": "^8.0.2", "highlight.js": "^11.11.1", - "jsonc-parser": "^3.3.1", "lucide-react": "^0.546.0", "mermaid": "^11.12.2", "react": "^19.1.1", @@ -63,7 +60,6 @@ "@types/react": "^19.2.2", "@types/react-dom": "^19.2.2", "@vitejs/plugin-react": "^5.0.4", - "autoprefixer": "^10.4.21", "eslint": "^9.39.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.22", diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx index a37079ef..76d2a999 100644 --- a/frontend/src/components/message/PromptInput.stt.test.tsx +++ b/frontend/src/components/message/PromptInput.stt.test.tsx @@ -77,10 +77,6 @@ vi.mock('@/stores/sessionAgentStore', () => ({ useSessionAgentStore: mocks.useSessionAgentStore, })) -vi.mock('@/hooks/useAgents', () => ({ - useAgents: mocks.useAgents, -})) - vi.mock('@/contexts/EventContext', () => ({ usePermissions: () => ({ hasForSession: vi.fn().mockReturnValue(false), @@ -399,7 +395,7 @@ describe('PromptInput STT Gesture Tests', () => { expect(voiceButtons.length).toBeGreaterThan(0) }) - it('does NOT render mobile in-row ArrowDown button', async () => { + it('renders mobile in-row Latest button when showScrollButton is true', async () => { mocks.useMobile.mockReturnValue(true) render( @@ -408,7 +404,8 @@ describe('PromptInput STT Gesture Tests', () => { ) - expect(screen.queryByTitle('Scroll to bottom')).not.toBeInTheDocument() + expect(screen.getByTitle('Scroll to bottom')).toBeInTheDocument() + expect(screen.getByText('Latest')).toBeInTheDocument() }) }) }) diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx index 58fb6f16..b6b907e9 100644 --- a/frontend/src/components/message/PromptInput.tsx +++ b/frontend/src/components/message/PromptInput.tsx @@ -67,7 +67,7 @@ interface PromptInputProps { showScrollButton?: boolean isSessionActive?: boolean isStreamingResponse?: boolean - onScrollToBottom?: () => void + onScrollToBottom: () => void onShowSessionsDialog?: () => void onShowModelsDialog?: () => void onShowHelpDialog?: () => void @@ -1034,6 +1034,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read) const { hasVariants, currentVariant, cycleVariant } = useVariants(opcodeUrl, directory) const showStopButton = isSessionActive const hideSecondaryButtons = isMobile && isSessionActive + const showMobileScrollButton = isMobile && showScrollButton const voiceFeedbackState: VoiceStatusOverlayState | null = isTogglingRecording ? 'starting' : isProcessing @@ -1211,20 +1212,33 @@ return (
- + {showMobileScrollButton ? ( + + ) : ( + + )} {isSessionActive ? (
) : ( - !hideSecondaryButtons && ( + !hideSecondaryButtons && !showMobileScrollButton && ( { }) describe('load functionality', () => { - it('shows Load button when sessionId and opcodeUrl are provided', async () => { + it('makes skill cards clickable when sessionId and opcodeUrl are provided', async () => { mocks.listManagedSkills.mockResolvedValue(mockSkills) mocks.sendCommand.mockResolvedValue(undefined) @@ -173,10 +173,11 @@ describe('RepoSkillsDialog', () => { expect(screen.getByText('Test skill')).toBeInTheDocument() }) - expect(screen.getByText('Load')).toBeInTheDocument() + const card = screen.getByText('Test skill').closest('[class*="cursor-pointer"]') + expect(card).toBeTruthy() }) - it('does not show Load button when sessionId is not provided', async () => { + it('does not make skill cards clickable when sessionId is not provided', async () => { mocks.listManagedSkills.mockResolvedValue(mockSkills) render( @@ -192,10 +193,11 @@ describe('RepoSkillsDialog', () => { expect(screen.getByText('Test skill')).toBeInTheDocument() }) - expect(screen.queryByText('Load')).not.toBeInTheDocument() + const card = screen.getByText('Test skill').closest('[class*="cursor-pointer"]') + expect(card).toBeNull() }) - it('calls sendCommand and closes dialog on Load click', async () => { + it('calls sendCommand and closes dialog on card click', async () => { mocks.listManagedSkills.mockResolvedValue(mockSkills) mocks.sendCommand.mockReturnValue(new Promise(() => {})) @@ -220,8 +222,8 @@ describe('RepoSkillsDialog', () => { expect(screen.getByText('Test skill')).toBeInTheDocument() }) - const loadButton = screen.getByText('Load') - await user.click(loadButton) + const card = screen.getByText('Test skill').closest('[class*="cursor-pointer"]')! + await user.click(card) expect(onOpenChange).toHaveBeenCalledWith(false) expect(onSkillLoaded).toHaveBeenCalledWith(mockSkills[0]) @@ -255,8 +257,8 @@ describe('RepoSkillsDialog', () => { expect(screen.getByText('Test skill')).toBeInTheDocument() }) - const loadButton = screen.getByText('Load') - await user.click(loadButton) + const card = screen.getByText('Test skill').closest('[class*="cursor-pointer"]')! + await user.click(card) await waitFor(() => { expect(showToast.error).toHaveBeenCalledWith('Failed to load') diff --git a/frontend/src/components/repo/RepoSkillsList.tsx b/frontend/src/components/repo/RepoSkillsList.tsx index 9538f564..d0b4356b 100644 --- a/frontend/src/components/repo/RepoSkillsList.tsx +++ b/frontend/src/components/repo/RepoSkillsList.tsx @@ -60,8 +60,8 @@ export function RepoSkillsList({ {data.map((skill) => (
onLoad?.(skill)} - className={`p-2 rounded-lg border border-border bg-card flex items-center justify-between gap-2 ${onLoad ? 'cursor-pointer hover:bg-accent transition-colors' : ''}`} + onClick={onLoad ? () => onLoad(skill) : undefined} + className={`p-2 rounded-lg border border-border bg-card flex items-center gap-2 ${onLoad ? 'cursor-pointer hover:bg-accent transition-colors' : ''}`} >

diff --git a/frontend/src/components/ui/dialog.test.tsx b/frontend/src/components/ui/dialog.test.tsx index 473fdd63..7e1ec386 100644 --- a/frontend/src/components/ui/dialog.test.tsx +++ b/frontend/src/components/ui/dialog.test.tsx @@ -141,7 +141,7 @@ describe("DialogContent", () => { const content = screen.getByTestId("dialog-content"); expect(content).toHaveClass("custom-class"); expect(content).toHaveClass("fixed"); - expect(content).toHaveClass("z-50"); + expect(content).toHaveClass("z-[70]"); }); it("renders children correctly", () => { diff --git a/frontend/src/hooks/__tests__/useHeaderScrollVisibility.test.tsx b/frontend/src/hooks/__tests__/useHeaderScrollVisibility.test.tsx new file mode 100644 index 00000000..dbc5eb7d --- /dev/null +++ b/frontend/src/hooks/__tests__/useHeaderScrollVisibility.test.tsx @@ -0,0 +1,129 @@ +import { act, renderHook } from '@testing-library/react' +import { describe, expect, it, vi } from 'vitest' +import { useHeaderScrollVisibility } from '../useHeaderScrollVisibility' + +interface ScrollContainerOptions { + scrollTop?: number + scrollHeight?: number + clientHeight?: number +} + +function createContainerRef({ + scrollTop = 0, + scrollHeight = 1000, + clientHeight = 500, +}: ScrollContainerOptions = {}) { + const el = document.createElement('div') + Object.defineProperty(el, 'scrollTop', { value: scrollTop, writable: true, configurable: true }) + Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, writable: true, configurable: true }) + Object.defineProperty(el, 'clientHeight', { value: clientHeight, writable: true, configurable: true }) + return { current: el } +} + +function scroll(container: HTMLElement, scrollTop: number, scrollHeight?: number) { + act(() => { + container.scrollTop = scrollTop + if (scrollHeight !== undefined) { + Object.defineProperty(container, 'scrollHeight', { value: scrollHeight, writable: true, configurable: true }) + } + container.dispatchEvent(new Event('scroll')) + }) +} + +describe('useHeaderScrollVisibility', () => { + it('returns true initially', () => { + const ref = createContainerRef() + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + + expect(result.current.isHeaderVisible).toBe(true) + }) + + it('does not hide the header when disabled', () => { + const ref = createContainerRef({ scrollTop: 100 }) + const addEventListenerSpy = vi.spyOn(ref.current, 'addEventListener') + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: false })) + scroll(ref.current, 200) + + expect(result.current.isHeaderVisible).toBe(true) + expect(addEventListenerSpy).not.toHaveBeenCalledWith('scroll', expect.any(Function), expect.anything()) + }) + + it('hides the header when scrolling down past the threshold', () => { + const ref = createContainerRef({ scrollTop: 100 }) + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 200) + + expect(result.current.isHeaderVisible).toBe(false) + }) + + it('shows the header after being hidden when scrolling up past the threshold', () => { + const ref = createContainerRef({ scrollTop: 100 }) + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 200) + scroll(ref.current, 100) + + expect(result.current.isHeaderVisible).toBe(true) + }) + + it('keeps the header visible at the top', () => { + const ref = createContainerRef({ scrollTop: 100 }) + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 200) + scroll(ref.current, 0) + + expect(result.current.isHeaderVisible).toBe(true) + }) + + it('forces the header visible near the bottom even while scrolling down', () => { + const ref = createContainerRef({ scrollTop: 400, scrollHeight: 1000, clientHeight: 500 }) + + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 450) + scroll(ref.current, 460) + + expect(result.current.isHeaderVisible).toBe(true) + }) + + it('ignores small scroll deltas', () => { + const ref = createContainerRef({ scrollTop: 100 }) + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 200) + scroll(ref.current, 205) + + expect(result.current.isHeaderVisible).toBe(false) + }) + + it('ignores scroll events where content height changed', () => { + const ref = createContainerRef({ scrollTop: 100, scrollHeight: 1000 }) + + const { result } = renderHook(() => useHeaderScrollVisibility({ containerRef: ref, enabled: true })) + scroll(ref.current, 200, 1200) + + expect(result.current.isHeaderVisible).toBe(true) + }) + + it('forces visibility back to true when resetKey changes', () => { + const ref = createContainerRef({ scrollTop: 100 }) + + + const { result, rerender } = renderHook( + ({ resetKey }) => useHeaderScrollVisibility({ containerRef: ref, enabled: true, resetKey }), + { initialProps: { resetKey: 'one' } }, + ) + scroll(ref.current, 200) + + expect(result.current.isHeaderVisible).toBe(false) + + rerender({ resetKey: 'two' }) + + + expect(result.current.isHeaderVisible).toBe(true) + }) +}) diff --git a/frontend/src/hooks/__tests__/useTallScrollContent.test.tsx b/frontend/src/hooks/__tests__/useTallScrollContent.test.tsx deleted file mode 100644 index 76e98957..00000000 --- a/frontend/src/hooks/__tests__/useTallScrollContent.test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { renderHook, act } from '@testing-library/react' -import { useTallScrollContent } from '../useTallScrollContent' - -let mockObserve: ReturnType -let mockDisconnect: ReturnType -let resizeCallback: ((entries: ResizeObserverEntry[]) => void) | null = null - -vi.stubGlobal('ResizeObserver', vi.fn((cb: (entries: ResizeObserverEntry[]) => void) => { - resizeCallback = cb - return { - observe: mockObserve, - disconnect: mockDisconnect, - unobserve: vi.fn(), - } -})) - -describe('useTallScrollContent', () => { - beforeEach(() => { - vi.clearAllMocks() - mockObserve = vi.fn() - mockDisconnect = vi.fn() - resizeCallback = null - }) - - afterEach(() => { - vi.restoreAllMocks() - }) - - function createContainerRef(scrollHeight: number, clientHeight: number) { - const el = document.createElement('div') - Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, configurable: true }) - Object.defineProperty(el, 'clientHeight', { value: clientHeight, configurable: true }) - return { current: el } - } - - it('returns false when scrollHeight <= clientHeight * ratio', () => { - const ref = createContainerRef(500, 400) - - const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject, 1.5)) - expect(result.current).toBe(false) - }) - - it('returns true when scrollHeight > clientHeight * ratio', () => { - const ref = createContainerRef(2000, 800) - - const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject, 1.5)) - expect(result.current).toBe(true) - }) - - it('updates from false to true when ResizeObserver fires with taller content', () => { - const ref = createContainerRef(500, 400) - - const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject, 1.5)) - expect(result.current).toBe(false) - - Object.defineProperty(ref.current, 'scrollHeight', { value: 2000 }) - act(() => { - resizeCallback?.([] as ResizeObserverEntry[]) - }) - - expect(result.current).toBe(true) - }) - - it('updates from true to false when ResizeObserver fires with smaller container', () => { - const ref = createContainerRef(2000, 800) - - const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject, 1.5)) - expect(result.current).toBe(true) - - Object.defineProperty(ref.current, 'clientHeight', { value: 2000 }) - act(() => { - resizeCallback?.([] as ResizeObserverEntry[]) - }) - - expect(result.current).toBe(false) - }) -}) diff --git a/frontend/src/hooks/useAutoScroll.test.tsx b/frontend/src/hooks/useAutoScroll.test.tsx index 641c6dc4..3ed17c31 100644 --- a/frontend/src/hooks/useAutoScroll.test.tsx +++ b/frontend/src/hooks/useAutoScroll.test.tsx @@ -50,6 +50,7 @@ describe('useAutoScroll', () => { beforeEach(() => { vi.useFakeTimers() + vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => window.setTimeout(() => callback(performance.now()), 0)) }) afterEach(() => { @@ -58,6 +59,7 @@ describe('useAutoScroll', () => { containerHarness = null } vi.restoreAllMocks() + vi.unstubAllGlobals() vi.clearAllTimers() }) @@ -165,11 +167,100 @@ describe('useAutoScroll', () => { expect(containerHarness.getScrollTop()).toBe(containerHarness.div.scrollHeight - containerHarness.div.clientHeight) }) + it('scrolls to bottom again after layout frames', () => { + const messages = [createMessage('1', 'user'), createMessage('2', 'assistant')] + const { renderResult, containerHarness } = setupHook(messages) + + act(() => { + renderResult.result.current.scrollToBottom() + }) + + containerHarness.setScrollHeight(containerHarness.div.scrollHeight + 300) + + act(() => { + vi.runOnlyPendingTimers() + }) + + expect(containerHarness.getScrollTop()).toBe(containerHarness.div.scrollHeight - containerHarness.div.clientHeight) + }) + + it('does not keep forcing bottom after user scrolls up', () => { + const messages = [createMessage('1', 'user'), createMessage('2', 'assistant')] + const { renderResult, containerHarness, onScrollStateChange } = setupHook(messages) + + act(() => { + renderResult.result.current.scrollToBottom() + }) + + const userPosition = 100 + act(() => { + containerHarness.setScrollTop(userPosition) + containerHarness.div.dispatchEvent( + new WheelEvent('wheel', { + deltaY: -50, + bubbles: true, + }) + ) + vi.runOnlyPendingTimers() + }) + + expect(onScrollStateChange).toHaveBeenCalledWith(true) + expect(containerHarness.getScrollTop()).toBe(userPosition) + }) + + it('cancels pending bottom scroll as soon as user touches the list', () => { + const messages = [createMessage('1', 'user'), createMessage('2', 'assistant')] + const { renderResult, containerHarness } = setupHook(messages) + + act(() => { + renderResult.result.current.scrollToBottom() + }) + + const userPosition = 120 + act(() => { + containerHarness.div.dispatchEvent( + new PointerEvent('pointerdown', { + clientY: 200, + bubbles: true, + }) + ) + containerHarness.setScrollTop(userPosition) + vi.runOnlyPendingTimers() + }) + + expect(containerHarness.getScrollTop()).toBe(userPosition) + }) + + it('does not show scroll button on tiny upward drag from bottom', () => { + const messages = [createMessage('1', 'user')] + const { containerHarness, onScrollStateChange } = setupHook(messages) + const bottomPosition = containerHarness.div.scrollHeight - containerHarness.div.clientHeight + + act(() => { + containerHarness.setScrollTop(bottomPosition - 20) + containerHarness.div.dispatchEvent( + new PointerEvent('pointerdown', { + clientY: 200, + bubbles: true, + }) + ) + containerHarness.div.dispatchEvent( + new PointerEvent('pointermove', { + clientY: 260, + bubbles: true, + }) + ) + }) + + expect(onScrollStateChange).not.toHaveBeenCalledWith(true) + }) + it('disengages when user fires a wheel-up event', () => { const messages = [createMessage('1', 'user')] const { containerHarness, onScrollStateChange } = setupHook(messages) act(() => { + containerHarness.setScrollTop(100) containerHarness.div.dispatchEvent( new WheelEvent('wheel', { deltaY: -50, @@ -192,6 +283,7 @@ describe('useAutoScroll', () => { const { containerHarness, onScrollStateChange } = setupHook(messages) act(() => { + containerHarness.setScrollTop(100) containerHarness.div.dispatchEvent( new PointerEvent('pointerdown', { clientY: 200, @@ -220,6 +312,7 @@ describe('useAutoScroll', () => { const { containerHarness, onScrollStateChange } = setupHook(messages) act(() => { + containerHarness.setScrollTop(100) containerHarness.div.dispatchEvent( new WheelEvent('wheel', { deltaY: -50, @@ -246,6 +339,7 @@ describe('useAutoScroll', () => { const { renderResult, containerHarness, onScrollStateChange } = setupHook(messages) act(() => { + containerHarness.setScrollTop(100) containerHarness.div.dispatchEvent( new WheelEvent('wheel', { deltaY: -50, diff --git a/frontend/src/hooks/useAutoScroll.ts b/frontend/src/hooks/useAutoScroll.ts index 826037ab..24315ed6 100644 --- a/frontend/src/hooks/useAutoScroll.ts +++ b/frontend/src/hooks/useAutoScroll.ts @@ -3,6 +3,8 @@ import type { Message } from '@/api/types' const SCROLL_LOCK_MS = 300 const BOTTOM_THRESHOLD_PX = 48 +const SHOW_SCROLL_BUTTON_THRESHOLD_PX = 120 +const SCROLL_TO_BOTTOM_FRAME_COUNT = 2 interface UseAutoScrollOptions { containerRef?: React.RefObject @@ -30,6 +32,8 @@ export function useAutoScroll({ const pointerStartYRef = useRef(null) const pointerActiveRef = useRef(false) const onScrollStateChangeRef = useRef(onScrollStateChange) + const scrollRequestIdRef = useRef(0) + const isScrollButtonVisibleRef = useRef(false) onScrollStateChangeRef.current = onScrollStateChange @@ -37,7 +41,25 @@ export function useAutoScroll({ if (!containerRef?.current) return userScrolledAtRef.current = 0 userDisengagedRef.current = false - containerRef.current.scrollTop = containerRef.current.scrollHeight + isScrollButtonVisibleRef.current = false + const scrollRequestId = scrollRequestIdRef.current + 1 + scrollRequestIdRef.current = scrollRequestId + const scroll = () => { + if (!containerRef?.current) return + containerRef.current.scrollTop = containerRef.current.scrollHeight + } + + scroll() + let frameCount = 0 + const scrollAfterLayout = () => { + if (scrollRequestIdRef.current !== scrollRequestId) return + frameCount += 1 + scroll() + if (frameCount < SCROLL_TO_BOTTOM_FRAME_COUNT) { + requestAnimationFrame(scrollAfterLayout) + } + } + requestAnimationFrame(scrollAfterLayout) onScrollStateChangeRef.current?.(false) }, [containerRef]) @@ -53,8 +75,13 @@ export function useAutoScroll({ if (!container) return const markDisengaged = () => { + const container = containerRef?.current + if (!container) return + const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight userScrolledAtRef.current = Date.now() - if (!userDisengagedRef.current) { + scrollRequestIdRef.current += 1 + if (!isScrollButtonVisibleRef.current && distanceFromBottom > SHOW_SCROLL_BUTTON_THRESHOLD_PX) { + isScrollButtonVisibleRef.current = true onScrollStateChangeRef.current?.(true) } userDisengagedRef.current = true @@ -63,6 +90,7 @@ export function useAutoScroll({ const handlePointerDown = (e: PointerEvent) => { pointerStartYRef.current = e.clientY pointerActiveRef.current = true + scrollRequestIdRef.current += 1 } const handlePointerMove = (e: PointerEvent) => { @@ -98,12 +126,19 @@ export function useAutoScroll({ if (userDisengagedRef.current) { userScrolledAtRef.current = 0 userDisengagedRef.current = false + isScrollButtonVisibleRef.current = false onScrollStateChangeRef.current?.(false) } + } else if (userDisengagedRef.current && !isScrollButtonVisibleRef.current && scrollHeight - scrollTop - clientHeight > SHOW_SCROLL_BUTTON_THRESHOLD_PX) { + isScrollButtonVisibleRef.current = true + onScrollStateChangeRef.current?.(true) } else if (pointerActiveRef.current && !userDisengagedRef.current) { userScrolledAtRef.current = Date.now() userDisengagedRef.current = true - onScrollStateChangeRef.current?.(true) + if (scrollHeight - scrollTop - clientHeight > SHOW_SCROLL_BUTTON_THRESHOLD_PX) { + isScrollButtonVisibleRef.current = true + onScrollStateChangeRef.current?.(true) + } } } diff --git a/frontend/src/hooks/useHeaderScrollVisibility.ts b/frontend/src/hooks/useHeaderScrollVisibility.ts new file mode 100644 index 00000000..c3c9ba1d --- /dev/null +++ b/frontend/src/hooks/useHeaderScrollVisibility.ts @@ -0,0 +1,69 @@ +import { useEffect, useRef, useState } from 'react' + +interface UseHeaderScrollVisibilityOptions { + containerRef: React.RefObject + enabled: boolean + resetKey?: string +} + +interface UseHeaderScrollVisibilityReturn { + isHeaderVisible: boolean +} + +const SCROLL_DELTA_THRESHOLD_PX = 8 +const TOP_THRESHOLD_PX = 24 +const BOTTOM_THRESHOLD_PX = 48 + +export function useHeaderScrollVisibility({ + containerRef, + enabled, + resetKey, +}: UseHeaderScrollVisibilityOptions): UseHeaderScrollVisibilityReturn { + const [isHeaderVisible, setIsHeaderVisible] = useState(true) + const lastScrollTopRef = useRef(0) + const lastScrollHeightRef = useRef(0) + + useEffect(() => { + const container = containerRef.current + if (!container) return + + lastScrollTopRef.current = container.scrollTop + lastScrollHeightRef.current = container.scrollHeight + setIsHeaderVisible(true) + + if (!enabled) return + + const handleScroll = () => { + const { scrollTop, scrollHeight, clientHeight } = container + const previousScrollTop = lastScrollTopRef.current + const previousScrollHeight = lastScrollHeightRef.current + + lastScrollTopRef.current = scrollTop + lastScrollHeightRef.current = scrollHeight + + if (scrollHeight !== previousScrollHeight) return + + const delta = scrollTop - previousScrollTop + if (Math.abs(delta) < SCROLL_DELTA_THRESHOLD_PX) return + + const isAtTop = scrollTop < TOP_THRESHOLD_PX + const isAtBottom = scrollHeight - scrollTop - clientHeight < BOTTOM_THRESHOLD_PX + + if (isAtTop || isAtBottom) { + setIsHeaderVisible(true) + return + } + + if (delta > 0) { + setIsHeaderVisible(false) + } else { + setIsHeaderVisible(true) + } + } + + container.addEventListener('scroll', handleScroll, { passive: true }) + return () => container.removeEventListener('scroll', handleScroll) + }, [containerRef, enabled, resetKey]) + + return { isHeaderVisible } +} diff --git a/frontend/src/hooks/useTallScrollContent.ts b/frontend/src/hooks/useTallScrollContent.ts deleted file mode 100644 index d4e0dcca..00000000 --- a/frontend/src/hooks/useTallScrollContent.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useState, useEffect, useRef } from 'react' - -export function useTallScrollContent( - containerRef: React.RefObject, - ratio = 1.5 -): boolean { - const [isTall, setIsTall] = useState(false) - const observingRef = useRef(null) - - useEffect(() => { - const recompute = () => { - const el = containerRef.current - if (!el) return - setIsTall(el.scrollHeight > el.clientHeight * ratio) - } - - const el = containerRef.current - - if (!el || el === observingRef.current) return - - observingRef.current = el - recompute() - - const observer = new ResizeObserver(recompute) - observer.observe(el) - el.addEventListener('scroll', recompute) - - return () => { - observer.disconnect() - el.removeEventListener('scroll', recompute) - observingRef.current = null - } - }) - - return isTall -} diff --git a/frontend/src/lib/audioRecorder.test.ts b/frontend/src/lib/audioRecorder.test.ts index d8dc0eaa..d0b3773b 100644 --- a/frontend/src/lib/audioRecorder.test.ts +++ b/frontend/src/lib/audioRecorder.test.ts @@ -1,6 +1,14 @@ import { describe, it, expect } from 'vitest' import { AudioRecorder, downsampleAndConvert, encodeWavFromInt16 } from './audioRecorder' +const blobToArrayBuffer = (blob: Blob): Promise => + new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onload = () => resolve(reader.result as ArrayBuffer) + reader.onerror = () => reject(reader.error) + reader.readAsArrayBuffer(blob) + }) + describe('downsampleAndConvert', () => { it('should produce correct output length for 48kHz to 16kHz', () => { const inputLength = 4800 @@ -61,7 +69,7 @@ describe('encodeWavFromInt16', () => { it('should have RIFF header at offset 0', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const riff = String.fromCharCode( @@ -76,7 +84,7 @@ describe('encodeWavFromInt16', () => { it('should have WAVE identifier at offset 8', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const wave = String.fromCharCode( @@ -91,7 +99,7 @@ describe('encodeWavFromInt16', () => { it('should have sample rate at offset 24', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const sampleRate = view.getUint32(24, true) @@ -101,7 +109,7 @@ describe('encodeWavFromInt16', () => { it('should have data identifier at offset 36', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const data = String.fromCharCode( @@ -116,7 +124,7 @@ describe('encodeWavFromInt16', () => { it('should have correct file size for 1000 samples', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) expect(arrayBuffer.byteLength).toBe(44 + 1000 * 2) }) @@ -124,7 +132,7 @@ describe('encodeWavFromInt16', () => { it('should handle different sample rates', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 44100, 1) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const sampleRate = view.getUint32(24, true) @@ -134,7 +142,7 @@ describe('encodeWavFromInt16', () => { it('should handle stereo channels', async () => { const samples = new Int16Array(1000) const blob = encodeWavFromInt16(samples, 16000, 2) - const arrayBuffer = await blob.arrayBuffer() + const arrayBuffer = await blobToArrayBuffer(blob) const view = new DataView(arrayBuffer) const channels = view.getUint16(22, true) diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx index 93b811d3..f1976890 100644 --- a/frontend/src/pages/SessionDetail.tsx +++ b/frontend/src/pages/SessionDetail.tsx @@ -5,7 +5,7 @@ import { getRepo, initializeAssistantMode } from "@/api/repos"; import { MessageThread } from "@/components/message/MessageThread"; import { PromptInput, type PromptInputHandle } from "@/components/message/PromptInput"; import { FloatingTTSButton } from '@/components/message/FloatingTTSButton' -import { X, CornerUpLeft, ArrowDown } from "lucide-react"; +import { X, CornerUpLeft } from "lucide-react"; import { ModelSelectDialog } from "@/components/model/ModelSelectDialog"; import { Header } from "@/components/ui/header"; import { SessionList } from "@/components/session/SessionList"; @@ -26,8 +26,8 @@ import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts"; import { useSettingsDialog } from "@/hooks/useSettingsDialog"; import { useAutoScroll } from "@/hooks/useAutoScroll"; import { useMobile } from "@/hooks/useMobile"; +import { useHeaderScrollVisibility } from "@/hooks/useHeaderScrollVisibility"; import { useVisualViewport } from "@/hooks/useVisualViewport"; -import { useTallScrollContent } from "@/hooks/useTallScrollContent"; import { useTTS } from "@/hooks/useTTS"; import { getAssistantText, getLatestPlayableAssistantMessage, useAutoPlayLastResponse } from "@/hooks/useAutoPlayLastResponse"; import { useEffect, useRef, useCallback, useMemo } from "react"; @@ -62,7 +62,7 @@ const compareMessageIds = (id1: string, id2: string): number => { } const PENDING_ACTION_SYNC_INTERVAL_MS = 30000 - +const PROMPT_OVERLAY_CLEARANCE_PX = 16 export function SessionDetail() { const { id, sessionId } = useParams<{ id: string; sessionId: string }>(); const navigate = useNavigate(); @@ -85,16 +85,12 @@ export function SessionDetail() { const [showScrollButton, setShowScrollButton] = useState(false); const [hasPromptContent, setHasPromptContent] = useState(false); const [minimizedQuestion, setMinimizedQuestion] = useState(null); - const [isHeaderVisible, setIsHeaderVisible] = useState(true); - const lastHeaderScrollTopRef = useRef(0); - const lastHeaderScrollHeightRef = useRef(0); const isMobile = useMobile(); const { keyboardHeight } = useVisualViewport(); const inputBottomOffset = isMobile ? keyboardHeight : 0; const promptOverlayRef = useRef(null); const [promptOverlayHeight, setPromptOverlayHeight] = useState(112); - const isContentTall = useTallScrollContent(messageContainerRef, 1.5); useEffect(() => { const el = promptOverlayRef.current; @@ -162,6 +158,11 @@ export function SessionDetail() { contentVersion: messages?.reduce((sum, m) => sum + m.parts.length, 0) ?? 0, onScrollStateChange: setShowScrollButton }); + const { isHeaderVisible } = useHeaderScrollVisibility({ + containerRef: messageContainerRef, + enabled: isMobile, + resetKey: `${repoDirectory ?? ''}:${sessionId ?? ''}`, + }); const abortSession = useAbortSession(opcodeUrl, repoDirectory, sessionId); const updateSession = useUpdateSession(opcodeUrl, repoDirectory); const createSession = useCreateSession(opcodeUrl, repoDirectory); @@ -214,52 +215,6 @@ export function SessionDetail() { } }, [sessionId, minimizedQuestion]) - useEffect(() => { - const container = messageContainerRef.current - if (!container) return - - lastHeaderScrollTopRef.current = container.scrollTop - lastHeaderScrollHeightRef.current = container.scrollHeight - setIsHeaderVisible(true) - - const SCROLL_DELTA_THRESHOLD = 8 - - const handleScroll = () => { - if (!isMobile) { - setIsHeaderVisible(true) - return - } - const currentScrollTop = container.scrollTop - const previousScrollTop = lastHeaderScrollTopRef.current - const currentScrollHeight = container.scrollHeight - const previousScrollHeight = lastHeaderScrollHeightRef.current - - lastHeaderScrollTopRef.current = currentScrollTop - lastHeaderScrollHeightRef.current = currentScrollHeight - - if (currentScrollHeight !== previousScrollHeight) return - - const delta = currentScrollTop - previousScrollTop - if (Math.abs(delta) < SCROLL_DELTA_THRESHOLD) return - - const isAtTop = currentScrollTop < 24 - - if (isAtTop) { - setIsHeaderVisible(true) - return - } - - if (delta > 0) { - setIsHeaderVisible(true) - } else { - setIsHeaderVisible(false) - } - } - - container.addEventListener('scroll', handleScroll, { passive: true }) - return () => container.removeEventListener('scroll', handleScroll) - }, [repoDirectory, sessionId, isMobile]) - const syncPendingActionsForSession = useCallback(async () => { if (!repoDirectory || !sessionId) return await Promise.all([ @@ -532,7 +487,7 @@ export function SessionDetail() {

-
+
{repoLoading || assistantModeLoading || sessionLoading || messagesLoading ? ( ) : opcodeUrl && repoDirectory ? ( @@ -578,18 +533,6 @@ export function SessionDetail() { )}
- {isMobile && showScrollButton && isContentTall && ( -
- -
- )} {leaderActive && (
Waiting for shortcut key... @@ -618,7 +561,7 @@ export function SessionDetail() { directory={repoDirectory} sessionID={sessionId} disabled={!isConnected} - showScrollButton={showScrollButton} + showScrollButton={showScrollButton && !hasPromptContent} isSessionActive={isSessionActive} isStreamingResponse={isStreamingResponse} onScrollToBottom={scrollToBottom} diff --git a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx index 7bcb3602..3c928c41 100644 --- a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx +++ b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx @@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest' import { render, screen, fireEvent, waitFor } from '@testing-library/react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { MemoryRouter, Route, Routes } from 'react-router-dom' +import { useEffect } from 'react' import { SessionDetail } from '../SessionDetail' const mocks = vi.hoisted(() => ({ @@ -22,7 +23,7 @@ const mocks = vi.hoisted(() => ({ useAutoScroll: vi.fn(), useDialogParam: vi.fn(), useSidebarAction: vi.fn(), - useTallScrollContent: vi.fn(), + PromptInput: vi.fn(), })) vi.mock('@/config', () => ({ @@ -53,10 +54,6 @@ vi.mock('@/hooks/useModelSelection', () => ({ useModelSelection: vi.fn(() => ({ model: null, modelString: null })), })) -vi.mock('@/hooks/useOpenCodeClient', () => ({ - useOpenCodeClient: mocks.useOpenCodeClient, -})) - vi.mock('@/hooks/useTTS', () => ({ useTTS: vi.fn(() => ({ isEnabled: false })), })) @@ -97,10 +94,6 @@ vi.mock('@/hooks/useSidebarAction', () => ({ useSidebarAction: vi.fn(() => {}), })) -vi.mock('@/hooks/useTallScrollContent', () => ({ - useTallScrollContent: mocks.useTallScrollContent, -})) - vi.mock('@/hooks/useAutoPlayLastResponse', () => ({ getAssistantText: vi.fn(() => ''), getLatestPlayableAssistantMessage: vi.fn(() => null), @@ -198,7 +191,7 @@ vi.mock('@/components/notifications/PendingActionsGroup', () => ({ })) vi.mock('@/components/message/PromptInput', () => ({ - PromptInput: vi.fn(() =>
MockedPromptInput
), + PromptInput: mocks.PromptInput, })) describe('SessionDetail scroll floating button', () => { @@ -233,6 +226,7 @@ describe('SessionDetail scroll floating button', () => { mocks.useKeyboardShortcuts.mockReturnValue({ leaderActive: false }) mocks.useDialogParam.mockReturnValue([false, vi.fn()]) mocks.useSidebarAction.mockReturnValue(undefined) + mocks.PromptInput.mockImplementation(() =>
MockedPromptInput
) }) const createQueryClient = () => @@ -240,11 +234,11 @@ describe('SessionDetail scroll floating button', () => { const renderWith = (opts: { mobile: boolean - tallContent: boolean showScrollButton: boolean + promptContent?: boolean + sessionActive?: boolean }) => { mocks.useMobile.mockReturnValue(opts.mobile) - mocks.useTallScrollContent.mockReturnValue(opts.tallContent) mocks.useAutoScroll.mockImplementation( ({ onScrollStateChange }: { onScrollStateChange?: (v: boolean) => void }) => { if (opts.showScrollButton) { @@ -254,6 +248,24 @@ describe('SessionDetail scroll floating button', () => { } ) + mocks.PromptInput.mockImplementation((props: { onPromptChange?: (hasContent: boolean) => void; showScrollButton?: boolean; onScrollToBottom: () => void }) => { + const { onPromptChange } = props + useEffect(() => { + onPromptChange?.(opts.promptContent ?? false) + }, [onPromptChange]) + + return ( +
+ MockedPromptInput + {props.showScrollButton && ( + + )} +
+ ) + }) + return render( @@ -265,8 +277,8 @@ describe('SessionDetail scroll floating button', () => { ) } - it('renders floating ArrowDown when mobile + showScrollButton + isContentTall', async () => { - renderWith({ mobile: true, tallContent: true, showScrollButton: true }) + it('passes scroll button state to PromptInput when showScrollButton is true', async () => { + renderWith({ mobile: true, showScrollButton: true }) await waitFor(() => { expect(screen.getByTitle('Scroll to bottom')).toBeInTheDocument() @@ -274,29 +286,38 @@ describe('SessionDetail scroll floating button', () => { expect(screen.getByLabelText('Scroll to bottom')).toBeInTheDocument() }) - it('does NOT render floating ArrowDown when mobile + showScrollButton but not tall content', async () => { - renderWith({ mobile: true, tallContent: false, showScrollButton: true }) + it('still passes scroll button state when content height is below tall threshold', async () => { + renderWith({ mobile: true, showScrollButton: true }) - await waitFor(() => expect(screen.getByText('MockedPromptInput')).toBeInTheDocument()) - expect(screen.queryByLabelText('Scroll to bottom')).not.toBeInTheDocument() + await waitFor(() => { + expect(screen.getByLabelText('Scroll to bottom')).toBeInTheDocument() + }) }) - it('does NOT render floating ArrowDown when mobile + tall content but no showScrollButton', async () => { - renderWith({ mobile: true, tallContent: true, showScrollButton: false }) + it('does NOT pass scroll button state when mobile + tall content but no showScrollButton', async () => { + renderWith({ mobile: true, showScrollButton: false }) await waitFor(() => expect(screen.getByText('MockedPromptInput')).toBeInTheDocument()) expect(screen.queryByLabelText('Scroll to bottom')).not.toBeInTheDocument() }) - it('does NOT render floating ArrowDown on desktop even with showScrollButton and tall content', async () => { - renderWith({ mobile: false, tallContent: true, showScrollButton: true }) + it('passes scroll button state on desktop for PromptInput desktop handling', async () => { + renderWith({ mobile: false, showScrollButton: true }) + + await waitFor(() => { + expect(screen.getByLabelText('Scroll to bottom')).toBeInTheDocument() + }) + }) + + it('does NOT pass scroll button state when prompt has content', async () => { + renderWith({ mobile: true, showScrollButton: true, promptContent: true }) await waitFor(() => expect(screen.getByText('MockedPromptInput')).toBeInTheDocument()) expect(screen.queryByLabelText('Scroll to bottom')).not.toBeInTheDocument() }) - it('clicking floating ArrowDown calls scrollToBottom from useAutoScroll', async () => { - renderWith({ mobile: true, tallContent: true, showScrollButton: true }) + it('clicking PromptInput scroll button calls scrollToBottom from useAutoScroll', async () => { + renderWith({ mobile: true, showScrollButton: true }) await waitFor(() => { expect(screen.getByLabelText('Scroll to bottom')).toBeInTheDocument() diff --git a/package.json b/package.json index 4d243ff7..c7cf8728 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ }, "dependencies": { "@radix-ui/react-tooltip": "^1.2.8", - "class-variance-authority": "^0.7.1", - "dotenv": "^17.2.3" + "class-variance-authority": "^0.7.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4895b1a1..17a19afa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,9 +14,6 @@ importers: class-variance-authority: specifier: ^0.7.1 version: 0.7.1 - dotenv: - specifier: ^17.2.3 - version: 17.2.3 devDependencies: concurrently: specifier: ^9.1.0 @@ -42,9 +39,6 @@ importers: croner: specifier: ^10.0.1 version: 10.0.1 - dotenv: - specifier: ^17.2.3 - version: 17.2.3 eventsource: specifier: ^4.1.0 version: 4.1.0 @@ -118,9 +112,6 @@ importers: '@hookform/resolvers': specifier: ^5.2.2 version: 5.2.2(react-hook-form@7.69.0(react@19.2.3)) - '@monaco-editor/react': - specifier: ^4.7.0 - version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@opencode-manager/shared': specifier: workspace:* version: link:../shared @@ -166,9 +157,6 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 - cmdk: - specifier: ^1.1.1 - version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) cronstrue: specifier: ^3.13.0 version: 3.13.0 @@ -181,9 +169,6 @@ importers: highlight.js: specifier: ^11.11.1 version: 11.11.1 - jsonc-parser: - specifier: ^3.3.1 - version: 3.3.1 lucide-react: specifier: ^0.546.0 version: 0.546.0(react@19.2.3) @@ -251,9 +236,6 @@ importers: '@vitejs/plugin-react': specifier: ^5.0.4 version: 5.1.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(yaml@2.9.0)) - autoprefixer: - specifier: ^10.4.21 - version: 10.4.23(postcss@8.5.6) eslint: specifier: ^9.39.1 version: 9.39.2(jiti@2.6.1) @@ -829,16 +811,6 @@ packages: '@mermaid-js/parser@0.6.3': resolution: {integrity: sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==} - '@monaco-editor/loader@1.7.0': - resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==} - - '@monaco-editor/react@4.7.0': - resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==} - peerDependencies: - monaco-editor: '>= 0.25.0 < 1' - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@noble/ciphers@2.1.1': resolution: {integrity: sha512-bysYuiVfhxNJuldNXlFEitTVdNnYUc+XNJZd7Qm2a5j1vZHgY+fazadNFWFaMK/2vye0JVlxV3gHmC0WDfAOQw==} engines: {node: '>= 20.19.0'} @@ -1946,13 +1918,6 @@ packages: async@3.2.6: resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==} - autoprefixer@10.4.23: - resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==} - engines: {node: ^10 || ^12 || >=14} - hasBin: true - peerDependencies: - postcss: ^8.1.0 - b4a@1.7.3: resolution: {integrity: sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==} peerDependencies: @@ -2169,12 +2134,6 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} - cmdk@1.1.1: - resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==} - peerDependencies: - react: ^18 || ^19 || ^19.0.0-rc - react-dom: ^18 || ^19 || ^19.0.0-rc - color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -2491,9 +2450,6 @@ packages: dom-accessibility-api@0.6.3: resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} - dompurify@3.2.7: - resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==} - dompurify@3.3.1: resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==} @@ -2685,9 +2641,6 @@ packages: resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==} engines: {node: '>=14'} - fraction.js@5.3.4: - resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==} - fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} @@ -3127,11 +3080,6 @@ packages: markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} - marked@14.0.0: - resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==} - engines: {node: '>= 18'} - hasBin: true - marked@16.4.2: resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==} engines: {node: '>= 20'} @@ -3311,9 +3259,6 @@ packages: mlly@1.8.0: resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==} - monaco-editor@0.55.1: - resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==} - mrmime@2.0.1: resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} engines: {node: '>=10'} @@ -3433,9 +3378,6 @@ packages: points-on-path@0.2.1: resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} - postcss-value-parser@4.2.0: - resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - postcss@8.5.6: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} @@ -3721,9 +3663,6 @@ packages: stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} - state-local@1.0.7: - resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} - std-env@3.10.0: resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==} @@ -4688,17 +4627,6 @@ snapshots: dependencies: langium: 3.3.1 - '@monaco-editor/loader@1.7.0': - dependencies: - state-local: 1.0.7 - - '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@monaco-editor/loader': 1.7.0 - monaco-editor: 0.55.1 - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - '@noble/ciphers@2.1.1': {} '@noble/hashes@2.0.1': {} @@ -5934,15 +5862,6 @@ snapshots: async@3.2.6: {} - autoprefixer@10.4.23(postcss@8.5.6): - dependencies: - browserslist: 4.28.1 - caniuse-lite: 1.0.30001762 - fraction.js: 5.3.4 - picocolors: 1.1.1 - postcss: 8.5.6 - postcss-value-parser: 4.2.0 - b4a@1.7.3: {} bail@2.0.2: {} @@ -6120,18 +6039,6 @@ snapshots: clsx@2.1.1: {} - cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3): - dependencies: - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3) - '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3) - '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - transitivePeerDependencies: - - '@types/react' - - '@types/react-dom' - color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -6454,15 +6361,12 @@ snapshots: dom-accessibility-api@0.6.3: {} - dompurify@3.2.7: - optionalDependencies: - '@types/trusted-types': 2.0.7 - dompurify@3.3.1: optionalDependencies: '@types/trusted-types': 2.0.7 - dotenv@17.2.3: {} + dotenv@17.2.3: + optional: true eastasianwidth@0.2.0: {} @@ -6667,8 +6571,6 @@ snapshots: cross-spawn: 7.0.6 signal-exit: 4.1.0 - fraction.js@5.3.4: {} - fs-constants@1.0.0: {} fsevents@2.3.3: @@ -7111,8 +7013,6 @@ snapshots: markdown-table@3.0.4: {} - marked@14.0.0: {} - marked@16.4.2: {} mdast-util-find-and-replace@3.0.2: @@ -7519,11 +7419,6 @@ snapshots: pkg-types: 1.3.1 ufo: 1.6.1 - monaco-editor@0.55.1: - dependencies: - dompurify: 3.2.7 - marked: 14.0.0 - mrmime@2.0.1: {} ms@2.1.3: {} @@ -7641,8 +7536,6 @@ snapshots: path-data-parser: 0.1.0 points-on-curve: 0.2.0 - postcss-value-parser@4.2.0: {} - postcss@8.5.6: dependencies: nanoid: 3.3.11 @@ -7985,8 +7878,6 @@ snapshots: stackback@0.0.2: {} - state-local@1.0.7: {} - std-env@3.10.0: {} streamx@2.23.0: