sync: update from private repo (dfadcd5f)

ui/src/components/spaces/SpaceBrowserPanel.tsx

@@ -0,0 +1,290 @@
+/**
+ * SpaceBrowserPanel.tsx — スペース「設定 → ブラウザ」パネル
+ *
+ * そのスペースのブラウザセッションプロファイル・マクロ・録画をまとめて
+ * 管理する。すべて per-space スコープ:
+ *   - セッション: GET/POST/DELETE /api/browser-sessions/profiles?spaceId=…
+ *   - マクロ/録画: /api/users/me/folder/{list,file}?subdir=…&spaceId=…
+ *
+ * DEK は per-user のため、自分が作成していないセッション
+ * (decryptableByViewer===false) は一覧に出るが復号・利用できない。その行には
+ * 「作成者のみ利用可」を明示する。
+ *
+ * 管理操作（追加・削除）は canEditInSpace をバックエンドが強制する。UI は
+ * SpaceMembersPanel と同じ実シグナル（admin / 自分が owner 行）で、判定できる
+ * ときだけ管理コントロールを出す。判定できない場合でも 403 はトーストで処理。
+ */
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  listBrowserSessionProfiles, deleteBrowserSessionProfile, testBrowserSessionProfile,
+  listFolderFiles, getFolderFile, deleteFolderFile,
+  fetchSpaceMembers,
+  type BrowserSessionProfile,
+} from '../../api';
+import { AddBrowserSessionDialog } from '../userfolder/AddBrowserSessionDialog';
+import { FilePreview } from '../files/FilePreview';
+import { useAuthState } from '../../App';
+
+type ShowToast = (message: string, variant?: 'success' | 'error') => void;
+
+const STATUS_LABEL: Record<BrowserSessionProfile['status'], string> = {
+  pending: '保存待ち',
+  active: '有効',
+  expired: '期限切れ',
+  revoked: '失効',
+  error: 'エラー',
+};
+
+const STATUS_CLASS: Record<BrowserSessionProfile['status'], string> = {
+  pending: 'bg-slate-200 text-slate-700',
+  active: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
+  expired: 'bg-amber-100 dark:bg-amber-500/15 text-amber-800 dark:text-amber-300',
+  revoked: 'bg-slate-200 text-slate-500',
+  error: 'bg-rose-100 dark:bg-rose-500/15 text-rose-700 dark:text-rose-300',
+};
+
+function StatusPill({ status }: { status: BrowserSessionProfile['status'] }) {
+  return (
+    <span className={`inline-flex items-center rounded px-2 py-0.5 text-2xs font-medium ${STATUS_CLASS[status]}`}>
+      {STATUS_LABEL[status]}
+    </span>
+  );
+}
+
+function errMsg(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
+
+export function SpaceBrowserPanel({ spaceId, showToast }: { spaceId: string; showToast?: ShowToast }) {
+  const auth = useAuthState();
+  const qc = useQueryClient();
+
+  // 管理可否は SpaceMembersPanel と同じ実シグナルで判定する。判定できない
+  // ときも管理コントロールは出すが、403 は mutation onError でトースト処理。
+  const { data: members } = useQuery({
+    queryKey: ['space-members', spaceId],
+    queryFn: () => fetchSpaceMembers(spaceId),
+    staleTime: 30_000,
+  });
+  const ownerRow = (members ?? []).find(m => m.isOwner);
+  const canManage =
+    auth.mode === 'disabled' ||
+    (auth.mode === 'authenticated' &&
+      (auth.user.role === 'admin' || (!!ownerRow && ownerRow.userId === auth.user.id)));
+
+  // ── セッション ──────────────────────────────────────────────
+  const { data: profiles = [], isLoading: sessLoading } = useQuery({
+    queryKey: ['space-browser-sessions', spaceId],
+    queryFn: () => listBrowserSessionProfiles(spaceId),
+  });
+  const delSess = useMutation({
+    mutationFn: (id: number) => deleteBrowserSessionProfile(id, spaceId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-sessions', spaceId] }),
+    onError: (e) => showToast?.(`セッションの削除に失敗しました: ${errMsg(e)}`, 'error'),
+  });
+  const testSess = useMutation({
+    mutationFn: (id: number) => testBrowserSessionProfile(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-sessions', spaceId] }),
+    onError: (e) => showToast?.(`セッションの検証に失敗しました: ${errMsg(e)}`, 'error'),
+  });
+  const [adding, setAdding] = useState(false);
+
+  // ── マクロ / 録画 ───────────────────────────────────────────
+  const macros = useQuery({
+    queryKey: ['space-browser-macros', spaceId],
+    queryFn: () => listFolderFiles('browser-macros', spaceId),
+  });
+  const recordings = useQuery({
+    queryKey: ['space-browser-recordings', spaceId],
+    queryFn: () => listFolderFiles('recordings', spaceId),
+  });
+  const delMacro = useMutation({
+    mutationFn: (name: string) => deleteFolderFile('browser-macros', name, spaceId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-macros', spaceId] }),
+    onError: (e) => showToast?.(`削除に失敗しました: ${errMsg(e)}`, 'error'),
+  });
+  const delRecording = useMutation({
+    mutationFn: (name: string) => deleteFolderFile('recordings', name, spaceId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-recordings', spaceId] }),
+    onError: (e) => showToast?.(`削除に失敗しました: ${errMsg(e)}`, 'error'),
+  });
+
+  // ファイル内容プレビュー（マクロ・録画共通）。
+  const [preview, setPreview] = useState<{ name: string; content: string } | null>(null);
+  async function openPreview(subdir: 'browser-macros' | 'recordings', name: string) {
+    try {
+      const content = await getFolderFile(subdir, name, spaceId);
+      setPreview({ name, content });
+    } catch (e) {
+      showToast?.(`内容の取得に失敗しました: ${errMsg(e)}`, 'error');
+    }
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6" data-testid="space-browser-panel">
+      <div className="max-w-2xl space-y-8">
+        {/* ── セッション ── */}
+        <section data-testid="space-browser-sessions">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-base font-semibold text-slate-800">ブラウザセッション</h2>
+            {canManage && (
+              <button
+                type="button"
+                data-testid="space-browser-add-session"
+                onClick={() => setAdding(true)}
+                className="rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-fg hover:bg-accent-deep"
+              >
+                セッションを追加
+              </button>
+            )}
+          </div>
+          <p className="mb-3 text-xs text-slate-500">
+            このワークスペースで共有するログイン済みブラウザセッション。各セッションは
+            作成者の鍵で暗号化されるため、利用できるのは作成した本人だけです。
+          </p>
+
+          {sessLoading && <div className="text-xs text-slate-500">読み込み中…</div>}
+
+          <div className="divide-y divide-hairline rounded-md border border-hairline">
+            {profiles.length === 0 && !sessLoading && (
+              <div className="px-3 py-6 text-center text-xs text-slate-400">
+                <div>このワークスペースにはまだブラウザセッションがありません。</div>
+                {canManage && <div className="mt-1">「セッションを追加」からログインして保存してください。</div>}
+              </div>
+            )}
+            {profiles.map(p => {
+              const usable = p.decryptableByViewer !== false;
+              return (
+                <div key={p.id} data-testid={`space-browser-session-${p.id}`} className="flex items-center justify-between px-3 py-2">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="truncate text-[13px] font-medium text-slate-800">{p.label}</span>
+                      <StatusPill status={p.status} />
+                      {!usable && (
+                        <span className="inline-flex items-center rounded bg-slate-200 px-2 py-0.5 text-2xs font-medium text-slate-600">
+                          作成者のみ利用可
+                        </span>
+                      )}
+                    </div>
+                    <div className="truncate text-2xs text-slate-500">{p.startUrl}</div>
+                    {p.lastError && <div className="truncate text-2xs text-rose-600">{p.lastError}</div>}
+                    {!usable && (
+                      <div className="text-2xs text-slate-400">
+                        このセッションは作成者の鍵で暗号化されています。閲覧はできますが、別のメンバーは復号・利用できません。
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    {usable && (
+                      <button
+                        type="button"
+                        onClick={() => testSess.mutate(p.id)}
+                        disabled={testSess.isPending}
+                        className="rounded px-2 py-1 text-xs text-slate-700 hover:bg-surface hover:text-slate-900 disabled:opacity-50"
+                      >
+                        検証
+                      </button>
+                    )}
+                    {canManage && (
+                      <button
+                        type="button"
+                        onClick={() => { if (confirm(`「${p.label}」を削除しますか？`)) delSess.mutate(p.id); }}
+                        className="rounded px-2 py-1 text-xs text-rose-600 hover:bg-rose-50 hover:text-rose-800 dark:hover:bg-rose-500/15 dark:hover:text-rose-300"
+                      >
+                        削除
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* ── マクロ ── */}
+        <FolderSection
+          title="ブラウザマクロ"
+          testid="space-browser-macros"
+          subdir="browser-macros"
+          query={macros}
+          emptyText="このワークスペースにはまだブラウザマクロがありません。"
+          hint="エージェントがブラウザ操作を記録すると、このワークスペースのマクロとして保存されます。"
+          canManage={canManage}
+          onView={(name) => openPreview('browser-macros', name)}
+          onDelete={(name) => { if (confirm(`「${name}」を削除しますか？`)) delMacro.mutate(name); }}
+        />
+
+        {/* ── 録画 ── */}
+        <FolderSection
+          title="録画"
+          testid="space-browser-recordings"
+          subdir="recordings"
+          query={recordings}
+          emptyText="このワークスペースにはまだ録画がありません。"
+          hint="ブラウザ操作の記録（録画）がこのワークスペースのフォルダに保存されます。"
+          canManage={canManage}
+          onView={(name) => openPreview('recordings', name)}
+          onDelete={(name) => { if (confirm(`「${name}」を削除しますか？`)) delRecording.mutate(name); }}
+        />
+      </div>
+
+      {adding && (
+        <AddBrowserSessionDialog spaceId={spaceId} onClose={() => setAdding(false)} />
+      )}
+
+      {preview && (
+        <FilePreview name={preview.name} content={preview.content} imageSrc="" onClose={() => setPreview(null)} />
+      )}
+    </div>
+  );
+}
+
+interface FolderSectionProps {
+  title: string;
+  testid: string;
+  subdir: 'browser-macros' | 'recordings';
+  query: { data?: { name: string; size: number; mtime: string }[]; isLoading: boolean };
+  emptyText: string;
+  hint: string;
+  canManage: boolean;
+  onView: (name: string) => void;
+  onDelete: (name: string) => void;
+}
+
+function FolderSection({ title, testid, query, emptyText, hint, canManage, onView, onDelete }: FolderSectionProps) {
+  const files = query.data ?? [];
+  return (
+    <section data-testid={testid}>
+      <h2 className="mb-2 text-base font-semibold text-slate-800">{title}</h2>
+      <p className="mb-3 text-xs text-slate-500">{hint}</p>
+      {query.isLoading && <div className="text-xs text-slate-500">読み込み中…</div>}
+      <div className="divide-y divide-hairline rounded-md border border-hairline">
+        {files.length === 0 && !query.isLoading && (
+          <div className="px-3 py-6 text-center text-xs text-slate-400">{emptyText}</div>
+        )}
+        {files.map(f => (
+          <div key={f.name} className="flex items-center justify-between px-3 py-2">
+            <button
+              type="button"
+              onClick={() => onView(f.name)}
+              className="min-w-0 flex-1 text-left"
+            >
+              <div className="truncate text-[13px] font-medium text-slate-800">{f.name}</div>
+              <div className="text-2xs text-slate-400">{(f.size / 1024).toFixed(1)} KB · {new Date(f.mtime).toLocaleString()}</div>
+            </button>
+            {canManage && (
+              <button
+                type="button"
+                onClick={() => onDelete(f.name)}
+                className="ml-2 shrink-0 rounded px-2 py-1 text-xs text-rose-600 hover:bg-rose-50 hover:text-rose-800 dark:hover:bg-rose-500/15 dark:hover:text-rose-300"
+              >
+                削除
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}