This document records the current frontend layout scaffold so migration work can compare the existing implementation with the target architecture. It is intentionally separate from the architecture document, which describes the desired steady-state system and shared vocabulary.

Current Package Map

frontend/
  apps/
    desktop/
      src/root.tsx                     Desktop React root and platform providers
      src/pages/main.tsx               Desktop outer shell: titlebar, sidebar, page panel, assistant panel
      src/pages/desktop-resource.tsx   Desktop document route wrapper
      src/components/sidebar*.tsx      Desktop sidebar implementation
      src/components/titlebar*.tsx     Desktop titlebar/window chrome
      src/sidebar-context.tsx          Desktop sidebar state and persistence

    web/
      app/root.tsx                     Remix root document and providers
      app/routes/$.tsx                 Web document/site route loader and route mapping
      app/web-resource-page.tsx        Web document route wrapper
      app/web-feed-page.tsx            Web feed route wrapper
      app/web-utils.tsx                Web route shell helpers/header actions/site banner

  packages/
    ui/
      src/resource-page-common.tsx     Shared document/resource page composition
      src/panel-layout.tsx             Shared main/right-panel layout for resource pages
      src/page-layout.tsx              Shared page layout helpers
      src/components/*                 Current UI wrappers, mostly shadcn/Radix-style

    shared/
      src/routes.ts                    Shared route schemas and panel route types
      src/utils/navigation.ts          Navigation context and route hooks
      src/routing.tsx                  Universal app context

Current Desktop Shell

Desktop shell composition lives primarily in frontend/apps/desktop/src/pages/main.tsx.

Current responsibilities:

Renders the desktop titlebar.

Renders the desktop sidebar through AppSidebar.

Renders the current route page component.

Wraps sidebar/page content in react-resizable-panels.

Renders the footer/status area.

Renders the assistant app panel as a separate resizable panel.

Routes desktop navigation keys to lazy page components.

Current sidebar behavior lives across:

frontend/apps/desktop/src/components/sidebar.tsx

frontend/apps/desktop/src/components/sidebar-base.tsx

frontend/apps/desktop/src/sidebar-context.tsx

The sidebar uses react-resizable-panels and imperative panel handles for collapse/expand/resize behavior.

Current Web Shell

Web shell composition lives across Remix root and route files.

Current responsibilities:

frontend/apps/web/app/root.tsx owns the HTML document, root providers, global styles, and environment injection.

frontend/apps/web/app/routes/$.tsx owns document/site route loading and maps URL terms into shared route state.

frontend/apps/web/app/web-utils.tsx provides WebSitePageShell, site host banners, header actions, and web menu items.

frontend/apps/web/app/web-resource-page.tsx wraps shared resource content with web-specific providers and callbacks.

Web does not render the desktop sidebar, titlebar, footer, or assistant app panel.

Current Shared Resource Page

The primary shared layout surface is frontend/packages/ui/src/resource-page-common.tsx.

It currently owns:

Shared document/resource page rendering.

Active view selection for content, activity, comments, directory, collaborators, site profile, and all documents.

Document tools and route action placement.

Main document scroll area.

Mobile panel sheet behavior.

Desktop-class main/right-panel composition via PanelLayout.

Panel content rendering for comments, activity, directory, collaborators, options, and versions.

Desktop and web both call ResourcePage from platform-specific wrappers:

Desktop: frontend/apps/desktop/src/pages/desktop-resource.tsx

Web: frontend/apps/web/app/web-resource-page.tsx

Current Right Panel Implementation

The current shared right panel is implemented in frontend/packages/ui/src/panel-layout.tsx.

Current behavior:

Uses react-resizable-panels directly.

Renders a main panel and optional accessory panel.

Opens the accessory panel at a default pixel-derived percentage.

Caps panel size with percentage min/max values.

Accepts optional width storage and controlled width callbacks.

Renders a panel header with title, close button, and activity filter controls.

Current panel titles are derived from route panel keys in the panel layout component.

Current Resizable Panel Usage

react-resizable-panels is used in several places:

frontend/packages/ui/src/panel-layout.tsx for shared resource right panels.

frontend/apps/desktop/src/pages/main.tsx for desktop sidebar/page and assistant panel splits.

frontend/apps/desktop/src/components/sidebar-base.tsx for desktop sidebar panel behavior.

frontend/apps/desktop/src/pages/contact-page.tsx for contact-page layout.

The current implementation exposes imperative panel handles in some desktop shell code.

Current UI Primitive State

Current UI wrappers live mainly in frontend/packages/ui/src/components and frontend/packages/ui/src.

Current primitive dependencies include:

shadcn-style local wrappers.

Radix packages for dialog, dropdown menu, popover, scroll area, select, tabs, tooltip, and related primitives.

Ariakit in selected complex UI, such as collaborator tag/combobox patterns.

React Aria is not part of the current dependency set.

Primitive migration is not part of the app/layout scaffold migration.

Current Gaps Against Target Architecture

The main known gaps are:

The target AppFrame and RouteFrame names are not yet explicit public concepts.

ResourcePage and PanelLayout currently carry most of the shared route-frame behavior.

PanelLayout imports react-resizable-panels directly instead of using Seed-owned resizable primitives.

Desktop shell resizable behavior uses imperative panel handles directly.

Some layout language uses generic panel terminology where the target architecture distinguishes RightPanel, AppPanel, and ResizablePanel.

Current architecture and migration knowledge is spread across code and plans rather than a stable vocabulary document.

Current Strengths To Preserve

Migration work should preserve these existing strengths:

Desktop and web already share ResourcePage for document/resource routes.

Panel identity is already represented in shared route state for document panels.

Desktop and web wrappers already inject platform-specific callbacks into shared UI.

Right-panel content is already feature-owned and rendered through a shared shell.

The codebase already has tests around several shared UI/page decisions.

How To Use This Inventory

Use this document when planning migration steps or reviewing code that still follows the pre-target structure.

Use docs/architecture/frontend-app-layout-scaffold.md when naming concepts, designing new layout APIs, or deciding where new layout responsibilities belong.