feat(space): explicit end session close flow 적용

src/features/exit-hold/index.ts

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

src/features/exit-hold/model/useHoldToConfirm.ts

@@ -1,141 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-const HOLD_DURATION_MS = 1000;
-const BOOST_DURATION_MS = 50;
-const COMPLETE_HOLD_MS = 160;
-
-const mapProgress = (elapsedMs: number) => {
-  if (elapsedMs <= 0) {
-    return 0;
-  }
-
-  if (elapsedMs <= BOOST_DURATION_MS) {
-    return 0.2 * (elapsedMs / BOOST_DURATION_MS);
-  }
-
-  const tailElapsedMs = Math.min(elapsedMs - BOOST_DURATION_MS, HOLD_DURATION_MS - BOOST_DURATION_MS);
-  return 0.2 + 0.8 * (tailElapsedMs / (HOLD_DURATION_MS - BOOST_DURATION_MS));
-};
-
-export const useHoldToConfirm = (onConfirm: () => void) => {
-  const frameRef = useRef<number | null>(null);
-  const confirmTimeoutRef = useRef<number | null>(null);
-  const completeTimeoutRef = useRef<number | null>(null);
-  const startRef = useRef<number | null>(null);
-  const confirmedRef = useRef(false);
-  const [progress, setProgress] = useState(0);
-  const [isHolding, setHolding] = useState(false);
-  const [isCompleted, setCompleted] = useState(false);
-
-  const clearFrame = () => {
-    if (frameRef.current !== null) {
-      window.cancelAnimationFrame(frameRef.current);
-      frameRef.current = null;
-    }
-  };
-
-  const clearTimers = () => {
-    if (confirmTimeoutRef.current !== null) {
-      window.clearTimeout(confirmTimeoutRef.current);
-      confirmTimeoutRef.current = null;
-    }
-
-    if (completeTimeoutRef.current !== null) {
-      window.clearTimeout(completeTimeoutRef.current);
-      completeTimeoutRef.current = null;
-    }
-  };
-
-  const reset = (withCompleted = false) => {
-    clearFrame();
-    clearTimers();
-    startRef.current = null;
-    confirmedRef.current = false;
-    setHolding(false);
-    setCompleted(withCompleted);
-    setProgress(0);
-  };
-
-  useEffect(() => {
-    return () => {
-      clearFrame();
-      clearTimers();
-    };
-  }, []);
-
-  const step = (timestamp: number) => {
-    if (startRef.current === null) {
-      return;
-    }
-
-    const elapsedMs = timestamp - startRef.current;
-    const nextProgress = mapProgress(elapsedMs);
-    const clampedProgress = Math.min(nextProgress, 1);
-    setProgress(clampedProgress);
-
-    if (clampedProgress >= 1 && !confirmedRef.current) {
-      confirmedRef.current = true;
-      if (confirmTimeoutRef.current !== null) {
-        window.clearTimeout(confirmTimeoutRef.current);
-        confirmTimeoutRef.current = null;
-      }
-      setHolding(false);
-      setCompleted(true);
-      onConfirm();
-
-      completeTimeoutRef.current = window.setTimeout(() => {
-        reset(false);
-      }, COMPLETE_HOLD_MS);
-      return;
-    }
-
-    frameRef.current = window.requestAnimationFrame(step);
-  };
-
-  const start = () => {
-    if (isHolding || isCompleted) {
-      return;
-    }
-
-    clearTimers();
-    clearFrame();
-    confirmedRef.current = false;
-    setCompleted(false);
-    setProgress(0);
-    setHolding(true);
-    startRef.current = performance.now();
-    frameRef.current = window.requestAnimationFrame(step);
-    confirmTimeoutRef.current = window.setTimeout(() => {
-      if (!confirmedRef.current) {
-        confirmedRef.current = true;
-        confirmTimeoutRef.current = null;
-        setProgress(1);
-        setHolding(false);
-        setCompleted(true);
-        onConfirm();
-
-        completeTimeoutRef.current = window.setTimeout(() => {
-          reset(false);
-        }, COMPLETE_HOLD_MS);
-      }
-    }, HOLD_DURATION_MS);
-  };
-
-  const cancel = () => {
-    if (!isHolding) {
-      return;
-    }
-
-    reset();
-  };
-
-  return {
-    progress,
-    isHolding,
-    isCompleted,
-    start,
-    cancel,
-  };
-};

src/features/exit-hold/ui/ExitHoldButton.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import type { KeyboardEvent } from 'react';
-import { copy } from '@/shared/i18n';
-import { cn } from '@/shared/lib/cn';
-import { useHoldToConfirm } from '../model/useHoldToConfirm';
-
-interface ExitHoldButtonProps {
-  variant: 'bar' | 'ring';
-  onConfirm: () => void;
-  className?: string;
-}
-
-const RING_RADIUS = 13;
-const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
-
-export const ExitHoldButton = ({
-  variant,
-  onConfirm,
-  className,
-}: ExitHoldButtonProps) => {
-  const { progress, isHolding, isCompleted, start, cancel } = useHoldToConfirm(onConfirm);
-  const ringOffset = RING_CIRCUMFERENCE * (1 - progress);
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      start();
-    }
-  };
-
-  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      cancel();
-    }
-  };
-
-  if (variant === 'ring') {
-    return (
-      <button
-        type="button"
-        aria-label={copy.space.exitHold.holdToExitAriaLabel}
-        onMouseDown={start}
-        onMouseUp={cancel}
-        onMouseLeave={cancel}
-        onTouchStart={start}
-        onTouchEnd={cancel}
-        onTouchCancel={cancel}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        onClick={(event) => event.preventDefault()}
-        className={cn(
-          'relative inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/8 text-white/74 transition hover:bg-white/14 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
-          isHolding && 'bg-white/16',
-          className,
-        )}
-      >
-        <svg
-          aria-hidden
-          className="-rotate-90 absolute inset-0 h-9 w-9"
-          viewBox="0 0 32 32"
-        >
-          <circle
-            cx="16"
-            cy="16"
-            r={RING_RADIUS}
-            fill="none"
-            stroke="rgba(255,255,255,0.2)"
-            strokeWidth="2"
-          />
-          <circle
-            cx="16"
-            cy="16"
-            r={RING_RADIUS}
-            fill="none"
-            stroke="rgba(186,230,253,0.92)"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeDasharray={RING_CIRCUMFERENCE}
-            strokeDashoffset={ringOffset}
-          />
-        </svg>
-        <span aria-hidden className="relative z-10 text-[12px]">
-          ⤫
-        </span>
-      </button>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      aria-label={copy.space.exitHold.holdToExitAriaLabel}
-      onMouseDown={start}
-      onMouseUp={cancel}
-      onMouseLeave={cancel}
-      onTouchStart={start}
-      onTouchEnd={cancel}
-      onTouchCancel={cancel}
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
-      onClick={(event) => event.preventDefault()}
-      className={cn(
-        'relative overflow-hidden rounded-lg bg-white/8 px-2.5 py-1.5 text-xs text-white/82 transition hover:bg-white/14 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
-        className,
-      )}
-    >
-      {isHolding || isCompleted ? (
-        <span
-          aria-hidden
-          className={cn(
-            'absolute inset-0 z-0 origin-left transform-gpu bg-sky-200/24 rounded-none',
-            isHolding && 'animate-[exit-hold-bar-fill_1000ms_linear_forwards]',
-          )}
-          style={isCompleted ? { transform: 'scaleX(1)' } : undefined}
-        />
-      ) : null}
-      <span className="relative z-10 inline-flex items-center gap-1">
-        <span aria-hidden>⤫</span>
-        <span>{copy.space.exitHold.exit}</span>
-      </span>
-    </button>
-  );
-};

src/features/focus-session/api/focusSessionApi.ts

@@ -3,7 +3,7 @@ import { apiClient } from '@/shared/lib/apiClient';
 
 export type FocusSessionPhase = 'focus' | 'break';
 export type FocusSessionState = 'running' | 'paused';
-export type FocusSessionCompletionType = 'goal-complete' | 'timer-complete';
+export type FocusSessionCompletionType = 'goal-complete' | 'timer-complete' | 'manual-end';
 
 interface RawFocusSession {
   id: number | string;
@@ -41,7 +41,7 @@ interface RawCurrentSessionThought {
 
 interface RawCompletionResult {
   completedSessionId: string;
-  completionSource: 'timer-complete' | 'manual-end';
+  completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
   completedGoal: string;
   focusedSeconds: number;
   thoughts: RawCurrentSessionThought[];
@@ -78,7 +78,7 @@ export interface CurrentSessionThought {
 
 export interface CompletionResult {
   completedSessionId: string;
-  completionSource: 'timer-complete' | 'manual-end';
+  completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
   completedGoal: string;
   focusedSeconds: number;
   thoughts: CurrentSessionThought[];

src/shared/i18n/messages/space.ts

@@ -133,6 +133,16 @@ export const space = {
     thoughtCount: (count: number) => `${count}개`,
     confirmButton: '확인하고 돌아가기',
   },
+  endSession: {
+    trigger: 'END SESSION',
+    eyebrow: 'END SESSION',
+    title: '세션을 여기서 마칠까요?',
+    description: '지금 종료하면 결과를 요약해서 보여준 뒤 앱 입구로 돌아갑니다.',
+    goalLabel: '현재 목표',
+    cancelButton: '계속 집중하기',
+    confirmButton: '종료하기',
+    confirmPending: '종료 중…',
+  },
   controlCenter: {
     sectionTitles: {
       background: 'Background',
@@ -267,8 +277,4 @@ export const space = {
     selectionPreferenceSaveFailed: '배경/사운드 기본 설정을 저장하지 못했어요.',
     selectionSessionSyncFailed: '현재 세션의 배경/사운드 선택을 동기화하지 못했어요.',
   },
-  exitHold: {
-    holdToExitAriaLabel: '길게 눌러 나가기',
-    exit: '나가기',
-  },
 } as const;

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { copy } from '@/shared/i18n';
+import { cn } from '@/shared/lib/cn';
+
+interface EndSessionConfirmModalProps {
+  open: boolean;
+  goal: string;
+  isPending?: boolean;
+  onClose: () => void;
+  onConfirm: () => void | Promise<void>;
+}
+
+export const EndSessionConfirmModal = ({
+  open,
+  goal,
+  isPending = false,
+  onClose,
+  onConfirm,
+}: EndSessionConfirmModalProps) => {
+  const trimmedGoal = goal.trim();
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-none fixed inset-0 z-[65] flex items-center justify-center px-4 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
+        open ? 'opacity-100' : 'opacity-0',
+      )}
+      aria-hidden={!open}
+    >
+      <div
+        className={cn(
+          'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(5,7,11,0.2)_0%,rgba(2,6,23,0.58)_48%,rgba(2,6,23,0.78)_100%)] backdrop-blur-[10px] transition-opacity duration-300',
+          open ? 'opacity-100' : 'opacity-0',
+        )}
+      />
+
+      <section
+        className={cn(
+          'relative w-full max-w-[34rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.95)_0%,rgba(8,11,17,0.93)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.52)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
+          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="end-session-confirm-title"
+      >
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(110%_90%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
+        />
+        <div className="relative px-7 py-7 md:px-9 md:py-8">
+          <header className="text-center">
+            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
+              <span className="text-[20px] text-white/88">✦</span>
+            </div>
+            <p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
+              {copy.space.endSession.eyebrow}
+            </p>
+            <h3
+              id="end-session-confirm-title"
+              className="mx-auto mt-2 max-w-[24rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
+            >
+              {copy.space.endSession.title}
+            </h3>
+            <p className="mx-auto mt-3 max-w-[26rem] text-[14px] leading-[1.7] text-white/56">
+              {copy.space.endSession.description}
+            </p>
+          </header>
+
+          {trimmedGoal ? (
+            <div className="mt-6 rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
+              <p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
+                {copy.space.endSession.goalLabel}
+              </p>
+              <p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
+                {trimmedGoal}
+              </p>
+            </div>
+          ) : null}
+
+          <footer className="mt-6 grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isPending}
+              className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {copy.space.endSession.cancelButton}
+            </button>
+            <button
+              type="button"
+              onClick={() => void onConfirm()}
+              disabled={isPending}
+              className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {isPending ? copy.space.endSession.confirmPending : copy.space.endSession.confirmButton}
+            </button>
+          </footer>
+        </div>
+      </section>
+    </div>
+  );
+};

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

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { copy } from "@/shared/i18n";
-import { copy } from '@/shared/i18n';
+import { cn } from "@/shared/lib/cn";
-import { cn } from '@/shared/lib/cn';
+import type { HudStatusLinePayload } from "@/shared/lib/useHudStatusLine";
-import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
+import { useEffect, useRef, useState } from "react";
-import { ExitHoldButton } from '@/features/exit-hold';
+import { EndSessionConfirmModal } from "./EndSessionConfirmModal";
-import { GoalCompleteSheet } from './GoalCompleteSheet';
+import { GoalCompleteSheet } from "./GoalCompleteSheet";
-import { InlineMicrostep } from './InlineMicrostep';
+import { InlineMicrostep } from "./InlineMicrostep";
-import { ThoughtOrb } from './ThoughtOrb';
+import { ThoughtOrb } from "./ThoughtOrb";
 
 interface SpaceFocusHudWidgetProps {
   sessionId?: string | null;
@@ -15,16 +15,19 @@ interface SpaceFocusHudWidgetProps {
   phaseStartedAt?: string | null;
   timeDisplay?: string;
   hasActiveSession?: boolean;
-  playbackState?: 'running' | 'paused';
+  playbackState?: "running" | "paused";
-  sessionPhase?: 'focus' | 'break' | null;
+  sessionPhase?: "focus" | "break" | null;
-  onIntentUpdate: (payload: { goal?: string; microStep?: string | null }) => boolean | Promise<boolean>;
+  onIntentUpdate: (payload: {
+    goal?: string;
+    microStep?: string | null;
+  }) => boolean | Promise<boolean>;
   onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
   onGoalFinish: () => boolean | Promise<boolean>;
   onTimerFinish: () => boolean | Promise<boolean>;
   onAddTenMinutes: () => boolean | Promise<boolean>;
   onStatusMessage: (payload: HudStatusLinePayload) => void;
   onCaptureThought: (note: string) => void;
-  onExitRequested: () => void;
+  onExitRequested: () => boolean | Promise<boolean>;
 }
 
 export const SpaceFocusHudWidget = ({
@@ -35,8 +38,8 @@ export const SpaceFocusHudWidget = ({
   phaseStartedAt = null,
   timeDisplay,
   hasActiveSession = false,
-  playbackState = 'paused',
+  playbackState = "paused",
-  sessionPhase = 'focus',
+  sessionPhase = "focus",
   onIntentUpdate,
   onGoalUpdate,
   onGoalFinish,
@@ -46,33 +49,42 @@ export const SpaceFocusHudWidget = ({
   onCaptureThought,
   onExitRequested,
 }: SpaceFocusHudWidgetProps) => {
-  const [overlay, setOverlay] = useState<'none' | 'complete' | 'timer-complete'>('none');
+  const [overlay, setOverlay] = useState<
-  const [completePreferredView, setCompletePreferredView] = useState<'choice' | 'next'>('choice');
+    "none" | "complete" | "timer-complete"
+  >("none");
+  const [completePreferredView, setCompletePreferredView] = useState<
+    "choice" | "next"
+  >("choice");
   const [isSavingIntent, setSavingIntent] = useState(false);
+  const [isEndSessionConfirmOpen, setEndSessionConfirmOpen] = useState(false);
+  const [isEndingSession, setEndingSession] = useState(false);
 
   const visibleRef = useRef(false);
   const timerPromptSignatureRef = useRef<string | null>(null);
-  const normalizedGoal = goal.trim().length > 0 ? goal.trim() : copy.space.focusHud.goalFallback;
+  const normalizedGoal =
-  const isCompleteOpen = overlay === 'complete' || overlay === 'timer-complete';
+    goal.trim().length > 0 ? goal.trim() : copy.space.focusHud.goalFallback;
+  const isCompleteOpen = overlay === "complete" || overlay === "timer-complete";
   const timerCompletionSignature =
     hasActiveSession &&
-    sessionPhase === 'focus' &&
+    sessionPhase === "focus" &&
     remainingSeconds === 0 &&
     phaseStartedAt
-      ? `${sessionId ?? 'session'}:${phaseStartedAt}`
+      ? `${sessionId ?? "session"}:${phaseStartedAt}`
       : null;
 
   useEffect(() => {
     if (!hasActiveSession) {
-      setOverlay('none');
+      setOverlay("none");
       setSavingIntent(false);
-      setCompletePreferredView('choice');
+      setCompletePreferredView("choice");
+      setEndSessionConfirmOpen(false);
+      setEndingSession(false);
       timerPromptSignatureRef.current = null;
     }
   }, [hasActiveSession]);
 
   useEffect(() => {
-    if (!visibleRef.current && playbackState === 'running') {
+    if (!visibleRef.current && playbackState === "running") {
       onStatusMessage({
         message: copy.space.focusHud.goalToast(normalizedGoal),
       });
@@ -91,14 +103,9 @@ export const SpaceFocusHudWidget = ({
     }
 
     timerPromptSignatureRef.current = timerCompletionSignature;
-    setOverlay('timer-complete');
+    setOverlay("timer-complete");
   }, [timerCompletionSignature]);
 
-  const handleOpenCompleteSheet = (preferredView: 'choice' | 'next' = 'choice') => {
-    setCompletePreferredView(preferredView);
-    setOverlay('complete');
-  };
-
   const handleInlineMicrostepUpdate = async (nextStep: string | null) => {
     if (isSavingIntent) return false;
 
@@ -118,22 +125,50 @@ export const SpaceFocusHudWidget = ({
     }
   };
 
+  const handleEndSessionConfirm = async () => {
+    if (isEndingSession) {
+      return;
+    }
+
+    setEndingSession(true);
+
+    try {
+      const didEnd = await onExitRequested();
+
+      if (didEnd) {
+        setEndSessionConfirmOpen(false);
+      }
+    } finally {
+      setEndingSession(false);
+    }
+  };
+
   return (
     <>
-      <ThoughtOrb isFocusMode={hasActiveSession} onCaptureThought={onCaptureThought} />
+      <ThoughtOrb
-
+        isFocusMode={hasActiveSession}
+        onCaptureThought={onCaptureThought}
+      />
       <div className="pointer-events-none fixed inset-0 z-20 flex flex-col items-center justify-center pt-10 pb-32">
         {/* The Monolith (Central Hub) */}
-        <div className={cn(
+        <div
-          "pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          className={cn(
-          isCompleteOpen ? "opacity-0 scale-95 blur-md" : "opacity-100 scale-100 blur-0"
+            "pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
-        )}>
+            isCompleteOpen
+              ? "opacity-0 scale-95 blur-md"
+              : "opacity-100 scale-100 blur-0",
+          )}
+        >
           {/* Massive Unstoppable Timer */}
           <div className="relative group cursor-default">
-            <p className={cn(
+            <p
-              "text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
+              className={cn(
-              sessionPhase === 'break' ? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]" : "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]"
+                "text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
-            )}>
+                sessionPhase === "break"
+                  ? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]"
+                  : "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]",
+              )}
+            >
               {timeDisplay}
             </p>
           </div>
@@ -154,54 +189,56 @@ export const SpaceFocusHudWidget = ({
               />
             </div>
 
-            {hasActiveSession && (sessionPhase === 'focus' || sessionPhase === 'break') && (
+            {hasActiveSession &&
-              <button
+              (sessionPhase === "focus" || sessionPhase === "break") && (
-                type="button"
+                <button
-                onClick={() => handleOpenCompleteSheet('choice')}
+                  type="button"
-                className="mt-8 text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
+                  onClick={() => setEndSessionConfirmOpen(true)}
-              >
+                  className="mt-8 text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
-                End Session
+                >
-              </button>
+                  {copy.space.endSession.trigger}
-            )}
+                </button>
+              )}
           </div>
         </div>
       </div>
-
       <div className="pointer-events-none fixed inset-0 z-30">
         <GoalCompleteSheet
           open={isCompleteOpen}
           currentGoal={goal}
-          mode={overlay === 'timer-complete' ? 'timer-complete' : 'manual'}
+          mode={overlay === "timer-complete" ? "timer-complete" : "manual"}
           preferredView={completePreferredView}
-          onClose={() => setOverlay('none')}
+          onClose={() => setOverlay("none")}
           onFinish={() =>
-            overlay === 'timer-complete'
+            overlay === "timer-complete"
               ? Promise.resolve(onTimerFinish())
               : Promise.resolve(onGoalFinish())
           }
           onExtendTenMinutes={() => Promise.resolve(onAddTenMinutes())}
           onRest={() => {
-            setOverlay('none');
+            setOverlay("none");
             // The timer doesn't pause, they just rest within the flow.
           }}
           onConfirm={(nextGoal) => {
-            return overlay === 'timer-complete'
+            return overlay === "timer-complete"
               ? Promise.resolve(false)
               : Promise.resolve(onGoalUpdate(nextGoal));
           }}
         />
       </div>
+      <EndSessionConfirmModal
+        open={isEndSessionConfirmOpen}
+        goal={goal}
+        isPending={isEndingSession}
+        onClose={() => {
+          if (isEndingSession) {
+            return;
+          }
 
-      {/* Emergency Tether (Exit) */}
+          setEndSessionConfirmOpen(false);
-      <div className="fixed bottom-8 inset-x-0 z-40 flex justify-center pointer-events-none">
+        }}
-        <div className="pointer-events-auto opacity-10 hover:opacity-100 transition-opacity duration-500">
+        onConfirm={handleEndSessionConfirm}
-          <ExitHoldButton
+      />
-            variant="bar"
-            onConfirm={onExitRequested}
-            className="bg-black/20 text-white/70 hover:bg-black/40 hover:text-white border border-white/5 backdrop-blur-md px-6 py-2 rounded-full"
-          />
-        </div>
-      </div>
     </>
   );
 };

src/widgets/space-workspace/model/useSpaceWorkspaceSessionControls.ts

@@ -43,7 +43,7 @@ interface UseSpaceWorkspaceSessionControlsParams {
     microStep?: string | null;
   }) => Promise<FocusSession | null>;
   completeSession: (payload: {
-    completionType: 'goal-complete' | 'timer-complete';
+    completionType: 'goal-complete' | 'timer-complete' | 'manual-end';
     completedGoal?: string;
     focusScore?: number;
     distractionCount?: number;
@@ -57,7 +57,6 @@ interface UseSpaceWorkspaceSessionControlsParams {
     soundPresetId: string;
     focusPlanItemId?: string;
   }) => Promise<{ nextSession: FocusSession } | null>;
-  abandonSession: () => Promise<boolean>;
   setGoalInput: (value: string) => void;
   setLinkedFocusPlanItemId: (value: string | null) => void;
   setSelectedGoalId: (value: string | null) => void;
@@ -90,7 +89,6 @@ export const useSpaceWorkspaceSessionControls = ({
   updateCurrentIntent,
   completeSession,
   advanceGoal,
-  abandonSession,
   setGoalInput,
   setLinkedFocusPlanItemId,
   setSelectedGoalId,
@@ -199,21 +197,6 @@ export const useSpaceWorkspaceSessionControls = ({
     unlockPlayback,
   ]);
 
-  const handleExitRequested = useCallback(async () => {
-    const didAbandon = await abandonSession();
-
-    if (!didAbandon) {
-      pushStatusLine({
-        message: copy.space.workspace.abandonFailed,
-      });
-      return;
-    }
-
-    setPreviewPlaybackState('paused');
-    setPendingSessionEntryPoint('space-setup');
-    setWorkspaceMode('setup');
-  }, [abandonSession, pushStatusLine, setPendingSessionEntryPoint, setPreviewPlaybackState, setWorkspaceMode]);
-
   const handlePauseRequested = useCallback(async () => {
     if (!currentSession) {
       setPreviewPlaybackState('paused');
@@ -317,7 +300,7 @@ export const useSpaceWorkspaceSessionControls = ({
     }
 
     const completionResult = await completeSession({
-      completionType: 'goal-complete',
+      completionType: 'manual-end',
       completedGoal: trimmedCurrentGoal || undefined,
     });
 
@@ -344,6 +327,41 @@ export const useSpaceWorkspaceSessionControls = ({
     setWorkspaceMode,
   ]);
 
+  const handleManualEnd = useCallback(async () => {
+    const trimmedCurrentGoal = goalInput.trim();
+
+    if (!currentSession) {
+      return null;
+    }
+
+    const completionResult = await completeSession({
+      completionType: 'manual-end',
+      completedGoal: trimmedCurrentGoal || undefined,
+    });
+
+    if (!completionResult) {
+      pushStatusLine({
+        message: copy.space.workspace.abandonFailed,
+      });
+      return null;
+    }
+
+    setShowResumePrompt(false);
+    setPendingSessionEntryPoint('space-setup');
+    setPreviewPlaybackState('paused');
+    setWorkspaceMode('setup');
+    return completionResult;
+  }, [
+    completeSession,
+    currentSession,
+    goalInput,
+    pushStatusLine,
+    setPendingSessionEntryPoint,
+    setPreviewPlaybackState,
+    setShowResumePrompt,
+    setWorkspaceMode,
+  ]);
+
   const handleTimerComplete = useCallback(async () => {
     const trimmedCurrentGoal = goalInput.trim();
 
@@ -521,11 +539,11 @@ export const useSpaceWorkspaceSessionControls = ({
     openFocusMode,
     handleSetupFocusOpen,
     handleStartRequested,
-    handleExitRequested,
     handlePauseRequested,
     handleRestartRequested,
     handleIntentUpdate,
     handleGoalComplete,
+    handleManualEnd,
     handleTimerComplete,
     handleExtendCurrentPhase,
     handleGoalAdvance,

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

@@ -113,7 +113,6 @@ export const SpaceWorkspaceWidget = () => {
     updateCurrentSelection,
     completeSession,
     advanceGoal,
-    abandonSession,
   } = useFocusSessionEngine();
   const isCompletionResultOpen = pendingCompletionResult !== null;
 
@@ -186,7 +185,6 @@ export const SpaceWorkspaceWidget = () => {
     updateCurrentIntent,
     completeSession,
     advanceGoal,
-    abandonSession,
     setGoalInput: selection.setGoalInput,
     setLinkedFocusPlanItemId: selection.setLinkedFocusPlanItemId,
     setSelectedGoalId: selection.setSelectedGoalId,
@@ -410,7 +408,16 @@ export const SpaceWorkspaceWidget = () => {
               });
             });
           }}
-          onExitRequested={() => void controls.handleExitRequested()}
+          onExitRequested={async () => {
+            const completionResult = await controls.handleManualEnd();
+
+            if (completionResult) {
+              setPendingCompletionResult(completionResult);
+              setCurrentSessionThoughts([]);
+            }
+
+            return Boolean(completionResult);
+          }}
         />
       ) : null}