diff --git a/.pi-map.index.md b/.pi-map.index.md index 06d5739..d2e19ad 100644 --- a/.pi-map.index.md +++ b/.pi-map.index.md @@ -16,7 +16,7 @@ dir: . Trust boundary: index routes, map orients, source decides. ## role -Infrastructure and deployment configuration package for a self-hosted project management platform with containerized services, SSO integration, and reverse proxy support. +A self-hosted web-based project management and Git repository platform with OAuth2 authentication, containerized for Docker deployment. ## parent - ## children diff --git a/.pi-map.md b/.pi-map.md index 953e432..0db96ec 100644 --- a/.pi-map.md +++ b/.pi-map.md @@ -18,7 +18,7 @@ index: ./.pi-map.index.md Trust boundary: index routes, map orients, source decides. ## role -Infrastructure and deployment configuration package for a self-hosted project management platform with containerized services, SSO integration, and reverse proxy support. +A self-hosted web-based project management and Git repository platform with OAuth2 authentication, containerized for Docker deployment. ## files - .env.example | Provides a template of environment variables for configuring a Headquarter application with PostgreSQL, Redis, Authentik SSO, and Docker/Traefik deployment - .gitignore | Specifies files and directories for Git to ignore across a multi-language project with Python, Node, and custom tooling | dep: Git @@ -31,7 +31,7 @@ Infrastructure and deployment configuration package for a self-hosted project ma - progress.md | Tracks completed and remaining tasks for a backend-frontend code refactoring project organized in 7 phases - swap-pane | Empty file with no functionality ## arch -Docker Compose-based microservices architecture with environment-driven configuration, Traefik reverse proxy integration, and multi-service orchestration (PostgreSQL, Redis, API, frontend) supporting both standalone and proxy-terminated deployment modes. +Multi-service containerized architecture using Docker Compose with PostgreSQL persistence, Redis caching, separate frontend/backend services, and optional Traefik reverse proxy integration; follows OpenSpec-driven AI-assisted development workflows. ## tags docker, redis, git, application, postgresql, compose, traefik, project ## symbols diff --git a/apps/.pi-map.index.md b/apps/.pi-map.index.md index 8ca44fe..a65d3ec 100644 --- a/apps/.pi-map.index.md +++ b/apps/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps ## role -Container directory for all deployable application targets in the monorepo. +Contains the main deployable application entry points and top-level executable modules for the project. ## parent index: ./.pi-map.index.md map: ./.pi-map.md diff --git a/apps/.pi-map.md b/apps/.pi-map.md index d248497..7f96733 100644 --- a/apps/.pi-map.md +++ b/apps/.pi-map.md @@ -4,10 +4,10 @@ dir: apps index: apps/.pi-map.index.md ## role -Container directory for all deployable application targets in the monorepo. +Contains the main deployable application entry points and top-level executable modules for the project. ## files ## arch -Monorepo workspace structure where each subdirectory represents an independently deployable application sharing common libraries and tools. +Monorepo-style directory with separate app folders, each typically following a layered architecture with domain, application, and infrastructure separation. ## tags - ## symbols diff --git a/apps/web/.pi-map.index.md b/apps/web/.pi-map.index.md index caea1ca..d7be654 100644 --- a/apps/web/.pi-map.index.md +++ b/apps/web/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web ## role -Frontend web application providing a browser-based React/TypeScript UI with code editing, terminal, and routing capabilities. +Frontend web application providing a browser-based UI with code editing, terminal, and routing capabilities for the "headquarter" project. ## parent index: apps/.pi-map.index.md map: apps/.pi-map.md diff --git a/apps/web/.pi-map.md b/apps/web/.pi-map.md index bcfadad..010bcc0 100644 --- a/apps/web/.pi-map.md +++ b/apps/web/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web index: apps/web/.pi-map.index.md ## role -Frontend web application providing a browser-based React/TypeScript UI with code editing, terminal, and routing capabilities. +Frontend web application providing a browser-based UI with code editing, terminal, and routing capabilities for the "headquarter" project. ## files - .env.example | Template file defining example environment variables for frontend API and application URL configuration - .eslintrc.cjs | Configures ESLint for a TypeScript browser project with modern ECMAScript module support | dep: @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint @@ -16,7 +16,7 @@ Frontend web application providing a browser-based React/TypeScript UI with code - tsconfig.json | TypeScript configuration file for a React project using Vite with modern ES2020 target and bundler module resolution | dep: typescript, react, vite - vite.config.ts | Configures Vite build tool for a React project with custom dev server port and Vitest test settings. | dep: vite, @vitejs/plugin-react ## arch -Modern Vite-based SPA architecture with TypeScript, nginx static serving, multi-stage Docker containerization, and client-side routing. +Modern React SPA built with Vite and TypeScript, containerized via multi-stage Docker with nginx serving, featuring client-side routing and optimized static asset delivery. ## tags react, eslint, vite, typescript, dom, application, nginx, web ## symbols diff --git a/apps/web/src/.pi-map.index.md b/apps/web/src/.pi-map.index.md index c72f1a0..e3785e2 100644 --- a/apps/web/src/.pi-map.index.md +++ b/apps/web/src/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src ## role -Entry point and core infrastructure for a React web application handling routing, authentication, and shared type definitions. +Frontend web application entry point and core routing infrastructure for a React-based project management or developer workspace platform. ## parent index: apps/web/.pi-map.index.md map: apps/web/.pi-map.md diff --git a/apps/web/src/.pi-map.md b/apps/web/src/.pi-map.md index 28e1a9d..2bed0d8 100644 --- a/apps/web/src/.pi-map.md +++ b/apps/web/src/.pi-map.md @@ -4,13 +4,13 @@ dir: apps/web/src index: apps/web/src/.pi-map.index.md ## role -Entry point and core infrastructure for a React web application handling routing, authentication, and shared type definitions. +Frontend web application entry point and core routing infrastructure for a React-based project management or developer workspace platform. ## files - main.tsx | Bootstraps a React application with routing, authentication, and session management providers. | dep: react, react-dom/client, react-router-dom, ./router, ./state/auth, ./state/sessions, ./styles/tokens.css, ./styles/global.css, ./styles/utilities.css, ./styles/syntax-highlight.css, ./styles/pages/git-history.css, ./styles/pages/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom - router.tsx | Defines the React Router configuration for a web application with protected routes, nested layouts, and redirects. | exp: AppRouter | dep: react-router-dom, ./components/app-shell, ./components/protected-route, ./pages/DashboardPage, ./pages/PlaceholderPage, ./pages/ProfilePage, ./pages/ProjectsPage, ./pages/GitRepositoriesPage, ./pages/GitHistoryPage, ./pages/ProjectSettingsPage, ./pages/SettingsPage, ./pages/TerminalPage, ./pages/ToolWorkshopPage, ./pages/SshKeysPage, ./pages/ConfigProfilesPage, ./pages/SessionsPage, ./pages/WorkspacesPage, ./pages/WorkspaceDetailPage - types.ts | Defines TypeScript type definitions for user sessions, projects, repositories, and workspaces in an application. | exp: SessionUser, SessionPayload, Project, WorkspaceSummary, RepositorySummary, ProjectWithRepos ## arch -Provider composition pattern with React Router v6 (nested routes, layout routes, protected route guards), context-based auth/session management, and centralized TypeScript domain models. +Modern React SPA with declarative routing (React Router v6), protected route guards via authentication/session context providers, nested layout composition, and centralized TypeScript domain models for multi-tenant workspace/project data structures. ## tags pages, styles, css, router, react, session, dom, project ## symbols diff --git a/apps/web/src/components/.pi-map.index.md b/apps/web/src/components/.pi-map.index.md index e4a7908..be6a4a8 100644 --- a/apps/web/src/components/.pi-map.index.md +++ b/apps/web/src/components/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components ## role -Provides reusable, accessible UI primitives and layout components for the web application, including navigation, feedback states, icons, code display, and authentication guards. +Provides reusable, accessible UI components for the web application including layout shell, data states, icons, code display, routing guards, and toast notifications. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/components/.pi-map.md b/apps/web/src/components/.pi-map.md index 7fb1d78..650121e 100644 --- a/apps/web/src/components/.pi-map.md +++ b/apps/web/src/components/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/components index: apps/web/src/components/.pi-map.index.md ## role -Provides reusable, accessible UI primitives and layout components for the web application, including navigation, feedback states, icons, code display, and authentication guards. +Provides reusable, accessible UI components for the web application including layout shell, data states, icons, code display, routing guards, and toast notifications. ## files - app-shell.tsx | Renders the main application shell layout with navigation, header, session management, and mobile-responsive behavior for a React Router-based SPA. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons - code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language @@ -17,7 +17,7 @@ Provides reusable, accessible UI primitives and layout components for the web ap - toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events - toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type ## arch -Component-based React architecture with functional components, composition patterns, separation of concerns (presentation vs logic), utility-first modules, and test co-location; integrates third-party libraries (Phosphor icons, react-simple-code-editor) with thin abstraction wrappers. +Component-based React architecture with functional components, custom hooks for state management, centralized icon mapping, route guards with auth integration, and utility modules for cross-cutting concerns like notifications and data state handling. ## tags toast, icon, react, state, code, loading, event, editor ## symbols diff --git a/apps/web/src/components/features/.pi-map.index.md b/apps/web/src/components/features/.pi-map.index.md index ef721ff..db137b4 100644 --- a/apps/web/src/components/features/.pi-map.index.md +++ b/apps/web/src/components/features/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features ## role -Contains reusable React components that implement specific product features and business logic for the web application. +Houses reusable React components that implement specific product features and business logic for the web application. ## parent index: apps/web/src/components/.pi-map.index.md map: apps/web/src/components/.pi-map.md diff --git a/apps/web/src/components/features/.pi-map.md b/apps/web/src/components/features/.pi-map.md index 501f7dd..9f8afff 100644 --- a/apps/web/src/components/features/.pi-map.md +++ b/apps/web/src/components/features/.pi-map.md @@ -4,10 +4,10 @@ dir: apps/web/src/components/features index: apps/web/src/components/features/.pi-map.index.md ## role -Contains reusable React components that implement specific product features and business logic for the web application. +Houses reusable React components that implement specific product features and business logic for the web application. ## files ## arch -Feature-based component organization following domain-driven design principles, likely with co-located components, hooks, and utilities per feature area. +Feature-based component organization with co-located UI pieces, likely composed of smaller design-system elements and connected to domain hooks/stores for stateful functionality. ## tags - ## symbols diff --git a/apps/web/src/components/features/terminal/.pi-map.index.md b/apps/web/src/components/features/terminal/.pi-map.index.md index 643418b..18d09f7 100644 --- a/apps/web/src/components/features/terminal/.pi-map.index.md +++ b/apps/web/src/components/features/terminal/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features/terminal ## role -Provides cross-platform terminal UI components for desktop and mobile with session management, special key input, and xterm.js WebSocket connectivity. +Provides cross-platform terminal UI components with session management, special key input, and WebSocket-backed xterm.js integration for web-based terminal emulation. ## parent index: apps/web/src/components/features/.pi-map.index.md map: apps/web/src/components/features/.pi-map.md diff --git a/apps/web/src/components/features/terminal/.pi-map.md b/apps/web/src/components/features/terminal/.pi-map.md index 7d1a0ec..0642000 100644 --- a/apps/web/src/components/features/terminal/.pi-map.md +++ b/apps/web/src/components/features/terminal/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/components/features/terminal index: apps/web/src/components/features/terminal/.pi-map.index.md ## role -Provides cross-platform terminal UI components for desktop and mobile with session management, special key input, and xterm.js WebSocket connectivity. +Provides cross-platform terminal UI components with session management, special key input, and WebSocket-backed xterm.js integration for web-based terminal emulation. ## files - DesktopTerminalView.tsx | Renders a desktop-optimized terminal view with session tabs, fullscreen mode, font controls, and reset confirmation dialog | exp: DesktopTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../../api/terminal, React, TerminalComponent, TerminalSessionTabs, TerminalSession type - MobileTerminalView.tsx | Renders a mobile-optimized terminal interface with toolbar, session tabs, terminal output, and special keys input controls. | exp: MobileTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../icon, ./special-keys-strip, ./special-keys-panel, ../../../hooks/use-special-keys, ../../../api/terminal @@ -12,9 +12,9 @@ Provides cross-platform terminal UI components for desktop and mobile with sessi - special-keys-strip.tsx | Renders a strip of buttons for sending special keyboard keys (Esc, Tab, arrows, etc.) with optional modifier support for a terminal interface. | exp: SpecialKeysStrip | dep: react, ../../../hooks/use-special-keys, React, use-special-keys hook - terminal-session-tabs.test.tsx | Tests a React component that renders interactive terminal session tabs with selection, close confirmation, renaming, creation limits, and status indicators. | dep: @testing-library/react, vitest, ./terminal-session-tabs - terminal-session-tabs.tsx | Renders a tabbed interface for managing multiple terminal sessions with selection, creation, renaming, and close confirmation features. | exp: TerminalSessionInfo, TerminalSessionTabsProps, TerminalSessionTabs | dep: react, React -- terminal.tsx | React component that renders an interactive xterm.js terminal with WebSocket connectivity, mobile touch support, flow control, heartbeat monitoring, and reconnection logic. | exp: TerminalProps, TerminalRef, TerminalComponent | dep: react, xterm, xterm-addon-fit, xterm-addon-web-links, xterm/css/xterm.css, ../../../hooks/use-special-keys, React, use-special-keys hook +- terminal.tsx | A React component that renders an interactive xterm.js terminal connected to a WebSocket backend, with mobile touch support, flow control, heartbeat monitoring, and automatic reconnection. | exp: TerminalProps, TerminalRef, TerminalComponent | dep: react, xterm, xterm-addon-fit, xterm-addon-web-links, xterm/css/xterm.css, ../../../hooks/use-special-keys ## arch -Component-based architecture with platform-specific view variants (Desktop/Mobile), shared session tabs state management, modular special key input panels, and a core terminal component handling WebSocket lifecycle with heartbeat/reconnection logic. +Feature-based component architecture with platform-specific view splitting (desktop/mobile), compound component pattern for terminal sessions, and adapter pattern for special key input variants (panel/strip). ## tags terminal, special, keys, session, react, tabs, view, renders ## symbols diff --git a/apps/web/src/components/features/terminal/terminal.tsx b/apps/web/src/components/features/terminal/terminal.tsx index 02aca77..40f494a 100644 --- a/apps/web/src/components/features/terminal/terminal.tsx +++ b/apps/web/src/components/features/terminal/terminal.tsx @@ -356,18 +356,48 @@ export const TerminalComponent = React.forwardRef( // screen (tmux/vim) there is no scrollback and the only way to // scroll is to send mouse-wheel protocol sequences to the // application. We detect which situation we're in by checking - // whether the viewport has scrollable height. + // the active buffer type. We also lock the browser into the + // terminal area: touchstart prevents the browser from starting a + // page-scroll gesture, so swipes always go to the terminal. let touchCleanup: (() => void) | undefined; if (isMobile) { let startY = 0; let startX = 0; let isScrolling = false; + let scrollPending = 0; + const WHEEL_DISTANCE = 12; + + const flushScroll = (force = false) => { + if (scrollPending === 0) return; + if (!force && Math.abs(scrollPending) < WHEEL_DISTANCE) return; + const direction = Math.sign(scrollPending); + const steps = Math.max( + 1, + Math.floor(Math.abs(scrollPending) / WHEEL_DISTANCE), + ); + const ws = wsRef.current; + if (ws?.readyState === WebSocket.OPEN && termRef.current) { + const buf = termRef.current.buffer.active; + const col = buf.cursorX + 1; + const row = buf.cursorY + 1; + const btn = direction > 0 ? 64 : 65; + for (let i = 0; i < steps; i++) { + ws.send(`\x1b[<${btn};${col};${row}M`); + } + } + scrollPending = 0; + }; + + const isNormalBuffer = () => { + return termRef.current?.buffer.active.type === "normal"; + }; const onTouchStart = (e: TouchEvent) => { if (e.touches.length === 1) { startY = e.touches[0].clientY; startX = e.touches[0].clientX; isScrolling = false; + scrollPending = 0; } }; const onTouchMove = (e: TouchEvent) => { @@ -381,40 +411,39 @@ export const TerminalComponent = React.forwardRef( } } if (isScrolling) { + // Always stop the browser from treating this as a page scroll. e.preventDefault(); + + const normalBuffer = isNormalBuffer(); const viewport = container.querySelector( ".xterm-viewport", ) as HTMLElement | null; - if (!viewport) return; - // If the viewport is scrollable, scroll it directly. - // Otherwise we are in alternate screen (tmux/vim) and must - // send SGR 1006 mouse-wheel protocol data. - const hasScrollback = viewport.scrollHeight > viewport.clientHeight; - if (hasScrollback) { + if (normalBuffer && viewport) { + // Normal buffer: scroll the xterm viewport directly. viewport.scrollTop += deltaY; } else { - const ws = wsRef.current; - if (ws?.readyState === WebSocket.OPEN && termRef.current) { - // Use the cursor position as the wheel location so - // tmux knows which pane to scroll. - const buf = termRef.current.buffer.active; - const col = buf.cursorX + 1; - const row = buf.cursorY + 1; - // SGR 1006: 64 = wheel-up, 65 = wheel-down - const btn = deltaY > 0 ? 64 : 65; - ws.send(`\x1b[<${btn};${col};${row}M`); - } + // Alternate screen (tmux/vim): accumulate the swipe and + // send SGR 1006 mouse-wheel events in steps. + scrollPending += deltaY; + flushScroll(); } startY = touch.clientY; + } else if (Math.abs(deltaY) > 4 || Math.abs(deltaX) > 4) { + // Once the user has moved far enough to be considered a + // gesture, prevent any default page scroll/pinch behavior. + e.preventDefault(); } }; const onTouchEnd = () => { + if (isScrolling) { + flushScroll(true); + } isScrolling = false; }; container.addEventListener("touchstart", onTouchStart, { - passive: true, + passive: false, capture: true, }); container.addEventListener("touchmove", onTouchMove, { diff --git a/apps/web/src/styles/.pi-map.index.md b/apps/web/src/styles/.pi-map.index.md index bcef546..ca7caf9 100644 --- a/apps/web/src/styles/.pi-map.index.md +++ b/apps/web/src/styles/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/styles ## role -Provides the complete visual design system and styling foundation for a web application, including themes, utilities, and component-specific styles. +Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/styles/.pi-map.md b/apps/web/src/styles/.pi-map.md index 66a6581..23b7c55 100644 --- a/apps/web/src/styles/.pi-map.md +++ b/apps/web/src/styles/.pi-map.md @@ -4,14 +4,14 @@ dir: apps/web/src/styles index: apps/web/src/styles/.pi-map.index.md ## role -Provides the complete visual design system and styling foundation for a web application, including themes, utilities, and component-specific styles. +Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles. ## files - global.css | Defines global CSS styles for a web application shell layout, navigation, cards, forms, dialogs, settings pages, and responsive design patterns. | dep: CSS custom properties (CSS variables: --border, --panel, --brand, --muted, --ink, --bg, --danger, --success, --warning, --font-size-xs, --font-size-sm, --space-2, --space-3, --space-4, --space-5) - syntax-highlight.css | Stylesheet for a syntax highlighting component with toolbar, line numbers, code display, and Prism.js theme integration | dep: Prism.js - tokens.css | Defines a comprehensive CSS design token system with light/dark themes, spacing scales, breakpoints, and fluid typography for a web application. -- utilities.css | Provides a comprehensive responsive CSS utility system with terminal-specific styling, mobile adaptations, and component patterns for a web application. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--text), var(--brand), var(--muted), var(--success), var(--danger), var(--danger-light)), xterm.js (terminal integration) +- utilities.css | Provides responsive CSS utility classes and component-specific styles for a web application including layout systems, terminal styling, session management, and mobile-first adaptations. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--text), var(--brand), var(--success), var(--danger), var(--muted)), xterm.js (terminal library) ## arch -Token-based CSS architecture using CSS custom properties for light/dark theming, with layered stylesheets separating tokens, global styles, utilities, and component-specific styling, supporting responsive and fluid design patterns. +Token-driven CSS architecture using CSS custom properties for light/dark theming, utility-first responsive classes, and modular separation of concerns across global styles, syntax highlighting, design tokens, and utility helpers. ## tags var(, space, global, css, web, application, syntax, defines ## symbols diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css index a1f33e3..19a5b2d 100644 --- a/apps/web/src/styles/utilities.css +++ b/apps/web/src/styles/utilities.css @@ -551,6 +551,14 @@ a.nav-item, height: 100%; padding: 0; overflow: hidden; + touch-action: none; + overscroll-behavior: none; +} + +/* Ensure xterm's internal viewport also disables browser gestures on mobile */ +.terminal-container .xterm-viewport { + touch-action: none; + overscroll-behavior: none; } /* xterm.js manages its own positioning and sizing */ @@ -564,6 +572,13 @@ a.nav-item, /* Mobile terminal container - no padding to maximize space */ .terminal-wrapper.mobile .terminal-container { padding: 0; + touch-action: none; + overscroll-behavior: none; +} + +.terminal-wrapper.mobile { + touch-action: none; + overscroll-behavior: none; } /* Ensure xterm viewport fills container properly */ @@ -855,17 +870,23 @@ a.nav-item, Mobile Terminal Overlay ============================================ */ -/* Mobile terminal page — no padding, terminal fills viewport */ +/* Mobile terminal page — no padding, terminal fills viewport, locked in place */ .terminal-page.mobile { padding: 0; gap: 0; height: 100vh; height: 100dvh; - position: relative; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; overflow: hidden; + touch-action: none; + overscroll-behavior: none; } -/* Overlay status bar — floats over terminal, never resizes it */ +/* Overlay status bar — floats over terminal; only its buttons consume pointer events */ .mobile-terminal-overlay { position: absolute; top: 0; @@ -874,11 +895,21 @@ a.nav-item, z-index: 100; background: #2d2d2d; border-bottom: 1px solid #3e3e3e; + pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; } +.mobile-terminal-overlay.visible { + pointer-events: auto; +} + +.mobile-terminal-overlay > *, +.mobile-terminal-overlay-tabs { + pointer-events: auto; +} + .mobile-terminal-overlay.hidden { transform: translateY(-100%); opacity: 0; @@ -978,13 +1009,15 @@ a.nav-item, border-bottom: none; } -/* Terminal content — always fills full viewport on mobile */ +/* Terminal content — always fills full viewport on mobile, locked against page scroll */ .terminal-page-content.mobile-full { flex: 1; min-height: 0; border: none; border-radius: 0; overflow: hidden; + touch-action: none; + overscroll-behavior: none; } /* Mobile fullscreen */