/**
 * Chat page (refactored version):
 * a thin top toolbar (Session title / status / iconized stats / Agents + Files toggles /
 * details popup) + the message stream and input area (input box vertically centered when there
 * are no messages).
 * Files is no longer a mutually exclusive tab — it's a persistent, closable, resizable docked
 * panel on the right (use-files-panel.ts), and each message's trailing file summary card jumps to
 * and locates the file in the tree via onOpenFile. The subagents panel docks the same way
 * (use-subagents-panel.ts): subagent chips in the stream open it focused via onOpenSubagent,
 * and the two docked panels are mutually exclusive (coordinated here, not in the hooks).
 * Approval mode and Model/context usage live in the input area's toolbar; context is compacted
 * via the /compact slash command.
 * Draft state (/chat/new) is carried by DraftView: Agent / Workspace / approval mode / Model are
 * chosen before sending, and everything except approval mode is locked once the Session is
 * created. The Session list and the new-chat entry point live in the global sidebar.
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { ReactNode } from "react";
import { useNavigate, useParams } from "react-router";
import type {
  AgentSummary,
  ApprovalMode,
  ModelRefDto,
  ModelsResponse,
  SkillMetadataItem,
  TaskCreateRequest,
  TaskInputPart,
} from "@prismshadow/penguin-server/api";
import * as api from "../../api/endpoints";
import { ApiError } from "../../api/client";
import { S } from "../../lib/strings";
import { apiErrorText } from "../../lib/api-error";
import { useDocumentTitle } from "../../lib/use-document-title";
import {
  formatDateTime,
  humanizeDuration,
  humanizeDurationLive,
  humanizeTokens,
} from "../../lib/format";
import { latestConversation } from "../../lib/session-grouping";
import { approvalKey, isModelAuthDead } from "../../lib/omni/stream-model";
import type { StreamModel } from "../../lib/omni/stream-model";
import { bucketCostUsd, liveSessionElapsedMs } from "../../lib/omni/task-stats";
import type { TaskStatsTracker } from "../../lib/omni/task-stats";
import { useTheme } from "../../state/theme";
import { useProject } from "../../state/project";
import { useSessions } from "../../state/sessions";
import { Modal } from "../../components/ui/modal";
import { Button } from "../../components/ui/button";
import { Skeleton } from "../../components/ui/skeleton";
import { Truncated } from "../../components/ui/truncated";
import { Dropdown } from "../../components/ui/dropdown";
import { EmptyState } from "../../components/ui/empty-state";
import { NAV_ICONS } from "../../components/ui/icons";
import { toastError } from "../../components/ui/toast";
import { MessageStream } from "./message-stream";
import type { StreamRenderContext } from "./message-stream";
import { latestTaskHasSubagent, taskStartCount } from "./agent-topology";
import { ChatInput } from "./chat-input";
import { ConversationOutline, OutlineMenuButton, useOutlineRailFit } from "./conversation-outline";
import { DraftView } from "./draft-view";
import { CHAT_DEFAULTS_CHANGED_EVENT, chatDefaultsChangedDetail } from "./chat-defaults-event";
import { advanceCostStat, applyUsageFetch, createCostStatHold } from "./header-stats";
import type { CostStatDisplay } from "./header-stats";
import { buildInputHistory } from "./input-history";
import { buildOutline } from "./outline-model";
import { GoalStatusBanner } from "./goal-banner";
import { handoffMessage, modelSwitchMessage } from "./agent-handoff";
import { sameModelRef } from "../models/model-grouping";
import { providerInfo } from "@prismshadow/penguin-core/model-catalog";
import { FilesPanel } from "./files-panel";
import { useFilesPanel } from "./use-files-panel";
import type { FilesPanelState } from "./use-files-panel";
import { SubagentsPanel } from "./subagents-panel";
import {
  advancePanelTaskScope,
  createPanelTaskScope,
  useSubagentsPanel,
} from "./use-subagents-panel";
import type { SubagentsPanelState } from "./use-subagents-panel";
import { useSessionDraft } from "./use-session-draft";
import { useSessionStream } from "./use-session-stream";

const STAT_ICONS = {
  // Tokens (database / stacked cylinders)
  tokens:
    "M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zm0 0v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3",
  // Cost (circled dollar sign)
  cost: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-15v12m2.6-9.3c-.5-.8-1.5-1.2-2.6-1.2-1.5 0-2.7.8-2.7 2 0 2.7 5.4 1.3 5.4 4 0 1.2-1.2 2-2.7 2-1.2 0-2.2-.5-2.7-1.4",
  // Elapsed time (clock)
  elapsed: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-14v5l3 2",
  // Files (folder)
  folder: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
} as const;

/** Iconized stat item: a symbol + a value, with the title giving the full meaning. */
function StatChip({ icon, value, label }: { icon: string; value: ReactNode; label: string }) {
  return (
    <span
      title={label}
      className="flex shrink-0 items-center gap-1 font-mono text-xs text-gray-500 dark:text-gray-400"
    >
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.7"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        <path d={icon} />
      </svg>
      {value}
    </span>
  );
}

/**
 * Elapsed value for the header statistics: while a Task runs it ticks once per second over the
 * live cumulative (settled cross-Task total + the running Task's wall clock so far, see
 * liveSessionElapsedMs); when idle no timer runs and it renders exactly the settled total.
 * Whole seconds while ticking, decimals only on the settled value — same convention as
 * LiveDuration on running tool/thinking cards.
 */
function SessionElapsed({
  stats,
  taskOpen,
  taskStartLocalMs,
}: {
  stats: TaskStatsTracker;
  taskOpen: boolean;
  taskStartLocalMs: number;
}) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    if (!taskOpen) return;
    // Load-bearing, not redundant: `now` still holds whatever the state last saw (mount time,
    // or the final tick of a previous Task), and the first interval callback is a full second
    // away. The first live render after a Task starts must not compute from that stale clock,
    // so re-anchor immediately on entering the running state.
    setNow(Date.now());
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, [taskOpen]);
  if (!taskOpen) return <>{humanizeDuration(stats.sessionElapsedMs)}</>;
  return <>{humanizeDurationLive(liveSessionElapsedMs(stats, taskOpen, taskStartLocalMs, now))}</>;
}

/** The header's three statistics — the chip row and the info dropdown render these verbatim. */
interface HeaderStats {
  tokensText: string;
  /** Formatted session cost; null = nothing to show yet for this session (see header-stats.ts). */
  costText: string | null;
  /** Server-reported "some usage had no pricing" flag riding the shown figure (the chip's `*`). */
  costUncosted: boolean;
  elapsedNode: ReactNode;
}

/**
 * Computes the header statistics, live while a Task runs:
 *   - Tokens: session cumulative (main + subagents), already advancing per completed request;
 *   - Cost: advanceCostStat's display value — the fetched session cost plus a client-settled
 *     live estimate that carries across Task boundaries, sticky once shown (semantics
 *     documented in header-stats.ts). The live estimate applies the main Model's pricing to
 *     all of the open Task's buckets (subagents may run on different models), so it can be
 *     slightly off mid-task; usage fetches reconcile it to the server-recorded value;
 *   - Elapsed: ticking cumulative while running, settled cumulative when idle (SessionElapsed).
 */
function headerStats(model: StreamModel, cost: CostStatDisplay): HeaderStats {
  const stats = model.stats;
  return {
    tokensText: humanizeTokens(stats.sessionTotal + stats.subagentTotal),
    costText: cost.costText,
    costUncosted: cost.costUncosted,
    elapsedNode: (
      <SessionElapsed
        stats={stats}
        taskOpen={model.taskOpen}
        taskStartLocalMs={model.taskStartLocalMs}
      />
    ),
  };
}

/**
 * Route id for a draft chat (`/chat/new`): the Session hasn't been persisted yet — the user may
 * still want to change the model or configure a key first. The actual Session is only created
 * once **the first message is sent** (once created, the model is locked into its meta).
 * Real session ids always start with `session-`, so there's no collision with this constant.
 */
export const DRAFT_SESSION_ID = "new";

/**
 * Server-enforced ceiling on paths per files/stat call (STAT_MAX_PATHS in the sessions routes,
 * which 400s above it). A Task-level summary aggregates candidates across the whole Task and can
 * exceed it, so cache misses are checked in chunks of this size.
 */
const STAT_PATHS_PER_REQUEST = 100;

export function ChatPage() {
  const navigate = useNavigate();
  const params = useParams<{ sessionId?: string }>();
  const { currency } = useTheme();
  const { currentProject, currentAgent, setCurrentAgentId, reloadAgents, agents } = useProject();
  const projectId = currentProject?.projectId ?? null;
  const agentId = currentAgent?.agentId ?? null;
  const {
    sessions,
    loading: sessionsLoading,
    reload: reloadSessions,
    add: addSession,
    replace,
    setStatus,
    setTitle,
  } = useSessions();

  // Cost chip state lives in a mutable per-session hold (header-stats.ts, pure/unit-tested):
  // the fetched session cost + a client-settled live base + the last shown value, advanced once
  // per render by advanceCostStat (which also resets it on session switch). usageAppliedRef
  // marks the session whose usage fetch has applied ("initial fetch done"); usageStamp only
  // forces a repaint when a fetch resolves outside the stream's own version bumps.
  const costHoldRef = useRef(createCostStatHold());
  const usageAppliedRef = useRef<string | null>(null);
  const [, bumpUsageStamp] = useState(0);
  const [credentialGuide, setCredentialGuide] = useState(false);
  const [infoOpen, setInfoOpen] = useState(false);
  const [modeSaving, setModeSaving] = useState(false);
  const [models, setModels] = useState<ModelsResponse | null>(null);
  // Per-turn thinking level, local per-session UI state: "" = untouched — the picker then
  // displays the Agent config's level and postTask omits thinkingLevel (auto-follow: the
  // server/core fallback applies, so mid-session Agent-config edits keep taking effect).
  // Once the user picks a level it sticks for the session and rides on every subsequent
  // postTask. Never written through to the Agent config (that behavior stays draft-only).
  const [turnThinkingLevel, setTurnThinkingLevel] = useState("");

  const routeSessionId = params.sessionId ?? null;
  const filesPanelRaw = useFilesPanel(routeSessionId);
  const subagentsPanelRaw = useSubagentsPanel(routeSessionId);
  // The two docked panels are MUTUALLY EXCLUSIVE — side by side they'd crush the chat column at
  // the 1024px breakpoint (and two stacked Sheets on mobile would be worse). Exclusivity is
  // enforced here, on the panel objects every consumer receives, rather than at each call site:
  // ANY path that opens one panel (toolbar toggles, message file cards via onOpenFile, subagent
  // chips via onOpenSubagent, or a future caller) closes the other as a side effect of
  // setOpen(true). Closing never cascades. The hooks stay uncoordinated on purpose — they don't
  // know about each other; only this page, which owns both, does.
  const filesPanel: FilesPanelState = {
    ...filesPanelRaw,
    setOpen: (next: boolean) => {
      if (next) subagentsPanelRaw.setOpen(false);
      filesPanelRaw.setOpen(next);
    },
  };
  const subagentsPanel: SubagentsPanelState = {
    ...subagentsPanelRaw,
    setOpen: (next: boolean) => {
      if (next) filesPanelRaw.setOpen(false);
      subagentsPanelRaw.setOpen(next);
    },
  };
  const draft = routeSessionId === DRAFT_SESSION_ID;
  const selected = draft ? null : (sessions.find((s) => s.sessionId === routeSessionId) ?? null);
  // Currently effective model (session state, the model reference comes from the Session DTO): model selection in draft state is handled internally by DraftView.
  const activeModelRef = selected
    ? { provider: selected.provider, modelId: selected.modelId }
    : null;

  // Tab title follows the current Session (refreshes in sync once the auto-generated title arrives).
  useDocumentTitle(selected ? (selected.title ?? S.chat.defaultSessionTitle) : S.nav.chat);

  const stream = useSessionStream(
    selected?.sessionId ?? null,
    selected?.status ?? "idle",
    setTitle,
    // Sub-session registration notice (session_created is pushed over the parent session's channel): reload the list so it appears immediately.
    () => void reloadSessions(),
  );

  // Chat input area draft: caches text, both staged switch chips (`/agent` target, `/model`
  // target) and the selected skills keyed by sessionId; restored after navigating away and back
  // or a refresh, discarded on successful send.
  const {
    initial: sessionDraft,
    onTextChange: onDraftTextChange,
    onHandoffTargetChange: onDraftHandoffChange,
    onPendingModelChange: onDraftPendingModelChange,
    onSkillsChange: onDraftSkillsChange,
    discard: discardSessionDraft,
  } = useSessionDraft(selected?.sessionId ?? null);

  // The rendered transcript: backfilled older windows (frozen items, negative ids) ahead
  // of the live tail model's items. Version keys the memo — a prepend bumps it.
  const allItems = useMemo(
    () =>
      stream.prefixItems.length > 0
        ? [...stream.prefixItems, ...stream.model.items]
        : stream.model.items,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [stream.version, routeSessionId],
  );
  // Derivations over the stream items (the model mutates in place, so `version` — its own
  // repaint signal — keys the memos; the session id covers a switch racing a same-valued
  // version): the composer's ↑/↓ recall list and the left outline's entries. Both read the
  // LOADED transcript (prefix included), so backfilling extends recall and the index alike.
  const inputHistory = useMemo(
    () => buildInputHistory(allItems),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [stream.version, routeSessionId],
  );
  const outline = useMemo(
    () => buildOutline(allItems),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [stream.version, routeSessionId],
  );
  // The subagents panel's model view: the live model, with backfilled windows' items and
  // nested subagent models merged in — a chip clicked on a backfilled turn must still
  // resolve its historical Task slice and child conversation. Scalar fields snapshot per
  // version, which is exactly as fresh as everything else the panel renders.
  const panelModel = useMemo<StreamModel>(
    () =>
      stream.prefixItems.length > 0 || stream.prefixSubagents.size > 0
        ? {
            ...stream.model,
            items: [...allItems],
            subagents: new Map([...stream.prefixSubagents, ...stream.model.subagents]),
          }
        : stream.model,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [stream.version, routeSessionId],
  );
  // The message stream's scroll container, exposed by MessageStream for the outline's
  // jump/scrollspy (anchors are queried inside it, never document-wide).
  const streamScrollRef = useRef<HTMLDivElement | null>(null);
  // Which outline shape fits: the gutter tick rail, or (exactly when it can't show —
  // phones without hover, and any window whose gutter a docked panel ate) the toolbar's
  // dropdown index button.
  const railFit = useOutlineRailFit(streamScrollRef, stream.version);

  // Current Agent follows the Session in the route (keeps the sidebar and stats aligned on deep
  // links / refresh). Only aligns when **the selected Session changes** — never put agentId in
  // the dependency array: otherwise, when switching from a "running session" to a new chat with
  // a different Agent, navigate and setCurrentAgentId aren't in the same batch — a transitional
  // render of "new agentId + old route (old session still selected)" would appear first, and
  // this effect would then flip the Agent back to the old session's Agent based on that,
  // causing the new chat to end up created on the old Agent.
  const selectedSessionId = selected?.sessionId ?? null;
  const selectedAgentId = selected?.agentId ?? null;
  useEffect(() => {
    if (selectedSessionId && selectedAgentId) setCurrentAgentId(selectedAgentId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedSessionId, selectedAgentId, setCurrentAgentId]);

  // A NEW chat starts with both panels closed: a panel opened for an earlier conversation must
  // not carry into a freshly created one. The draft is the reset point — it renders no panels
  // itself, so the Session created from it (first send navigates to /chat/:id) begins closed,
  // while a plain conversation switch keeps whatever the user had open. This effect owns the
  // ONLY automatic close of either panel.
  useEffect(() => {
    if (!draft) return;
    filesPanelRaw.setOpen(false);
    subagentsPanelRaw.setOpen(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [draft]);

  // Subagents panel AUTO-OPEN (the one visibility rule this panel has beyond the Files panel's):
  // the pure tracker (advancePanelTaskScope, unit-tested) opens it on the CURRENT task's first
  // live spawn, re-armed at every task boundary so a manual close is respected until the next
  // one. Boundaries themselves no longer close anything — an open panel now survives Session
  // switches and new Tasks alike, matching the Files panel.
  // The auto-open applies only when docked (a mobile Sheet sliding over the conversation
  // uninvited would be worse than staying discoverable via the row), never over an open Files
  // panel (an automatic open must not steal an explicit one — the row and the toolbar's amber
  // dot still signal), and never re-triggers an already-open panel (that would yank a pinned
  // historical graph back to the latest Task); the tracker consumes the attempt regardless.
  const panelTaskScopeRef = useRef(createPanelTaskScope());
  // Deliberately the LIVE model's items only (never the backfilled prefix): the tracker
  // reads an INCREASE as "the user started a new Task", and a scroll-up backfill growing
  // the count would spuriously re-arm the auto-open mid-conversation. The latest Task
  // always lives in the live tail window, so live-only loses nothing.
  const taskCount = taskStartCount(stream.model.items);
  const liveSpawn = stream.taskState !== "idle" && latestTaskHasSubagent(stream.model);
  useEffect(() => {
    const action = advancePanelTaskScope(panelTaskScopeRef.current, {
      sessionId: selectedSessionId,
      taskCount,
      liveSpawn,
    });
    if (
      action === "autoOpen" &&
      subagentsPanelRaw.isDocked &&
      !subagentsPanelRaw.open &&
      !filesPanelRaw.open
    ) {
      subagentsPanelRaw.setOpen(true);
    }
    // The panel objects are rebuilt every render; the tracker only acts on real transitions of
    // these three observed values.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedSessionId, taskCount, liveSpawn]);

  // Skills installed on the session's Agent (candidates for the input area's skill dropdown):
  // fetched keyed on the session's Agent; on switch, cleared first (which also clears the input
  // area's selection) before refetching; a failed fetch is silently treated as no skills.
  // Clearing preserves reference identity (an already-empty array isn't replaced), matching
  // draft-view's convention.
  const [agentSkills, setAgentSkills] = useState<SkillMetadataItem[]>([]);
  useEffect(() => {
    setAgentSkills((prev) => (prev.length > 0 ? [] : prev));
    if (!projectId || !selectedAgentId) return;
    let cancelled = false;
    api
      .getAgentSkills(projectId, selectedAgentId)
      .then((res) => {
        if (!cancelled) setAgentSkills(res.skills);
      })
      .catch(() => undefined);
    return () => {
      cancelled = true;
    };
  }, [projectId, selectedAgentId]);

  // The session Agent's configured thinking level ("" = unset/loading), via the same
  // agent-config endpoint the draft picker uses: the in-session picker DISPLAYS this while
  // the user hasn't picked a level (auto-follow — sending still omits the level until
  // touched, see turnThinkingLevel). Refetched when the session's Agent changes; a failed
  // fetch leaves it unset (the picker then shows an em dash until picked).
  const [agentThinkingLevel, setAgentThinkingLevel] = useState("");
  useEffect(() => {
    setAgentThinkingLevel("");
    if (!projectId || !selectedAgentId) return;
    let cancelled = false;
    api
      .getAgentConfig(projectId, selectedAgentId)
      .then((res) => {
        if (!cancelled) setAgentThinkingLevel(res.config.model?.thinkingLevel ?? "");
      })
      .catch(() => undefined);
    return () => {
      cancelled = true;
    };
  }, [projectId, selectedAgentId]);

  // The Session list is paged: a deep-linked Session (old bookmark, cross-page jump) may sit
  // beyond the loaded pages. Look it up directly and insert it before the auto-select effect
  // below concludes it doesn't exist; only a failed probe releases that redirect.
  const [probeFailedId, setProbeFailedId] = useState<string | null>(null);
  useEffect(() => {
    if (draft || !routeSessionId || sessionsLoading) return;
    if (sessions.some((s) => s.sessionId === routeSessionId)) return;
    let cancelled = false;
    api.getSession(routeSessionId).then(
      (res) => {
        if (!cancelled) addSession(res.session);
      },
      () => {
        if (!cancelled) setProbeFailedId(routeSessionId);
      },
    );
    return () => {
      cancelled = true;
    };
  }, [draft, routeSessionId, sessionsLoading, sessions, addSession]);

  // Auto-select the most recent conversation when the route doesn't select one (newest loaded
  // active/schedule Session — archived rows are hidden by choice and subagent Sessions belong
  // to their parent, so neither is auto-opened); if there is none, fall back to draft state
  // (instead of auto-creating one).
  useEffect(() => {
    if (sessionsLoading || draft) return;
    if (routeSessionId && sessions.some((s) => s.sessionId === routeSessionId)) return;
    // A routed id missing from the paged list isn't gone until the direct lookup fails.
    if (routeSessionId && probeFailedId !== routeSessionId) return;
    const last = latestConversation(sessions);
    navigate(last ? `/chat/${last.sessionId}` : `/chat/${DRAFT_SESSION_ID}`, { replace: true });
  }, [sessionsLoading, draft, routeSessionId, probeFailedId, sessions, navigate]);

  // Sync task_state to the sidebar list badge.
  useEffect(() => {
    if (selected) setStatus(selected.sessionId, stream.taskState);
  }, [stream.taskState, selected, setStatus]);

  // Task returns from running/compacting to idle: this turn may have spawned a sub-session or
  // auto-created a new Agent — reload the session and Agent lists so they appear in the sidebar
  // immediately (no manual refresh needed).
  const prevTaskRef = useRef(stream.taskState);
  useEffect(() => {
    const prev = prevTaskRef.current;
    prevTaskRef.current = stream.taskState;
    if (prev !== "idle" && stream.taskState === "idle") {
      void reloadSessions();
      void reloadAgents();
    }
  }, [stream.taskState, reloadSessions, reloadAgents]);

  // Positive-only existence cache for file summary cards (session-level): normalized relative
  // path -> true, or the shared in-flight lookup. Missing files aren't retained — a later Task may
  // create the same path, so its summary must re-check instead of inheriting stale false state.
  const statCacheRef = useRef(new Map<string, true | Promise<boolean>>());

  // Session switch: resets the usage-fetch marker, the file-card existence cache, and the
  // per-turn thinking level (it's per-session UI state), avoiding stale data from the previous
  // Session (Files panel state resets itself keyed on sessionId inside use-files-panel, and the
  // cost hold re-keys itself on sessionId inside advanceCostStat).
  useEffect(() => {
    usageAppliedRef.current = null;
    setTurnThinkingLevel("");
    statCacheRef.current = new Map();
  }, [routeSessionId]);

  // Batched existence check for file summaries: cache stable positive results and share in-flight
  // requests, but never retain a negative result. Each pending lookup mutates the cache only while
  // it is still the current entry, so an old request can't delete or overwrite a newer one.
  const statFiles = useCallback(
    async (paths: string[]): Promise<ReadonlySet<string>> => {
      const sessionId = selected?.sessionId ?? null;
      const cache = statCacheRef.current;
      const misses = sessionId === null ? [] : paths.filter((p) => !cache.has(p));
      if (sessionId !== null && misses.length > 0) {
        for (let i = 0; i < misses.length; i += STAT_PATHS_PER_REQUEST) {
          const chunk = misses.slice(i, i + STAT_PATHS_PER_REQUEST);
          const batch = api
            .statSessionFiles(sessionId, chunk)
            .then((res) => new Set(res.existing))
            .catch(() => null);
          for (const p of chunk) {
            const pending = batch.then((existing) => existing?.has(p) ?? false);
            cache.set(p, pending);
            void pending.then((exists) => {
              if (cache.get(p) !== pending) return;
              if (exists) cache.set(p, true);
              else cache.delete(p);
            });
          }
        }
      }
      const result = new Set<string>();
      await Promise.all(
        paths.map(async (p) => {
          const hit = cache.get(p);
          if (hit === true || (hit instanceof Promise && (await hit))) result.add(p);
        }),
      );
      return result;
    },
    [selected?.sessionId],
  );

  // Session's cumulative cost (priced by the server in real time from its usage rows): fetched
  // once when the session becomes selected — even mid-run, so a page load during an active run
  // recovers the already-accrued total instead of waiting for idle — then refreshed on every
  // return to idle (the authoritative reconcile, as before). usageAppliedRef marks the initial
  // fetch done only when a response applies, so a cancelled/failed attempt retries on the next
  // transition rather than polling. The cancelled flag doubles as a staleness guard: any
  // task-state change re-runs the effect and discards an in-flight response fetched under the
  // previous run state (whose total would misalign with the live buckets it is snapshotted
  // against — see applyUsageFetch).
  useEffect(() => {
    if (!projectId || !selected) return;
    if (usageAppliedRef.current === selected.sessionId && stream.taskState !== "idle") return;
    let cancelled = false;
    api
      .getUsage(projectId, { groupBy: "session", agentId: selected.agentId })
      .then((res) => {
        if (cancelled) return;
        usageAppliedRef.current = selected.sessionId;
        const row = res.groups.find((g) => g.key === selected.sessionId);
        applyUsageFetch(costHoldRef.current, selected.sessionId, row ?? null);
        bumpUsageStamp((n) => n + 1);
      })
      .catch(() => undefined);
    return () => {
      cancelled = true;
    };
  }, [projectId, selected, stream.taskState]);

  // Model config (context window + credential guide): fetched once per Project.
  //
  // The credential guide **only ever nags once per lifetime** (first entry after registration):
  // gated by the server prefs' credentialGuideSeen — previously it checked "default model has no
  // key" and popped up a dialog on every visit to the chat page, which was repeated nagging for
  // users who simply don't intend to configure a key / use environment variables instead.
  useEffect(() => {
    if (!projectId) return;
    let cancelled = false;
    setModels(null);
    void (async () => {
      try {
        const res = await api.getModels(projectId);
        if (cancelled) return;
        setModels(res);
        const { prefs } = await api.getPrefs();
        if (cancelled || prefs.credentialGuideSeen) return;
        const def = res.models.find((m) => sameModelRef(m, res.defaultModel));
        const missing = !res.defaultModel || !def?.credential?.apiKeyMasked;
        if (missing) setCredentialGuide(true);
        // Mark as "seen" regardless of whether the dialog actually popped up: only ever once.
        void api.putPrefs({ credentialGuideSeen: true }).catch(() => undefined);
      } catch {
        // A failed fetch doesn't affect the rest of the page.
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [projectId]);

  // Project new-chat defaults saved in this tab (project-settings dialog) with a CHANGED
  // default model: refetch the model config so the "project default" marker and a later
  // draft mount see the fresh default. models goes null first — DraftView's model
  // fallback holds off while null, so it cannot re-pin the stale default from the old
  // response in the meantime (the mounted draft's own selection comes straight from the
  // event payload, see DraftView.onDefaultsChanged); a failed refetch leaves models null,
  // the same degraded state as a failed mount fetch.
  useEffect(() => {
    if (!projectId) return;
    let cancelled = false;
    const onEvent = (e: Event) => {
      const detail = chatDefaultsChangedDetail(e, projectId);
      if (!detail || detail.defaultModel === undefined) return;
      setModels(null);
      api
        .getModels(projectId)
        .then((res) => {
          if (!cancelled) setModels(res);
        })
        .catch(() => undefined);
    };
    window.addEventListener(CHAT_DEFAULTS_CHANGED_EVENT, onEvent);
    return () => {
      cancelled = true;
      window.removeEventListener(CHAT_DEFAULTS_CHANGED_EVENT, onEvent);
    };
  }, [projectId]);

  // Self-heal: the server returned a new session_id, update the route and list (shared by tasks and compact).
  const syncHealedSessionId = useCallback(
    async (currentId: string, respondedId: string) => {
      if (respondedId === currentId) return;
      await reloadSessions();
      navigate(`/chat/${respondedId}`, { replace: true });
    },
    [reloadSessions, navigate],
  );

  const onSend = useCallback(
    async (input: TaskInputPart[], goal: { budget: number } | null): Promise<boolean> => {
      if (!selected) return false;
      try {
        // An explicitly picked per-turn thinking level rides on each task; "" (untouched)
        // sends nothing — the server/core falls back to the Agent config, so config edits
        // keep taking effect mid-session until the user pins a level.
        const res = await api.postTask(selected.sessionId, {
          input,
          ...(goal ? { goal } : {}),
          ...(turnThinkingLevel
            ? { thinkingLevel: turnThinkingLevel as TaskCreateRequest["thinkingLevel"] }
            : {}),
        });
        discardSessionDraft();
        await syncHealedSessionId(selected.sessionId, res.sessionId);
        return true;
      } catch (e) {
        // Returning false -> the input area keeps the draft, letting the user fix it and resend (the error copy includes the session model's upstream id).
        toastError(apiErrorText(e, { modelId: selected.modelId }));
        return false;
      }
    },
    [selected, turnThinkingLevel, discardSessionDraft, syncHealedSessionId],
  );

  // /model switch (handoff-style, mirroring onHandoff exactly): opens a NEW session for the
  // SAME agent on the picked model via the normal createSession API — deliberately with the
  // SOURCE session's Workspace, so files the conversation refers to stay reachable — then
  // posts a first task whose input starts with a [model_switch_from] source block (source
  // session id / its latest trace path / workspace / previous model pair) followed by the
  // user's remainder text and images. The earlier history is NOT injected into the new
  // context (some models require thinking payloads and provider fidelity byte-for-byte on
  // history replay, which cannot cross models); the model reads the source trace file itself
  // when it needs the context. Returns false on failure, keeping the draft so it can be
  // resent (the empty session that never got its first message is deleted, like handoff).
  const onSwitchModel = useCallback(
    async (ref: ModelRefDto, input: TaskInputPart[]): Promise<boolean> => {
      if (!projectId || !selected) return false;
      // The source's latest trace file path comes from the single-session GET (list rows
      // don't carry it); best-effort — a brand-new source has no trace, the block then
      // simply omits the line.
      const tracePath = await api
        .getSession(selected.sessionId)
        .then((res) => res.session.tracePath)
        .catch(() => undefined);
      const origin: TaskInputPart = {
        type: "text",
        text: modelSwitchMessage({
          sessionId: selected.sessionId,
          ...(selected.title !== undefined ? { sessionTitle: selected.title } : {}),
          ...(tracePath !== undefined ? { tracePath } : {}),
          workspace: selected.workspace,
          prevProvider: selected.provider,
          prevModelId: selected.modelId,
        }),
      };
      let createdId: string | null = null;
      try {
        const created = await api.createSession(projectId, selected.agentId, {
          provider: ref.provider,
          modelId: ref.modelId,
          workspace: selected.workspace,
          approvalMode: selected.approvalMode,
        });
        createdId = created.session.sessionId;
        const res = await api.postTask(createdId, { input: [origin, ...input] });
        addSession(created.session);
        // The remainder text has been carried into the new chat: discard the source session's input draft along with it.
        discardSessionDraft();
        navigate(`/chat/${res.sessionId}`);
        return true;
      } catch (e) {
        if (createdId) void api.deleteSession(createdId).catch(() => undefined);
        toastError(apiErrorText(e, { modelId: ref.modelId }));
        return false;
      }
    },
    [projectId, selected, addSession, discardSessionDraft, navigate],
  );

  // /agent handoff: doesn't use the current Session — creates a new chat for the picked agent
  // (approval mode carries over from the input area's current value; model/Workspace use the
  // creation defaults). The first input = a [handoff_from] source block (current agent / Session
  // / Workspace info) + the user's input and images; jumps to the new
  // chat once sent.
  // Returns false on failure, keeping the draft so it can be resent (deletes the empty Session that never got its first message sent).
  const onHandoff = useCallback(
    async (target: AgentSummary, input: TaskInputPart[]): Promise<boolean> => {
      if (!projectId || !currentAgent || !selected) return false;
      const origin: TaskInputPart = {
        type: "text",
        text: handoffMessage({
          agentId: currentAgent.agentId,
          ...(currentAgent.name !== undefined ? { agentName: currentAgent.name } : {}),
          sessionId: selected.sessionId,
          workspace: selected.workspace,
          ...(selected.title !== undefined ? { sessionTitle: selected.title } : {}),
        }),
      };
      let createdId: string | null = null;
      try {
        const created = await api.createSession(projectId, target.agentId, {
          approvalMode: selected.approvalMode,
        });
        createdId = created.session.sessionId;
        const res = await api.postTask(createdId, { input: [origin, ...input] });
        addSession(created.session);
        // The text body has been handed off into the new chat: discard the current session's input draft along with it.
        discardSessionDraft();
        navigate(`/chat/${res.sessionId}`);
        return true;
      } catch (e) {
        if (createdId) void api.deleteSession(createdId).catch(() => undefined);
        // The new chat uses the project's default model (createSession doesn't specify a model reference), so the error copy's model context follows suit.
        toastError(
          apiErrorText(e, models?.defaultModel ? { modelId: models.defaultModel.modelId } : {}),
        );
        return false;
      }
    },
    [projectId, currentAgent, selected, addSession, discardSessionDraft, navigate, models],
  );

  const onStop = useCallback(async () => {
    if (!selected) return;
    await api.postAbort(selected.sessionId).catch(() => undefined);
  }, [selected]);

  // Follow-up queue: post the full input with queueIfBusy — a busy session holds it
  // server-side and auto-sends it as an ordinary next task once this run finishes (the
  // "N queued" count arrives via task_state). Succeeds either way (queued or started
  // directly in the completion race), so the input area clears the draft on true.
  const onQueueFollowUp = useCallback(
    async (input: TaskInputPart[]): Promise<boolean> => {
      if (!selected) return false;
      try {
        const res = await api.postTask(selected.sessionId, { input, queueIfBusy: true });
        discardSessionDraft();
        await syncHealedSessionId(selected.sessionId, res.sessionId);
        return true;
      } catch (e) {
        toastError(apiErrorText(e, { modelId: selected.modelId }));
        return false;
      }
    },
    [selected, discardSessionDraft, syncHealedSessionId],
  );

  // Mid-run steering: the message is queued on the server and delivered between turns as a
  // standalone `[user_steering]` user message followed by its images (visible once they
  // arrive over SSE / from the Trace); file attachments land in the Session scratchpad and
  // ride the steering text as `[attached file: <path>]` lines, exactly as a task's do. On
  // "queued" the localStorage draft is discarded, like a successful send — without this a
  // reload resurrects the already-sent text as a draft, and re-sending it duplicates the
  // steering message (#136). "not_running" (409) means no Task is in progress anymore (race
  // with completion): the input area then falls back to its **full** normal send path —
  // skills and the whole draft included — rather than a text+images task.
  const onSteer = useCallback(
    async (
      text: string,
      images: string[] = [],
      files: { fileName: string; dataUrl: string }[] = [],
    ): Promise<"queued" | "not_running" | "failed"> => {
      if (!selected) return "failed";
      try {
        await api.postSteer(selected.sessionId, {
          text,
          ...(images.length > 0 ? { images } : {}),
          ...(files.length > 0 ? { files } : {}),
        });
        discardSessionDraft();
        return "queued";
      } catch (e) {
        if (e instanceof ApiError && e.status === 409) return "not_running";
        toastError(apiErrorText(e, { modelId: selected.modelId }));
        return "failed";
      }
    },
    [selected, discardSessionDraft],
  );

  const onApprove = useCallback(
    async (toolCallId: string, decision: "allow" | "deny", origin: string[]) => {
      if (!selected) return;
      // A decision clicked locally is marked "manual"; removed from the pending table keyed by the origin composite key.
      stream.markLocalDecision(toolCallId);
      const key = approvalKey(origin, toolCallId);
      try {
        await api.postApproval(selected.sessionId, toolCallId, { decision });
        stream.resolveApproval(key);
      } catch (e) {
        if (e instanceof ApiError && e.status === 404) stream.resolveApproval(key);
      }
    },
    [selected, stream],
  );

  const onChangeApprovalMode = useCallback(
    (mode: ApprovalMode) => {
      if (!selected || modeSaving) return;
      setModeSaving(true);
      void api
        .patchSession(selected.sessionId, { approvalMode: mode })
        .then((res) => replace(res.session))
        .catch((e: unknown) => {
          toastError(apiErrorText(e));
        })
        .finally(() => setModeSaving(false));
    },
    [selected, modeSaving, replace],
  );

  const onCompact = useCallback(async () => {
    if (!selected) return;
    try {
      // compact shares get-or-resume-or-heal with tasks: it can likewise self-heal to a new session_id.
      const res = await api.postCompact(selected.sessionId);
      await syncHealedSessionId(selected.sessionId, res.sessionId);
    } catch (e) {
      toastError(apiErrorText(e, { modelId: selected.modelId }));
    }
  }, [selected, syncHealedSessionId]);

  // "New Chat" = enter draft state: no Session is created until the first message is sent.
  const newChat = useCallback(() => {
    navigate(`/chat/${DRAFT_SESSION_ID}`);
  }, [navigate]);

  // Auth-dead notice primary CTA: the Models page is where the credential is actually fixed.
  const openModels = useCallback(() => {
    navigate("/models");
  }, [navigate]);

  // Real-time cost for this turn: converts the Task's bucketed usage using the session Model's
  // (paired reference) current pricing; null if no pricing is configured.
  const modelPricing = models?.models.find((m) => sameModelRef(m, activeModelRef))?.pricing;
  const ctx: StreamRenderContext = {
    pendingApprovals: stream.pendingApprovals,
    onApprove,
    origin: [],
    // Any non-idle state (running / compacting) counts as "not yet stopped": compaction can
    // happen mid-turn, and if only running were checked, the trailing group would flash
    // "finished running" during compaction before flipping back to "running".
    taskRunning: stream.taskState !== "idle",
    taskCost: (stats) => bucketCostUsd(stats.tokensByBucket, modelPricing),
    // Reconnect countdown controls (live waiting state only): retry-now skips the
    // remaining backoff server-side (benign no-op on timing races), give-up is the
    // ordinary session abort — the engine's abort-during-backoff path ends the turn.
    onRetryNow: () => {
      if (selected) void api.postRetryNow(selected.sessionId).catch(() => undefined);
    },
    onGiveUp: () => {
      void onStop();
    },
    onOpenFile: (path) => {
      // The file card has already normalized the text path to a Workspace-relative path
      // (toWorkspaceRelative, including stripping absolute-path prefixes and converting Windows
      // separators), so this just opens the panel and navigates to it directly (the wrapped
      // setOpen already closes the subagents panel — see the exclusivity block above).
      filesPanel.setOpen(true);
      filesPanel.browsePath(path);
    },
    onOpenSubagent: (sessionId, origin) => {
      // Chip click: open the panel focused on that child (the focus chain ends with the child's
      // own id; the wrapped setOpen closes the Files panel). focusSubagent after setOpen: the
      // open resets the Task scope to "latest", and the focus then pins it to this chip's Task.
      subagentsPanel.setOpen(true);
      subagentsPanel.focusSubagent(sessionId, [...origin, sessionId]);
    },
    workspace: selected?.workspace ?? null,
    statFiles,
  };

  // Any pending approval sitting inside a subagent (approvalKey = "originChain toolCallId";
  // main-session keys start with a space): surfaces an amber dot on the toolbar button so a
  // nested approval stays discoverable while the panel is closed.
  const anySubagentPending = [...stream.pendingApprovals.keys()].some((k) => !k.startsWith(" "));

  if (!projectId || !agentId) {
    return (
      <div className="p-6">
        <Skeleton className="h-6 w-64" />
      </div>
    );
  }

  // Header statistics (chip row + info dropdown), live while a Task runs; recomputed every
  // stream version bump, so the in-place-mutated model stats always read fresh. The cost chip
  // advances its per-session hold with this render's observation (idempotent per observation,
  // so a replayed render converges — see header-stats.ts).
  const liveTaskUsd = stream.model.taskOpen
    ? bucketCostUsd(
        {
          cacheRead: stream.model.stats.taskCacheRead,
          cacheWrite: stream.model.stats.taskCacheWrite,
          output: stream.model.stats.taskOutput,
        },
        modelPricing,
      )
    : null;
  const hs = headerStats(
    stream.model,
    advanceCostStat(costHoldRef.current, {
      sessionId: selected?.sessionId ?? null,
      taskCount,
      taskOpen: stream.model.taskOpen,
      loading: stream.loading,
      liveUsd: liveTaskUsd,
      currency,
    }),
  );
  const modelInfo = models?.models.find((m) => sameModelRef(m, activeModelRef));
  const contextWindow = modelInfo?.contextWindow;
  // Assumed supported by default: only models explicitly marked vision=false show a blocking hint when adding images.
  const vision = modelInfo?.vision !== false;
  const emptyChat =
    selected !== null && !stream.loading && !stream.error && stream.model.items.length === 0;

  // Auth-dead gate (recoverable): an auth failure is on record AND the Project's credentials
  // have not been updated since — only the model reference is fixed at creation, credentials
  // come from the current Project config, so a key update (Models page) unlocks the session
  // (live via the credentials_updated event; across reloads via this time comparison against
  // the models response's updatedAt).
  const credsUpdatedMs = models?.updatedAt !== undefined ? Date.parse(models.updatedAt) : NaN;
  const modelAuthDead = isModelAuthDead(
    stream.lastAuthFailureMs,
    Number.isFinite(credsUpdatedMs) ? credsUpdatedMs : null,
  );

  // Input area in session state: Agent / Workspace / Model are already locked by the Session
  // (the model selector isn't rendered; models feeds the locked model's read-only display and
  // the /model switch picker) — approval mode and the per-turn thinking level stay editable;
  // /model forks the conversation onto another model.
  const input = selected && (
    <ChatInput
      status={stream.taskState}
      modelAuthDead={modelAuthDead}
      onOpenModels={openModels}
      onRetryModelAuth={stream.dismissModelAuthDead}
      onNewSession={newChat}
      onSend={onSend}
      onSteer={onSteer}
      // Count of steering messages already visible in the stream: the input area keeps its
      // "queued" indicator up until this count increases (i.e. the steering message arrived).
      steeringDeliveredCount={stream.model.items.filter((i) => i.kind === "user_steering").length}
      pendingSteering={stream.pendingSteering}
      onQueueFollowUp={onQueueFollowUp}
      queuedFollowUps={stream.queuedFollowUps}
      onStop={onStop}
      onCompact={onCompact}
      modelRef={activeModelRef}
      {...(models !== null ? { models: models.models } : {})}
      {...(models?.defaultModel !== undefined ? { defaultModel: models.defaultModel } : {})}
      onSwitchModel={onSwitchModel}
      // Display value: the user's pick for this session, else the Agent config's level
      // (auto-follow while untouched; the send path uses the raw pick — see onSend).
      turnThinkingLevel={turnThinkingLevel || agentThinkingLevel}
      onChangeTurnThinkingLevel={setTurnThinkingLevel}
      {...(contextWindow !== undefined ? { contextWindow } : {})}
      contextNow={stream.model.stats.contextNow}
      contextStale={stream.model.stats.contextStale}
      vision={vision}
      approvalMode={selected.approvalMode}
      onChangeApprovalMode={onChangeApprovalMode}
      modeSaving={modeSaving}
      autoFocus
      agents={agents}
      currentAgentId={selected.agentId}
      skills={agentSkills}
      {...(sessionDraft.skills && sessionDraft.skills.length > 0
        ? { initialSkills: sessionDraft.skills }
        : {})}
      onSkillsChange={onDraftSkillsChange}
      onHandoff={onHandoff}
      initialText={sessionDraft.text ?? ""}
      onTextChange={onDraftTextChange}
      history={inputHistory}
      {...(sessionDraft.handoffAgentId
        ? { initialHandoffTargetId: sessionDraft.handoffAgentId }
        : {})}
      onHandoffTargetChange={onDraftHandoffChange}
      {...(sessionDraft.switchModelRef
        ? { initialPendingModelRef: sessionDraft.switchModelRef }
        : {})}
      onPendingModelChange={onDraftPendingModelChange}
    />
  );

  return (
    <div className="flex h-full flex-col bg-white dark:bg-gray-950">
      {/* Thin top toolbar */}
      {selected && (
        <div className="flex shrink-0 items-center gap-2.5 border-b border-gray-200 px-3 py-2 md:px-4 dark:border-gray-800">
          <div className="flex min-w-0 flex-1 items-center gap-3">
            <h1 className="flex min-w-0 text-[15px] font-semibold">
              <Truncated text={selected.title ?? S.chat.defaultSessionTitle} />
            </h1>
            {/* Running indicator (placed to the right of the title); the compacting state is shown separately by the compaction banner within the message stream, not repeated here.
                Below sm only the pulsing dot remains (title carries the wording) — the text would eat the title's room on phones. */}
            {stream.taskState === "running" && (
              <span
                title={S.chat.statusRunning}
                className="flex shrink-0 items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400"
              >
                <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
                <span className="hidden sm:inline">{S.chat.statusRunning}</span>
              </span>
            )}
          </div>

          {/* Stats: Token / cost / elapsed time (icon + title for the full meaning) */}
          <div className="hidden items-center gap-3 sm:flex">
            <StatChip
              icon={STAT_ICONS.tokens}
              value={hs.tokensText}
              label={`${S.chat.statTokens}（Token）`}
            />
            {/* When there's no cost (the Model has no pricing configured), don't render this stat
                at all, rather than showing a "—" — that would take up space while saying
                nothing, only making people think the cost is zero or something's broken. */}
            {hs.costText != null && (
              <StatChip
                icon={STAT_ICONS.cost}
                value={`${hs.costText}${hs.costUncosted ? " *" : ""}`}
                label={`${S.common.cost}（${currency}）${hs.costUncosted ? ` · ${S.usage.uncostedNote}` : ""}`}
              />
            )}
            <StatChip icon={STAT_ICONS.elapsed} value={hs.elapsedNode} label={S.chat.statElapsed} />
          </div>

          {/* Subagents panel toggle: latest-Task call graph + child conversations dock on the right (use-subagents-panel.ts); opening closes the Files panel (wrapped setOpen). */}
          <button
            type="button"
            aria-expanded={subagentsPanel.open}
            onClick={() => subagentsPanel.setOpen(!subagentsPanel.open)}
            title={S.chat.openAgents}
            aria-label={S.chat.openAgents}
            className={`flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-medium transition-colors duration-150 ${
              subagentsPanel.open
                ? "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                : "text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            }`}
          >
            {/* Nodes/network glyph (spawn tree). */}
            <svg
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.7"
              aria-hidden
            >
              <circle cx="5" cy="12" r="2.5" />
              <circle cx="19" cy="5.5" r="2.5" />
              <circle cx="19" cy="18.5" r="2.5" />
              <path d="M7.4 11 16.7 6.6M7.4 13l9.3 4.4" />
            </svg>
            {/* At md widths the pinned sidebar leaves less room than the viewport breakpoint
                suggests. Keep both panel actions icon-only until lg so the running status and
                live stats retain their own layout space. */}
            <span className="hidden lg:inline">{S.chat.openAgents}</span>
            {/* A pending approval inside a subagent: amber dot (the chip in the stream carries the accessible announcement). */}
            {anySubagentPending && (
              <span aria-hidden className="h-1.5 w-1.5 rounded-full bg-amber-500" />
            )}
          </button>

          {/* Files panel toggle: docks on the right of the chat instead of replacing it full-screen (use-files-panel.ts); opening closes the subagents panel (wrapped setOpen). */}
          <button
            type="button"
            aria-expanded={filesPanel.open}
            onClick={() => filesPanel.setOpen(!filesPanel.open)}
            title={S.chat.openWorkspace}
            aria-label={S.chat.openWorkspace}
            className={`flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-medium transition-colors duration-150 ${
              filesPanel.open
                ? "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                : "text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
            }`}
          >
            <svg
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.7"
              aria-hidden
            >
              <path d={STAT_ICONS.folder} />
            </svg>
            {/* Below lg the button is icon-only (title/aria keep the name): between md and lg
                the pinned sidebar makes the chat toolbar substantially narrower than the
                viewport, so the action labels would squeeze the status into the Token stats. */}
            <span className="hidden lg:inline">{S.chat.openWorkspace}</span>
          </button>

          {/* Conversation index fallback: exactly when the gutter tick rail can't show
              (phones without a hover pointer; a desktop window whose gutter a docked panel
              ate) the index moves up here as a dropdown — navigation stays reachable. */}
          {!railFit.shown && (
            <OutlineMenuButton
              entries={outline}
              turnOffset={stream.outlineOffset}
              scrollRef={streamScrollRef}
              running={stream.taskState !== "idle"}
            />
          )}

          {/* Details popup: Model / Workspace / created time / stats */}
          <Dropdown
            open={infoOpen}
            setOpen={setInfoOpen}
            menuClass="right-0 top-full mt-1 w-80 max-w-[calc(100vw-1.5rem)] origin-top-right"
            button={
              <button
                type="button"
                title={S.chat.infoPanel}
                onClick={() => setInfoOpen(!infoOpen)}
                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
              >
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.7"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden
                >
                  <circle cx="12" cy="12" r="9" />
                  <path d="M12 11v5m0-8h.01" />
                </svg>
              </button>
            }
          >
            <div className="space-y-3 px-3.5 py-2.5 text-sm">
              <div>
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {S.chat.model}
                </p>
                {/* Paired display: upstream model_id + provider name (two separate fields on the Session DTO). */}
                <p className="truncate text-xs">
                  <span className="font-mono">{selected.modelId}</span>
                  <span className="ml-1.5 text-gray-400 dark:text-gray-500">
                    {providerInfo(selected.provider)?.label ?? selected.provider}
                  </span>
                </p>
              </div>
              <div>
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {S.chat.workspace}
                </p>
                <p className="break-all font-mono text-xs leading-5">{selected.workspace}</p>
              </div>
              <div>
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {S.common.created}
                </p>
                <p className="font-mono text-xs">{formatDateTime(selected.createdAt)}</p>
              </div>
              <div>
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {S.chat.sessionStats}
                </p>
                {/* Same as above: if there's no cost, the whole item is omitted, not left as "Cost —". */}
                <p className="font-mono text-xs">
                  {S.chat.statTokens} {hs.tokensText}
                  {hs.costText != null && ` · ${S.common.cost} ${hs.costText}`} ·{" "}
                  {S.chat.statElapsed} {hs.elapsedNode}
                </p>
              </div>
            </div>
            {/* Jump to this Session's Trace: SPA-navigates to the Trace page deep-linked to
                the owning Agent AND this Session (?agentId= focuses/expands the Agent group,
                ?sessionId= auto-selects — a Session beyond the first loaded page resolves via
                the Trace page's full-fetch fallback). Only reachable for a real Session: this
                whole header renders behind the `selected` guard, so a draft never shows it. */}
            <div className="border-t border-gray-100 py-1 dark:border-gray-800">
              <button
                type="button"
                onClick={() => {
                  setInfoOpen(false);
                  navigate(
                    `/traces?agentId=${encodeURIComponent(selected.agentId)}&sessionId=${encodeURIComponent(selected.sessionId)}`,
                  );
                }}
                className="flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800"
              >
                <svg
                  width="15"
                  height="15"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.7"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden
                  className="shrink-0 text-gray-400 dark:text-gray-500"
                >
                  <path d={NAV_ICONS.traces} />
                </svg>
                {S.chat.viewTrace}
              </button>
            </div>
          </Dropdown>
        </div>
      )}

      {/* Body: chat column + the docked panels on the right (message file cards jump to and locate a file in the tree via onOpenFile). */}
      <div className="flex min-h-0 flex-1">
        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
          {draft ? (
            // Draft state: DraftView's vertically centered input card + Agent / Workspace
            // selection panel; the Session is only created once the first message is sent. Keyed
            // by Project: switching Project remounts and switches to that Project's draft cache
            // (Agent selection happens inside the draft itself, so it's no longer part of the key).
            <DraftView key={`draft:${projectId}`} projectId={projectId} models={models} />
          ) : (
            // Keyed by Session: the whole block does a light fade-in when switching sessions.
            <div
              key={selected?.sessionId ?? "empty"}
              className="anim-fade flex min-h-0 flex-1 flex-col"
            >
              {selected ? (
                stream.error ? (
                  // History failed to load: show a clear error and a retry entry point, instead of staying on a misleading empty state.
                  <div className="flex h-full flex-col items-center justify-center gap-3 p-6">
                    <p className="text-sm text-red-600 dark:text-red-400">
                      {S.chat.historyLoadFailed}：{stream.error}
                    </p>
                    <Button onClick={stream.retry}>{S.common.retry}</Button>
                  </div>
                ) : stream.loading ? (
                  <div className="space-y-3 p-6">
                    <Skeleton className="h-5 w-1/3" />
                    <Skeleton className="h-5 w-2/3" />
                    <Skeleton className="h-5 w-1/2" />
                  </div>
                ) : (
                  // The empty state shares the same structure as the message stream (message
                  // area + bottom input area): only the message area's content differs, and
                  // ChatInput always mounts in the same JSX slot, so it isn't unmounted and
                  // recreated when the first message arrives (preserving draft/focus).
                  <>
                    <div className="min-h-0 flex-1">
                      {emptyChat ? (
                        <div className="flex h-full items-center justify-center px-4">
                          <p className="text-lg font-medium text-gray-400 dark:text-gray-500">
                            {S.chat.emptyGreeting}
                          </p>
                        </div>
                      ) : (
                        <MessageStream
                          items={allItems}
                          version={stream.version}
                          ctx={ctx}
                          scrollElRef={streamScrollRef}
                          // Scroll-up backfill of older history windows (tail-first
                          // loading): near-top scrolling prepends the previous window,
                          // scroll position anchored (see MessageStream).
                          older={{
                            hasMore: stream.older.hasMore,
                            loading: stream.older.loading,
                            error: stream.older.error,
                            prependedCount: stream.prefixItems.length,
                            onLoad: stream.loadOlder,
                          }}
                          // Tick-rail minimap over the stream's left gutter (zero layout
                          // width; hides itself when the gutter is too narrow or the
                          // pointer can't hover).
                          outline={
                            <ConversationOutline
                              entries={outline}
                              turnOffset={stream.outlineOffset}
                              version={stream.version}
                              scrollRef={streamScrollRef}
                              running={stream.taskState !== "idle"}
                              fit={railFit}
                            />
                          }
                        />
                      )}
                    </div>
                    <div className="shrink-0 border-t border-gray-200 bg-white px-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 md:pb-3 dark:border-gray-800 dark:bg-gray-950">
                      <div className="mx-auto max-w-3xl">
                        {/* Goal banner docked above the composer: an in-flight goal's progress
                            (restored on load while still active), or the terminal state reached
                            during this page's lifetime. The stop button is the composer's
                            regular stop (one abort ends the whole goal loop). */}
                        {stream.goal && <GoalStatusBanner goal={stream.goal} />}
                        {input}
                      </div>
                    </div>
                  </>
                )
              ) : sessionsLoading ? (
                <div className="space-y-3 p-6">
                  <Skeleton className="h-5 w-1/2" />
                </div>
              ) : (
                <EmptyState
                  title={S.chat.noSessions}
                  action={<Button onClick={newChat}>{S.nav.newChat}</Button>}
                />
              )}
            </div>
          )}
        </div>

        {selected && (
          <SubagentsPanel
            session={selected}
            panel={subagentsPanel}
            // The merged view (backfilled windows included): a chip on an older turn keeps
            // its historical graph and child conversation reachable after pagination.
            model={panelModel}
            version={stream.version}
            taskRunning={stream.taskState !== "idle"}
            ctx={ctx}
          />
        )}
        {selected && <FilesPanel session={selected} panel={filesPanel} />}
      </div>

      <Modal
        open={credentialGuide}
        title={S.project.noCredentialTitle}
        onClose={() => setCredentialGuide(false)}
        footer={
          <>
            <Button onClick={() => setCredentialGuide(false)}>{S.project.later}</Button>
            <Button
              variant="primary"
              onClick={() => {
                setCredentialGuide(false);
                navigate("/models");
              }}
            >
              {S.project.goToModels}
            </Button>
          </>
        }
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">{S.project.noCredentialBody}</p>
      </Modal>
    </div>
  );
}
