import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSpaces, 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 { workspaceDirRole } from '../../lib/workspaceDirs';
import { FilterBar } from '../list/FilterBar';
import { isImagePreviewable, isPdfPreviewable, isHtmlPreviewable, isSpreadsheetPreviewable, isPresentationPreviewable } from '../../lib/utils';
import type { OfficePreviewDescriptor } from '../files/FilePreview';
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 { EmptyState } from '../shared/EmptyState';
import { SwipeableTabs } from '../mobile/SwipeableTabs';
import { FilePreview } from '../files/FilePreview';
import { FileTileGrid } from '../files/FileTileGrid';
import { FileDetailList } from '../files/FileDetailList';
import { useFileView } from '../../hooks/useFileView';
import { FileBreadcrumb } from '../files/FileBreadcrumb';
import { MoveTargetDialog } from '../files/MoveTargetDialog';
import { resolveMoves } from '../../lib/fileMove';
import { FileActions, FileSelectionBar, FileDropzone, FileViewToggle, FileSortMenu, type FileSort } from '../files/FileToolbar';
import { filesToBase64 } from '../../lib/fileBase64';
import { AppRunner } from './AppRunner';
import { createSpaceGateway } from './app-file-gateway';
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,
  getSpaceFileOfficePreviewUrl,
  getSpaceTrustedHtmlUrl,
  uploadSpaceFiles,
  deleteSpaceFiles,
  createSpaceFolder,
  moveSpaceFile,
  downloadSpaceFilesZip,
  type CreateLocalTaskInput,
  type LocalFileEntry,
  type Space,
} from '../../api';
import { SpaceFormDialog } from './SpaceFormDialog';

/** Filter state for the space chat list. Persisted in the URL by App (urlState)
 *  so it survives tab switches, reloads and bookmarks. */
export interface SpaceChatFilter {
  search: string;
  status: 'all' | StatusColumn;
  sort: SortMode;
  scope: TaskScope;
}

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;
  chatFilter: SpaceChatFilter;
  onChatFilterChange: (next: Partial<SpaceChatFilter>) => void;
}

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

export function SpaceDetail({ spaceId, spaceTaskId, onSelectSpace, onSelectSpaceTask, onCreateTask, onOpenTask, chatFilter, onChatFilterChange }: SpaceDetailProps) {
  const { t } = useTranslation('spaces');
  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">
        <EmptyState
          title={t('detail.empty.title')}
          hint={t('detail.empty.hint')}
        />
      </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
          space={space}
          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')}>{t('detail.tab.chat')}</TabButton>
        <TabButton testid="space-tab-files" active={tab === 'files'} onClick={() => setTab('files')}>{t('detail.tab.files')}</TabButton>
        <TabButton testid="space-tab-apps" active={tab === 'apps'} onClick={() => setTab('apps')}>{t('detail.tab.apps')}</TabButton>
        <TabButton testid="space-tab-calendar" active={tab === 'calendar'} onClick={() => setTab('calendar')}>{t('detail.tab.calendar')}</TabButton>
        <TabButton testid="space-tab-schedules" active={tab === 'schedules'} onClick={() => setTab('schedules')}>{t('detail.tab.schedules')}</TabButton>
        <TabButton testid="space-tab-settings" active={tab === 'settings'} onClick={() => setTab('settings')}>{t('detail.tab.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}
            filter={chatFilter}
            onFilterChange={onChatFilterChange}
          />
        )}
        {/* 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} canManage={canManage} />}
        {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>
  );
}

/**
 * ヘッダーのワークスペース名 + 説明。タイトル右に説明文を薄字で表示し、管理権限が
 * あれば鉛筆ボタンで編集ダイアログ（名前・色・説明）を開く。権限が無ければ表示のみ。
 */
function SpaceHeaderTitle({
  space,
  canManage,
}: {
  space: Space;
  canManage: boolean;
}) {
  const { t } = useTranslation('spaces');
  const [editing, setEditing] = useState(false);

  return (
    <div className="flex min-w-0 flex-1 items-center gap-2">
      <h1 className="shrink truncate text-[15px] font-bold text-slate-800">{space.title}</h1>
      {space.description && (
        <span
          data-testid="space-description"
          title={space.description}
          className="hidden min-w-0 shrink truncate text-xs text-slate-400 sm:inline"
        >
          {space.description}
        </span>
      )}
      {canManage && (
        <button
          type="button"
          data-testid="space-edit"
          onClick={() => setEditing(true)}
          title={t('detail.editSpace')}
          aria-label={t('detail.editSpace')}
          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>
      )}
      {editing && <SpaceFormDialog space={space} onClose={() => setEditing(false)} />}
    </div>
  );
}

/**
 * 案件ワークスペースの削除（archiveSpace = ソフト削除）ボタン。確認ダイアログ後に
 * アーカイブし、一覧へ戻る（onDeleted）。個人ワークスペースには出さない（呼び出し側で
 * kind==='case' をガード）。
 */
function SpaceDeleteButton({
  spaceId,
  title,
  onDeleted,
}: {
  spaceId: string;
  title: string;
  onDeleted: () => void;
}) {
  const { t } = useTranslation('spaces');
  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">{t('detail.deletePrompt', { 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"
        >
          {t('detail.deleteConfirmButton')}
        </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"
        >
          {t('common:cancel')}
        </button>
      </div>
    );
  }

  return (
    <button
      type="button"
      data-testid="space-delete"
      onClick={() => setConfirming(true)}
      title={t('detail.deleteSpace')}
      aria-label={t('detail.deleteSpace')}
      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 }) {
  const { t } = useTranslation('spaces');
  // キーは 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 = t('detail.sharedMembers', { count: members.length, names: 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,
  filter,
  onFilterChange,
}: {
  spaceId: string;
  isPersonalSpace: boolean;
  spaceTaskId?: number;
  onSelectSpaceTask: (id: number) => void;
  onCreateTask: SpaceDetailProps['onCreateTask'];
  filter: SpaceChatFilter;
  onFilterChange: (next: Partial<SpaceChatFilter>) => void;
}) {
  const { t } = useTranslation('spaces');
  const qc = useQueryClient();
  const auth = useAuthState();
  const { data: allTasks } = useLocalTaskList();
  const { data: spaces } = useSpaces();
  const [showCreate, setShowCreate] = useState(false);
  const { search: searchQuery, status: selectedStatus, sort: sortMode, scope } = filter;
  const setScope = (val: TaskScope) => onFilterChange({ scope: val });
  const setSearchQuery = (val: string) => onFilterChange({ search: val });
  const setSelectedStatus = (val: 'all' | StatusColumn) => onFilterChange({ status: val });
  const setSortMode = (val: SortMode) => onFilterChange({ sort: val });

  const userId = auth.mode === 'authenticated' ? auth.user.id : null;
  // 認証無効 (no-auth 単独利用) は admin 同等に扱う（App.tsx の isAdmin と同じ規約）。
  const isAdmin = auth.mode === 'authenticated' ? auth.user.role === 'admin' : true;
  // case スペースの id 集合。個人バケツ判定（null か case でない id = 誰かの個人
  // スペース）に使う。admin の listSpaces は全 case スペースを返すので集合は完全。
  const caseSpaceIds = useMemo(
    () => new Set((spaces ?? []).filter(s => s.kind === 'case').map(s => s.id)),
    [spaces],
  );

  let spaceTasks = filterTasksForSpace(allTasks ?? [], spaceId, isPersonalSpace, caseSpaceIds);
  // 可視性ルール: 個人ワークスペースは本人専用。admin だけが他ユーザーの個人コンテンツを
  // 「他のメンバー」タブで監視できる。非 admin の個人スペースは自分の所有分に絞り、他人を
  // 一切出さない（リスト API が public/org 等を返しても個人 WS には混ぜない）。
  if (isPersonalSpace && !isAdmin && userId != null) {
    spaceTasks = spaceTasks.filter(t => t.ownerId === userId);
  }

  // 自分/他メンバーの切替。共有ワークスペースのメンバー間、または個人スペースを admin が
  // 監視するときに「他の人のタスク」が存在する場合だけ出す。スコープ分割は Tasks ページと
  // 同じ filterTasksByScope を再利用する（owner_id null は others 側、という既存規約に合わ
  // せる）。フィルタ状態は URL に永続化されるため、スペース切替時は App の onSelectSpace が
  // search/status/sort/scope を明示リセットする（remount 依存ではない）。
  const othersAllowed = !isPersonalSpace || isAdmin;
  const hasOthersTasks = othersAllowed && userId != null && spaceTasks.some(t => t.ownerId !== userId);
  const tasks = userId != null && hasOthersTasks
    ? filterTasksByScope(spaceTasks, scope, userId)
    : spaceTasks;

  // 検索・ステータス・ソート（Tasks ページの FilterBar と同じ挙動を共有ヘルパーで再現）。
  // scope（自分/他メンバー）が最外側のフィルタで、その結果に対して絞り込む。state は
  // URL 永続化のため SpaceDetail（親）→ App の urlState から流す。
  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">{t('chat.listHeading')}</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"
          >
            {t('chat.new')}
          </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) => (
              <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'
                }`}
              >
                {t(`chat.scope.${val}`)}
              </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 ? (
            hasOthersTasks && scope === 'others' ? (
              <p className="rounded-md border border-hairline bg-surface p-3 text-sm text-slate-500">
                {t('chat.empty.others')}
              </p>
            ) : (
              <div className="rounded-md border border-hairline bg-surface p-3 text-sm text-slate-500">
                <p>{t('chat.empty.none')}</p>
                <p className="mt-1.5 text-2xs text-slate-400 leading-relaxed">
                  {t('chat.empty.filesHint')}
                </p>
              </div>
            )
          ) : visibleTasks.length === 0 ? (
            <p className="rounded-md border border-hairline bg-surface p-3 text-sm text-slate-500">
              {t('chat.empty.noMatch')}
            </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">
            {t('chat.selectHint')}
          </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 { t: ts } = useTranslation('spaces');
  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(ts('conversation.deleteConfirm'))) 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>
        {ts('conversation.backToList')}
      </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={ts('conversation.visibilityTitle')}
            className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-2xs text-slate-500"
          >
            {ts('conversation.visibilityNote')}
          </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={ts('common:delete')}
              aria-label={ts('common:delete')}
              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}
          office={previewState.office}
        />
      )}
      {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;
  office?: OfficePreviewDescriptor;
}

// ソースライブラリの 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 { t } = useTranslation('spaces');
  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 [isMoving, setIsMoving] = useState(false);
  // 「移動」ダイアログで移動する対象（null = 閉じている）。
  const [moveDialogSources, setMoveDialogSources] = useState<string[] | null>(null);

  const load = useCallback(async () => {
    setIsRefreshing(true);
    try {
      const r = await fetchSpaceFiles(spaceId, currentPath);
      setEntries(r.entries);
      setLoadError('');
    } catch {
      setEntries([]);
      setLoadError(t('files.loadError'));
    } finally {
      setIsRefreshing(false);
    }
  }, [spaceId, currentPath]);

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

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

  const handlePreview = useCallback(async (filePath: string, name: string) => {
    try {
      if (isSpreadsheetPreviewable(name) || isPresentationPreviewable(name)) {
        const kind = isSpreadsheetPreviewable(name) ? 'spreadsheet' : 'presentation';
        setPreview({
          name,
          content: '',
          imageSrc: '',
          office: { kind, url: getSpaceFileOfficePreviewUrl(spaceId, filePath), downloadUrl: getSpaceFileRawUrl(spaceId, filePath) },
        });
        return;
      }
      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(t('files.previewError'));
    }
  }, [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: t('files.uploadedCount', { count: r.uploaded.length }), kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: t('files.uploadFailed', { msg: (e as Error)?.message ?? '' }), kind: 'error' });
    } finally {
      setIsUploading(false);
    }
  }, [spaceId, currentPath, load]);

  // 現在フォルダに空フォルダを作る。既存スペースに readonly/ を後付けする用途も兼ねる。
  const createFolder = useCallback(async () => {
    const name = window.prompt(t('files.newFolderPrompt'))?.trim();
    if (!name) return;
    if (/[\\/]/.test(name)) {
      setUploadMsg({ text: t('files.folderNameInvalid'), kind: 'error' });
      return;
    }
    const rel = currentPath ? `${currentPath}/${name}` : name;
    setUploadMsg(null);
    try {
      await createSpaceFolder(spaceId, rel);
      await load();
      setUploadMsg({ text: t('files.folderCreated', { name }), kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: t('files.folderCreateFailed', { msg: (e as Error)?.message ?? '' }), kind: 'error' });
    }
  }, [spaceId, currentPath, load]);

  // ファイル/フォルダのリネーム（move エンドポイント経由）。構造ディレクトリ
  // （input/output/logs/apps/readonly）はサーバ側で拒否され、UI でも行アクションを出さない。
  const renameEntry = useCallback(async (entry: LocalFileEntry) => {
    const next = window.prompt(t('files.renamePrompt'), entry.name)?.trim();
    if (!next || next === entry.name) return;
    if (/[\\/]/.test(next)) {
      setUploadMsg({ text: t('files.nameInvalid'), kind: 'error' });
      return;
    }
    const slash = entry.path.lastIndexOf('/');
    const parent = slash >= 0 ? entry.path.slice(0, slash) : '';
    const to = parent ? `${parent}/${next}` : next;
    setUploadMsg(null);
    try {
      const r = await moveSpaceFile(spaceId, entry.path, to);
      await load();
      setUploadMsg({ text: t('files.renamed', { from: entry.name, to: r.to.split('/').pop() }), kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: t('files.renameFailed', { msg: (e as Error)?.message ?? '' }), kind: 'error' });
    }
  }, [spaceId, load]);

  // ファイル/フォルダをフォルダへ移動する（ドラッグ移動・複数選択移動の共通経路）。
  // resolveMoves が no-op / 自己内移動を事前除外し、残りを move エンドポイントへ順に投げる。
  // 衝突はサーバが自動リネームするため、ここでは件数だけ報告する。
  const moveInto = useCallback(async (sourcePaths: string[], destDir: string) => {
    const { moves, skipped } = resolveMoves(sourcePaths, destDir);
    if (moves.length === 0) {
      if (skipped.length > 0) setUploadMsg({ text: t('files.alreadyThere'), kind: 'ok' });
      return;
    }
    setIsMoving(true);
    setUploadMsg(null);
    let moved = 0;
    let failed = 0;
    for (const m of moves) {
      try {
        await moveSpaceFile(spaceId, m.from, m.to);
        moved++;
      } catch {
        failed++;
      }
    }
    setSelected(new Set());
    await load();
    const where = destDir ? t('files.moveTargetFolder', { name: destDir.split('/').pop() }) : t('files.moveTargetRoot');
    setUploadMsg(
      failed > 0
        // 一部でも失敗したら赤で示す（成功緑だと失敗を見落とすため）。
        ? { text: t('files.movedWithFailures', { moved, where, failed }), kind: 'error' }
        : { text: t('files.moved', { moved, where }), kind: 'ok' },
    );
    setIsMoving(false);
  }, [spaceId, 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(t('files.deleteConfirm', { count: paths.length }))) return;
    setIsDeleting(true);
    setUploadMsg(null);
    try {
      const r = await deleteSpaceFiles(spaceId, paths);
      setSelected(new Set());
      await load();
      setUploadMsg({ text: t('files.deletedCount', { count: r.deleted.length }), kind: 'ok' });
    } catch (e) {
      setUploadMsg({ text: t('files.deleteFailed', { msg: (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: t('files.downloadFailed', { msg: (e as Error)?.message ?? '' }), kind: 'error' });
    } finally {
      setIsDownloading(false);
    }
  }, [spaceId]);

  const pathSegments = currentPath ? currentPath.split('/').filter(Boolean) : [];
  // source/index.jsonl は「ソース」グループのデータ源なので、生のファイル一覧には
  // 出さない（ノイズ回避）。source/ フォルダ自体は通常どおりブラウズできる。
  const visibleEntries = entries.filter(
    e => !(e.kind !== 'directory' && currentPath === 'source' && e.name === 'index.jsonl'),
  );
  const { viewMode, setViewMode, sort, setSort, toggleSort, sortedEntries } = useFileView(visibleEntries);
  // アイコン表示のドロップダウン（名前順/新しい順）は共有ソート状態に縮約して乗せる。
  // サイズ順は詳細表示の列見出しから操作する（タスク窓の FileBrowser と同方針）。
  const menuSort: FileSort = sort.key === 'modified' ? 'newest' : 'name';
  const onMenuSort = (s: FileSort) =>
    setSort(s === 'newest' ? { key: 'modified', dir: 'desc' } : { key: 'name', dir: 'asc' });

  // 選択可能なのはファイル＋ユーザー作成フォルダ（構造フォルダ=workspaceDirRole 有 は保護で除外）。
  const selectablePaths = visibleEntries
    .filter(e => e.kind !== 'directory' || workspaceDirRole(e.path, e.name, e.kind) == null)
    .map(f => f.path);
  const allSelected = selectablePaths.length > 0 && selectablePaths.every(p => selected.has(p));
  const selectedInView = selectablePaths.filter(p => selected.has(p));

  // リネームボタン（詳細表示・アイコン表示で共有）。構造ディレクトリ
  // （input/output/logs/apps/readonly）はサーバ側で拒否されるため出さない。
  const renameButton = (entry: LocalFileEntry) => {
    const isStructural = workspaceDirRole(entry.path, entry.name, entry.kind) != null;
    if (!canManage || isStructural) return null;
    return (
      <button
        type="button"
        data-testid={`space-file-rename-${entry.name}`}
        onClick={() => void renameEntry(entry)}
        title={t('files.rename')}
        aria-label={t('files.renameAria', { name: entry.name })}
        className="inline-flex h-5 w-5 items-center justify-center rounded text-slate-400 opacity-0 transition-opacity hover:bg-surface-2 hover:text-slate-700 focus-visible:opacity-100 group-hover:opacity-100 reveal-hover"
      >
        <svg className="h-3 w-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M10.5 2.5l3 3L6 13l-3.5.5L3 10z" />
        </svg>
      </button>
    );
  };

  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-0.5">
          <FileBreadcrumb
            testid="space-files-breadcrumb"
            pathSegments={pathSegments}
            onNavigate={setCurrentPath}
            onMoveDrop={canManage ? (s, d) => void moveInto(s, d) : undefined}
          />
        </div>
        <div className="flex shrink-0 items-center gap-1.5">
          {viewMode === 'icon' && <FileSortMenu sort={menuSort} onChange={onMenuSort} />}
          <FileViewToggle idPrefix="space" mode={viewMode} onChange={setViewMode} />
          {canManage && (
            <button
              type="button"
              data-testid="space-files-mkdir-btn"
              onClick={() => void createFolder()}
              className="inline-flex items-center gap-1 px-2 h-7 rounded text-2xs font-medium border border-hairline bg-canvas text-slate-600 hover:bg-surface transition-colors"
              title={t('files.mkdirTitle')}
            >
              <svg className="h-3 w-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                <path d="M2 4.5A1.5 1.5 0 013.5 3h2.6l1.2 1.6h5.2A1.5 1.5 0 0116 6.1V12a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 012 12V4.5zM8 7.5v4M6 9.5h4" />
              </svg>
              {t('files.newFolder')}
            </button>
          )}
          <FileActions
            idPrefix="space"
            canUpload={canManage}
            onUploadFiles={files => void uploadFiles(files)}
            onRefresh={() => void load()}
            isRefreshing={isRefreshing}
            isUploading={isUploading}
          />
        </div>
      </div>

      {!currentPath && !loadError && selectablePaths.length === 0 && (
        <p className="text-2xs text-slate-500 leading-relaxed">
          {t('files.inputHint')}
        </p>
      )}

      {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)}
          onMoveSelected={() => setMoveDialogSources(selectedInView)}
          isDeleting={isDeleting}
          isDownloading={isDownloading}
          isMoving={isMoving}
        />
      )}

      {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: t('files.folderNotSupported'), kind: 'error' })}
      >
        {viewMode === 'detail' ? (
          <FileDetailList
            entries={sortedEntries}
            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)}
            onDownloadDir={path => void downloadSelected([path])}
            sort={sort}
            onSort={toggleSort}
            onMoveDrop={canManage ? (s, d) => void moveInto(s, d) : undefined}
            renderRowAction={entry => {
              // 詳細表示でも apps/{name}/index.html は「実行」で起動できるようにする
              // （アイコン表示の renderTileOverlay と対）。
              const appEntry = entry.kind !== 'directory' ? detectAppEntry(entry.path) : null;
              const rename = renameButton(entry);
              if (!appEntry && !rename) return null;
              return (
                <>
                  {rename}
                  {appEntry && (
                    <button
                      type="button"
                      data-testid={`space-app-run-${appEntry.appName}`}
                      onClick={() => setAppToRun(appEntry)}
                      title={t('files.runAsApp')}
                      className="inline-flex h-5 items-center rounded bg-[var(--brand-primary)] px-1.5 text-2xs font-medium text-white opacity-0 transition-opacity hover:opacity-90 focus-visible:opacity-100 group-hover:opacity-100 reveal-hover"
                    >
                      {t('files.run')}
                    </button>
                  )}
                </>
              );
            }}
            emptyHint={loadError ? null : (canManage
              ? t('files.emptyManage')
              : t('files.empty'))}
          />
        ) : (
          <FileTileGrid
            entries={sortedEntries}
            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)}
            onDownloadDir={path => void downloadSelected([path])}
            onMoveDrop={canManage ? (s, d) => void moveInto(s, d) : undefined}
            renderEntryAction={renameButton}
            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={t('files.runAsApp')}
                  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 reveal-hover"
                >
                  {t('files.runAsApp')}
                </button>
              );
            }}
            emptyHint={loadError ? null : (canManage
              ? t('files.emptyManage')
              : t('files.empty'))}
          />
        )}
      </FileDropzone>

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

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

      {moveDialogSources && (
        <MoveTargetDialog
          spaceId={spaceId}
          sourcePaths={moveDialogSources}
          isMoving={isMoving}
          onClose={() => setMoveDialogSources(null)}
          onConfirm={dest => {
            setMoveDialogSources(null);
            void moveInto(moveDialogSources, dest);
          }}
        />
      )}
    </div>
  );
}