What's New
A detailed record of technical improvements, bug fixes, and new capabilities shipped to VibeKit.
Mobile Platform, Design System & Infrastructure
LatestFull mobile interface, streaming reliability improvements, theme system overhaul, quota integrity fixes, and layout engine hardening across the stack.
A dedicated mobile experience now serves all sub-768px viewports. The home screen follows a conversational input paradigm with a slide-out project history drawer and pull-to-refresh. The project view is a three-tab layout — Files, AI, Editor — with horizontal swipe navigation and a fixed bottom navigation bar that remains anchored regardless of browser chrome state.
File editing on mobile is intentionally restricted to AI-mediated changes only. Direct text input is disabled in the CodeMirror instance on mobile viewports. All modifications are routed through the AI chat pipeline, maintaining change traceability and preventing unstructured edits.
First-visit tours have been added for both desktop (7 steps) and mobile (6 steps). Tours are rendered using getBoundingClientRect targeting on desktop for precise element-level positioning, and fixed-coordinate layouts on mobile. Completion state is persisted to localStorage. Neither tour fires more than once per client.
The mobile AI tab button renders a canvas-based pixel animation that morphs between two geometric states using a smoothstep easing function over a 2.8-second cosine cycle. The animation is DPR-aware and includes a radial gradient ambient glow. Active state modifies the fill color of the pixel matrix.
A custom pull-to-refresh implementation is active on all mobile pages. It attaches to document-level touch events and activates only when scrollingElement.scrollTop is at zero, preventing conflicts with internal scroll containers. A rubber-band resistance factor of 0.4 is applied. The native overscroll behaviour is not used.
Two favicon assets are shipped — one per colour scheme. A MutationObserver on the document root element watches for class attribute changes and swaps the active favicon link tag in real time. A media="(prefers-color-scheme)" fallback on static link tags handles the pre-hydration window before JavaScript initialises.
An inline script evaluated synchronously at HTML parse time reads window.matchMedia("(prefers-color-scheme: dark)") when no stored preference exists in localStorage. The correct class is applied to <html> before the first paint, eliminating any flash of incorrect theme on cold loads.
The CodeMirror editor now uses a full semantic HighlightStyle definition covering keywords, strings, comments, type names, function names, variables, operators, punctuation, JSX tags, attributes, namespaces, and a complete Markdown token set including heading levels, emphasis, inline code, block quotes, and list markers. All colour values are resolved from CSS custom properties.
The Node.js HTTP layer was coalescing streamed tokens before forwarding them to the client, causing the thinking and generation streams to arrive in large batches rather than token-by-token. Anti-buffering response headers and an explicit flush mechanism were added to the generate route. Token-level delivery is now guaranteed at the transport layer.
Session history writes are now coalesced through a 500ms debounce and use a sendBeacon fallback to survive premature tab closure. Store hydration on session restore is performed as a single atomic dispatch rather than N sequential updates, eliminating a class of partial-write states and reducing unnecessary re-render cycles.
The AI modify pipeline now validates the returned operation count against the expected scope after each generation pass. When the count falls short, an automatic retry is issued with a stricter constraint in the system prompt. This reduces the rate of silent partial-modification failures where only a subset of the requested files were returned.
The generate page was producing a blank screen on mobile. Root cause: hook calls positioned after conditional early returns in PreviewLayout, violating the rules of hooks. All hook invocations were moved above the conditional block. This also resolved a latent stale-closure risk in the resize and tour-display effects.
The top navigation was using position: sticky, which is resolved relative to the visual viewport on mobile browsers. When the browser chrome hides during scroll, the visual viewport expands and sticky elements shift with it, causing the nav to visually disappear. Changed to position: fixed with explicit layout offsets.
overflow: hidden on the nav element was clipping the absolutely-positioned dropdown panel. Removed the overflow constraint from the nav container and promoted the dropdown stacking context to z-index: 9999.
The project history drawer in the mobile scaffold view had a paddingTop: 56px applied directly to the panel element. The drawer is mounted inside a fixed container that already accounts for the navigation height via its top offset. The redundant padding was creating a blank gap at the top of every drawer open.
The loading screen was emitting two dot-matrix percentage elements simultaneously. The Turbopack build pipeline was not applying Tailwind responsive utilities correctly in this context, causing both branches to render regardless of viewport. Replaced with a single element driven by a runtime isMobile flag using a resize event listener.
Stack recommendation requests were invoking checkRateLimit(), which increments the caller's daily counter, rather than getRateLimitStatus(), which is read-only. Every suggestion fetch was silently consuming a generation from the user's daily quota. Fixed to use the read-only path.
A backtick character inside a content string in lib/resources.ts was being interpreted as a closing template literal delimiter by the TypeScript compiler, producing a type error that terminated the production build.
Selecting the Manual Config mode on mobile toggled state correctly but rendered nothing — ManualConfigPanel was never imported or mounted in MobileHomePage. The component is now imported, a manualStack state slice has been added, and the panel renders inline when the mode is active.
VibeKit is under active development. This document reflects the state of the codebase as of 14 May 2026.
Versions