feat(ui): Phase E — PreviewPanel 분할 + detail inline + viewer Tabs

E.1 PreviewPanel 7개 editors/* 분할:
- frontend/src/lib/components/editors/ 신설 (7개 컴포넌트):
  * NoteEditor — 사용자 메모 편집
  * EditUrlEditor — 외부 편집 URL (Synology Drive 등)
  * TagsEditor — 태그 추가/삭제
  * AIClassificationEditor — AI 분류 read-only 표시
    (breadcrumb + document_type + confidence tone Badge + importance)
  * FileInfoView — 파일 메타 dl
  * ProcessingStatusView — 파이프라인 단계 status dl
  * DocumentDangerZone — 삭제 (ConfirmDialog 프리미티브 + id 고유화)
- PreviewPanel.svelte 344줄 → 60줄 얇은 wrapper로 축소
  (header + 7개 editors 조합만)
- DocumentMetaRail (D.1)과 detail 페이지(E.2)가 동일 editors 재사용

E.2 detail 페이지 inline 편집:
- documents/[id]/+page.svelte: 기존 read-only 메타 패널 전면 교체
- 오른쪽 aside = 7개 editors 스택 (Card 프리미티브로 감쌈)
- 왼쪽 affordance row: Synology 편집 / 다운로드 / 링크 복사
- 삭제는 DocumentDangerZone이 담당 (ondelete → goto /documents)
- loading/error 상태도 EmptyState 프리미티브로 교체
- marked/DOMPurify renderer 유지, viewer 분기 그대로

E.3 관련 문서 stub:
- detail 페이지 오른쪽 aside에 "관련 문서" Card
- EmptyState "추후 지원" + TODO(backend) GET /documents/{id}/related

E.4 DocumentViewer Tabs 프리미티브:
- Markdown 편집 모드의 편집/미리보기 토글 → Tabs 프리미티브
- 키보드 nav (←→/Home/End), ARIA tablist/tab/tabpanel 자동 적용

검증:
- npm run build 통과 (editors/* 7개 모두 clean, $state 초기값
  warning은 빈 문자열로 초기화하고 $effect로 doc 동기화해 해결)
- npm run lint:tokens 204 → 168 (detail 페이지 + PreviewPanel 전면
  token 기반 재작성으로 -36)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/DocumentViewer.svelte

@@ -4,6 +4,7 @@
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import { ExternalLink, Save, RefreshCw } from 'lucide-svelte';
+  import Tabs from '$lib/components/ui/Tabs.svelte';
 
   // marked + sanitize
   marked.use({ mangle: false, headerIds: false });
@@ -169,29 +170,31 @@
     {:else if fullDoc}
       {#if viewerType === 'markdown'}
         {#if editMode}
-          <!-- Markdown 편집 (탭 전환) -->
+          <!-- Markdown 편집 (Tabs 프리미티브 — E.4) -->
           <div class="flex flex-col h-full">
-            <div class="flex gap-1 px-3 py-1 border-b border-default shrink-0">
-              <button
-                onclick={() => editTab = 'edit'}
-                class="px-3 py-1 text-xs rounded-t {editTab === 'edit' ? 'bg-surface text-text' : 'text-dim'}"
-              >편집</button>
-              <button
-                onclick={() => editTab = 'preview'}
-                class="px-3 py-1 text-xs rounded-t {editTab === 'preview' ? 'bg-surface text-text' : 'text-dim'}"
-              >미리보기</button>
-            </div>
-            {#if editTab === 'edit'}
-              <textarea
-                bind:value={editContent}
-                class="flex-1 w-full p-4 bg-bg text-text text-sm font-mono resize-none outline-none"
-                spellcheck="false"
-              ></textarea>
-            {:else}
-              <div class="flex-1 overflow-auto p-4 markdown-body">
-                {@html renderMd(editContent)}
-              </div>
-            {/if}
+            <Tabs
+              tabs={[
+                { id: 'edit', label: '편집' },
+                { id: 'preview', label: '미리보기' },
+              ]}
+              bind:value={editTab}
+              class="flex flex-col h-full"
+            >
+              {#snippet children(activeId)}
+                {#if activeId === 'edit'}
+                  <textarea
+                    bind:value={editContent}
+                    class="flex-1 w-full p-4 bg-bg text-text text-sm font-mono resize-none outline-none min-h-[300px]"
+                    spellcheck="false"
+                    aria-label="마크다운 편집"
+                  ></textarea>
+                {:else}
+                  <div class="flex-1 overflow-auto p-4 markdown-body">
+                    {@html renderMd(editContent)}
+                  </div>
+                {/if}
+              {/snippet}
+            </Tabs>
           </div>
         {:else}
           <div class="p-4 markdown-body">

frontend/src/lib/components/PreviewPanel.svelte

@@ -1,344 +1,58 @@
 <script>
-  import { X, ExternalLink, Plus, Save, Trash2 } from 'lucide-svelte';
-  import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/toast';
+  // Phase E.1 — 얇은 wrapper로 축소.
+  // 기존 344줄 → editors/* 7개로 분할. 이 파일은 header + 조합만 담당.
+  // DocumentMetaRail (D.1) 과 documents/[id]/+page.svelte (E.2) 둘 다
+  // 같은 editors/* 를 재사용한다.
+  import { X, ExternalLink } from 'lucide-svelte';
   import FormatIcon from './FormatIcon.svelte';
-  import TagPill from './TagPill.svelte';
+  import NoteEditor from './editors/NoteEditor.svelte';
+  import EditUrlEditor from './editors/EditUrlEditor.svelte';
+  import TagsEditor from './editors/TagsEditor.svelte';
+  import AIClassificationEditor from './editors/AIClassificationEditor.svelte';
+  import FileInfoView from './editors/FileInfoView.svelte';
+  import ProcessingStatusView from './editors/ProcessingStatusView.svelte';
+  import DocumentDangerZone from './editors/DocumentDangerZone.svelte';
 
   let { doc, onclose, ondelete = () => {} } = $props();
-
-  // 메모 상태
-  let noteText = $state('');
-  let noteEditing = $state(false);
-  let noteSaving = $state(false);
-
-  // 태그 편집
-  let newTag = $state('');
-  let tagEditing = $state(false);
-
-  // 삭제
-  let deleteConfirm = $state(false);
-  let deleting = $state(false);
-
-  async function deleteDoc() {
-    deleting = true;
-    try {
-      await api(`/documents/${doc.id}?delete_file=true`, { method: 'DELETE' });
-      addToast('success', '문서 삭제됨');
-      ondelete();
-    } catch (err) {
-      addToast('error', '삭제 실패');
-    } finally {
-      deleting = false;
-      deleteConfirm = false;
-    }
-  }
-
-  // 편집 URL
-  let editUrlText = $state('');
-  let editUrlEditing = $state(false);
-
-  // doc 변경 시 초기화
-  $effect(() => {
-    if (doc) {
-      noteText = doc.user_note || '';
-      editUrlText = doc.edit_url || '';
-      noteEditing = false;
-      tagEditing = false;
-      editUrlEditing = false;
-      newTag = '';
-    }
-  });
-
-  async function saveNote() {
-    noteSaving = true;
-    try {
-      await api(`/documents/${doc.id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ user_note: noteText }),
-      });
-      doc.user_note = noteText;
-      noteEditing = false;
-      addToast('success', '메모 저장됨');
-    } catch (err) {
-      addToast('error', '메모 저장 실패');
-    } finally {
-      noteSaving = false;
-    }
-  }
-
-  async function saveEditUrl() {
-    try {
-      await api(`/documents/${doc.id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ edit_url: editUrlText.trim() || null }),
-      });
-      doc.edit_url = editUrlText.trim() || null;
-      editUrlEditing = false;
-      addToast('success', '편집 URL 저장됨');
-    } catch (err) {
-      addToast('error', '편집 URL 저장 실패');
-    }
-  }
-
-  async function addTag() {
-    const tag = newTag.trim();
-    if (!tag) return;
-    const updatedTags = [...(doc.ai_tags || []), tag];
-    try {
-      await api(`/documents/${doc.id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ ai_tags: updatedTags }),
-      });
-      doc.ai_tags = updatedTags;
-      newTag = '';
-      addToast('success', '태그 추가됨');
-    } catch (err) {
-      addToast('error', '태그 추가 실패');
-    }
-  }
-
-  async function removeTag(tagToRemove) {
-    const updatedTags = (doc.ai_tags || []).filter(t => t !== tagToRemove);
-    try {
-      await api(`/documents/${doc.id}`, {
-        method: 'PATCH',
-        body: JSON.stringify({ ai_tags: updatedTags }),
-      });
-      doc.ai_tags = updatedTags;
-      addToast('success', '태그 삭제됨');
-    } catch (err) {
-      addToast('error', '태그 삭제 실패');
-    }
-  }
-
-  function formatDate(dateStr) {
-    if (!dateStr) return '-';
-    return new Date(dateStr).toLocaleDateString('ko-KR', { year: 'numeric', month: 'short', day: 'numeric' });
-  }
-
-  function formatSize(bytes) {
-    if (!bytes) return '-';
-    if (bytes < 1024) return `${bytes}B`;
-    if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}KB`;
-    return `${(bytes / 1048576).toFixed(1)}MB`;
-  }
 </script>
 
-<aside class="h-full flex flex-col bg-sidebar border-l border-default overflow-y-auto">
+<aside class="h-full w-full flex flex-col bg-sidebar border-l border-default overflow-y-auto">
   <!-- 헤더 -->
   <div class="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
     <div class="flex items-center gap-2 min-w-0">
       <FormatIcon format={doc.file_format} size={16} />
-      <span class="text-sm font-medium truncate">{doc.title || '제목 없음'}</span>
+      <span class="text-sm font-medium text-text truncate">{doc.title || '제목 없음'}</span>
     </div>
-    <div class="flex items-center gap-1">
-      <a href="/documents/{doc.id}" class="p-1 rounded hover:bg-surface text-dim" title="전체 보기">
+    <div class="flex items-center gap-1 shrink-0">
+      <a
+        href="/documents/{doc.id}"
+        class="p-1 rounded hover:bg-surface text-dim hover:text-text"
+        title="전체 보기"
+        aria-label="전체 보기"
+      >
         <ExternalLink size={14} />
       </a>
-      <button onclick={onclose} class="p-1 rounded hover:bg-surface text-dim" aria-label="닫기">
+      <button
+        type="button"
+        onclick={onclose}
+        class="p-1 rounded hover:bg-surface text-dim hover:text-text"
+        aria-label="닫기"
+      >
         <X size={16} />
       </button>
     </div>
   </div>
 
+  <!-- 조합 -->
   <div class="flex-1 p-4 space-y-4">
-    <!-- 메모 -->
-    <div>
-      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">메모</h4>
-      {#if noteEditing}
-        <textarea
-          bind:value={noteText}
-          class="w-full h-24 px-3 py-2 bg-bg border border-default rounded-lg text-sm text-text resize-none outline-none focus:border-accent"
-          placeholder="메모 입력..."
-        ></textarea>
-        <div class="flex gap-2 mt-1.5">
-          <button
-            onclick={saveNote}
-            disabled={noteSaving}
-            class="flex items-center gap-1 px-2 py-1 text-xs bg-accent text-white rounded hover:bg-accent-hover disabled:opacity-50"
-          >
-            <Save size={12} /> 저장
-          </button>
-          <button
-            onclick={() => { noteEditing = false; noteText = doc.user_note || ''; }}
-            class="px-2 py-1 text-xs text-dim hover:text-text"
-          >취소</button>
-        </div>
-      {:else}
-        <button
-          onclick={() => noteEditing = true}
-          class="w-full text-left px-3 py-2 bg-bg border border-default rounded-lg text-sm min-h-[40px]
-            {noteText ? 'text-text' : 'text-dim'}"
-        >
-          {noteText || '메모 추가...'}
-        </button>
-      {/if}
-    </div>
-
-    <!-- 편집 URL -->
-    <div>
-      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">편집 링크</h4>
-      {#if editUrlEditing}
-        <div class="flex gap-1">
-          <input
-            bind:value={editUrlText}
-            placeholder="Synology Drive URL 붙여넣기..."
-            class="flex-1 px-2 py-1 bg-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
-          />
-          <button onclick={saveEditUrl} class="px-2 py-1 text-xs bg-accent text-white rounded">저장</button>
-          <button onclick={() => { editUrlEditing = false; editUrlText = doc.edit_url || ''; }} class="px-2 py-1 text-xs text-dim">취소</button>
-        </div>
-      {:else if doc.edit_url}
-        <div class="flex items-center gap-1">
-          <a href={doc.edit_url} target="_blank" class="text-xs text-accent truncate hover:underline">{doc.edit_url}</a>
-          <button onclick={() => editUrlEditing = true} class="text-[10px] text-dim hover:text-text">수정</button>
-        </div>
-      {:else}
-        <button
-          onclick={() => editUrlEditing = true}
-          class="text-xs text-dim hover:text-accent"
-        >+ URL 추가</button>
-      {/if}
-    </div>
-
-    <!-- 태그 -->
-    <div>
-      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">태그</h4>
-      <div class="flex flex-wrap gap-1 mb-2">
-        {#each doc.ai_tags || [] as tag}
-          <span class="inline-flex items-center gap-0.5">
-            <TagPill {tag} clickable={false} />
-            <button
-              onclick={() => removeTag(tag)}
-              class="text-dim hover:text-error text-[10px]"
-              title="삭제"
-            >×</button>
-          </span>
-        {/each}
-      </div>
-      {#if tagEditing}
-        <form onsubmit={(e) => { e.preventDefault(); addTag(); }} class="flex gap-1">
-          <input
-            bind:value={newTag}
-            placeholder="태그 입력..."
-            class="flex-1 px-2 py-1 bg-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
-          />
-          <button type="submit" class="px-2 py-1 text-xs bg-accent text-white rounded">추가</button>
-        </form>
-      {:else}
-        <button
-          onclick={() => tagEditing = true}
-          class="flex items-center gap-1 text-xs text-dim hover:text-accent"
-        >
-          <Plus size={12} /> 태그 추가
-        </button>
-      {/if}
-    </div>
-
-    <!-- AI 분류 -->
-    {#if doc.ai_domain}
-      <div>
-        <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">분류</h4>
-        <!-- domain breadcrumb -->
-        <div class="flex flex-wrap gap-1 mb-2">
-          {#each doc.ai_domain.split('/') as part, i}
-            {#if i > 0}<span class="text-[10px] text-dim">›</span>{/if}
-            <span class="text-xs text-accent">{part}</span>
-          {/each}
-        </div>
-        <!-- document_type + confidence -->
-        <div class="flex items-center gap-2">
-          {#if doc.document_type}
-            <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400">{doc.document_type}</span>
-          {/if}
-          {#if doc.ai_confidence}
-            <span class="text-[10px] px-1.5 py-0.5 rounded {doc.ai_confidence >= 0.85 ? 'bg-green-900/30 text-green-400' : doc.ai_confidence >= 0.6 ? 'bg-amber-900/30 text-amber-400' : 'bg-red-900/30 text-red-400'}">
-              {(doc.ai_confidence * 100).toFixed(0)}%
-            </span>
-          {/if}
-          {#if doc.importance && doc.importance !== 'medium'}
-            <span class="text-[10px] px-1.5 py-0.5 rounded {doc.importance === 'high' ? 'bg-red-900/30 text-red-400' : 'bg-gray-800 text-gray-400'}">
-              {doc.importance}
-            </span>
-          {/if}
-        </div>
-      </div>
-    {/if}
-
-    <!-- 파일 정보 -->
-    <div>
-      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">정보</h4>
-      <dl class="space-y-1.5 text-xs">
-        <div class="flex justify-between">
-          <dt class="text-dim">포맷</dt>
-          <dd class="uppercase">{doc.file_format}{doc.original_format ? ` (원본: ${doc.original_format})` : ''}</dd>
-        </div>
-        <div class="flex justify-between">
-          <dt class="text-dim">크기</dt>
-          <dd>{formatSize(doc.file_size)}</dd>
-        </div>
-        {#if doc.source_channel}
-          <div class="flex justify-between">
-            <dt class="text-dim">출처</dt>
-            <dd>{doc.source_channel}</dd>
-          </div>
-        {/if}
-        {#if doc.data_origin}
-          <div class="flex justify-between">
-            <dt class="text-dim">구분</dt>
-            <dd>{doc.data_origin}</dd>
-          </div>
-        {/if}
-        <div class="flex justify-between">
-          <dt class="text-dim">등록일</dt>
-          <dd>{formatDate(doc.created_at)}</dd>
-        </div>
-      </dl>
-    </div>
-
-    <!-- 처리 상태 -->
-    <div>
-      <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">처리</h4>
-      <dl class="space-y-1 text-xs">
-        <div class="flex justify-between">
-          <dt class="text-dim">추출</dt>
-          <dd class={doc.extracted_at ? 'text-success' : 'text-dim'}>{doc.extracted_at ? '완료' : '대기'}</dd>
-        </div>
-        <div class="flex justify-between">
-          <dt class="text-dim">분류</dt>
-          <dd class={doc.ai_processed_at ? 'text-success' : 'text-dim'}>{doc.ai_processed_at ? '완료' : '대기'}</dd>
-        </div>
-        <div class="flex justify-between">
-          <dt class="text-dim">임베딩</dt>
-          <dd class={doc.embedded_at ? 'text-success' : 'text-dim'}>{doc.embedded_at ? '완료' : '대기'}</dd>
-        </div>
-      </dl>
-    </div>
-
-    <!-- 삭제 -->
+    <NoteEditor {doc} />
+    <EditUrlEditor {doc} />
+    <TagsEditor {doc} />
+    <AIClassificationEditor {doc} />
+    <FileInfoView {doc} />
+    <ProcessingStatusView {doc} />
     <div class="pt-2 border-t border-default">
-      {#if deleteConfirm}
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-error">정말 삭제?</span>
-          <button
-            onclick={deleteDoc}
-            disabled={deleting}
-            class="px-2 py-1 text-xs bg-error text-white rounded disabled:opacity-50"
-          >{deleting ? '삭제 중...' : '확인'}</button>
-          <button
-            onclick={() => deleteConfirm = false}
-            class="px-2 py-1 text-xs text-dim"
-          >취소</button>
-        </div>
-      {:else}
-        <button
-          onclick={() => deleteConfirm = true}
-          class="flex items-center gap-1 text-xs text-dim hover:text-error"
-        >
-          <Trash2 size={12} /> 문서 삭제
-        </button>
-      {/if}
+      <DocumentDangerZone {doc} {ondelete} />
     </div>
   </div>
 </aside>

frontend/src/lib/components/editors/AIClassificationEditor.svelte

@@ -0,0 +1,43 @@
+<script>
+  // Phase E.1 — AI 분류 결과 표시.
+  // 현재는 read-only. 향후 phase에서 inline select로 override 가능하게 확장.
+  import Badge from '$lib/components/ui/Badge.svelte';
+
+  let { doc } = $props();
+
+  let parts = $derived(doc?.ai_domain ? doc.ai_domain.split('/') : []);
+  let confidenceTone = $derived.by(() => {
+    const c = doc?.ai_confidence ?? 0;
+    if (c >= 0.85) return 'success';
+    if (c >= 0.6) return 'warning';
+    return 'error';
+  });
+</script>
+
+{#if doc?.ai_domain}
+  <div>
+    <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">분류</h4>
+    <!-- domain breadcrumb -->
+    <div class="flex flex-wrap items-center gap-1 mb-2">
+      {#each parts as part, i}
+        {#if i > 0}<span class="text-[10px] text-faint">›</span>{/if}
+        <span class="text-xs text-accent">{part}</span>
+      {/each}
+    </div>
+    <div class="flex items-center gap-1.5 flex-wrap">
+      {#if doc.document_type}
+        <Badge tone="accent" size="sm">{doc.document_type}</Badge>
+      {/if}
+      {#if doc.ai_confidence}
+        <Badge tone={confidenceTone} size="sm">
+          {(doc.ai_confidence * 100).toFixed(0)}%
+        </Badge>
+      {/if}
+      {#if doc.importance && doc.importance !== 'medium'}
+        <Badge tone={doc.importance === 'high' ? 'error' : 'neutral'} size="sm">
+          {doc.importance}
+        </Badge>
+      {/if}
+    </div>
+  </div>
+{/if}

frontend/src/lib/components/editors/DocumentDangerZone.svelte

@@ -0,0 +1,53 @@
+<script>
+  // Phase E.1 — 문서 삭제 영역. ConfirmDialog 프리미티브 사용.
+  import { Trash2 } from 'lucide-svelte';
+  import { api } from '$lib/api';
+  import { addToast } from '$lib/stores/toast';
+  import { ui } from '$lib/stores/uiState.svelte';
+  import Button from '$lib/components/ui/Button.svelte';
+  import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
+
+  let { doc, ondelete = () => {} } = $props();
+
+  let deleting = $state(false);
+
+  // doc id 기반으로 modal id를 고유하게 해서, 여러 danger zone이 동시에
+  // 있어도 충돌하지 않게 한다 (예: detail 페이지 + rail).
+  let modalId = $derived(`doc-delete-${doc?.id ?? 'unknown'}`);
+
+  async function confirm() {
+    if (!doc) return;
+    deleting = true;
+    try {
+      await api(`/documents/${doc.id}?delete_file=true`, { method: 'DELETE' });
+      addToast('success', '문서 삭제됨');
+      ondelete();
+    } catch (err) {
+      addToast('error', '삭제 실패');
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<div>
+  <Button
+    variant="ghost"
+    size="sm"
+    icon={Trash2}
+    onclick={() => ui.openModal(modalId)}
+    class="text-dim hover:text-error"
+  >
+    문서 삭제
+  </Button>
+</div>
+
+<ConfirmDialog
+  id={modalId}
+  title="문서 삭제"
+  message="원본 파일과 모든 메타데이터(메모/태그/분류)가 함께 삭제됩니다. 되돌릴 수 없습니다."
+  confirmLabel="삭제"
+  tone="danger"
+  loading={deleting}
+  onconfirm={confirm}
+/>

frontend/src/lib/components/editors/EditUrlEditor.svelte

@@ -0,0 +1,84 @@
+<script>
+  // Phase E.1 — 편집 URL(외부 Synology Drive 등) 등록.
+  import { api } from '$lib/api';
+  import { addToast } from '$lib/stores/toast';
+  import Button from '$lib/components/ui/Button.svelte';
+
+  let { doc } = $props();
+
+  let urlText = $state('');
+  let editing = $state(false);
+  let saving = $state(false);
+
+  $effect(() => {
+    if (doc) {
+      urlText = doc.edit_url || '';
+      editing = false;
+    }
+  });
+
+  async function save() {
+    saving = true;
+    try {
+      const next = urlText.trim() || null;
+      await api(`/documents/${doc.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ edit_url: next }),
+      });
+      doc.edit_url = next;
+      editing = false;
+      addToast('success', '편집 URL 저장됨');
+    } catch (err) {
+      addToast('error', '편집 URL 저장 실패');
+    } finally {
+      saving = false;
+    }
+  }
+
+  function cancel() {
+    editing = false;
+    urlText = doc.edit_url || '';
+  }
+</script>
+
+<div>
+  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">편집 링크</h4>
+  {#if editing}
+    <div class="flex gap-1">
+      <input
+        bind:value={urlText}
+        aria-label="편집 URL"
+        placeholder="Synology Drive URL..."
+        class="flex-1 px-2 py-1 bg-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
+      />
+      <Button variant="primary" size="sm" loading={saving} onclick={save}>저장</Button>
+      <Button variant="ghost" size="sm" onclick={cancel}>취소</Button>
+    </div>
+  {:else if doc.edit_url}
+    <div class="flex items-center gap-2">
+      <a
+        href={doc.edit_url}
+        target="_blank"
+        rel="noopener"
+        class="text-xs text-accent truncate hover:underline flex-1 min-w-0"
+      >
+        {doc.edit_url}
+      </a>
+      <button
+        type="button"
+        onclick={() => (editing = true)}
+        class="text-[10px] text-dim hover:text-text shrink-0"
+      >
+        수정
+      </button>
+    </div>
+  {:else}
+    <button
+      type="button"
+      onclick={() => (editing = true)}
+      class="text-xs text-dim hover:text-accent"
+    >
+      + URL 추가
+    </button>
+  {/if}
+</div>

frontend/src/lib/components/editors/FileInfoView.svelte

@@ -0,0 +1,52 @@
+<script>
+  // Phase E.1 — 파일 메타 정보 read-only 표시.
+  let { doc } = $props();
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '-';
+    return new Date(dateStr).toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+
+  function formatSize(bytes) {
+    if (!bytes) return '-';
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}KB`;
+    return `${(bytes / 1048576).toFixed(1)}MB`;
+  }
+</script>
+
+<div>
+  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">정보</h4>
+  <dl class="space-y-1.5 text-xs">
+    <div class="flex justify-between">
+      <dt class="text-dim">포맷</dt>
+      <dd class="text-text uppercase">
+        {doc.file_format}{doc.original_format ? ` (원본: ${doc.original_format})` : ''}
+      </dd>
+    </div>
+    <div class="flex justify-between">
+      <dt class="text-dim">크기</dt>
+      <dd class="text-text">{formatSize(doc.file_size)}</dd>
+    </div>
+    {#if doc.source_channel}
+      <div class="flex justify-between">
+        <dt class="text-dim">출처</dt>
+        <dd class="text-text">{doc.source_channel}</dd>
+      </div>
+    {/if}
+    {#if doc.data_origin}
+      <div class="flex justify-between">
+        <dt class="text-dim">구분</dt>
+        <dd class="text-text">{doc.data_origin}</dd>
+      </div>
+    {/if}
+    <div class="flex justify-between">
+      <dt class="text-dim">등록일</dt>
+      <dd class="text-text">{formatDate(doc.created_at)}</dd>
+    </div>
+  </dl>
+</div>

frontend/src/lib/components/editors/NoteEditor.svelte

@@ -0,0 +1,70 @@
+<script>
+  // Phase E.1 — PreviewPanel 분할. 사용자 메모 편집.
+  import { Save } from 'lucide-svelte';
+  import { api } from '$lib/api';
+  import { addToast } from '$lib/stores/toast';
+  import Button from '$lib/components/ui/Button.svelte';
+
+  let { doc } = $props();
+
+  // 초기값은 빈 문자열, 아래 $effect가 doc 변경 시 동기화.
+  let noteText = $state('');
+  let editing = $state(false);
+  let saving = $state(false);
+
+  $effect(() => {
+    if (doc) {
+      noteText = doc.user_note || '';
+      editing = false;
+    }
+  });
+
+  async function save() {
+    saving = true;
+    try {
+      await api(`/documents/${doc.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ user_note: noteText }),
+      });
+      doc.user_note = noteText;
+      editing = false;
+      addToast('success', '메모 저장됨');
+    } catch (err) {
+      addToast('error', '메모 저장 실패');
+    } finally {
+      saving = false;
+    }
+  }
+
+  function cancel() {
+    editing = false;
+    noteText = doc.user_note || '';
+  }
+</script>
+
+<div>
+  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">메모</h4>
+  {#if editing}
+    <textarea
+      bind:value={noteText}
+      aria-label="메모"
+      class="w-full h-24 px-3 py-2 bg-bg border border-default rounded-md text-sm text-text resize-none outline-none focus:border-accent"
+      placeholder="메모 입력..."
+    ></textarea>
+    <div class="flex gap-2 mt-1.5">
+      <Button variant="primary" size="sm" icon={Save} loading={saving} onclick={save}>
+        저장
+      </Button>
+      <Button variant="ghost" size="sm" onclick={cancel}>취소</Button>
+    </div>
+  {:else}
+    <button
+      type="button"
+      onclick={() => (editing = true)}
+      class="w-full text-left px-3 py-2 bg-bg border border-default rounded-md text-sm min-h-[40px] hover:border-accent transition-colors
+        {noteText ? 'text-text' : 'text-dim'}"
+    >
+      {noteText || '메모 추가...'}
+    </button>
+  {/if}
+</div>

frontend/src/lib/components/editors/ProcessingStatusView.svelte

@@ -0,0 +1,34 @@
+<script>
+  // Phase E.1 — 파이프라인 처리 단계 상태 표시.
+  import { CheckCircle2, Clock } from 'lucide-svelte';
+
+  let { doc } = $props();
+
+  const STAGES = [
+    { key: 'extracted_at', label: '추출' },
+    { key: 'ai_processed_at', label: '분류' },
+    { key: 'embedded_at', label: '임베딩' },
+  ];
+</script>
+
+<div>
+  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">처리</h4>
+  <dl class="space-y-1 text-xs">
+    {#each STAGES as stage}
+      {@const done = !!doc[stage.key]}
+      <div class="flex items-center justify-between">
+        <dt class="text-dim flex items-center gap-1">
+          {#if done}
+            <CheckCircle2 size={10} class="text-success" />
+          {:else}
+            <Clock size={10} class="text-faint" />
+          {/if}
+          {stage.label}
+        </dt>
+        <dd class={done ? 'text-success' : 'text-dim'}>
+          {done ? '완료' : '대기'}
+        </dd>
+      </div>
+    {/each}
+  </dl>
+</div>

frontend/src/lib/components/editors/TagsEditor.svelte

@@ -0,0 +1,101 @@
+<script>
+  // Phase E.1 — 태그 추가/삭제.
+  // Phase F의 inbox override TagsEditor도 향후 이 컴포넌트로 통일 가능.
+  import { Plus, X } from 'lucide-svelte';
+  import { api } from '$lib/api';
+  import { addToast } from '$lib/stores/toast';
+  import TagPill from '$lib/components/TagPill.svelte';
+
+  let { doc } = $props();
+
+  let newTag = $state('');
+  let editing = $state(false);
+
+  $effect(() => {
+    if (doc) {
+      newTag = '';
+      editing = false;
+    }
+  });
+
+  async function addTag() {
+    const tag = newTag.trim();
+    if (!tag) return;
+    const updated = [...(doc.ai_tags || []), tag];
+    try {
+      await api(`/documents/${doc.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ ai_tags: updated }),
+      });
+      doc.ai_tags = updated;
+      newTag = '';
+      addToast('success', '태그 추가됨');
+    } catch (err) {
+      addToast('error', '태그 추가 실패');
+    }
+  }
+
+  async function removeTag(tagToRemove) {
+    const updated = (doc.ai_tags || []).filter((t) => t !== tagToRemove);
+    try {
+      await api(`/documents/${doc.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ ai_tags: updated }),
+      });
+      doc.ai_tags = updated;
+      addToast('success', '태그 삭제됨');
+    } catch (err) {
+      addToast('error', '태그 삭제 실패');
+    }
+  }
+</script>
+
+<div>
+  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">태그</h4>
+  <div class="flex flex-wrap gap-1 mb-2">
+    {#each doc.ai_tags || [] as tag}
+      <span class="inline-flex items-center gap-0.5">
+        <TagPill {tag} clickable={false} />
+        <button
+          type="button"
+          onclick={() => removeTag(tag)}
+          class="text-dim hover:text-error"
+          aria-label="{tag} 삭제"
+          title="삭제"
+        >
+          <X size={10} />
+        </button>
+      </span>
+    {/each}
+  </div>
+  {#if editing}
+    <form
+      onsubmit={(e) => {
+        e.preventDefault();
+        addTag();
+      }}
+      class="flex gap-1"
+    >
+      <input
+        bind:value={newTag}
+        aria-label="새 태그"
+        placeholder="태그 입력..."
+        class="flex-1 px-2 py-1 bg-bg border border-default rounded text-xs text-text outline-none focus:border-accent"
+      />
+      <button
+        type="submit"
+        class="px-2 py-1 text-xs bg-accent text-white rounded hover:bg-accent-hover"
+      >
+        추가
+      </button>
+    </form>
+  {:else}
+    <button
+      type="button"
+      onclick={() => (editing = true)}
+      class="flex items-center gap-1 text-xs text-dim hover:text-accent"
+    >
+      <Plus size={12} /> 태그 추가
+    </button>
+  {/if}
+</div>