import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSpaces, useUpdateSpace, useArchiveSpace } from '../../hooks/useSpaces';
import { useLocalTaskList } from '../../hooks/useTaskList';
import { useLocalTask, useLocalTaskComments } from '../../hooks/useTaskDetail';
import { useTaskOperations } from '../../hooks/useTaskOperations';
import { useToast } from '../../hooks/useToast';
import { useSpaceBranding } from '../../hooks/useSpaceBranding';
import { useFileBrowser } from '../../hooks/useFileBrowser';
import { useIsMobile } from '../../hooks/useIsMobile';
import { useFilePreview } from '../../hooks/useFilePreview';
import { useSubtaskActivities } from '../../hooks/useSubtaskActivities';
import { useVisibleDetailTabs, tabAppearClass } from '../detail/detailTabs';
import { LocalDetailPanel } from '../detail/DetailPanel';
import { ShareButton, ContinueButton } from '../detail/DetailHeader';
import { ContinueWithPieceDialog } from '../detail/ContinueWithPieceDialog';
import type { DetailTabId, SortMode, StatusColumn } from '../../lib/urlState';
import { filterTasksForSpace } from '../../lib/spaceTasks';
import { filterAndSortTasks, groupTasksByStatus, statusCounts, totalTaskCount } from '../../lib/taskFilter';
import { filterTasksByScope, type TaskScope } from '../../lib/taskScope';
import { FilterBar } from '../list/FilterBar';
import { isImagePreviewable, isPdfPreviewable, isHtmlPreviewable } from '../../lib/utils';
import { CreateTaskDialog } from '../create/CreateTaskDialog';
import { LocalTaskListItem } from '../list/TaskListItem';
import { ChatPane } from '../chat/ChatPane';
import { SpaceSettings } from './SpaceSettings';
import { SpaceCalendar } from './SpaceCalendar';
import { SchedulesPage } from '../../pages/SchedulesPage';
import { SpaceApps } from './SpaceApps';
import { useAuthState } from '../../App';
import { SkeletonChatPane } from '../shared/Skeleton';
import { SwipeableTabs } from '../mobile/SwipeableTabs';
import { FilePreview } from '../files/FilePreview';
import { FileTileGrid } from '../files/FileTileGrid';
import { FileBreadcrumb } from '../files/FileBreadcrumb';
import { FileActions, FileSelectionBar, FileDropzone } from '../files/FileToolbar';
import { filesToBase64 } from '../../lib/fileBase64';
import { AppRunner } from './AppRunner';
import { detectAppEntry } from './app-bridge';
import { ChatDetailSplit } from './ChatDetailSplit';
import { OutputPreviewProvider } from '../../lib/output-preview-context';
import { stripOutputPrefix } from '../../lib/output-path-detect';
import {
  createLocalTask,
  fetchSpaceMembers,
  fetchSpaceFiles,
  fetchSpaceFileContent,
  getSpaceFileRawUrl,
  getSpaceTrustedHtmlUrl,
  uploadSpaceFiles,
  deleteSpaceFiles,
  downloadSpaceFilesZip,
  type CreateLocalTaskInput,
  type LocalFileEntry,
} from '../../api';

interface SpaceDetailProps {
  spaceId?: string;
  spaceTaskId?: number;
  onSelectSpace?: (id: string | undefined) => void;
  onSelectSpaceTask: (id: number) => void;
  onCreateTask: (input: CreateLocalTaskInput, attachments: Array<{ name: string; contentBase64: string }>) => Promise<void>;
  onOpenTask: (id: number) => void;
}

type SpaceTab = 'chat' | 'files' | 'apps' | 'calendar' | 'schedules' | 'settings';

export function SpaceDetail({ spaceId, spaceTaskId, onSelectSpace, onSelectSpaceTask, onCreateTask, onOpenTask }: SpaceDetailProps) {
  const { data: spaces } = useSpaces();
  const [tab, setTab] = useState<SpaceTab>('chat');
  const containerRef = useRef<HTMLDivElement>(null);
  const auth = useAuthState();

  const space = spaces?.find(s => s.id === spaceId);

  // owner（または admin）だけが管理操作（名前変更・削除・予定編集）を行える。
  // auth 無効（ローカル）では全員可。バックエンドの canManageSpace と揃える
  // （member.role==='owner' は UI では検出しないが、その場合もサーバが許可する）。
  const canManage =
    auth.mode === 'disabled' ||
    (auth.mode === 'authenticated' &&
      (auth.user.role === 'admin' || (space?.ownerId != null && space.ownerId === auth.user.id)));
  // カレンダー編集権の別名（既存の prop 名を保つ）。
  const canEdit = canManage;
  // ファイル編集（アップロード/削除）可否。管理権より広く、editor メンバーも含む
  // （サーバの canEditInSpace と揃える: admin / owner / member.role∈{owner,editor}）。
  const myRole = space?.myRole ?? null;
  const canEditFiles =
    auth.mode === 'disabled' ||
    (auth.mode === 'authenticated' &&
      (auth.user.role === 'admin' ||
        (space?.ownerId != null && space.ownerId === auth.user.id) ||
        myRole === 'owner' || myRole === 'editor'));

  // ブランド色をこのパネルに scoped 適用（スペースを離れる / 色なしで解除）。
  useSpaceBranding(containerRef, space?.brandColor);

  if (!spaceId || !space) {
    return (
      <div className="flex h-full items-center justify-center p-6 text-sm text-slate-500">
        左の一覧からワークスペースを選んでください。
      </div>
    );
  }

  const dot = space.brandColor ?? 'var(--brand-primary)';

  // 狭幅でチャットを開いているときは、スペースタイトルと「チャット｜ファイル」タブ行を
  // 隠してヘッダーの段数を減らす（会話画面が複数バーに埋もれないように）。広幅(md+)では
  // 常時表示、チャット未選択（一覧表示）の狭幅でも表示する。
  const chatOpen = tab === 'chat' && spaceTaskId != null;
  const hideOnMobileWhenChatOpen = chatOpen ? 'hidden md:flex' : 'flex';

  return (
    <div ref={containerRef} data-testid="space-detail" className="flex h-full flex-col overflow-hidden">
      {/* Header */}
      <div className={`${hideOnMobileWhenChatOpen} items-center gap-2 border-b border-hairline bg-surface px-4 py-3`}>
        <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: dot }} aria-hidden />
        <SpaceHeaderTitle
          spaceId={spaceId}
          title={space.title}
          canManage={canManage}
        />
        {space.kind === 'case' && (
          <SpaceMemberAvatars spaceId={spaceId} onManage={() => setTab('settings')} />
        )}
        {space.kind === 'case' && canManage && (
          <SpaceDeleteButton
            spaceId={spaceId}
            title={space.title}
            onDeleted={() => onSelectSpace?.(undefined)}
          />
        )}
      </div>

      {/* Tabs */}
      <div className={`${hideOnMobileWhenChatOpen} items-center gap-1 border-b border-hairline px-3`}>
        <TabButton testid="space-tab-chat" active={tab === 'chat'} onClick={() => setTab('chat')}>チャット</TabButton>
        <TabButton testid="space-tab-files" active={tab === 'files'} onClick={() => setTab('files')}>ファイル</TabButton>
        <TabButton testid="space-tab-apps" active={tab === 'apps'} onClick={() => setTab('apps')}>アプリ</TabButton>
        <TabButton testid="space-tab-calendar" active={tab === 'calendar'} onClick={() => setTab('calendar')}>カレンダー</TabButton>
        <TabButton testid="space-tab-schedules" active={tab === 'schedules'} onClick={() => setTab('schedules')}>スケジュール</TabButton>
        <TabButton testid="space-tab-settings" active={tab === 'settings'} onClick={() => setTab('settings')}>設定</TabButton>
      </div>

      {/* Body */}
      <div className={`relative flex-1 min-h-0 ${tab === 'files' ? 'overflow-y-auto p-4' : tab === 'apps' ? 'overflow-y-auto' : tab === 'settings' ? 'overflow-hidden p-2' : 'overflow-hidden'}`}>
        {tab === 'chat' && (
          // key={spaceId}: ワークスペース切替で SpaceChat を remount し、scope トグル等の
          // ローカル state を確実にリセットする（files/apps/settings タブと同じ方針）。
          <SpaceChat
            key={spaceId}
            spaceId={spaceId}
            isPersonalSpace={space.kind === 'personal'}
            spaceTaskId={spaceTaskId}
            onSelectSpaceTask={onSelectSpaceTask}
            onCreateTask={onCreateTask}
          />
        )}
        {/* key={spaceId}: ワークスペースを切り替えたら detail のサブツリーを remount し、
            各パネルのローカル state（Monaco エディタの内容・編集中フォーム・プレビュー等）を
            確実にリセットする。query は spaceId を含むキーで別途 refetch されるが、
            ローカル state は remount しないと前のワークスペースの値が残る（空内容で上書き
            されない AGENTS.md の stale 表示など）。 */}
        {tab === 'files' && <SpaceFiles key={spaceId} spaceId={spaceId} canManage={canEditFiles} />}
        {tab === 'apps' && <SpaceApps key={spaceId} spaceId={spaceId} />}
        {tab === 'calendar' && (
          <SpaceCalendar
            key={spaceId}
            spaceId={spaceId}
            canEdit={canEdit}
            onOpenChat={(taskId) => { onSelectSpaceTask(taskId); setTab('chat'); }}
          />
        )}
        {tab === 'schedules' && <SchedulesPage key={spaceId} spaceId={spaceId} />}
        {tab === 'settings' && <SpaceSettings key={spaceId} spaceId={spaceId} />}
      </div>
    </div>
  );
}

/**
 * ヘッダーのワークスペース名。管理権限があればインラインで名前変更できる
 * （鉛筆ボタン → 入力 → 保存で PATCH → spaces を invalidate）。権限が無ければ
 * 単なるタイトル表示。
 */
function SpaceHeaderTitle({
  spaceId,
  title,
  canManage,
}: {
  spaceId: string;
  title: string;
  canManage: boolean;
}) {
  const updateSpace = useUpdateSpace();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(title);
  const inputRef = useRef<HTMLInputElement>(null);

  // 編集を開始したら現在のタイトルを入れ、フォーカスする。
  const startEdit = useCallback(() => {
    setValue(title);
    setEditing(true);
  }, [title]);

  useEffect(() => {
    if (editing) inputRef.current?.select();
  }, [editing]);

  const save = useCallback(async () => {
    const next = value.trim();
    if (!next || next === title) { setEditing(false); return; }
    try {
      await updateSpace.mutateAsync({ id: spaceId, patch: { title: next } });
      setEditing(false);
    } catch {
      // 失敗時は編集状態のまま（入力を消さない）。
    }
  }, [value, title, spaceId, updateSpace]);

  if (!editing) {
    return (
      <div className="flex min-w-0 flex-1 items-center gap-1">
        <h1 className="min-w-0 truncate text-[15px] font-bold text-slate-800">{title}</h1>
        {canManage && (
          <button
            type="button"
            data-testid="space-rename"
            onClick={startEdit}
            title="ワークスペース名を変更"
            aria-label="ワークスペース名を変更"
            className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-slate-400 transition-colors hover:bg-surface hover:text-slate-700"
          >
            <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 2.5l2.5 2.5M3 13l.5-2.5L11 3l2 2-7.5 7.5L3 13z" />
            </svg>
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="flex min-w-0 flex-1 items-center gap-1">
      <input
        ref={inputRef}
        data-testid="space-rename-input"
        value={value}
        onChange={e => setValue(e.target.value)}
        onKeyDown={e => {
          if (e.key === 'Enter') { e.preventDefault(); void save(); }
          else if (e.key === 'Escape') { e.preventDefault(); setEditing(false); }
        }}
        className="min-w-0 flex-1 rounded-md border border-hairline bg-canvas px-2 py-1 text-[15px] font-bold text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400"
      />
      <button
        type="button"
        data-testid="space-rename-save"
        onClick={() => void save()}
        disabled={updateSpace.isPending}
        title="保存"
        aria-label="保存"
        className="inline-flex h-7 items-center rounded-md bg-accent px-2 text-xs font-bold text-accent-fg transition-colors hover:opacity-90 disabled:opacity-50"
      >
        保存
      </button>
      <button
        type="button"
        onClick={() => setEditing(false)}
        title="キャンセル"
        aria-label="キャンセル"
        className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-xs font-medium text-slate-600 transition-colors hover:bg-surface"
      >
        キャンセル
      </button>
    </div>
  );
}

/**
 * 案件ワークスペースの削除（archiveSpace = ソフト削除）ボタン。確認ダイアログ後に
 * アーカイブし、一覧へ戻る（onDeleted）。個人ワークスペースには出さない（呼び出し側で
 * kind==='case' をガード）。
 */
function SpaceDeleteButton({
  spaceId,
  title,
  onDeleted,
}: {
  spaceId: string;
  title: string;
  onDeleted: () => void;
}) {
  const archiveSpace = useArchiveSpace();
  const [confirming, setConfirming] = useState(false);

  const doDelete = useCallback(async () => {
    try {
      await archiveSpace.mutateAsync(spaceId);
      onDeleted();
    } catch {
      // 失敗時は何もしない（一覧に残る）。確認 UI は閉じる。
      setConfirming(false);
    }
  }, [spaceId, archiveSpace, onDeleted]);

  if (confirming) {
    return (
      <div className="flex shrink-0 items-center gap-1">
        <span className="hidden text-2xs text-slate-500 sm:inline">「{title}」を削除？</span>
        <button
          type="button"
          data-testid="space-delete-confirm"
          onClick={() => void doDelete()}
          disabled={archiveSpace.isPending}
          className="inline-flex h-7 items-center rounded-md bg-red-600 px-2 text-xs font-bold text-white transition-colors hover:bg-red-700 disabled:opacity-50"
        >
          削除する
        </button>
        <button
          type="button"
          onClick={() => setConfirming(false)}
          className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-xs font-medium text-slate-600 transition-colors hover:bg-surface"
        >
          キャンセル
        </button>
      </div>
    );
  }

  return (
    <button
      type="button"
      data-testid="space-delete"
      onClick={() => setConfirming(true)}
      title="ワークスペースを削除"
      aria-label="ワークスペースを削除"
      className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-500/15 dark:hover:text-red-300"
    >
      <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 4h10M6.5 4V2.5h3V4M5 4l.5 9h5l.5-9" />
      </svg>
    </button>
  );
}

/**
 * スペースヘッダー右詰めの「共有メンバー」アバター列。
 * 共有されているとき（owner + 1名以上 = メンバー総数 2 以上）だけ表示。
 * 重なり表示で先頭から最大 4 名、超過は「+N」。クリックで設定タブ（メンバー管理）へ。
 */
function SpaceMemberAvatars({ spaceId, onManage }: { spaceId: string; onManage: () => void }) {
  // キーは SpaceMembersPanel と共有する（招待/ロール変更/除去の invalidate が
  // ヘッダーのアバター列にも即時反映されるように）。
  const { data: members } = useQuery({
    queryKey: ['space-members', spaceId],
    queryFn: () => fetchSpaceMembers(spaceId),
    staleTime: 30_000,
  });

  // 共有されていない（オーナーのみ / 取得前）なら何も出さない。
  if (!members || members.length < 2) return null;

  const MAX = 4;
  const shown = members.slice(0, MAX);
  const overflow = members.length - shown.length;
  const label = `共有メンバー ${members.length} 名: ${members.map(m => m.name ?? m.userId).join(', ')}`;

  return (
    <button
      type="button"
      onClick={onManage}
      data-testid="space-member-avatars"
      title={label}
      aria-label={label}
      className="flex shrink-0 items-center -space-x-2 rounded-full pl-1 transition hover:opacity-80"
    >
      {shown.map(m => (
        <MemberAvatar key={m.userId} url={m.avatarUrl} name={m.name} />
      ))}
      {overflow > 0 && (
        <span className="flex h-6 w-6 items-center justify-center rounded-full border-2 border-surface bg-surface-2 text-[10px] font-semibold text-slate-600">
          +{overflow}
        </span>
      )}
    </button>
  );
}

function MemberAvatar({ url, name }: { url: string | null; name: string | null }) {
  const initial = (name ?? '?').trim().charAt(0).toUpperCase() || '?';
  if (url) {
    return <img src={url} alt="" className="h-6 w-6 rounded-full border-2 border-surface object-cover" />;
  }
  return (
    <span className="flex h-6 w-6 items-center justify-center rounded-full border-2 border-surface bg-surface-2 text-[10px] font-semibold text-slate-600">
      {initial}
    </span>
  );
}

function TabButton({
  active,
  onClick,
  children,
  testid,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
  testid?: string;
}) {
  return (
    <button
      type="button"
      data-testid={testid}
      onClick={onClick}
      className={`-mb-px border-b-2 px-3 py-2 text-sm font-semibold transition-colors ${
        active
          ? 'border-[var(--brand-primary)] text-slate-800'
          : 'border-transparent text-slate-500 hover:text-slate-700'
      }`}
    >
      {children}
    </button>
  );
}

function SpaceChat({
  spaceId,
  isPersonalSpace,
  spaceTaskId,
  onSelectSpaceTask,
}: {
  spaceId: string;
  isPersonalSpace: boolean;
  spaceTaskId?: number;
  onSelectSpaceTask: (id: number) => void;
  onCreateTask: SpaceDetailProps['onCreateTask'];
}) {
  const qc = useQueryClient();
  const auth = useAuthState();
  const { data: allTasks } = useLocalTaskList();
  const [showCreate, setShowCreate] = useState(false);
  const [scope, setScope] = useState<TaskScope>('mine');
  const spaceTasks = filterTasksForSpace(allTasks ?? [], spaceId, isPersonalSpace);

  // 自分/他メンバーの切替。共有ワークスペースで「他の人のタスク」が存在するときだけ
  // 出す（個人ワークスペースや単独利用では意味がないので隠す）。スコープ分割は Tasks
  // ページと同じ filterTasksByScope を再利用する（owner_id null は others 側、という
  // 既存規約に合わせる）。SpaceChat は key={spaceId} で remount されるので、スペースを
  // 切り替えると scope は 'mine' に戻る。
  const userId = auth.mode === 'authenticated' ? auth.user.id : null;
  const hasOthersTasks = userId != null && spaceTasks.some(t => t.ownerId !== userId);
  const tasks = userId != null && hasOthersTasks
    ? filterTasksByScope(spaceTasks, scope, userId)
    : spaceTasks;

  // 検索・ステータス・ソート（Tasks ページの FilterBar と同じ挙動を共有ヘルパーで再現）。
  // scope（自分/他メンバー）が最外側のフィルタで、その結果に対して絞り込む。
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedStatus, setSelectedStatus] = useState<'all' | StatusColumn>('all');
  const [sortMode, setSortMode] = useState<SortMode>('updated');
  const statusColumns = groupTasksByStatus(tasks);
  const counts = statusCounts(statusColumns);
  const totalCount = totalTaskCount(statusColumns);
  const visibleTasks = filterAndSortTasks(tasks, selectedStatus, searchQuery, sortMode);

  // スペースの「新規チャット」専用の作成フロー。App 共通の handleCreateTask は
  // Tasks ページの taskId を更新してしまうため、ここでは createLocalTask を直接呼び、
  // 一覧を再取得 (['localTasks']) してから、できたチャットを spaceTaskId として
  // その場で開く。
  const handleSpaceCreate = useCallback(async (
    input: CreateLocalTaskInput,
    attachments: Array<{ name: string; contentBase64: string }>,
  ) => {
    const created = await createLocalTask({ ...input, attachments } as CreateLocalTaskInput);
    qc.invalidateQueries({ queryKey: ['localTasks'] });
    onSelectSpaceTask(created.task.id);
  }, [qc, onSelectSpaceTask]);

  return (
    <div className="flex h-full min-h-0">
      {/* 左: チャット一覧。会話を開いている狭幅では隠す（会話が一覧を置き換える）。 */}
      <div
        className={`w-full md:w-[280px] md:shrink-0 flex flex-col min-h-0 overflow-hidden border-r border-hairline ${
          spaceTaskId != null ? 'hidden md:flex' : 'flex'
        }`}
      >
        <div className="flex items-center justify-between gap-2 px-3 py-2.5 border-b border-hairline">
          <span className="text-[11px] font-bold uppercase tracking-wider text-slate-500">このワークスペースのチャット</span>
          <button
            type="button"
            data-testid="space-new-chat-btn"
            onClick={() => setShowCreate(true)}
            className="shrink-0 rounded-md bg-accent px-2.5 py-1.5 text-xs font-bold text-accent-fg transition-colors hover:opacity-90"
          >
            ＋ 新規
          </button>
        </div>

        {hasOthersTasks && (
          <div
            data-testid="space-chat-scope-toggle"
            className="flex items-center gap-1 border-b border-hairline px-3 py-1.5"
          >
            {([['mine', '自分'], ['others', '他のメンバー']] as const).map(([val, label]) => (
              <button
                key={val}
                type="button"
                data-testid={`space-chat-scope-${val}`}
                aria-pressed={scope === val}
                onClick={() => setScope(val)}
                className={`rounded-md px-2.5 py-1 text-xs font-semibold transition-colors ${
                  scope === val
                    ? 'bg-accent text-accent-fg'
                    : 'text-slate-500 hover:bg-surface hover:text-slate-700'
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        )}

        {totalCount > 0 && (
          <div className="px-3 pt-2">
            <FilterBar
              selectedStatus={selectedStatus}
              sortMode={sortMode}
              searchQuery={searchQuery}
              counts={counts}
              totalCount={totalCount}
              onStatusChange={setSelectedStatus}
              onSortChange={setSortMode}
              onSearchChange={setSearchQuery}
            />
          </div>
        )}

        <div className="flex-1 min-h-0 overflow-y-auto p-2">
          {totalCount === 0 ? (
            <p className="rounded-md border border-hairline bg-surface p-3 text-sm text-slate-500">
              {hasOthersTasks && scope === 'others'
                ? '他のメンバーが作成したチャットはありません。'
                : 'このワークスペースにはまだチャットがありません。「＋ 新規」で始めましょう。'}
            </p>
          ) : visibleTasks.length === 0 ? (
            <p className="rounded-md border border-hairline bg-surface p-3 text-sm text-slate-500">
              条件に一致するチャットがありません。
            </p>
          ) : (
            <div className="space-y-1.5">
              {visibleTasks.map(task => (
                <div key={task.id} data-testid="space-chat-row" data-task-id={task.id}>
                  <LocalTaskListItem
                    task={task}
                    active={task.id === spaceTaskId}
                    onClick={() => onSelectSpaceTask(task.id)}
                  />
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* 右: 選択したチャットの会話をインライン表示。 */}
      <div className="flex-1 min-w-0 min-h-0 overflow-hidden">
        {spaceTaskId != null ? (
          // key={spaceTaskId}: チャット切替で会話サブツリー（ChatPane 含む）を remount し、
          // 入力中の下書き・添付が別チャットへ持ち越されないようにする。詳細タブの切替では
          // remount しないので、2ペイン内のチャット入力は保たれる。
          <SpaceConversation
            key={spaceTaskId}
            taskId={spaceTaskId}
            onBack={() => onSelectSpaceTask(0)}
          />
        ) : (
          <div className="flex h-full items-center justify-center p-6 text-center text-sm text-slate-500">
            左の一覧からチャットを選ぶか、「＋ 新規」で始めてください。
          </div>
        )}
      </div>

      {showCreate && (
        <CreateTaskDialog
          onClose={() => setShowCreate(false)}
          onSubmit={async (input, attachments) => {
            await handleSpaceCreate(input, attachments);
            setShowCreate(false);
          }}
          initialSpaceId={spaceId}
        />
      )}
    </div>
  );
}

// スペース内インライン会話。App の Tasks 詳細と同じ hook / handler を使い、挙動
// （追加指示送信・キャンセル・ライブ表示）を完全一致させる。
function SpaceConversation({ taskId, onBack }: { taskId: number; onBack: () => void }) {
  const { toast, showToast } = useToast();
  const taskQuery = useLocalTask(taskId, true);
  const commentsQuery = useLocalTaskComments(taskId, true);
  const task = taskQuery.data ?? null;
  const comments = commentsQuery.data ?? [];

  // App と同じゲート: 両クエリ完了後にだけ ChatPane をマウントする。
  // 先にタスク詳細だけ解決すると comments=[] で一瞬「メッセージはまだありません」が
  // 出てしまうため。data===undefined は未取得、ロード済みなら最悪でも []。
  const chatReady = task !== null && commentsQuery.data !== undefined;

  const qc = useQueryClient();

  // handleComment / handleCancel / handleDelete は Tasks ページと同じ実体
  // （useTaskOperations）。Tasks ページは setUrlState で taskId を URL から外して
  // 詳細を閉じるが、スペース会話には URL state が無い。代わりに、削除後に
  // handleDelete が渡してくる next state を評価し、taskId:null（＝詳細を閉じる
  // 合図）なら onBack() を呼んでチャット一覧へ戻す。
  const { handleComment, handleCancel, handleDelete } = useTaskOperations({
    taskId,
    showToast,
    setUrlState: (fn) => {
      const next = fn({});
      if (next?.taskId === null || next?.taskId === undefined) onBack();
    },
    setShowCreateDialog: () => {},
  });

  // 継続ダイアログの開閉。最新ジョブが終端状態のときのみ Continue を有効化する。
  const [continueOpen, setContinueOpen] = useState(false);
  // スペース内チャットの公開範囲は選択不可（常にスペースメンバーへ公開）。
  // 旧 handleVisibilityChange / savingVisibility は撤去した。

  // 削除（確認ダイアログ付き）。confirm をキャンセルしたら何もしない。
  const confirmAndDelete = useCallback(async () => {
    if (!window.confirm('このチャットを削除しますか？この操作は取り消せません。')) return;
    await handleDelete();
  }, [handleDelete]);

  const refetchTask = useCallback(() => {
    qc.invalidateQueries({ queryKey: ['localTask', taskId] });
  }, [qc, taskId]);

  const { t } = useTranslation('detail');

  // 詳細タブ（概要/進捗/トレース/ファイル 等）をスペースを離れずインライン表示する。
  // 単一のタブバーをこの SpaceConversation が所有し、`会話` を先頭・既定とする。
  // チャット側「ファイル」はスペースレベルの「ファイル」（共有成果物）とは別物で、
  // そのチャット固有の入出力・ログ（logs セクション = runs/{taskId}）を見るためのもの。
  // チャット単位でログを追えるようにここで表示する（スペース共有ファイルとは用途が違う）。
  // activeTab は URL ではなくローカル状態で持ち、チャットごとに taskId で remount される
  // ため自然にリセットされる。'chat' は会話（ChatPane）を指す。
  const detailTabs = useVisibleDetailTabs(taskId);
  const [activeTab, setActiveTab] = useState<DetailTabId | 'chat'>('chat');
  const tabs = [{ id: 'chat' as const, labelKey: 'tabs.chat' }, ...detailTabs];
  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
  const fileBrowser = useFileBrowser(taskId);
  // モバイル(<md)だけスワイプ UI を「単一 DOM 枝」としてマウントする。両枝を CSS で
  // 隠して二重に描画すると ChatPane の textarea 等が複製され strict locator が壊れる
  // ため、JS メディアクエリで実際にマウントする側を 1 つに絞る（desktop の DOM は不変）。
  const isMobile = useIsMobile();
  const hasSubtasks = (task?.subtasks?.length ?? 0) > 0;
  const { data: subtaskActivities } = useSubtaskActivities(taskId, hasSubtasks);
  const { previewState, previewLocalFile, previewSubtaskFile, closePreview } = useFilePreview(showToast);

  // 選択中タブが（live セッション終了などで）リストから消えたら会話へ戻す。
  useEffect(() => {
    if (!tabs.some(tb => tb.id === activeTab)) setActiveTab('chat');
  }, [tabs, activeTab]);

  // 矢印キーでタブ間移動（端で wrap）+ Home/End で先頭・末尾へ。選択とフォーカスを
  // 同時に動かす（role=tablist の標準操作）。
  const handleTabKeyDown = (e: React.KeyboardEvent, index: number) => {
    let next: number;
    if (e.key === 'ArrowRight') next = (index + 1) % tabs.length;
    else if (e.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = tabs.length - 1;
    else return;
    e.preventDefault();
    setActiveTab(tabs[next].id);
    tabRefs.current[next]?.focus();
  };

  // タスクのファイルにアップロード/削除できるか。スペースメンバーでもタスク所有者で
  // なければサーバ側 checkTaskOwnership が 403 を返すため、UI も owner/admin/no-auth に限る。
  const auth = useAuthState();
  const canManageFiles =
    auth.mode === 'disabled' || (auth.mode === 'authenticated' && (auth.user.role === 'admin' || task?.ownerId === auth.user.id));
  const fileManagement = {
    canManage: canManageFiles,
    writableSection: fileBrowser.writableSection,
    selected: fileBrowser.selected,
    toggleSelect: fileBrowser.toggleSelect,
    toggleSelectAll: fileBrowser.toggleSelectAll,
    upload: fileBrowser.upload,
    remove: fileBrowser.remove,
    download: fileBrowser.download,
    isUploading: fileBrowser.isUploading,
    isDeleting: fileBrowser.isDeleting,
    isDownloading: fileBrowser.isDownloading,
    message: fileBrowser.message,
  };

  const handleLocalFilePreview = (filePath: string, name: string) =>
    previewLocalFile(taskId, fileBrowser.section, filePath, name);
  // チャット/詳細内の output パスリンク（data-output-path）クリックを拾い、
  // App の handleOutputPathLinkClick と同じく section を 'output' に固定して
  // プレビューを開く。`output/...` プレフィックスを剥がして相対パスにする。
  const openOutputPath = (matchedPath: string) => {
    const relative = stripOutputPrefix(matchedPath);
    const name = relative.includes('/') ? relative.slice(relative.lastIndexOf('/') + 1) : relative;
    previewLocalFile(taskId, 'output', relative, name);
  };
  const handleSubtaskFilePreview = (tid: number, jobId: string, category: string, filePath: string) =>
    previewSubtaskFile(tid, jobId, category, filePath);

  // 1タブ分のコンテンツ。デスクトップ（クリック）とモバイル（スワイプ）の両方が
  // 同じ実体を使うため共通化（ロジック重複を避ける）。`chat` は ChatPane、それ以外は
  // headerless な LocalDetailPanel を描画する。chatReady 前は Skeleton。
  const renderTabContent = (id: DetailTabId | 'chat', preview = false) => {
    if (!chatReady) return <SkeletonChatPane />;
    // スワイプ中の隣接タブ（preview=true）が browser(noVNC iframe)/ssh(WebSocket) の
    // 場合は軽量プレースホルダを返し、未確定のスワイプで接続を開かない。確定後
    // (preview=false) に本体をマウントする（Tasks ページと同じ）。
    if (preview && (id === 'browser' || id === 'ssh')) {
      return (
        <div className="flex h-full w-full items-center justify-center bg-canvas text-sm font-medium text-slate-400">
          {id === 'browser' ? t('tabs.browser') : t('tabs.ssh')}
        </div>
      );
    }
    if (id === 'chat') {
      return (
        <ChatPane
          task={task!}
          comments={comments}
          onSubmit={handleComment}
          onCancel={handleCancel}
        />
      );
    }
    const detailTab = id as DetailTabId;
    return (
      <LocalDetailPanel
        headerless
        task={task}
        taskId={taskId}
        section={fileBrowser.section}
        currentPath={fileBrowser.currentPath}
        entries={fileBrowser.entries}
        pathSegments={fileBrowser.pathSegments}
        loading={taskQuery.isLoading}
        detailTab={detailTab}
        detailWidth="normal"
        showWidthToggle={false}
        onTabChange={(tab) => setActiveTab(tab)}
        onWidthToggle={() => {}}
        onClose={() => setActiveTab('chat')}
        onSectionChange={fileBrowser.setSection}
        onNavigate={fileBrowser.setCurrentPath}
        onPreview={handleLocalFilePreview}
        onViewFullLog={() => handleLocalFilePreview('activity.log', 'activity.log')}
        onRefresh={fileBrowser.refresh}
        isRefreshing={fileBrowser.isRefreshing}
        fileManagement={fileManagement}
        subtaskActivities={subtaskActivities}
        onSubtaskFilePreview={handleSubtaskFilePreview}
        shareToken={task?.shareToken ?? null}
      />
    );
  };

  const tabIds = tabs.map(tb => tb.id);

  return (
    <div data-testid="space-conversation" className="relative flex h-full min-h-0 flex-col overflow-hidden">
      {/* 狭幅では一覧へ戻るボタン（広幅では一覧が常時見えるので不要）。 */}
      <button
        type="button"
        onClick={onBack}
        className="md:hidden inline-flex items-center gap-1 px-3 py-2 text-xs font-semibold text-slate-600 border-b border-hairline hover:text-slate-900"
      >
        <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10 4l-4 4 4 4" />
        </svg>
        一覧へ
      </button>

      {/* アクション行: 削除 / 共有 / 継続 / 可視性。Tasks ページの DetailHeader と
          同じ実体（ShareButton・ContinueButton・ContinueWithPieceDialog・
          updateLocalTask）を再利用し、機能パリティを保つ。タブバーとは別行に置き、
          狭幅でも横並びのまま収まるアイコン主体の密度にする。 */}
      {chatReady && task && (
        <div
          data-testid="space-chat-actions"
          className="flex items-center gap-1.5 border-b border-hairline px-3 py-1.5"
        >
          {/* 公開範囲は選択不可: スペース内のチャットは常にそのスペースの
              メンバーだけに公開される。セレクタの代わりに静的な説明チップを置く。 */}
          <span
            data-testid="space-chat-visibility-note"
            title="このワークスペースのメンバーだけが閲覧できます"
            className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-2xs text-slate-500"
          >
            🔒 このワークスペースのメンバーに公開
          </span>

          <div className="ml-auto flex items-center gap-1">
            <ContinueButton
              testid="space-chat-continue"
              latestJobStatus={task.latestJob?.status ?? null}
              onClick={() => setContinueOpen(true)}
            />
            <ShareButton
              testid="space-chat-share"
              taskId={taskId}
              shareToken={task.shareToken ?? null}
              onShareChange={refetchTask}
            />
            <button
              type="button"
              data-testid="space-chat-delete"
              onClick={() => void confirmAndDelete()}
              title="削除"
              aria-label="削除"
              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-500/15 dark:hover:text-red-300"
            >
              <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 4h10M6.5 4V2.5h3V4M5 4l.5 9h5l.5-9" />
              </svg>
            </button>
          </div>
        </div>
      )}

      {/* 単一インプレース・タブバー。会話＋詳細タブ（ファイルを除く）を1本に集約し、
          戻る導線を「会話」タブのみに統一する（オーバーレイ・✕ を廃止）。 */}
      <div
        role="tablist"
        aria-label={t('chatTabsLabel')}
        data-testid="space-chat-tabs"
        className="flex items-center gap-1 overflow-x-auto border-b border-hairline px-3"
      >
        {tabs.map((tb, i) => {
          const active = tb.id === activeTab;
          return (
            <button
              key={tb.id}
              ref={(el) => { tabRefs.current[i] = el; }}
              type="button"
              role="tab"
              id={`space-chat-tab-${tb.id}`}
              data-testid={`space-chat-tab-${tb.id}`}
              aria-selected={active}
              aria-controls="space-chat-tabpanel"
              tabIndex={active ? 0 : -1}
              onClick={() => setActiveTab(tb.id)}
              onKeyDown={(e) => handleTabKeyDown(e, i)}
              className={`-mb-px shrink-0 whitespace-nowrap border-b-2 px-3 py-2 text-sm font-semibold transition-colors ${tabAppearClass(tb.id)} ${
                active
                  ? 'border-[var(--brand-primary)] text-slate-800'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              {t(tb.labelKey)}
            </button>
          );
        })}
      </div>

      <div
        id="space-chat-tabpanel"
        role="tabpanel"
        tabIndex={0}
        aria-labelledby={`space-chat-tab-${activeTab}`}
        className="relative flex-1 min-h-0 overflow-hidden"
      >
        <OutputPreviewProvider openOutputPath={openOutputPath}>
          {isMobile ? (
            // モバイル（<md）: 同じタブ集合を指でスワイプして切り替え。先頭（会話）で
            // 右スワイプすると onBack（一覧へ戻る）を呼ぶ。上のクリックタブバーは残るので
            // タップでも切り替え可能（Tasks ページと同じパターン）。
            <SwipeableTabs
              tabs={tabIds}
              activeTab={activeTab}
              onTabChange={setActiveTab}
              onSwipeBackFromFirst={onBack}
              renderTab={(id, preview) => renderTabContent(id, preview)}
            />
          ) : (
            // デスクトップ（md+）: 会話を左に常時表示し、詳細タブ（ブラウザ/SSH/概要 等）を
            // 右に並べる2ペイン。`chat` タブ選択時は右を畳んでチャット全幅にする。左ペインは
            // remount されないので、詳細を開閉してもチャットの入力中テキストは保たれる。
            <ChatDetailSplit
              storageKey="space.chatDetailWidthPx"
              rightVisible={activeTab !== 'chat'}
              left={renderTabContent('chat')}
              right={activeTab !== 'chat' ? renderTabContent(activeTab) : null}
            />
          )}
        </OutputPreviewProvider>
      </div>
      {continueOpen && task?.latestJob && (
        <ContinueWithPieceDialog
          taskId={taskId}
          prevJob={{
            id: task.latestJob.id,
            // task.pieceName は Continue ごとに last-piece-wins で更新されるので
            // 最新ジョブの piece と一致する（DetailPanel と同じ前提）。
            pieceName: task.pieceName,
            status: task.latestJob.status,
          }}
          onClose={() => setContinueOpen(false)}
        />
      )}
      {previewState && (
        <FilePreview
          name={previewState.name}
          content={previewState.content}
          imageSrc={previewState.imageSrc}
          markdownImageBaseUrl={previewState.markdownImageBaseUrl}
          trustedHtmlUrl={previewState.trustedHtmlUrl}
          onClose={closePreview}
          taskId={previewState.taskId}
          section={previewState.section}
          filePath={previewState.filePath}
          editable={previewState.editable}
        />
      )}
      {toast && (
        <div className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 z-10">
          <div className={`pointer-events-auto rounded-md px-3 py-2 text-xs font-medium shadow-lg ${
            toast.variant === 'error' ? 'bg-red-600 text-white' : 'bg-slate-800 text-white'
          }`}>
            {toast.message}
          </div>
        </div>
      )}
    </div>
  );
}

// --- ファイル窓（スペースの永続ワークスペース）---

interface SpacePreviewState {
  name: string;
  content: string;
  imageSrc: string;
  markdownImageBaseUrl?: string;
  trustedHtmlUrl?: string;
}

// ソースライブラリの curated 一覧 UI は撤去した（#6）。エージェントが取得した資料は
// 引き続き source/ フォルダに蓄積され（WebFetch / DownloadFile / BrowseWeb → source/、
// source/index.jsonl）、通常のフォルダとしてファイル窓からブラウズできる。
// （旧 SpaceSources コンポーネント + 出典メタ整形ヘルパー + fetchSpaceSourceIndex は削除済み。）

// canManage 既定は true（個人ワークスペースなど App から直接マウントする経路では
// 自分のワークスペースなので削除可）。共有ワークスペースでは SpaceDetail が
// owner/admin 判定を渡す。サーバ側も canEditInSpace で再度ゲートする。
export function SpaceFiles({ spaceId, canManage = true }: { spaceId: string; canManage?: boolean }) {
  const [currentPath, setCurrentPath] = useState('');
  const [entries, setEntries] = useState<LocalFileEntry[]>([]);
  const [loadError, setLoadError] = useState('');
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [preview, setPreview] = useState<SpacePreviewState | null>(null);
  // ワークスペース・アプリ（apps/{name}/index.html）を AppRunner で実行中のときの対象。
  const [appToRun, setAppToRun] = useState<{ appName: string; entryPath: string } | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadMsg, setUploadMsg] = useState<{ text: string; kind: 'ok' | 'error' } | null>(null);
  // 複数選択（チェック済みファイルの相対パス集合）と削除中フラグ。
  const [selected, setSelected] = useState<Set<string>>(() => new Set());
  const [isDeleting, setIsDeleting] = useState(false);
  const [isDownloading, setIsDownloading] = useState(false);

  const load = useCallback(async () => {
    setIsRefreshing(true);
    try {
      const r = await fetchSpaceFiles(spaceId, currentPath);
      setEntries(r.entries);
      setLoadError('');
    } catch {
      setEntries([]);
      setLoadError('ファイルの取得に失敗しました');
    } finally {
      setIsRefreshing(false);
    }
  }, [spaceId, currentPath]);

  useEffect(() => { void load(); }, [load]);

  // スペースを切り替えたらルートに戻す。
  useEffect(() => { setCurrentPath(''); }, [spaceId]);

  const handlePreview = useCallback(async (filePath: string, name: string) => {
    try {
      if (isImagePreviewable(name) || isPdfPreviewable(name) || isHtmlPreviewable(name)) {
        const imageSrc = getSpaceFileRawUrl(spaceId, filePath);
        const trustedHtmlUrl = isHtmlPreviewable(name) ? getSpaceTrustedHtmlUrl(spaceId, filePath) : undefined;
        setPreview({ name, content: '', imageSrc, trustedHtmlUrl });
        return;
      }
      const content = await fetchSpaceFileContent(spaceId, filePath);
      let markdownImageBaseUrl: string | undefined;
      if (/\.(md|markdown)$/i.test(name)) {
        const dir = filePath.includes('/') ? filePath.substring(0, filePath.lastIndexOf('/') + 1) : '';
        markdownImageBaseUrl = `/api/local/spaces/${spaceId}/files/raw?path=${dir}`;
      }
      setPreview({ name, content, imageSrc: '', markdownImageBaseUrl });
    } catch {
      setLoadError('ファイルの読み込みに失敗しました');
    }
  }, [spaceId]);

  const uploadFiles = useCallback(async (fileList: File[]) => {
    if (fileList.length === 0) return;
    setIsUploading(true);
    setUploadMsg(null);
    try {
      const payload = await filesToBase64(fileList);
      const r = await uploadSpaceFiles(spaceId, currentPath, payload);
      await load();
      setUploadMsg({ text: `${r.uploaded.length} 件のファイルを追加しました`, kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: `アップロードに失敗しました: ${(e as Error)?.message ?? ''}`, kind: 'error' });
    } finally {
      setIsUploading(false);
    }
  }, [spaceId, currentPath, load]);

  // フォルダ移動・ワークスペース切替で選択をクリア（別ディレクトリのパスを持ち越さない）。
  useEffect(() => { setSelected(new Set()); }, [currentPath, spaceId]);

  const toggleSelect = useCallback((path: string) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(path)) next.delete(path); else next.add(path);
      return next;
    });
  }, []);

  // 選択中のファイルを削除する（複数選択は paths 配列で一括）。サーバが realpath
  // ガード + canEditInSpace で再ゲートするが、UI は相対パスだけを送る。
  const deleteSelected = useCallback(async (paths: string[]) => {
    if (paths.length === 0) return;
    if (!window.confirm(`${paths.length} 件のファイルを削除しますか？この操作は取り消せません。`)) return;
    setIsDeleting(true);
    setUploadMsg(null);
    try {
      const r = await deleteSpaceFiles(spaceId, paths);
      setSelected(new Set());
      await load();
      setUploadMsg({ text: `${r.deleted.length} 件のファイルを削除しました`, kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: `削除に失敗しました: ${(e as Error)?.message ?? ''}`, kind: 'error' });
    } finally {
      setIsDeleting(false);
    }
  }, [spaceId, load]);

  // 選択ファイルを zip でダウンロード（read 操作）。
  const downloadSelected = useCallback(async (paths: string[]) => {
    if (paths.length === 0) return;
    setIsDownloading(true);
    setUploadMsg(null);
    try {
      await downloadSpaceFilesZip(spaceId, paths);
    } catch (e) {
      setUploadMsg({ text: `ダウンロードに失敗しました: ${(e as Error)?.message ?? ''}`, kind: 'error' });
    } finally {
      setIsDownloading(false);
    }
  }, [spaceId]);

  const pathSegments = currentPath ? currentPath.split('/').filter(Boolean) : [];
  const dirs = entries.filter(e => e.kind === 'directory');
  // source/index.jsonl は「ソース」グループのデータ源なので、生のファイル一覧には
  // 出さない（ノイズ回避）。source/ フォルダ自体は通常どおりブラウズできる。
  const files = entries.filter(
    e => e.kind !== 'directory' && !(currentPath === 'source' && e.name === 'index.jsonl'),
  );
  const sorted = [
    ...dirs.sort((a, b) => a.name.localeCompare(b.name)),
    ...files.sort((a, b) => a.name.localeCompare(b.name)),
  ];

  // 選択可能なのはファイルのみ（ディレクトリは削除対象外）。
  const selectablePaths = files.map(f => f.path);
  const allSelected = selectablePaths.length > 0 && selectablePaths.every(p => selected.has(p));
  const selectedInView = selectablePaths.filter(p => selected.has(p));

  return (
    <div data-testid="space-files" className="flex flex-col gap-3">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1 pt-1 font-mono text-2xs text-slate-500 break-all">
          /files{currentPath ? `/${currentPath}` : ''}
        </div>
        <FileActions
          idPrefix="space"
          canUpload={canManage}
          onUploadFiles={files => void uploadFiles(files)}
          onRefresh={() => void load()}
          isRefreshing={isRefreshing}
          isUploading={isUploading}
        />
      </div>

      <FileBreadcrumb testid="space-files-breadcrumb" pathSegments={pathSegments} onNavigate={setCurrentPath} />

      {canManage && selectablePaths.length > 0 && (
        <FileSelectionBar
          idPrefix="space"
          allSelected={allSelected}
          onToggleSelectAll={() => setSelected(allSelected ? new Set() : new Set(selectablePaths))}
          selectedCount={selectedInView.length}
          onDeleteSelected={() => void deleteSelected(selectedInView)}
          onDownloadSelected={() => void downloadSelected(selectedInView)}
          isDeleting={isDeleting}
          isDownloading={isDownloading}
        />
      )}

      {loadError && <p className="text-xs text-red-600">{loadError}</p>}
      {uploadMsg && (
        <p className={`text-xs ${uploadMsg.kind === 'ok' ? 'text-emerald-600' : 'text-red-600'}`}>{uploadMsg.text}</p>
      )}

      <FileDropzone
        idPrefix="space"
        enabled={canManage}
        isUploading={isUploading}
        onDropFiles={files => void uploadFiles(files)}
        onRejectFolder={() => setUploadMsg({ text: 'フォルダは未対応です。ファイルを選んでください。', kind: 'error' })}
      >
        <FileTileGrid
          entries={sorted}
          idPrefix="space"
          canManage={canManage}
          selected={selected}
          onToggleSelect={toggleSelect}
          onOpenDir={setCurrentPath}
          onOpenFile={(path, name) => void handlePreview(path, name)}
          onDeleteOne={path => void deleteSelected([path])}
          isDeleting={isDeleting}
          fileHref={entry => getSpaceFileRawUrl(spaceId, entry.path)}
          renderTileOverlay={entry => {
            // apps/{name}/index.html なら「アプリとして実行」を出す（Stage 1 起動経路）。
            const appEntry = entry.kind !== 'directory' ? detectAppEntry(entry.path) : null;
            if (!appEntry) return null;
            return (
              <button
                type="button"
                data-testid={`space-app-run-${appEntry.appName}`}
                onClick={() => setAppToRun(appEntry)}
                title="アプリとして実行"
                className="absolute bottom-1 left-1/2 -translate-x-1/2 rounded bg-[var(--brand-primary)] px-2 py-0.5 text-2xs font-medium text-white opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100"
              >
                アプリとして実行
              </button>
            );
          }}
          emptyHint={loadError ? null : (canManage
            ? 'ファイルがありません。ここにドラッグ＆ドロップ、または「＋ 追加」で追加できます。'
            : 'ファイルがありません。')}
        />
      </FileDropzone>

      {preview && (
        <FilePreview
          name={preview.name}
          content={preview.content}
          imageSrc={preview.imageSrc}
          markdownImageBaseUrl={preview.markdownImageBaseUrl}
          trustedHtmlUrl={preview.trustedHtmlUrl}
          onClose={() => setPreview(null)}
        />
      )}

      {appToRun && (
        <AppRunner
          spaceId={spaceId}
          appName={appToRun.appName}
          entryPath={appToRun.entryPath}
          onClose={() => setAppToRun(null)}
        />
      )}
    </div>
  );
}