diff --git a/interface/src/components/MobileTopBar.tsx b/interface/src/components/MobileTopBar.tsx
new file mode 100644
index 000000000..ac47743e5
--- /dev/null
+++ b/interface/src/components/MobileTopBar.tsx
@@ -0,0 +1,43 @@
+import {List} from "@phosphor-icons/react";
+import clsx from "clsx";
+import type {ReactNode} from "react";
+
+interface MobileTopBarProps {
+	title?: string;
+	onMenu: () => void;
+	leading?: ReactNode;
+	trailing?: ReactNode;
+	className?: string;
+}
+
+export function MobileTopBar({
+	title,
+	onMenu,
+	leading,
+	trailing,
+	className,
+}: MobileTopBarProps) {
+	return (
+		<header
+			className={clsx(
+				"flex h-12 shrink-0 items-center gap-2 border-b border-app-line bg-sidebar px-2",
+				className,
+			)}
+		>
+			{leading ?? (
+				<button
+					type="button"
+					aria-label="Open menu"
+					onClick={onMenu}
+					className="flex h-11 w-11 items-center justify-center rounded-lg text-ink hover:bg-app-box/60 active:bg-app-box/80"
+				>
+					<List size={20} weight="regular" />
+				</button>
+			)}
+			<div className="min-w-0 flex-1 truncate text-sm font-medium text-ink">
+				{title}
+			</div>
+			{trailing && <div className="flex items-center gap-1">{trailing}</div>}
+		</header>
+	);
+}
diff --git a/interface/src/components/OpenCodeEmbed.tsx b/interface/src/components/OpenCodeEmbed.tsx
index 7af73e692..2419e25aa 100644
--- a/interface/src/components/OpenCodeEmbed.tsx
+++ b/interface/src/components/OpenCodeEmbed.tsx
@@ -218,6 +218,9 @@ export function OpenCodeEmbed({
 
 				// Pre-seed OpenCode layout preferences so it starts with a clean
 				// chat-only view (sidebar, terminal, file tree, review all closed).
+				// `session.width` is intentionally omitted so OpenCode picks a width
+				// suitable for the current viewport — seeding a fixed 600px broke
+				// the native mobile layout at narrow widths.
 				const layoutKey = "opencode.global.dat:layout";
 				if (!localStorage.getItem(layoutKey)) {
 					localStorage.setItem(
@@ -232,7 +235,6 @@ export function OpenCodeEmbed({
 							terminal: {height: 280, opened: false},
 							review: {diffStyle: "split", panelOpened: false},
 							fileTree: {opened: false, width: 344, tab: "changes"},
-							session: {width: 600},
 							mobileSidebar: {opened: false},
 							sessionTabs: {},
 							sessionView: {},
@@ -261,12 +263,14 @@ export function OpenCodeEmbed({
 				style.textContent = cssText;
 				shadow.appendChild(style);
 
-				// Hide the sidebar, mobile sidebar, and top bar in embedded
-				// mode — we only want the session/chat view.
+				// Hide OpenCode's desktop nav + title chrome — spacebot provides
+				// its own. The mobile nav (`sidebar-nav-mobile`) is intentionally
+				// NOT hidden: when the viewport drops below md, OpenCode's
+				// internal responsive layout surfaces it, and we want users to
+				// have a way to switch sessions inside the embed on phones.
 				const overrides = document.createElement("style");
 				overrides.textContent = `
 					[data-component="sidebar-nav-desktop"],
-					[data-component="sidebar-nav-mobile"],
 					header:has(#opencode-titlebar-center),
 					[data-session-title] { display: none !important; }
 					main { border: none !important; border-radius: 0 !important; }
diff --git a/interface/src/components/Sidebar.tsx b/interface/src/components/Sidebar.tsx
index 0f84a4712..09b7a055c 100644
--- a/interface/src/components/Sidebar.tsx
+++ b/interface/src/components/Sidebar.tsx
@@ -62,6 +62,8 @@ import {IS_DESKTOP, IS_MACOS} from "@/platform";
 
 interface SidebarProps {
 	liveStates: Record<string, ChannelLiveState>;
+	/** When true, drop the fixed 220px width — sidebar fills its drawer container. */
+	fillWidth?: boolean;
 }
 
 const agentSubItems = [
@@ -185,7 +187,10 @@ function readProjectId(search: unknown): string | null {
 	return typeof id === "string" ? id : null;
 }
 
-export function Sidebar({liveStates: _liveStates}: SidebarProps) {
+export function Sidebar({
+	liveStates: _liveStates,
+	fillWidth = false,
+}: SidebarProps) {
 	const navigate = useNavigate();
 	const [createOpen, setCreateOpen] = useState(false);
 	const [userExpandedAgent, setUserExpandedAgent] = useState<string | null>(
@@ -273,7 +278,13 @@ export function Sidebar({liveStates: _liveStates}: SidebarProps) {
 	};
 
 	return (
-		<aside className="flex w-[220px] shrink-0 flex-col bg-sidebar">
+		<aside
+			className={
+				fillWidth
+					? "flex h-full w-full shrink-0 flex-col bg-sidebar"
+					: "flex w-[220px] shrink-0 flex-col bg-sidebar"
+			}
+		>
 			{/* Company switcher */}
 			<div className={`px-3 ${IS_DESKTOP && IS_MACOS ? "pt-[50px]" : "pt-3"}`}>
 				<Popover.Root open={switcherOpen} onOpenChange={setSwitcherOpen}>
diff --git a/interface/src/components/agent-config/ConfigSidebar.tsx b/interface/src/components/agent-config/ConfigSidebar.tsx
index 6eebdf316..ae149d022 100644
--- a/interface/src/components/agent-config/ConfigSidebar.tsx
+++ b/interface/src/components/agent-config/ConfigSidebar.tsx
@@ -15,7 +15,7 @@ export function ConfigSidebar({
 	identityData,
 }: ConfigSidebarProps) {
 	return (
-		<div className="flex w-52 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-dark-box/20 overflow-y-auto">
+		<div className="flex w-full shrink-0 flex-col overflow-y-auto md:w-52 md:border-r md:border-app-line/50 md:bg-app-dark-box/20">
 			{/* General Group */}
 			<div className="flex flex-col gap-0.5 px-2 pt-3">
 				{SECTIONS.filter((s) => s.group === "general").map((section) => (
diff --git a/interface/src/components/dashboard/ActivityCard.tsx b/interface/src/components/dashboard/ActivityCard.tsx
index 64955a246..34c675f01 100644
--- a/interface/src/components/dashboard/ActivityCard.tsx
+++ b/interface/src/components/dashboard/ActivityCard.tsx
@@ -195,7 +195,7 @@ export function ActivityCard() {
 						</div>
 
 						{/* Summary row */}
-						<div className="mt-3 flex items-center gap-4 text-tiny">
+						<div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-tiny">
 							{SERIES.map((s) => {
 								const val = totals[s.key as keyof typeof totals] as number;
 								if (val === 0) return null;
diff --git a/interface/src/components/skills/SkillInspector.tsx b/interface/src/components/skills/SkillInspector.tsx
index 0184d49ac..00a100a66 100644
--- a/interface/src/components/skills/SkillInspector.tsx
+++ b/interface/src/components/skills/SkillInspector.tsx
@@ -92,7 +92,7 @@ export function SkillInspector({
 		selected.type === "installed" ? installedContentQuery.data?.base_dir : null;
 
 	return (
-		<div className="flex w-80 flex-shrink-0 flex-col border-l border-app-line/50 bg-app-dark-box/10">
+		<div className="flex h-full w-full shrink-0 flex-col md:w-80 md:border-l md:border-app-line/50 md:bg-app-dark-box/10">
 			{/* Header */}
 			<div className="flex items-start justify-between gap-2 border-b border-app-line/50 px-4 py-3">
 				<div className="min-w-0 flex-1">
diff --git a/interface/src/components/skills/SkillsSidebar.tsx b/interface/src/components/skills/SkillsSidebar.tsx
index 8a8584fa5..a0bcd659c 100644
--- a/interface/src/components/skills/SkillsSidebar.tsx
+++ b/interface/src/components/skills/SkillsSidebar.tsx
@@ -42,7 +42,7 @@ export function SkillsSidebar({
 		selectedSkill?.type === "installed" ? selectedSkill.skill.name : null;
 
 	return (
-		<div className="flex w-52 flex-shrink-0 flex-col border-r border-app-line/50 bg-app-dark-box/20">
+		<div className="flex w-full shrink-0 flex-col md:w-52 md:border-r md:border-app-line/50 md:bg-app-dark-box/20">
 			{/* Top actions */}
 			<div className="flex flex-col gap-0.5 px-2 pt-3">
 				{TOP_VIEWS.map(({view, label, icon: Icon}) => (
diff --git a/interface/src/components/workbench/WorkbenchSidebar.tsx b/interface/src/components/workbench/WorkbenchSidebar.tsx
index 5bb54f5ab..c7f3a59d0 100644
--- a/interface/src/components/workbench/WorkbenchSidebar.tsx
+++ b/interface/src/components/workbench/WorkbenchSidebar.tsx
@@ -6,13 +6,21 @@ export function WorkbenchSidebar({
 	tree,
 	totalCount,
 	onSelectWorker,
+	fillWidth = false,
 }: {
 	tree: ProjectGroup[];
 	totalCount: number;
 	onSelectWorker: (id: string) => void;
+	fillWidth?: boolean;
 }) {
 	return (
-		<aside className="flex h-full w-[270px] flex-shrink-0 flex-col overflow-hidden rounded-2xl border border-app-line bg-app">
+		<aside
+			className={
+				fillWidth
+					? "flex h-full w-full flex-col overflow-hidden bg-sidebar"
+					: "flex h-full w-[270px] shrink-0 flex-col overflow-hidden rounded-2xl border border-app-line bg-app"
+			}
+		>
 			<div className="flex h-[60px] flex-col justify-center gap-0.5 border-b border-app-line px-3 pt-1">
 				<h2 className="text-xs font-medium text-ink">Workbench</h2>
 				<div className="text-tiny text-ink-faint">
@@ -142,7 +150,7 @@ function WorkerRow({
 		>
 			<span
 				className={cx(
-					"h-2 w-2 flex-shrink-0 rounded-full",
+					"h-2 w-2 shrink-0 rounded-full",
 					isRunning && "animate-pulse bg-green-500",
 					isIdle && "bg-yellow-500",
 					!isRunning && !isIdle && "bg-ink-faint/40",
diff --git a/interface/src/components/workbench/WorkerColumn.tsx b/interface/src/components/workbench/WorkerColumn.tsx
index 78c64def4..05d8c4dcd 100644
--- a/interface/src/components/workbench/WorkerColumn.tsx
+++ b/interface/src/components/workbench/WorkerColumn.tsx
@@ -14,14 +14,14 @@ export function WorkerColumn({worker}: {worker: OrchestrationWorker}) {
 	const taskText = worker.task.replace(/^\[opencode\]\s*/i, "");
 
 	return (
-		<div className="flex h-full w-[560px] flex-shrink-0 flex-col overflow-hidden rounded-2xl border border-app-line bg-app-box">
+		<div className="flex h-full w-full shrink-0 snap-center flex-col overflow-hidden rounded-2xl border border-app-line bg-app-box md:w-[560px] md:snap-none">
 			{/* Column header */}
 			<div className="flex flex-col gap-1 h-[60px] border-b border-app-line px-3 py-2">
 				<div className="flex items-center gap-2">
 					{/* Status dot */}
 					<span
 						className={cx(
-							"h-2 w-2 bg-ink-faint flex-shrink-0 rounded-full",
+							"h-2 w-2 bg-ink-faint shrink-0 rounded-full",
 							isRunning && "animate-pulse bg-green-500",
 							isIdle && "bg-yellow-500",
 							!isRunning && !isIdle && "bg-ink-faint",
@@ -90,7 +90,7 @@ function CancelButton({
 					.catch(console.warn)
 					.finally(() => setCancelling(false));
 			}}
-			className="flex-shrink-0 rounded-md border border-app-line px-1.5 py-0.5 text-tiny font-medium text-ink-dull transition-colors hover:border-red-500/50 hover:text-red-400 disabled:opacity-50"
+			className="shrink-0 rounded-md border border-app-line px-1.5 py-0.5 text-tiny font-medium text-ink-dull transition-colors hover:border-red-500/50 hover:text-red-400 disabled:opacity-50"
 			title="Cancel worker"
 		>
 			{cancelling ? "..." : "Cancel"}
diff --git a/interface/src/hooks/useMediaQuery.ts b/interface/src/hooks/useMediaQuery.ts
new file mode 100644
index 000000000..2411c6428
--- /dev/null
+++ b/interface/src/hooks/useMediaQuery.ts
@@ -0,0 +1,25 @@
+import {useEffect, useState} from "react";
+
+export function useMediaQuery(query: string): boolean {
+	const getMatch = () => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia(query).matches;
+	};
+
+	const [matches, setMatches] = useState<boolean>(getMatch);
+
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mql = window.matchMedia(query);
+		const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+		setMatches(mql.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+}
+
+export function useIsMobile(): boolean {
+	return useMediaQuery("(max-width: 767px)");
+}
diff --git a/interface/src/router.tsx b/interface/src/router.tsx
index 2d2422e6c..2ffe26922 100644
--- a/interface/src/router.tsx
+++ b/interface/src/router.tsx
@@ -1,3 +1,4 @@
+import {useEffect, useState} from "react";
 import {
 	createRouter,
 	createRootRoute,
@@ -7,7 +8,10 @@ import {
 } from "@tanstack/react-router";
 import {BASE_PATH} from "@/api/client";
 import {ConnectionBanner} from "@/components/ConnectionBanner";
+import {MobileTopBar} from "@/components/MobileTopBar";
 import {Sidebar} from "@/components/Sidebar";
+import {useIsMobile} from "@/hooks/useMediaQuery";
+import {Drawer} from "@/ui/Drawer";
 import {Overview} from "@/routes/Overview";
 import {Dashboard} from "@/routes/Dashboard";
 import {AgentDetail} from "@/routes/AgentDetail";
@@ -31,18 +35,58 @@ import {useLiveContext} from "@/hooks/useLiveContext";
 
 // ── Root layout ──────────────────────────────────────────────────────────
 
+function routeTitle(pathname: string): string {
+	if (pathname === "/" || pathname === "") return "Overview";
+	if (pathname.startsWith("/dashboard")) return "Dashboard";
+	if (pathname.startsWith("/workbench")) return "Workbench";
+	if (pathname.startsWith("/tasks")) return "Tasks";
+	if (pathname.startsWith("/wiki")) return "Wiki";
+	if (pathname.startsWith("/settings")) return "Settings";
+	if (pathname.startsWith("/projects")) return "Projects";
+	if (pathname.startsWith("/logs")) return "Logs";
+	const agentMatch = pathname.match(/^\/agents\/[^/]+(?:\/([^/]+))?/);
+	if (agentMatch) {
+		const sub = agentMatch[1];
+		if (!sub) return "Agent";
+		return sub.charAt(0).toUpperCase() + sub.slice(1);
+	}
+	return "";
+}
+
 function RootLayout() {
 	const {liveStates, connectionState, hasData} = useLiveContext();
 	const location = useLocation();
-	const bare = location.pathname.startsWith("/workbench") || location.pathname.startsWith("/dashboard");
+	const isMobile = useIsMobile();
+	const [drawerOpen, setDrawerOpen] = useState(false);
+
+	const bare =
+		location.pathname.startsWith("/workbench") ||
+		location.pathname.startsWith("/dashboard");
+
+	// Auto-close drawer on route change.
+	useEffect(() => {
+		setDrawerOpen(false);
+	}, [location.pathname]);
 
 	return (
 		<div className="flex h-screen flex-col overflow-hidden bg-sidebar">
 			<ConnectionBanner state={connectionState} hasData={hasData} />
+			{isMobile && (
+				<MobileTopBar
+					title={routeTitle(location.pathname)}
+					onMenu={() => setDrawerOpen(true)}
+				/>
+			)}
 			<div className="flex min-h-0 flex-1">
-				<Sidebar liveStates={liveStates} />
-				<div className="flex min-w-0 flex-1 flex-col overflow-hidden py-[10px] pr-[10px]">
-					{bare ? (
+				{!isMobile && <Sidebar liveStates={liveStates} />}
+				<div
+					className={
+						isMobile
+							? "flex min-w-0 flex-1 flex-col overflow-hidden"
+							: "flex min-w-0 flex-1 flex-col overflow-hidden py-[10px] pr-[10px]"
+					}
+				>
+					{bare || isMobile ? (
 						<Outlet />
 					) : (
 						<div className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-app-line bg-app">
@@ -51,6 +95,16 @@ function RootLayout() {
 					)}
 				</div>
 			</div>
+			{isMobile && (
+				<Drawer
+					open={drawerOpen}
+					onOpenChange={setDrawerOpen}
+					side="left"
+					ariaLabel="Primary navigation"
+				>
+					<Sidebar liveStates={liveStates} fillWidth />
+				</Drawer>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentConfig.tsx b/interface/src/routes/AgentConfig.tsx
index 5f0d544f2..8ae475a79 100644
--- a/interface/src/routes/AgentConfig.tsx
+++ b/interface/src/routes/AgentConfig.tsx
@@ -19,6 +19,8 @@ import {
 	type SaveHandlerRef,
 } from "@/components/agent-config";
 import {AgentIngest} from "@/routes/AgentIngest";
+import {useIsMobile} from "@/hooks/useMediaQuery";
+import {CaretLeft} from "@phosphor-icons/react";
 
 interface AgentConfigProps {
 	agentId: string;
@@ -32,6 +34,8 @@ export function AgentConfig({agentId}: AgentConfigProps) {
 	const [dirty, setDirty] = useState(false);
 	const [saving, setSaving] = useState(false);
 	const saveHandlerRef = useRef<SaveHandlerRef>({});
+	const isMobile = useIsMobile();
+	const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(!!search.tab);
 
 	// Sync activeSection with URL search param
 	useEffect(() => {
@@ -39,12 +43,14 @@ export function AgentConfig({agentId}: AgentConfigProps) {
 			const validSections = SECTIONS.map((section) => section.id);
 			if (validSections.includes(search.tab as SectionId)) {
 				setActiveSection(search.tab as SectionId);
+				setMobileShowDetail(true);
 			}
 		}
 	}, [search.tab]);
 
 	const handleSectionChange = (section: SectionId) => {
 		setActiveSection(section);
+		setMobileShowDetail(true);
 		navigate({
 			to: "/agents/$agentId/config",
 			params: {agentId},
@@ -52,6 +58,9 @@ export function AgentConfig({agentId}: AgentConfigProps) {
 		});
 	};
 
+	const showList = !isMobile || !mobileShowDetail;
+	const showDetail = !isMobile || mobileShowDetail;
+
 	const agentsQuery = useQuery({
 		queryKey: ["agents"],
 		queryFn: () => api.agents(),
@@ -187,13 +196,31 @@ export function AgentConfig({agentId}: AgentConfigProps) {
 
 	return (
 		<div className="flex h-full relative">
-			<ConfigSidebar
-				activeSection={activeSection}
-				onSectionChange={handleSectionChange}
-				identityData={identityData}
-			/>
+			{showList && (
+				<ConfigSidebar
+					activeSection={activeSection}
+					onSectionChange={handleSectionChange}
+					identityData={identityData}
+				/>
+			)}
 
+			{showDetail && (
 			<div className="flex flex-1 flex-col overflow-hidden">
+				{isMobile && (
+					<div className="flex shrink-0 items-center gap-2 border-b border-app-line/50 px-2 py-1.5">
+						<button
+							type="button"
+							aria-label="Back to config sections"
+							onClick={() => setMobileShowDetail(false)}
+							className="flex h-11 w-11 items-center justify-center rounded-lg text-ink hover:bg-app-box/60 active:bg-app-box/80"
+						>
+							<CaretLeft size={20} weight="regular" />
+						</button>
+						<span className="truncate text-sm font-medium text-ink">
+							{active.label}
+						</span>
+					</div>
+				)}
 				{isIngestSection ? (
 					<AgentIngest agentId={agentId} />
 				) : isGeneralSection ? (
@@ -238,8 +265,9 @@ export function AgentConfig({agentId}: AgentConfigProps) {
 					/>
 				)}
 			</div>
+			)}
 
-			{!isIngestSection && (
+			{showDetail && !isIngestSection && (
 				<SaveBar
 					dirty={dirty}
 					saving={saving}
diff --git a/interface/src/routes/AgentSkills.tsx b/interface/src/routes/AgentSkills.tsx
index 1b1059c0c..88c5893a0 100644
--- a/interface/src/routes/AgentSkills.tsx
+++ b/interface/src/routes/AgentSkills.tsx
@@ -11,6 +11,9 @@ import {
 	type SelectedSkill,
 } from "@/components/skills";
 import type {SkillInfo, RegistrySkill} from "@/api/client";
+import {useIsMobile} from "@/hooks/useMediaQuery";
+import {Drawer} from "@/ui/Drawer";
+import {ListBullets} from "@phosphor-icons/react";
 
 interface AgentSkillsProps {
 	agentId: string;
@@ -78,8 +81,35 @@ export function AgentSkills({agentId}: AgentSkillsProps) {
 		setSelectedSkill({type: "registry", skill});
 	}, []);
 
+	const isMobile = useIsMobile();
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+
+	const handleViewChange = (view: SkillView) => {
+		setActiveView(view);
+		setSidebarOpen(false);
+	};
+
+	const handleMobileSelectInstalled = useCallback(
+		(skill: SkillInfo) => {
+			handleSelectInstalledSkill(skill);
+			setSidebarOpen(false);
+		},
+		[handleSelectInstalledSkill],
+	);
+
+	const skillsSidebar = (onSelect: (s: SkillInfo) => void, onView: (v: SkillView) => void) => (
+		<SkillsSidebar
+			activeView={activeView}
+			onViewChange={onView}
+			installedSkills={installedSkills}
+			selectedSkill={selectedSkill}
+			onSelectInstalledSkill={onSelect}
+			isLoading={isSkillsLoading}
+		/>
+	);
+
 	return (
-		<div className="flex h-full">
+		<div className="relative flex h-full">
 			<input
 				ref={fileInputRef}
 				type="file"
@@ -92,14 +122,7 @@ export function AgentSkills({agentId}: AgentSkillsProps) {
 				}}
 			/>
 
-			<SkillsSidebar
-				activeView={activeView}
-				onViewChange={setActiveView}
-				installedSkills={installedSkills}
-				selectedSkill={selectedSkill}
-				onSelectInstalledSkill={handleSelectInstalledSkill}
-				isLoading={isSkillsLoading}
-			/>
+			{!isMobile && skillsSidebar(handleSelectInstalledSkill, setActiveView)}
 
 			<div className="flex flex-1 flex-col overflow-hidden">
 				{activeView === "directory" && (
@@ -130,7 +153,7 @@ export function AgentSkills({agentId}: AgentSkillsProps) {
 				{activeView === "create" && <CreateSkill />}
 			</div>
 
-			{selectedSkill && (
+			{selectedSkill && !isMobile && (
 				<SkillInspector
 					agentId={agentId}
 					selected={selectedSkill}
@@ -143,6 +166,49 @@ export function AgentSkills({agentId}: AgentSkillsProps) {
 					removingName={removeMutation.variables ?? null}
 				/>
 			)}
+
+			{isMobile && (
+				<>
+					<button
+						type="button"
+						aria-label="Open skills sidebar"
+						onClick={() => setSidebarOpen(true)}
+						className="fixed bottom-4 right-4 z-40 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-box text-ink shadow-lg active:bg-app-selected"
+					>
+						<ListBullets size={20} weight="bold" />
+					</button>
+					<Drawer
+						open={sidebarOpen}
+						onOpenChange={setSidebarOpen}
+						side="left"
+						ariaLabel="Skills"
+					>
+						{skillsSidebar(handleMobileSelectInstalled, handleViewChange)}
+					</Drawer>
+					<Drawer
+						open={!!selectedSkill}
+						onOpenChange={(open) => {
+							if (!open) setSelectedSkill(null);
+						}}
+						side="right"
+						ariaLabel="Skill details"
+					>
+						{selectedSkill && (
+							<SkillInspector
+								agentId={agentId}
+								selected={selectedSkill}
+								onClose={() => setSelectedSkill(null)}
+								onInstall={(spec) => installMutation.mutate(spec)}
+								onRemove={(name) => removeMutation.mutate(name)}
+								installedNames={installedNamesSet}
+								isInstalling={installMutation.isPending}
+								isRemoving={removeMutation.isPending}
+								removingName={removeMutation.variables ?? null}
+							/>
+						)}
+					</Drawer>
+				</>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/AgentWorkers.tsx b/interface/src/routes/AgentWorkers.tsx
index 0257f3746..b1c7f5028 100644
--- a/interface/src/routes/AgentWorkers.tsx
+++ b/interface/src/routes/AgentWorkers.tsx
@@ -19,8 +19,10 @@ import {Badge, badgeVariants} from "@spacedrive/primitives";
 import {formatTimeAgo, formatDuration} from "@/lib/format";
 import {LiveDuration} from "@/components/LiveDuration";
 import {useLiveContext} from "@/hooks/useLiveContext";
+import {useIsMobile} from "@/hooks/useMediaQuery";
 import {cx} from "class-variance-authority";
 import {ProviderIcon} from "@/lib/providerIcons";
+import {CaretLeft} from "@phosphor-icons/react";
 
 import {OpenCodeEmbed, base64UrlEncode} from "@/components/OpenCodeEmbed";
 
@@ -206,77 +208,108 @@ export function AgentWorkers({agentId}: {agentId: string}) {
 		[navigate, agentId],
 	);
 
+	const isMobile = useIsMobile();
+	// On mobile, master-detail collapses to a single pane: list when no
+	// worker is selected, detail (with back button) when one is.
+	const showList = !isMobile || !selectedWorkerId;
+	const showDetail = !isMobile || !!selectedWorkerId;
+
 	return (
 		<div className="flex h-full">
 			{/* Left column: worker list */}
-			<div className="flex w-[360px] flex-shrink-0 flex-col border-r border-app-line/50">
-				{/* Toolbar */}
-				<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-4 py-2.5">
-					<input
-						type="text"
-						placeholder="Search tasks..."
-						value={search}
-						onChange={(e) => setSearch(e.target.value)}
-						className="h-7 flex-1 rounded-md border border-app-line/50 bg-app-input px-2.5 text-xs text-ink placeholder:text-ink-faint focus:border-accent/50 focus:outline-none"
-					/>
-					<span className="text-tiny text-ink-faint">{total}</span>
-				</div>
+			{showList && (
+				<div
+					className={
+						isMobile
+							? "flex w-full shrink-0 flex-col"
+							: "flex w-[360px] shrink-0 flex-col border-r border-app-line/50"
+					}
+				>
+					{/* Toolbar */}
+					<div className="flex items-center gap-3 border-b border-app-line/50 bg-app-dark-box/20 px-4 py-2.5">
+						<input
+							type="text"
+							placeholder="Search tasks..."
+							value={search}
+							onChange={(e) => setSearch(e.target.value)}
+							className="h-9 flex-1 rounded-md border border-app-line/50 bg-app-input px-2.5 text-xs text-ink placeholder:text-ink-faint focus:border-accent/50 focus:outline-none md:h-7"
+						/>
+						<span className="text-tiny text-ink-faint">{total}</span>
+					</div>
 
-				{/* Status filter pills */}
-				<div className="flex items-center gap-1.5 border-b border-app-line/50 px-4 py-2">
-					{STATUS_FILTERS.map((filter) => (
-						<button
-							key={filter}
-							onClick={() => setStatusFilter(filter)}
-							className={cx(
-								"rounded-full px-2.5 py-0.5 text-tiny font-medium transition-colors",
-								statusFilter === filter
-									? "bg-app-hover text-ink"
-									: "text-ink-faint hover:bg-app-hover hover:text-ink-dull",
-							)}
-						>
-							{filter.charAt(0).toUpperCase() + filter.slice(1)}
-						</button>
-					))}
+					{/* Status filter pills */}
+					<div className="flex items-center gap-1.5 overflow-x-auto border-b border-app-line/50 px-4 py-2">
+						{STATUS_FILTERS.map((filter) => (
+							<button
+								key={filter}
+								onClick={() => setStatusFilter(filter)}
+								className={cx(
+									"shrink-0 rounded-full px-2.5 py-0.5 text-tiny font-medium transition-colors",
+									statusFilter === filter
+										? "bg-app-hover text-ink"
+										: "text-ink-faint hover:bg-app-hover hover:text-ink-dull",
+								)}
+							>
+								{filter.charAt(0).toUpperCase() + filter.slice(1)}
+							</button>
+						))}
+					</div>
+
+					{/* Worker list */}
+					<div className="flex-1 overflow-y-auto">
+						{filteredWorkers.length === 0 ? (
+							<div className="flex h-32 items-center justify-center">
+								<p className="text-xs text-ink-faint">No workers found</p>
+							</div>
+						) : (
+							filteredWorkers.map((worker) => (
+								<WorkerCard
+									key={worker.id}
+									worker={worker}
+									liveWorker={scopedActiveWorkers[worker.id]}
+									selected={worker.id === selectedWorkerId}
+									onClick={() => selectWorker(worker.id)}
+								/>
+							))
+						)}
+					</div>
 				</div>
+			)}
 
-				{/* Worker list */}
-				<div className="flex-1 overflow-y-auto">
-					{filteredWorkers.length === 0 ? (
-						<div className="flex h-32 items-center justify-center">
-							<p className="text-xs text-ink-faint">No workers found</p>
+			{/* Right column: detail view */}
+			{showDetail && (
+				<div className="flex flex-1 flex-col overflow-hidden">
+					{isMobile && selectedWorkerId && (
+						<div className="flex shrink-0 items-center gap-2 border-b border-app-line/50 px-2 py-1.5">
+							<button
+								type="button"
+								aria-label="Back to worker list"
+								onClick={() => selectWorker(null)}
+								className="flex h-11 w-11 items-center justify-center rounded-lg text-ink hover:bg-app-box/60 active:bg-app-box/80"
+							>
+								<CaretLeft size={20} weight="regular" />
+							</button>
+							<span className="truncate text-xs text-ink-faint">
+								Back to workers
+							</span>
 						</div>
+					)}
+					{selectedWorkerId && mergedDetail ? (
+						<WorkerDetail
+							detail={mergedDetail}
+							liveWorker={scopedActiveWorkers[selectedWorkerId]}
+							liveTranscript={liveTranscripts[selectedWorkerId]}
+							liveOpenCodeParts={liveOpenCodeParts[selectedWorkerId]}
+						/>
 					) : (
-						filteredWorkers.map((worker) => (
-							<WorkerCard
-								key={worker.id}
-								worker={worker}
-								liveWorker={scopedActiveWorkers[worker.id]}
-								selected={worker.id === selectedWorkerId}
-								onClick={() => selectWorker(worker.id)}
-							/>
-						))
+						<div className="flex flex-1 items-center justify-center">
+							<p className="text-sm text-ink-faint">
+								Select a worker to view details
+							</p>
+						</div>
 					)}
 				</div>
-			</div>
-
-			{/* Right column: detail view */}
-			<div className="flex flex-1 flex-col overflow-hidden">
-				{selectedWorkerId && mergedDetail ? (
-					<WorkerDetail
-						detail={mergedDetail}
-						liveWorker={scopedActiveWorkers[selectedWorkerId]}
-						liveTranscript={liveTranscripts[selectedWorkerId]}
-						liveOpenCodeParts={liveOpenCodeParts[selectedWorkerId]}
-					/>
-				) : (
-					<div className="flex flex-1 items-center justify-center">
-						<p className="text-sm text-ink-faint">
-							Select a worker to view details
-						</p>
-					</div>
-				)}
-			</div>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/Dashboard.tsx b/interface/src/routes/Dashboard.tsx
index 214362965..51eef2ced 100644
--- a/interface/src/routes/Dashboard.tsx
+++ b/interface/src/routes/Dashboard.tsx
@@ -8,17 +8,17 @@ export function Dashboard() {
 	return (
 		<div className="flex h-full flex-col">
 			<div className="min-h-0 flex-1 overflow-y-auto">
-				<div className="py-3 pr-3 pb-12">
-					<div className="grid h-[340px] grid-cols-2 gap-5">
+				<div className="px-3 py-3 pb-12 md:pl-0 md:pr-3">
+					<div className="grid grid-cols-1 gap-3 md:h-[340px] md:grid-cols-2 md:gap-5">
 						<ActionItemsCard />
 						<TokenUsageCard />
 					</div>
 
-					<div className="mt-5">
+					<div className="mt-3 md:mt-5">
 						<ActivityCard />
 					</div>
 
-					<div className="mt-5">
+					<div className="mt-3 md:mt-5">
 						<RecentActivityCard />
 					</div>
 				</div>
diff --git a/interface/src/routes/Settings.tsx b/interface/src/routes/Settings.tsx
index 446299266..4bda71eea 100644
--- a/interface/src/routes/Settings.tsx
+++ b/interface/src/routes/Settings.tsx
@@ -13,6 +13,8 @@ import {
 } from "@spacedrive/primitives";
 import {SettingSidebarButton} from "@/ui/SettingSidebarButton";
 import {useSearch, useNavigate} from "@tanstack/react-router";
+import {useIsMobile} from "@/hooks/useMediaQuery";
+import {CaretLeft} from "@phosphor-icons/react";
 import {ModelSelect} from "@/components/ModelSelect";
 import {
 	InstanceSection,
@@ -39,18 +41,28 @@ export function Settings() {
 	const navigate = useNavigate();
 	const search = useSearch({from: "/settings"}) as {tab?: string};
 	const [activeSection, setActiveSection] = useState<SectionId>("providers");
+	const isMobile = useIsMobile();
+	// On mobile we start on the list. ?tab=… deep-links straight to detail.
+	const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(
+		!!search.tab,
+	);
 
 	// Sync activeSection with URL search param
 	useEffect(() => {
 		if (search.tab && SECTIONS.some((s) => s.id === search.tab)) {
 			setActiveSection(search.tab as SectionId);
+			setMobileShowDetail(true);
 		}
 	}, [search.tab]);
 
 	const handleSectionChange = (section: SectionId) => {
 		setActiveSection(section);
+		setMobileShowDetail(true);
 		navigate({to: "/settings", search: {tab: section}});
 	};
+
+	const showList = !isMobile || !mobileShowDetail;
+	const showDetail = !isMobile || mobileShowDetail;
 	const [editingProvider, setEditingProvider] = useState<string | null>(null);
 	const [keyInput, setKeyInput] = useState("");
 	const [modelInput, setModelInput] = useState("");
@@ -527,7 +539,14 @@ export function Settings() {
 	return (
 		<div className="flex h-full min-h-0 overflow-hidden">
 			{/* Sidebar */}
-			<div className="flex min-h-0 w-52 flex-shrink-0 flex-col overflow-y-auto border-r border-app-line/50 bg-app-dark-box/20">
+			{showList && (
+			<div
+				className={
+					isMobile
+						? "flex min-h-0 w-full shrink-0 flex-col overflow-y-auto"
+						: "flex min-h-0 w-52 shrink-0 flex-col overflow-y-auto border-r border-app-line/50 bg-app-dark-box/20"
+				}
+			>
 				<div className="px-3 pb-1 pt-4">
 					<span className="text-tiny font-medium uppercase tracking-wider text-ink-faint">
 						Settings
@@ -545,9 +564,26 @@ export function Settings() {
 					))}
 				</div>
 			</div>
+			)}
 
 			{/* Content */}
+			{showDetail && (
 			<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+				{isMobile && (
+					<div className="flex shrink-0 items-center gap-2 border-b border-app-line/50 px-2 py-1.5">
+						<button
+							type="button"
+							aria-label="Back to settings"
+							onClick={() => setMobileShowDetail(false)}
+							className="flex h-11 w-11 items-center justify-center rounded-lg text-ink hover:bg-app-box/60 active:bg-app-box/80"
+						>
+							<CaretLeft size={20} weight="regular" />
+						</button>
+						<span className="truncate text-sm font-medium text-ink">
+							{SECTIONS.find((s) => s.id === activeSection)?.label}
+						</span>
+					</div>
+				)}
 				<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
 					{activeSection === "instance" ? (
 						<InstanceSection
@@ -722,6 +758,7 @@ export function Settings() {
 					) : null}
 				</div>
 			</div>
+			)}
 
 			<DialogRoot
 				open={!!editingProvider}
diff --git a/interface/src/routes/Wiki.tsx b/interface/src/routes/Wiki.tsx
index 2cc119247..31022c450 100644
--- a/interface/src/routes/Wiki.tsx
+++ b/interface/src/routes/Wiki.tsx
@@ -10,6 +10,7 @@ import { BookBookmark, Plus, MagnifyingGlass, ArrowLeft, ClockCounterClockwise,
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
+import { useIsMobile } from "@/hooks/useMediaQuery";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -322,6 +323,9 @@ export function Wiki() {
 	const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
 	const [creating, setCreating] = useState(false);
 	const [search, setSearch] = useState("");
+	const isMobile = useIsMobile();
+	const showList = !isMobile || !selectedSlug;
+	const showDetail = !isMobile || !!selectedSlug;
 
 	const { data: listData, isLoading } = useQuery({
 		queryKey: ["wiki", "list"],
@@ -357,7 +361,14 @@ export function Wiki() {
 	return (
 		<div className="flex h-full overflow-hidden">
 			{/* Sidebar */}
-			<div className="flex w-56 shrink-0 flex-col border-r border-app-line/30">
+			{showList && (
+			<div
+				className={
+					isMobile
+						? "flex w-full shrink-0 flex-col"
+						: "flex w-56 shrink-0 flex-col border-r border-app-line/30"
+				}
+			>
 				{/* Header */}
 				<div className="flex items-center gap-2 border-b border-app-line/30 px-3 py-3">
 					<BookBookmark className="size-4 text-ink-dull" weight="bold" />
@@ -419,8 +430,10 @@ export function Wiki() {
 					)}
 				</div>
 			</div>
+			)}
 
 			{/* Content */}
+			{showDetail && (
 			<div className="flex flex-1 overflow-hidden">
 				{selectedSlug ? (
 					<PageDetail
@@ -442,6 +455,7 @@ export function Wiki() {
 					</div>
 				)}
 			</div>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/routes/Workbench.tsx b/interface/src/routes/Workbench.tsx
index a02a3302d..f63d15def 100644
--- a/interface/src/routes/Workbench.tsx
+++ b/interface/src/routes/Workbench.tsx
@@ -1,7 +1,10 @@
-import {useMemo, useEffect, useRef} from "react";
+import {useMemo, useEffect, useRef, useState} from "react";
 import {useQuery, useQueryClient, useQueries} from "@tanstack/react-query";
+import {ListBullets} from "@phosphor-icons/react";
 import {api} from "@/api/client";
 import {useLiveContext} from "@/hooks/useLiveContext";
+import {useIsMobile} from "@/hooks/useMediaQuery";
+import {Drawer} from "@/ui/Drawer";
 import {
 	EmptyState,
 	WorkbenchSidebar,
@@ -158,13 +161,23 @@ export function Workbench() {
 		[filteredWorkers, directoryIndex],
 	);
 
+	const isMobile = useIsMobile();
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+
+	const handleSelectWorker = (id: string) => {
+		scrollToWorker(id);
+		setSidebarOpen(false);
+	};
+
 	return (
-		<div className="flex h-full gap-[10px] bg-sidebar pr-[10px] pb-[10px]">
-			<WorkbenchSidebar
-				tree={tree}
-				totalCount={filteredWorkers.length}
-				onSelectWorker={scrollToWorker}
-			/>
+		<div className="relative flex h-full gap-[10px] bg-sidebar pb-[10px] md:pr-[10px]">
+			{!isMobile && (
+				<WorkbenchSidebar
+					tree={tree}
+					totalCount={filteredWorkers.length}
+					onSelectWorker={scrollToWorker}
+				/>
+			)}
 			<div className="flex min-w-0 flex-1">
 				{isLoading && filteredWorkers.length === 0 ? (
 					<div className="flex h-full flex-1 items-center justify-center">
@@ -176,14 +189,14 @@ export function Workbench() {
 				) : filteredWorkers.length === 0 ? (
 					<EmptyState />
 				) : (
-					<div className="flex flex-1 gap-[10px] overflow-x-auto">
+					<div className="flex flex-1 snap-x snap-mandatory gap-[10px] overflow-x-auto px-[10px] md:snap-none md:px-0">
 						{filteredWorkers.map((worker) => (
 							<div
 								key={worker.id}
 								ref={(el) => {
 									columnRefs.current[worker.id] = el;
 								}}
-								className="flex h-full flex-shrink-0"
+								className="flex h-full w-full shrink-0 snap-center md:w-auto md:snap-none"
 							>
 								<WorkerColumn worker={worker} />
 							</div>
@@ -191,6 +204,33 @@ export function Workbench() {
 					</div>
 				)}
 			</div>
+
+			{isMobile && filteredWorkers.length > 0 && (
+				<button
+					type="button"
+					aria-label="Workers list"
+					onClick={() => setSidebarOpen(true)}
+					className="fixed bottom-4 right-4 z-40 flex h-12 w-12 items-center justify-center rounded-full border border-app-line bg-app-box text-ink shadow-lg active:bg-app-selected"
+				>
+					<ListBullets size={20} weight="bold" />
+				</button>
+			)}
+
+			{isMobile && (
+				<Drawer
+					open={sidebarOpen}
+					onOpenChange={setSidebarOpen}
+					side="right"
+					ariaLabel="Workers"
+				>
+					<WorkbenchSidebar
+						tree={tree}
+						totalCount={filteredWorkers.length}
+						onSelectWorker={handleSelectWorker}
+						fillWidth
+					/>
+				</Drawer>
+			)}
 		</div>
 	);
 }
diff --git a/interface/src/styles.css b/interface/src/styles.css
index 35aa72c65..9fa6d762c 100644
--- a/interface/src/styles.css
+++ b/interface/src/styles.css
@@ -42,6 +42,18 @@
 	}
 }
 
+/* iOS Safari auto-zooms on focus when input font-size < 16px. Force the
+   computed font-size to 16px on small viewports without changing visual size
+   on desktop. Visual size on mobile is the trade-off: tiny inputs (text-xs /
+   text-tiny) read slightly larger on phones, which is desirable anyway. */
+@media (max-width: 767px) {
+	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
+	textarea,
+	select {
+		font-size: 16px;
+	}
+}
+
 /* Base styles */
 html,
 body {
diff --git a/interface/src/ui/Drawer.tsx b/interface/src/ui/Drawer.tsx
new file mode 100644
index 000000000..6fe50d1c2
--- /dev/null
+++ b/interface/src/ui/Drawer.tsx
@@ -0,0 +1,96 @@
+import * as RDialog from "@radix-ui/react-dialog";
+import clsx from "clsx";
+import {motion, AnimatePresence} from "framer-motion";
+import type {ReactNode} from "react";
+
+export type DrawerSide = "left" | "right" | "bottom";
+
+interface DrawerProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	side?: DrawerSide;
+	children: ReactNode;
+	className?: string;
+	ariaLabel?: string;
+}
+
+const sideAnim: Record<
+	DrawerSide,
+	{
+		initial: object;
+		animate: object;
+		exit: object;
+		positionClass: string;
+	}
+> = {
+	left: {
+		initial: {x: "-100%"},
+		animate: {x: 0},
+		exit: {x: "-100%"},
+		positionClass: "inset-y-0 left-0 h-full w-[85vw] max-w-[320px]",
+	},
+	right: {
+		initial: {x: "100%"},
+		animate: {x: 0},
+		exit: {x: "100%"},
+		positionClass: "inset-y-0 right-0 h-full w-[85vw] max-w-[320px]",
+	},
+	bottom: {
+		initial: {y: "100%"},
+		animate: {y: 0},
+		exit: {y: "100%"},
+		positionClass: "inset-x-0 bottom-0 max-h-[85vh] w-full",
+	},
+};
+
+export function Drawer({
+	open,
+	onOpenChange,
+	side = "left",
+	children,
+	className,
+	ariaLabel,
+}: DrawerProps) {
+	const cfg = sideAnim[side];
+
+	return (
+		<RDialog.Root open={open} onOpenChange={onOpenChange}>
+			<AnimatePresence>
+				{open && (
+					<RDialog.Portal forceMount>
+						<RDialog.Overlay asChild forceMount>
+							<motion.div
+								initial={{opacity: 0}}
+								animate={{opacity: 1}}
+								exit={{opacity: 0}}
+								transition={{duration: 0.18}}
+								className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+							/>
+						</RDialog.Overlay>
+						<RDialog.Content asChild forceMount aria-label={ariaLabel}>
+							<motion.div
+								initial={cfg.initial}
+								animate={cfg.animate}
+								exit={cfg.exit}
+								transition={{type: "tween", duration: 0.22, ease: "easeOut"}}
+								className={clsx(
+									"fixed z-50 flex flex-col overflow-hidden border-app-line bg-sidebar shadow-2xl",
+									cfg.positionClass,
+									side === "left" && "border-r",
+									side === "right" && "border-l",
+									side === "bottom" && "rounded-t-2xl border-t",
+									className,
+								)}
+							>
+								<RDialog.Title className="sr-only">
+									{ariaLabel || "Drawer"}
+								</RDialog.Title>
+								{children}
+							</motion.div>
+						</RDialog.Content>
+					</RDialog.Portal>
+				)}
+			</AnimatePresence>
+		</RDialog.Root>
+	);
+}