refactor(space): 단일 워크스페이스 Setup→Focus 전환 구조 도입

맥락:
- 허브를 경유하는 흐름 대신 /space 한 화면에서 설정과 몰입을 이어서 처리할 필요가 있었습니다.
- View 로직 분리와 파일 분할 기준을 지키면서 도크/시트 패턴을 통합해야 했습니다.

변경사항:
- /space를 Setup(기본)과 Focus(시작 후) 2상태로 운영하는 space-workspace 위젯을 추가했습니다.
- Setup Drawer를 추가해 Space 선택, Goal(필수), Sound(선택) 섹션과 하단 고정 CTA를 구성했습니다.
- Goal 입력이 비어있으면 시작하기 버튼이 비활성화되도록 UI 검증을 반영했습니다.
- Focus 상태에서 하단 HUD만 유지하고 우측 Tools Dock(🎧/📝/📨/📊/⚙) + 우측 시트 패턴을 적용했습니다.
- Notes(쓰기)와 Inbox(읽기) 패널을 분리하고 더미 토스트 동작을 연결했습니다.
- FSD 분리를 위해 features(space-select/session-goal/inbox)와 widgets(space-workspace/space-setup-drawer/space-focus-hud/space-sheet-shell)를 추가했습니다.
- 기존 space-shell은 신규 워크스페이스로 연결되는 얇은 래퍼로 정리했습니다.

검증:
- npx tsc --noEmit
- npm run build

세션-상태: /space 단일 워크스페이스에서 Setup→Focus 전환이 동작합니다.
세션-다음: 진입 경로를 /space로 통일하고 레거시 /app 라우트를 정리합니다.
세션-리스크: useSearchParams 기반 초기값은 클라이언트 최초 렌더 기준으로만 반영됩니다.

src/app/(app)/space/page.tsx

@@ -1,14 +1,14 @@
 import { Suspense } from 'react';
-import { SpaceSkeletonWidget } from '@/widgets/space-shell';
+import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
 
 export default function SpacePage() {
   return (
     <Suspense
       fallback={
-        <div className="min-h-screen bg-[radial-gradient(circle_at_15%_0%,rgba(186,230,253,0.46),transparent_48%),linear-gradient(165deg,#f8fafc_0%,#e2e8f0_56%,#f1f5f9_100%)]" />
+        <div className="min-h-screen bg-[linear-gradient(160deg,#0f172a_0%,#111827_48%,#0b1220_100%)]" />
       }
     >
-      <SpaceSkeletonWidget />
+      <SpaceWorkspaceWidget />
     </Suspense>
   );
 }

src/features/inbox/index.ts

@@ -0,0 +1 @@
+export * from './ui/InboxList';

src/features/inbox/ui/InboxList.tsx

@@ -0,0 +1,38 @@
+import type { RecentThought } from '@/entities/session';
+import { cn } from '@/shared/lib/cn';
+
+interface InboxListProps {
+  thoughts: RecentThought[];
+  className?: string;
+}
+
+export const InboxList = ({ thoughts, className }: InboxListProps) => {
+  if (thoughts.length === 0) {
+    return (
+      <p
+        className={cn(
+          'rounded-2xl border border-white/14 bg-white/6 px-3.5 py-3 text-sm leading-relaxed text-white/74',
+          className,
+        )}
+      >
+        지금은 비어 있어요. 집중 중 떠오른 생각을 여기로 주차할 수 있어요.
+      </p>
+    );
+  }
+
+  return (
+    <ul className={cn('space-y-2.5', className)}>
+      {thoughts.slice(0, 10).map((thought) => (
+        <li
+          key={thought.id}
+          className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3"
+        >
+          <p className="text-sm leading-relaxed text-white/88">{thought.text}</p>
+          <p className="mt-1.5 text-[11px] text-white/54">
+            {thought.roomName} · {thought.capturedAt}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+};

src/features/session-goal/index.ts

@@ -0,0 +1 @@
+export * from './ui/SessionGoalField';

src/features/session-goal/ui/SessionGoalField.tsx

@@ -0,0 +1,57 @@
+import type { GoalChip } from '@/entities/session';
+import { cn } from '@/shared/lib/cn';
+
+interface SessionGoalFieldProps {
+  goalInput: string;
+  selectedGoalId: string | null;
+  goalChips: GoalChip[];
+  onGoalChange: (value: string) => void;
+  onGoalChipSelect: (chip: GoalChip) => void;
+}
+
+export const SessionGoalField = ({
+  goalInput,
+  selectedGoalId,
+  goalChips,
+  onGoalChange,
+  onGoalChipSelect,
+}: SessionGoalFieldProps) => {
+  return (
+    <div className="space-y-2.5">
+      <div className="space-y-1.5">
+        <label htmlFor="space-goal-input" className="text-xs font-medium text-white/86">
+          목표 <span className="text-sky-100">(필수)</span>
+        </label>
+        <input
+          id="space-goal-input"
+          value={goalInput}
+          onChange={(event) => onGoalChange(event.target.value)}
+          placeholder="예: 계약서 1페이지 정리"
+          className="h-11 w-full rounded-xl border border-white/18 bg-slate-950/48 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/58 focus:outline-none"
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-1.5">
+        {goalChips.map((chip) => {
+          const selected = chip.id === selectedGoalId;
+
+          return (
+            <button
+              key={chip.id}
+              type="button"
+              onClick={() => onGoalChipSelect(chip)}
+              className={cn(
+                'rounded-full border px-2.5 py-1 text-xs transition-colors',
+                selected
+                  ? 'border-sky-200/56 bg-sky-200/20 text-sky-50'
+                  : 'border-white/18 bg-white/8 text-white/76 hover:bg-white/14',
+              )}
+            >
+              {chip.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

src/features/space-select/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceSelectCarousel';

src/features/space-select/ui/SpaceSelectCarousel.tsx

@@ -0,0 +1,51 @@
+import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
+import { cn } from '@/shared/lib/cn';
+
+interface SpaceSelectCarouselProps {
+  rooms: RoomTheme[];
+  selectedRoomId: string;
+  onSelect: (roomId: string) => void;
+}
+
+export const SpaceSelectCarousel = ({
+  rooms,
+  selectedRoomId,
+  onSelect,
+}: SpaceSelectCarouselProps) => {
+  return (
+    <div className="-mx-1 overflow-x-auto px-1 pb-1">
+      <div className="flex min-w-full gap-2.5">
+        {rooms.map((room) => {
+          const selected = room.id === selectedRoomId;
+
+          return (
+            <button
+              key={room.id}
+              type="button"
+              onClick={() => onSelect(room.id)}
+              className={cn(
+                'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
+                selected
+                  ? 'border-sky-200/62 shadow-[0_0_0_1px_rgba(186,230,253,0.4),0_0_18px_rgba(56,189,248,0.22)]'
+                  : 'border-white/18 hover:border-white/32',
+              )}
+              style={getRoomCardBackgroundStyle(room)}
+              aria-label={`${room.name} 선택`}
+            >
+              <span className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.12)_0%,rgba(2,6,23,0.76)_100%)]" />
+              {selected ? (
+                <span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
+                  ✓
+                </span>
+              ) : null}
+              <div className="absolute inset-x-2 bottom-2">
+                <p className="truncate text-sm font-semibold text-white">{room.name}</p>
+                <p className="truncate text-[11px] text-white/72">{room.vibeLabel}</p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

src/widgets/space-focus-hud/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceFocusHudWidget';

src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx

@@ -0,0 +1,14 @@
+import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
+
+interface SpaceFocusHudWidgetProps {
+  goal: string;
+  visible: boolean;
+}
+
+export const SpaceFocusHudWidget = ({ goal, visible }: SpaceFocusHudWidgetProps) => {
+  if (!visible) {
+    return null;
+  }
+
+  return <SpaceTimerHudWidget timerLabel="25/5" goal={goal} isImmersionMode className="pr-[4.2rem]" />;
+};

src/widgets/space-setup-drawer/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceSetupDrawerWidget';

src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx

@@ -0,0 +1,123 @@
+import type { RoomTheme } from '@/entities/room';
+import type { GoalChip, SoundPreset } from '@/entities/session';
+import { SpaceSelectCarousel } from '@/features/space-select';
+import { SessionGoalField } from '@/features/session-goal';
+import { Button } from '@/shared/ui';
+import { cn } from '@/shared/lib/cn';
+import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
+
+interface SpaceSetupDrawerWidgetProps {
+  open: boolean;
+  rooms: RoomTheme[];
+  selectedRoomId: string;
+  goalInput: string;
+  selectedGoalId: string | null;
+  selectedSoundPresetId: string;
+  goalChips: GoalChip[];
+  soundPresets: SoundPreset[];
+  canStart: boolean;
+  onClose: () => void;
+  onRoomSelect: (roomId: string) => void;
+  onGoalChange: (value: string) => void;
+  onGoalChipSelect: (chip: GoalChip) => void;
+  onSoundSelect: (soundPresetId: string) => void;
+  onStart: () => void;
+}
+
+export const SpaceSetupDrawerWidget = ({
+  open,
+  rooms,
+  selectedRoomId,
+  goalInput,
+  selectedGoalId,
+  selectedSoundPresetId,
+  goalChips,
+  soundPresets,
+  canStart,
+  onClose,
+  onRoomSelect,
+  onGoalChange,
+  onGoalChipSelect,
+  onSoundSelect,
+  onStart,
+}: SpaceSetupDrawerWidgetProps) => {
+  return (
+    <SpaceSideSheet
+      open={open}
+      title="Setup"
+      subtitle="공간 선택 → 목표(필수) → 사운드(선택)"
+      onClose={onClose}
+      widthClassName="w-[min(360px,94vw)]"
+      footer={(
+        <Button
+          type="button"
+          size="full"
+          onClick={onStart}
+          disabled={!canStart}
+          className={cn(
+            'h-11 rounded-xl !bg-sky-300/85 !text-slate-900 shadow-[0_10px_24px_rgba(125,211,252,0.26)] hover:!bg-sky-300 disabled:!bg-white/12 disabled:!text-white/42',
+          )}
+        >
+          시작하기
+        </Button>
+      )}
+    >
+      <div className="space-y-5">
+        <section className="space-y-2">
+          <div className="space-y-0.5">
+            <p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Space</p>
+            <p className="text-xs text-white/62">오늘 머물 공간을 하나 고르세요.</p>
+          </div>
+          <SpaceSelectCarousel
+            rooms={rooms}
+            selectedRoomId={selectedRoomId}
+            onSelect={onRoomSelect}
+          />
+        </section>
+
+        <section className="space-y-2">
+          <div className="space-y-0.5">
+            <p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Goal</p>
+            <p className="text-xs text-white/62">스킵 없이 한 줄 목표를 남겨주세요.</p>
+          </div>
+          <SessionGoalField
+            goalInput={goalInput}
+            selectedGoalId={selectedGoalId}
+            goalChips={goalChips}
+            onGoalChange={onGoalChange}
+            onGoalChipSelect={onGoalChipSelect}
+          />
+        </section>
+
+        <section className="space-y-2">
+          <div className="space-y-0.5">
+            <p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Sound</p>
+            <p className="text-xs text-white/62">선택 항목이에요. 필요 없으면 그대로 시작해도 됩니다.</p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            {soundPresets.map((preset) => {
+              const selected = preset.id === selectedSoundPresetId;
+
+              return (
+                <button
+                  key={preset.id}
+                  type="button"
+                  onClick={() => onSoundSelect(preset.id)}
+                  className={cn(
+                    'rounded-xl border px-3 py-2 text-left text-xs transition-colors',
+                    selected
+                      ? 'border-sky-200/64 bg-sky-200/20 text-sky-50'
+                      : 'border-white/18 bg-white/8 text-white/78 hover:bg-white/14',
+                  )}
+                >
+                  {preset.label}
+                </button>
+              );
+            })}
+          </div>
+        </section>
+      </div>
+    </SpaceSideSheet>
+  );
+};

src/widgets/space-sheet-shell/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceSideSheet';

src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+import { cn } from '@/shared/lib/cn';
+
+interface SpaceSideSheetProps {
+  open: boolean;
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+  widthClassName?: string;
+}
+
+export const SpaceSideSheet = ({
+  open,
+  title,
+  subtitle,
+  onClose,
+  children,
+  footer,
+  widthClassName,
+}: SpaceSideSheetProps) => {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [open, onClose]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="시트 닫기"
+        onClick={onClose}
+        className="fixed inset-0 z-40 bg-slate-950/22 backdrop-blur-[1px]"
+      />
+
+      <aside
+        className={cn(
+          'fixed inset-y-0 right-0 z-50 p-2 sm:p-3',
+          widthClassName ?? 'w-[min(360px,92vw)]',
+        )}
+      >
+        <div className="flex h-full flex-col overflow-hidden rounded-3xl border border-white/16 bg-slate-950/68 text-white shadow-[0_24px_70px_rgba(2,6,23,0.55)] backdrop-blur-2xl">
+          <header className="flex items-start justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5">
+            <div>
+              <h2 className="text-base font-semibold text-white">{title}</h2>
+              {subtitle ? <p className="mt-1 text-xs text-white/58">{subtitle}</p> : null}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="닫기"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/8 text-sm text-white/80 transition-colors hover:bg-white/14 hover:text-white"
+            >
+              ✕
+            </button>
+          </header>
+
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
+
+          {footer ? <footer className="border-t border-white/10 bg-white/4 px-4 py-3 sm:px-5">{footer}</footer> : null}
+        </div>
+      </aside>
+    </>
+  );
+};

src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx

@@ -1,139 +1,5 @@
-'use client';
+import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
-
-import { useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useSearchParams } from 'next/navigation';
-import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
-import { SOUND_PRESETS, useThoughtInbox, type RecentThought } from '@/entities/session';
-import { useImmersionMode } from '@/features/immersion-mode';
-import { cn } from '@/shared/lib/cn';
-import { SpaceChromeWidget } from '@/widgets/space-chrome';
-import { SpaceExitSummarySheet } from '@/widgets/space-exit-summary';
-import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
-import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
 
 export const SpaceSkeletonWidget = () => {
-  const router = useRouter();
+  return <SpaceWorkspaceWidget />;
-  const searchParams = useSearchParams();
-  const { addThought } = useThoughtInbox();
-
-  const roomId = searchParams.get('room') ?? ROOM_THEMES[0].id;
-  const goal = searchParams.get('goal') ?? '오늘은 한 조각만 집중해요';
-  const timerLabel = searchParams.get('timer') ?? '25/5';
-  const soundFromQuery = searchParams.get('sound');
-
-  const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
-  const { isImmersionMode, toggleImmersionMode, exitImmersionMode } = useImmersionMode();
-  const [isExitSummaryOpen, setExitSummaryOpen] = useState(false);
-  const [sessionThoughts, setSessionThoughts] = useState<RecentThought[]>([]);
-  const initialSoundPresetId =
-    SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
-    SOUND_PRESETS[0].id;
-
-  const handleExitRequested = () => {
-    setExitSummaryOpen(true);
-    if (isImmersionMode) {
-      exitImmersionMode();
-    }
-  };
-
-  const handleThoughtCaptured = (note: string) => {
-    addThought(note, room.name);
-    setSessionThoughts((current) => [
-      {
-        id: `session-thought-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
-        text: note,
-        roomName: room.name,
-        capturedAt: '방금 전',
-      },
-      ...current,
-    ]);
-  };
-
-  return (
-    <div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
-      <div
-        aria-hidden
-        className="absolute inset-0 w-full"
-        style={getRoomBackgroundStyle(room)}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          'absolute inset-0 w-full transition-colors',
-          isImmersionMode ? 'bg-slate-900/52' : 'bg-slate-800/40',
-        )}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          'absolute inset-0 w-full transition-opacity',
-          isImmersionMode ? 'opacity-44' : 'opacity-58',
-        )}
-        style={{
-          background:
-            'radial-gradient(68% 54% at 18% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%), radial-gradient(82% 64% at 82% 10%, rgba(186,230,253,0.24) 0%, rgba(186,230,253,0) 100%)',
-        }}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          'absolute inset-0 w-full transition-opacity',
-          isImmersionMode ? 'opacity-34' : 'opacity-24',
-        )}
-        style={{
-          backgroundImage:
-            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 2px)",
-        }}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          'absolute inset-0 w-full transition-opacity',
-          isImmersionMode ? 'opacity-60' : 'opacity-42',
-        )}
-        style={{
-          background:
-            'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.46) 100%)',
-        }}
-      />
-
-      <div className="relative z-10 flex min-h-screen flex-col pr-14">
-        <SpaceChromeWidget
-          roomName={room.name}
-          vibeLabel={room.vibeLabel}
-          isImmersionMode={isImmersionMode}
-          onExitRequested={handleExitRequested}
-        />
-
-        <main className="flex-1" />
-      </div>
-
-      <SpaceTimerHudWidget
-        timerLabel={timerLabel}
-        goal={goal}
-        isImmersionMode={isImmersionMode}
-      />
-
-      <SpaceToolsDockWidget
-        roomName={room.name}
-        activeMembers={room.activeMembers}
-        presence={room.presence}
-        initialSoundPresetId={initialSoundPresetId}
-        isImmersionMode={isImmersionMode}
-        onToggleImmersionMode={toggleImmersionMode}
-        onThoughtCaptured={handleThoughtCaptured}
-      />
-
-      <SpaceExitSummarySheet
-        isOpen={isExitSummaryOpen}
-        roomName={room.name}
-        goal={goal}
-        timerLabel={timerLabel}
-        recentThoughts={sessionThoughts.slice(0, 3)}
-        onContinue={() => setExitSummaryOpen(false)}
-        onMoveToHub={() => router.push('/app')}
-      />
-    </div>
-  );
 };

src/widgets/space-tools-dock/index.ts

@@ -1 +1,2 @@
+export * from './model/types';
 export * from './ui/SpaceToolsDockWidget';

src/widgets/space-tools-dock/model/types.ts

@@ -0,0 +1 @@
+export type SpaceToolPanelId = 'sound' | 'notes' | 'inbox' | 'stats' | 'settings';

src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx

@@ -1,205 +1,161 @@
 'use client';
 
 import { useState } from 'react';
-import type { RoomPresence } from '@/entities/room';
+import type { RecentThought } from '@/entities/session';
-import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
+import type { SoundTrackKey } from '@/features/sound-preset';
-import { useCheckIn } from '@/features/check-in';
-import { useSoundPresetSelection } from '@/features/sound-preset';
 import { useToast } from '@/shared/ui';
 import { cn } from '@/shared/lib/cn';
-import { NotesSheetWidget } from '@/widgets/notes-sheet';
+import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
-import { QuickSheetWidget } from '@/widgets/quick-sheet';
+import type { SpaceToolPanelId } from '../model/types';
-import { RoomSheetWidget } from '@/widgets/room-sheet';
+import { InboxToolPanel } from './panels/InboxToolPanel';
-import { SoundSheetWidget } from '@/widgets/sound-sheet';
+import { NotesToolPanel } from './panels/NotesToolPanel';
-import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
+import { SettingsToolPanel } from './panels/SettingsToolPanel';
+import { SoundToolPanel } from './panels/SoundToolPanel';
+import { StatsToolPanel } from './panels/StatsToolPanel';
 
 interface SpaceToolsDockWidgetProps {
-  roomName: string;
+  isFocusMode: boolean;
-  activeMembers: number;
+  thoughts: RecentThought[];
-  presence: RoomPresence;
+  thoughtCount: number;
-  initialSoundPresetId?: string;
+  selectedPresetId: string;
-  isImmersionMode: boolean;
+  onSelectPreset: (presetId: string) => void;
-  onToggleImmersionMode: () => void;
+  isMixerOpen: boolean;
-  onThoughtCaptured?: (note: string) => void;
+  onToggleMixer: () => void;
+  isMuted: boolean;
+  onMuteChange: (next: boolean) => void;
+  masterVolume: number;
+  onMasterVolumeChange: (next: number) => void;
+  trackKeys: readonly SoundTrackKey[];
+  trackLevels: Record<SoundTrackKey, number>;
+  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
+  onCaptureThought: (note: string) => void;
+  onClearInbox: () => void;
 }
 
-const TOOL_BUTTONS: Array<{
+const TOOL_ITEMS: Array<{
-  id: 'sound' | 'room' | 'notes' | 'quick';
+  id: SpaceToolPanelId;
   icon: string;
   label: string;
 }> = [
   { id: 'sound', icon: '🎧', label: 'Sound' },
-  { id: 'room', icon: '👥', label: 'Room' },
   { id: 'notes', icon: '📝', label: 'Notes' },
-  { id: 'quick', icon: '⚙️', label: 'Quick' },
+  { id: 'inbox', icon: '📨', label: 'Inbox' },
+  { id: 'stats', icon: '📊', label: 'Stats' },
+  { id: 'settings', icon: '⚙', label: 'Settings' },
 ];
 
+const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
+  sound: '사운드',
+  notes: '생각 던지기',
+  inbox: '인박스',
+  stats: '집중 요약',
+  settings: '설정',
+};
+
 export const SpaceToolsDockWidget = ({
-  roomName,
+  isFocusMode,
-  activeMembers,
+  thoughts,
-  presence,
+  thoughtCount,
-  initialSoundPresetId,
+  selectedPresetId,
-  isImmersionMode,
+  onSelectPreset,
-  onToggleImmersionMode,
+  isMixerOpen,
-  onThoughtCaptured,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+  onCaptureThought,
+  onClearInbox,
 }: SpaceToolsDockWidgetProps) => {
   const { pushToast } = useToast();
-  const { lastCheckIn, recordCheckIn } = useCheckIn();
+  const [activePanel, setActivePanel] = useState<SpaceToolPanelId | null>(null);
-  const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
-  const [isRailExpanded, setRailExpanded] = useState(false);
-  const {
-    selectedPresetId,
-    setSelectedPresetId,
-    isMixerOpen,
-    setMixerOpen,
-    isMuted,
-    setMuted,
-    masterVolume,
-    setMasterVolume,
-    trackLevels,
-    setTrackLevel,
-    trackKeys,
-  } = useSoundPresetSelection(initialSoundPresetId);
-
-  const isDockExpanded = !isImmersionMode || isRailExpanded || activePanel !== null;
-
-  const handleClosePanel = () => {
-    closePanel();
-    if (isImmersionMode) {
-      setRailExpanded(false);
-    }
-  };
-
-  const handleCheckIn = (message: string) => {
-    recordCheckIn(message);
-    pushToast({ title: `체크인: ${message}` });
-  };
-
-  const handleReaction = (emoji: string) => {
-    pushToast({ title: `리액션: ${emoji}` });
-  };
-
-  const handleToolSelect = (panel: (typeof TOOL_BUTTONS)[number]['id']) => {
-    if (isImmersionMode) {
-      setRailExpanded(true);
-    }
-    togglePanel(panel);
-  };
 
   return (
     <>
-      {activePanel ? (
+      <div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
+        <div
+          className={cn(
+            'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl transition-opacity',
+            isFocusMode && activePanel === null
+              ? 'border-white/14 bg-slate-950/34 opacity-56 hover:opacity-100'
+              : 'border-white/18 bg-slate-950/50 opacity-100',
+          )}
+        >
+          {TOOL_ITEMS.map((item) => {
+            const selected = activePanel === item.id;
+
+            return (
               <button
+                key={item.id}
                 type="button"
-          aria-label="시트 닫기"
+                title={item.label}
-          onClick={handleClosePanel}
+                aria-label={item.label}
-          className="fixed inset-0 z-30 bg-slate-950/10"
+                onClick={() => setActivePanel(item.id)}
-        />
+                className={cn(
+                  'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
+                  selected
+                    ? 'border-sky-200/64 bg-sky-200/22'
+                    : 'border-white/18 bg-white/8 hover:bg-white/14',
+                )}
+              >
+                <span aria-hidden>{item.icon}</span>
+                {item.id === 'inbox' && thoughtCount > 0 ? (
+                  <span className="absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full bg-sky-200/28 px-1 py-0.5 text-[9px] font-semibold text-sky-50">
+                    {thoughtCount > 99 ? '99+' : `${thoughtCount}`}
+                  </span>
                 ) : null}
-
-      <div
-        className="fixed right-2 top-1/2 z-50 -translate-y-1/2"
-        onMouseEnter={() => {
-          if (isImmersionMode) {
-            setRailExpanded(true);
-          }
-        }}
-        onMouseLeave={() => {
-          if (isImmersionMode && activePanel === null) {
-            setRailExpanded(false);
-          }
-        }}
-      >
-        <div
-          className={cn(
-            'flex flex-col items-center gap-2 transition-all duration-200',
-            isDockExpanded
-              ? 'w-12 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl'
-              : 'w-3 rounded-full border border-white/26 bg-slate-950/52 py-3',
-          )}
-        >
-          {isDockExpanded ? (
-            TOOL_BUTTONS.map((tool) => (
-              <button
-                key={tool.id}
-                type="button"
-                title={tool.label}
-                onClick={() => handleToolSelect(tool.id)}
-                className={cn(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
-                  activePanel === tool.id
-                    ? 'border-sky-200/75 bg-sky-300/28'
-                    : 'border-white/20 bg-white/8 hover:bg-white/15',
-                )}
-              >
-                <span aria-hidden>{tool.icon}</span>
-                <span className="sr-only">{tool.label}</span>
               </button>
-            ))
+            );
-          ) : (
+          })}
-            <button
-              type="button"
-              onClick={() => setRailExpanded(true)}
-              className="inline-flex flex-col items-center gap-1 py-1"
-            >
-              <span className="sr-only">도구 레일 펼치기</span>
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/74" />
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/58" />
-              <span aria-hidden className="h-1 w-1 rounded-full bg-white/44" />
-            </button>
-          )}
         </div>
       </div>
 
+      <SpaceSideSheet
+        open={activePanel !== null}
+        title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
+        onClose={() => setActivePanel(null)}
+      >
         {activePanel === 'sound' ? (
-        <SoundSheetWidget
+          <SoundToolPanel
-          onClose={handleClosePanel}
             selectedPresetId={selectedPresetId}
-          onSelectPreset={setSelectedPresetId}
+            onSelectPreset={onSelectPreset}
             isMixerOpen={isMixerOpen}
-          onToggleMixer={() => setMixerOpen((current) => !current)}
+            onToggleMixer={onToggleMixer}
             isMuted={isMuted}
-          onMuteChange={setMuted}
+            onMuteChange={onMuteChange}
             masterVolume={masterVolume}
-          onMasterVolumeChange={setMasterVolume}
+            onMasterVolumeChange={onMasterVolumeChange}
             trackKeys={trackKeys}
             trackLevels={trackLevels}
-          onTrackLevelChange={setTrackLevel}
+            onTrackLevelChange={onTrackLevelChange}
-        />
-      ) : null}
-
-      {activePanel === 'room' ? (
-        <RoomSheetWidget
-          roomName={roomName}
-          activeMembers={activeMembers}
-          presence={presence}
-          checkInPhrases={CHECK_IN_PHRASES}
-          reactions={REACTION_OPTIONS}
-          lastCheckIn={lastCheckIn}
-          onClose={handleClosePanel}
-          onCheckIn={handleCheckIn}
-          onReaction={(reaction) => handleReaction(reaction.emoji)}
           />
         ) : null}
 
         {activePanel === 'notes' ? (
-        <NotesSheetWidget
+          <NotesToolPanel
-          onClose={handleClosePanel}
+            onCaptureThought={(note) => {
-          onNoteAdded={(note) => {
+              onCaptureThought(note);
-            pushToast({ title: `노트 추가: ${note}` });
+              pushToast({ title: '인박스에 주차했어요 (더미)' });
-            onThoughtCaptured?.(note);
             }}
-          onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
           />
         ) : null}
 
-      {activePanel === 'quick' ? (
+        {activePanel === 'inbox' ? (
-        <QuickSheetWidget
+          <InboxToolPanel
-          onClose={handleClosePanel}
+            thoughts={thoughts}
-          isImmersionMode={isImmersionMode}
+            onClear={() => {
-          onToggleImmersionMode={onToggleImmersionMode}
+              onClearInbox();
+              pushToast({ title: '인박스를 비웠어요 (더미)' });
+            }}
           />
         ) : null}
+
+        {activePanel === 'stats' ? <StatsToolPanel /> : null}
+        {activePanel === 'settings' ? <SettingsToolPanel /> : null}
+      </SpaceSideSheet>
     </>
   );
 };

src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx

@@ -0,0 +1,25 @@
+import type { RecentThought } from '@/entities/session';
+import { InboxList } from '@/features/inbox';
+
+interface InboxToolPanelProps {
+  thoughts: RecentThought[];
+  onClear: () => void;
+}
+
+export const InboxToolPanel = ({ thoughts, onClear }: InboxToolPanelProps) => {
+  return (
+    <div className="space-y-3.5">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
+        <button
+          type="button"
+          onClick={onClear}
+          className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
+        >
+          모두 비우기
+        </button>
+      </div>
+      <InboxList thoughts={thoughts} />
+    </div>
+  );
+};

src/widgets/space-tools-dock/ui/panels/NotesToolPanel.tsx

@@ -0,0 +1,16 @@
+import { DistractionDumpNotesContent } from '@/features/distraction-dump';
+
+interface NotesToolPanelProps {
+  onCaptureThought: (note: string) => void;
+}
+
+export const NotesToolPanel = ({ onCaptureThought }: NotesToolPanelProps) => {
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-white/58">
+        집중 중 떠오른 생각을 잠깐 주차하세요. 저장 동작은 더미 토스트로만 처리됩니다.
+      </p>
+      <DistractionDumpNotesContent onNoteAdded={onCaptureThought} />
+    </div>
+  );
+};

src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
+import { cn } from '@/shared/lib/cn';
+
+export const SettingsToolPanel = () => {
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const [defaultPresetId, setDefaultPresetId] = useState<
+    (typeof DEFAULT_PRESET_OPTIONS)[number]['id']
+  >(DEFAULT_PRESET_OPTIONS[0].id);
+
+  return (
+    <div className="space-y-4">
+      <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-sm font-medium text-white">Reduce Motion</p>
+            <p className="mt-1 text-xs text-white/58">화면 전환을 조금 더 차분하게 표시합니다.</p>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={reduceMotion}
+            onClick={() => setReduceMotion((current) => !current)}
+            className={cn(
+              'inline-flex w-14 items-center rounded-full border px-1 py-1 transition-colors',
+              reduceMotion
+                ? 'border-sky-200/44 bg-sky-200/24'
+                : 'border-white/24 bg-white/9',
+            )}
+          >
+            <span
+              className={cn(
+                'h-4.5 w-4.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
+                reduceMotion ? 'translate-x-7' : 'translate-x-0',
+              )}
+            />
+          </button>
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+        <p className="text-sm font-medium text-white">기본 프리셋</p>
+        <div className="mt-2 flex flex-wrap gap-2">
+          {DEFAULT_PRESET_OPTIONS.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              onClick={() => setDefaultPresetId(preset.id)}
+              className={cn(
+                'rounded-full border px-3 py-1.5 text-xs transition-colors',
+                defaultPresetId === preset.id
+                  ? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
+                  : 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
+              )}
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};

src/widgets/space-tools-dock/ui/panels/SoundToolPanel.tsx

@@ -0,0 +1,48 @@
+import { SoundPresetControls, type SoundTrackKey } from '@/features/sound-preset';
+
+interface SoundToolPanelProps {
+  selectedPresetId: string;
+  onSelectPreset: (presetId: string) => void;
+  isMixerOpen: boolean;
+  onToggleMixer: () => void;
+  isMuted: boolean;
+  onMuteChange: (next: boolean) => void;
+  masterVolume: number;
+  onMasterVolumeChange: (next: number) => void;
+  trackKeys: readonly SoundTrackKey[];
+  trackLevels: Record<SoundTrackKey, number>;
+  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
+}
+
+export const SoundToolPanel = ({
+  selectedPresetId,
+  onSelectPreset,
+  isMixerOpen,
+  onToggleMixer,
+  isMuted,
+  onMuteChange,
+  masterVolume,
+  onMasterVolumeChange,
+  trackKeys,
+  trackLevels,
+  onTrackLevelChange,
+}: SoundToolPanelProps) => {
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-white/58">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
+      <SoundPresetControls
+        selectedPresetId={selectedPresetId}
+        onSelectPreset={onSelectPreset}
+        isMixerOpen={isMixerOpen}
+        onToggleMixer={onToggleMixer}
+        isMuted={isMuted}
+        onMuteChange={onMuteChange}
+        masterVolume={masterVolume}
+        onMasterVolumeChange={onMasterVolumeChange}
+        trackKeys={trackKeys}
+        trackLevels={trackLevels}
+        onTrackLevelChange={onTrackLevelChange}
+      />
+    </div>
+  );
+};

src/widgets/space-tools-dock/ui/panels/StatsToolPanel.tsx

@@ -0,0 +1,26 @@
+import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
+
+export const StatsToolPanel = () => {
+  const previewStats = [TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]];
+
+  return (
+    <div className="space-y-4">
+      <p className="text-xs text-white/58">오늘 흐름과 최근 7일 리듬을 가볍게 확인하세요.</p>
+
+      <section className="grid gap-2.5 sm:grid-cols-2">
+        {previewStats.map((stat) => (
+          <article key={stat.id} className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
+            <p className="text-[11px] text-white/58">{stat.label}</p>
+            <p className="mt-1 text-lg font-semibold text-white">{stat.value}</p>
+            <p className="mt-0.5 text-xs text-sky-100/78">{stat.delta}</p>
+          </article>
+        ))}
+      </section>
+
+      <section className="rounded-2xl border border-white/14 bg-white/6 p-3.5">
+        <div className="h-28 rounded-xl border border-dashed border-white/20 bg-[linear-gradient(180deg,rgba(148,163,184,0.14),rgba(148,163,184,0.02))]" />
+        <p className="mt-2 text-[11px] text-white/54">그래프 플레이스홀더</p>
+      </section>
+    </div>
+  );
+};

src/widgets/space-workspace/index.ts

@@ -0,0 +1 @@
+export * from './ui/SpaceWorkspaceWidget';

src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import {
+  getRoomBackgroundStyle,
+  getRoomById,
+  ROOM_THEMES,
+} from '@/entities/room';
+import {
+  GOAL_CHIPS,
+  SOUND_PRESETS,
+  useThoughtInbox,
+  type GoalChip,
+} from '@/entities/session';
+import { useSoundPresetSelection } from '@/features/sound-preset';
+import { cn } from '@/shared/lib/cn';
+import { useToast } from '@/shared/ui';
+import { SpaceFocusHudWidget } from '@/widgets/space-focus-hud';
+import { SpaceSetupDrawerWidget } from '@/widgets/space-setup-drawer';
+import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
+
+type WorkspaceMode = 'setup' | 'focus';
+
+const resolveInitialRoomId = (roomIdFromQuery: string | null) => {
+  if (roomIdFromQuery && getRoomById(roomIdFromQuery)) {
+    return roomIdFromQuery;
+  }
+
+  return ROOM_THEMES[0].id;
+};
+
+const resolveInitialSoundPreset = (presetIdFromQuery: string | null) => {
+  if (presetIdFromQuery && SOUND_PRESETS.some((preset) => preset.id === presetIdFromQuery)) {
+    return presetIdFromQuery;
+  }
+
+  return SOUND_PRESETS[0].id;
+};
+
+export const SpaceWorkspaceWidget = () => {
+  const searchParams = useSearchParams();
+  const { pushToast } = useToast();
+  const { thoughts, thoughtCount, addThought, clearThoughts } = useThoughtInbox();
+
+  const initialRoomId = resolveInitialRoomId(searchParams.get('room'));
+  const initialGoal = searchParams.get('goal')?.trim() ?? '';
+  const initialSoundPresetId = resolveInitialSoundPreset(searchParams.get('sound'));
+
+  const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>('setup');
+  const [isSetupDrawerOpen, setSetupDrawerOpen] = useState(true);
+  const [selectedRoomId, setSelectedRoomId] = useState(initialRoomId);
+  const [goalInput, setGoalInput] = useState(initialGoal);
+  const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
+
+  const {
+    selectedPresetId,
+    setSelectedPresetId,
+    isMixerOpen,
+    setMixerOpen,
+    isMuted,
+    setMuted,
+    masterVolume,
+    setMasterVolume,
+    trackLevels,
+    setTrackLevel,
+    trackKeys,
+  } = useSoundPresetSelection(initialSoundPresetId);
+
+  const selectedRoom = useMemo(() => {
+    return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
+  }, [selectedRoomId]);
+
+  const canStart = goalInput.trim().length > 0;
+  const isFocusMode = workspaceMode === 'focus';
+
+  const handleGoalChipSelect = (chip: GoalChip) => {
+    setSelectedGoalId(chip.id);
+    setGoalInput(chip.label);
+  };
+
+  const handleGoalChange = (value: string) => {
+    setGoalInput(value);
+
+    if (value.trim().length === 0) {
+      setSelectedGoalId(null);
+    }
+  };
+
+  const handleStart = () => {
+    if (!canStart) {
+      return;
+    }
+
+    setWorkspaceMode('focus');
+    setSetupDrawerOpen(false);
+
+    pushToast({
+      title: '집중을 시작했어요 (더미)',
+      description: `${selectedRoom.name} · ${goalInput.trim()}`,
+    });
+  };
+
+  const handleOpenSetup = () => {
+    setWorkspaceMode('setup');
+    setSetupDrawerOpen(true);
+  };
+
+  return (
+    <div className="relative min-h-screen overflow-hidden text-white">
+      <div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(selectedRoom)} />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0 transition-colors',
+          isFocusMode ? 'bg-slate-900/44' : 'bg-slate-900/36',
+        )}
+      />
+      <div
+        aria-hidden
+        className={cn(
+          'absolute inset-0 transition-opacity',
+          isFocusMode ? 'opacity-58' : 'opacity-68',
+        )}
+        style={{
+          background:
+            'radial-gradient(108% 86% at 18% 0%, rgba(148,163,184,0.32) 0%, rgba(2,6,23,0) 46%), radial-gradient(96% 80% at 88% 12%, rgba(125,211,252,0.2) 0%, rgba(2,6,23,0) 54%), linear-gradient(180deg, rgba(2,6,23,0.18) 0%, rgba(2,6,23,0.62) 100%)',
+        }}
+      />
+      <div
+        aria-hidden
+        className={cn('absolute inset-0', isFocusMode ? 'opacity-[0.16]' : 'opacity-[0.12]')}
+        style={{
+          backgroundImage:
+            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)",
+        }}
+      />
+
+      <div className="relative z-10 flex min-h-screen flex-col pr-[4.25rem]">
+        <header className="flex items-start justify-between px-4 pt-4 sm:px-6">
+          <div className="rounded-2xl border border-white/18 bg-slate-950/44 px-3.5 py-2 backdrop-blur-xl">
+            <p className="text-sm font-semibold tracking-tight text-white/92">VibeRoom</p>
+            <p className="text-[11px] text-white/62">
+              {selectedRoom.name} · {selectedRoom.vibeLabel}
+            </p>
+          </div>
+
+          {!isSetupDrawerOpen ? (
+            <button
+              type="button"
+              onClick={handleOpenSetup}
+              className="rounded-full border border-white/20 bg-slate-950/44 px-3 py-1.5 text-xs text-white/80 transition-colors hover:bg-slate-950/62 hover:text-white"
+            >
+              Setup 열기
+            </button>
+          ) : null}
+        </header>
+
+        <main className="relative flex-1">
+          {isFocusMode ? null : (
+            <div className="pointer-events-none absolute inset-x-4 top-1/2 -translate-y-1/2 sm:inset-x-6">
+              <div className="max-w-xl rounded-3xl border border-white/14 bg-slate-950/38 px-6 py-5 backdrop-blur-sm">
+                <p className="text-xs uppercase tracking-[0.18em] text-white/56">Workspace</p>
+                <h1 className="mt-2 text-2xl font-semibold tracking-tight text-white sm:text-3xl">
+                  공간을 고르고 시작하세요
+                </h1>
+                <p className="mt-2 text-sm text-white/68">
+                  오른쪽 Setup에서 목표를 입력하면 바로 몰입 화면으로 전환됩니다.
+                </p>
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+
+      <SpaceSetupDrawerWidget
+        open={isSetupDrawerOpen}
+        rooms={ROOM_THEMES}
+        selectedRoomId={selectedRoom.id}
+        goalInput={goalInput}
+        selectedGoalId={selectedGoalId}
+        selectedSoundPresetId={selectedPresetId}
+        goalChips={GOAL_CHIPS}
+        soundPresets={SOUND_PRESETS}
+        canStart={canStart}
+        onClose={() => setSetupDrawerOpen(false)}
+        onRoomSelect={setSelectedRoomId}
+        onGoalChange={handleGoalChange}
+        onGoalChipSelect={handleGoalChipSelect}
+        onSoundSelect={setSelectedPresetId}
+        onStart={handleStart}
+      />
+
+      <SpaceFocusHudWidget goal={goalInput.trim()} visible={isFocusMode} />
+
+      <SpaceToolsDockWidget
+        isFocusMode={isFocusMode}
+        thoughts={thoughts}
+        thoughtCount={thoughtCount}
+        selectedPresetId={selectedPresetId}
+        onSelectPreset={setSelectedPresetId}
+        isMixerOpen={isMixerOpen}
+        onToggleMixer={() => setMixerOpen((current) => !current)}
+        isMuted={isMuted}
+        onMuteChange={setMuted}
+        masterVolume={masterVolume}
+        onMasterVolumeChange={setMasterVolume}
+        trackKeys={trackKeys}
+        trackLevels={trackLevels}
+        onTrackLevelChange={setTrackLevel}
+        onCaptureThought={(note) => addThought(note, selectedRoom.name)}
+        onClearInbox={clearThoughts}
+      />
+    </div>
+  );
+};