diff --git a/packages/freecut-editor/README.md b/packages/freecut-editor/README.md
index 3a5ea9f1d..34c75ef0e 100644
--- a/packages/freecut-editor/README.md
+++ b/packages/freecut-editor/README.md
@@ -63,6 +63,48 @@ provider details, URLs, paths, and media bytes remain host-owned.
 The same 0.3.0 surface retains the host-backed caption tracks, bounded cues,
 caption styles, and display toggles from 0.2.0.
 
+The 0.3.8 surface lets the host register its own modules into the editor's
+left sidebar rail. `EditorHost.sidebarModules` entries (`{ id, label, icon,
+Panel }`) appear as `host:<id>` rail tabs; the surface renders each module's
+`Panel` in the sidebar panel area, mounts it on first activation, and keeps it
+mounted across tab switches and authoritative snapshot installs so in-flight
+host work survives. Each `Panel` receives `{ active, collapsed, width }`, so it
+can pause work while it is not the selected tab and adapt to a sidebar resize
+without measuring the DOM itself. Icons and panels cross the package boundary
+as React components (react/react-dom are peer dependencies).
+
+`FreeCutEditorSurface` also accepts an optional `apiRef` that receives a
+`FreeCutEditorSurfaceApi` — `openSidebarModule(id)` selects a module's tab and
+opens the panel (ids the rail does not show fail closed), and `closeSidebar()`
+closes the panel.
+
+By default the rail is the capability-gated built-ins (`media`, then `text` and
+`transcript` when the host's capabilities allow them) followed by the modules in
+registration order. `EditorHost.sidebarRail` replaces that with an explicit
+rail: the exact tabs, in the exact order, with anything omitted hidden — which
+is how a host both reorders the rail and suppresses built-ins it does not want.
+Capability gating still runs first, so a rail can only ever subtract from and
+reorder what the capabilities already allow, never add to it. Ids matching no
+available tab are dropped, as are repeats after the first, and a rail that
+matches nothing at all falls back to the default rather than leaving the editor
+with no navigation.
+
+```tsx
+const apiRef = useRef<FreeCutEditorSurfaceApi>(null)
+
+const host: EditorHost = {
+  // ...capabilities, load, resolveMedia, submitEdit
+  sidebarModules: [
+    { id: 'transcribe', label: 'Transcribe', icon: Captions, Panel: TranscribePanel },
+    { id: 'brand-kit', label: 'Brand kit', icon: Palette, Panel: BrandKitPanel },
+  ],
+  // Host module first, no built-in `text` tab.
+  sidebarRail: ['host:transcribe', 'media', 'host:brand-kit'],
+}
+
+<FreeCutEditorSurface host={host} apiRef={apiRef} />
+```
+
 This package is built from a specific FreeCut commit. To create the local
 consumer artifact from a clean checkout, run:
 
diff --git a/packages/freecut-editor/package.json b/packages/freecut-editor/package.json
index 00d4f5a73..cc8bdda58 100644
--- a/packages/freecut-editor/package.json
+++ b/packages/freecut-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quantfive/freecut-editor-surface",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "The host-backed FreeCut browser editor surface.",
   "license": "MIT",
   "repository": {
diff --git a/packages/freecut-editor/src/index.d.ts b/packages/freecut-editor/src/index.d.ts
index 9a417f9da..66012a4cf 100644
--- a/packages/freecut-editor/src/index.d.ts
+++ b/packages/freecut-editor/src/index.d.ts
@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react'
+import type { ComponentType, ReactNode, RefObject } from 'react'
 
 export type EditorCapability =
   | 'project.navigate'
@@ -354,6 +354,53 @@ export interface EditorHostNavigation {
   back(): void
 }
 
+/**
+ * Rail tab ids. Built-ins are FreeCut's own; `host:${string}` ids belong to
+ * `sidebarModules` entries.
+ */
+export type EditorSidebarTab =
+  | 'media'
+  | 'text'
+  | 'shapes'
+  | 'effects'
+  | 'transitions'
+  | 'lottie'
+  | 'transcript'
+  | 'ai'
+  | `host:${string}`
+
+/**
+ * Props a host module panel receives. A panel that only cares about `active`
+ * can keep destructuring just that — the extra fields widen the props without
+ * breaking an existing `({ active }) => …` component.
+ */
+export interface EditorSidebarModulePanelProps {
+  /** Whether this module's tab is the selected one. */
+  active: boolean
+  /**
+   * Whether the sidebar panel area is collapsed. A latched panel keeps
+   * rendering while collapsed so its work survives; use this to pause
+   * animation or defer layout measurement rather than to unmount.
+   */
+  collapsed: boolean
+  /** Current sidebar panel width in px, so a panel can adapt to a resize. */
+  width: number
+}
+
+export interface EditorSidebarModule {
+  /** Host-scoped identifier; namespaced to `host:<id>` internally. */
+  id: string
+  /** Rail tooltip and panel header label. Host-owned, already localized. */
+  label: string
+  /** Lucide-compatible rail icon. */
+  icon: ComponentType<{ className?: string }>
+  /**
+   * Rendered in the sidebar panel area. Mounted on first activation and kept
+   * mounted across tab switches so in-flight host work survives.
+   */
+  Panel: ComponentType<EditorSidebarModulePanelProps>
+}
+
 export interface EditorHost {
   readonly capabilities: EditorCapabilityMap
   load(): Promise<EmbeddedEditorSnapshot> | EmbeddedEditorSnapshot
@@ -363,6 +410,21 @@ export interface EditorHost {
   submitEdit(batch: EditCommandBatch): Promise<HostEditResult> | HostEditResult
   subscribe?(listener: (snapshot: EmbeddedEditorSnapshot) => void): () => void
   transcript?: EditorTranscriptPort
+  sidebarModules?: readonly EditorSidebarModule[]
+  /**
+   * Optional explicit rail: the exact tabs to show, in the exact order, as
+   * built-in ids (`'media'`, `'text'`, `'transcript'`) and registered module
+   * ids (`` `host:${id}` ``). Anything omitted is hidden, so this is how a
+   * host both reorders the rail and suppresses built-ins it does not want.
+   *
+   * Capability gating still runs first — a rail cannot surface a tab the
+   * host's own capabilities deny — and ids that match nothing are dropped, as
+   * are repeats after the first. Omit the field for the default rail
+   * (capability-gated built-ins, then modules in registration order). A rail
+   * that matches nothing at all falls back to the default rather than leaving
+   * the editor with no navigation.
+   */
+  sidebarRail?: readonly EditorSidebarTab[]
   navigation?: EditorHostNavigation
   notify?(notice: HostNotice): void
 }
@@ -382,8 +444,21 @@ export interface EditorHostProviderProps {
   children: ReactNode
 }
 
+export interface FreeCutEditorSurfaceApi {
+  /**
+   * Select a registered `sidebarModules` entry's tab and open the panel.
+   * No-ops for an id the host never registered, and for one its `sidebarRail`
+   * suppresses — opening a tab with no rail button would strand the user, and
+   * the next authoritative snapshot would reset it anyway.
+   */
+  openSidebarModule(id: string): void
+  /** Close the left sidebar panel. */
+  closeSidebar(): void
+}
+
 export interface FreeCutEditorSurfaceProps {
   host: EditorHost
+  apiRef?: RefObject<FreeCutEditorSurfaceApi | null>
 }
 
 export declare const FreeCutEditorSurface: ComponentType<FreeCutEditorSurfaceProps>
diff --git a/packages/freecut-editor/src/index.ts b/packages/freecut-editor/src/index.ts
index 8bad3a08d..651800e28 100644
--- a/packages/freecut-editor/src/index.ts
+++ b/packages/freecut-editor/src/index.ts
@@ -1,4 +1,5 @@
 export { FreeCutEditorSurface } from '@/features/editor/host/editor-surface'
+export type { FreeCutEditorSurfaceApi } from '@/features/editor/host/editor-surface'
 export { EditorHostProvider } from '@/features/editor/host/context-provider'
 export {
   DEFAULT_HOST_CAPABILITIES,
@@ -14,6 +15,7 @@ export {
   createLocalEditorHost,
   isHostCapabilityEnabled,
 } from '@/features/editor/host/contract'
+export type { EditorSidebarTab } from '@/config/editor-workspaces'
 export type { EditorHostContextValue } from '@/features/editor/host/context'
 export type { EditorHostProviderProps } from '@/features/editor/host/context-provider'
 export type {
@@ -21,6 +23,8 @@ export type {
   EditorCapabilityMap,
   EditorHost,
   EditorHostNavigation,
+  EditorSidebarModule,
+  EditorSidebarModulePanelProps,
   EmbeddedEditorAsset,
   EmbeddedEditorProject,
   EmbeddedEditorSnapshot,
diff --git a/src/config/editor-workspaces.ts b/src/config/editor-workspaces.ts
index fc579fa90..6c74c0ca5 100644
--- a/src/config/editor-workspaces.ts
+++ b/src/config/editor-workspaces.ts
@@ -18,6 +18,7 @@ export type EditorSidebarTab =
   | 'lottie'
   | 'transcript'
   | 'ai'
+  | `host:${string}`
 export type EditorClipInspectorTab = 'video' | 'motion' | 'audio' | 'effects'
 
 /** The slice of editor UI state that a workspace controls. */
@@ -91,8 +92,17 @@ const CLIP_INSPECTOR_TABS: readonly EditorClipInspectorTab[] = [
   'effects',
 ]
 
+/**
+ * Host-registered sidebar modules are namespaced under `host:` so persisted
+ * layouts and host-mode tab resets can recognize them without knowing the
+ * host's module ids.
+ */
+export function isHostSidebarTab(value: unknown): value is `host:${string}` {
+  return typeof value === 'string' && value.startsWith('host:')
+}
+
 function isSidebarTab(value: unknown): value is EditorSidebarTab {
-  return SIDEBAR_TABS.includes(value as EditorSidebarTab)
+  return SIDEBAR_TABS.includes(value as EditorSidebarTab) || isHostSidebarTab(value)
 }
 
 function isClipInspectorTab(value: unknown): value is EditorClipInspectorTab {
diff --git a/src/features/editor/components/media-sidebar.tsx b/src/features/editor/components/media-sidebar.tsx
index 5d57f3ae8..a17e9562c 100644
--- a/src/features/editor/components/media-sidebar.tsx
+++ b/src/features/editor/components/media-sidebar.tsx
@@ -1,4 +1,14 @@
-import { useCallback, useMemo, useRef, useEffect, memo, lazy, Suspense, useState } from 'react'
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  memo,
+  lazy,
+  Suspense,
+  useState,
+  type ComponentType,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ChevronDown,
@@ -78,11 +88,97 @@ import {
   clampLeftEditorSidebarWidth,
   getEditorLayout,
 } from '@/config/editor-layout'
+import { isHostSidebarTab, type EditorSidebarTab } from '@/config/editor-workspaces'
+import type { EditorHost, EditorSidebarModule } from '../host/contract'
+import { hostRailTabIds } from '../host/sidebar-rail'
 
 const logger = createLogger('MediaSidebar')
 const TEXT_TEMPLATE_PREVIEW_SHELL =
   'w-full aspect-video rounded-sm border border-border bg-slate-950'
 
+/**
+ * Host-registered module panels — mounted on first activation, then kept
+ * mounted (hidden) across tab switches so in-flight host work (e.g. job
+ * polling) survives the user browsing other tabs.  Extracted from the
+ * MediaSidebar body both for readability and to keep the sidebar's own
+ * complexity inside the changed-code health budget.
+ */
+function HostModulePanels({
+  modules,
+  activeTab,
+  collapsed,
+  width,
+}: {
+  modules: readonly EditorSidebarModule[]
+  activeTab: EditorSidebarTab
+  collapsed: boolean
+  width: number
+}) {
+  const [activatedTabs, setActivatedTabs] = useState<ReadonlySet<string>>(() =>
+    isHostSidebarTab(activeTab) ? new Set([activeTab]) : new Set(),
+  )
+  useEffect(() => {
+    if (!isHostSidebarTab(activeTab)) return
+    setActivatedTabs((previous) =>
+      previous.has(activeTab) ? previous : new Set(previous).add(activeTab),
+    )
+  }, [activeTab])
+  return (
+    <>
+      {modules.map((module) => {
+        const tabId = `host:${module.id}` as const
+        return (
+          <div
+            key={tabId}
+            className={`min-h-0 flex-1 overflow-hidden ${activeTab === tabId ? 'block' : 'hidden'}`}
+          >
+            {activatedTabs.has(tabId) && (
+              <module.Panel active={activeTab === tabId} collapsed={collapsed} width={width} />
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+type RailCategory = {
+  id: EditorSidebarTab
+  icon: ComponentType<{ className?: string }>
+  label: string
+}
+
+/** Host-registered modules join the rail as `host:<id>` tabs after the built-in categories. */
+function hostModuleRailCategories(
+  host: { sidebarModules?: readonly EditorSidebarModule[] } | null | undefined,
+) {
+  // Labels are host-owned and already localized.
+  return (host?.sidebarModules ?? []).map((module) => ({
+    id: `host:${module.id}` as const,
+    icon: module.icon,
+    label: module.label,
+  }))
+}
+
+/**
+ * Rail categories host mode shows, in the order `hostRailTabIds` resolved —
+ * capability-gated built-ins plus registered modules by default, or exactly
+ * the host's `sidebarRail` when it declared one.  The local editor rail is
+ * unaffected; only host mode consults the host contract.
+ */
+function visibleRailCategories(
+  categories: readonly RailCategory[],
+  hostMode: boolean,
+  host: EditorHost | undefined,
+): readonly RailCategory[] {
+  if (!hostMode || !host) return categories
+  const byId = new Map(categories.map((category) => [category.id, category]))
+  return hostRailTabIds(host).flatMap((id) => {
+    const category = byId.get(id)
+    return category ? [category] : []
+  })
+}
+
 function renderTextTemplatePreview(preset?: TextStylePreset) {
   if (!preset) {
     return (
@@ -288,12 +384,18 @@ const TEXT_TEMPLATE_GROUPS: ReadonlyArray<{
 const DEFAULT_TEXT_TEMPLATE_LABEL = 'Text'
 const ADD_TEXT_TEMPLATE_LABEL = 'Add Text'
 
+// The sidebar is the editor's tab orchestrator: one branch per built-in panel
+// times drag/drop, resize, and host-mode gating. The host-module additions are
+// extracted (HostModulePanels, visibleRailCategories above); what remains is
+// the pre-existing tab matrix, now covered by real-sidebar tests in
+// src/features/editor/host/. Tracked as a known orchestration hotspot, same as
+// the preview/timeline modules ignored in .fallowrc.json.
+// fallow-ignore-next-line complexity
 export const MediaSidebar = memo(function MediaSidebar() {
   const { t } = useTranslation()
   const hostMode = useEditorHostMode()
   const { host } = useEditorHostContext()
   const canAddTimeline = useEditorCapability('timeline.add')
-  const canTranscribe = useEditorCapability('media.transcription')
   const editorDensity = useSettingsStore((s) => s.editorDensity)
   const editorLayout = getEditorLayout(editorDensity)
   // Use granular selectors - Zustand v5 best practice
@@ -559,14 +661,11 @@ export const MediaSidebar = memo(function MediaSidebar() {
     { id: 'transcript' as const, icon: Captions, label: t('transcript.tabLabel') },
     { id: 'ai' as const, icon: WandSparkles, label: t('editor.mediaSidebar.ai') },
   ]
-  const visibleCategories = hostMode
-    ? categories.filter(
-        ({ id }) =>
-          id === 'media' ||
-          (id === 'text' && canAddTimeline) ||
-          (id === 'transcript' && canTranscribe && !!host?.transcript),
-      )
-    : categories
+  const mergedCategories: readonly RailCategory[] = [
+    ...categories,
+    ...hostModuleRailCategories(host),
+  ]
+  const visibleCategories = visibleRailCategories(mergedCategories, hostMode, host)
 
   const shouldSuppressGeneratedItemClick = useCallback(() => {
     if (!suppressGeneratedItemClickRef.current) {
@@ -709,7 +808,7 @@ export const MediaSidebar = memo(function MediaSidebar() {
               style={{ height: EDITOR_LAYOUT_CSS_VALUES.sidebarHeaderHeight }}
             >
               <span className="text-sm font-medium text-foreground">
-                {categories.find((c) => c.id === activeTab)?.label}
+                {mergedCategories.find((c) => c.id === activeTab)?.label}
               </span>
               <Button
                 variant="ghost"
@@ -1192,6 +1291,13 @@ export const MediaSidebar = memo(function MediaSidebar() {
                 </Suspense>
               )}
             </div>
+
+            <HostModulePanels
+              modules={host?.sidebarModules ?? []}
+              activeTab={activeTab}
+              collapsed={!leftSidebarOpen}
+              width={sidebarWidth}
+            />
           </>
         </div>
         {/* Resize Handle */}
diff --git a/src/features/editor/host/contract.ts b/src/features/editor/host/contract.ts
index 4e16365d6..9959a4503 100644
--- a/src/features/editor/host/contract.ts
+++ b/src/features/editor/host/contract.ts
@@ -1,3 +1,4 @@
+import type { ComponentType } from 'react'
 import type {
   EditApplyResult,
   EditCommandBatch,
@@ -7,6 +8,7 @@ import type {
   TimelineRevision,
 } from '@/features/editor/codepress/contract'
 import type { FreeCutFrameDocument } from '@/features/editor/codepress/document'
+import type { EditorSidebarTab } from '@/config/editor-workspaces'
 
 /**
  * The browser surface is deliberately a port.  It knows how to render and
@@ -328,6 +330,46 @@ export interface EditorHostNavigation {
   back(): void
 }
 
+/**
+ * A host-owned module registered into the editor's left sidebar rail.  The
+ * surface namespaces the tab id to `host:<id>` internally so host tabs cannot
+ * collide with the built-in rail categories, and renders `Panel` in the
+ * sidebar panel area.  Icons and panels cross the package boundary as React
+ * components; react/react-dom are peer dependencies, so the host and the
+ * surface share one React copy.
+ */
+export interface EditorSidebarModule {
+  /** Host-scoped identifier; namespaced to `host:<id>` internally. */
+  id: string
+  /** Rail tooltip and panel header label.  Host-owned, already localized. */
+  label: string
+  /** Lucide-compatible rail icon. */
+  icon: ComponentType<{ className?: string }>
+  /**
+   * Rendered in the sidebar panel area.  Mounted on first activation and kept
+   * mounted across tab switches so in-flight host work survives.
+   */
+  Panel: ComponentType<EditorSidebarModulePanelProps>
+}
+
+/**
+ * Props a host module panel receives.  A panel that only cares about `active`
+ * can keep destructuring just that — the extra fields widen the props without
+ * breaking an existing `({ active }) => …` component.
+ */
+export interface EditorSidebarModulePanelProps {
+  /** Whether this module's tab is the selected one. */
+  active: boolean
+  /**
+   * Whether the sidebar panel area is collapsed.  A latched panel keeps
+   * rendering while collapsed so its work survives; use this to pause
+   * animation or defer layout measurement rather than to unmount.
+   */
+  collapsed: boolean
+  /** Current sidebar panel width in px, so a panel can adapt to a resize. */
+  width: number
+}
+
 export interface EditorHost {
   readonly capabilities: EditorCapabilityMap
   load(): Promise<EmbeddedEditorSnapshot> | EmbeddedEditorSnapshot
@@ -345,6 +387,22 @@ export interface EditorHost {
   subscribe?(listener: (snapshot: EmbeddedEditorSnapshot) => void): () => void
   /** Optional application-issued transcript read/preview boundary. */
   transcript?: EditorTranscriptPort
+  /** Optional host-owned modules added to the editor's left sidebar rail. */
+  sidebarModules?: readonly EditorSidebarModule[]
+  /**
+   * Optional explicit rail: the exact tabs to show, in the exact order, as
+   * built-in ids (`'media'`, `'text'`, `'transcript'`) and registered module
+   * ids (`` `host:${id}` ``).  Anything omitted is hidden, so this is how a
+   * host both reorders the rail and suppresses built-ins it does not want.
+   *
+   * Capability gating still runs first — a rail cannot surface a tab the
+   * host's own capabilities deny — and ids that match nothing are dropped, as
+   * are repeats after the first.  Omit the field for the default rail
+   * (capability-gated built-ins, then modules in registration order).  A rail
+   * that matches nothing at all falls back to the default rather than leaving
+   * the editor with no navigation.
+   */
+  sidebarRail?: readonly EditorSidebarTab[]
   navigation?: EditorHostNavigation
   notify?(notice: HostNotice): void
 }
diff --git a/src/features/editor/host/editor-surface.tsx b/src/features/editor/host/editor-surface.tsx
index c078f9bfd..8e0bfe1b6 100644
--- a/src/features/editor/host/editor-surface.tsx
+++ b/src/features/editor/host/editor-surface.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type RefObject } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { GlobalTooltip } from '@/components/ui/global-tooltip'
 import { ErrorBoundary } from '@/app/error-boundary'
 import { i18n, i18nReady } from '@/i18n'
 import { LoadedEditor } from '@/features/editor/components/editor'
+import { useEditorStore } from '@/shared/state/editor'
 import {
   DEFAULT_HOST_CAPABILITIES,
   isHostCapabilityEnabled,
@@ -15,6 +16,7 @@ import { EditorHostProvider } from './context-provider'
 import { HostCaptionEditorProvider } from './caption-editor-context'
 import { HostTranscriptEditorProvider } from './transcript-editor-context'
 import { EmbeddedEditorHostRuntime } from './runtime'
+import { isHostRailTab } from './sidebar-rail'
 import '@/index.css'
 
 interface HostSurfaceState {
@@ -22,6 +24,28 @@ interface HostSurfaceState {
   runtime: EmbeddedEditorHostRuntime
 }
 
+/**
+ * Imperative handle the host receives through `apiRef`.  Lets the host drive
+ * the sidebar without reaching into editor stores — e.g. auto-opening a
+ * registered sidebar module when host-side work needs attention.
+ */
+export interface FreeCutEditorSurfaceApi {
+  /**
+   * Select a registered `sidebarModules` entry's tab and open the panel.
+   * No-ops for an id the host never registered, and for one its `sidebarRail`
+   * suppresses — opening a tab with no rail button would strand the user, and
+   * the next authoritative snapshot would reset it anyway.
+   */
+  openSidebarModule(id: string): void
+  /** Close the left sidebar panel. */
+  closeSidebar(): void
+}
+
+interface FreeCutEditorSurfaceProps {
+  host: EditorHost
+  apiRef?: RefObject<FreeCutEditorSurfaceApi | null>
+}
+
 /**
  * Importable, host-backed browser entry for the real FreeCut editor tree.
  * Consumers provide authority and ports; this component provides only the
@@ -33,7 +57,7 @@ interface HostSurfaceState {
  * know that chrome exists, and never subtracts anything from `100vh`/`100dvh`.
  * The container must therefore have a definite height.
  */
-export function FreeCutEditorSurface({ host }: { host: EditorHost }) {
+export function FreeCutEditorSurface({ host, apiRef }: FreeCutEditorSurfaceProps) {
   const [state, setState] = useState<HostSurfaceState | null>(null)
   const [error, setError] = useState<Error | null>(null)
 
@@ -64,6 +88,28 @@ export function FreeCutEditorSurface({ host }: { host: EditorHost }) {
     }
   }, [host])
 
+  // The host drives its registered sidebar modules through `apiRef` over the
+  // same editor store the MediaSidebar reads, rather than reaching into the
+  // store itself.  Opening fails closed for any tab the rail does not show.
+  useEffect(() => {
+    if (!apiRef || !state) return
+    apiRef.current = {
+      openSidebarModule: (id) => {
+        if (!isHostRailTab(`host:${id}`, host)) return
+        const { setActiveTab, toggleLeftSidebar } = useEditorStore.getState()
+        setActiveTab(`host:${id}`)
+        if (!useEditorStore.getState().leftSidebarOpen) toggleLeftSidebar()
+      },
+      closeSidebar: () => {
+        const store = useEditorStore.getState()
+        if (store.leftSidebarOpen) store.toggleLeftSidebar()
+      },
+    }
+    return () => {
+      apiRef.current = null
+    }
+  }, [apiRef, state, host])
+
   if (error) {
     return (
       <div
diff --git a/src/features/editor/host/index.ts b/src/features/editor/host/index.ts
index 63835412b..4fa0d90d0 100644
--- a/src/features/editor/host/index.ts
+++ b/src/features/editor/host/index.ts
@@ -1,6 +1,7 @@
 // fallow-ignore-file unused-file
 
 export { FreeCutEditorSurface } from './editor-surface'
+export type { FreeCutEditorSurfaceApi } from './editor-surface'
 export { useEditorCapability, useEditorHostContext, useEditorHostMode } from './context'
 export { EditorHostProvider } from './context-provider'
 export type { EditorHostContextValue } from './context'
@@ -24,6 +25,7 @@ export type {
   EditorCapabilityMap,
   EditorHost,
   EditorHostNavigation,
+  EditorSidebarModule,
   EmbeddedEditorAsset,
   EmbeddedEditorProject,
   EmbeddedEditorSnapshot,
diff --git a/src/features/editor/host/media-sidebar-modules.test.tsx b/src/features/editor/host/media-sidebar-modules.test.tsx
new file mode 100644
index 000000000..b2f009445
--- /dev/null
+++ b/src/features/editor/host/media-sidebar-modules.test.tsx
@@ -0,0 +1,415 @@
+// @vitest-environment jsdom
+
+import { createRef, useEffect } from 'react'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
+
+// Some machines run jsdom with an opaque origin, leaving localStorage
+// undefined; the editor store reads it at creation (import time).  Install a
+// stub before imports evaluate — a no-op wherever the environment provides a
+// real localStorage (e.g. CI).
+vi.hoisted(() => {
+  if (typeof globalThis.localStorage !== 'undefined') return
+  const backing = new Map<string, string>()
+  const stub: Storage = {
+    getItem: (key: string) => backing.get(key) ?? null,
+    setItem: (key: string, value: string) => void backing.set(key, String(value)),
+    removeItem: (key: string) => void backing.delete(key),
+    clear: () => backing.clear(),
+    key: () => null,
+    get length() {
+      return backing.size
+    },
+  }
+  Object.defineProperty(globalThis, 'localStorage', { value: stub, configurable: true })
+})
+
+// Host module tabs render inside the real MediaSidebar; the media library
+// grid is unrelated to the module lifecycle and stays stubbed out.
+vi.mock('@/features/editor/deps/media-library', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@/features/editor/deps/media-library')>()
+  return {
+    ...original,
+    MediaLibrary: () => <div data-testid="media-library-stub" />,
+  }
+})
+
+interface MockHostRuntime {
+  mountStores(): void
+  unmountStores(): void
+}
+
+// The surface mounts LoadedEditor, which owns the host store lifetime.  The
+// apiRef test mirrors that with the real MediaSidebar so the imperative open
+// is observed through the same rail/panel the host sees.
+vi.mock('@/features/editor/components/editor', async () => {
+  const { MediaSidebar } = await import('@/features/editor/components/media-sidebar')
+  return {
+    LoadedEditor: ({ hostRuntime }: { hostRuntime?: MockHostRuntime }) => {
+      useEffect(() => {
+        hostRuntime?.mountStores()
+        return () => hostRuntime?.unmountStores()
+      }, [hostRuntime])
+      return <MediaSidebar />
+    },
+  }
+})
+
+import { useEditorStore } from '@/shared/state/editor'
+import { MediaSidebar } from '../components/media-sidebar'
+import { EditorHostProvider } from './context-provider'
+import {
+  DEFAULT_HOST_CAPABILITIES,
+  type EditorHost,
+  type EditorSidebarModule,
+  type EditorSidebarModulePanelProps,
+  type EmbeddedEditorSnapshot,
+} from './contract'
+import { EmbeddedEditorHostRuntime } from './runtime'
+import { FreeCutEditorSurface, type FreeCutEditorSurfaceApi } from './editor-surface'
+
+function snapshot(): EmbeddedEditorSnapshot {
+  return {
+    project: {
+      id: 'host-modules-project',
+      name: 'Host modules project',
+      width: 1920,
+      height: 1080,
+      fps: 30,
+    },
+    timeline: {
+      timelineId: 'host-modules-timeline',
+      revision: 0,
+      fps: 30,
+      durationInFrames: 300,
+      media: [],
+      tracks: [],
+      width: 1920,
+      height: 1080,
+    },
+    assets: [],
+  }
+}
+
+function TranscribeIcon({ className }: { className?: string }) {
+  return <svg className={className} data-testid="host-module-icon" />
+}
+
+function TranscribePanel({ active, collapsed, width }: EditorSidebarModulePanelProps) {
+  return (
+    <div
+      data-testid="host-module-panel"
+      data-active={String(active)}
+      data-collapsed={String(collapsed)}
+      data-width={String(width)}
+    >
+      Host transcribe panel body
+    </div>
+  )
+}
+
+const transcribeModule: EditorSidebarModule = {
+  id: 'transcribe',
+  label: 'Transcribe',
+  icon: TranscribeIcon,
+  Panel: TranscribePanel,
+}
+
+const brandKitModule: EditorSidebarModule = {
+  id: 'brand-kit',
+  label: 'Brand kit',
+  icon: TranscribeIcon,
+  Panel: () => <div data-testid="host-brand-kit-panel">Brand kit body</div>,
+}
+
+function createHarness(
+  initial: EmbeddedEditorSnapshot,
+  sidebarModules?: readonly EditorSidebarModule[],
+  overrides?: Partial<EditorHost>,
+) {
+  const host: EditorHost = {
+    capabilities: { ...DEFAULT_HOST_CAPABILITIES },
+    load: () => initial,
+    resolveMedia: () => null,
+    submitEdit: vi.fn(async () => {
+      throw new Error('not used by sidebar module tests')
+    }),
+    ...(sidebarModules ? { sidebarModules } : {}),
+    ...overrides,
+  }
+  return {
+    host,
+    runtime: new EmbeddedEditorHostRuntime(host, initial),
+  }
+}
+
+/** Rail tooltips in DOM order — the rail as the user reads it, top to bottom. */
+function railLabels(container: HTMLElement): string[] {
+  const rail = container.querySelector('div.flex.flex-col.gap-1.py-1\\.5')
+  return [...(rail?.querySelectorAll('button') ?? [])].map(
+    (button) => button.getAttribute('data-tooltip') ?? '',
+  )
+}
+
+function renderRealSidebar(harness: ReturnType<typeof createHarness>) {
+  harness.runtime.mountStores()
+  return render(
+    <EditorHostProvider
+      value={{ mode: 'host', capabilities: harness.host.capabilities, host: harness.host }}
+    >
+      <MediaSidebar />
+    </EditorHostProvider>,
+  )
+}
+
+afterEach(() => {
+  cleanup()
+  useEditorStore.setState({ activeTab: 'media', leftSidebarOpen: true })
+})
+
+describe('host sidebar modules (real MediaSidebar path)', () => {
+  it('shows a registered host module in the rail and renders its panel', async () => {
+    const harness = createHarness(snapshot(), [transcribeModule])
+    try {
+      const { container } = renderRealSidebar(harness)
+
+      expect(container.querySelector('button[data-tooltip="Transcribe"]')).not.toBeNull()
+      // The panel mounts on first activation, not before.
+      expect(screen.queryByTestId('host-module-panel')).not.toBeInTheDocument()
+
+      act(() => {
+        useEditorStore.getState().setActiveTab('host:transcribe')
+      })
+
+      const panel = await screen.findByTestId('host-module-panel')
+      expect(panel).toHaveAttribute('data-active', 'true')
+      // The panel header falls back to the host-owned label.
+      expect(screen.getByText('Transcribe')).toBeInTheDocument()
+
+      // Layout reaches the panel as props, so a host module can react to a
+      // collapse or a resize without measuring the sidebar itself.
+      expect(panel).toHaveAttribute('data-collapsed', 'false')
+      expect(panel).toHaveAttribute('data-width', String(useEditorStore.getState().sidebarWidth))
+      act(() => {
+        useEditorStore.getState().setSidebarWidth(377)
+      })
+      expect(screen.getByTestId('host-module-panel')).toHaveAttribute('data-width', '377')
+      act(() => {
+        useEditorStore.getState().toggleLeftSidebar()
+      })
+      expect(screen.getByTestId('host-module-panel')).toHaveAttribute('data-collapsed', 'true')
+      act(() => {
+        useEditorStore.getState().toggleLeftSidebar()
+      })
+
+      // Switching tabs keeps the panel mounted (hidden) so in-flight host
+      // work survives the user browsing other tabs.
+      act(() => {
+        useEditorStore.getState().setActiveTab('media')
+      })
+      const latched = screen.getByTestId('host-module-panel')
+      expect(latched).toHaveAttribute('data-active', 'false')
+      expect(latched.parentElement).toHaveClass('hidden')
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('keeps a registered host: tab across authoritative snapshot installs', async () => {
+    const harness = createHarness(snapshot(), [transcribeModule])
+    try {
+      renderRealSidebar(harness)
+      act(() => {
+        useEditorStore.getState().setActiveTab('host:transcribe')
+      })
+      expect(await screen.findByTestId('host-module-panel')).toBeInTheDocument()
+
+      const initial = snapshot()
+      act(() => {
+        harness.runtime.controller.replaceAuthoritativeSnapshot({
+          ...initial,
+          timeline: { ...initial.timeline, revision: 1 },
+        })
+      })
+
+      // Installing the authoritative snapshot must not reset the rail or
+      // unmount the host panel.
+      expect(useEditorStore.getState().activeTab).toBe('host:transcribe')
+      expect(screen.getByTestId('host-module-panel')).toBeInTheDocument()
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('resets an unregistered host: tab to media on snapshot install', () => {
+    const harness = createHarness(snapshot(), [transcribeModule])
+    try {
+      renderRealSidebar(harness)
+      act(() => {
+        useEditorStore.getState().setActiveTab('host:unknown')
+      })
+      const initial = snapshot()
+      act(() => {
+        harness.runtime.controller.replaceAuthoritativeSnapshot({
+          ...initial,
+          timeline: { ...initial.timeline, revision: 1 },
+        })
+      })
+      expect(useEditorStore.getState().activeTab).toBe('media')
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('leaves the rail unchanged for hosts without sidebarModules', () => {
+    const harness = createHarness(snapshot())
+    try {
+      const { container } = renderRealSidebar(harness)
+      // The category icon rail is the only `py-1.5` flex column in the bar.
+      const rail = container.querySelector('div.flex.flex-col.gap-1.py-1\\.5')
+      expect(rail).not.toBeNull()
+      // Host mode shows media (+ text via timeline.add) and no host entries.
+      expect(rail!.querySelectorAll('button')).toHaveLength(2)
+      expect(container.querySelector('button[data-tooltip="Transcribe"]')).toBeNull()
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('opens and closes a registered module through the surface apiRef', async () => {
+    const harness = createHarness(snapshot(), [transcribeModule])
+    const apiRef = createRef<FreeCutEditorSurfaceApi>()
+    render(<FreeCutEditorSurface host={harness.host} apiRef={apiRef} />)
+
+    await waitFor(() => expect(apiRef.current).not.toBeNull())
+    expect(screen.queryByTestId('host-module-panel')).not.toBeInTheDocument()
+
+    // Unregistered ids fail closed.
+    act(() => {
+      apiRef.current!.openSidebarModule('unknown')
+    })
+    expect(useEditorStore.getState().activeTab).toBe('media')
+
+    // Opening a module selects its tab and reopens a closed sidebar.
+    act(() => {
+      useEditorStore.getState().toggleLeftSidebar()
+    })
+    expect(useEditorStore.getState().leftSidebarOpen).toBe(false)
+    act(() => {
+      apiRef.current!.openSidebarModule('transcribe')
+    })
+    expect(useEditorStore.getState().activeTab).toBe('host:transcribe')
+    expect(useEditorStore.getState().leftSidebarOpen).toBe(true)
+    expect(await screen.findByTestId('host-module-panel')).toBeInTheDocument()
+
+    act(() => {
+      apiRef.current!.closeSidebar()
+    })
+    expect(useEditorStore.getState().leftSidebarOpen).toBe(false)
+    // The latched panel stays mounted after the sidebar closes.
+    expect(screen.getByTestId('host-module-panel')).toBeInTheDocument()
+  })
+})
+
+describe('sidebarRail (explicit host rail order and suppression)', () => {
+  it('renders exactly the declared rail, in the declared order', () => {
+    const harness = createHarness(snapshot(), [transcribeModule, brandKitModule], {
+      sidebarRail: ['host:brand-kit', 'media', 'host:transcribe'],
+    })
+    try {
+      const { container } = renderRealSidebar(harness)
+      expect(railLabels(container)).toEqual(['Brand kit', 'Media', 'Transcribe'])
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('suppresses a built-in the rail omits', () => {
+    // The default rail for these capabilities is Media then Text; pinning only
+    // Text proves omission hides a built-in that would otherwise show.
+    const harness = createHarness(snapshot(), undefined, { sidebarRail: ['text'] })
+    try {
+      const { container } = renderRealSidebar(harness)
+      expect(railLabels(container)).toEqual(['Text'])
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('cannot surface a tab the capabilities deny, and drops unknown ids and repeats', () => {
+    const harness = createHarness(snapshot(), [transcribeModule], {
+      capabilities: { ...DEFAULT_HOST_CAPABILITIES, 'timeline.add': false },
+      sidebarRail: [
+        'text', // denied by capabilities — rail cannot add it back
+        'host:nope', // no module registered behind it
+        'effects', // not a host-mode tab at all
+        'host:transcribe',
+        'media',
+        'host:transcribe', // repeat after the first mention
+      ],
+    })
+    try {
+      const { container } = renderRealSidebar(harness)
+      expect(railLabels(container)).toEqual(['Transcribe', 'Media'])
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('falls back to the default rail when the declared rail matches nothing', () => {
+    const harness = createHarness(snapshot(), [transcribeModule], {
+      sidebarRail: ['host:typo', 'shapes'],
+    })
+    try {
+      const { container } = renderRealSidebar(harness)
+      expect(railLabels(container)).toEqual(['Media', 'Text', 'Transcribe'])
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('falls back to the rail head, not media, when the active tab leaves the rail', () => {
+    const harness = createHarness(snapshot(), [transcribeModule], {
+      sidebarRail: ['host:transcribe'],
+    })
+    try {
+      renderRealSidebar(harness)
+      // `media` is a valid tab but this rail does not show it, so a snapshot
+      // install must not park the editor on a tab with no rail button.
+      act(() => {
+        useEditorStore.getState().setActiveTab('media')
+      })
+      const initial = snapshot()
+      act(() => {
+        harness.runtime.controller.replaceAuthoritativeSnapshot({
+          ...initial,
+          timeline: { ...initial.timeline, revision: 1 },
+        })
+      })
+      expect(useEditorStore.getState().activeTab).toBe('host:transcribe')
+    } finally {
+      harness.runtime.unmountStores()
+    }
+  })
+
+  it('fails openSidebarModule closed for a registered module the rail suppresses', async () => {
+    const harness = createHarness(snapshot(), [transcribeModule, brandKitModule], {
+      sidebarRail: ['media', 'host:transcribe'],
+    })
+    const apiRef = createRef<FreeCutEditorSurfaceApi>()
+    render(<FreeCutEditorSurface host={harness.host} apiRef={apiRef} />)
+    await waitFor(() => expect(apiRef.current).not.toBeNull())
+
+    act(() => {
+      apiRef.current!.openSidebarModule('brand-kit')
+    })
+    expect(useEditorStore.getState().activeTab).toBe('media')
+    expect(screen.queryByTestId('host-brand-kit-panel')).not.toBeInTheDocument()
+
+    // The module the rail does show still opens.
+    act(() => {
+      apiRef.current!.openSidebarModule('transcribe')
+    })
+    expect(useEditorStore.getState().activeTab).toBe('host:transcribe')
+  })
+})
diff --git a/src/features/editor/host/runtime.ts b/src/features/editor/host/runtime.ts
index 1ef594513..a4e3749b4 100644
--- a/src/features/editor/host/runtime.ts
+++ b/src/features/editor/host/runtime.ts
@@ -17,12 +17,12 @@ import { useSelectionStore } from '@/shared/state/selection'
 import { useGizmoStore, useMaskEditorStore } from '@/features/editor/deps/preview'
 import { peekSharedPreviewAudioContext } from '@/features/editor/deps/composition-runtime'
 import {
-  isHostCapabilityEnabled,
   type EmbeddedEditorSnapshot,
   type EditorHost,
   type HostEditRejectionDetail,
   type HostNotice,
 } from './contract'
+import { hostRailFallbackTab, isHostRailTab } from './sidebar-rail'
 import {
   HostEditorController,
   NO_SUPPORTED_EDIT_REASON,
@@ -162,20 +162,19 @@ export class EmbeddedEditorHostRuntime implements EmbeddedEditorHostRuntimeContr
       // The first host slice exposes the normal Edit layout only.  Set this
       // in memory so a local user's persisted Color/Motion preference cannot
       // activate an unsupported host workspace.  Preserve the active sidebar
-      // tab when host mode still shows it: resetting it on every authoritative
-      // snapshot would unmount the transcript panel mid-apply, losing its
-      // applied/conflict state before the user can see it.
+      // tab while the rail still shows it: resetting it on every authoritative
+      // snapshot would unmount the transcript panel mid-apply or a host module
+      // mid-job.  Both the test and the fallback read the same rail resolution
+      // the sidebar renders from, so a host that reorders or suppresses tabs
+      // through `sidebarRail` cannot strand `activeTab` on a tab with no rail
+      // button — and the fallback is the rail's head, not a hardcoded `media`,
+      // since a host may drop media from its rail entirely.
       const currentTab = useEditorStore.getState().activeTab
-      const currentTabVisibleInHostMode =
-        currentTab === 'media' ||
-        (currentTab === 'text' &&
-          isHostCapabilityEnabled(this.host.capabilities, 'timeline.add')) ||
-        (currentTab === 'transcript' &&
-          isHostCapabilityEnabled(this.host.capabilities, 'media.transcription') &&
-          this.host.transcript !== undefined)
       useEditorStore.setState({
         workspace: 'edit',
-        activeTab: currentTabVisibleInHostMode ? currentTab : 'media',
+        activeTab: isHostRailTab(currentTab, this.host)
+          ? currentTab
+          : hostRailFallbackTab(this.host),
       })
 
       const mediaItems = hostAssetsToMediaMetadata(snapshot.assets)
diff --git a/src/features/editor/host/sidebar-rail.ts b/src/features/editor/host/sidebar-rail.ts
new file mode 100644
index 000000000..061ee9ec1
--- /dev/null
+++ b/src/features/editor/host/sidebar-rail.ts
@@ -0,0 +1,80 @@
+import type { EditorSidebarTab } from '@/config/editor-workspaces'
+import { createLogger } from '@/shared/logging/logger'
+import { isHostCapabilityEnabled, type EditorHost } from './contract'
+
+const logger = createLogger('HostSidebarRail')
+
+/**
+ * Built-in rail tabs host mode can show at all, in the order the default rail
+ * lists them.  Everything outside this set belongs to the local editor: host
+ * mode has no shapes/effects/transitions/lottie/ai surface to gate.
+ */
+const HOST_BUILTIN_RAIL_ORDER = ['media', 'text', 'transcript'] as const
+
+/** Whether a built-in tab clears the host's own capability gate. */
+function builtinTabAvailable(tab: (typeof HOST_BUILTIN_RAIL_ORDER)[number], host: EditorHost) {
+  switch (tab) {
+    case 'media':
+      return true
+    case 'text':
+      return isHostCapabilityEnabled(host.capabilities, 'timeline.add')
+    case 'transcript':
+      return (
+        isHostCapabilityEnabled(host.capabilities, 'media.transcription') &&
+        host.transcript !== undefined
+      )
+  }
+}
+
+/**
+ * The rail host mode shows, resolved once so the sidebar (which renders it)
+ * and the runtime (which decides whether a persisted `activeTab` survives an
+ * authoritative snapshot) cannot disagree about what is on screen.
+ *
+ * Capability gating runs first and is not negotiable — `sidebarRail` chooses
+ * order and subtraction from what the capabilities already allow, never
+ * addition.  A rail that selects nothing is treated as unset so a typo cannot
+ * leave the editor with no navigation.
+ */
+export function hostRailTabIds(host: EditorHost): readonly EditorSidebarTab[] {
+  const moduleTabs = (host.sidebarModules ?? []).map(
+    (module) => `host:${module.id}` as EditorSidebarTab,
+  )
+  const defaultRail: readonly EditorSidebarTab[] = [
+    ...HOST_BUILTIN_RAIL_ORDER.filter((tab) => builtinTabAvailable(tab, host)),
+    ...moduleTabs,
+  ]
+  if (!host.sidebarRail) return defaultRail
+
+  const remaining = new Set(defaultRail)
+  const ordered: EditorSidebarTab[] = []
+  for (const tab of host.sidebarRail) {
+    // Deleting on the way through drops repeats after the first mention, and
+    // silently skips ids the capabilities already denied.
+    if (!remaining.delete(tab)) continue
+    ordered.push(tab)
+  }
+
+  if (ordered.length === 0) {
+    logger.warn('sidebarRail matched no available tab; falling back to the default rail', {
+      requested: host.sidebarRail,
+      available: defaultRail,
+    })
+    return defaultRail
+  }
+  return ordered
+}
+
+/** Whether host mode still shows `tab` — i.e. the rail can navigate back to it. */
+export function isHostRailTab(tab: string, host: EditorHost): boolean {
+  return hostRailTabIds(host).includes(tab as EditorSidebarTab)
+}
+
+/**
+ * The tab to fall back to when the active one is no longer on the rail.  The
+ * rail's first entry rather than a hardcoded `'media'`, since a host is free
+ * to drop media from its rail entirely.
+ */
+export function hostRailFallbackTab(host: EditorHost): EditorSidebarTab {
+  return hostRailTabIds(host)[0] ?? 'media'
+}
diff --git a/src/features/editor/host/transcript-editor.test.tsx b/src/features/editor/host/transcript-editor.test.tsx
index 4f42c53c9..f91d09d23 100644
--- a/src/features/editor/host/transcript-editor.test.tsx
+++ b/src/features/editor/host/transcript-editor.test.tsx
@@ -4,6 +4,26 @@ import { readFileSync } from 'node:fs'
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
 
+// Some machines run jsdom with an opaque origin, leaving localStorage
+// undefined; the zustand persist middleware captures it at store creation
+// (import time).  Install a stub before imports evaluate — a no-op wherever
+// the environment provides a real localStorage (e.g. CI).
+vi.hoisted(() => {
+  if (typeof globalThis.localStorage !== 'undefined') return
+  const backing = new Map<string, string>()
+  const stub: Storage = {
+    getItem: (key: string) => backing.get(key) ?? null,
+    setItem: (key: string, value: string) => void backing.set(key, String(value)),
+    removeItem: (key: string) => void backing.delete(key),
+    clear: () => backing.clear(),
+    key: () => null,
+    get length() {
+      return backing.size
+    },
+  }
+  Object.defineProperty(globalThis, 'localStorage', { value: stub, configurable: true })
+})
+
 // The transcript tab renders inside the real MediaSidebar; the media library
 // grid is unrelated to the tab lifecycle and stays stubbed out.
 vi.mock('@/features/editor/deps/media-library', async (importOriginal) => {