feat: insert evidence directives from the TechLog asset picker

Adds an Asset Picker and upload dialog to the CASE editor so authors can
insert `:::evidence` directives that reference backend assets, and opens
projectWorkingCopy's two evidence gates so Instant Preview accepts a key
backed by a freshly loaded READY asset instead of only the one hardcoded
legacy key. The editor screen now owns the loaded Asset list so the
Picker, the upload dialog, and Instant Preview all read the same array,
and a freshly uploaded asset appears in the preview without a refetch.

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

src/features/tech-log/presentation/studio/components/asset-picker.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+
+import type { Asset } from "../../../contracts/studio/contract.ts";
+import type { StudioAssetGateway } from "../../../application/ports/studio-asset-gateway.ts";
+
+/**
+ * A directive attribute value is delimited by double quotes (see
+ * `parse-case-content.ts`'s `attributesOf`), so a value containing one would
+ * corrupt the directive -- and a raw newline would spill the directive across
+ * lines the block-directive parser does not expect inside an attribute. Both
+ * are stripped/folded rather than escaped: there is no escape syntax the
+ * parser accepts inside a directive attribute.
+ */
+function attributeValue(raw: string): string {
+  return raw.replaceAll('"', "").replace(/\s+/gu, " ").trim();
+}
+
+export function buildEvidenceDirective(
+  input: Readonly<{ assetKey: string; alt: string; caption: string; zoom: boolean }>,
+): string {
+  const key = attributeValue(input.assetKey);
+  const alt = attributeValue(input.alt);
+  const caption = attributeValue(input.caption);
+  return `:::evidence key="${key}" alt="${alt}" caption="${caption}" zoom="${input.zoom}"\n:::`;
+}
+
+export function AssetPicker({
+  gateway,
+  onInsert,
+  onLoaded,
+}: Readonly<{
+  gateway: StudioAssetGateway;
+  onInsert: (directive: string) => void;
+  /**
+   * Optional so Task 10 Step 1's original test (which renders `AssetPicker`
+   * without it) keeps passing. When supplied, the editor screen uses this to
+   * own the same Asset list the Instant Preview resolver reads -- so a
+   * directive this Picker just inserted renders immediately instead of as a
+   * placeholder.
+   */
+  onLoaded?: (assets: readonly Asset[]) => void;
+}>) {
+  const [assets, setAssets] = useState<readonly Asset[]>([]);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    gateway
+      .listAssets({ managementStatus: "READY", limit: 50 }, { signal: controller.signal })
+      .then((page) => {
+        setAssets(page.items);
+        onLoaded?.(page.items);
+      })
+      .catch(() => setFailed(true));
+    return () => controller.abort();
+  }, [gateway, onLoaded]);
+
+  // READY만 삽입 후보다. 서버 필터를 신뢰하되 방어적으로 한 번 더 거른다.
+  const selectable = assets.filter((asset) => asset.managementStatus === "READY");
+
+  if (failed) return <p className="studio-error">Asset 목록을 불러오지 못했습니다.</p>;
+
+  if (selectable.length === 0) {
+    return <p className="studio-asset-picker-empty">삽입할 수 있는 Asset이 없습니다. 먼저 업로드하세요.</p>;
+  }
+
+  return <div className="asset-picker">
+    <ul>
+      {selectable.map((asset) => <li key={asset.id}>
+        <button
+          type="button"
+          onClick={() => onInsert(buildEvidenceDirective({
+            assetKey: asset.assetKey,
+            alt: asset.decorative ? "" : (asset.altText ?? ""),
+            caption: "",
+            zoom: asset.kind === "DIAGRAM",
+          }))}
+        >
+          {asset.assetKey}
+        </button>
+      </li>)}
+    </ul>
+  </div>;
+}

src/features/tech-log/presentation/studio/components/asset-upload-dialog.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
+
+import type { Asset, AssetKind } from "../../../contracts/studio/contract.ts";
+import type { StudioAssetGateway } from "../../../application/ports/studio-asset-gateway.ts";
+import { isStudioGatewayError } from "../../../application/ports/studio-gateway-error.ts";
+
+export type UploadState =
+  | { kind: "IDLE" }
+  | { kind: "SELECTION_FAILED"; message: string }
+  | { kind: "UPLOADING" }
+  | { kind: "TRANSPORT_FAILED"; message: string }
+  | { kind: "TOO_LARGE" }
+  | { kind: "UNSUPPORTED_TYPE" }
+  | { kind: "READY"; asset: Asset }
+  | { kind: "REJECTED"; asset: Asset }
+  | { kind: "QUARANTINED"; asset: Asset };
+
+/** 업로드 전송 성공과 서버 검증 성공은 다르다. 성공 응답도 상태로 나눈다. */
+export function stateForUploaded(asset: Asset): UploadState {
+  switch (asset.managementStatus) {
+    case "READY":
+      return { kind: "READY", asset };
+    case "QUARANTINED":
+      return { kind: "QUARANTINED", asset };
+    case "REJECTED":
+    case "ARCHIVED":
+      return { kind: "REJECTED", asset };
+  }
+}
+
+export function stateForError(error: unknown): UploadState {
+  if (isStudioGatewayError(error)) {
+    if (error.code === "PAYLOAD_TOO_LARGE") return { kind: "TOO_LARGE" };
+    if (error.code === "UNSUPPORTED_MEDIA_TYPE") return { kind: "UNSUPPORTED_TYPE" };
+    return { kind: "TRANSPORT_FAILED", message: error.problem.detail };
+  }
+  return { kind: "TRANSPORT_FAILED", message: "업로드를 전송하지 못했습니다." };
+}
+
+const MESSAGES: Record<UploadState["kind"], string> = {
+  IDLE: "",
+  SELECTION_FAILED: "파일을 선택하지 못했습니다.",
+  UPLOADING: "업로드 중입니다.",
+  TRANSPORT_FAILED: "업로드를 전송하지 못했습니다.",
+  TOO_LARGE: "파일 크기가 허용 범위를 넘었습니다.",
+  UNSUPPORTED_TYPE: "지원하지 않는 파일 형식입니다.",
+  READY: "업로드했습니다.",
+  REJECTED: "서버 검증에서 거절되어 사용할 수 없습니다.",
+  QUARANTINED: "보안 검사에서 격리되어 사용할 수 없습니다.",
+};
+
+export function AssetUploadDialog(props: Readonly<{
+  gateway: StudioAssetGateway;
+  kind: AssetKind;
+  idempotencyKey: string;
+  onUploaded: (asset: Asset) => void;
+  onClose: () => void;
+}>) {
+  const [state, setState] = useState<UploadState>({ kind: "IDLE" });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const uploading = state.kind === "UPLOADING";
+
+  // This dialog has no `open` prop -- the caller mounts it to open it and
+  // unmounts it to close it (`unpublish-dialog.tsx`'s toggle-by-prop shape
+  // does not fit a one-shot upload flow). So the modal opens on mount and the
+  // unmount cleanup below closes it if the user never did.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    dialog.showModal();
+    inputRef.current?.focus();
+    return () => {
+      if (dialog.open && typeof dialog.close === "function") dialog.close();
+    };
+  }, []);
+
+  async function submit(file: File) {
+    setState({ kind: "UPLOADING" });
+    try {
+      const asset = await props.gateway.uploadAsset(
+        { file, kind: props.kind },
+        { idempotencyKey: props.idempotencyKey },
+      );
+      const next = stateForUploaded(asset);
+      setState(next);
+      if (next.kind === "READY") props.onUploaded(asset);
+    } catch (error) {
+      setState(stateForError(error));
+    }
+  }
+
+  const trapFocus = (event: KeyboardEvent<HTMLDialogElement>) => {
+    if (event.key !== "Tab") return;
+    const controls = Array.from(
+      event.currentTarget.querySelectorAll<HTMLElement>(
+        "input:not([disabled]), button:not([disabled])",
+      ),
+    );
+    if (!controls.length) return;
+    const first = controls[0];
+    const last = controls.at(-1)!;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="studio-asset-upload-dialog"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      onCancel={(event) => {
+        event.preventDefault();
+        if (!uploading) props.onClose();
+      }}
+      onKeyDown={trapFocus}
+    >
+      <div className="studio-dialog-body">
+        <p className="studio-eyebrow">ASSET UPLOAD</p>
+        <h2 id={titleId}>Asset 업로드</h2>
+        <p id={descriptionId}>
+          업로드한 파일은 서버 검증을 거친 뒤에만 본문에 삽입할 수 있습니다.
+        </p>
+        <label className="studio-field">
+          <span>Asset 파일</span>
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml,application/pdf"
+            disabled={uploading}
+            onChange={(event) => {
+              const file = event.currentTarget.files?.[0];
+              if (!file) {
+                setState({ kind: "SELECTION_FAILED", message: MESSAGES.SELECTION_FAILED });
+                return;
+              }
+              void submit(file);
+            }}
+          />
+        </label>
+        <p className="studio-dialog-status" role="status" aria-live="polite">{MESSAGES[state.kind]}</p>
+        <div className="studio-dialog-actions">
+          <button type="button" disabled={uploading} onClick={props.onClose}>
+            닫기
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}

src/features/tech-log/presentation/studio/components/case-fields.tsx

@@ -1,9 +1,79 @@
+import { useRef, useState } from "react";
+
 import type { components } from "../../../contracts/studio/generated.ts";
+import type { Asset, AssetKind } from "../../../contracts/studio/contract.ts";
+import { createLocalId } from "../../../domain/studio/local-id.ts";
+import { useStudioAssetGateway } from "../use-studio.ts";
+import { AssetPicker, buildEvidenceDirective } from "./asset-picker.tsx";
+import { AssetUploadDialog } from "./asset-upload-dialog.tsx";
 
 type CaseInput = components["schemas"]["CaseInput"];
 
-export function CaseFields({ draft, onChange }: { draft: CaseInput; onChange(draft: CaseInput): void }) {
+const ASSET_KIND_OPTIONS: ReadonlyArray<{ value: AssetKind; label: string }> = [
+  { value: "IMAGE", label: "이미지" },
+  { value: "DIAGRAM", label: "다이어그램" },
+  { value: "ATTACHMENT", label: "첨부파일" },
+];
+
+/**
+ * `:::evidence ...` is a block directive, so the parser requires a blank line
+ * before and after it. Inserting straight into `selectionStart`/`selectionEnd`
+ * without normalizing the surrounding whitespace would produce a directive
+ * glued to adjacent text -- a well-formed-looking block that the parser still
+ * rejects.
+ */
+function insertAtCursor(
+  textarea: HTMLTextAreaElement,
+  directive: string,
+  commit: (next: string) => void,
+) {
+  const { selectionStart, selectionEnd, value } = textarea;
+  const prefix = value.slice(0, selectionStart);
+  const suffix = value.slice(selectionEnd);
+  const before = prefix.length === 0 || prefix.endsWith("\n\n") ? prefix : `${prefix}\n\n`;
+  const after = suffix.startsWith("\n") ? suffix : `\n${suffix}`;
+  commit(`${before}${directive}${after}`);
+}
+
+export function CaseFields({
+  draft,
+  onChange,
+  onAssetsLoaded,
+  onAssetUploaded,
+}: {
+  draft: CaseInput;
+  onChange(draft: CaseInput): void;
+  /** The editor screen owns the loaded Asset list so the Picker and Instant Preview read the same array. */
+  onAssetsLoaded?: (assets: readonly Asset[]) => void;
+  onAssetUploaded?: (asset: Asset) => void;
+}) {
+  // Asset UI must use the throwing accessor, not the nullable `assetGateway`
+  // field directly -- see `use-studio.ts`'s `useStudioAssetGateway` doc.
+  const assetGateway = useStudioAssetGateway();
+  const bodyRef = useRef<HTMLTextAreaElement>(null);
+  const uploadTriggerRef = useRef<HTMLButtonElement>(null);
+  const [uploadKind, setUploadKind] = useState<AssetKind>("IMAGE");
+  const [uploadKey, setUploadKey] = useState<string | null>(null);
   const update = (patch: Partial<CaseInput>) => onChange({ ...draft, ...patch });
+
+  const insertDirective = (directive: string) => {
+    const textarea = bodyRef.current;
+    if (!textarea) {
+      update({
+        bodyMarkdown: draft.bodyMarkdown
+          ? `${draft.bodyMarkdown}\n\n${directive}\n`
+          : `${directive}\n`,
+      });
+      return;
+    }
+    insertAtCursor(textarea, directive, (next) => update({ bodyMarkdown: next }));
+  };
+
+  const closeUpload = () => {
+    setUploadKey(null);
+    queueMicrotask(() => uploadTriggerRef.current?.focus());
+  };
+
   return (
     <section className="studio-editor-section" aria-labelledby="studio-case-fields-title">
       <div className="studio-editor-section-heading"><p className="studio-eyebrow">CASE</p><h2 id="studio-case-fields-title">문제와 검증</h2></div>
@@ -13,8 +83,47 @@ export function CaseFields({ draft, onChange }: { draft: CaseInput; onChange(dra
         <label className="studio-field"><span>검증 환경</span><textarea value={draft.environment} onChange={(event) => update({ environment: event.currentTarget.value })} /></label>
         <label className="studio-field"><span>재현 조건</span><textarea value={draft.reproduction} onChange={(event) => update({ reproduction: event.currentTarget.value })} /></label>
         <label className="studio-field"><span>마지막 검증일</span><input type="date" value={draft.lastVerifiedOn ?? ""} onChange={(event) => update({ lastVerifiedOn: event.currentTarget.value || null })} /></label>
-        <label className="studio-field studio-field--wide"><span>본문 Markdown</span><textarea className="studio-markdown-field" value={draft.bodyMarkdown} onChange={(event) => update({ bodyMarkdown: event.currentTarget.value })} /></label>
+        <label className="studio-field studio-field--wide"><span>본문 Markdown</span><textarea ref={bodyRef} className="studio-markdown-field" value={draft.bodyMarkdown} onChange={(event) => update({ bodyMarkdown: event.currentTarget.value })} /></label>
       </div>
+      <div className="studio-asset-panel" aria-labelledby="studio-asset-panel-title">
+        <p className="studio-eyebrow">EVIDENCE</p>
+        <h3 id="studio-asset-panel-title">본문에 Asset 삽입</h3>
+        <p>목록에서 선택하면 본문 커서 위치에 evidence 구문을 삽입합니다. READY 상태의 Asset만 선택할 수 있습니다.</p>
+        <div className="studio-asset-panel-actions">
+          <label className="studio-asset-kind-field">
+            <span>업로드 종류</span>
+            <select value={uploadKind} onChange={(event) => setUploadKind(event.currentTarget.value as AssetKind)}>
+              {ASSET_KIND_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <button
+            ref={uploadTriggerRef}
+            type="button"
+            onClick={() => setUploadKey(createLocalId("studio-asset-upload"))}
+          >
+            Asset 업로드
+          </button>
+        </div>
+        <AssetPicker gateway={assetGateway} onLoaded={onAssetsLoaded} onInsert={insertDirective} />
+      </div>
+      {uploadKey ? (
+        <AssetUploadDialog
+          gateway={assetGateway}
+          kind={uploadKind}
+          idempotencyKey={uploadKey}
+          onUploaded={(asset) => {
+            onAssetUploaded?.(asset);
+            insertDirective(buildEvidenceDirective({
+              assetKey: asset.assetKey,
+              alt: asset.decorative ? "" : (asset.altText ?? ""),
+              caption: "",
+              zoom: asset.kind === "DIAGRAM",
+            }));
+            closeUpload();
+          }}
+          onClose={closeUpload}
+        />
+      ) : null}
     </section>
   );
 }

src/features/tech-log/presentation/studio/components/document-editor-screen.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { isStudioGatewayError } from "../../../application/ports/studio-gateway-error.ts";
 import type { components } from "../../../contracts/studio/generated.ts";
 import type {
+  Asset,
   WorkingCopy,
   WorkingCopyInput,
 } from "../../../contracts/studio/contract.ts";
@@ -34,10 +35,15 @@ export function DocumentEditorScreen({ documentId }: { documentId: string }) {
     catalog: CatalogEntry[];
     problem: Error | null;
   } | null>(null);
+  // Owned here (not by CaseFields/AssetPicker) so the Picker, the upload
+  // dialog, and Instant Preview all read the same array -- a freshly
+  // uploaded asset appears in the preview without a refetch.
+  const [assets, setAssets] = useState<readonly Asset[]>([]);
 
   useEffect(() => {
     const request = new AbortController();
     clear();
+    setAssets([]);
     void Promise.all([
       studio.gateway.getDocument(documentId, { signal: request.signal }),
       ...catalogTypes.map((type) => studio.gateway.getCatalog(
@@ -145,5 +151,15 @@ export function DocumentEditorScreen({ documentId }: { documentId: string }) {
       </section>
     );
   }
-  return <DocumentEditor controller={controller!} catalog={currentResult.catalog} />;
+  return (
+    <DocumentEditor
+      controller={controller!}
+      catalog={currentResult.catalog}
+      assets={assets}
+      onAssetsLoaded={setAssets}
+      onAssetUploaded={(asset) =>
+        setAssets((current) => [asset, ...current.filter((existing) => existing.id !== asset.id)])
+      }
+    />
+  );
 }

src/features/tech-log/presentation/studio/components/document-editor.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState, type KeyboardEvent } from "react";
 
 import type { components } from "../../../contracts/studio/generated.ts";
+import type { Asset } from "../../../contracts/studio/contract.ts";
 import type { DocumentEditorController } from "./document-editor-controller.ts";
 import { CaseFields } from "./case-fields.tsx";
 import { CommonDocumentFields } from "./common-document-fields.tsx";
@@ -12,7 +13,20 @@ import { ReferenceFields } from "./reference-fields.tsx";
 
 type CatalogEntry = components["schemas"]["CatalogEntry"];
 
-export function DocumentEditor({ controller, catalog }: { controller: DocumentEditorController; catalog: CatalogEntry[] }) {
+export function DocumentEditor({
+  controller,
+  catalog,
+  assets,
+  onAssetsLoaded,
+  onAssetUploaded,
+}: {
+  controller: DocumentEditorController;
+  catalog: CatalogEntry[];
+  /** Owned by `DocumentEditorScreen` so the CASE editor's Picker/Upload and Instant Preview share one list. */
+  assets: readonly Asset[];
+  onAssetsLoaded: (assets: readonly Asset[]) => void;
+  onAssetUploaded: (asset: Asset) => void;
+}) {
   const [tab, setTab] = useState<"EDIT" | "PREVIEW">("EDIT");
   const editTab = useRef<HTMLButtonElement>(null);
   const previewTab = useRef<HTMLButtonElement>(null);
@@ -50,7 +64,7 @@ export function DocumentEditor({ controller, catalog }: { controller: DocumentEd
             </header>
             <CommonDocumentFields draft={controller.draft} topics={topics} projects={projects} relations={relations} onUpdate={controller.update} />
             {controller.draft.kind === "CASE"
-              ? <CaseFields draft={controller.draft} onChange={controller.replace} />
+              ? <CaseFields draft={controller.draft} onChange={controller.replace} onAssetsLoaded={onAssetsLoaded} onAssetUploaded={onAssetUploaded} />
               : controller.draft.kind === "REFERENCE"
                 ? <ReferenceFields draft={controller.draft} onChange={controller.replace} />
                 : controller.draft.kind === "QUESTION"
@@ -58,7 +72,7 @@ export function DocumentEditor({ controller, catalog }: { controller: DocumentEd
                   : <ProjectDecisionFields draft={controller.draft} onChange={controller.replace} />}
           </div>
           <div id="studio-preview-panel" role="tabpanel" aria-labelledby="studio-preview-tab" hidden={tab !== "PREVIEW"}>
-            <InstantPreview draft={controller.draft} catalog={catalog} />
+            <InstantPreview draft={controller.draft} catalog={catalog} assets={assets} />
           </div>
         </div>
         <DocumentStatusRail controller={controller} />

src/features/tech-log/presentation/studio/components/instant-preview.tsx

@@ -13,7 +13,52 @@ type CatalogEntry = components["schemas"]["CatalogEntry"];
 type ResolvedAsset = components["schemas"]["ResolvedAsset"];
 type PublicRenderModel = components["schemas"]["PublicRenderModel"];
 
-function supportsPreviewEvidenceKey(key: string): boolean {
+/**
+ * `projectWorkingCopy` applies two gates to every `EVIDENCE_FIGURE` block
+ * before any asset resolver runs: `supportsEvidenceKey`, and an `EVIDENCE`
+ * `CatalogEntry` lookup by `id`/`label`/`publicPath`. Both exist to stop a
+ * document referencing evidence that does not exist -- so opening them for
+ * the Asset Picker (Task 10) means teaching them about the *loaded Asset
+ * list*, not bypassing them.
+ *
+ * The document catalog (`getCatalog({ type: "EVIDENCE" })`) and the Asset
+ * list (`listAssets`) are different sources today: the catalog only knows
+ * about evidence a previous publish already registered, so a key the Picker
+ * just inserted -- backed by a real, freshly loaded `READY` asset -- has no
+ * catalog row yet. This synthesizes one `EVIDENCE` `CatalogEntry` per `READY`
+ * asset, `label`ed with its `assetKey` -- the same field the one
+ * pre-existing fixture entry already uses
+ * (`{ type: "EVIDENCE", label: "fetch-strategy-boundary" }`) -- and both
+ * gates are driven off the resulting merged catalog. A key backed by no
+ * loaded `READY` asset and no catalog row still fails both gates; nothing
+ * here can forge a pass for a dangling reference.
+ */
+function evidenceCatalogEntries(assets: readonly Asset[]): CatalogEntry[] {
+  return assets
+    .filter((asset) => asset.managementStatus === "READY")
+    .map((asset) => ({
+      id: asset.id,
+      type: "EVIDENCE",
+      label: asset.assetKey,
+      publicPath: asset.publicPath ?? undefined,
+      dependencyRevision: asset.updatedAt,
+    }));
+}
+
+function supportsEvidenceKeyIn(catalog: ReadonlyArray<CatalogEntry>) {
+  return (key: string): boolean =>
+    catalog.some((entry) => entry.type === "EVIDENCE" && entry.label === key);
+}
+
+/**
+ * The one legacy key predates the Asset gateway entirely: the document
+ * catalog carries a fixture `EVIDENCE` row for it (so the gates above pass
+ * it), but no `Asset` record backs it, so `assets` never resolves it. Kept
+ * narrow and separate from `supportsEvidenceKeyIn` -- that function decides
+ * whether a document is *allowed* to reference a key; this one only fills in
+ * the one pre-existing key's pixels when nothing else can.
+ */
+function isLegacyStaticEvidenceKey(key: string): boolean {
   return key === "fetch-strategy-boundary";
 }
 
@@ -41,7 +86,7 @@ function resolveAssetDescriptor(assets: readonly Asset[]) {
         decorative: asset.decorative,
       };
     }
-    if (supportsPreviewEvidenceKey(key)) {
+    if (isLegacyStaticEvidenceKey(key)) {
       // Fixed literal, not derived: this file only ever resolves this one legacy
       // key today, so the id only needs to be stable, not computed.
       return {
@@ -76,15 +121,16 @@ export function InstantPreview({
   assets?: readonly Asset[];
 }) {
   const studio = useStudio();
+  const effectiveCatalog = [...catalog, ...evidenceCatalogEntries(assets)];
   let model: PublicRenderModel | null = null;
   let issues: string[] | null = null;
   try {
     model = resolveCaseEvidenceAssets(
       projectWorkingCopy(
         draft,
-        catalog,
+        effectiveCatalog,
         { mode: "PREVIEW", publishedAt: null },
-        supportsPreviewEvidenceKey,
+        supportsEvidenceKeyIn(effectiveCatalog),
       ),
       resolveAssetDescriptor(assets),
     );

src/features/tech-log/presentation/styles/studio-editor.css

@@ -68,6 +68,18 @@
 .studio-app .studio-document-status-rail button:disabled { border-color: var(--line-strong); background: var(--paper); color: var(--muted); }
 .studio-app .studio-document-status-rail > p:last-child { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
 
+.studio-app .studio-asset-panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
+.studio-app .studio-asset-panel .studio-eyebrow { margin-bottom: 8px; }
+.studio-app .studio-asset-panel h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.02em; }
+.studio-app .studio-asset-panel > p { max-width: 640px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
+.studio-app .studio-asset-panel-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; }
+.studio-app .studio-asset-kind-field { display: grid; min-width: 0; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
+.studio-app .studio-asset-kind-field select { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
+.studio-app .studio-asset-panel-actions button { min-height: 44px; padding-inline: 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font-weight: 650; }
+.studio-app .asset-picker ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
+.studio-app .asset-picker button { min-height: 36px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; }
+.studio-app .studio-error,
+.studio-app .studio-asset-picker-empty { margin: 0; color: var(--muted); font-size: 13px; }
 .studio-app .studio-instant-preview { min-width: 0; overflow: clip; border: 1px solid var(--line); }
 .studio-app .studio-instant-preview .public-record-embedded { width: 100%; max-width: none; margin: 0; padding: clamp(24px, 5vw, 56px); }
 .studio-app .studio-preview-error { padding: 48px 0; border-bottom: 1px solid var(--line); }

src/features/tech-log/presentation/styles/studio.css

@@ -38,6 +38,9 @@
 .studio-app .studio-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 28px; }
 .studio-app .studio-dialog-actions button { min-height: 44px; padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); }
 .studio-app .studio-dialog-actions button:last-child { border-color: var(--signal); background: var(--signal); color: #fff; }
+.studio-app .studio-asset-upload-dialog { width: min(560px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--ink); }
+.studio-app .studio-asset-upload-dialog::backdrop { background: rgba(23, 24, 27, 0.48); }
+.studio-app .studio-asset-upload-dialog .studio-dialog-status { min-height: 20px; margin: 16px 0 0; color: var(--muted); font-size: 13px; }
 
 .studio-app .studio-page-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; border-bottom: 1px solid var(--line-strong); }
 .studio-app .studio-page-top .studio-page-heading { padding-bottom: 42px; }