@agent-native/creative-context 0.3.0 → 0.5.0

package/src/client/CreativeContextPanel.tsx

@@ -28,13 +28,23 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
   Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Textarea,
 } from "@agent-native/toolkit/ui";
 import {
   IconAlertTriangle,
   IconArrowUpRight,
   IconBooks,
+  IconChartBar,
   IconCheck,
   IconDots,
   IconFileImport,
@@ -42,7 +52,9 @@ import {
   IconLayout,
   IconPalette,
   IconPhoto,
+  IconPlayerPlay,
   IconPin,
+  IconPlus,
   IconRefresh,
   IconSearch,
   IconSlideshow,
@@ -70,6 +82,7 @@ import type {
 } from "../types.js";
 import {
   useCreativeContextBrandProfile,
+  useCreativeContexts,
   useCanonicalLogoCandidates,
   useCreativeContextConnections,
   useCreativeContextGooglePickerSession,
@@ -77,6 +90,9 @@ import {
   useCreativeContextImportStatus,
   useCreativeContextPack,
   useCreativeContextPacks,
+  useContextMemberships,
+  useManageCreativeContext,
+  useManageContextMembership,
   useCreativeContextSearch,
   useCreativeContextSuggestions,
   useCreativeContextSources,
@@ -89,6 +105,9 @@ import {
   useRefreshCreativeContextSource,
   useReviewCreativeContextItems,
   useStartCreativeContextImport,
+  parseCreativeContexts,
+  parseContextMemberships,
+  type CreativeContextSafePreview,
   type CreativeContextConnectionProvider,
   type CreativeContextRootRecommendation,
   type CreativeContextRecommendationProvider,
@@ -789,6 +808,394 @@ function ItemCuration({
   );
 }
 
+type LibraryView = "items" | "sources" | "approvals" | "settings";
+
+interface SafePreviewManifest {
+  title: string;
+  kind: string;
+  itemId: string;
+  itemVersionId: string;
+  preview: CreativeContextSafePreview | null;
+  media?: {
+    kind: string;
+    mimeType: string | null;
+    url: string;
+  } | null;
+  gallery?: Array<{
+    kind: string;
+    mimeType: string | null;
+    url: string;
+  }>;
+  posterUrl?: string;
+}
+
+function StructuredPreview({
+  preview,
+  compact = false,
+}: {
+  preview: CreativeContextSafePreview | null;
+  compact?: boolean;
+}) {
+  if (!preview) {
+    return (
+      <div className="flex h-full min-h-28 items-center justify-center bg-muted text-muted-foreground">
+        <IconFileText className="size-5" />
+      </div>
+    );
+  }
+  if (preview.type === "slides") {
+    const visibleSlides = compact ? preview.slides.slice(0, 3) : preview.slides;
+    return (
+      <div className="grid h-full grid-cols-3 gap-1.5 bg-muted/50 p-2">
+        {visibleSlides.map((slide) => (
+          <div
+            key={slide.index}
+            className="min-w-0 rounded border border-border/70 bg-background p-1.5"
+          >
+            <span className="text-[10px] font-medium text-muted-foreground">
+              {slide.index}
+            </span>
+            <p className="mt-1 line-clamp-2 text-[11px] font-medium leading-tight">
+              {slide.title}
+            </p>
+            {!compact && slide.excerpt ? (
+              <p className="mt-1 line-clamp-5 text-[10px] leading-snug text-muted-foreground">
+                {slide.excerpt}
+              </p>
+            ) : null}
+          </div>
+        ))}
+        {!visibleSlides.length ? (
+          <div className="col-span-3 flex items-center justify-center text-xs text-muted-foreground">
+            {preview.slideCount} slides
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  if (preview.type === "slide") {
+    return (
+      <div className="flex h-full flex-col justify-between bg-muted/50 p-4">
+        <span className="text-xs text-muted-foreground">
+          Slide {preview.index}
+        </span>
+        <p className="line-clamp-3 text-sm font-semibold">{preview.title}</p>
+        {preview.excerpt ? (
+          <p className="line-clamp-5 text-xs leading-relaxed text-muted-foreground">
+            {preview.excerpt}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+  if (preview.type === "design" || preview.type === "design-frame") {
+    const frames =
+      preview.type === "design"
+        ? preview.frames
+        : [
+            {
+              title: preview.title,
+              fileType: preview.fileType,
+              excerpt: preview.excerpt,
+            },
+          ];
+    const visibleFrames = compact ? frames.slice(0, 4) : frames;
+    return (
+      <div className="grid h-full grid-cols-2 gap-1.5 bg-muted/50 p-2">
+        {visibleFrames.map((frame, index) => (
+          <div
+            key={`${frame.title}-${index}`}
+            className="min-w-0 rounded border border-border/70 bg-background p-2"
+          >
+            <div className="flex items-center gap-1 text-muted-foreground">
+              <IconLayout className="size-3 shrink-0" />
+              <span className="truncate text-[10px] uppercase tracking-wide">
+                {frame.fileType}
+              </span>
+            </div>
+            <p className="mt-2 line-clamp-2 text-xs font-medium leading-tight">
+              {frame.title}
+            </p>
+            {!compact && frame.excerpt ? (
+              <p className="mt-1 line-clamp-4 text-[10px] leading-snug text-muted-foreground">
+                {frame.excerpt}
+              </p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (preview.type === "document") {
+    const visibleBlocks = preview.blocks.slice(0, compact ? 7 : 40);
+    return (
+      <article className="h-full overflow-auto bg-background p-4">
+        {visibleBlocks.length ? (
+          <div className="space-y-2">
+            {visibleBlocks.map((block, index) => {
+              if (block.kind === "heading") {
+                return (
+                  <p
+                    key={`${block.kind}-${index}`}
+                    className={
+                      (block.level ?? 2) <= 2
+                        ? "text-sm font-semibold"
+                        : "text-xs font-medium"
+                    }
+                  >
+                    {block.text}
+                  </p>
+                );
+              }
+              if (block.kind === "bullet") {
+                return (
+                  <p
+                    key={`${block.kind}-${index}`}
+                    className="flex gap-2 text-xs leading-relaxed text-muted-foreground before:content-['•']"
+                  >
+                    {block.text}
+                  </p>
+                );
+              }
+              if (block.kind === "quote") {
+                return (
+                  <blockquote
+                    key={`${block.kind}-${index}`}
+                    className="border-s-2 border-border ps-3 text-xs italic leading-relaxed text-muted-foreground"
+                  >
+                    {block.text}
+                  </blockquote>
+                );
+              }
+              if (block.kind === "code") {
+                return (
+                  <pre
+                    key={`${block.kind}-${index}`}
+                    className="overflow-hidden rounded bg-muted p-2 font-mono text-[10px] leading-relaxed"
+                  >
+                    {block.text}
+                  </pre>
+                );
+              }
+              return (
+                <p
+                  key={`${block.kind}-${index}`}
+                  className="text-xs leading-relaxed text-muted-foreground"
+                >
+                  {block.text}
+                </p>
+              );
+            })}
+          </div>
+        ) : preview.excerpt ? (
+          <p className="mt-3 line-clamp-6 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">
+            {preview.excerpt}
+          </p>
+        ) : null}
+      </article>
+    );
+  }
+  if (preview.type === "asset") {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 bg-muted text-muted-foreground">
+        {preview.mediaType === "video" ? (
+          <IconPlayerPlay className="size-6" />
+        ) : (
+          <IconPhoto className="size-6" />
+        )}
+        {!compact && preview.width && preview.height ? (
+          <span className="text-xs">
+            {preview.width} × {preview.height}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+  return (
+    <div className="grid h-full grid-cols-2 gap-2 bg-muted/50 p-3">
+      {preview.panels.slice(0, compact ? 4 : 24).map((panel) => (
+        <div
+          key={panel.id}
+          className="rounded border border-border/70 bg-background p-2"
+        >
+          <div className="flex items-center gap-1 text-muted-foreground">
+            <IconChartBar className="size-3" />
+            <span className="truncate text-[10px] capitalize">
+              {panel.visualization}
+            </span>
+          </div>
+          <p className="mt-2 line-clamp-2 text-xs font-medium">{panel.title}</p>
+        </div>
+      ))}
+      {!preview.panels.length ? (
+        <div className="col-span-2 flex items-center justify-center text-xs text-muted-foreground">
+          Synthetic dashboard preview
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ContextPreviewVisual({
+  manifest,
+  compact = false,
+}: {
+  manifest: SafePreviewManifest;
+  compact?: boolean;
+}) {
+  if (manifest.media?.mimeType?.startsWith("video/")) {
+    return (
+      <video
+        controls={!compact}
+        muted={compact}
+        playsInline
+        preload="metadata"
+        src={manifest.media.url}
+        poster={manifest.posterUrl}
+        className="h-full w-full bg-black object-contain"
+      />
+    );
+  }
+  if (manifest.media) {
+    return (
+      <img
+        src={manifest.media.url}
+        alt=""
+        className="h-full w-full object-contain"
+      />
+    );
+  }
+  return <StructuredPreview preview={manifest.preview} compact={compact} />;
+}
+
+function ContextPreviewSheet({
+  manifest,
+  onOpenChange,
+}: {
+  manifest: SafePreviewManifest | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [selectedMediaUrl, setSelectedMediaUrl] = useState<string | null>(null);
+  useEffect(() => setSelectedMediaUrl(null), [manifest?.itemVersionId]);
+  const selectedMedia =
+    manifest?.gallery?.find((medium) => medium.url === selectedMediaUrl) ??
+    manifest?.media ??
+    null;
+  return (
+    <Sheet open={Boolean(manifest)} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>{manifest?.title ?? "Context preview"}</SheetTitle>
+          <SheetDescription>{manifest?.kind ?? ""}</SheetDescription>
+        </SheetHeader>
+        {manifest && (selectedMedia || manifest.preview) ? (
+          <div className="mt-5 min-h-56 overflow-hidden rounded-md border border-border">
+            <ContextPreviewVisual
+              manifest={{ ...manifest, media: selectedMedia }}
+            />
+          </div>
+        ) : (
+          <div className="mt-5 flex min-h-44 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
+            No safe preview is available for this item.
+          </div>
+        )}
+        {manifest?.gallery && manifest.gallery.length > 1 ? (
+          <div className="mt-3 grid grid-cols-3 gap-2 sm:grid-cols-4">
+            {manifest.gallery.map((medium, index) => (
+              <button
+                key={`${medium.url}-${index}`}
+                type="button"
+                className={`aspect-video overflow-hidden rounded border bg-muted transition-colors ${
+                  medium.url === (selectedMedia?.url ?? manifest.media?.url)
+                    ? "border-foreground"
+                    : "border-border hover:border-foreground/50"
+                }`}
+                onClick={() => setSelectedMediaUrl(medium.url)}
+              >
+                <img
+                  src={medium.url}
+                  alt={`Preview ${index + 1}`}
+                  loading="lazy"
+                  className="h-full w-full object-contain"
+                />
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function ContextRail({
+  contexts,
+  selectedContextId,
+  disabled,
+  canCreate,
+  onSelect,
+  onCreate,
+}: {
+  contexts: Array<{
+    id: string;
+    name: string;
+    description?: string | null;
+    memberCount: number;
+  }>;
+  selectedContextId: string | null | undefined;
+  disabled: boolean;
+  canCreate: boolean;
+  onSelect: (contextId: string) => void;
+  onCreate: () => void;
+}) {
+  return (
+    <aside className="border-b border-border/70 pb-5">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h2 className="text-sm font-semibold">Contexts</h2>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Choose the reusable context that should guide this work.
+          </p>
+        </div>
+        <Badge variant="outline">{contexts.length}</Badge>
+      </div>
+      <div className="mt-3 flex gap-2 overflow-x-auto pb-1">
+        {contexts.map((context) => (
+          <button
+            key={context.id}
+            type="button"
+            disabled={disabled}
+            aria-pressed={selectedContextId === context.id}
+            onClick={() => onSelect(context.id)}
+            className={`min-w-40 rounded-md border px-3 py-2 text-start transition-colors disabled:opacity-60 ${selectedContextId === context.id ? "border-foreground/25 bg-accent text-foreground" : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground"}`}
+          >
+            <span className="block truncate text-sm font-medium">
+              {context.name}
+            </span>
+            <span className="mt-0.5 block truncate text-xs">
+              {context.description || `${context.memberCount} resources`}
+            </span>
+          </button>
+        ))}
+        <Button
+          type="button"
+          variant="outline"
+          className="min-w-40 justify-start"
+          disabled={disabled || !canCreate}
+          onClick={onCreate}
+        >
+          <IconPlus /> New context
+        </Button>
+        {!contexts.length ? (
+          <p className="py-2 text-sm text-muted-foreground">
+            Create a context from a resource’s Share tab to start organizing the
+            Library.
+          </p>
+        ) : null}
+      </div>
+    </aside>
+  );
+}
+
 export function CreativeContextPanel({
   scope = "user",
   canManageOrg = false,
@@ -800,6 +1207,7 @@ export function CreativeContextPanel({
   const { data: org } = useOrg();
   const [libraryScope, setLibraryScope] = useState<AgentPageScope>(scope);
   const sourcesQuery = useCreativeContextSources({ limit: 100 });
+  const contextsQuery = useCreativeContexts();
   const packsQuery = useCreativeContextPacks();
   const brandProfileQuery = useCreativeContextBrandProfile();
   const suggestionsQuery = useCreativeContextSuggestions();
@@ -819,6 +1227,9 @@ export function CreativeContextPanel({
   const manageLayoutTemplate = useManageLayoutTemplate();
   const contextState = useCreativeContextState();
   const [query, setQuery] = useState("");
+  const [libraryView, setLibraryView] = useState<LibraryView>("items");
+  const [previewManifest, setPreviewManifest] =
+    useState<SafePreviewManifest | null>(null);
   const [savingState, setSavingState] = useState(false);
   const [stateError, setStateError] = useState<string | null>(null);
   const [refreshMessage, setRefreshMessage] = useState<string | null>(null);
@@ -887,6 +1298,13 @@ export function CreativeContextPanel({
   );
   const [reviewedItems, setReviewedItems] = useState<ContextReviewItem[]>([]);
   const [reviewError, setReviewError] = useState<string | null>(null);
+  const [membershipUpdateCandidate, setMembershipUpdateCandidate] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+  const [updatingMembershipId, setUpdatingMembershipId] = useState<
+    string | null
+  >(null);
   const [selectedPackId, setSelectedPackId] = useState<string | null>(null);
   const [suggestionError, setSuggestionError] = useState<string | null>(null);
   const previewQuery = usePreviewCreativeContextImport(previewSourceId);
@@ -945,6 +1363,42 @@ export function CreativeContextPanel({
       ),
     [libraryScope, packsQuery.data?.packs],
   );
+  const contexts = useMemo(
+    () => parseCreativeContexts(contextsQuery.data),
+    [contextsQuery.data],
+  );
+  const selectedLibraryContextId =
+    contextState.state.selectedContextId ?? contexts[0]?.id ?? null;
+  const contextMembershipsQuery = useContextMemberships(
+    selectedLibraryContextId ? { contextId: selectedLibraryContextId } : null,
+  );
+  const manageContext = useManageCreativeContext();
+  const manageContextMembership = useManageContextMembership();
+  const contextMemberships = parseContextMemberships(
+    contextMembershipsQuery.data,
+  );
+  const publishedContextMemberships = contextMemberships.filter(
+    (membership) => membership.publishedItem,
+  );
+  const pendingContextMemberships = contextMemberships.filter(
+    (membership) => membership.pendingSubmission,
+  );
+  const selectedLibraryContext = contexts.find(
+    (context) => context.id === selectedLibraryContextId,
+  );
+  const [contextSettingsName, setContextSettingsName] = useState("");
+  const [contextSettingsDescription, setContextSettingsDescription] =
+    useState("");
+  const [contextSettingsPolicy, setContextSettingsPolicy] = useState<
+    "open" | "review" | "admins-only"
+  >("open");
+  const [newContextName, setNewContextName] = useState("");
+  const [newContextPolicy, setNewContextPolicy] = useState<
+    "open" | "review" | "admins-only"
+  >("open");
+  const [contextSettingsError, setContextSettingsError] = useState<
+    string | null
+  >(null);
   const activePack = packs.find(
     (pack) => pack.id === contextState.state.currentPackId,
   );
@@ -960,6 +1414,13 @@ export function CreativeContextPanel({
   const brandVoicePreview =
     brandProposal?.voiceDescriptors?.join(" · ") ?? brandProposal?.voiceLine;
   const canManageScope = libraryScope === "user" || canManageOrg;
+  const canCreateContext =
+    canManageScope && contexts.some((context) => context.access.canAdmin);
+  const activeAppId = contextsQuery.data?.appId;
+  const appDefaultContextId = contextsQuery.data?.appDefaultContextId ?? null;
+  const canSetAppDefault = Boolean(
+    activeAppId && selectedLibraryContext?.access.canAdmin && canManageScope,
+  );
   const proposalCapabilities = suggestionsQuery.data?.capabilities;
   const logoCandidates = proposalCapabilities?.canonicalLogo
     ? (logoCandidatesQuery.data?.candidates ?? [])
@@ -970,6 +1431,13 @@ export function CreativeContextPanel({
       (suggestion.status === "proposed" || suggestion.status === "promoted"),
   );
 
+  useEffect(() => {
+    setContextSettingsName(selectedLibraryContext?.name ?? "");
+    setContextSettingsDescription(selectedLibraryContext?.description ?? "");
+    setContextSettingsPolicy(selectedLibraryContext?.approvalPolicy ?? "open");
+    setContextSettingsError(null);
+  }, [selectedLibraryContext]);
+
   useEffect(() => {
     if (!previewSourceId || !previewQuery.data) return;
     const defaults = previewQuery.data.smartDefaultExternalIds ?? [];
@@ -1020,8 +1488,18 @@ export function CreativeContextPanel({
     try {
       await contextState.setState(
         mode === "off"
-          ? { contextMode: "off", currentPackId: null, pinnedPackId: null }
-          : { ...contextState.state, contextMode: "auto" },
+          ? {
+              contextMode: "off",
+              selectedContextId: null,
+              currentPackId: null,
+              pinnedPackId: null,
+            }
+          : {
+              ...contextState.state,
+              contextMode: "auto",
+              selectedContextId: null,
+              pinnedPackId: null,
+            },
       );
     } catch {
       setStateError(t("creativeContext.stateSaveFailed"));
@@ -1037,6 +1515,7 @@ export function CreativeContextPanel({
       await contextState.setState({
         ...contextState.state,
         contextMode: "auto",
+        selectedContextId: null,
         pinnedPackId: packId,
       });
     } catch {
@@ -1046,6 +1525,60 @@ export function CreativeContextPanel({
     }
   }
 
+  async function selectContext(contextId: string) {
+    setSavingState(true);
+    setStateError(null);
+    try {
+      await contextState.setState({
+        ...contextState.state,
+        contextMode: "auto",
+        selectedContextId: contextId,
+        pinnedPackId: null,
+      });
+    } catch {
+      setStateError(t("creativeContext.stateSaveFailed"));
+    } finally {
+      setSavingState(false);
+    }
+  }
+
+  async function reviewContextMembership(
+    membershipId: string,
+    operation: "approve" | "request-changes",
+  ) {
+    if (!selectedLibraryContextId) return;
+    try {
+      await manageContextMembership.mutateAsync({
+        operation,
+        contextId: selectedLibraryContextId,
+        membershipId,
+      });
+      await contextMembershipsQuery.refetch();
+    } catch {
+      setReviewError(t("creativeContext.saveFailed"));
+    }
+  }
+
+  async function submitLatestContextMembershipUpdate() {
+    if (!selectedLibraryContextId || !membershipUpdateCandidate) return;
+    setReviewError(null);
+    setUpdatingMembershipId(membershipUpdateCandidate.id);
+    try {
+      await manageContextMembership.mutateAsync({
+        operation: "submit-latest",
+        contextId: selectedLibraryContextId,
+        membershipId: membershipUpdateCandidate.id,
+        confirmBroaderPublication: true,
+      });
+      setMembershipUpdateCandidate(null);
+      await contextMembershipsQuery.refetch();
+    } catch {
+      setReviewError(t("creativeContext.submitUpdateFailed"));
+    } finally {
+      setUpdatingMembershipId(null);
+    }
+  }
+
   function refresh(sourceId: string) {
     setRefreshMessage(null);
     refreshSource.mutate(
@@ -1412,16 +1945,84 @@ export function CreativeContextPanel({
     }
   }
 
+  async function saveContextSettings() {
+    if (!selectedLibraryContext?.access.canAdmin || !contextSettingsName.trim())
+      return;
+    setContextSettingsError(null);
+    try {
+      await manageContext.mutateAsync({
+        operation: "update",
+        contextId: selectedLibraryContext.id,
+        patch: {
+          name: contextSettingsName.trim(),
+          description: contextSettingsDescription.trim() || null,
+          approvalPolicy: contextSettingsPolicy,
+        },
+      });
+      await contextsQuery.refetch();
+    } catch {
+      setContextSettingsError("Could not update this context.");
+    }
+  }
+
+  async function createSpecialtyContext() {
+    if (!canCreateContext || !newContextName.trim()) return;
+    setContextSettingsError(null);
+    try {
+      const result = await manageContext.mutateAsync({
+        operation: "create",
+        name: newContextName.trim(),
+        kind: "specialty",
+        approvalPolicy: newContextPolicy,
+      });
+      setNewContextName("");
+      setNewContextPolicy("open");
+      await contextsQuery.refetch();
+      if (result.context?.id) await selectContext(result.context.id);
+    } catch {
+      setContextSettingsError("Could not create this context.");
+    }
+  }
+
+  async function setAppDefaultContext() {
+    if (!activeAppId || !selectedLibraryContext || !canSetAppDefault) return;
+    setContextSettingsError(null);
+    try {
+      await manageContext.mutateAsync({
+        operation: "set-app-default",
+        contextId: selectedLibraryContext.id,
+        appId: activeAppId,
+      });
+      await contextsQuery.refetch();
+    } catch {
+      setContextSettingsError(
+        "Could not update the automatic context for this app.",
+      );
+    }
+  }
+
   async function search(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const searchText = query.trim();
-    if (!searchText || !sources.length) return;
+    if (
+      !searchText ||
+      (!sources.length &&
+        !selectedLibraryContextId &&
+        !contextState.state.pinnedPackId)
+    )
+      return;
     setSearchError(null);
     try {
       const result = await searchContext.mutateAsync({
         query: searchText,
-        sourceIds: sources.map((source) => source.id),
+        sourceIds:
+          selectedLibraryContextId || contextState.state.pinnedPackId
+            ? undefined
+            : sources.map((source) => source.id),
         packId: contextState.state.pinnedPackId ?? undefined,
+        contextId: contextState.state.pinnedPackId
+          ? undefined
+          : (selectedLibraryContextId ?? undefined),
         limit: 20,
         snapshot: true,
       });
@@ -1437,8 +2038,12 @@ export function CreativeContextPanel({
   }
 
   const loading =
-    sourcesQuery.isLoading || packsQuery.isLoading || contextState.isLoading;
-  const unavailable = sourcesQuery.error || packsQuery.error;
+    sourcesQuery.isLoading ||
+    packsQuery.isLoading ||
+    contextsQuery.isLoading ||
+    contextState.isLoading;
+  const unavailable =
+    sourcesQuery.error || packsQuery.error || contextsQuery.error;
 
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-7 p-6 lg:p-10">
@@ -1456,7 +2061,11 @@ export function CreativeContextPanel({
             (org?.orgId ? (
               <ScopeControl scope={libraryScope} onChange={setLibraryScope} />
             ) : null)}
-          <CreativeContextChip state={contextState.state} packs={packs} />
+          <CreativeContextChip
+            state={contextState.state}
+            packs={packs}
+            contexts={contexts}
+          />
         </div>
       </header>
 
@@ -1473,92 +2082,469 @@ export function CreativeContextPanel({
         </div>
       ) : (
         <>
-          <section className="space-y-3">
-            <div>
-              <h2 className="text-sm font-semibold">
-                {t("creativeContext.modeLabel")}
-              </h2>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {activePack
-                  ? `${t("creativeContext.activePack")}: ${activePack.name}`
-                  : t("creativeContext.noActivePack")}
-              </p>
-            </div>
-            <div className="flex flex-col gap-2 sm:flex-row" role="radiogroup">
-              <ContextModeButton
-                mode="auto"
-                activeMode={contextState.state.contextMode}
-                label={t("creativeContext.automatic")}
-                description={t("creativeContext.automaticDescription")}
-                disabled={savingState}
-                onSelect={(mode) => void changeMode(mode)}
-              />
-              <ContextModeButton
-                mode="off"
-                activeMode={contextState.state.contextMode}
-                label={t("creativeContext.off")}
-                description={t("creativeContext.offDescription")}
-                disabled={savingState}
-                onSelect={(mode) => void changeMode(mode)}
-              />
-            </div>
-            {stateError ? (
-              <p className="text-xs text-destructive">{stateError}</p>
-            ) : null}
-          </section>
-
-          {brandProfileQuery.data?.profile && brandProfileQuery.data.dna ? (
-            <section className="border-t border-border/70 pt-6">
-              <div className="rounded-md border border-border p-4">
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <div>
-                    <h2 className="text-sm font-semibold">
-                      {t("creativeContext.publishedBrandContext")}
-                    </h2>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      {brandProfileQuery.data.profile.name}
-                    </p>
-                  </div>
-                  <Badge variant="secondary">
-                    v{brandProfileQuery.data.dna.versionNumber}
-                  </Badge>
-                </div>
-                <p className="mt-3 text-sm text-muted-foreground">
-                  {brandProfileQuery.data.dna.payload.summary}
-                </p>
-              </div>
-            </section>
-          ) : null}
-
-          {logoCandidates.length || proposedLayouts.length ? (
-            <section className="border-t border-border/70 pt-6">
-              <div className="flex items-center gap-2">
-                <IconSparkles className="size-5 text-muted-foreground" />
-                <h2 className="text-lg font-semibold">
-                  {t("creativeContext.suggestions")}
-                </h2>
-              </div>
-              {logoCandidates.length ? (
-                <div className="mt-4">
-                  <h3 className="flex items-center gap-2 text-sm font-semibold">
-                    <IconPhoto className="size-4 text-muted-foreground" />
-                    {t("creativeContext.logo")}
-                  </h3>
-                  <div className="mt-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                    {logoCandidates.map((candidate) => (
-                      <article
-                        key={candidate.mediaId}
-                        className="overflow-hidden rounded-md border border-border"
+          <ContextRail
+            contexts={contexts}
+            selectedContextId={contextState.state.selectedContextId}
+            disabled={savingState}
+            canCreate={canCreateContext}
+            onSelect={(contextId) => void selectContext(contextId)}
+            onCreate={() => setLibraryView("settings")}
+          />
+          <Tabs
+            value={libraryView}
+            onValueChange={(value) => setLibraryView(value as LibraryView)}
+          >
+            <TabsList className="w-full justify-start overflow-x-auto">
+              <TabsTrigger value="items">Items</TabsTrigger>
+              <TabsTrigger value="sources">Sources</TabsTrigger>
+              <TabsTrigger value="approvals">Approvals</TabsTrigger>
+              <TabsTrigger value="settings">Settings</TabsTrigger>
+            </TabsList>
+            <TabsContent value="items">
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {publishedContextMemberships.map((membership) => {
+                  const item = membership.publishedItem!;
+                  const imageMedium = item.media.find((medium) =>
+                    medium.mimeType?.startsWith("image/"),
+                  );
+                  const playbackMedium = item.media.find((medium) =>
+                    medium.mimeType?.startsWith("video/"),
+                  );
+                  const medium = imageMedium ?? playbackMedium ?? item.media[0];
+                  const sheetMedium = playbackMedium ?? medium;
+                  const updateAvailable =
+                    membership.nativeUpdateStatus?.state === "update-available";
+                  return (
+                    <article
+                      key={membership.id}
+                      className="overflow-hidden rounded-md border border-border"
+                    >
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setPreviewManifest({
+                            title: item.title,
+                            kind: item.kind,
+                            itemId: item.id,
+                            itemVersionId: item.itemVersionId,
+                            preview: item.preview,
+                            media: sheetMedium ?? null,
+                            gallery: item.media.filter((candidate) =>
+                              candidate.mimeType?.startsWith("image/"),
+                            ),
+                            posterUrl:
+                              playbackMedium && imageMedium
+                                ? imageMedium.url
+                                : undefined,
+                          })
+                        }
+                        className="block w-full text-start transition-colors hover:bg-accent/40"
                       >
-                        <div className="flex h-28 items-center justify-center bg-muted/40 p-3">
-                          <img
-                            src={candidate.thumbnailUrl}
-                            alt={candidate.title}
-                            className="max-h-full max-w-full object-contain"
+                        <span className="block aspect-video overflow-hidden">
+                          <ContextPreviewVisual
+                            compact
+                            manifest={{
+                              title: item.title,
+                              kind: item.kind,
+                              itemId: item.id,
+                              itemVersionId: item.itemVersionId,
+                              preview: item.preview,
+                              media: medium ?? null,
+                              gallery: item.media,
+                            }}
                           />
-                        </div>
-                        <div className="flex items-center justify-between gap-2 p-3">
-                          <p className="min-w-0 truncate text-sm font-medium">
+                        </span>
+                        <span className="block p-3">
+                          <span className="block truncate text-sm font-medium">
+                            {item.title}
+                          </span>
+                          <span className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+                            <span>{item.kind}</span>
+                            <span>·</span>
+                            <span className="capitalize">
+                              {membership.rank}
+                            </span>
+                            <Badge variant="secondary">Published</Badge>
+                            {updateAvailable ? (
+                              <Badge variant="outline">
+                                {t("creativeContext.updateAvailable")}
+                              </Badge>
+                            ) : null}
+                          </span>
+                          <span className="mt-1 block truncate font-mono text-[10px] text-muted-foreground">
+                            Version {item.itemVersionId.slice(0, 12)}
+                          </span>
+                        </span>
+                      </button>
+                      {updateAvailable &&
+                      selectedLibraryContext?.access.canSubmit ? (
+                        <div className="border-t border-border/70 p-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="w-full"
+                            disabled={updatingMembershipId === membership.id}
+                            onClick={() =>
+                              setMembershipUpdateCandidate({
+                                id: membership.id,
+                                title: item.title,
+                              })
+                            }
+                          >
+                            <IconRefresh />
+                            {updatingMembershipId === membership.id
+                              ? t("creativeContext.submittingUpdate")
+                              : t("creativeContext.submitUpdate")}
+                          </Button>
+                        </div>
+                      ) : null}
+                    </article>
+                  );
+                })}
+              </div>
+              {!publishedContextMemberships.length ? (
+                <p className="py-4 text-sm text-muted-foreground">
+                  Approved context items appear here after publication.
+                </p>
+              ) : null}
+              {reviewError ? (
+                <p className="mt-3 text-sm text-destructive">{reviewError}</p>
+              ) : null}
+            </TabsContent>
+            <TabsContent value="approvals">
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {pendingContextMemberships.map((membership) => {
+                  const submission = membership.pendingSubmission!;
+                  const item = submission.proposedItem;
+                  const medium = item?.media[0];
+                  return (
+                    <article
+                      key={membership.id}
+                      className="overflow-hidden rounded-md border border-border"
+                    >
+                      {item ? (
+                        <button
+                          type="button"
+                          className="block aspect-video w-full overflow-hidden text-start"
+                          onClick={() =>
+                            setPreviewManifest({
+                              title: item.title,
+                              kind: item.kind,
+                              itemId: item.id,
+                              itemVersionId: item.itemVersionId,
+                              preview: item.preview,
+                              media: medium ?? null,
+                              gallery: item.media.filter((candidate) =>
+                                candidate.mimeType?.startsWith("image/"),
+                              ),
+                            })
+                          }
+                        >
+                          <ContextPreviewVisual
+                            compact
+                            manifest={{
+                              title: item.title,
+                              kind: item.kind,
+                              itemId: item.id,
+                              itemVersionId: item.itemVersionId,
+                              preview: item.preview,
+                              media: medium ?? null,
+                            }}
+                          />
+                        </button>
+                      ) : null}
+                      <div className="p-3">
+                        <p className="truncate text-sm font-medium">
+                          {item?.title ?? "Pending context submission"}
+                        </p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Submitted by {submission.submittedBy}
+                        </p>
+                        {submission.note ? (
+                          <p className="mt-2 line-clamp-3 text-xs text-muted-foreground">
+                            {submission.note}
+                          </p>
+                        ) : null}
+                        {selectedLibraryContext?.access.canReview ? (
+                          <div className="mt-3 flex gap-2">
+                            <Button
+                              size="sm"
+                              onClick={() =>
+                                void reviewContextMembership(
+                                  membership.id,
+                                  "approve",
+                                )
+                              }
+                            >
+                              Approve
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() =>
+                                void reviewContextMembership(
+                                  membership.id,
+                                  "request-changes",
+                                )
+                              }
+                            >
+                              Request changes
+                            </Button>
+                          </div>
+                        ) : (
+                          <Badge variant="outline" className="mt-3">
+                            Awaiting review
+                          </Badge>
+                        )}
+                      </div>
+                    </article>
+                  );
+                })}
+              </div>
+              {!pendingContextMemberships.length ? (
+                <p className="py-4 text-sm text-muted-foreground">
+                  No context submissions need review.
+                </p>
+              ) : null}
+            </TabsContent>
+            <TabsContent value="sources">
+              <p className="text-sm text-muted-foreground">
+                Sources and their review queues are managed below.
+              </p>
+            </TabsContent>
+            <TabsContent value="settings">
+              <div className="grid gap-5 lg:grid-cols-2">
+                <section className="space-y-3 rounded-md border border-border p-4">
+                  <div>
+                    <h3 className="text-sm font-semibold">Context settings</h3>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Automatic selection uses Default plus at most one matching
+                      specialty. Exact packs remain available under advanced
+                      provenance.
+                    </p>
+                  </div>
+                  <Input
+                    value={contextSettingsName}
+                    disabled={!selectedLibraryContext?.access.canAdmin}
+                    onChange={(event) =>
+                      setContextSettingsName(event.target.value)
+                    }
+                    placeholder="Context name"
+                  />
+                  <Textarea
+                    value={contextSettingsDescription}
+                    disabled={!selectedLibraryContext?.access.canAdmin}
+                    onChange={(event) =>
+                      setContextSettingsDescription(event.target.value)
+                    }
+                    placeholder="When should agents use this context?"
+                    rows={3}
+                  />
+                  <Select
+                    value={contextSettingsPolicy}
+                    disabled={!selectedLibraryContext?.access.canAdmin}
+                    onValueChange={(value) =>
+                      setContextSettingsPolicy(
+                        value as "open" | "review" | "admins-only",
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="open">Open publishing</SelectItem>
+                      <SelectItem value="review">Require review</SelectItem>
+                      <SelectItem value="admins-only">Admins only</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    type="button"
+                    size="sm"
+                    disabled={
+                      !selectedLibraryContext?.access.canAdmin ||
+                      !contextSettingsName.trim() ||
+                      manageContext.isPending
+                    }
+                    onClick={() => void saveContextSettings()}
+                  >
+                    Save settings
+                  </Button>
+                  {activeAppId ? (
+                    <div className="border-t border-border/70 pt-3">
+                      <p className="text-xs text-muted-foreground">
+                        Automatic generations use Default plus this context for
+                        {` ${activeAppId}`} when no context is chosen
+                        explicitly.
+                      </p>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        className="mt-3"
+                        disabled={
+                          !canSetAppDefault ||
+                          appDefaultContextId === selectedLibraryContext?.id ||
+                          manageContext.isPending
+                        }
+                        onClick={() => void setAppDefaultContext()}
+                      >
+                        {appDefaultContextId === selectedLibraryContext?.id
+                          ? `Automatic for ${activeAppId}`
+                          : `Use automatically for ${activeAppId}`}
+                      </Button>
+                    </div>
+                  ) : null}
+                </section>
+                <section className="space-y-3 rounded-md border border-dashed border-border p-4">
+                  <div>
+                    <h3 className="text-sm font-semibold">New specialty</h3>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Create a focused style such as Marketing, Product, or
+                      Sales. Contexts start open unless you choose review.
+                    </p>
+                  </div>
+                  <Input
+                    value={newContextName}
+                    disabled={!canCreateContext}
+                    onChange={(event) => setNewContextName(event.target.value)}
+                    placeholder="Marketing"
+                  />
+                  <Select
+                    value={newContextPolicy}
+                    disabled={!canCreateContext}
+                    onValueChange={(value) =>
+                      setNewContextPolicy(
+                        value as "open" | "review" | "admins-only",
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="open">Open publishing</SelectItem>
+                      <SelectItem value="review">Require review</SelectItem>
+                      <SelectItem value="admins-only">Admins only</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    disabled={
+                      !canCreateContext ||
+                      !newContextName.trim() ||
+                      manageContext.isPending
+                    }
+                    onClick={() => void createSpecialtyContext()}
+                  >
+                    <IconPlus /> Create context
+                  </Button>
+                </section>
+              </div>
+              {contextSettingsError ? (
+                <p className="mt-3 text-xs text-destructive">
+                  {contextSettingsError}
+                </p>
+              ) : null}
+            </TabsContent>
+          </Tabs>
+          {libraryView === "settings" ? (
+            <section className="space-y-3">
+              <div>
+                <h2 className="text-sm font-semibold">
+                  {t("creativeContext.modeLabel")}
+                </h2>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {activePack
+                    ? `${t("creativeContext.activePack")}: ${activePack.name}`
+                    : t("creativeContext.noActivePack")}
+                </p>
+              </div>
+              <div
+                className="flex flex-col gap-2 sm:flex-row"
+                role="radiogroup"
+              >
+                <ContextModeButton
+                  mode="auto"
+                  activeMode={contextState.state.contextMode}
+                  label={t("creativeContext.automatic")}
+                  description={t("creativeContext.automaticDescription")}
+                  disabled={savingState}
+                  onSelect={(mode) => void changeMode(mode)}
+                />
+                <ContextModeButton
+                  mode="off"
+                  activeMode={contextState.state.contextMode}
+                  label={t("creativeContext.off")}
+                  description={t("creativeContext.offDescription")}
+                  disabled={savingState}
+                  onSelect={(mode) => void changeMode(mode)}
+                />
+              </div>
+              {stateError ? (
+                <p className="text-xs text-destructive">{stateError}</p>
+              ) : null}
+            </section>
+          ) : null}
+
+          {libraryView === "settings" &&
+          brandProfileQuery.data?.profile &&
+          brandProfileQuery.data.dna ? (
+            <section className="border-t border-border/70 pt-6">
+              <div className="rounded-md border border-border p-4">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <div>
+                    <h2 className="text-sm font-semibold">
+                      {t("creativeContext.publishedBrandContext")}
+                    </h2>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {brandProfileQuery.data.profile.name}
+                    </p>
+                  </div>
+                  <Badge variant="secondary">
+                    v{brandProfileQuery.data.dna.versionNumber}
+                  </Badge>
+                </div>
+                <p className="mt-3 text-sm text-muted-foreground">
+                  {brandProfileQuery.data.dna.payload.summary}
+                </p>
+              </div>
+            </section>
+          ) : null}
+
+          {libraryView === "approvals" &&
+          (logoCandidates.length || proposedLayouts.length) ? (
+            <section className="border-t border-border/70 pt-6">
+              <div className="flex items-center gap-2">
+                <IconSparkles className="size-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold">
+                  {t("creativeContext.suggestions")}
+                </h2>
+              </div>
+              {logoCandidates.length ? (
+                <div className="mt-4">
+                  <h3 className="flex items-center gap-2 text-sm font-semibold">
+                    <IconPhoto className="size-4 text-muted-foreground" />
+                    {t("creativeContext.logo")}
+                  </h3>
+                  <div className="mt-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                    {logoCandidates.map((candidate) => (
+                      <article
+                        key={candidate.mediaId}
+                        className="overflow-hidden rounded-md border border-border"
+                      >
+                        <div className="flex h-28 items-center justify-center bg-muted/40 p-3">
+                          <img
+                            src={candidate.thumbnailUrl}
+                            alt={candidate.title}
+                            className="max-h-full max-w-full object-contain"
+                          />
+                        </div>
+                        <div className="flex items-center justify-between gap-2 p-3">
+                          <p className="min-w-0 truncate text-sm font-medium">
                             {candidate.title}
                           </p>
                           <Button
@@ -1663,851 +2649,927 @@ export function CreativeContextPanel({
             </section>
           ) : null}
 
-          <section className="border-t border-border/70 pt-6">
-            <div>
-              <h2 className="text-lg font-semibold">
-                {t("creativeContext.addSource")}
-              </h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {t("creativeContext.sourcesDescription")}
-              </p>
-            </div>
-            <div className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
-              {CONNECTORS.map((connector) => {
-                const Icon = connector.icon;
-                return (
-                  <button
-                    key={connector.kind}
-                    type="button"
-                    disabled={!canManageScope}
-                    onClick={() => {
-                      setConnectorKind(connector.kind);
-                      setSourceName(connector.label);
-                      setSourceReference("");
-                      setUploadedFiles([]);
-                      setPickerRecommendations([]);
-                      seenRecommendationIdsRef.current.clear();
-                      setSelectedConnectionId("");
-                      setSelectedRecommendationIds(new Set());
-                      setSetupError(null);
-                    }}
-                    className="flex min-h-24 flex-col items-start justify-between rounded-md border border-border p-3 text-start transition-colors hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-50"
+          {libraryView === "sources" ? (
+            <>
+              <section className="border-t border-border/70 pt-6">
+                <div>
+                  <h2 className="text-lg font-semibold">
+                    {t("creativeContext.addSource")}
+                  </h2>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {t("creativeContext.sourcesDescription")}
+                  </p>
+                </div>
+                <div className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
+                  {CONNECTORS.map((connector) => {
+                    const Icon = connector.icon;
+                    return (
+                      <button
+                        key={connector.kind}
+                        type="button"
+                        disabled={!canManageScope}
+                        onClick={() => {
+                          setConnectorKind(connector.kind);
+                          setSourceName(connector.label);
+                          setSourceReference("");
+                          setUploadedFiles([]);
+                          setPickerRecommendations([]);
+                          seenRecommendationIdsRef.current.clear();
+                          setSelectedConnectionId("");
+                          setSelectedRecommendationIds(new Set());
+                          setSetupError(null);
+                        }}
+                        className="flex min-h-24 flex-col items-start justify-between rounded-md border border-border p-3 text-start transition-colors hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        <Icon className="size-5 text-muted-foreground" />
+                        <span className="text-sm font-medium">
+                          {connector.label}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+                {selectedConnector ? (
+                  <form
+                    className="mt-4 rounded-md border border-border p-4"
+                    onSubmit={(event) => void previewImport(event)}
                   >
-                    <Icon className="size-5 text-muted-foreground" />
-                    <span className="text-sm font-medium">
-                      {connector.label}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-            {selectedConnector ? (
-              <form
-                className="mt-4 rounded-md border border-border p-4"
-                onSubmit={(event) => void previewImport(event)}
-              >
-                {connectionProvider ? (
-                  <div className="mb-3">
-                    {connectionsQuery.isLoading ? (
-                      <Skeleton className="h-9 w-full" />
-                    ) : connectionsQuery.data?.needsSetup ? (
-                      <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground">
-                        <span>{t("creativeContext.setupConnection")}</span>
-                        <Button
-                          asChild
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                        >
-                          <a
-                            href={
-                              connectionsQuery.data.connectPath ||
-                              connectionsQuery.data.connectionsPath ||
-                              connectionsHref
-                            }
-                          >
-                            {t("creativeContext.connectProvider")}
-                            <IconArrowUpRight />
-                          </a>
-                        </Button>
+                    {connectionProvider ? (
+                      <div className="mb-3">
+                        {connectionsQuery.isLoading ? (
+                          <Skeleton className="h-9 w-full" />
+                        ) : connectionsQuery.data?.needsSetup ? (
+                          <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground">
+                            <span>{t("creativeContext.setupConnection")}</span>
+                            <Button
+                              asChild
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                            >
+                              <a
+                                href={
+                                  connectionsQuery.data.connectPath ||
+                                  connectionsQuery.data.connectionsPath ||
+                                  connectionsHref
+                                }
+                              >
+                                {t("creativeContext.connectProvider")}
+                                <IconArrowUpRight />
+                              </a>
+                            </Button>
+                          </div>
+                        ) : connectionsQuery.data?.needsPicker ? (
+                          <label className="block space-y-1.5 text-xs font-medium">
+                            <span>{t("creativeContext.chooseConnection")}</span>
+                            <Select
+                              value={selectedConnectionId}
+                              onValueChange={setSelectedConnectionId}
+                            >
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={t(
+                                    "creativeContext.chooseConnection",
+                                  )}
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {connectionsQuery.data.connections.map(
+                                  (connection) => (
+                                    <SelectItem
+                                      key={connection.connectionId}
+                                      value={connection.connectionId}
+                                    >
+                                      {connection.label}
+                                    </SelectItem>
+                                  ),
+                                )}
+                              </SelectContent>
+                            </Select>
+                          </label>
+                        ) : null}
                       </div>
-                    ) : connectionsQuery.data?.needsPicker ? (
-                      <label className="block space-y-1.5 text-xs font-medium">
-                        <span>{t("creativeContext.chooseConnection")}</span>
-                        <Select
-                          value={selectedConnectionId}
-                          onValueChange={setSelectedConnectionId}
-                        >
-                          <SelectTrigger>
-                            <SelectValue
-                              placeholder={t(
-                                "creativeContext.chooseConnection",
-                              )}
-                            />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {connectionsQuery.data.connections.map(
-                              (connection) => (
-                                <SelectItem
-                                  key={connection.connectionId}
-                                  value={connection.connectionId}
-                                >
-                                  {connection.label}
-                                </SelectItem>
-                              ),
-                            )}
-                          </SelectContent>
-                        </Select>
-                      </label>
                     ) : null}
-                  </div>
-                ) : null}
-                {recommendationProvider && selectedConnectionId ? (
-                  <div className="mb-3 rounded-md border border-border p-3">
-                    {connectorKind === "google-slides" ? (
-                      <div className="mb-3 flex flex-wrap items-center justify-between gap-3 border-b border-border/60 pb-3">
-                        <p className="max-w-lg text-xs text-muted-foreground">
-                          {t("creativeContext.googlePickerDescription")}
-                        </p>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          disabled={openingGooglePicker}
-                          onClick={() => void chooseGoogleSlides()}
-                        >
-                          <IconSlideshow />
-                          {openingGooglePicker
-                            ? t("creativeContext.loading")
-                            : t("creativeContext.choosePresentations")}
-                        </Button>
+                    {recommendationProvider && selectedConnectionId ? (
+                      <div className="mb-3 rounded-md border border-border p-3">
+                        {connectorKind === "google-slides" ? (
+                          <div className="mb-3 flex flex-wrap items-center justify-between gap-3 border-b border-border/60 pb-3">
+                            <p className="max-w-lg text-xs text-muted-foreground">
+                              {t("creativeContext.googlePickerDescription")}
+                            </p>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              disabled={openingGooglePicker}
+                              onClick={() => void chooseGoogleSlides()}
+                            >
+                              <IconSlideshow />
+                              {openingGooglePicker
+                                ? t("creativeContext.loading")
+                                : t("creativeContext.choosePresentations")}
+                            </Button>
+                          </div>
+                        ) : null}
+                        {recommendationsQuery.isLoading &&
+                        !availableRecommendations.length ? (
+                          <Skeleton className="h-16 w-full" />
+                        ) : availableRecommendations.length ? (
+                          <div className="space-y-2">
+                            <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
+                              <span>
+                                {t("creativeContext.discoveredItems", {
+                                  count: formatNumber(
+                                    availableRecommendations.length,
+                                  ),
+                                })}
+                              </span>
+                              <span>
+                                {t("creativeContext.selectedItems", {
+                                  count: formatNumber(
+                                    selectedRecommendationIds.size,
+                                  ),
+                                })}
+                              </span>
+                            </div>
+                            <div className="max-h-52 divide-y divide-border/60 overflow-y-auto">
+                              {availableRecommendations.map(
+                                (recommendation) => (
+                                  <label
+                                    key={recommendation.externalId}
+                                    className="flex cursor-pointer items-start gap-3 py-2"
+                                  >
+                                    <Checkbox
+                                      className="mt-0.5"
+                                      checked={selectedRecommendationIds.has(
+                                        recommendation.externalId,
+                                      )}
+                                      onCheckedChange={(checked) =>
+                                        setSelectedRecommendationIds(
+                                          (current) => {
+                                            const next = new Set(current);
+                                            if (checked) {
+                                              next.add(
+                                                recommendation.externalId,
+                                              );
+                                            } else {
+                                              next.delete(
+                                                recommendation.externalId,
+                                              );
+                                            }
+                                            return next;
+                                          },
+                                        )
+                                      }
+                                    />
+                                    <span className="min-w-0">
+                                      <span className="block truncate text-sm">
+                                        {recommendation.title}
+                                      </span>
+                                      <span className="block text-xs text-muted-foreground">
+                                        {recommendation.containerRef ??
+                                          recommendation.kind}
+                                      </span>
+                                    </span>
+                                  </label>
+                                ),
+                              )}
+                            </div>
+                          </div>
+                        ) : (
+                          <p className="text-xs text-muted-foreground">
+                            {recommendationsQuery.data?.unavailableReason ??
+                              t("creativeContext.unavailable")}
+                          </p>
+                        )}
                       </div>
                     ) : null}
-                    {recommendationsQuery.isLoading &&
-                    !availableRecommendations.length ? (
-                      <Skeleton className="h-16 w-full" />
-                    ) : availableRecommendations.length ? (
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-                          <span>
-                            {t("creativeContext.discoveredItems", {
-                              count: formatNumber(
-                                availableRecommendations.length,
-                              ),
-                            })}
-                          </span>
-                          <span>
-                            {t("creativeContext.selectedItems", {
-                              count: formatNumber(
-                                selectedRecommendationIds.size,
-                              ),
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <label className="space-y-1.5 text-xs font-medium">
+                        <span>{t("creativeContext.sourceName")}</span>
+                        <Input
+                          value={sourceName}
+                          onChange={(event) =>
+                            setSourceName(event.target.value)
+                          }
+                          required
+                        />
+                      </label>
+                      {selectedConnector.kind === "upload" ? (
+                        <div className="space-y-1.5 text-xs font-medium">
+                          <span>{t("creativeContext.sourceReference")}</span>
+                          <input
+                            ref={fileInputRef}
+                            type="file"
+                            multiple
+                            accept=".pptx,.docx,.pdf,.png,.jpg,.jpeg,.webp,.gif,.svg,application/pdf,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg,image/webp,image/gif,image/svg+xml"
+                            className="hidden"
+                            onChange={chooseFiles}
+                          />
+                          <input
+                            ref={folderInputRef}
+                            type="file"
+                            multiple
+                            className="hidden"
+                            onChange={chooseFiles}
+                            {...({ webkitdirectory: "", directory: "" } as {
+                              webkitdirectory: string;
+                              directory: string;
                             })}
-                          </span>
+                          />
+                          <div
+                            onDragOver={(event) => event.preventDefault()}
+                            onDrop={dropFiles}
+                            className="rounded-md border border-dashed border-border p-4"
+                          >
+                            <p className="text-xs text-muted-foreground">
+                              {t("creativeContext.dropFiles")}
+                            </p>
+                            <div className="mt-3 flex flex-wrap gap-2">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => fileInputRef.current?.click()}
+                              >
+                                {t("creativeContext.chooseFiles")}
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => folderInputRef.current?.click()}
+                              >
+                                {t("creativeContext.chooseFolder")}
+                              </Button>
+                            </div>
+                            {uploadedFiles.length ? (
+                              <ul className="mt-3 space-y-1 text-xs text-muted-foreground">
+                                {uploadedFiles.map((file) => (
+                                  <li key={file.id} className="truncate">
+                                    {file.fileName}
+                                  </li>
+                                ))}
+                              </ul>
+                            ) : null}
+                          </div>
                         </div>
-                        <div className="max-h-52 divide-y divide-border/60 overflow-y-auto">
-                          {availableRecommendations.map((recommendation) => (
-                            <label
-                              key={recommendation.externalId}
-                              className="flex cursor-pointer items-start gap-3 py-2"
-                            >
-                              <Checkbox
-                                className="mt-0.5"
-                                checked={selectedRecommendationIds.has(
-                                  recommendation.externalId,
-                                )}
-                                onCheckedChange={(checked) =>
-                                  setSelectedRecommendationIds((current) => {
-                                    const next = new Set(current);
-                                    if (checked) {
-                                      next.add(recommendation.externalId);
-                                    } else {
-                                      next.delete(recommendation.externalId);
-                                    }
-                                    return next;
-                                  })
+                      ) : (
+                        <label className="space-y-1.5 text-xs font-medium">
+                          <span>{t("creativeContext.sourceReference")}</span>
+                          {selectedConnector.kind === "website" ||
+                          selectedConnector.kind === "figma" ||
+                          selectedConnector.kind === "notion" ? (
+                            <Textarea
+                              value={sourceReference}
+                              onChange={(event) =>
+                                setSourceReference(event.target.value)
+                              }
+                              placeholder={
+                                selectedConnector.referencePlaceholder
+                              }
+                              required={selectedConnector.referenceRequired}
+                              rows={3}
+                            />
+                          ) : (
+                            <Input
+                              value={sourceReference}
+                              onChange={(event) =>
+                                setSourceReference(event.target.value)
+                              }
+                              placeholder={
+                                selectedConnector.referencePlaceholder
+                              }
+                              required={selectedConnector.referenceRequired}
+                            />
+                          )}
+                        </label>
+                      )}
+                    </div>
+                    <div className="mt-3 flex justify-end gap-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => setConnectorKind(null)}
+                      >
+                        {t("creativeContext.cancel")}
+                      </Button>
+                      <Button
+                        type="submit"
+                        disabled={
+                          manageSource.isPending ||
+                          uploadResource.isPending ||
+                          (selectedConnector.kind === "upload" &&
+                            !uploadedFiles.length) ||
+                          (Boolean(connectionProvider) &&
+                            !selectedConnectionId) ||
+                          (selectedConnector.referenceRequired &&
+                            !sourceReference.trim()) ||
+                          (Boolean(recommendationProvider) &&
+                            !sourceReference.trim() &&
+                            !selectedRecommendationIds.size)
+                        }
+                      >
+                        <IconFileImport />
+                        {t("creativeContext.preview")}
+                      </Button>
+                    </div>
+                  </form>
+                ) : null}
+
+                {previewSourceId ? (
+                  <div className="mt-4 rounded-md border border-border p-4">
+                    <div className="flex flex-wrap items-start justify-between gap-3">
+                      <div>
+                        <h3 className="text-sm font-semibold">
+                          {previewSourceName}
+                        </h3>
+                        {previewQuery.isLoading ? (
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {t("creativeContext.loading")}
+                          </p>
+                        ) : (
+                          <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                            <span>
+                              {t("creativeContext.discoveredItems", {
+                                count: formatNumber(
+                                  previewQuery.data?.total ??
+                                    previewQuery.data?.items.length ??
+                                    0,
+                                ),
+                              })}
+                            </span>
+                            <span>
+                              {t("creativeContext.selectedItems", {
+                                count: formatNumber(
+                                  selectedPreviewItemIds.size,
+                                ),
+                              })}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                      <Button
+                        type="button"
+                        disabled={
+                          previewQuery.isLoading ||
+                          !previewQuery.data?.items.length ||
+                          !selectedPreviewItemIds.size ||
+                          startImport.isPending ||
+                          importJob?.status === "queued" ||
+                          importJob?.status === "running"
+                        }
+                        onClick={() => void beginImport()}
+                      >
+                        <IconFileImport />
+                        {startImport.isPending
+                          ? t("creativeContext.importing")
+                          : t("creativeContext.startImport")}
+                      </Button>
+                    </div>
+                    {previewQuery.data?.items.length ? (
+                      <div className="mt-3">
+                        <div className="flex items-center gap-2 border-y border-border/60 py-2">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() =>
+                              setSelectedPreviewItemIds(
+                                new Set(
+                                  previewQuery.data?.items.map(
+                                    (item) => item.externalId,
+                                  ) ?? [],
+                                ),
+                              )
+                            }
+                          >
+                            {t("creativeContext.selectAll")}
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setSelectedPreviewItemIds(new Set())}
+                          >
+                            {t("creativeContext.clearSelection")}
+                          </Button>
+                        </div>
+                        <div className="max-h-80 divide-y divide-border/60 overflow-y-auto">
+                          {previewQuery.data.items.map((item) => (
+                            <label
+                              key={item.externalId}
+                              className="flex cursor-pointer items-start gap-3 py-2"
+                            >
+                              <Checkbox
+                                className="mt-0.5"
+                                checked={selectedPreviewItemIds.has(
+                                  item.externalId,
+                                )}
+                                onCheckedChange={(checked) =>
+                                  setSelectedPreviewItemIds((current) => {
+                                    const next = new Set(current);
+                                    if (checked) next.add(item.externalId);
+                                    else next.delete(item.externalId);
+                                    return next;
+                                  })
                                 }
                               />
                               <span className="min-w-0">
                                 <span className="block truncate text-sm">
-                                  {recommendation.title}
+                                  {item.title}
                                 </span>
                                 <span className="block text-xs text-muted-foreground">
-                                  {recommendation.containerRef ??
-                                    recommendation.kind}
+                                  {item.kind}
                                 </span>
                               </span>
                             </label>
                           ))}
                         </div>
                       </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                {importJob ? (
+                  <div className="mt-4 rounded-md border border-border p-4">
+                    <div className="flex items-center gap-2">
+                      {importJob.status === "completed" ? (
+                        <IconCheck className="size-5 text-emerald-600" />
+                      ) : importJob.status === "failed" ? (
+                        <IconAlertTriangle className="size-5 text-destructive" />
+                      ) : (
+                        <IconRefresh className="size-5 animate-spin text-muted-foreground" />
+                      )}
+                      <h3 className="text-sm font-semibold">
+                        {importJob.status === "completed"
+                          ? t("creativeContext.importComplete")
+                          : importJob.status === "failed"
+                            ? t("creativeContext.importFailed")
+                            : t("creativeContext.importing")}
+                      </h3>
+                    </div>
+                    {importJob.status === "completed" && brandProposal ? (
+                      <div className="mt-4 rounded-md bg-muted/50 p-4">
+                        <div className="flex items-start gap-3">
+                          <IconSparkles className="mt-0.5 size-5 text-muted-foreground" />
+                          <div className="min-w-0 flex-1">
+                            <h4 className="text-sm font-semibold">
+                              {t("creativeContext.brandDnaTitle")}
+                            </h4>
+                            <p className="mt-1 text-sm text-muted-foreground">
+                              {brandProposal.summary}
+                            </p>
+                            {brandProposal.colors.length ? (
+                              <div className="mt-4">
+                                <p className="text-xs font-medium">
+                                  {t("creativeContext.colors")}
+                                </p>
+                                <div className="mt-2 flex flex-wrap gap-2">
+                                  {brandProposal.colors.map((color) => (
+                                    <div
+                                      key={color}
+                                      className="flex items-center gap-1.5 rounded border border-border bg-background px-2 py-1 text-xs"
+                                    >
+                                      <span
+                                        className="size-4 rounded-sm border border-black/10"
+                                        style={{ backgroundColor: color }}
+                                      />
+                                      {color}
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            ) : null}
+                            {brandProposal.fonts.length ? (
+                              <div className="mt-4">
+                                <p className="text-xs font-medium">
+                                  {t("creativeContext.fonts")}
+                                </p>
+                                <div className="mt-2 flex flex-wrap gap-2">
+                                  {brandProposal.fonts.map((font) => (
+                                    <Badge key={font} variant="outline">
+                                      {font}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              </div>
+                            ) : null}
+                            {brandLayoutThumbnails.length ? (
+                              <div className="mt-4">
+                                <p className="text-xs font-medium">
+                                  {t("creativeContext.layouts")}
+                                </p>
+                                <div className="mt-2 grid grid-cols-3 gap-2">
+                                  {brandLayoutThumbnails.map((thumbnail) => (
+                                    <AccessScopedThumbnail
+                                      key={thumbnail.itemVersionId}
+                                      itemId={thumbnail.itemId}
+                                      itemVersionId={thumbnail.itemVersionId}
+                                      className="aspect-video w-full rounded border border-border object-cover"
+                                    />
+                                  ))}
+                                </div>
+                              </div>
+                            ) : null}
+                            {brandVoicePreview ? (
+                              <div className="mt-4">
+                                <p className="text-xs font-medium">
+                                  {t("creativeContext.voice")}
+                                </p>
+                                <blockquote className="mt-1 border-s-2 border-border ps-3 text-sm text-muted-foreground">
+                                  {brandVoicePreview}
+                                </blockquote>
+                              </div>
+                            ) : null}
+                            <div className="mt-4 flex flex-wrap gap-2">
+                              <Button
+                                type="button"
+                                disabled={publishBrandDna.isPending}
+                                onClick={() => void publishProposal()}
+                              >
+                                <IconSparkles />
+                                {publishBrandDna.isPending
+                                  ? t("creativeContext.applyingBrandContext")
+                                  : t("creativeContext.applyBrandContext")}
+                              </Button>
+                              <Button asChild type="button" variant="outline">
+                                <a href="/agent">
+                                  {t("creativeContext.generateWithContext")}
+                                  <IconArrowUpRight />
+                                </a>
+                              </Button>
+                            </div>
+                            {publishedMessage ? (
+                              <p className="mt-2 text-xs text-muted-foreground">
+                                {publishedMessage}
+                              </p>
+                            ) : null}
+                          </div>
+                        </div>
+                      </div>
+                    ) : importJob.error ? (
+                      <p className="mt-2 text-sm text-destructive">
+                        {importJob.error}
+                      </p>
                     ) : (
-                      <p className="text-xs text-muted-foreground">
-                        {recommendationsQuery.data?.unavailableReason ??
-                          t("creativeContext.unavailable")}
+                      <p className="mt-2 text-xs text-muted-foreground">
+                        {formatNumber(importJob.progressCurrent)} /{" "}
+                        {formatNumber(importJob.progressTotal ?? 0)}
                       </p>
                     )}
                   </div>
                 ) : null}
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <label className="space-y-1.5 text-xs font-medium">
-                    <span>{t("creativeContext.sourceName")}</span>
-                    <Input
-                      value={sourceName}
-                      onChange={(event) => setSourceName(event.target.value)}
-                      required
-                    />
-                  </label>
-                  {selectedConnector.kind === "upload" ? (
-                    <div className="space-y-1.5 text-xs font-medium">
-                      <span>{t("creativeContext.sourceReference")}</span>
-                      <input
-                        ref={fileInputRef}
-                        type="file"
-                        multiple
-                        accept=".pptx,.docx,.pdf,.png,.jpg,.jpeg,.webp,.gif,.svg,application/pdf,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg,image/webp,image/gif,image/svg+xml"
-                        className="hidden"
-                        onChange={chooseFiles}
-                      />
-                      <input
-                        ref={folderInputRef}
-                        type="file"
-                        multiple
-                        className="hidden"
-                        onChange={chooseFiles}
-                        {...({ webkitdirectory: "", directory: "" } as {
-                          webkitdirectory: string;
-                          directory: string;
-                        })}
-                      />
-                      <div
-                        onDragOver={(event) => event.preventDefault()}
-                        onDrop={dropFiles}
-                        className="rounded-md border border-dashed border-border p-4"
-                      >
-                        <p className="text-xs text-muted-foreground">
-                          {t("creativeContext.dropFiles")}
-                        </p>
-                        <div className="mt-3 flex flex-wrap gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => fileInputRef.current?.click()}
-                          >
-                            {t("creativeContext.chooseFiles")}
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => folderInputRef.current?.click()}
-                          >
-                            {t("creativeContext.chooseFolder")}
-                          </Button>
-                        </div>
-                        {uploadedFiles.length ? (
-                          <ul className="mt-3 space-y-1 text-xs text-muted-foreground">
-                            {uploadedFiles.map((file) => (
-                              <li key={file.id} className="truncate">
-                                {file.fileName}
-                              </li>
-                            ))}
-                          </ul>
-                        ) : null}
-                      </div>
-                    </div>
-                  ) : (
-                    <label className="space-y-1.5 text-xs font-medium">
-                      <span>{t("creativeContext.sourceReference")}</span>
-                      {selectedConnector.kind === "website" ||
-                      selectedConnector.kind === "figma" ||
-                      selectedConnector.kind === "notion" ? (
-                        <Textarea
-                          value={sourceReference}
-                          onChange={(event) =>
-                            setSourceReference(event.target.value)
-                          }
-                          placeholder={selectedConnector.referencePlaceholder}
-                          required={selectedConnector.referenceRequired}
-                          rows={3}
-                        />
-                      ) : (
-                        <Input
-                          value={sourceReference}
-                          onChange={(event) =>
-                            setSourceReference(event.target.value)
-                          }
-                          placeholder={selectedConnector.referencePlaceholder}
-                          required={selectedConnector.referenceRequired}
-                        />
-                      )}
-                    </label>
-                  )}
-                </div>
-                <div className="mt-3 flex justify-end gap-2">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    onClick={() => setConnectorKind(null)}
-                  >
-                    {t("creativeContext.cancel")}
-                  </Button>
-                  <Button
-                    type="submit"
-                    disabled={
-                      manageSource.isPending ||
-                      uploadResource.isPending ||
-                      (selectedConnector.kind === "upload" &&
-                        !uploadedFiles.length) ||
-                      (Boolean(connectionProvider) && !selectedConnectionId) ||
-                      (selectedConnector.referenceRequired &&
-                        !sourceReference.trim()) ||
-                      (Boolean(recommendationProvider) &&
-                        !sourceReference.trim() &&
-                        !selectedRecommendationIds.size)
-                    }
-                  >
-                    <IconFileImport />
-                    {t("creativeContext.preview")}
-                  </Button>
-                </div>
-              </form>
-            ) : null}
-
-            {previewSourceId ? (
-              <div className="mt-4 rounded-md border border-border p-4">
-                <div className="flex flex-wrap items-start justify-between gap-3">
-                  <div>
+                {promotionPreview ? (
+                  <div className="mt-4 rounded-md border border-border p-4">
                     <h3 className="text-sm font-semibold">
-                      {previewSourceName}
+                      {t("creativeContext.promoteToOrganization")}
                     </h3>
-                    {previewQuery.isLoading ? (
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {t("creativeContext.loading")}
-                      </p>
-                    ) : (
-                      <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
-                        <span>
-                          {t("creativeContext.discoveredItems", {
-                            count: formatNumber(
-                              previewQuery.data?.total ??
-                                previewQuery.data?.items.length ??
-                                0,
-                            ),
-                          })}
-                        </span>
-                        <span>
-                          {t("creativeContext.selectedItems", {
-                            count: formatNumber(selectedPreviewItemIds.size),
-                          })}
-                        </span>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t("creativeContext.promotionDescription")}
+                    </p>
+                    <dl className="mt-3 grid gap-2 text-xs sm:grid-cols-3">
+                      <div>
+                        <dt className="text-muted-foreground">
+                          {t("creativeContext.sourceReference")}
+                        </dt>
+                        <dd className="mt-0.5 truncate font-medium">
+                          {promotionPreview.containerRef}
+                        </dd>
                       </div>
-                    )}
+                      <div>
+                        <dt className="text-muted-foreground">
+                          {t("creativeContext.itemsLabel", { count: "" })}
+                        </dt>
+                        <dd className="mt-0.5 font-medium">
+                          {formatNumber(promotionPreview.itemCount)}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt className="text-muted-foreground">
+                          {t("creativeContext.restrictedItems", { count: "" })}
+                        </dt>
+                        <dd className="mt-0.5 font-medium">
+                          {formatNumber(promotionPreview.restrictedItemCount)}
+                        </dd>
+                      </div>
+                    </dl>
+                    <Button
+                      type="button"
+                      className="mt-4"
+                      disabled={manageSource.isPending}
+                      onClick={() => void confirmPromotion()}
+                    >
+                      {t("creativeContext.promoteToOrganization")}
+                    </Button>
                   </div>
-                  <Button
-                    type="button"
-                    disabled={
-                      previewQuery.isLoading ||
-                      !previewQuery.data?.items.length ||
-                      !selectedPreviewItemIds.size ||
-                      startImport.isPending ||
-                      importJob?.status === "queued" ||
-                      importJob?.status === "running"
-                    }
-                    onClick={() => void beginImport()}
-                  >
-                    <IconFileImport />
-                    {startImport.isPending
-                      ? t("creativeContext.importing")
-                      : t("creativeContext.startImport")}
-                  </Button>
-                </div>
-                {previewQuery.data?.items.length ? (
+                ) : null}
+                {promotionMessage ? (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {promotionMessage}
+                  </p>
+                ) : null}
+                {setupError ? (
+                  <p className="mt-2 text-sm text-destructive">{setupError}</p>
+                ) : null}
+              </section>
+
+              <section className="border-t border-border/70 pt-6">
+                <h2 className="text-lg font-semibold">
+                  {t("creativeContext.sourcesTitle")}
+                </h2>
+                {sources.length ? (
                   <div className="mt-3">
-                    <div className="flex items-center gap-2 border-y border-border/60 py-2">
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() =>
-                          setSelectedPreviewItemIds(
-                            new Set(
-                              previewQuery.data?.items.map(
-                                (item) => item.externalId,
-                              ) ?? [],
-                            ),
-                          )
+                    {sources.map((source) => (
+                      <SourceRow
+                        key={source.id}
+                        source={source}
+                        refreshing={
+                          refreshSource.isPending &&
+                          refreshSource.variables?.sourceId === source.id
                         }
-                      >
-                        {t("creativeContext.selectAll")}
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setSelectedPreviewItemIds(new Set())}
-                      >
-                        {t("creativeContext.clearSelection")}
-                      </Button>
-                    </div>
-                    <div className="max-h-80 divide-y divide-border/60 overflow-y-auto">
-                      {previewQuery.data.items.map((item) => (
-                        <label
-                          key={item.externalId}
-                          className="flex cursor-pointer items-start gap-3 py-2"
-                        >
-                          <Checkbox
-                            className="mt-0.5"
-                            checked={selectedPreviewItemIds.has(
-                              item.externalId,
-                            )}
-                            onCheckedChange={(checked) =>
-                              setSelectedPreviewItemIds((current) => {
-                                const next = new Set(current);
-                                if (checked) next.add(item.externalId);
-                                else next.delete(item.externalId);
-                                return next;
-                              })
-                            }
-                          />
-                          <span className="min-w-0">
-                            <span className="block truncate text-sm">
-                              {item.title}
-                            </span>
-                            <span className="block text-xs text-muted-foreground">
-                              {item.kind}
-                            </span>
-                          </span>
-                        </label>
-                      ))}
-                    </div>
+                        canReview={canManageScope}
+                        canPromote={
+                          libraryScope === "user" &&
+                          Boolean(org?.orgId) &&
+                          canManageOrg &&
+                          source.visibility === "private"
+                        }
+                        onRefresh={refresh}
+                        onReview={(selected) =>
+                          void openItemCuration(selected, "restricted")
+                        }
+                        onCurate={(selected) => void openItemCuration(selected)}
+                        onPromote={(selected) =>
+                          void previewSourcePromotion(selected)
+                        }
+                        onPause={(selected) => void pauseSource(selected)}
+                        onRestore={(selected) => void restoreSource(selected)}
+                        onDelete={setDeleteSource}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="mt-4 rounded-md border border-dashed border-border p-6 text-center">
+                    <IconBooks className="mx-auto size-7 text-muted-foreground" />
+                    <h3 className="mt-3 text-sm font-semibold">
+                      {t("creativeContext.noSourcesTitle")}
+                    </h3>
+                    <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">
+                      {t("creativeContext.noSourcesDescription")}
+                    </p>
+                    <Button
+                      asChild
+                      variant="outline"
+                      size="sm"
+                      className="mt-4"
+                    >
+                      <a href={connectionsHref}>
+                        {t("creativeContext.connectSources")}
+                        <IconArrowUpRight />
+                      </a>
+                    </Button>
                   </div>
+                )}
+                {reviewSource ? (
+                  <ItemCuration
+                    source={reviewSource}
+                    items={reviewedItems}
+                    busy={reviewItems.isPending}
+                    onReview={(operation, itemId) =>
+                      void reviewContextItem(operation, itemId)
+                    }
+                    onClose={() => {
+                      setReviewSource(null);
+                      setReviewedItems([]);
+                    }}
+                  />
                 ) : null}
-              </div>
-            ) : null}
+                {reviewError ? (
+                  <p className="mt-2 text-sm text-destructive">{reviewError}</p>
+                ) : null}
+                {refreshMessage ? (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {refreshMessage}
+                  </p>
+                ) : null}
+                {lifecycleMessage ? (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {lifecycleMessage}
+                  </p>
+                ) : null}
+              </section>
+            </>
+          ) : null}
 
-            {importJob ? (
-              <div className="mt-4 rounded-md border border-border p-4">
-                <div className="flex items-center gap-2">
-                  {importJob.status === "completed" ? (
-                    <IconCheck className="size-5 text-emerald-600" />
-                  ) : importJob.status === "failed" ? (
-                    <IconAlertTriangle className="size-5 text-destructive" />
-                  ) : (
-                    <IconRefresh className="size-5 animate-spin text-muted-foreground" />
-                  )}
-                  <h3 className="text-sm font-semibold">
-                    {importJob.status === "completed"
-                      ? t("creativeContext.importComplete")
-                      : importJob.status === "failed"
-                        ? t("creativeContext.importFailed")
-                        : t("creativeContext.importing")}
-                  </h3>
+          {libraryView === "settings" ? (
+            <section className="border-t border-border/70 pt-6">
+              <h2 className="text-lg font-semibold">
+                {t("creativeContext.packsTitle")}
+              </h2>
+              {packs.length ? (
+                <div className="mt-3">
+                  {packs.map((pack) => (
+                    <PackRow
+                      key={pack.id}
+                      pack={pack}
+                      pinned={contextState.state.pinnedPackId === pack.id}
+                      disabled={savingState}
+                      onPin={(packId) => void changePinnedPack(packId)}
+                      onDetails={setSelectedPackId}
+                    />
+                  ))}
                 </div>
-                {importJob.status === "completed" && brandProposal ? (
-                  <div className="mt-4 rounded-md bg-muted/50 p-4">
-                    <div className="flex items-start gap-3">
-                      <IconSparkles className="mt-0.5 size-5 text-muted-foreground" />
-                      <div className="min-w-0 flex-1">
-                        <h4 className="text-sm font-semibold">
-                          {t("creativeContext.brandDnaTitle")}
-                        </h4>
-                        <p className="mt-1 text-sm text-muted-foreground">
-                          {brandProposal.summary}
+              ) : (
+                <p className="mt-3 rounded-md border border-dashed border-border p-5 text-sm text-muted-foreground">
+                  {t("creativeContext.noPacks")}
+                </p>
+              )}
+              {selectedPackId ? (
+                <div className="mt-4 rounded-md border border-border p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <h3 className="text-sm font-semibold">
+                        {packQuery.data?.pack?.name ??
+                          t("creativeContext.packDetails")}
+                      </h3>
+                      {packQuery.data?.pack?.derivedFromPackId ? (
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {t("creativeContext.influence")}:{" "}
+                          {packQuery.data.pack.derivedFromPackId}
                         </p>
-                        {brandProposal.colors.length ? (
-                          <div className="mt-4">
-                            <p className="text-xs font-medium">
-                              {t("creativeContext.colors")}
-                            </p>
-                            <div className="mt-2 flex flex-wrap gap-2">
-                              {brandProposal.colors.map((color) => (
-                                <div
-                                  key={color}
-                                  className="flex items-center gap-1.5 rounded border border-border bg-background px-2 py-1 text-xs"
-                                >
-                                  <span
-                                    className="size-4 rounded-sm border border-black/10"
-                                    style={{ backgroundColor: color }}
-                                  />
-                                  {color}
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        ) : null}
-                        {brandProposal.fonts.length ? (
-                          <div className="mt-4">
-                            <p className="text-xs font-medium">
-                              {t("creativeContext.fonts")}
-                            </p>
-                            <div className="mt-2 flex flex-wrap gap-2">
-                              {brandProposal.fonts.map((font) => (
-                                <Badge key={font} variant="outline">
-                                  {font}
-                                </Badge>
-                              ))}
-                            </div>
-                          </div>
-                        ) : null}
-                        {brandLayoutThumbnails.length ? (
-                          <div className="mt-4">
-                            <p className="text-xs font-medium">
-                              {t("creativeContext.layouts")}
-                            </p>
-                            <div className="mt-2 grid grid-cols-3 gap-2">
-                              {brandLayoutThumbnails.map((thumbnail) => (
-                                <AccessScopedThumbnail
-                                  key={thumbnail.itemVersionId}
-                                  itemId={thumbnail.itemId}
-                                  itemVersionId={thumbnail.itemVersionId}
-                                  className="aspect-video w-full rounded border border-border object-cover"
-                                />
-                              ))}
-                            </div>
-                          </div>
-                        ) : null}
-                        {brandVoicePreview ? (
-                          <div className="mt-4">
-                            <p className="text-xs font-medium">
-                              {t("creativeContext.voice")}
+                      ) : null}
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedPackId(null)}
+                    >
+                      {t("creativeContext.cancel")}
+                    </Button>
+                  </div>
+                  {packQuery.data?.pack?.members.length ? (
+                    <div className="mt-3 divide-y divide-border/60">
+                      {packQuery.data.pack.members.map((member) => (
+                        <div key={member.id} className="py-2 text-xs">
+                          <p className="font-medium">{member.itemId}</p>
+                          {member.reason ? (
+                            <p className="mt-0.5 text-muted-foreground">
+                              {t("creativeContext.influence")}: {member.reason}
                             </p>
-                            <blockquote className="mt-1 border-s-2 border-border ps-3 text-sm text-muted-foreground">
-                              {brandVoicePreview}
-                            </blockquote>
-                          </div>
-                        ) : null}
-                        <div className="mt-4 flex flex-wrap gap-2">
-                          <Button
-                            type="button"
-                            disabled={publishBrandDna.isPending}
-                            onClick={() => void publishProposal()}
-                          >
-                            <IconSparkles />
-                            {publishBrandDna.isPending
-                              ? t("creativeContext.applyingBrandContext")
-                              : t("creativeContext.applyBrandContext")}
-                          </Button>
-                          <Button asChild type="button" variant="outline">
-                            <a href="/agent">
-                              {t("creativeContext.generateWithContext")}
-                              <IconArrowUpRight />
-                            </a>
-                          </Button>
+                          ) : null}
                         </div>
-                        {publishedMessage ? (
-                          <p className="mt-2 text-xs text-muted-foreground">
-                            {publishedMessage}
-                          </p>
-                        ) : null}
-                      </div>
+                      ))}
                     </div>
-                  </div>
-                ) : importJob.error ? (
-                  <p className="mt-2 text-sm text-destructive">
-                    {importJob.error}
-                  </p>
-                ) : (
-                  <p className="mt-2 text-xs text-muted-foreground">
-                    {formatNumber(importJob.progressCurrent)} /{" "}
-                    {formatNumber(importJob.progressTotal ?? 0)}
-                  </p>
-                )}
-              </div>
-            ) : null}
-            {promotionPreview ? (
-              <div className="mt-4 rounded-md border border-border p-4">
-                <h3 className="text-sm font-semibold">
-                  {t("creativeContext.promoteToOrganization")}
-                </h3>
+                  ) : null}
+                </div>
+              ) : null}
+            </section>
+          ) : null}
+
+          {libraryView === "items" ? (
+            <section className="border-t border-border/70 pt-6">
+              <div>
+                <h2 className="text-lg font-semibold">
+                  {t("creativeContext.searchTitle")}
+                </h2>
                 <p className="mt-1 text-sm text-muted-foreground">
-                  {t("creativeContext.promotionDescription")}
+                  {t("creativeContext.searchDescription")}
                 </p>
-                <dl className="mt-3 grid gap-2 text-xs sm:grid-cols-3">
-                  <div>
-                    <dt className="text-muted-foreground">
-                      {t("creativeContext.sourceReference")}
-                    </dt>
-                    <dd className="mt-0.5 truncate font-medium">
-                      {promotionPreview.containerRef}
-                    </dd>
-                  </div>
-                  <div>
-                    <dt className="text-muted-foreground">
-                      {t("creativeContext.itemsLabel", { count: "" })}
-                    </dt>
-                    <dd className="mt-0.5 font-medium">
-                      {formatNumber(promotionPreview.itemCount)}
-                    </dd>
-                  </div>
-                  <div>
-                    <dt className="text-muted-foreground">
-                      {t("creativeContext.restrictedItems", { count: "" })}
-                    </dt>
-                    <dd className="mt-0.5 font-medium">
-                      {formatNumber(promotionPreview.restrictedItemCount)}
-                    </dd>
-                  </div>
-                </dl>
+              </div>
+              <form
+                className="mt-4 flex gap-2"
+                onSubmit={(event) => void search(event)}
+              >
+                <div className="relative min-w-0 flex-1">
+                  <IconSearch className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    type="search"
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={t("creativeContext.searchPlaceholder")}
+                    aria-label={t("creativeContext.searchPlaceholder")}
+                    className="ps-9"
+                  />
+                </div>
                 <Button
-                  type="button"
-                  className="mt-4"
-                  disabled={manageSource.isPending}
-                  onClick={() => void confirmPromotion()}
+                  type="submit"
+                  variant="outline"
+                  disabled={
+                    !query.trim() ||
+                    (!sources.length &&
+                      !selectedLibraryContextId &&
+                      !contextState.state.pinnedPackId) ||
+                    searchContext.isPending
+                  }
                 >
-                  {t("creativeContext.promoteToOrganization")}
+                  <IconSearch />
+                  {t("creativeContext.searchTitle")}
                 </Button>
-              </div>
-            ) : null}
-            {promotionMessage ? (
-              <p className="mt-2 text-xs text-muted-foreground">
-                {promotionMessage}
-              </p>
-            ) : null}
-            {setupError ? (
-              <p className="mt-2 text-sm text-destructive">{setupError}</p>
-            ) : null}
-          </section>
-
-          <section className="border-t border-border/70 pt-6">
-            <h2 className="text-lg font-semibold">
-              {t("creativeContext.sourcesTitle")}
-            </h2>
-            {sources.length ? (
-              <div className="mt-3">
-                {sources.map((source) => (
-                  <SourceRow
-                    key={source.id}
-                    source={source}
-                    refreshing={
-                      refreshSource.isPending &&
-                      refreshSource.variables?.sourceId === source.id
-                    }
-                    canReview={canManageScope}
-                    canPromote={
-                      libraryScope === "user" &&
-                      Boolean(org?.orgId) &&
-                      canManageOrg &&
-                      source.visibility === "private"
-                    }
-                    onRefresh={refresh}
-                    onReview={(selected) =>
-                      void openItemCuration(selected, "restricted")
-                    }
-                    onCurate={(selected) => void openItemCuration(selected)}
-                    onPromote={(selected) =>
-                      void previewSourcePromotion(selected)
-                    }
-                    onPause={(selected) => void pauseSource(selected)}
-                    onRestore={(selected) => void restoreSource(selected)}
-                    onDelete={setDeleteSource}
-                  />
-                ))}
-              </div>
-            ) : (
-              <div className="mt-4 rounded-md border border-dashed border-border p-6 text-center">
-                <IconBooks className="mx-auto size-7 text-muted-foreground" />
-                <h3 className="mt-3 text-sm font-semibold">
-                  {t("creativeContext.noSourcesTitle")}
-                </h3>
-                <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">
-                  {t("creativeContext.noSourcesDescription")}
+              </form>
+              {searchError ? (
+                <p className="mt-4 text-sm text-destructive">{searchError}</p>
+              ) : !searchContext.data && !searchContext.isPending ? (
+                <p className="mt-4 text-sm text-muted-foreground">
+                  {t("creativeContext.searchPrompt")}
                 </p>
-                <Button asChild variant="outline" size="sm" className="mt-4">
-                  <a href={connectionsHref}>
-                    {t("creativeContext.connectSources")}
-                    <IconArrowUpRight />
-                  </a>
-                </Button>
-              </div>
-            )}
-            {reviewSource ? (
-              <ItemCuration
-                source={reviewSource}
-                items={reviewedItems}
-                busy={reviewItems.isPending}
-                onReview={(operation, itemId) =>
-                  void reviewContextItem(operation, itemId)
-                }
-                onClose={() => {
-                  setReviewSource(null);
-                  setReviewedItems([]);
-                }}
-              />
-            ) : null}
-            {reviewError ? (
-              <p className="mt-2 text-sm text-destructive">{reviewError}</p>
-            ) : null}
-            {refreshMessage ? (
-              <p className="mt-2 text-xs text-muted-foreground">
-                {refreshMessage}
-              </p>
-            ) : null}
-            {lifecycleMessage ? (
-              <p className="mt-2 text-xs text-muted-foreground">
-                {lifecycleMessage}
-              </p>
-            ) : null}
-          </section>
-
-          <section className="border-t border-border/70 pt-6">
-            <h2 className="text-lg font-semibold">
-              {t("creativeContext.packsTitle")}
-            </h2>
-            {packs.length ? (
-              <div className="mt-3">
-                {packs.map((pack) => (
-                  <PackRow
-                    key={pack.id}
-                    pack={pack}
-                    pinned={contextState.state.pinnedPackId === pack.id}
-                    disabled={savingState}
-                    onPin={(packId) => void changePinnedPack(packId)}
-                    onDetails={setSelectedPackId}
-                  />
-                ))}
-              </div>
-            ) : (
-              <p className="mt-3 rounded-md border border-dashed border-border p-5 text-sm text-muted-foreground">
-                {t("creativeContext.noPacks")}
-              </p>
-            )}
-            {selectedPackId ? (
-              <div className="mt-4 rounded-md border border-border p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <h3 className="text-sm font-semibold">
-                      {packQuery.data?.pack?.name ??
-                        t("creativeContext.packDetails")}
-                    </h3>
-                    {packQuery.data?.pack?.derivedFromPackId ? (
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {t("creativeContext.influence")}:{" "}
-                        {packQuery.data.pack.derivedFromPackId}
-                      </p>
-                    ) : null}
-                  </div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setSelectedPackId(null)}
-                  >
-                    {t("creativeContext.cancel")}
-                  </Button>
+              ) : searchContext.isPending ? (
+                <div className="mt-4 space-y-2">
+                  <Skeleton className="h-20 w-full" />
+                  <Skeleton className="h-20 w-full" />
                 </div>
-                {packQuery.data?.pack?.members.length ? (
-                  <div className="mt-3 divide-y divide-border/60">
-                    {packQuery.data.pack.members.map((member) => (
-                      <div key={member.id} className="py-2 text-xs">
-                        <p className="font-medium">{member.itemId}</p>
-                        {member.reason ? (
-                          <p className="mt-0.5 text-muted-foreground">
-                            {t("creativeContext.influence")}: {member.reason}
+              ) : searchContext.data?.results.length ? (
+                <div className="mt-4 space-y-2">
+                  <p className="text-xs text-muted-foreground">
+                    {t("creativeContext.resultsLabel", {
+                      count: formatNumber(searchContext.data.results.length),
+                    })}
+                  </p>
+                  {searchContext.data.results.map((result) => (
+                    <article
+                      key={`${result.itemVersionId}:${result.chunkId ?? "item"}`}
+                      className="rounded-md border border-border/70 p-3"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <h3 className="truncate text-sm font-medium">
+                            {result.title}
+                          </h3>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {result.sourceName} · {result.kind}
                           </p>
+                        </div>
+                        {result.canonicalUrl ? (
+                          <Button asChild variant="ghost" size="icon">
+                            <a
+                              href={result.canonicalUrl}
+                              target="_blank"
+                              rel="noreferrer"
+                              aria-label={result.title}
+                            >
+                              <IconArrowUpRight />
+                            </a>
+                          </Button>
                         ) : null}
                       </div>
-                    ))}
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
-          </section>
-
-          <section className="border-t border-border/70 pt-6">
-            <div>
-              <h2 className="text-lg font-semibold">
-                {t("creativeContext.searchTitle")}
-              </h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {t("creativeContext.searchDescription")}
-              </p>
-            </div>
-            <form
-              className="mt-4 flex gap-2"
-              onSubmit={(event) => void search(event)}
-            >
-              <div className="relative min-w-0 flex-1">
-                <IconSearch className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  type="search"
-                  value={query}
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder={t("creativeContext.searchPlaceholder")}
-                  aria-label={t("creativeContext.searchPlaceholder")}
-                  className="ps-9"
-                />
-              </div>
-              <Button
-                type="submit"
-                variant="outline"
-                disabled={
-                  !query.trim() || !sources.length || searchContext.isPending
-                }
-              >
-                <IconSearch />
-                {t("creativeContext.searchTitle")}
-              </Button>
-            </form>
-            {searchError ? (
-              <p className="mt-4 text-sm text-destructive">{searchError}</p>
-            ) : !searchContext.data && !searchContext.isPending ? (
-              <p className="mt-4 text-sm text-muted-foreground">
-                {t("creativeContext.searchPrompt")}
-              </p>
-            ) : searchContext.isPending ? (
-              <div className="mt-4 space-y-2">
-                <Skeleton className="h-20 w-full" />
-                <Skeleton className="h-20 w-full" />
-              </div>
-            ) : searchContext.data?.results.length ? (
-              <div className="mt-4 space-y-2">
-                <p className="text-xs text-muted-foreground">
-                  {t("creativeContext.resultsLabel", {
-                    count: formatNumber(searchContext.data.results.length),
-                  })}
+                      <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-muted-foreground">
+                        {result.excerpt}
+                      </p>
+                    </article>
+                  ))}
+                </div>
+              ) : (
+                <p className="mt-4 text-sm text-muted-foreground">
+                  {t("creativeContext.noResults")}
                 </p>
-                {searchContext.data.results.map((result) => (
-                  <article
-                    key={`${result.itemVersionId}:${result.chunkId ?? "item"}`}
-                    className="rounded-md border border-border/70 p-3"
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <h3 className="truncate text-sm font-medium">
-                          {result.title}
-                        </h3>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          {result.sourceName} · {result.kind}
-                        </p>
-                      </div>
-                      {result.canonicalUrl ? (
-                        <Button asChild variant="ghost" size="icon">
-                          <a
-                            href={result.canonicalUrl}
-                            target="_blank"
-                            rel="noreferrer"
-                            aria-label={result.title}
-                          >
-                            <IconArrowUpRight />
-                          </a>
-                        </Button>
-                      ) : null}
-                    </div>
-                    <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-muted-foreground">
-                      {result.excerpt}
-                    </p>
-                  </article>
-                ))}
-              </div>
-            ) : (
-              <p className="mt-4 text-sm text-muted-foreground">
-                {t("creativeContext.noResults")}
-              </p>
-            )}
-          </section>
+              )}
+            </section>
+          ) : null}
         </>
       )}
+      <ContextPreviewSheet
+        manifest={previewManifest}
+        onOpenChange={(open) => {
+          if (!open) setPreviewManifest(null);
+        }}
+      />
+      <AlertDialog
+        open={Boolean(membershipUpdateCandidate)}
+        onOpenChange={(open) => {
+          if (!open && !updatingMembershipId)
+            setMembershipUpdateCandidate(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("creativeContext.submitUpdateTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("creativeContext.submitUpdateDescription", {
+                name: membershipUpdateCandidate?.title ?? "",
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={Boolean(updatingMembershipId)}>
+              {t("creativeContext.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={Boolean(updatingMembershipId)}
+              onClick={(event) => {
+                event.preventDefault();
+                void submitLatestContextMembershipUpdate();
+              }}
+            >
+              {updatingMembershipId
+                ? t("creativeContext.submittingUpdate")
+                : t("creativeContext.submitUpdate")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
       <AlertDialog
         open={Boolean(deleteSource)}
         onOpenChange={(open) => {