diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c738471..05b6af5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -20,6 +20,7 @@ import { Header, type HeaderCounts } from "./components/Header";
 import { GridView } from "./components/GridView";
 import { Kanban } from "./components/Kanban";
 import { ListView } from "./components/ListView";
+import { SplitView } from "./components/split/SplitView";
 import { NeedsStrip } from "./components/NeedsStrip";
 import { NewSessionOverlay } from "./components/NewSessionOverlay";
 import { NewWindowOverlay } from "./components/NewWindowOverlay";
@@ -1002,7 +1003,13 @@ export function App() {
         visibleCount={visible.length}
       />
       <main className="main">
-        {settings.layout === "list" ? (
+        {settings.layout === "split" ? (
+          <SplitView
+            windows={visible}
+            sessions={orderedSessions}
+            onFocus={handleFocus}
+          />
+        ) : settings.layout === "list" ? (
           <ListView
             windows={visible}
             focusedId={focusedId}
diff --git a/frontend/src/components/Icon.tsx b/frontend/src/components/Icon.tsx
index 0f0407f..b0a62ad 100644
--- a/frontend/src/components/Icon.tsx
+++ b/frontend/src/components/Icon.tsx
@@ -20,6 +20,7 @@ export type IconName =
   | "grid"
   | "kanban"
   | "list"
+  | "split"
   | "play"
   | "pause"
   | "filter"
@@ -193,6 +194,16 @@ export function Icon({ name, size = 14, style, className }: IconProps) {
           <path d="M2.5 4h11M2.5 8h11M2.5 12h11" />
         </svg>
       );
+    case "split":
+      // THI-246: rail-on-left, large detail panel on right. The vertical
+      // divider hints at the resizable column split. Stroke style matches
+      // the other layout glyphs.
+      return (
+        <svg {...props}>
+          <rect x="2" y="2.5" width="4" height="11" rx="0.6" />
+          <rect x="7.5" y="2.5" width="6.5" height="11" rx="0.6" />
+        </svg>
+      );
     case "play":
       return (
         <svg {...props}>
diff --git a/frontend/src/components/Subhead.test.tsx b/frontend/src/components/Subhead.test.tsx
index 32d54aa..4ebbad1 100644
--- a/frontend/src/components/Subhead.test.tsx
+++ b/frontend/src/components/Subhead.test.tsx
@@ -276,7 +276,7 @@ describe("Subhead layout switcher (THI-59)", () => {
     const buttons = container.querySelectorAll<HTMLButtonElement>(
       ".layout-switcher button",
     );
-    expect(buttons).toHaveLength(3); // kanban, grid, list
+    expect(buttons).toHaveLength(4); // kanban, grid, list, split (THI-246)
     const [kanban, grid, list] = buttons;
     expect(kanban.disabled).toBe(false);
     expect(grid.disabled).toBe(false);
diff --git a/frontend/src/components/Subhead.tsx b/frontend/src/components/Subhead.tsx
index dd10e45..c255ce5 100644
--- a/frontend/src/components/Subhead.tsx
+++ b/frontend/src/components/Subhead.tsx
@@ -299,6 +299,18 @@ function LayoutSwitcher() {
           <Icon name="list" size={13} />
         </button>
       </Tooltip>
+      {/* THI-246: Split view — persistent rail + detail. PR 1 ships the
+       *  switcher + skeleton; rail features (PR 2) and inline xterm (PR 3)
+       *  follow. */}
+      <Tooltip content="Split">
+        <button
+          className={layout === "split" ? "is-active" : ""}
+          onClick={() => updateSettings({ layout: "split" })}
+          aria-label="Split layout"
+        >
+          <Icon name="split" size={13} />
+        </button>
+      </Tooltip>
     </span>
   );
 }
diff --git a/frontend/src/components/split/SplitView.test.tsx b/frontend/src/components/split/SplitView.test.tsx
new file mode 100644
index 0000000..02bb685
--- /dev/null
+++ b/frontend/src/components/split/SplitView.test.tsx
@@ -0,0 +1,112 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+
+import { SplitView } from "./SplitView";
+import { DEFAULT_SETTINGS, updateSettings } from "../../lib/settings";
+import { mkSession, mkWindow } from "../../test/factories";
+
+beforeEach(() => {
+  localStorage.clear();
+  updateSettings(DEFAULT_SETTINGS);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+const noop = vi.fn();
+
+describe("SplitView (THI-246 PR 1)", () => {
+  it("renders an empty-state hint when no panes match", () => {
+    const { container } = render(
+      <SplitView windows={[]} sessions={[]} onFocus={noop} />,
+    );
+    expect(container.querySelector(".sb-rail-empty")).not.toBeNull();
+    expect(container.textContent).toMatch(/select a pane/i);
+  });
+
+  it("renders one rail row per visible window, grouped under its session", () => {
+    const { container } = render(
+      <SplitView
+        windows={[
+          mkWindow({ paneId: "%a", session: "alpha", name: "shell" }),
+          mkWindow({ paneId: "%b", session: "alpha", name: "claude" }),
+          mkWindow({ paneId: "%c", session: "beta", name: "logs" }),
+        ]}
+        sessions={[mkSession({ id: "alpha" }), mkSession({ id: "beta" })]}
+        onFocus={noop}
+      />,
+    );
+    const paneRows = container.querySelectorAll(".sb-row.pane");
+    expect(paneRows).toHaveLength(3);
+    // Session headers are present too.
+    const heads = container.querySelectorAll(".sb-row.sb-row-head");
+    expect(heads).toHaveLength(2);
+  });
+
+  it("clicking a rail row persists the selection and swaps the detail pane", () => {
+    const { container } = render(
+      <SplitView
+        windows={[
+          mkWindow({ paneId: "%a", session: "alpha", name: "shell" }),
+        ]}
+        sessions={[mkSession({ id: "alpha" })]}
+        onFocus={noop}
+      />,
+    );
+    // Before click: empty-state hint visible.
+    expect(container.querySelector(".sb-detail-empty")).not.toBeNull();
+    fireEvent.click(container.querySelector<HTMLButtonElement>(".sb-row.pane")!);
+    expect(container.querySelector(".sb-detail-empty")).toBeNull();
+    expect(container.querySelector(".sb-pane-hd")).not.toBeNull();
+    // And the setting is persisted.
+    expect(
+      JSON.parse(localStorage.getItem("switchboard:settings")!).selectedPaneId,
+    ).toBe("%a");
+  });
+
+  it("restores the persisted selection on mount", () => {
+    updateSettings({ selectedPaneId: "%a" });
+    const { container } = render(
+      <SplitView
+        windows={[mkWindow({ paneId: "%a", session: "alpha", name: "shell" })]}
+        sessions={[mkSession({ id: "alpha" })]}
+        onFocus={noop}
+      />,
+    );
+    // Detail header rendered = the pane was matched and selected on mount.
+    expect(container.querySelector(".sb-pane-hd")).not.toBeNull();
+    expect(container.querySelector(".sb-row.pane.sel")).not.toBeNull();
+  });
+
+  it("uses the rail-width setting for the grid template", () => {
+    updateSettings({ splitRailWidth: 360 });
+    const { container } = render(
+      <SplitView
+        windows={[mkWindow({ paneId: "%a", session: "alpha" })]}
+        sessions={[mkSession({ id: "alpha" })]}
+        onFocus={noop}
+      />,
+    );
+    const split = container.querySelector<HTMLDivElement>(".sb-split")!;
+    expect(split.style.gridTemplateColumns).toContain("360px");
+  });
+
+  it("focus button calls onFocus when a pane is selected", () => {
+    updateSettings({ selectedPaneId: "%a" });
+    const onFocus = vi.fn();
+    const { container } = render(
+      <SplitView
+        windows={[mkWindow({ paneId: "%a", session: "alpha" })]}
+        sessions={[mkSession({ id: "alpha" })]}
+        onFocus={onFocus}
+      />,
+    );
+    fireEvent.click(
+      container.querySelector<HTMLButtonElement>(
+        ".sb-pane-hd button[aria-label='Focus in tmux']",
+      )!,
+    );
+    expect(onFocus).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/components/split/SplitView.tsx b/frontend/src/components/split/SplitView.tsx
new file mode 100644
index 0000000..a915bda
--- /dev/null
+++ b/frontend/src/components/split/SplitView.tsx
@@ -0,0 +1,176 @@
+import { useMemo } from "react";
+
+import { sortPendingFirst } from "../../lib/filter";
+import { updateSettings, useSetting } from "../../lib/settings";
+import type { Session, Window } from "../../types";
+import { Icon } from "../Icon";
+import { StatusPill } from "../StatusPill";
+
+interface Props {
+  windows: Window[];
+  sessions: Session[];
+  /** Forwarded so the "Open in tmux" header button still focuses the
+   *  selected pane in the user's real terminal (THI-88). */
+  onFocus: (w: Window) => void;
+}
+
+/** THI-246 PR 1 — Split view foundation.
+ *
+ *  Two-pane workspace: a rail on the left listing every visible window in a
+ *  flat tree, a detail pane on the right that shows the selected pane's
+ *  metadata. The inline xterm + rail features (Repo→Worktree→Pane tree,
+ *  collapse, divider resize, drag-reorder) ship in follow-up PRs.
+ *
+ *  Selection persists in `settings.selectedPaneId` so a reload or a layout
+ *  swap restores the last viewed pane. Rail width persists in
+ *  `settings.splitRailWidth` (used in PR 2 once the divider lands).
+ */
+export function SplitView({ windows, sessions, onFocus }: Props) {
+  const selectedPaneId = useSetting("selectedPaneId");
+  const railWidth = useSetting("splitRailWidth");
+
+  // Sort each session bucket like Kanban does so the rail order matches what
+  // the user sees elsewhere. PR 2 will swap in the Repo→Worktree→Pane tree
+  // derived from THI-243's discovery feed.
+  const rows = useMemo<Array<{ session: Session; windows: Window[] }>>(() => {
+    const bySession = new Map<string, Window[]>();
+    for (const w of windows) {
+      const bucket = bySession.get(w.session);
+      if (bucket) bucket.push(w);
+      else bySession.set(w.session, [w]);
+    }
+    return sessions
+      .map((s) => ({ session: s, windows: sortPendingFirst(bySession.get(s.id) ?? []) }))
+      .filter((row) => row.windows.length > 0);
+  }, [sessions, windows]);
+
+  const selected = selectedPaneId
+    ? windows.find((w) => w.paneId === selectedPaneId) ?? null
+    : null;
+
+  return (
+    <div
+      className="sb-split"
+      style={{ gridTemplateColumns: `${railWidth}px 7px 1fr` }}
+    >
+      <aside className="sb-rail" role="navigation" aria-label="Panes">
+        <header className="sb-rail-hd">
+          <span className="ttl">Projects</span>
+          <span className="grow" />
+        </header>
+        <div className="sb-rail-body">
+          {rows.length === 0 ? (
+            <div className="sb-rail-empty">No matching windows.</div>
+          ) : (
+            rows.map(({ session, windows: ws }) => (
+              <SessionGroup
+                key={session.id}
+                session={session}
+                windows={ws}
+                selectedPaneId={selectedPaneId}
+              />
+            ))
+          )}
+        </div>
+      </aside>
+      {/* Divider placeholder — drag-to-resize lands in PR 2. The 7px gutter
+       *  preserves the grid-template-columns shape so PR 2 just wires up the
+       *  pointer handlers without re-laying out the surface. */}
+      <div className="sb-divider" aria-hidden="true" />
+      <section className="sb-detail" role="main" aria-label="Detail pane">
+        {selected ? (
+          <DetailPlaceholder window={selected} onFocus={onFocus} />
+        ) : (
+          <div className="sb-detail-empty">
+            <p>Select a pane from the rail to see its live terminal.</p>
+            <p className="sb-detail-empty-sub">
+              Inline xterm lands in a follow-up PR.
+            </p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+interface SessionGroupProps {
+  session: Session;
+  windows: Window[];
+  selectedPaneId: string;
+}
+
+function SessionGroup({ session, windows, selectedPaneId }: SessionGroupProps) {
+  return (
+    <div className="sb-group">
+      <div className="sb-row sb-row-head" aria-label={`Session ${session.name}`}>
+        <span className="ic">
+          <Icon name="kanban" size={11} />
+        </span>
+        <span className="lbl">{session.name}</span>
+      </div>
+      {windows.map((w) => (
+        <PaneRow key={w.paneId} w={w} selected={w.paneId === selectedPaneId} />
+      ))}
+    </div>
+  );
+}
+
+function PaneRow({ w, selected }: { w: Window; selected: boolean }) {
+  return (
+    <button
+      type="button"
+      className={`sb-row pane${selected ? " sel" : ""}`}
+      onClick={() => updateSettings({ selectedPaneId: w.paneId })}
+      aria-pressed={selected}
+      data-pane-id={w.paneId}
+    >
+      <span className={`ic ${w.kind === "agent" ? "agent" : ""}`}>
+        <Icon name={w.kind === "agent" ? "agent" : "shell"} size={12} />
+      </span>
+      <span className="lbl">{w.name}</span>
+      {w.pendingInput && <span className="count">!</span>}
+    </button>
+  );
+}
+
+function DetailPlaceholder({
+  window: w,
+  onFocus,
+}: {
+  window: Window;
+  onFocus: (w: Window) => void;
+}) {
+  return (
+    <>
+      <header className="sb-pane-hd">
+        <span className="pid">
+          <span className="ic">
+            <Icon name={w.kind === "agent" ? "agent" : "shell"} size={13} />
+          </span>
+          {w.name}
+        </span>
+        <span className="meta">
+          {w.session}:{w.index}
+        </span>
+        {w.branch && <span className="meta">{w.branch}</span>}
+        <span className="grow" />
+        <StatusPill status={w.status} />
+        <button
+          className="btn btn-icon btn-ghost"
+          onClick={() => onFocus(w)}
+          title="Focus this window in tmux"
+          aria-label="Focus in tmux"
+        >
+          <Icon name="focus" />
+        </button>
+      </header>
+      <div className="sb-detail-stub">
+        <p>Inline terminal coming in a follow-up PR.</p>
+        <p className="sb-detail-stub-sub">
+          For now, use the Focus-in-tmux button above or switch to
+          Kanban/List/Grid to open the existing terminal modal.
+        </p>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/lib/settings.test.ts b/frontend/src/lib/settings.test.ts
index 6fc8c82..f0f4e5a 100644
--- a/frontend/src/lib/settings.test.ts
+++ b/frontend/src/lib/settings.test.ts
@@ -11,6 +11,22 @@ afterEach(() => {
   updateSettings(DEFAULT_SETTINGS);
 });
 
+describe("settings.selectedPaneId + splitRailWidth (THI-246)", () => {
+  it("defaults the selected pane to empty string and the rail to 280px", () => {
+    expect(DEFAULT_SETTINGS.selectedPaneId).toBe("");
+    expect(DEFAULT_SETTINGS.splitRailWidth).toBe(280);
+  });
+
+  it("round-trips both through localStorage", () => {
+    updateSettings({ selectedPaneId: "%42", splitRailWidth: 320 });
+    const parsed = JSON.parse(
+      localStorage.getItem(STORAGE_KEY)!,
+    ) as { selectedPaneId: string; splitRailWidth: number };
+    expect(parsed.selectedPaneId).toBe("%42");
+    expect(parsed.splitRailWidth).toBe(320);
+  });
+});
+
 describe("settings.idleCleanupDays", () => {
   it("is present in DEFAULT_SETTINGS with value 7", () => {
     expect(DEFAULT_SETTINGS.idleCleanupDays).toBe(7);
diff --git a/frontend/src/lib/settings.ts b/frontend/src/lib/settings.ts
index 4661326..93e31bc 100644
--- a/frontend/src/lib/settings.ts
+++ b/frontend/src/lib/settings.ts
@@ -13,7 +13,9 @@ import { useSyncExternalStore } from "react";
 export type Theme = "dark" | "light" | "contrast" | "phosphor";
 export type Accent = "aurora" | "amber" | "sky" | "magenta" | "lilac";
 export type Density = "compact" | "comfy" | "preview";
-export type Layout = "kanban" | "grid" | "list";
+/** THI-246: "split" is the 4th display type — persistent rail + detail
+ *  workspace. It's a peer of Kanban/Grid/List, not a replacement. */
+export type Layout = "kanban" | "grid" | "list" | "split";
 export type ColumnSize = "narrow" | "normal" | "wide";
 /** Ordered narrow → normal → wide so +/- controls can step linearly (THI-128). */
 export const COLUMN_SIZE_ORDER: readonly ColumnSize[] = ["narrow", "normal", "wide"];
@@ -55,6 +57,12 @@ export interface Settings {
    *  THI-248). The GroupingSwitcher hides itself when the active layout
    *  doesn't yet honor the toggle. */
   groupingMode: GroupingMode;
+  /** THI-246: which pane the Split view's detail pane shows. Empty string
+   *  ⇒ no selection yet. Persisted so a reload restores the last selection. */
+  selectedPaneId: string;
+  /** THI-246: width of the Split view's rail in pixels. Clamped 200–460 at
+   *  the UI layer. The divider's drag-handle updates this. */
+  splitRailWidth: number;
 }
 
 // OKLCH lightness/chroma/hue for each accent preset.
@@ -135,6 +143,8 @@ export const DEFAULT_SETTINGS: Settings = {
   idleCleanupDays: 7,
   defaultDirectory: "",
   groupingMode: "sessions",
+  selectedPaneId: "",
+  splitRailWidth: 280,
 };
 
 export const POLL_MIN_S = 1;
diff --git a/frontend/src/lib/suggestLayout.ts b/frontend/src/lib/suggestLayout.ts
index f5a357d..48ed19b 100644
--- a/frontend/src/lib/suggestLayout.ts
+++ b/frontend/src/lib/suggestLayout.ts
@@ -28,5 +28,7 @@ export function suggestLayout(
     if (visibleCount <= 4) return "grid";
     return null;
   }
+  // THI-246: "split" is an opt-in power-user view; we never suggest switching
+  // INTO it (or out of it) automatically. Same reasoning as grid.
   return null;
 }
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index f851b20..0b6bb4a 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -3038,3 +3038,178 @@ input, textarea, select { font: inherit; color: inherit; }
   text-align: center;
   padding: 24px 0;
 }
+
+/* ─── THI-246 Split view (PR 1 — foundation) ───────────────────────────── */
+/* Two-pane workspace: rail on the left, divider, detail pane on the right.
+ * Only the bits that PR 1 actually renders are styled. PR 2 adds the
+ * resize/collapse/drag affordances; PR 3 styles the inline xterm chrome
+ * inside .sb-detail. */
+.sb-split {
+  height: 100%;
+  display: grid;
+  min-height: 0;
+}
+
+/* ── rail ──────────────────────────────────────────────────────────────── */
+.sb-rail {
+  background: var(--bg-elev);
+  border-right: 1px solid var(--hairline);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.sb-rail-hd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--hairline);
+  flex: none;
+}
+.sb-rail-hd .ttl {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+.sb-rail-hd .grow { flex: 1; }
+.sb-rail-body {
+  overflow-y: auto;
+  padding: 6px 0 16px;
+  flex: 1;
+  min-height: 0;
+}
+.sb-rail-empty {
+  padding: 20px 14px;
+  color: var(--text-dim);
+  font-size: 11.5px;
+}
+
+.sb-group { display: flex; flex-direction: column; }
+
+.sb-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  min-height: 30px;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  color: var(--text-mute);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  width: 100%;
+}
+.sb-row:hover { background: var(--panel); }
+.sb-row .ic {
+  width: 16px;
+  display: grid;
+  place-items: center;
+  color: var(--text-dim);
+  flex: none;
+}
+.sb-row .lbl {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+.sb-row.sb-row-head .lbl {
+  font-weight: 600;
+  color: var(--text);
+}
+.sb-row.pane {
+  padding-left: 22px;
+  color: var(--text);
+  cursor: pointer;
+}
+.sb-row.pane .ic.agent { color: var(--accent); }
+.sb-row.sel {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.sb-row .count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--accent);
+  flex: none;
+}
+
+/* ── divider ───────────────────────────────────────────────────────────── */
+.sb-divider {
+  position: relative;
+  z-index: 5;
+}
+.sb-divider::after {
+  content: "";
+  position: absolute;
+  inset: 0 3px;
+  background: var(--hairline);
+}
+
+/* ── detail pane ───────────────────────────────────────────────────────── */
+.sb-detail {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #050608;
+  overflow: hidden;
+}
+.sb-pane-hd {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex-wrap: wrap;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--hairline);
+  background: var(--bg-elev);
+  flex: none;
+}
+.sb-pane-hd .pid {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text);
+  font-size: 12.5px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.sb-pane-hd .pid .ic {
+  color: var(--accent);
+  display: inline-flex;
+}
+.sb-pane-hd .meta {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--text-mute);
+  white-space: nowrap;
+}
+.sb-pane-hd .grow { flex: 1; }
+
+/* PR 1 placeholders — replaced by inline xterm in PR 3. */
+.sb-detail-empty,
+.sb-detail-stub {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  padding: 24px;
+  color: var(--text-mute);
+  font-size: 13px;
+  background: #050608;
+}
+.sb-detail-empty-sub,
+.sb-detail-stub-sub {
+  margin-top: 8px;
+  color: var(--text-dim);
+  font-size: 11.5px;
+}