diff --git a/apps/example/microblog-ui/app/Post/page.tsx b/apps/example/microblog-ui/app/Post/page.tsx
deleted file mode 100644
index 91aa12d..0000000
--- a/apps/example/microblog-ui/app/Post/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Suspense } from 'react';
-
-import MicroblogPostRouteClient from '../../src/components/MicroblogPostRouteClient';
-
-export default function PostPage() {
-  return (
-    <Suspense fallback={null}>
-      <MicroblogPostRouteClient />
-    </Suspense>
-  );
-}
diff --git a/apps/example/microblog-ui/app/page.tsx b/apps/example/microblog-ui/app/page.tsx
deleted file mode 100644
index 6bfea9a..0000000
--- a/apps/example/microblog-ui/app/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import MicroblogHomeClient from '../src/components/MicroblogHomeClient';
-
-export default function HomePage() {
-  return <MicroblogHomeClient />;
-}
diff --git a/apps/example/microblog-ui/src/components/MicroblogComposeClient.tsx b/apps/example/microblog-ui/src/components/MicroblogComposeClient.tsx
deleted file mode 100644
index 3676518..0000000
--- a/apps/example/microblog-ui/src/components/MicroblogComposeClient.tsx
+++ /dev/null
@@ -1,363 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-import ImageFieldInput from './ImageFieldInput';
-import TxStatus, { type TxPhase } from './TxStatus';
-import { fnCreate } from '../lib/app';
-import { chainWithRpcOverride, requestWalletAddress } from '../lib/clients';
-import { getReadRpcUrl } from '../lib/manifest';
-import { submitWriteTx } from '../lib/tx';
-import { listOwnedProfiles, loadMicroblogRuntime, profileHandle, profileLabel, type ProfileRecord } from '../lib/microblog';
-
-type ComposeState = {
-  loading: boolean;
-  runtimeError: string | null;
-  connectError: string | null;
-  submitError: string | null;
-};
-
-const PROFILE_STORAGE_PREFIX = 'TH_MICROBLOG_PROFILE_ID:';
-
-export default function MicroblogComposeClient() {
-  const router = useRouter();
-  const [state, setState] = useState<ComposeState>({
-    loading: true,
-    runtimeError: null,
-    connectError: null,
-    submitError: null
-  });
-  const [runtime, setRuntime] = useState<any | null>(null);
-  const [account, setAccount] = useState<string | null>(null);
-  const [profiles, setProfiles] = useState<ProfileRecord[]>([]);
-  const [selectedProfileId, setSelectedProfileId] = useState<string>('');
-  const [body, setBody] = useState('');
-  const [image, setImage] = useState('');
-  const [imageUploadBusy, setImageUploadBusy] = useState(false);
-  const [txStatus, setTxStatus] = useState<string | null>(null);
-  const [txPhase, setTxPhase] = useState<TxPhase>('idle');
-  const [txHash, setTxHash] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    (async () => {
-      try {
-        const loadedRuntime = await loadMicroblogRuntime();
-        if (cancelled) return;
-        setRuntime(loadedRuntime);
-
-        try {
-          const cached = localStorage.getItem('TH_ACCOUNT');
-          if (cached && !cancelled) setAccount(cached);
-        } catch {
-          // ignore
-        }
-      } catch (error: any) {
-        if (cancelled) return;
-        setState((prev) => ({ ...prev, runtimeError: String(error?.message ?? error), loading: false }));
-        return;
-      }
-
-      if (!cancelled) setState((prev) => ({ ...prev, loading: false }));
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    let cancelled = false;
-    if (!runtime || !account) {
-      setProfiles([]);
-      setSelectedProfileId('');
-      return;
-    }
-
-    setState((prev) => ({ ...prev, loading: true, connectError: null }));
-    void (async () => {
-      try {
-        const ownedProfiles = await listOwnedProfiles(runtime, account);
-        if (cancelled) return;
-        setProfiles(ownedProfiles);
-
-        let preferred = '';
-        try {
-          const stored = localStorage.getItem(`${PROFILE_STORAGE_PREFIX}${account.toLowerCase()}`) ?? '';
-          if (stored && ownedProfiles.some((entry) => String(entry.id) === stored)) preferred = stored;
-        } catch {
-          // ignore
-        }
-        if (!preferred && ownedProfiles[0]) preferred = String(ownedProfiles[0].id);
-        setSelectedProfileId(preferred);
-      } catch (error: any) {
-        if (cancelled) return;
-        setState((prev) => ({ ...prev, connectError: String(error?.message ?? error) }));
-      } finally {
-        if (!cancelled) setState((prev) => ({ ...prev, loading: false }));
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [runtime, account]);
-
-  useEffect(() => {
-    if (!account || !selectedProfileId) return;
-    try {
-      localStorage.setItem(`${PROFILE_STORAGE_PREFIX}${account.toLowerCase()}`, selectedProfileId);
-    } catch {
-      // ignore
-    }
-  }, [account, selectedProfileId]);
-
-  const selectedProfile = useMemo(
-    () => profiles.find((entry) => String(entry.id) === selectedProfileId) ?? null,
-    [profiles, selectedProfileId]
-  );
-  const walletChain = useMemo(
-    () => (runtime ? chainWithRpcOverride(runtime.chain, getReadRpcUrl(runtime.manifest) || undefined) : null),
-    [runtime]
-  );
-
-  async function connectWallet() {
-    if (!walletChain) return;
-    setState((prev) => ({ ...prev, connectError: null }));
-    try {
-      const nextAccount = await requestWalletAddress(walletChain);
-      setAccount(nextAccount);
-      try {
-        localStorage.setItem('TH_ACCOUNT', nextAccount);
-      } catch {
-        // ignore
-      }
-    } catch (error: any) {
-      setState((prev) => ({ ...prev, connectError: String(error?.message ?? error) }));
-    }
-  }
-
-  async function submit() {
-    if (!runtime || !walletChain || !selectedProfile || !body.trim() || imageUploadBusy) return;
-
-    setState((prev) => ({ ...prev, submitError: null }));
-    setTxStatus(null);
-    setTxPhase('idle');
-    setTxHash(null);
-
-    try {
-      const result = await submitWriteTx({
-        manifest: runtime.manifest,
-        deployment: runtime.deployment,
-        chain: walletChain,
-        publicClient: runtime.publicClient,
-        address: runtime.appAddress,
-        abi: runtime.abi,
-        functionName: fnCreate('Post'),
-        contractArgs: [
-          {
-            authorProfile: selectedProfile.id,
-            body: body.trim(),
-            image: image.trim()
-          }
-        ],
-        setStatus: setTxStatus,
-        onPhase: setTxPhase,
-        onHash: setTxHash
-      });
-
-      setTxStatus(`Posted (${result.hash.slice(0, 10)}…).`);
-      router.push('/');
-      router.refresh();
-    } catch (error: any) {
-      setState((prev) => ({ ...prev, submitError: String(error?.message ?? error) }));
-      setTxStatus(null);
-      setTxPhase('failed');
-    }
-  }
-
-  if (state.loading && !runtime) {
-    return (
-      <section className="card">
-        <h2>Loading composer…</h2>
-        <p className="muted">Resolving the active deployment and wallet state.</p>
-      </section>
-    );
-  }
-
-  if (state.runtimeError) {
-    return (
-      <section className="card">
-        <div className="eyebrow">/compose/error</div>
-        <h2>Unable to load composer</h2>
-        <p className="muted">{state.runtimeError}</p>
-      </section>
-    );
-  }
-
-  return (
-    <div className="pageStack">
-      <section className="card heroPanel">
-        <div className="heroSplit">
-          <div>
-            <div className="heroTopline">
-              <span className="eyebrow">/post/compose</span>
-              <div className="chipRow">
-                <span className="badge">normalized author identity</span>
-                <span className="badge">profile-linked posts</span>
-              </div>
-            </div>
-            <h2 className="displayTitle">
-              Compose as a profile
-              <br />
-              <span>not as a copied handle string.</span>
-            </h2>
-            <p className="lead">
-              Posts now store <span className="badge">authorProfile</span> as an on-chain reference to <span className="badge">Profile</span>,
-              so handle and avatar changes flow through existing posts automatically.
-            </p>
-            <div className="actionGroup">
-              <Link className="btn" href="/">Back to feed</Link>
-              <Link className="btn" href="/Profile/">Browse profiles</Link>
-            </div>
-          </div>
-
-          <div className="heroDataPanel">
-            <div className="eyebrow">/identity</div>
-            <div className="heroStatGrid">
-              <div className="heroStat">
-                <div className="heroStatValue">{account ? 1 : 0}</div>
-                <div className="heroStatLabel">Wallet linked</div>
-              </div>
-              <div className="heroStat">
-                <div className="heroStatValue">{profiles.length}</div>
-                <div className="heroStatLabel">Owned profiles</div>
-              </div>
-            </div>
-            <div className="heroMeta">
-              <span className="badge">posts reference profiles</span>
-              <span className="badge">profile changes propagate</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {!account ? (
-        <section className="card">
-          <div className="eyebrow">/wallet</div>
-          <h3>Connect a wallet to compose</h3>
-          <p className="muted">Posting now requires selecting one of your on-chain profiles. Connect the wallet that owns the profile first.</p>
-          <div className="actionGroup">
-            <button className="btn primary" onClick={() => void connectWallet()}>Connect wallet</button>
-          </div>
-          {state.connectError ? <p className="muted">{state.connectError}</p> : null}
-        </section>
-      ) : null}
-
-      {account && !profiles.length ? (
-        <section className="card">
-          <div className="eyebrow">/profiles/empty</div>
-          <h3>No owned profiles found</h3>
-          <p className="muted">Create a profile first. Once it exists on-chain under this wallet, you can compose posts as that profile.</p>
-          <div className="actionGroup">
-            <Link className="btn primary" href="/Profile/?mode=new">Create profile</Link>
-          </div>
-          {state.connectError ? <p className="muted">{state.connectError}</p> : null}
-        </section>
-      ) : null}
-
-      {account && profiles.length ? (
-        <section className="card" style={{ display: 'grid', gap: 18 }}>
-          <div>
-            <h2>Compose Post</h2>
-            <p className="muted">Choose the on-chain profile identity for this post, then write the post body and optional image.</p>
-          </div>
-
-          <div className="formGrid">
-            <div className="fieldGroup">
-              <label className="label">Profile</label>
-              <select
-                className="select"
-                value={selectedProfileId}
-                onChange={(event) => setSelectedProfileId(event.target.value)}
-              >
-                {profiles.map((entry) => (
-                  <option key={String(entry.id)} value={String(entry.id)}>
-                    {profileLabel(entry.record)}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div className="fieldGroup">
-              <label className="label">Current identity</label>
-              <div className="recordPreviewCell" style={{ minHeight: 110 }}>
-                {selectedProfile ? (
-                  <div style={{ display: 'grid', gap: 10 }}>
-                    <div className="chipRow">
-                      <span className="badge">profile #{String(selectedProfile.id)}</span>
-                      {profileHandle(selectedProfile.record) ? <span className="badge">@{profileHandle(selectedProfile.record)}</span> : null}
-                    </div>
-                    <strong>{profileLabel(selectedProfile.record)}</strong>
-                    {String(selectedProfile.record?.bio ?? '').trim() ? (
-                      <p className="muted" style={{ margin: 0 }}>{String(selectedProfile.record.bio)}</p>
-                    ) : null}
-                  </div>
-                ) : (
-                  <span className="muted">Select a profile.</span>
-                )}
-              </div>
-            </div>
-
-            <div className="fieldGroup">
-              <label className="label">Body <span className="badge">required</span></label>
-              <textarea
-                className="input"
-                value={body}
-                onChange={(event) => setBody(event.target.value)}
-                placeholder="Share something on-chain. Hashtags like #tokenhost or #microblog will be indexed automatically."
-                rows={6}
-                style={{ resize: 'vertical', minHeight: 160 }}
-              />
-            </div>
-
-            <div className="fieldGroup">
-              <label className="label">Image</label>
-              <ImageFieldInput
-                manifest={runtime?.manifest ?? null}
-                value={image}
-                onChange={setImage}
-                onBusyChange={setImageUploadBusy}
-              />
-            </div>
-          </div>
-
-          <div className="actionGroup">
-            <button
-              className="btn primary"
-              onClick={() => void submit()}
-              disabled={
-                !selectedProfile ||
-                !body.trim() ||
-                imageUploadBusy ||
-                txPhase === 'submitting' ||
-                txPhase === 'submitted' ||
-                txPhase === 'confirming'
-              }
-            >
-              {imageUploadBusy ? 'Waiting for image upload…' : 'Publish post'}
-            </button>
-            <Link className="btn" href="/">Cancel</Link>
-          </div>
-
-          {txStatus ? <div className="muted">{txStatus}</div> : null}
-          <TxStatus phase={txPhase} hash={txHash} chainId={Number(runtime?.deployment?.chainId ?? NaN)} error={state.submitError} />
-          {state.submitError ? <div className="pre">{state.submitError}</div> : null}
-        </section>
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/example/microblog-ui/src/components/MicroblogHomeClient.tsx b/apps/example/microblog-ui/src/components/MicroblogHomeClient.tsx
deleted file mode 100644
index 31f0b98..0000000
--- a/apps/example/microblog-ui/src/components/MicroblogHomeClient.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
-
-import { resolveFeedItemsWithProfiles, loadMicroblogRuntime, type FeedItem } from '../lib/microblog';
-import { listAllRecords } from '../lib/runtime';
-import PostStream, { collectTrendingTags, sortFeedItemsDesc } from './PostStream';
-
-type LoadState = {
-  items: FeedItem[];
-  loading: boolean;
-  error: string | null;
-};
-
-export default function MicroblogHomeClient() {
-  const [state, setState] = useState<LoadState>({ items: [], loading: true, error: null });
-
-  useEffect(() => {
-    let cancelled = false;
-
-    (async () => {
-      try {
-        const runtime = await loadMicroblogRuntime();
-        const page = await listAllRecords({
-          manifest: runtime.manifest,
-          publicClient: runtime.publicClient,
-          abi: runtime.abi,
-          address: runtime.appAddress,
-          collectionName: 'Post',
-          pageSize: 25
-        });
-
-        if (cancelled) return;
-
-        const resolved = await resolveFeedItemsWithProfiles(
-          runtime,
-          page.ids.map((id, index) => ({ id, record: page.records[index] }))
-        );
-        if (cancelled) return;
-
-        const items = sortFeedItemsDesc(resolved).slice(0, 24);
-        setState({ items, loading: false, error: null });
-      } catch (error: any) {
-        if (cancelled) return;
-        setState({ items: [], loading: false, error: String(error?.message ?? error) });
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const trending = useMemo(() => collectTrendingTags(state.items, 10), [state.items]);
-  const imagePostCount = useMemo(
-    () => state.items.filter((item) => String(item.record?.image ?? '').trim()).length,
-    [state.items]
-  );
-
-  return (
-    <div className="pageStack">
-      <section className="card heroPanel">
-        <div className="heroSplit">
-          <div>
-            <div className="heroTopline">
-              <span className="eyebrow">/tokenhost/microblog</span>
-              <div className="chipRow">
-                <span className="badge">native hashtags</span>
-                <span className="badge">native image uploads</span>
-                <span className="badge">filecoin-ready</span>
-              </div>
-            </div>
-            <h2 className="displayTitle">
-              Microblog posts
-              <br />
-              <span>with on-chain discovery and first-class media.</span>
-            </h2>
-            <p className="lead">
-              This example app uses Token Host&apos;s native hashtag index on <span className="badge">Post.body</span> and the native
-              upload field flow for <span className="badge">Post.image</span>. Posts reference <span className="badge">Profile</span> records
-              instead of copying handles into each post.
-            </p>
-            <div className="actionGroup">
-              <Link className="btn primary" href="/Post/?mode=new">Compose post</Link>
-              <Link className="btn" href="/Profile/?mode=new">Create profile</Link>
-              <Link className="btn" href="/Post/">Browse raw records</Link>
-            </div>
-          </div>
-
-          <div className="heroDataPanel">
-            <div className="eyebrow">/demo/status</div>
-            <div className="heroStatGrid">
-              <div className="heroStat">
-                <div className="heroStatValue">{state.loading ? '…' : state.items.length}</div>
-                <div className="heroStatLabel">Feed posts</div>
-              </div>
-              <div className="heroStat">
-                <div className="heroStatValue">{state.loading ? '…' : imagePostCount}</div>
-                <div className="heroStatLabel">Image posts</div>
-              </div>
-              <div className="heroStat">
-                <div className="heroStatValue">{state.loading ? '…' : trending.length}</div>
-                <div className="heroStatLabel">Active tags</div>
-              </div>
-              <div className="heroStat">
-                <div className="heroStatValue">2</div>
-                <div className="heroStatLabel">Collections</div>
-              </div>
-            </div>
-            <div className="heroMeta">
-              <span className="badge">author profile reference</span>
-              <span className="badge">body hashtag tokenizer</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {state.error ? (
-        <section className="card">
-          <div className="eyebrow">/runtime/error</div>
-          <h3>Unable to load the live feed</h3>
-          <p className="muted">{state.error}</p>
-        </section>
-      ) : null}
-
-      <section className="card sectionHeading">
-        <div className="sectionHeadingPrimary">
-          <span className="eyebrow">/tags</span>
-          <h2>Trending hashtags</h2>
-        </div>
-        <div className="sectionHeadingAside">
-          <p className="muted">Hashtags come from the native tokenized index on post bodies, not an app-specific join table.</p>
-        </div>
-      </section>
-
-      <section className="card">
-        <div className="chipRow">
-          {trending.length ? (
-            trending.map((entry) => (
-              <Link key={entry.tag} className="badge" href={`/tag?value=${encodeURIComponent(entry.tag)}`}>
-                #{entry.tag} · {entry.count}
-              </Link>
-            ))
-          ) : (
-            <span className="muted">Create a few posts with hashtags like #tokenhost, #foc, or #microblog to populate the index.</span>
-          )}
-        </div>
-      </section>
-
-      <section className="card sectionHeading">
-        <div className="sectionHeadingPrimary">
-          <span className="eyebrow">/feed</span>
-          <h2>Latest posts</h2>
-        </div>
-        <div className="sectionHeadingAside">
-          <p className="muted">Text-only and image posts render through the same generated `Post` collection.</p>
-        </div>
-      </section>
-
-      {state.loading ? (
-        <section className="card">
-          <div className="eyebrow">/feed/loading</div>
-          <p className="muted">Loading posts from the current deployment…</p>
-        </section>
-      ) : (
-        <PostStream
-          items={state.items}
-          emptyTitle="No posts yet"
-          emptyBody="Compose the first post, add a hashtag, and optionally attach an image to see the native upload flow."
-        />
-      )}
-    </div>
-  );
-}
diff --git a/apps/example/microblog-ui/src/components/MicroblogPostRouteClient.tsx b/apps/example/microblog-ui/src/components/MicroblogPostRouteClient.tsx
deleted file mode 100644
index 8309268..0000000
--- a/apps/example/microblog-ui/src/components/MicroblogPostRouteClient.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
-
-import CollectionPage from '../collection-route/CollectionPage';
-import MicroblogComposeClient from './MicroblogComposeClient';
-
-export default function MicroblogPostRouteClient() {
-  const searchParams = useSearchParams();
-  const mode = String(searchParams.get('mode') ?? '').trim();
-
-  if (mode === 'new') {
-    return <MicroblogComposeClient />;
-  }
-
-  return <CollectionPage collectionName="Post" />;
-}
diff --git a/apps/example/microblog-ui/src/components/MicroblogTagClient.tsx b/apps/example/microblog-ui/src/components/MicroblogTagClient.tsx
deleted file mode 100644
index 9e8da94..0000000
--- a/apps/example/microblog-ui/src/components/MicroblogTagClient.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-
-import { resolveFeedItemsWithProfiles, loadMicroblogRuntime, type FeedItem } from '../lib/microblog';
-import { listHashtagRecords } from '../lib/runtime';
-import PostStream, { sortFeedItemsDesc } from './PostStream';
-
-type TagState = {
-  hashtag: string;
-  items: FeedItem[];
-  loading: boolean;
-  error: string | null;
-};
-
-export default function MicroblogTagClient() {
-  const searchParams = useSearchParams();
-  const tag = String(searchParams.get('value') ?? '').trim();
-  const [state, setState] = useState<TagState>({ hashtag: '', items: [], loading: true, error: null });
-
-  useEffect(() => {
-    let cancelled = false;
-
-    (async () => {
-      if (!tag) {
-        setState({ hashtag: '', items: [], loading: false, error: null });
-        return;
-      }
-
-      try {
-        const runtime = await loadMicroblogRuntime();
-        const page = await listHashtagRecords({
-          manifest: runtime.manifest,
-          publicClient: runtime.publicClient,
-          abi: runtime.abi,
-          address: runtime.appAddress,
-          collectionName: 'Post',
-          fieldName: 'body',
-          hashtag: tag,
-          pageSize: 25
-        });
-
-        if (cancelled) return;
-
-        const resolved = await resolveFeedItemsWithProfiles(
-          runtime,
-          page.ids.map((id, index) => ({ id, record: page.records[index] }))
-        );
-        if (cancelled) return;
-
-        const items = sortFeedItemsDesc(resolved);
-        setState({ hashtag: page.hashtag, items, loading: false, error: null });
-      } catch (error: any) {
-        if (cancelled) return;
-        setState({ hashtag: '', items: [], loading: false, error: String(error?.message ?? error) });
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [tag]);
-
-  return (
-    <div className="pageStack">
-      <section className="card heroPanel">
-        <div className="heroSplit">
-          <div>
-            <div className="heroTopline">
-              <span className="eyebrow">/tag/query</span>
-              <div className="chipRow">
-                <span className="badge">{state.hashtag ? `#${state.hashtag}` : 'no tag selected'}</span>
-                <span className="badge">tokenized index read</span>
-              </div>
-            </div>
-            <h2 className="displayTitle">
-              {state.hashtag ? `#${state.hashtag}` : 'Hashtag feed'}
-              <br />
-              <span>resolved from the native on-chain index.</span>
-            </h2>
-            <p className="lead">
-              Token Host queries the generated <span className="badge">listByIndexPost_body</span> accessor, then filters current records
-              against live post content and resolves each post&apos;s current author profile at render time.
-            </p>
-            <div className="actionGroup">
-              <Link className="btn primary" href="/Post/?mode=new">Compose tagged post</Link>
-              <Link className="btn" href="/">Back to feed</Link>
-            </div>
-          </div>
-
-          <div className="heroDataPanel">
-            <div className="eyebrow">/result</div>
-            <div className="heroStatGrid">
-              <div className="heroStat">
-                <div className="heroStatValue">{state.loading ? '…' : state.items.length}</div>
-                <div className="heroStatLabel">Matches</div>
-              </div>
-              <div className="heroStat">
-                <div className="heroStatValue">{state.hashtag ? `#${state.hashtag}` : '—'}</div>
-                <div className="heroStatLabel">Token</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {!tag ? (
-        <section className="card">
-          <div className="eyebrow">/tag/missing</div>
-          <h3>No hashtag selected</h3>
-          <p className="muted">Open a tag from the home feed or visit a route like <span className="badge">/tag?value=tokenhost</span>.</p>
-        </section>
-      ) : null}
-
-      {state.error ? (
-        <section className="card">
-          <div className="eyebrow">/tag/error</div>
-          <h3>Unable to load hashtag feed</h3>
-          <p className="muted">{state.error}</p>
-        </section>
-      ) : null}
-
-      {tag && !state.loading && !state.error ? (
-        <PostStream
-          items={state.items}
-          emptyTitle={`No posts found for #${state.hashtag || tag}`}
-          emptyBody="Create a post with that hashtag and reload the feed."
-        />
-      ) : null}
-
-      {tag && state.loading ? (
-        <section className="card">
-          <div className="eyebrow">/tag/loading</div>
-          <p className="muted">Loading hashtag feed…</p>
-        </section>
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/example/microblog-ui/src/components/PostStream.tsx b/apps/example/microblog-ui/src/components/PostStream.tsx
deleted file mode 100644
index fead484..0000000
--- a/apps/example/microblog-ui/src/components/PostStream.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { formatDateTime } from '../lib/format';
-import { extractHashtagTokens } from '../lib/indexing';
-import { profileDisplayName, profileHandle, type FeedItem } from '../lib/microblog';
-
-export function sortFeedItemsDesc(items: FeedItem[]): FeedItem[] {
-  return [...items].sort((a, b) => {
-    if (a.id === b.id) return 0;
-    return a.id < b.id ? 1 : -1;
-  });
-}
-
-export function collectTrendingTags(items: FeedItem[], limit = 8): Array<{ tag: string; count: number }> {
-  const counts = new Map<string, number>();
-  for (const item of items) {
-    for (const tag of extractHashtagTokens(String(item.record?.body ?? ''))) {
-      counts.set(tag, (counts.get(tag) ?? 0) + 1);
-    }
-  }
-
-  return Array.from(counts.entries())
-    .sort((a, b) => (b[1] !== a[1] ? b[1] - a[1] : a[0].localeCompare(b[0])))
-    .slice(0, limit)
-    .map(([tag, count]) => ({ tag, count }));
-}
-
-function PostCard({ item }: { item: FeedItem }) {
-  const body = String(item.record?.body ?? '').trim();
-  const image = String(item.record?.image ?? '').trim();
-  const authorHandle = profileHandle(item.authorProfile);
-  const authorName = profileDisplayName(item.authorProfile);
-  const avatar = String(item.authorProfile?.avatar ?? '').trim();
-  const tags = extractHashtagTokens(body);
-  const timestamp = item.record?.updatedAt ?? item.record?.createdAt ?? null;
-
-  return (
-    <article className="card half" style={{ display: 'grid', gap: 14 }}>
-      <div className="collectionCardHeader" style={{ alignItems: 'flex-start' }}>
-        <div style={{ display: 'grid', gap: 8 }}>
-          <div className="eyebrow">/post/{String(item.id)}</div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            {avatar ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={avatar}
-                alt={authorName}
-                style={{ width: 48, height: 48, objectFit: 'cover', borderRadius: '50%', border: '1px solid var(--th-border)' }}
-              />
-            ) : null}
-            <div>
-              <h3 style={{ margin: 0 }}>{authorName}</h3>
-              <p className="muted" style={{ margin: 0 }}>
-                {authorHandle ? `@${authorHandle}` : 'Unresolved profile'}
-              </p>
-            </div>
-          </div>
-          <p className="muted" style={{ margin: 0 }}>
-            {timestamp ? formatDateTime(timestamp, 'compact') : 'On-chain post'}
-          </p>
-        </div>
-        <div className="chipRow">
-          <span className="badge">{image ? 'image post' : 'text post'}</span>
-          <span className="badge">id {String(item.id)}</span>
-          {item.authorProfileId ? <span className="badge">profile {String(item.authorProfileId)}</span> : null}
-        </div>
-      </div>
-
-      {body ? <p style={{ margin: 0, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{body}</p> : null}
-
-      {image ? (
-        <div
-          style={{
-            overflow: 'hidden',
-            borderRadius: 18,
-            border: '1px solid rgba(255,255,255,0.08)',
-            background: 'rgba(255,255,255,0.03)'
-          }}
-        >
-          <img
-            src={image}
-            alt={`Post ${String(item.id)}`}
-            style={{ display: 'block', width: '100%', maxHeight: 460, objectFit: 'cover' }}
-          />
-        </div>
-      ) : null}
-
-      {tags.length ? (
-        <div className="chipRow">
-          {tags.map((tag) => (
-            <Link key={`${String(item.id)}-${tag}`} className="badge" href={`/tag?value=${encodeURIComponent(tag)}`}>
-              #{tag}
-            </Link>
-          ))}
-        </div>
-      ) : null}
-    </article>
-  );
-}
-
-export default function PostStream(props: { items: FeedItem[]; emptyTitle: string; emptyBody: string }) {
-  if (!props.items.length) {
-    return (
-      <section className="card">
-        <div className="eyebrow">/feed/empty</div>
-        <h3>{props.emptyTitle}</h3>
-        <p className="muted">{props.emptyBody}</p>
-      </section>
-    );
-  }
-
-  return (
-    <div className="grid">
-      {props.items.map((item) => (
-        <PostCard key={String(item.id)} item={item} />
-      ))}
-    </div>
-  );
-}
diff --git a/apps/example/microblog-ui/src/lib/microblog.ts b/apps/example/microblog-ui/src/lib/microblog.ts
deleted file mode 100644
index 4cec4b8..0000000
--- a/apps/example/microblog-ui/src/lib/microblog.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client';
-
-import { readRecordsByIds } from './app';
-import { listAllRecords, loadAppRuntime, type AppRuntime } from './runtime';
-
-export type ProfileRecord = {
-  id: bigint;
-  record: any;
-};
-
-export type FeedItem = {
-  id: bigint;
-  record: any;
-  authorProfileId: bigint | null;
-  authorProfile: any | null;
-};
-
-export function getRecordId(value: unknown): bigint | null {
-  if (typeof value === 'bigint') return value;
-  if (typeof value === 'number' && Number.isInteger(value)) return BigInt(value);
-  if (typeof value === 'string' && value.trim()) {
-    try {
-      return BigInt(value);
-    } catch {
-      return null;
-    }
-  }
-  return null;
-}
-
-export function recordOwner(record: any): string {
-  return String(record?.owner ?? '').trim().toLowerCase();
-}
-
-export function profileDisplayName(profile: any): string {
-  const displayName = String(profile?.displayName ?? '').trim();
-  const handle = String(profile?.handle ?? '').trim();
-  if (displayName) return displayName;
-  if (handle) return `@${handle}`;
-  return 'Anonymous';
-}
-
-export function profileHandle(profile: any): string {
-  return String(profile?.handle ?? '').trim();
-}
-
-export function profileLabel(profile: any): string {
-  const handle = profileHandle(profile);
-  const displayName = String(profile?.displayName ?? '').trim();
-  if (displayName && handle) return `${displayName} (@${handle})`;
-  if (handle) return `@${handle}`;
-  if (displayName) return displayName;
-  return 'Unnamed profile';
-}
-
-export function extractAuthorProfileId(postRecord: any): bigint | null {
-  return getRecordId(postRecord?.authorProfile);
-}
-
-export async function listProfiles(runtime: AppRuntime): Promise<ProfileRecord[]> {
-  const page = await listAllRecords({
-    manifest: runtime.manifest,
-    publicClient: runtime.publicClient,
-    abi: runtime.abi,
-    address: runtime.appAddress,
-    collectionName: 'Profile',
-    pageSize: 50
-  });
-
-  return page.ids.map((id, index) => ({ id, record: page.records[index] }));
-}
-
-export async function listOwnedProfiles(runtime: AppRuntime, ownerAddress: string): Promise<ProfileRecord[]> {
-  const normalizedOwner = ownerAddress.trim().toLowerCase();
-  const profiles = await listProfiles(runtime);
-  return profiles.filter((entry) => recordOwner(entry.record) === normalizedOwner);
-}
-
-export async function loadProfilesByIds(runtime: AppRuntime, ids: bigint[]): Promise<Map<string, any>> {
-  const uniqueIds = Array.from(new Set(ids.map((id) => String(id)))).map((id) => BigInt(id));
-  if (!uniqueIds.length) return new Map();
-
-  const records = await readRecordsByIds({
-    publicClient: runtime.publicClient,
-    abi: runtime.abi,
-    address: runtime.appAddress,
-    collectionName: 'Profile',
-    ids: uniqueIds
-  });
-
-  const out = new Map<string, any>();
-  uniqueIds.forEach((id, index) => {
-    out.set(String(id), records[index] ?? null);
-  });
-  return out;
-}
-
-export async function resolveFeedItemsWithProfiles(runtime: AppRuntime, items: Array<{ id: bigint; record: any }>): Promise<FeedItem[]> {
-  const profileIds = items
-    .map((item) => extractAuthorProfileId(item.record))
-    .filter((value): value is bigint => value !== null);
-
-  const profilesById = await loadProfilesByIds(runtime, profileIds);
-
-  return items.map((item) => {
-    const authorProfileId = extractAuthorProfileId(item.record);
-    return {
-      ...item,
-      authorProfileId,
-      authorProfile: authorProfileId ? profilesById.get(String(authorProfileId)) ?? null : null
-    };
-  });
-}
-
-export async function loadMicroblogRuntime(): Promise<AppRuntime> {
-  return loadAppRuntime();
-}
diff --git a/apps/example/microblog.schema.json b/apps/example/microblog.schema.json
index b3a4c86..00959c1 100644
--- a/apps/example/microblog.schema.json
+++ b/apps/example/microblog.schema.json
@@ -4,6 +4,11 @@
   "app": {
     "name": "Microblog",
     "slug": "microblog",
+    "brand": {
+      "primaryText": "micro",
+      "accentText": "blog"
+    },
+    "primaryCollection": "Post",
     "theme": {
       "preset": "cyber-grid"
     },
@@ -12,15 +17,67 @@
       "onChainIndexing": true
     },
     "ui": {
-      "homePage": { "mode": "custom" },
-      "extensions": { "directory": "microblog-ui" }
+      "homePage": { "mode": "generated" },
+      "generated": {
+        "feeds": [
+          {
+            "id": "posts",
+            "collection": "Post",
+            "limit": 25,
+            "card": {
+              "referenceField": "authorProfile",
+              "textField": "body",
+              "mediaField": "image"
+            }
+          }
+        ],
+        "tokenPages": [
+          {
+            "id": "hashtags",
+            "collection": "Post",
+            "field": "body",
+            "tokenizer": "hashtag",
+            "feed": "posts",
+            "title": "Hashtag feed",
+            "emptyBody": "Create a post with that hashtag and reload the feed."
+          }
+        ],
+        "homeSections": [
+          {
+            "type": "hero",
+            "eyebrow": "/tokenhost/microblog",
+            "title": "Microblog posts",
+            "accent": "with on-chain discovery and first-class media.",
+            "description": "Live on Filecoin Calibration, this microblog combines native on-chain hashtag discovery with Filecoin Onchain Cloud image uploads.",
+            "badges": ["native hashtags", "native image uploads", "filecoin-ready"],
+            "actions": [
+              { "label": "Compose post", "href": "/Post/?mode=new", "variant": "primary" },
+              { "label": "Create profile", "href": "/Profile/?mode=new" },
+              { "label": "View Posts", "href": "/Post/" }
+            ]
+          },
+          {
+            "type": "tokenList",
+            "tokenPage": "hashtags",
+            "title": "Trending hashtags",
+            "emptyBody": "Create a few posts with hashtags like #tokenhost, #foc, or #microblog to populate the index."
+          },
+          {
+            "type": "feed",
+            "feed": "posts",
+            "title": "Latest posts",
+            "emptyTitle": "No posts yet",
+            "emptyBody": "Compose the first post, add a hashtag, and optionally attach an image to see the native upload flow."
+          }
+        ]
+      }
     }
   },
   "collections": [
     {
       "name": "Profile",
       "fields": [
-        { "name": "handle", "type": "string", "required": true },
+        { "name": "handle", "type": "string", "required": true, "ui": { "label": "username" } },
         { "name": "displayName", "type": "string" },
         { "name": "bio", "type": "string" },
         { "name": "avatar", "type": "image" }
@@ -55,7 +112,7 @@
         ]
       },
       "relations": [
-        { "field": "authorProfile", "to": "Profile", "enforce": true, "reverseIndex": true }
+        { "field": "authorProfile", "to": "Profile", "enforce": true, "mustOwn": true, "reverseIndex": true }
       ]
     }
   ]
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 828f1d3..8e7ad1c 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -179,6 +179,10 @@ function normalizeStudioFormState(input: any): ThsSchema {
                 directory:
                   appIn.ui.extensions.directory == null ? undefined : String(appIn.ui.extensions.directory)
               }
+            : undefined,
+        generated:
+          appIn.ui?.generated && typeof appIn.ui.generated === 'object'
+            ? JSON.parse(JSON.stringify(appIn.ui.generated))
             : undefined
       }
     },
diff --git a/packages/generator/src/solidity/generateAppSolidity.ts b/packages/generator/src/solidity/generateAppSolidity.ts
index 42b7d06..4da5b9e 100644
--- a/packages/generator/src/solidity/generateAppSolidity.ts
+++ b/packages/generator/src/solidity/generateAppSolidity.ts
@@ -193,6 +193,7 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
     w.line('error VersionMismatch(uint256 expected, uint256 got);');
     w.line('error TooManyIndexTokens();');
     w.line('error IndexTokenTooLong();');
+    w.line('error RelatedRecordNotOwned();');
     w.line();
 
     // Events (SPEC 7.9)
@@ -418,6 +419,7 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
       w.line();
 
       w.line(`mapping(uint256 => ${record}) private ${cVar}Records;`);
+      w.line(`mapping(address => uint256[]) private ownerIndex_${C};`);
       w.line(`uint256 public nextId${C} = 1;`);
       w.line(`uint256 public activeCount${C} = 0;`);
       w.line();
@@ -453,6 +455,14 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
       });
       w.line();
 
+      w.block(`function _requireOwned${C}(uint256 id) internal view`, () => {
+        w.line(`${record} storage r = ${cVar}Records[id];`);
+        w.line('if (r.createdBy == address(0)) revert RecordNotFound();');
+        w.line('if (r.isDeleted) revert RecordIsDeleted();');
+        w.line('if (r.owner != _msgSender()) revert RelatedRecordNotOwned();');
+      });
+      w.line();
+
       w.block(`function getCount${C}(bool includeDeleted) external view returns (uint256)`, () => {
         w.line('if (includeDeleted) {');
         w.line(`  return nextId${C} - 1;`);
@@ -461,6 +471,54 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
       });
       w.line();
 
+      w.block(
+        `function listOwnedIds${C}(address owner, uint256 offset, uint256 limit, bool includeDeleted) external view returns (uint256[] memory)`,
+        () => {
+          w.line('if (limit > MAX_LIST_LIMIT) revert InvalidLimit();');
+          w.line(`uint256[] storage bucket = ownerIndex_${C}[owner];`);
+          w.line('if (bucket.length == 0) {');
+          w.line('  return new uint256[](0);');
+          w.line('}');
+          w.line('uint256[] memory tmp = new uint256[](limit);');
+          w.line('uint256[] memory seen = new uint256[](MAX_SCAN_STEPS);');
+          w.line('uint256 found = 0;');
+          w.line('uint256 matched = 0;');
+          w.line('uint256 steps = 0;');
+          w.line('uint256 bucketIndex = bucket.length;');
+          w.block('while (bucketIndex > 0 && found < limit && steps < MAX_SCAN_STEPS)', () => {
+            w.line('bucketIndex--;');
+            w.line('steps++;');
+            w.line('uint256 id = bucket[bucketIndex];');
+            w.line('bool duplicate = false;');
+            w.block('for (uint256 i = 0; i < matched; i++)', () => {
+              w.line('if (seen[i] == id) {');
+              w.line('  duplicate = true;');
+              w.line('  break;');
+              w.line('}');
+            });
+            w.line('if (duplicate) { continue; }');
+            w.line('seen[matched] = id;');
+            w.line('matched++;');
+            w.line(`${record} storage r = ${cVar}Records[id];`);
+            w.line('if (r.createdBy == address(0)) { continue; }');
+            w.line('if (r.owner != owner) { continue; }');
+            w.line('if (!includeDeleted && r.isDeleted) { continue; }');
+            w.line('if (offset > 0) {');
+            w.line('  offset--;');
+            w.line('  continue;');
+            w.line('}');
+            w.line('tmp[found] = id;');
+            w.line('found++;');
+          });
+          w.line('uint256[] memory out = new uint256[](found);');
+          w.block('for (uint256 i = 0; i < found; i++)', () => {
+            w.line('out[i] = tmp[i];');
+          });
+          w.line('return out;');
+        }
+      );
+      w.line();
+
       // get
       w.block(`function get${C}(uint256 id, bool includeDeleted) public view returns (${record} memory)`, () => {
         w.line(`${record} storage r = ${cVar}Records[id];`);
@@ -597,6 +655,9 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
           for (const rel of c.relations.filter((r) => r.enforce)) {
             w.line(`_requireExists${rel.to}(input.${rel.field});`);
           }
+          for (const rel of c.relations.filter((r) => r.mustOwn)) {
+            w.line(`_requireOwned${rel.to}(input.${rel.field});`);
+          }
         }
 
         // uniqueness enforcement
@@ -619,6 +680,7 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
         w.line(`${record} storage r = ${cVar}Records[id];`);
         w.line(`_init${record}(r, id);`);
         w.line(`_applyCreate${C}Fields(r, input);`);
+        w.line(`ownerIndex_${C}[r.owner].push(id);`);
 
         // update unique maps after storage write
         for (const u of c.indexes.unique) {
@@ -675,6 +737,15 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
             w.line('if (r.version != expectedVersion) revert VersionMismatch(expectedVersion, r.version);');
           }
 
+          if (c.relations) {
+            for (const rel of c.relations.filter((r) => r.enforce && c.updateRules.mutable.includes(r.field))) {
+              w.line(`_requireExists${rel.to}(${rel.field});`);
+            }
+            for (const rel of c.relations.filter((r) => r.mustOwn && c.updateRules.mutable.includes(r.field))) {
+              w.line(`_requireOwned${rel.to}(${rel.field});`);
+            }
+          }
+
           // uniqueness updates for mutable unique fields
           const uniqueByField = new Map(c.indexes.unique.map((u) => [u.field, u]));
           for (const field of c.updateRules.mutable) {
@@ -776,6 +847,7 @@ export function generateAppSolidity(schema: ThsSchema, options: GenerateAppSolid
           }
           w.line('address fromOwner = r.owner;');
           w.line('r.owner = to;');
+          w.line(`ownerIndex_${C}[to].push(id);`);
           w.line('r.updatedAt = block.timestamp;');
           w.line('r.updatedBy = _msgSender();');
           w.line('r.version += 1;');
diff --git a/packages/schema/schemas/tokenhost-ths.schema.json b/packages/schema/schemas/tokenhost-ths.schema.json
index 4e489f6..ba9a062 100644
--- a/packages/schema/schemas/tokenhost-ths.schema.json
+++ b/packages/schema/schemas/tokenhost-ths.schema.json
@@ -29,6 +29,15 @@
           "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$"
         },
         "description": { "type": "string" },
+        "brand": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "primaryText": { "type": "string", "minLength": 1 },
+            "accentText": { "type": "string", "minLength": 1 }
+          }
+        },
+        "primaryCollection": { "type": "string", "minLength": 1 },
         "theme": {
           "type": "object",
           "description": "Theme preset selection and future theme options.",
@@ -63,6 +72,24 @@
                   "description": "Path to UI override files, resolved relative to the schema file."
                 }
               }
+            },
+            "generated": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "feeds": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedFeed" }
+                },
+                "tokenPages": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedTokenPage" }
+                },
+                "homeSections": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedHomeSection" }
+                }
+              }
             }
           }
         },
@@ -309,8 +336,99 @@
         "field": { "type": "string" },
         "to": { "type": "string" },
         "enforce": { "type": "boolean" },
+        "mustOwn": { "type": "boolean" },
         "reverseIndex": { "type": "boolean" }
       }
+    },
+    "generatedAction": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["label", "href"],
+      "properties": {
+        "label": { "type": "string", "minLength": 1 },
+        "href": { "type": "string", "minLength": 1 },
+        "variant": { "type": "string", "enum": ["default", "primary"] }
+      }
+    },
+    "generatedFeedCard": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "referenceField": { "type": "string" },
+        "textField": { "type": "string" },
+        "mediaField": { "type": "string" }
+      }
+    },
+    "generatedFeed": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "collection"],
+      "properties": {
+        "id": { "type": "string", "pattern": "^[a-z][a-zA-Z0-9_-]*$" },
+        "collection": { "type": "string" },
+        "limit": { "type": "integer", "minimum": 1, "maximum": 100 },
+        "card": { "$ref": "#/$defs/generatedFeedCard" }
+      }
+    },
+    "generatedTokenPage": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "collection", "field", "tokenizer"],
+      "properties": {
+        "id": { "type": "string", "pattern": "^[a-z][a-zA-Z0-9_-]*$" },
+        "collection": { "type": "string" },
+        "field": { "type": "string" },
+        "tokenizer": { "type": "string", "enum": ["hashtag"] },
+        "feed": { "type": "string" },
+        "limit": { "type": "integer", "minimum": 1, "maximum": 100 },
+        "title": { "type": "string" },
+        "emptyTitle": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedHeroSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "title"],
+      "properties": {
+        "type": { "const": "hero" },
+        "eyebrow": { "type": "string" },
+        "title": { "type": "string" },
+        "accent": { "type": "string" },
+        "description": { "type": "string" },
+        "badges": { "type": "array", "items": { "type": "string" } },
+        "actions": { "type": "array", "items": { "$ref": "#/$defs/generatedAction" } }
+      }
+    },
+    "generatedFeedSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "feed", "title"],
+      "properties": {
+        "type": { "const": "feed" },
+        "feed": { "type": "string" },
+        "title": { "type": "string" },
+        "emptyTitle": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedTokenListSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "tokenPage", "title"],
+      "properties": {
+        "type": { "const": "tokenList" },
+        "tokenPage": { "type": "string" },
+        "title": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedHomeSection": {
+      "oneOf": [
+        { "$ref": "#/$defs/generatedHeroSection" },
+        { "$ref": "#/$defs/generatedFeedSection" },
+        { "$ref": "#/$defs/generatedTokenListSection" }
+      ]
     }
   }
 }
diff --git a/packages/schema/src/lint.ts b/packages/schema/src/lint.ts
index 5114944..e34bb33 100644
--- a/packages/schema/src/lint.ts
+++ b/packages/schema/src/lint.ts
@@ -71,6 +71,7 @@ function isSafeAutoExpr(expr: string): boolean {
 export function lintThs(schema: ThsSchema): Issue[] {
   const issues: Issue[] = [];
   const themePreset = String(schema.app.theme?.preset ?? '').trim();
+  const generatedUi = schema.app.ui?.generated;
 
   if (themePreset && themePreset !== 'cyber-grid') {
     issues.push(
@@ -88,6 +89,76 @@ export function lintThs(schema: ThsSchema): Issue[] {
     );
   }
 
+  const primaryCollection = String(schema.app.primaryCollection ?? '').trim();
+  if (primaryCollection && !schema.collections.some((collection) => collection.name === primaryCollection)) {
+    issues.push(
+      err(
+        '/app/primaryCollection',
+        'lint.app.primary_collection_unknown',
+        `app.primaryCollection references unknown collection "${primaryCollection}".`
+      )
+    );
+  }
+
+  const generatedFeedIds = new Set<string>();
+  const generatedFeeds = Array.isArray(generatedUi?.feeds) ? generatedUi.feeds : [];
+  for (const [index, feed] of generatedFeeds.entries()) {
+    const feedPath = `/app/ui/generated/feeds/${index}`;
+    if (generatedFeedIds.has(feed.id)) {
+      issues.push(err(`${feedPath}/id`, 'lint.app.ui.generated.feed_duplicate', `Duplicate generated feed id "${feed.id}".`));
+    }
+    generatedFeedIds.add(feed.id);
+    const collection = schema.collections.find((candidate) => candidate.name === feed.collection);
+    if (!collection) {
+      issues.push(err(`${feedPath}/collection`, 'lint.app.ui.generated.feed_unknown_collection', `Generated feed references unknown collection "${feed.collection}".`));
+      continue;
+    }
+    const fields = fieldMap(collection);
+    for (const key of ['referenceField', 'textField', 'mediaField'] as const) {
+      const value = feed.card?.[key];
+      if (value && !fields.has(value)) {
+        issues.push(err(`${feedPath}/card/${key}`, 'lint.app.ui.generated.feed_unknown_field', `Generated feed card references unknown field "${value}".`));
+      }
+    }
+  }
+
+  const generatedTokenPageIds = new Set<string>();
+  const generatedTokenPages = Array.isArray(generatedUi?.tokenPages) ? generatedUi.tokenPages : [];
+  for (const [index, tokenPage] of generatedTokenPages.entries()) {
+    const tokenPath = `/app/ui/generated/tokenPages/${index}`;
+    if (generatedTokenPageIds.has(tokenPage.id)) {
+      issues.push(err(`${tokenPath}/id`, 'lint.app.ui.generated.token_duplicate', `Duplicate generated token page id "${tokenPage.id}".`));
+    }
+    generatedTokenPageIds.add(tokenPage.id);
+    const collection = schema.collections.find((candidate) => candidate.name === tokenPage.collection);
+    if (!collection) {
+      issues.push(err(`${tokenPath}/collection`, 'lint.app.ui.generated.token_unknown_collection', `Generated token page references unknown collection "${tokenPage.collection}".`));
+      continue;
+    }
+    const field = fieldMap(collection).get(tokenPage.field);
+    if (!field) {
+      issues.push(err(`${tokenPath}/field`, 'lint.app.ui.generated.token_unknown_field', `Generated token page references unknown field "${tokenPage.field}".`));
+      continue;
+    }
+    if (field.type !== 'string') {
+      issues.push(err(`${tokenPath}/field`, 'lint.app.ui.generated.token_field_type', `Generated token page field "${tokenPage.field}" must be type "string".`));
+    }
+    if (tokenPage.feed && !generatedFeedIds.has(tokenPage.feed)) {
+      issues.push(err(`${tokenPath}/feed`, 'lint.app.ui.generated.token_unknown_feed', `Generated token page references unknown generated feed "${tokenPage.feed}".`));
+    }
+  }
+
+  const homeSections = Array.isArray(generatedUi?.homeSections) ? generatedUi.homeSections : [];
+  for (const [index, section] of homeSections.entries()) {
+    const sectionPath = `/app/ui/generated/homeSections/${index}`;
+    if (section.type === 'feed' && !generatedFeedIds.has(section.feed)) {
+      issues.push(err(`${sectionPath}/feed`, 'lint.app.ui.generated.section_unknown_feed', `Generated home section references unknown feed "${section.feed}".`));
+    }
+    if (section.type === 'tokenList' && !generatedTokenPageIds.has(section.tokenPage)) {
+      issues.push(err(`${sectionPath}/tokenPage`, 'lint.app.ui.generated.section_unknown_token_page', `Generated home section references unknown token page "${section.tokenPage}".`));
+    }
+  }
+
   const collectionNames = new Set<string>();
   for (let i = 0; i < schema.collections.length; i++) {
     const c = schema.collections[i]!;
diff --git a/packages/schema/src/types.ts b/packages/schema/src/types.ts
index 5b3e859..4014c6c 100644
--- a/packages/schema/src/types.ts
+++ b/packages/schema/src/types.ts
@@ -17,9 +17,79 @@ export interface ThsAppUiExtensions {
   directory?: string;
 }
 
+export interface ThsGeneratedAction {
+  label: string;
+  href: string;
+  variant?: 'default' | 'primary';
+}
+
+export interface ThsGeneratedFeedCard {
+  referenceField?: string;
+  textField?: string;
+  mediaField?: string;
+}
+
+export interface ThsGeneratedFeed {
+  id: string;
+  collection: string;
+  limit?: number;
+  card?: ThsGeneratedFeedCard;
+}
+
+export interface ThsGeneratedTokenPage {
+  id: string;
+  collection: string;
+  field: string;
+  tokenizer: 'hashtag';
+  feed?: string;
+  limit?: number;
+  title?: string;
+  emptyTitle?: string;
+  emptyBody?: string;
+}
+
+export interface ThsGeneratedHeroSection {
+  type: 'hero';
+  eyebrow?: string;
+  title: string;
+  accent?: string;
+  description?: string;
+  badges?: string[];
+  actions?: ThsGeneratedAction[];
+}
+
+export interface ThsGeneratedFeedSection {
+  type: 'feed';
+  feed: string;
+  title: string;
+  emptyTitle?: string;
+  emptyBody?: string;
+}
+
+export interface ThsGeneratedTokenListSection {
+  type: 'tokenList';
+  tokenPage: string;
+  title: string;
+  emptyBody?: string;
+}
+
+export type ThsGeneratedHomeSection = ThsGeneratedHeroSection | ThsGeneratedFeedSection | ThsGeneratedTokenListSection;
+
+export interface ThsAppUiGenerated {
+  feeds?: ThsGeneratedFeed[];
+  tokenPages?: ThsGeneratedTokenPage[];
+  homeSections?: ThsGeneratedHomeSection[];
+}
+
 export interface ThsAppUi {
   homePage?: ThsAppUiHomePage;
   extensions?: ThsAppUiExtensions;
+  generated?: ThsAppUiGenerated;
+}
+
+export interface ThsAppBrand {
+  primaryText?: string;
+  accentText?: string;
 }
 
 export type ThsThemePreset = 'cyber-grid';
@@ -33,6 +103,8 @@ export interface ThsApp {
   name: string;
   slug: string;
   description?: string;
+  brand?: ThsAppBrand;
+  primaryCollection?: string;
   theme?: ThsAppTheme;
   features?: ThsAppFeatures;
   ui?: ThsAppUi;
@@ -122,6 +194,7 @@ export interface Relation {
   field: string;
   to: string;
   enforce?: boolean;
+  mustOwn?: boolean;
   reverseIndex?: boolean;
 }
 
diff --git a/packages/templates/next-export-ui/app/[collection]/ClientPage.tsx b/packages/templates/next-export-ui/app/[collection]/ClientPage.tsx
index cb6cd00..9e28011 100644
--- a/packages/templates/next-export-ui/app/[collection]/ClientPage.tsx
+++ b/packages/templates/next-export-ui/app/[collection]/ClientPage.tsx
@@ -244,7 +244,7 @@ function CollectionListModePage(props: { params: { collection: string } }) {
 
       <div className="recordList">
         {records.map((r, idx) => (
-          <RecordCard key={idx} collection={collection as any} record={r} />
+          <RecordCard key={idx} collection={collection as any} record={r} abi={abi} publicClient={publicClient} address={appAddress} />
         ))}
       </div>
 
diff --git a/packages/templates/next-export-ui/app/[collection]/edit/ClientPage.tsx b/packages/templates/next-export-ui/app/[collection]/edit/ClientPage.tsx
index dae157f..1817c40 100644
--- a/packages/templates/next-export-ui/app/[collection]/edit/ClientPage.tsx
+++ b/packages/templates/next-export-ui/app/[collection]/edit/ClientPage.tsx
@@ -9,16 +9,40 @@ import { chainFromId } from '../../../src/lib/chains';
 import { chainWithRpcOverride, makePublicClient } from '../../../src/lib/clients';
 import { formatNumeric, parseFieldValue } from '../../../src/lib/format';
 import { fetchManifest, getPrimaryDeployment, getReadRpcUrl } from '../../../src/lib/manifest';
-import { getCollection, mutableFields, type ThsCollection, type ThsField } from '../../../src/lib/ths';
+import { fieldDisplayName, getCollection, mutableFields, type ThsCollection, type ThsField } from '../../../src/lib/ths';
 import { submitWriteTx } from '../../../src/lib/tx';
 import TxStatus, { type TxPhase } from '../../../src/components/TxStatus';
 import ImageFieldInput from '../../../src/components/ImageFieldInput';
+import ReferenceFieldInput from '../../../src/components/ReferenceFieldInput';
 
 function inputType(field: ThsField): 'text' | 'number' {
-  if (field.type === 'uint256' || field.type === 'int256' || field.type === 'decimal' || field.type === 'reference') return 'number';
+  if (field.type === 'uint256' || field.type === 'int256' || field.type === 'decimal') return 'number';
   return 'text';
 }
 
+function isLongTextField(field: ThsField): boolean {
+  if (field.type !== 'string') return false;
+  return ['body', 'description', 'content', 'bio', 'summary'].includes(field.name);
+}
+
+function fieldGroupClass(field: ThsField): string {
+  if (field.type === 'reference') return 'fieldGroup fieldGroupMinor';
+  if (field.type === 'image') return 'fieldGroup fieldGroupMinor';
+  if (isLongTextField(field)) return 'fieldGroup fieldGroupFeature';
+  return 'fieldGroup';
+}
+
+function isMinorField(field: ThsField): boolean {
+  return field.type === 'reference' || field.type === 'image';
+}
+
+function fieldPlaceholder(field: ThsField): string {
+  if (field.type !== 'string') return field.type;
+  if (field.name === 'body') return 'Update the post…';
+  if (field.name === 'bio') return 'Tell people about this profile…';
+  return fieldDisplayName(field);
+}
+
 function getValue(record: any, key: string, fallbackIndex?: number): any {
   if (record && typeof record === 'object' && key in record) {
     return (record as any)[key];
@@ -58,6 +82,7 @@ export default function EditRecordPage(props: { params: { collection: string } }
   const [record, setRecord] = useState<any | null>(null);
 
   const [form, setForm] = useState<Record<string, string>>({});
+  const [busyUploads, setBusyUploads] = useState<Record<string, boolean>>({});
 
   const id = useMemo(() => {
     if (!idParam) return null;
@@ -102,7 +127,12 @@ export default function EditRecordPage(props: { params: { collection: string } }
   const appAddress = deployment?.deploymentEntrypointAddress as `0x${string}` | undefined;
 
   const fields = collection ? mutableFields(collection) : [];
+  const orderedFields = useMemo(
+    () => [...fields.filter((field) => !isMinorField(field)), ...fields.filter((field) => isMinorField(field))],
+    [fields]
+  );
   const optimistic = Boolean((collection as any)?.updateRules?.optimisticConcurrency);
+  const uploadBusy = Object.values(busyUploads).some(Boolean);
 
   async function fetchRecord(options?: { initial?: boolean }) {
     if (!publicClient || !abi || !appAddress || id === null) return;
@@ -152,6 +182,10 @@ export default function EditRecordPage(props: { params: { collection: string } }
   async function submit() {
     if (!manifest || !deployment || !abi || !publicClient || !appAddress || id === null) return;
     if (!record) return;
+    if (uploadBusy) {
+      setError('Wait for media uploads to finish before saving this record.');
+      return;
+    }
 
     setError(null);
     setStatus(null);
@@ -296,9 +330,9 @@ export default function EditRecordPage(props: { params: { collection: string } }
       </div>
 
       <div className="formGrid">
-        {fields.map((f) => (
-          <div key={f.name} className="fieldGroup">
-            <label className="label">{f.name}</label>
+          {orderedFields.map((f) => (
+            <div key={f.name} className={fieldGroupClass(f)}>
+            <label className="label">{fieldDisplayName(f)}</label>
             {f.type === 'bool' ? (
               <select
                 className="select"
@@ -314,6 +348,26 @@ export default function EditRecordPage(props: { params: { collection: string } }
                 value={form[f.name] ?? ''}
                 disabled={txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
                 onChange={(next) => setForm((prev) => ({ ...prev, [f.name]: next }))}
+                onBusyChange={(busy) => setBusyUploads((prev) => ({ ...prev, [f.name]: busy }))}
+              />
+            ) : f.type === 'reference' ? (
+              <ReferenceFieldInput
+                manifest={manifest}
+                publicClient={publicClient}
+                abi={abi}
+                address={appAddress}
+                collection={collection}
+                field={f}
+                value={form[f.name] ?? ''}
+                disabled={txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
+                onChange={(next) => setForm((prev) => ({ ...prev, [f.name]: next }))}
+              />
+            ) : isLongTextField(f) ? (
+              <textarea
+                className="input textarea textareaFeature"
+                value={form[f.name] ?? ''}
+                onChange={(e) => setForm((prev) => ({ ...prev, [f.name]: e.target.value }))}
+                placeholder={fieldPlaceholder(f)}
               />
             ) : (
               <input
@@ -321,7 +375,7 @@ export default function EditRecordPage(props: { params: { collection: string } }
                 type={inputType(f)}
                 value={form[f.name] ?? ''}
                 onChange={(e) => setForm((prev) => ({ ...prev, [f.name]: e.target.value }))}
-                placeholder={f.type === 'reference' ? 'record id (uint256)' : f.type}
+                placeholder={fieldPlaceholder(f)}
               />
             )}
           </div>
@@ -332,9 +386,9 @@ export default function EditRecordPage(props: { params: { collection: string } }
         <button
           className="btn primary"
           onClick={() => void submit()}
-          disabled={!abi || !publicClient || !appAddress || txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
+          disabled={!abi || !publicClient || !appAddress || uploadBusy || txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
         >
-          Save
+          {uploadBusy ? 'Waiting for media upload…' : 'Save'}
         </button>
         <button className="btn" onClick={() => router.push(`/${collectionName}/?mode=view&id=${String(id)}`)}>Cancel</button>
       </div>
diff --git a/packages/templates/next-export-ui/app/[collection]/new/ClientPage.tsx b/packages/templates/next-export-ui/app/[collection]/new/ClientPage.tsx
index 2a5a17e..be7dcaf 100644
--- a/packages/templates/next-export-ui/app/[collection]/new/ClientPage.tsx
+++ b/packages/templates/next-export-ui/app/[collection]/new/ClientPage.tsx
@@ -9,16 +9,41 @@ import { chainFromId } from '../../../src/lib/chains';
 import { chainWithRpcOverride, makePublicClient } from '../../../src/lib/clients';
 import { formatWei, parseFieldValue } from '../../../src/lib/format';
 import { fetchManifest, getPrimaryDeployment, getReadRpcUrl } from '../../../src/lib/manifest';
-import { createFields, getCollection, hasCreatePayment, requiredFieldNames, type ThsField } from '../../../src/lib/ths';
+import { createFields, fieldDisplayName, getCollection, hasCreatePayment, requiredFieldNames, type ThsField } from '../../../src/lib/ths';
 import { submitWriteTx } from '../../../src/lib/tx';
 import TxStatus, { type TxPhase } from '../../../src/components/TxStatus';
 import ImageFieldInput from '../../../src/components/ImageFieldInput';
+import ReferenceFieldInput from '../../../src/components/ReferenceFieldInput';
+import { useRequiredReferenceCreationGates } from '../../../src/lib/relations';
 
 function inputType(field: ThsField): 'text' | 'number' {
-  if (field.type === 'uint256' || field.type === 'int256' || field.type === 'decimal' || field.type === 'reference') return 'number';
+  if (field.type === 'uint256' || field.type === 'int256' || field.type === 'decimal') return 'number';
   return 'text';
 }
 
+function isLongTextField(field: ThsField): boolean {
+  if (field.type !== 'string') return false;
+  return ['body', 'description', 'content', 'bio', 'summary'].includes(field.name);
+}
+
+function fieldGroupClass(field: ThsField): string {
+  if (field.type === 'reference') return 'fieldGroup fieldGroupMinor';
+  if (field.type === 'image') return 'fieldGroup fieldGroupMinor';
+  if (isLongTextField(field)) return 'fieldGroup fieldGroupFeature';
+  return 'fieldGroup';
+}
+
+function isMinorField(field: ThsField): boolean {
+  return field.type === 'reference' || field.type === 'image';
+}
+
+function fieldPlaceholder(field: ThsField): string {
+  if (field.type !== 'string') return field.type;
+  if (field.name === 'body') return 'Write your post…';
+  if (field.name === 'bio') return 'Tell people about this profile…';
+  return fieldDisplayName(field);
+}
+
 export default function CreateRecordPage(props: { params: { collection: string } }) {
   const collectionName = props.params.collection;
   const collection = useMemo(() => getCollection(collectionName), [collectionName]);
@@ -39,6 +64,7 @@ export default function CreateRecordPage(props: { params: { collection: string }
   const [publicClient, setPublicClient] = useState<any | null>(null);
 
   const [form, setForm] = useState<Record<string, string>>({});
+  const [busyUploads, setBusyUploads] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     async function boot() {
@@ -102,9 +128,27 @@ export default function CreateRecordPage(props: { params: { collection: string }
     );
   }
 
-  const fields = createFields(collection);
-  const required = requiredFieldNames(collection);
+  const fields = useMemo(() => createFields(collection), [collection]);
+  const orderedFields = useMemo(
+    () => [...fields.filter((field) => !isMinorField(field)), ...fields.filter((field) => isMinorField(field))],
+    [fields]
+  );
+  const required = useMemo(() => requiredFieldNames(collection), [collection]);
+  const requiredReferenceFieldNames = useMemo(
+    () => fields.filter((field) => field.type === 'reference' && required.has(field.name)).map((field) => field.name),
+    [fields, required]
+  );
   const payment = hasCreatePayment(collection);
+  const uploadBusy = Object.values(busyUploads).some(Boolean);
+  const referenceCreationGates = useRequiredReferenceCreationGates({
+    manifest,
+    publicClient,
+    abi,
+    address: appAddress,
+    collection,
+    requiredFieldNames: requiredReferenceFieldNames
+  });
+  const activeReferenceGate = referenceCreationGates.blockers[0] ?? null;
 
   async function submit() {
     if (!manifest || !deployment || !abi || !publicClient || !appAddress) return;
@@ -112,6 +156,10 @@ export default function CreateRecordPage(props: { params: { collection: string }
       setError('App is not deployed yet (manifest has 0x0 address).');
       return;
     }
+    if (uploadBusy) {
+      setError('Wait for media uploads to finish before submitting this record.');
+      return;
+    }
 
     setError(null);
     setStatus(null);
@@ -122,7 +170,7 @@ export default function CreateRecordPage(props: { params: { collection: string }
       if (!required.has(f.name)) continue;
       const v = (form[f.name] ?? '').trim();
       if (!v) {
-        setError(`Missing required field: ${f.name}`);
+        setError(`Missing required field: ${fieldDisplayName(f)}`);
         return;
       }
     }
@@ -178,6 +226,41 @@ export default function CreateRecordPage(props: { params: { collection: string }
     );
   }
 
+  if (requiredReferenceFieldNames.length > 0 && referenceCreationGates.loading) {
+    return (
+      <div className="card">
+        <h2>Create {collection.name}</h2>
+        <div className="muted">Checking required linked records before showing the form.</div>
+      </div>
+    );
+  }
+
+  if (activeReferenceGate?.relatedCollection) {
+    return (
+      <div className="card">
+        <h2>Create {collection.name}</h2>
+        <div className="eyebrow">/create/gated</div>
+        <p className="lead" style={{ marginTop: 12 }}>
+          {activeReferenceGate.mustOwn
+            ? `You must create a ${activeReferenceGate.relatedCollection.name} owned by your wallet before creating this ${collection.name}.`
+            : `You must create a ${activeReferenceGate.relatedCollection.name} before creating this ${collection.name}.`}
+        </p>
+        <p className="muted">
+          {activeReferenceGate.missingWallet
+            ? `This form requires a wallet-owned ${activeReferenceGate.relatedCollection.name} via ${activeReferenceGate.fieldName}. Connect a wallet, then create your ${activeReferenceGate.relatedCollection.name} first.`
+            : activeReferenceGate.mustOwn
+              ? `This form requires a wallet-owned ${activeReferenceGate.relatedCollection.name} via ${activeReferenceGate.fieldName}, and this wallet does not own one yet.`
+              : `This form requires a linked ${activeReferenceGate.relatedCollection.name} via ${activeReferenceGate.fieldName}, and there are no ${activeReferenceGate.relatedCollection.name} records yet.`}
+        </p>
+        <div className="actionGroup" style={{ marginTop: 16 }}>
+          <button className="btn primary" onClick={() => router.push(`/${activeReferenceGate.relatedCollection.name}/?mode=new`)}>
+            Create {activeReferenceGate.relatedCollection.name}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="card">
       <h2>Create {collection.name}</h2>
@@ -190,10 +273,10 @@ export default function CreateRecordPage(props: { params: { collection: string }
       )}
 
       <div className="formGrid">
-        {fields.map((f) => (
-          <div key={f.name} className="fieldGroup">
+          {orderedFields.map((f) => (
+            <div key={f.name} className={fieldGroupClass(f)}>
             <label className="label">
-              {f.name} {required.has(f.name) ? <span className="badge">required</span> : null}
+              {fieldDisplayName(f)} {required.has(f.name) ? <span className="badge">required</span> : null}
             </label>
             {f.type === 'bool' ? (
               <select
@@ -209,6 +292,26 @@ export default function CreateRecordPage(props: { params: { collection: string }
                 manifest={manifest}
                 value={form[f.name] ?? ''}
                 onChange={(next) => setForm((prev) => ({ ...prev, [f.name]: next }))}
+                onBusyChange={(busy) => setBusyUploads((prev) => ({ ...prev, [f.name]: busy }))}
+              />
+            ) : f.type === 'reference' ? (
+              <ReferenceFieldInput
+                manifest={manifest}
+                publicClient={publicClient}
+                abi={abi}
+                address={appAddress}
+                collection={collection}
+                field={f}
+                value={form[f.name] ?? ''}
+                disabled={txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
+                onChange={(next) => setForm((prev) => ({ ...prev, [f.name]: next }))}
+              />
+            ) : isLongTextField(f) ? (
+              <textarea
+                className="input textarea textareaFeature"
+                value={form[f.name] ?? ''}
+                onChange={(e) => setForm((prev) => ({ ...prev, [f.name]: e.target.value }))}
+                placeholder={fieldPlaceholder(f)}
               />
             ) : (
               <input
@@ -216,7 +319,7 @@ export default function CreateRecordPage(props: { params: { collection: string }
                 type={inputType(f)}
                 value={form[f.name] ?? ''}
                 onChange={(e) => setForm((prev) => ({ ...prev, [f.name]: e.target.value }))}
-                placeholder={f.type === 'reference' ? 'record id (uint256)' : f.type}
+                placeholder={fieldPlaceholder(f)}
               />
             )}
           </div>
@@ -227,9 +330,9 @@ export default function CreateRecordPage(props: { params: { collection: string }
         <button
           className="btn primary"
           onClick={() => void submit()}
-          disabled={!abi || !publicClient || !appAddress || txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
+          disabled={!abi || !publicClient || !appAddress || uploadBusy || txPhase === 'submitting' || txPhase === 'submitted' || txPhase === 'confirming'}
         >
-          Create
+          {uploadBusy ? 'Waiting for media upload…' : 'Create'}
         </button>
         <button className="btn" onClick={() => router.push(`/${collectionName}/`)}>Cancel</button>
       </div>
diff --git a/packages/templates/next-export-ui/app/[collection]/view/ClientPage.tsx b/packages/templates/next-export-ui/app/[collection]/view/ClientPage.tsx
index c28c60f..67c032e 100644
--- a/packages/templates/next-export-ui/app/[collection]/view/ClientPage.tsx
+++ b/packages/templates/next-export-ui/app/[collection]/view/ClientPage.tsx
@@ -9,9 +9,10 @@ import { chainFromId } from '../../../src/lib/chains';
 import { chainWithRpcOverride, makePublicClient } from '../../../src/lib/clients';
 import { formatDateTime, formatFieldValue, shortAddress } from '../../../src/lib/format';
 import { fetchManifest, getPrimaryDeployment, getReadRpcUrl } from '../../../src/lib/manifest';
-import { fieldLinkUi, getCollection, transferEnabled, type ThsCollection, type ThsField } from '../../../src/lib/ths';
+import { displayField, fieldDisplayName, fieldLinkUi, getCollection, transferEnabled, type ThsCollection, type ThsField } from '../../../src/lib/ths';
 import { submitWriteTx } from '../../../src/lib/tx';
 import TxStatus, { type TxPhase } from '../../../src/components/TxStatus';
+import ResolvedReferenceValue from '../../../src/components/ResolvedReferenceValue';
 
 function getValue(record: any, key: string, fallbackIndex?: number): any {
   if (record && typeof record === 'object' && key in record) {
@@ -28,7 +29,24 @@ function fieldIndex(collection: ThsCollection, field: ThsField): number {
   return 9 + Math.max(0, idx);
 }
 
-function renderFieldValue(field: ThsField, rendered: string) {
+function prefersLongText(field: ThsField): boolean {
+  return field.type === 'string' && ['body', 'description', 'content', 'bio', 'summary'].includes(field.name);
+}
+
+function findMediaField(collection: ThsCollection): ThsField | null {
+  return collection.fields.find((field) => field.type === 'image') ?? null;
+}
+
+function renderFieldValue(args: {
+  collection: ThsCollection;
+  field: ThsField;
+  rendered: string;
+  raw: unknown;
+  abi: any[] | null;
+  publicClient: any | null;
+  address: `0x${string}` | undefined;
+}) {
+  const { collection, field, rendered, raw, abi, publicClient, address } = args;
   if (!rendered) return <span className="badge">—</span>;
 
   const linkUi = fieldLinkUi(field);
@@ -45,6 +63,20 @@ function renderFieldValue(field: ThsField, rendered: string) {
     );
   }
 
+  if (field.type === 'reference') {
+    return (
+      <ResolvedReferenceValue
+        collection={collection}
+        field={field}
+        value={raw}
+        abi={abi}
+        publicClient={publicClient}
+        address={address}
+        fallback={rendered}
+      />
+    );
+  }
+
   return <span className="badge">{rendered}</span>;
 }
 
@@ -289,27 +321,62 @@ export default function ViewRecordPage(props: { params: { collection: string } }
   const owner = getValue(record, 'owner', 3);
   const createdBy = getValue(record, 'createdBy', 2);
   const createdAt = getValue(record, 'createdAt', 1);
+  const updatedAt = getValue(record, 'updatedAt', 4);
   const version = getValue(record, 'version', 8);
   const canEdit = Array.isArray((collection as any).updateRules?.mutable) && (collection as any).updateRules.mutable.length > 0;
   const canDelete = Boolean((collection as any).deleteRules?.softDelete);
+  const display = displayField(collection);
+  const titleField =
+    collection.fields.find((field) => field.type === 'string' && ['displayName', 'title', 'name', 'handle'].includes(field.name)) ??
+    (display?.type === 'string' ? display : null);
+  const titleRaw = titleField ? getValue(record, titleField.name, fieldIndex(collection, titleField)) : null;
+  const title = titleField ? formatFieldValue(titleRaw, titleField.type, (titleField as any).decimals, titleField.name) : `${collection.name} #${String(id)}`;
+  const longTextField = collection.fields.find(prefersLongText) ?? null;
+  const longTextRaw = longTextField ? getValue(record, longTextField.name, fieldIndex(collection, longTextField)) : null;
+  const longText = longTextField ? formatFieldValue(longTextRaw, longTextField.type, (longTextField as any).decimals, longTextField.name) : '';
+  const mediaField = findMediaField(collection);
+  const mediaRaw = mediaField ? getValue(record, mediaField.name, fieldIndex(collection, mediaField)) : null;
+  const mediaUrl = mediaField ? formatFieldValue(mediaRaw, mediaField.type, (mediaField as any).decimals, mediaField.name) : '';
+  const detailFields = collection.fields.filter((field) => ![titleField?.name, longTextField?.name, mediaField?.name].includes(field.name));
 
   return (
     <>
-      <div className="card">
-        <div className="row">
-          <h2>
-            {collection.name} <span className="badge">#{String(getValue(record, 'id', 0))}</span>
-          </h2>
-          <div style={{ display: 'flex', gap: 10 }}>
-            <button className="btn" onClick={() => void fetchRecord()}>Refresh</button>
-            {canEdit ? (
-              <button className="btn" onClick={() => router.push(`/${collectionName}/?mode=edit&id=${String(id)}`)}>Edit</button>
-            ) : null}
-            {canDelete ? (
-              <button className="btn danger" onClick={() => router.push(`/${collectionName}/?mode=delete&id=${String(id)}`)}>Delete</button>
-            ) : null}
+      <section className="card heroPanel">
+        <div className="collectionCardHeader" style={{ alignItems: 'flex-start' }}>
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div className="eyebrow">/{collection.name.toLowerCase()}/{String(getValue(record, 'id', 0))}</div>
+            <h2 className="displayTitle displayTitleCompact">{title || `${collection.name} #${String(id)}`}</h2>
+            <div className="muted">
+              {titleField && titleField.name !== longTextField?.name ? fieldDisplayName(titleField) : 'On-chain record'}
+            </div>
+          </div>
+          <div className="chipRow">
+            <span className="badge">id {String(getValue(record, 'id', 0))}</span>
+            {transferEnabled(collection) ? <span className="badge">transferable</span> : null}
+            {canEdit ? <button className="btn" onClick={() => router.push(`/${collectionName}/?mode=edit&id=${String(id)}`)}>Edit</button> : null}
+            {canDelete ? <button className="btn danger" onClick={() => router.push(`/${collectionName}/?mode=delete&id=${String(id)}`)}>Delete</button> : null}
           </div>
         </div>
+
+        {longText ? <p className="recordHeroBody">{longText}</p> : null}
+
+        {mediaUrl ? (
+          <div className="recordHeroMedia">
+            <img src={mediaUrl} alt={`${collection.name} ${String(id)}`} style={{ display: 'block', width: '100%', maxHeight: 540, objectFit: 'contain' }} />
+          </div>
+        ) : null}
+
+        <div className="chipRow">
+          <span className="badge">owner {owner ? shortAddress(String(owner)) : '—'}</span>
+          <span className="badge">created {createdAt ? formatDateTime(createdAt, 'compact') : '—'}</span>
+          {updatedAt ? <span className="badge">updated {formatDateTime(updatedAt, 'compact')}</span> : null}
+          <span className="badge">version {version ? String(version) : '0'}</span>
+          <button className="btn" onClick={() => void fetchRecord()}>Refresh</button>
+        </div>
+      </section>
+
+      <section className="card">
+        <h2>Details</h2>
         <div className="kv">
           <div>owner</div>
           <div>{owner ? shortAddress(String(owner)) : '—'}</div>
@@ -317,26 +384,20 @@ export default function ViewRecordPage(props: { params: { collection: string } }
           <div>{createdBy ? shortAddress(String(createdBy)) : '—'}</div>
           <div>createdAt</div>
           <div>{createdAt ? formatDateTime(createdAt) : '—'}</div>
-          <div>version</div>
-          <div>{version ? String(version) : '—'}</div>
-        </div>
-      </div>
-
-      <div className="card">
-        <h2>Fields</h2>
-        <div className="kv">
-          {collection.fields.map((f) => {
+          <div>updatedAt</div>
+          <div>{updatedAt ? formatDateTime(updatedAt) : '—'}</div>
+          {detailFields.map((f) => {
             const v = getValue(record, f.name, fieldIndex(collection, f));
             const rendered = formatFieldValue(v, f.type, (f as any).decimals, f.name);
             return (
               <React.Fragment key={f.name}>
-                <div>{f.name}</div>
-                <div>{renderFieldValue(f, rendered)}</div>
+                <div>{fieldDisplayName(f)}</div>
+                <div>{renderFieldValue({ collection, field: f, rendered, raw: v, abi, publicClient, address: appAddress })}</div>
               </React.Fragment>
             );
           })}
         </div>
-      </div>
+      </section>
 
       {transferEnabled(collection) ? (
         <div className="card">
diff --git a/packages/templates/next-export-ui/app/globals.css b/packages/templates/next-export-ui/app/globals.css
index ae96912..685a664 100644
--- a/packages/templates/next-export-ui/app/globals.css
+++ b/packages/templates/next-export-ui/app/globals.css
@@ -52,9 +52,9 @@
   --th-success: hsl(142 70% 35%);
   --th-danger: hsl(0 84% 60%);
   --th-grid: hsl(190 100% 50% / 0.05);
-  --th-grid-strong: hsl(190 100% 50% / 0.75);
-  --th-glow-left: hsl(190 100% 50% / 0.18);
-  --th-glow-right: hsl(300 100% 75% / 0.18);
+  --th-grid-strong: hsl(190 100% 50% / 0.34);
+  --th-glow-left: hsl(190 100% 50% / 0.1);
+  --th-glow-right: hsl(300 100% 75% / 0.08);
   --th-shadow: 4px 4px 0 rgba(0, 0, 0, 0.03);
   --th-shadow-soft: 4px 4px 0 rgba(0, 0, 0, 0.03);
   --th-badge-bg: hsl(0 0% 100%);
@@ -96,9 +96,9 @@ html[data-theme='dark'] {
   --th-success: hsl(142 70% 45%);
   --th-danger: hsl(0 100% 60%);
   --th-grid: hsl(300 100% 75% / 0.04);
-  --th-grid-strong: hsl(300 100% 75% / 0.75);
-  --th-glow-left: hsl(190 100% 50% / 0.14);
-  --th-glow-right: hsl(300 100% 60% / 0.12);
+  --th-grid-strong: hsl(300 100% 75% / 0.32);
+  --th-glow-left: hsl(190 100% 50% / 0.08);
+  --th-glow-right: hsl(300 100% 60% / 0.08);
   --th-shadow: none;
   --th-shadow-soft: none;
   --th-badge-bg: hsl(240 10% 8%);
@@ -166,10 +166,10 @@ svg {
   inset: 0;
   position: absolute;
   background-image:
-    linear-gradient(to right, color-mix(in srgb, var(--th-primary) 16%, transparent) 29px, transparent 29px),
-    linear-gradient(to bottom, color-mix(in srgb, var(--th-primary) 16%, transparent) 29px, transparent 29px),
-    linear-gradient(to right, color-mix(in srgb, var(--th-primary) 75%, transparent) 2px, transparent 2px),
-    linear-gradient(to bottom, color-mix(in srgb, var(--th-primary) 75%, transparent) 2px, transparent 2px);
+    linear-gradient(to right, color-mix(in srgb, var(--th-primary) 10%, transparent) 29px, transparent 29px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--th-primary) 10%, transparent) 29px, transparent 29px),
+    linear-gradient(to right, color-mix(in srgb, var(--th-primary) 34%, transparent) 2px, transparent 2px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--th-primary) 34%, transparent) 2px, transparent 2px);
   background-repeat: repeat;
   background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px;
   -webkit-mask-image:
@@ -184,11 +184,7 @@ svg {
   mask-composite: add;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
-  animation:
-    boilSpotOne 13s ease-in-out infinite alternate,
-    boilSpotTwo 17s ease-in-out infinite alternate,
-    boilSpotThree 19s ease-in-out infinite alternate,
-    gridBreathe 6s ease-in-out infinite;
+  opacity: 0.52;
 }
 
 .siteLivingGridCanvas {
@@ -199,7 +195,11 @@ svg {
 }
 
 html[data-theme='dark'] .siteLivingGridCanvas {
-  opacity: 0.9;
+  opacity: 0.72;
+}
+
+html[data-theme='dark'] .siteGridLayer {
+  opacity: 0.66;
 }
 
 .container {
@@ -461,10 +461,10 @@ html[data-theme='dark'] .themeToggle::after {
 
 .brandWordText {
   display: inline-flex;
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 800;
   gap: 6px;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.16em;
   line-height: 1.08;
   text-transform: uppercase;
 }
@@ -672,6 +672,7 @@ html[data-theme='dark'] .themeToggle::after {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(12, minmax(0, 1fr));
+  margin-bottom: 18px;
 }
 
 .card {
@@ -713,6 +714,15 @@ html[data-theme='dark'] .themeToggle::after {
   justify-content: space-between;
 }
 
+.actionGroup {
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.fieldPillRow {
+  margin-top: 14px;
+}
+
 .displayTitle {
   font-family: var(--th-font-display);
   font-size: clamp(2.4rem, 6vw, 4.7rem);
@@ -727,6 +737,16 @@ html[data-theme='dark'] .themeToggle::after {
   color: var(--th-primary);
 }
 
+.displayTitleHero {
+  max-width: none;
+}
+
+.displayTitleCompact {
+  font-size: clamp(2.05rem, 4vw, 3.05rem);
+  line-height: 0.98;
+  max-width: none;
+}
+
 .lead {
   color: var(--th-muted);
   font-size: 0.98rem;
@@ -883,6 +903,10 @@ html[data-theme='dark'] .themeToggle::after {
   padding: 14px;
 }
 
+.recordPreviewCellCompact {
+  padding: 12px 14px;
+}
+
 .recordPreviewLabel {
   color: var(--th-muted);
   font-family: var(--th-font-mono);
@@ -1000,6 +1024,16 @@ html[data-theme='dark'] .btn.primary {
   transform: none;
 }
 
+.cardTitleLink {
+  transition: color var(--th-motion-fast) ease;
+}
+
+.cardTitleLink:hover,
+.cardTitleLink:focus-visible {
+  color: var(--th-primary);
+  outline: none;
+}
+
 .input,
 .select {
   background: var(--th-input-bg);
@@ -1038,6 +1072,7 @@ html[data-theme='dark'] .btn.primary {
 .formGrid {
   display: grid;
   gap: 16px;
+  grid-template-columns: minmax(0, 1fr);
   margin-top: 16px;
 }
 
@@ -1045,6 +1080,83 @@ html[data-theme='dark'] .btn.primary {
   min-width: 0;
 }
 
+.fieldGroupMinor {
+  align-self: start;
+  max-width: 520px;
+}
+
+.textarea {
+  min-height: 140px;
+  resize: vertical;
+}
+
+.textareaFeature {
+  min-height: 220px;
+}
+
+.selectMinor {
+  font-size: 0.92rem;
+  min-height: 50px;
+  padding: 12px 14px;
+}
+
+.referenceIdentityShell {
+  background: color-mix(in srgb, var(--th-panel-muted) 96%, transparent);
+  border: 1px solid var(--th-border);
+  display: grid;
+  gap: 8px;
+  max-width: 420px;
+  padding: 12px 14px;
+}
+
+.referenceIdentityMeta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.referenceIdentityLabel {
+  color: var(--th-muted);
+  font-family: var(--th-font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.referenceIdentityRow {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.referenceIdentityTitle {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.referenceIdentitySubtitle {
+  color: var(--th-muted);
+  font-size: 0.95rem;
+}
+
+.recordHeroBody {
+  font-size: 1.18rem;
+  line-height: 1.7;
+  margin: 0;
+  max-width: 70ch;
+  white-space: pre-wrap;
+}
+
+.recordHeroMedia {
+  background: color-mix(in srgb, var(--th-panel-muted) 92%, transparent);
+  border: 1px solid var(--th-border);
+  overflow: hidden;
+  padding: 14px;
+}
+
 .kv {
   border: 1px solid var(--th-border);
   display: grid;
@@ -1229,9 +1341,6 @@ html[data-theme='dark'] .btn.primary {
     grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
   }
 
-  .formGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 }
 
 @media (min-width: 980px) {
@@ -1324,6 +1433,10 @@ html[data-theme='dark'] .btn.primary {
     grid-template-columns: 1fr;
   }
 
+  .formGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .kv > div:nth-child(odd) {
     border-bottom: 0;
     border-right: 0;
@@ -1368,53 +1481,6 @@ html[data-theme='dark'] .btn.primary {
   }
 }
 
-@keyframes gridBreathe {
-  0%,
-  100% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes boilSpotOne {
-  0% {
-    --th-boil-x1: 10%;
-    --th-boil-y1: 20%;
-  }
-
-  100% {
-    --th-boil-x1: 80%;
-    --th-boil-y1: 40%;
-  }
-}
-
-@keyframes boilSpotTwo {
-  0% {
-    --th-boil-x2: 90%;
-    --th-boil-y2: 80%;
-  }
-
-  100% {
-    --th-boil-x2: 20%;
-    --th-boil-y2: 30%;
-  }
-}
-
-@keyframes boilSpotThree {
-  0% {
-    --th-boil-x3: 40%;
-    --th-boil-y3: 40%;
-  }
-
-  100% {
-    --th-boil-x3: 60%;
-    --th-boil-y3: 60%;
-  }
-}
-
 @keyframes panelEnter {
   from {
     opacity: 0;
diff --git a/packages/templates/next-export-ui/app/layout.tsx b/packages/templates/next-export-ui/app/layout.tsx
index d5ce31c..eafb3b3 100644
--- a/packages/templates/next-export-ui/app/layout.tsx
+++ b/packages/templates/next-export-ui/app/layout.tsx
@@ -6,10 +6,10 @@ import Link from 'next/link';
 import ConnectButton from '../src/components/ConnectButton';
 import FaucetButton from '../src/components/FaucetButton';
 import FooterDeploymentMeta from '../src/components/FooterDeploymentMeta';
-import LivingGrid from '../src/components/LivingGrid';
+import HomeOnlyLivingGrid from '../src/components/HomeOnlyLivingGrid';
 import NetworkStatus from '../src/components/NetworkStatus';
 import ThemeToggle from '../src/components/ThemeToggle';
-import { ths } from '../src/lib/ths';
+import { collectionNavLabel, primaryCollection, ths } from '../src/lib/ths';
 
 export const metadata = {
   title: `${ths.app.name} - Token Host`,
@@ -34,7 +34,9 @@ const themeBootScript = `
 `;
 
 export default function RootLayout(props: { children: React.ReactNode }) {
-  const primaryCollection = ths.collections[0] ?? null;
+  const brandPrimary = String(ths.app.brand?.primaryText ?? 'token').trim() || 'token';
+  const brandAccent = String(ths.app.brand?.accentText ?? 'host').trim() || 'host';
+  const primaryModel = primaryCollection();
   const navCollections = ths.collections.slice(0, 2);
 
   return (
@@ -43,7 +45,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         <script dangerouslySetInnerHTML={{ __html: themeBootScript }} />
         <div className="siteBackground" aria-hidden="true">
           <div className="siteGridLayer" />
-          <LivingGrid />
+          <HomeOnlyLivingGrid />
         </div>
         <div className="container">
           <header className="navShell">
@@ -52,26 +54,24 @@ export default function RootLayout(props: { children: React.ReactNode }) {
                 <div className="brandCopy">
                   <div className="brandIdentity">
                     <span className="brandWordText">
-                      <span className="brandWordBase">token</span>
-                      <span className="brandWordAccent">host</span>
+                      <span className="brandWordBase">{brandPrimary}</span>
+                      <span className="brandWordAccent">{brandAccent}</span>
                     </span>
                   </div>
                 </div>
               </Link>
               <nav className="navRail" aria-label="Primary">
-                <Link className="navRailLink" href="/">Overview</Link>
                 {navCollections.map((collection) => (
                   <Link key={collection.name} className="navRailLink" href={`/${collection.name}/`}>
-                    {collection.name}
+                    {collectionNavLabel(collection)}
                   </Link>
                 ))}
-                <a className="navRailLink" href="/.well-known/tokenhost/manifest.json">Manifest</a>
               </nav>
               <div className="controlCluster">
                 <ThemeToggle />
                 <FaucetButton />
                 <ConnectButton />
-                {primaryCollection ? <Link className="btn primary navCta" href={`/${primaryCollection.name}/?mode=new`}>Create record</Link> : null}
+                {primaryModel ? <Link className="btn primary navCta" href={`/${primaryModel.name}/?mode=new`}>Create {primaryModel.name}</Link> : null}
               </div>
             </div>
           </header>
@@ -97,10 +97,9 @@ export default function RootLayout(props: { children: React.ReactNode }) {
                 <div className="footerSection">
                   <h4 className="footerLabel">/runtime</h4>
                   <div className="footerList">
-                    <Link className="footerLinkText" href="/">Overview</Link>
                     <a className="footerLinkText" href="/.well-known/tokenhost/manifest.json">Manifest</a>
                     <a className="footerLinkText" href="/compiled/App.json">Compiled ABI</a>
-                    {primaryCollection ? <Link className="footerLinkText" href={`/${primaryCollection.name}/?mode=new`}>Create record</Link> : null}
+                    {primaryModel ? <Link className="footerLinkText" href={`/${primaryModel.name}/?mode=new`}>Create {primaryModel.name}</Link> : null}
                   </div>
                 </div>
               </div>
diff --git a/packages/templates/next-export-ui/app/page.tsx b/packages/templates/next-export-ui/app/page.tsx
index ce0f4ec..ba2b731 100644
--- a/packages/templates/next-export-ui/app/page.tsx
+++ b/packages/templates/next-export-ui/app/page.tsx
@@ -1,13 +1,21 @@
 import Link from 'next/link';
 
-import { displayField, hasCreatePayment, mutableFields, ths, transferEnabled } from '../src/lib/ths';
+import GeneratedHomePageClient from '../src/components/GeneratedHomePageClient';
+import { displayField, fieldDisplayName, hasCreatePayment, mutableFields, ths, transferEnabled } from '../src/lib/ths';
 
 export default function HomePage() {
+  if (Array.isArray(ths.app.ui?.generated?.homeSections) && ths.app.ui.generated.homeSections.length > 0) {
+    return <GeneratedHomePageClient />;
+  }
+
   const firstCollection = ths.collections[0] ?? null;
   const totalFields = ths.collections.reduce((sum, collection) => sum + collection.fields.length, 0);
   const editableCollections = ths.collections.filter((collection) => mutableFields(collection).length > 0).length;
   const transferCollections = ths.collections.filter((collection) => transferEnabled(collection)).length;
   const paidCollections = ths.collections.filter((collection) => Boolean(hasCreatePayment(collection))).length;
+  const totalRelations = ths.collections.reduce((sum, collection) => sum + (Array.isArray(collection.relations) ? collection.relations.length : 0), 0);
+  const indexedCollections = ths.collections.filter((collection) => Array.isArray((collection as any).indexes?.index) && (collection as any).indexes.index.length > 0).length;
+  const imageCollections = ths.collections.filter((collection) => collection.fields.some((field) => field.type === 'image')).length;
 
   return (
     <div className="pageStack">
@@ -57,6 +65,9 @@ export default function HomePage() {
             </div>
             <div className="heroMeta">
               <span className="badge">paid creates: {paidCollections}</span>
+              <span className="badge">relations: {totalRelations}</span>
+              <span className="badge">indexed collections: {indexedCollections}</span>
+              <span className="badge">media collections: {imageCollections}</span>
               <span className="badge">schema {ths.schemaVersion}</span>
             </div>
           </div>
@@ -71,6 +82,13 @@ export default function HomePage() {
             The generated app reads <span className="badge">/.well-known/tokenhost/manifest.json</span> at runtime, so deployment metadata stays outside the bundle.
           </p>
         </div>
+        <div className="card featureCard">
+          <div className="eyebrow">/relationships</div>
+          <h3>Reference-aware by default</h3>
+          <p className="muted">
+            Generated forms can resolve related records, prefer owned identities when available, and render linked labels instead of exposing raw foreign keys everywhere.
+          </p>
+        </div>
         <div className="card featureCard">
           <div className="eyebrow">/wallet</div>
           <h3>Public reads, wallet-native writes</h3>
@@ -78,6 +96,13 @@ export default function HomePage() {
             Read-only pages use the deployment chain's public RPC when available, so browsing does not require MetaMask and does not depend on the wallet being on the right network. Create, update, delete, and transfer flows still use the wallet with clean chain and transaction feedback.
           </p>
         </div>
+        <div className="card featureCard">
+          <div className="eyebrow">/uploads</div>
+          <h3>Long-running media flows</h3>
+          <p className="muted">
+            Upload fields expose progress, processing, retry, and submit-blocking states so generated apps can handle remote media workflows without custom glue.
+          </p>
+        </div>
         <div className="card featureCard">
           <div className="eyebrow">/hosting</div>
           <h3>Self-hostable release</h3>
@@ -111,7 +136,7 @@ export default function HomePage() {
                   <h3>{collection.name}</h3>
                   <p className="muted">
                     {collection.fields.length} field{collection.fields.length === 1 ? '' : 's'}
-                    {display ? ` · display field ${display.name}` : ''}
+                    {display ? ` · display field ${fieldDisplayName(display)}` : ''}
                   </p>
                 </div>
                 <span className="badge">{collection.plural || collection.name}</span>
@@ -122,17 +147,40 @@ export default function HomePage() {
                 <span className="badge">create {collection.createRules.access}</span>
                 <span className="badge">{transferEnabled(collection) ? 'transfer on' : 'transfer off'}</span>
                 {payment ? <span className="badge">paid create</span> : null}
+                {collection.fields.some((field) => field.type === 'reference') ? <span className="badge">reference-aware</span> : null}
+                {collection.fields.some((field) => field.type === 'image') ? <span className="badge">media upload</span> : null}
+                {Array.isArray((collection as any).indexes?.index) && (collection as any).indexes.index.length > 0 ? <span className="badge">indexed queries</span> : null}
               </div>
 
               <div className="fieldPillRow">
                 {fieldPreview.map((field) => (
                   <span key={field.name} className="fieldPill">
-                    {field.name}
+                    {fieldDisplayName(field)}
                   </span>
                 ))}
                 {collection.fields.length > fieldPreview.length ? <span className="fieldPill">+{collection.fields.length - fieldPreview.length} more</span> : null}
               </div>
 
+              {Array.isArray(collection.relations) && collection.relations.length > 0 ? (
+                <div className="chipRow">
+                  {collection.relations.map((relation) => (
+                    <span key={`${collection.name}-${relation.field}-${relation.to}`} className="badge">
+                      {relation.field} → {relation.to}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+
+              {Array.isArray((collection as any).indexes?.index) && (collection as any).indexes.index.length > 0 ? (
+                <div className="chipRow">
+                  {(collection as any).indexes.index.map((index: any) => (
+                    <span key={`${collection.name}-${String(index?.field ?? '')}-${String(index?.mode ?? 'equality')}`} className="badge">
+                      {String(index?.field ?? 'field')} {String(index?.mode ?? 'equality')}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+
               <div className="actionGroup">
                 <Link className="btn" href={`/${collection.name}/`}>Browse</Link>
                 <Link className="btn primary" href={`/${collection.name}/?mode=new`}>Create</Link>
diff --git a/apps/example/microblog-ui/app/tag/page.tsx b/packages/templates/next-export-ui/app/tag/page.tsx
similarity index 53%
rename from apps/example/microblog-ui/app/tag/page.tsx
rename to packages/templates/next-export-ui/app/tag/page.tsx
index dae4385..38fec27 100644
--- a/apps/example/microblog-ui/app/tag/page.tsx
+++ b/packages/templates/next-export-ui/app/tag/page.tsx
@@ -1,11 +1,11 @@
 import { Suspense } from 'react';
 
-import MicroblogTagClient from '../../src/components/MicroblogTagClient';
+import GeneratedTokenPageClient from '../../src/components/GeneratedTokenPageClient';
 
 export default function TagPage() {
   return (
     <Suspense fallback={null}>
-      <MicroblogTagClient />
+      <GeneratedTokenPageClient />
     </Suspense>
   );
 }
diff --git a/packages/templates/next-export-ui/src/collection-route/CollectionLayout.tsx b/packages/templates/next-export-ui/src/collection-route/CollectionLayout.tsx
index 08d6913..2c6a07d 100644
--- a/packages/templates/next-export-ui/src/collection-route/CollectionLayout.tsx
+++ b/packages/templates/next-export-ui/src/collection-route/CollectionLayout.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
 
-import { displayField, hasCreatePayment, mutableFields, ths, transferEnabled } from '../lib/ths';
+import { displayField, fieldDisplayName, hasCreatePayment, mutableFields, ths, transferEnabled } from '../lib/ths';
 
 export default function CollectionLayout(props: { children: ReactNode; collectionName: string }) {
   const collection = ths.collections.find((c) => c.name === props.collectionName);
@@ -22,12 +22,6 @@ export default function CollectionLayout(props: { children: ReactNode; collectio
       <section className="card collectionHero">
         <div className="heroTopline">
           <span className="eyebrow">/collection/{collection.name}</span>
-          <div className="chipRow">
-            <span className="badge">{collection.fields.length} fields</span>
-            <span className="badge">create {collection.createRules.access}</span>
-            <span className="badge">update {collection.updateRules.access}</span>
-            <span className="badge">delete {collection.deleteRules.access}</span>
-          </div>
         </div>
 
         <div className="heroSplit">
@@ -38,12 +32,12 @@ export default function CollectionLayout(props: { children: ReactNode; collectio
             </p>
             <div className="actionGroup">
               <Link className="btn" href={`/${collection.name}/`}>List records</Link>
-              <Link className="btn primary" href={`/${collection.name}/?mode=new`}>Create record</Link>
+              <Link className="btn primary" href={`/${collection.name}/?mode=new`}>Create {collection.name}</Link>
             </div>
             <div className="fieldPillRow">
               {collection.fields.slice(0, 6).map((field) => (
                 <span key={field.name} className="fieldPill">
-                  {field.name}
+                  {fieldDisplayName(field)}
                 </span>
               ))}
             </div>
@@ -63,7 +57,7 @@ export default function CollectionLayout(props: { children: ReactNode; collectio
             </div>
             <div className="heroMeta">
               <span className="badge">
-                display {displayField(collection)?.name ?? 'auto'}
+                display {displayField(collection) ? fieldDisplayName(displayField(collection)!) : 'auto'}
               </span>
               {hasCreatePayment(collection) ? <span className="badge">paid create</span> : <span className="badge">free create</span>}
             </div>
diff --git a/packages/templates/next-export-ui/src/components/ConnectButton.tsx b/packages/templates/next-export-ui/src/components/ConnectButton.tsx
index fbf5a9e..fde89e9 100644
--- a/packages/templates/next-export-ui/src/components/ConnectButton.tsx
+++ b/packages/templates/next-export-ui/src/components/ConnectButton.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { getStoredAccount, setStoredAccount, subscribeStoredAccount } from '../lib/account';
 import { chainFromId } from '../lib/chains';
 import { chainWithRpcOverride, requestWalletAddress } from '../lib/clients';
 import { shortAddress } from '../lib/format';
@@ -24,13 +25,8 @@ export default function ConnectButton() {
   }, []);
 
   useEffect(() => {
-    // Best-effort: hydrate from localStorage.
-    try {
-      const cached = localStorage.getItem('TH_ACCOUNT');
-      if (cached) setAccount(cached);
-    } catch {
-      // ignore
-    }
+    setAccount(getStoredAccount());
+    return subscribeStoredAccount(setAccount);
   }, []);
 
   useEffect(() => {
@@ -68,11 +64,7 @@ export default function ConnectButton() {
       const accountAddr = a ?? null;
       setAccount(accountAddr);
       setStatus(null);
-      try {
-        if (accountAddr) localStorage.setItem('TH_ACCOUNT', accountAddr);
-      } catch {
-        // ignore
-      }
+      setStoredAccount(accountAddr);
     } catch (e: any) {
       setStatus(String(e?.message ?? e));
     }
@@ -81,11 +73,7 @@ export default function ConnectButton() {
   function disconnect() {
     // Wallets don't support programmatic disconnect reliably; clear local state only.
     setAccount(null);
-    try {
-      localStorage.removeItem('TH_ACCOUNT');
-    } catch {
-      // ignore
-    }
+    setStoredAccount(null);
   }
 
   if (walletState === 'unknown') return null;
diff --git a/packages/templates/next-export-ui/src/components/GeneratedFeedStream.tsx b/packages/templates/next-export-ui/src/components/GeneratedFeedStream.tsx
new file mode 100644
index 0000000..96f2757
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/GeneratedFeedStream.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import Link from 'next/link';
+
+import { formatDateTime } from '../lib/format';
+import { extractHashtagTokens } from '../lib/indexing';
+import { feedCardSummary, type GeneratedFeedConfig, type GeneratedFeedItem } from '../lib/generated-ui';
+
+export default function GeneratedFeedStream(props: {
+  feed: GeneratedFeedConfig;
+  items: GeneratedFeedItem[];
+  emptyTitle: string;
+  emptyBody: string;
+  tokenPageId?: string;
+}) {
+  const textField = props.feed.card?.textField ?? 'body';
+  const tagBaseHref = props.tokenPageId
+    ? `/tag?page=${encodeURIComponent(props.tokenPageId)}&value=`
+    : '/tag?value=';
+
+  if (!props.items.length) {
+    return (
+      <section className="card">
+        <div className="eyebrow">/feed/empty</div>
+        <h3>{props.emptyTitle}</h3>
+        <p className="muted">{props.emptyBody}</p>
+      </section>
+    );
+  }
+
+  return (
+    <div className="grid">
+      {props.items.map((item) => {
+        const summary = feedCardSummary(item, props.feed);
+        const tags = extractHashtagTokens(summary.body);
+        const timestamp = item.record?.updatedAt ?? item.record?.createdAt ?? null;
+        const viewHref = `/${props.feed.collection}/?mode=view&id=${String(item.id)}`;
+        return (
+          <article key={String(item.id)} className="card half" style={{ display: 'grid', gap: 14 }}>
+            <div className="collectionCardHeader" style={{ alignItems: 'flex-start' }}>
+              <div style={{ display: 'grid', gap: 8 }}>
+                <div className="eyebrow">/{props.feed.collection.toLowerCase()}/{String(item.id)}</div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                  {summary.imageUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={summary.imageUrl}
+                      alt={summary.title}
+                      style={{ width: 48, height: 48, objectFit: 'cover', borderRadius: '50%', border: '1px solid var(--border)' }}
+                    />
+                  ) : null}
+                  <div>
+                    <h3 style={{ margin: 0 }}>
+                      <Link href={viewHref} className="cardTitleLink">
+                        {summary.title}
+                      </Link>
+                    </h3>
+                    {summary.subtitle ? <p className="muted" style={{ margin: 0 }}>{summary.subtitle}</p> : null}
+                  </div>
+                </div>
+                <p className="muted" style={{ margin: 0 }}>{timestamp ? formatDateTime(timestamp, 'compact') : 'On-chain record'}</p>
+              </div>
+              <div className="chipRow">
+                <span className="badge">{summary.mediaUrl ? 'image post' : 'text post'}</span>
+                <span className="badge">id {String(item.id)}</span>
+                {item.referenceId ? <span className="badge">profile {String(item.referenceId)}</span> : null}
+              </div>
+            </div>
+
+            {summary.body ? <p style={{ margin: 0, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{summary.body}</p> : null}
+
+            {summary.mediaUrl ? (
+              <div style={{ overflow: 'hidden', borderRadius: 18, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.03)' }}>
+                <Link href={viewHref}>
+                  <img src={summary.mediaUrl} alt={`${props.feed.collection} ${String(item.id)}`} style={{ display: 'block', width: '100%', maxHeight: 460, objectFit: 'cover' }} />
+                </Link>
+              </div>
+            ) : null}
+
+            {tags.length ? (
+              <div className="chipRow">
+                {tags.map((tag) => (
+                  <Link key={`${String(item.id)}-${tag}`} className="badge" href={`${tagBaseHref}${encodeURIComponent(tag)}`}>
+                    #{tag}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+          </article>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/templates/next-export-ui/src/components/GeneratedHomePageClient.tsx b/packages/templates/next-export-ui/src/components/GeneratedHomePageClient.tsx
new file mode 100644
index 0000000..9ac8283
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/GeneratedHomePageClient.tsx
@@ -0,0 +1,167 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+
+import GeneratedFeedStream from './GeneratedFeedStream';
+import {
+  collectGeneratedTrendingTokens,
+  generatedHomeSections,
+  getGeneratedFeed,
+  getGeneratedTokenPage,
+  loadGeneratedFeed,
+  loadGeneratedUiRuntime,
+  sortGeneratedFeedItemsDesc,
+  type GeneratedFeedItem
+} from '../lib/generated-ui';
+import { ths } from '../lib/ths';
+
+export default function GeneratedHomePageClient() {
+  const sections = generatedHomeSections();
+  const tokenListSection = useMemo(
+    () => sections.find((candidate) => candidate.type === 'tokenList'),
+    [sections]
+  );
+  const [feeds, setFeeds] = useState<Record<string, GeneratedFeedItem[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const runtime = await loadGeneratedUiRuntime();
+        const nextFeeds: Record<string, GeneratedFeedItem[]> = {};
+        for (const section of sections) {
+          if (section.type !== 'feed') continue;
+          const feed = getGeneratedFeed(section.feed);
+          if (!feed) continue;
+          nextFeeds[feed.id] = sortGeneratedFeedItemsDesc(await loadGeneratedFeed(runtime, feed));
+        }
+        if (cancelled) return;
+        setFeeds(nextFeeds);
+        setLoading(false);
+      } catch (cause: any) {
+        if (cancelled) return;
+        setError(String(cause?.message ?? cause));
+        setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [sections]);
+
+  const collectionCount = ths.collections.length;
+
+  return (
+    <div className="pageStack">
+      {sections.map((section, index) => {
+        if (section.type === 'hero') {
+          return (
+            <section key={`hero-${index}`} className="card heroPanel">
+              <div className="heroSplit">
+                <div>
+                  <div className="heroTopline">
+                    <span className="eyebrow">{section.eyebrow || '/generated/hero'}</span>
+                    <div className="chipRow">
+                      {(section.badges ?? []).map((badge) => (
+                        <span key={badge} className="badge">{badge}</span>
+                      ))}
+                    </div>
+                  </div>
+                  <h2 className="displayTitle displayTitleHero">
+                    {section.title}
+                    {section.accent ? (
+                      <>
+                        <br />
+                        <span>{section.accent}</span>
+                      </>
+                    ) : null}
+                  </h2>
+                  {section.description ? <p className="lead">{section.description}</p> : null}
+                  <div className="actionGroup">
+                    {(section.actions ?? []).map((action) => (
+                      <Link key={`${action.label}-${action.href}`} className={action.variant === 'primary' ? 'btn primary' : 'btn'} href={action.href}>
+                        {action.label}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+                <div className="heroDataPanel">
+                  <div className="eyebrow">/generated/summary</div>
+                  <div className="heroStatGrid">
+                    <div className="heroStat">
+                      <div className="heroStatValue">{loading ? '…' : Object.values(feeds).reduce((sum, items) => sum + items.length, 0)}</div>
+                      <div className="heroStatLabel">Feed items</div>
+                    </div>
+                    <div className="heroStat">
+                      <div className="heroStatValue">{collectionCount}</div>
+                      <div className="heroStatLabel">Collections</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          );
+        }
+
+        if (section.type === 'tokenList') {
+          const tokenPage = getGeneratedTokenPage(section.tokenPage);
+          const feed = tokenPage?.feed ? getGeneratedFeed(tokenPage.feed) : null;
+          const feedItems = feed ? feeds[feed.id] ?? [] : [];
+          const trending = tokenPage && feed ? collectGeneratedTrendingTokens(feedItems, tokenPage.field, 10) : [];
+          return (
+            <section key={`token-${index}`} className="card">
+              <div className="sectionHeading">
+                <div className="sectionHeadingPrimary">
+                  <span className="eyebrow">/generated/tokens</span>
+                  <h2>{section.title}</h2>
+                </div>
+              </div>
+              <div className="chipRow">
+                {trending.length ? trending.map((entry) => (
+                  <Link key={entry.token} className="badge" href={`/tag?page=${encodeURIComponent(section.tokenPage)}&value=${encodeURIComponent(entry.token)}`}>
+                    #{entry.token} · {entry.count}
+                  </Link>
+                )) : <span className="muted">{section.emptyBody || 'No indexed tokens yet.'}</span>}
+              </div>
+            </section>
+          );
+        }
+
+        const feed = getGeneratedFeed(section.feed);
+        if (!feed) return null;
+        return (
+          <section key={`feed-${index}`} className="pageStack">
+            <section className="card sectionHeading">
+              <div className="sectionHeadingPrimary">
+                <span className="eyebrow">/generated/feed</span>
+                <h2>{section.title}</h2>
+              </div>
+            </section>
+            {loading ? (
+              <section className="card">
+                <div className="eyebrow">/feed/loading</div>
+                <p className="muted">Loading feed…</p>
+              </section>
+            ) : error ? (
+              <section className="card">
+                <div className="eyebrow">/feed/error</div>
+                <p className="muted">{error}</p>
+              </section>
+            ) : (
+              <GeneratedFeedStream
+                feed={feed}
+                items={feeds[feed.id] ?? []}
+                emptyTitle={section.emptyTitle || 'No records yet'}
+                emptyBody={section.emptyBody || 'Create the first record to populate this feed.'}
+                tokenPageId={tokenListSection?.type === 'tokenList' ? tokenListSection.tokenPage : undefined}
+              />
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/templates/next-export-ui/src/components/GeneratedTokenPageClient.tsx b/packages/templates/next-export-ui/src/components/GeneratedTokenPageClient.tsx
new file mode 100644
index 0000000..2532634
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/GeneratedTokenPageClient.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+import GeneratedFeedStream from './GeneratedFeedStream';
+import {
+  generatedTokenPages,
+  getGeneratedFeed,
+  getGeneratedTokenPage,
+  loadGeneratedTokenFeed,
+  loadGeneratedUiRuntime,
+  sortGeneratedFeedItemsDesc,
+  type GeneratedFeedItem
+} from '../lib/generated-ui';
+
+type TokenState = {
+  token: string;
+  items: GeneratedFeedItem[];
+  loading: boolean;
+  error: string | null;
+};
+
+export default function GeneratedTokenPageClient() {
+  const searchParams = useSearchParams();
+  const pageId = String(searchParams.get('page') ?? '').trim();
+  const value = String(searchParams.get('value') ?? '').trim();
+  const tokenPage = getGeneratedTokenPage(pageId || generatedTokenPages()[0]?.id || '');
+  const feed = tokenPage?.feed ? getGeneratedFeed(tokenPage.feed) : null;
+  const [state, setState] = useState<TokenState>({ token: '', items: [], loading: true, error: null });
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      if (!tokenPage || !value) {
+        setState({ token: '', items: [], loading: false, error: null });
+        return;
+      }
+      try {
+        const runtime = await loadGeneratedUiRuntime();
+        const result = await loadGeneratedTokenFeed(runtime, tokenPage, value);
+        if (cancelled) return;
+        setState({ token: result.token, items: sortGeneratedFeedItemsDesc(result.items), loading: false, error: null });
+      } catch (cause: any) {
+        if (cancelled) return;
+        setState({ token: '', items: [], loading: false, error: String(cause?.message ?? cause) });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [tokenPage, value]);
+
+  return (
+    <div className="pageStack">
+      <section className="card heroPanel">
+        <div className="heroSplit">
+          <div>
+            <div className="heroTopline">
+              <span className="eyebrow">/generated/token-page</span>
+              <div className="chipRow">
+                <span className="badge">{state.token ? `#${state.token}` : 'no token selected'}</span>
+                <span className="badge">tokenized index read</span>
+              </div>
+            </div>
+            <h2 className="displayTitle">
+              {tokenPage?.title || 'Token feed'}
+              <br />
+              <span>{state.token ? `#${state.token}` : 'resolved from generated config'}</span>
+            </h2>
+            <div className="actionGroup">
+              <Link className="btn" href="/">Back to home</Link>
+              <Link className="btn primary" href={`/${feed?.collection || 'Post'}/?mode=new`}>Create record</Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {!value ? (
+        <section className="card">
+          <div className="eyebrow">/token/missing</div>
+          <h3>No token selected</h3>
+          <p className="muted">Open a generated token link or use a route like <span className="badge">/tag?page={pageId || tokenPage?.id || 'hashtags'}&value=tokenhost</span>.</p>
+        </section>
+      ) : state.loading ? (
+        <section className="card">
+          <div className="eyebrow">/token/loading</div>
+          <p className="muted">Loading token feed…</p>
+        </section>
+      ) : state.error ? (
+        <section className="card">
+          <div className="eyebrow">/token/error</div>
+          <p className="muted">{state.error}</p>
+        </section>
+      ) : feed ? (
+        <GeneratedFeedStream
+          feed={feed}
+          items={state.items}
+          emptyTitle={tokenPage?.emptyTitle || `No records found for #${state.token || value}`}
+          emptyBody={tokenPage?.emptyBody || 'Create a record with that token and reload the feed.'}
+          tokenPageId={tokenPage?.id}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/templates/next-export-ui/src/components/HomeOnlyLivingGrid.tsx b/packages/templates/next-export-ui/src/components/HomeOnlyLivingGrid.tsx
new file mode 100644
index 0000000..6db8e85
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/HomeOnlyLivingGrid.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+
+import LivingGrid from './LivingGrid';
+
+export default function HomeOnlyLivingGrid() {
+  const pathname = usePathname();
+
+  if (pathname && pathname !== '/') {
+    return null;
+  }
+
+  return <LivingGrid />;
+}
diff --git a/packages/templates/next-export-ui/src/components/ImageFieldInput.tsx b/packages/templates/next-export-ui/src/components/ImageFieldInput.tsx
index 5c3e2e3..346538d 100644
--- a/packages/templates/next-export-ui/src/components/ImageFieldInput.tsx
+++ b/packages/templates/next-export-ui/src/components/ImageFieldInput.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
-import { getUploadConfig, uploadFile } from '../lib/upload';
+import { getUploadConfig, uploadFile, type UploadStateUpdate } from '../lib/upload';
 
 export default function ImageFieldInput(props: {
   manifest: any | null;
@@ -18,7 +18,9 @@ export default function ImageFieldInput(props: {
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const [status, setStatus] = useState<string | null>(null);
+  const [phase, setPhase] = useState<UploadStateUpdate['phase']>('requesting');
   const [localPreviewUrl, setLocalPreviewUrl] = useState<string | null>(null);
+  const [lastSelectedFile, setLastSelectedFile] = useState<File | null>(null);
   const previewUrl = localPreviewUrl || value || '';
 
   useEffect(() => {
@@ -28,6 +30,7 @@ export default function ImageFieldInput(props: {
   }, [localPreviewUrl]);
 
   async function handleFile(file: File) {
+    setLastSelectedFile(file);
     setError(null);
     setStatus(null);
     setProgress(0);
@@ -42,13 +45,23 @@ export default function ImageFieldInput(props: {
     setLocalPreviewUrl(objectUrl);
     setBusy(true);
     onBusyChange?.(true);
+    setPhase('requesting');
     setStatus(`Uploading via ${config.runnerMode}…`);
 
     try {
       const uploaded = await uploadFile({
         manifest,
         file,
-        onProgress: setProgress
+        onProgress: setProgress,
+        onStateChange: (next) => {
+          setPhase(next.phase);
+          setProgress(next.progress);
+          setStatus(
+            next.elapsedMs && next.phase === 'processing'
+              ? `${next.message} ${Math.max(1, Math.round(next.elapsedMs / 1000))}s elapsed.`
+              : next.message
+          );
+        }
       });
       onChange(uploaded.url);
       setStatus(uploaded.cid ? `Uploaded (${uploaded.cid.slice(0, 12)}…).` : 'Uploaded.');
@@ -88,6 +101,16 @@ export default function ImageFieldInput(props: {
         >
           Remove
         </button>
+        <button
+          type="button"
+          className="btn"
+          disabled={Boolean(disabled || busy || !lastSelectedFile)}
+          onClick={() => {
+            if (lastSelectedFile) void handleFile(lastSelectedFile);
+          }}
+        >
+          Retry
+        </button>
       </div>
 
       <input
@@ -116,6 +139,15 @@ export default function ImageFieldInput(props: {
         placeholder={config ? 'Uploaded image URL/CID appears here' : 'image URL or CID'}
       />
 
+      {config ? (
+        <div className="muted" style={{ marginTop: 8 }}>
+          {busy
+            ? phase === 'processing' || phase === 'accepted'
+              ? `Long-running upload: Token Host is finalizing this media item via ${config.provider || config.runnerMode}.`
+              : `Upload in progress via ${config.provider || config.runnerMode}.`
+            : `Uploads run via ${config.provider || config.runnerMode}.`}
+        </div>
+      ) : null}
       {status ? <div className="muted" style={{ marginTop: 8 }}>{status}</div> : null}
       {error ? <div className="pre" style={{ marginTop: 8 }}>{error}</div> : null}
     </div>
diff --git a/packages/templates/next-export-ui/src/components/RecordCard.tsx b/packages/templates/next-export-ui/src/components/RecordCard.tsx
index 36c4754..e2ef8b1 100644
--- a/packages/templates/next-export-ui/src/components/RecordCard.tsx
+++ b/packages/templates/next-export-ui/src/components/RecordCard.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link';
 
 import type { ThsCollection, ThsField } from '../lib/ths';
-import { displayField, fieldLinkUi } from '../lib/ths';
+import { displayField, fieldDisplayName, fieldLinkUi } from '../lib/ths';
 import { formatFieldValue, shortAddress } from '../lib/format';
+import ResolvedReferenceValue from './ResolvedReferenceValue';
 
 function getValue(record: any, key: string, fallbackIndex?: number): any {
   if (record && typeof record === 'object' && key in record) {
@@ -21,8 +22,14 @@ function fieldIndex(collection: ThsCollection, field: ThsField): number {
   return 9 + Math.max(0, idx);
 }
 
-export default function RecordCard(props: { collection: ThsCollection; record: any }) {
-  const { collection, record } = props;
+export default function RecordCard(props: {
+  collection: ThsCollection;
+  record: any;
+  abi?: any[] | null;
+  publicClient?: any | null;
+  address?: `0x${string}`;
+}) {
+  const { collection, record, abi = null, publicClient = null, address } = props;
   const id = getValue(record, 'id', 0);
   const owner = getValue(record, 'owner', 3);
   const createdBy = getValue(record, 'createdBy', 2);
@@ -44,11 +51,12 @@ export default function RecordCard(props: { collection: ThsCollection; record: a
       return {
         name: field.name,
         type: field.type,
+        raw,
         value: formatFieldValue(raw, field.type, (field as any).decimals, field.name)
       };
     })
     .filter(Boolean)
-    .slice(0, 3) as Array<{ name: string; type: string; value: string }>;
+    .slice(0, 3) as Array<{ name: string; type: string; raw: unknown; value: string }>;
 
   return (
     <div className="card recordCard">
@@ -74,11 +82,23 @@ export default function RecordCard(props: { collection: ThsCollection; record: a
         <div className="recordPreviewGrid">
           {previewFields.map((field) => (
             <div key={field.name} className="recordPreviewCell">
-              <div className="recordPreviewLabel">{field.name}</div>
+              <div className="recordPreviewLabel">
+                {fieldDisplayName(collection.fields.find((candidate) => candidate.name === field.name) ?? { name: field.name, type: 'string' })}
+              </div>
               <div className="recordPreviewValue">
                 {field.type === 'image' ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img src={field.value} alt={field.name} style={{ maxWidth: 160, borderRadius: 10, border: '1px solid var(--border)' }} />
+                ) : field.type === 'reference' ? (
+                  <ResolvedReferenceValue
+                    collection={collection}
+                    field={collection.fields.find((candidate) => candidate.name === field.name) ?? { name: field.name, type: 'reference' }}
+                    value={field.raw}
+                    abi={abi}
+                    publicClient={publicClient}
+                    address={address}
+                    fallback={field.value}
+                  />
                 ) : (
                   field.value
                 )}
diff --git a/packages/templates/next-export-ui/src/components/ReferenceFieldInput.tsx b/packages/templates/next-export-ui/src/components/ReferenceFieldInput.tsx
new file mode 100644
index 0000000..e24edaf
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/ReferenceFieldInput.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+
+import { recordSummary, useOwnedReferenceOptions } from '../lib/relations';
+import { type ThsCollection, type ThsField } from '../lib/ths';
+
+export default function ReferenceFieldInput(props: {
+  manifest: any;
+  publicClient: any;
+  abi: any[];
+  address: `0x${string}`;
+  collection: ThsCollection;
+  field: ThsField;
+  value: string;
+  disabled?: boolean;
+  onChange: (next: string) => void;
+}) {
+  const { manifest, publicClient, abi, address, collection, field, value, disabled, onChange } = props;
+  const { account, loading, error, options, mustOwn, relatedCollection, ownedOptions, selectedOption } = useOwnedReferenceOptions({
+    manifest,
+    publicClient,
+    abi,
+    address,
+    collectionName: collection.name,
+    fieldName: field.name,
+    value,
+    onChange
+  });
+
+  const resolvedValue = value.trim();
+  const hasResolvedValue = resolvedValue !== '' && options.some((option) => String(option.id) === resolvedValue);
+  const selectedSummary = selectedOption ? recordSummary(selectedOption.record) : null;
+  const singleOwnedOption = mustOwn && ownedOptions.length === 1 ? ownedOptions[0] : null;
+  const compactLockedSelection = Boolean(
+    singleOwnedOption && selectedOption && String(selectedOption.id) === String(singleOwnedOption.id)
+  );
+
+  if (!relatedCollection) {
+    return (
+      <input
+        className="input"
+        type="number"
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="record id (uint256)"
+      />
+    );
+  }
+
+  return (
+    <>
+      {compactLockedSelection ? (
+        <div className="referenceIdentityShell">
+          <div className="referenceIdentityMeta">
+            <span className="referenceIdentityLabel">Posting as</span>
+            <span className="badge">wallet-owned</span>
+          </div>
+          <div className="referenceIdentityRow">
+            <strong className="referenceIdentityTitle">{selectedSummary?.title ?? `${relatedCollection.name} #${String(selectedOption?.id ?? '')}`}</strong>
+            {selectedSummary?.subtitle ? <span className="referenceIdentitySubtitle">{selectedSummary.subtitle}</span> : null}
+          </div>
+        </div>
+      ) : (
+        <select
+          className={`select ${mustOwn ? 'selectMinor' : ''}`}
+          value={hasResolvedValue ? resolvedValue : ''}
+          disabled={disabled || loading || options.length === 0}
+          onChange={(event) => onChange(event.target.value)}
+        >
+          <option value="">
+            {loading ? `Loading ${relatedCollection.name}…` : options.length > 0 ? `Select ${relatedCollection.name}` : `No ${relatedCollection.name} records found`}
+          </option>
+          {options.map((option) => (
+            <option key={String(option.id)} value={String(option.id)}>
+              {option.label}{option.owned ? ' · owned by connected wallet' : ''}
+            </option>
+          ))}
+        </select>
+      )}
+      {selectedSummary && !compactLockedSelection ? (
+        <div className={`recordPreviewCell ${mustOwn ? 'recordPreviewCellCompact' : ''}`} style={{ minHeight: mustOwn ? 0 : 110 }}>
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div className="chipRow">
+              <span className="badge">{relatedCollection.name} #{String(selectedOption?.id ?? '')}</span>
+              {selectedSummary.subtitle ? <span className="badge">{selectedSummary.subtitle}</span> : null}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              {selectedSummary.imageUrl && !mustOwn ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={selectedSummary.imageUrl}
+                  alt={selectedSummary.title}
+                  style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--border)' }}
+                />
+              ) : null}
+              <div style={{ display: 'grid', gap: 6 }}>
+                <strong>{selectedSummary.title}</strong>
+                {!mustOwn && selectedSummary.body ? <span className="muted">{selectedSummary.body}</span> : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+      {!mustOwn ? (
+        <input
+          className="input"
+          type="number"
+          value={value}
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={`${relatedCollection.name} record id`}
+        />
+      ) : null}
+      <div className="muted">
+        {error
+          ? `Could not load ${relatedCollection.name} records automatically.${mustOwn ? '' : ' You can still enter a record id manually.'} ${error}`
+          : options.length > 0
+            ? ownedOptions.length > 0
+              ? mustOwn
+                ? compactLockedSelection
+                  ? `Using your wallet-owned ${relatedCollection.name} for this record.`
+                  : `Choose a ${relatedCollection.name} owned by the connected wallet.`
+                : `Showing ${relatedCollection.name} labels instead of a raw foreign-key entry. Owned records appear first and your last choice is remembered${account ? ` for ${account.slice(0, 6)}…` : ''}.`
+              : `Showing ${relatedCollection.name} labels instead of a raw foreign-key entry.`
+            : mustOwn
+              ? account
+                ? `Create a ${relatedCollection.name} owned by the connected wallet before selecting it here.`
+                : `Connect a wallet to create or select an owned ${relatedCollection.name}.`
+              : `Create a ${relatedCollection.name} record first, or enter a record id manually.`}
+      </div>
+      {!loading && options.length === 0 ? (
+        <div className="actionGroup">
+          <Link className="btn" href={`/${relatedCollection.name}/?mode=new`}>Create {relatedCollection.name}</Link>
+          {!mustOwn ? <Link className="btn" href={`/${relatedCollection.name}/`}>Browse {relatedCollection.name}</Link> : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/templates/next-export-ui/src/components/ResolvedReferenceValue.tsx b/packages/templates/next-export-ui/src/components/ResolvedReferenceValue.tsx
new file mode 100644
index 0000000..37885e4
--- /dev/null
+++ b/packages/templates/next-export-ui/src/components/ResolvedReferenceValue.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+
+import { assertAbiFunction, fnGet } from '../lib/app';
+import { formatFieldValue } from '../lib/format';
+import { displayField, getRelatedCollection, type ThsCollection, type ThsField } from '../lib/ths';
+
+function getRecordValue(record: any, key: string, fallbackIndex?: number): any {
+  if (record && typeof record === 'object' && key in record) {
+    return (record as any)[key];
+  }
+  if (Array.isArray(record) && typeof fallbackIndex === 'number') {
+    return record[fallbackIndex];
+  }
+  return undefined;
+}
+
+function fieldIndex(collection: ThsCollection, field: ThsField): number {
+  const idx = (collection.fields as any[]).findIndex((candidate) => candidate && candidate.name === field.name);
+  return 9 + Math.max(0, idx);
+}
+
+function recordLabel(collection: ThsCollection, id: bigint, record: any): string {
+  const display = displayField(collection);
+  if (!display) return `${collection.name} #${String(id)}`;
+  const raw = getRecordValue(record, display.name, fieldIndex(collection, display));
+  const rendered = formatFieldValue(raw, display.type, display.decimals, display.name).trim();
+  if (!rendered) return `${collection.name} #${String(id)}`;
+  return rendered;
+}
+
+export default function ResolvedReferenceValue(props: {
+  collection: ThsCollection;
+  field: ThsField;
+  value: unknown;
+  abi: any[] | null;
+  publicClient: any | null;
+  address: `0x${string}` | undefined;
+  fallback?: string;
+}) {
+  const { collection, field, value, abi, publicClient, address, fallback } = props;
+  const relatedCollection = useMemo(() => getRelatedCollection(collection, field.name), [collection, field.name]);
+  const [label, setLabel] = useState<string | null>(null);
+
+  const id = useMemo(() => {
+    if (value === null || value === undefined || value === '') return null;
+    try {
+      return typeof value === 'bigint' ? value : BigInt(String(value));
+    } catch {
+      return null;
+    }
+  }, [value]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadLabel() {
+      if (!relatedCollection || !abi || !publicClient || !address || id === null) {
+        setLabel(null);
+        return;
+      }
+
+      try {
+        assertAbiFunction(abi, fnGet(relatedCollection.name), relatedCollection.name);
+        const record = await publicClient.readContract({
+          address,
+          abi,
+          functionName: fnGet(relatedCollection.name),
+          args: [id]
+        });
+        if (cancelled) return;
+        setLabel(recordLabel(relatedCollection, id, record));
+      } catch {
+        if (!cancelled) setLabel(null);
+      }
+    }
+
+    void loadLabel();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [abi, address, id, publicClient, relatedCollection]);
+
+  const renderedFallback = fallback && fallback.trim() ? fallback : id === null ? '—' : `#${String(id)}`;
+  if (!relatedCollection || id === null) {
+    return <span className="badge">{renderedFallback}</span>;
+  }
+
+  return (
+    <Link className="btn" href={`/${relatedCollection.name}/?mode=view&id=${String(id)}`}>
+      {label ? `${label} (#${String(id)})` : `${relatedCollection.name} ${renderedFallback}`}
+    </Link>
+  );
+}
diff --git a/packages/templates/next-export-ui/src/lib/account.ts b/packages/templates/next-export-ui/src/lib/account.ts
new file mode 100644
index 0000000..eb9f1a4
--- /dev/null
+++ b/packages/templates/next-export-ui/src/lib/account.ts
@@ -0,0 +1,59 @@
+'use client';
+
+const ACCOUNT_STORAGE_KEY = 'TH_ACCOUNT';
+const ACCOUNT_EVENT_NAME = 'tokenhost:account-changed';
+
+function currentWindow(): Window | null {
+  return typeof window === 'undefined' ? null : window;
+}
+
+export function getStoredAccount(): string | null {
+  const win = currentWindow();
+  if (!win) return null;
+  try {
+    return win.localStorage.getItem(ACCOUNT_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+export function setStoredAccount(account: string | null): void {
+  const win = currentWindow();
+  if (!win) return;
+  try {
+    if (account) {
+      win.localStorage.setItem(ACCOUNT_STORAGE_KEY, account);
+    } else {
+      win.localStorage.removeItem(ACCOUNT_STORAGE_KEY);
+    }
+  } catch {
+    // ignore
+  }
+  try {
+    win.dispatchEvent(new CustomEvent(ACCOUNT_EVENT_NAME, { detail: { account } }));
+  } catch {
+    // ignore
+  }
+}
+
+export function subscribeStoredAccount(callback: (account: string | null) => void): () => void {
+  const win = currentWindow();
+  if (!win) return () => {};
+
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key && event.key !== ACCOUNT_STORAGE_KEY) return;
+    callback(getStoredAccount());
+  };
+
+  const handleCustom = (event: Event) => {
+    const detail = (event as CustomEvent<{ account?: string | null }>).detail;
+    callback(detail?.account ?? getStoredAccount());
+  };
+
+  win.addEventListener('storage', handleStorage);
+  win.addEventListener(ACCOUNT_EVENT_NAME, handleCustom as EventListener);
+  return () => {
+    win.removeEventListener('storage', handleStorage);
+    win.removeEventListener(ACCOUNT_EVENT_NAME, handleCustom as EventListener);
+  };
+}
diff --git a/packages/templates/next-export-ui/src/lib/app.ts b/packages/templates/next-export-ui/src/lib/app.ts
index adef1ac..3d09de3 100644
--- a/packages/templates/next-export-ui/src/lib/app.ts
+++ b/packages/templates/next-export-ui/src/lib/app.ts
@@ -14,6 +14,10 @@ export function fnListIds(collectionName: string): string {
   return `listIds${collectionName}`;
 }
 
+export function fnGetCount(collectionName: string): string {
+  return `getCount${collectionName}`;
+}
+
 export function fnGet(collectionName: string): string {
   // viem expects the function name (not full signature) and resolves overloads from args.
   return `get${collectionName}`;
@@ -23,6 +27,10 @@ export function fnListByIndex(collectionName: string, fieldName: string): string
   return `listByIndex${collectionName}_${fieldName}`;
 }
 
+export function fnListOwnedIds(collectionName: string): string {
+  return `listOwnedIds${collectionName}`;
+}
+
 export function fnCreate(collectionName: string): string {
   return `create${collectionName}`;
 }
@@ -202,6 +210,23 @@ export async function listRecords(args: {
   return { ids, records };
 }
 
+export async function countRecords(args: {
+  publicClient: any;
+  abi: any[];
+  address: `0x${string}`;
+  collectionName: string;
+  includeDeleted?: boolean;
+}): Promise<bigint> {
+  assertAbiFunction(args.abi, fnGetCount(args.collectionName), args.collectionName);
+
+  return (await args.publicClient.readContract({
+    address: args.address,
+    abi: args.abi,
+    functionName: fnGetCount(args.collectionName),
+    args: [Boolean(args.includeDeleted)]
+  })) as bigint;
+}
+
 export async function listRecordsByIndex(args: {
   publicClient: any;
   abi: any[];
@@ -236,3 +261,37 @@ export async function listRecordsByIndex(args: {
 
   return { ids, records };
 }
+
+export async function listOwnedRecordsPage(args: {
+  publicClient: any;
+  abi: any[];
+  address: `0x${string}`;
+  collectionName: string;
+  owner: `0x${string}`;
+  offset: bigint;
+  limit: number;
+  includeDeleted?: boolean;
+}): Promise<{ ids: bigint[]; records: any[] }> {
+  assertAbiFunction(args.abi, fnListOwnedIds(args.collectionName), args.collectionName);
+  assertAbiFunction(args.abi, fnGet(args.collectionName), args.collectionName);
+
+  const ids = (await args.publicClient.readContract({
+    address: args.address,
+    abi: args.abi,
+    functionName: fnListOwnedIds(args.collectionName),
+    args: [args.owner, args.offset, BigInt(args.limit), Boolean(args.includeDeleted)]
+  })) as bigint[];
+
+  if (!ids || ids.length === 0) return { ids: [], records: [] };
+
+  const records = await readRecordsByIds({
+    publicClient: args.publicClient,
+    abi: args.abi,
+    address: args.address,
+    collectionName: args.collectionName,
+    ids,
+    includeDeleted: args.includeDeleted
+  });
+
+  return { ids, records };
+}
diff --git a/packages/templates/next-export-ui/src/lib/generated-ui.ts b/packages/templates/next-export-ui/src/lib/generated-ui.ts
new file mode 100644
index 0000000..22db7b3
--- /dev/null
+++ b/packages/templates/next-export-ui/src/lib/generated-ui.ts
@@ -0,0 +1,138 @@
+'use client';
+
+import { extractHashtagTokens } from './indexing';
+import { resolveReferenceRecords, recordSummary } from './relations';
+import { listAllRecords, listHashtagRecords, loadAppRuntime, type AppRuntime } from './runtime';
+import { ths } from './ths';
+
+export type GeneratedFeedConfig = NonNullable<NonNullable<typeof ths.app.ui>['generated']>['feeds'] extends Array<infer T> ? T : never;
+export type GeneratedTokenPageConfig = NonNullable<NonNullable<typeof ths.app.ui>['generated']>['tokenPages'] extends Array<infer T> ? T : never;
+export type GeneratedHomeSection = NonNullable<NonNullable<typeof ths.app.ui>['generated']>['homeSections'] extends Array<infer T> ? T : never;
+
+export type GeneratedFeedItem = {
+  id: bigint;
+  record: any;
+  referenceId: bigint | null;
+  referenceRecord: any | null;
+};
+
+export function generatedFeeds(): GeneratedFeedConfig[] {
+  return Array.isArray(ths.app.ui?.generated?.feeds) ? ths.app.ui.generated.feeds : [];
+}
+
+export function generatedTokenPages(): GeneratedTokenPageConfig[] {
+  return Array.isArray(ths.app.ui?.generated?.tokenPages) ? ths.app.ui.generated.tokenPages : [];
+}
+
+export function generatedHomeSections(): GeneratedHomeSection[] {
+  return Array.isArray(ths.app.ui?.generated?.homeSections) ? ths.app.ui.generated.homeSections : [];
+}
+
+export function getGeneratedFeed(id: string): GeneratedFeedConfig | null {
+  return generatedFeeds().find((feed) => feed.id === id) ?? null;
+}
+
+export function getGeneratedTokenPage(id: string): GeneratedTokenPageConfig | null {
+  return generatedTokenPages().find((page) => page.id === id) ?? null;
+}
+
+export async function loadGeneratedFeed(runtime: AppRuntime, feed: GeneratedFeedConfig): Promise<GeneratedFeedItem[]> {
+  const page = await listAllRecords({
+    manifest: runtime.manifest,
+    publicClient: runtime.publicClient,
+    abi: runtime.abi,
+    address: runtime.appAddress,
+    collectionName: feed.collection,
+    pageSize: feed.limit ?? 25
+  });
+
+  const baseItems = page.ids.map((id, index) => ({ id, record: page.records[index] }));
+  const referenceField = feed.card?.referenceField;
+  if (!referenceField) {
+    return baseItems.map((item) => ({ ...item, referenceId: null, referenceRecord: null }));
+  }
+
+  const collection = ths.collections.find((candidate) => candidate.name === feed.collection);
+  const relation = collection?.relations?.find((entry) => entry.field === referenceField);
+  if (!relation?.to) {
+    return baseItems.map((item) => ({ ...item, referenceId: null, referenceRecord: null }));
+  }
+
+  return resolveReferenceRecords(runtime, baseItems, {
+    fieldName: referenceField,
+    targetCollectionName: relation.to
+  });
+}
+
+export async function loadGeneratedTokenFeed(runtime: AppRuntime, tokenPage: GeneratedTokenPageConfig, value: string): Promise<{ token: string; items: GeneratedFeedItem[] }> {
+  const feed = tokenPage.feed ? getGeneratedFeed(tokenPage.feed) : null;
+  const page = await listHashtagRecords({
+    manifest: runtime.manifest,
+    publicClient: runtime.publicClient,
+    abi: runtime.abi,
+    address: runtime.appAddress,
+    collectionName: tokenPage.collection,
+    fieldName: tokenPage.field,
+    hashtag: value,
+    pageSize: tokenPage.limit ?? feed?.limit ?? 25
+  });
+
+  const baseItems = page.ids.map((id, index) => ({ id, record: page.records[index] }));
+  if (!feed?.card?.referenceField) {
+    return {
+      token: page.hashtag,
+      items: baseItems.map((item) => ({ ...item, referenceId: null, referenceRecord: null }))
+    };
+  }
+
+  const collection = ths.collections.find((candidate) => candidate.name === tokenPage.collection);
+  const relation = collection?.relations?.find((entry) => entry.field === feed.card?.referenceField);
+  if (!relation?.to) {
+    return {
+      token: page.hashtag,
+      items: baseItems.map((item) => ({ ...item, referenceId: null, referenceRecord: null }))
+    };
+  }
+
+  return {
+    token: page.hashtag,
+    items: await resolveReferenceRecords(runtime, baseItems, {
+      fieldName: feed.card.referenceField,
+      targetCollectionName: relation.to
+    })
+  };
+}
+
+export function sortGeneratedFeedItemsDesc(items: GeneratedFeedItem[]): GeneratedFeedItem[] {
+  return [...items].sort((a, b) => (a.id === b.id ? 0 : a.id < b.id ? 1 : -1));
+}
+
+export function collectGeneratedTrendingTokens(items: GeneratedFeedItem[], textField: string, limit = 8): Array<{ token: string; count: number }> {
+  const counts = new Map<string, number>();
+  for (const item of items) {
+    for (const token of extractHashtagTokens(String(item.record?.[textField] ?? ''))) {
+      counts.set(token, (counts.get(token) ?? 0) + 1);
+    }
+  }
+  return Array.from(counts.entries())
+    .sort((a, b) => (b[1] !== a[1] ? b[1] - a[1] : a[0].localeCompare(b[0])))
+    .slice(0, limit)
+    .map(([token, count]) => ({ token, count }));
+}
+
+export function feedCardSummary(item: GeneratedFeedItem, feed: GeneratedFeedConfig) {
+  const referenceSummary = item.referenceRecord ? recordSummary(item.referenceRecord) : null;
+  const textField = feed.card?.textField ?? 'body';
+  const mediaField = feed.card?.mediaField ?? 'image';
+  return {
+    title: referenceSummary?.title ?? `Record #${String(item.id)}`,
+    subtitle: referenceSummary?.subtitle ?? null,
+    body: String(item.record?.[textField] ?? '').trim(),
+    mediaUrl: String(item.record?.[mediaField] ?? '').trim() || null,
+    imageUrl: referenceSummary?.imageUrl ?? null
+  };
+}
+
+export async function loadGeneratedUiRuntime(): Promise<AppRuntime> {
+  return loadAppRuntime();
+}
diff --git a/packages/templates/next-export-ui/src/lib/relations.ts b/packages/templates/next-export-ui/src/lib/relations.ts
new file mode 100644
index 0000000..63023aa
--- /dev/null
+++ b/packages/templates/next-export-ui/src/lib/relations.ts
@@ -0,0 +1,438 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { getStoredAccount, subscribeStoredAccount } from './account';
+import { countRecords, readRecordsByIds } from './app';
+import { displayField, getCollection } from './ths';
+import { formatFieldValue } from './format';
+import { listAllRecords, listOwnedRecords as listOwnedRuntimeRecords } from './runtime';
+
+type RelationRuntime = {
+  manifest: any;
+  publicClient: any;
+  abi: any[];
+  appAddress: `0x${string}`;
+};
+
+export type OwnedRecord = {
+  id: bigint;
+  record: any;
+};
+
+export type ResolvedReferenceItem = {
+  id: bigint;
+  record: any;
+  referenceId: bigint | null;
+  referenceRecord: any | null;
+};
+
+export type ReferenceOption = {
+  id: bigint;
+  label: string;
+  owned: boolean;
+  record: any;
+};
+
+export type ReferenceCreationGate = {
+  fieldName: string;
+  relatedCollection: ReturnType<typeof getCollection>;
+  count: number;
+  loading: boolean;
+  error: string | null;
+  mustOwn: boolean;
+  missingWallet: boolean;
+};
+
+export function getRecordId(value: unknown): bigint | null {
+  if (typeof value === 'bigint') return value;
+  if (typeof value === 'number' && Number.isInteger(value)) return BigInt(value);
+  if (typeof value === 'string' && value.trim()) {
+    try {
+      return BigInt(value);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+export function recordOwner(record: any): string {
+  return String(record?.owner ?? '').trim().toLowerCase();
+}
+
+export function relatedRecordLabel(collectionName: string, id: bigint, record: any): string {
+  const collection = getCollection(collectionName);
+  if (!collection) return `${collectionName} #${String(id)}`;
+
+  const field = displayField(collection);
+  if (!field) return `${collection.name} #${String(id)}`;
+
+  const raw = record?.[field.name];
+  const rendered = formatFieldValue(raw, field.type, field.decimals, field.name).trim();
+  if (!rendered) return `${collection.name} #${String(id)}`;
+  return `${rendered} (#${String(id)})`;
+}
+
+export function recordSummary(record: any): { title: string; subtitle: string | null; imageUrl: string | null; body: string | null } {
+  const title =
+    String(record?.displayName ?? '').trim() ||
+    String(record?.title ?? '').trim() ||
+    String(record?.name ?? '').trim() ||
+    String(record?.handle ?? '').trim() ||
+    'Unnamed record';
+
+  const subtitle = String(record?.handle ?? '').trim()
+    ? `@${String(record.handle).trim()}`
+    : String(record?.slug ?? '').trim() || null;
+
+  const imageUrl = String(record?.avatar ?? '').trim() || String(record?.image ?? '').trim() || null;
+  const body = String(record?.bio ?? '').trim() || String(record?.description ?? '').trim() || null;
+
+  return { title, subtitle, imageUrl, body };
+}
+
+export async function listOwnedRecords(runtime: RelationRuntime, collectionName: string, ownerAddress: string): Promise<OwnedRecord[]> {
+  const page = await listOwnedRuntimeRecords({
+    manifest: runtime.manifest,
+    publicClient: runtime.publicClient,
+    abi: runtime.abi,
+    address: runtime.appAddress,
+    collectionName,
+    owner: ownerAddress as `0x${string}`
+  });
+
+  return page.ids
+    .map((id, index) => ({ id, record: page.records[index] }))
+    .filter((entry) => Boolean(entry.record));
+}
+
+export async function loadRecordsByIds(runtime: RelationRuntime, collectionName: string, ids: bigint[]): Promise<Map<string, any>> {
+  const uniqueIds = Array.from(new Set(ids.map((id) => String(id)))).map((id) => BigInt(id));
+  if (!uniqueIds.length) return new Map();
+
+  const records = await readRecordsByIds({
+    publicClient: runtime.publicClient,
+    abi: runtime.abi,
+    address: runtime.appAddress,
+    collectionName,
+    ids: uniqueIds
+  });
+
+  const out = new Map<string, any>();
+  uniqueIds.forEach((id, index) => {
+    out.set(String(id), records[index] ?? null);
+  });
+  return out;
+}
+
+export async function resolveReferenceRecords(
+  runtime: RelationRuntime,
+  items: Array<{ id: bigint; record: any }>,
+  options: { fieldName: string; targetCollectionName: string }
+): Promise<ResolvedReferenceItem[]> {
+  const referenceIds = items
+    .map((item) => getRecordId(item.record?.[options.fieldName]))
+    .filter((value): value is bigint => value !== null);
+
+  const recordsById = await loadRecordsByIds(runtime, options.targetCollectionName, referenceIds);
+
+  return items.map((item) => {
+    const referenceId = getRecordId(item.record?.[options.fieldName]);
+    return {
+      ...item,
+      referenceId,
+      referenceRecord: referenceId ? recordsById.get(String(referenceId)) ?? null : null
+    };
+  });
+}
+
+function selectionStorageKey(args: { collectionName: string; fieldName: string; account: string }) {
+  return `TH_REFERENCE_SELECTION:${args.collectionName}:${args.fieldName}:${args.account.toLowerCase()}`;
+}
+
+export function useOwnedReferenceOptions(args: {
+  manifest: any;
+  publicClient: any;
+  abi: any[];
+  address: `0x${string}`;
+  collectionName: string;
+  fieldName: string;
+  value: string;
+  onChange: (next: string) => void;
+}) {
+  const [account, setAccount] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [options, setOptions] = useState<ReferenceOption[]>([]);
+  const onChangeRef = useRef(args.onChange);
+
+  onChangeRef.current = args.onChange;
+
+  const collection = useMemo(() => getCollection(args.collectionName), [args.collectionName]);
+  const relation = useMemo(
+    () => (collection?.relations ?? []).find((entry) => entry.field === args.fieldName) ?? null,
+    [collection, args.fieldName]
+  );
+  const relatedCollection = useMemo(() => (relation?.to ? getCollection(relation.to) : null), [relation]);
+  const mustOwn = Boolean(relation?.mustOwn);
+
+  useEffect(() => {
+    setAccount(getStoredAccount());
+    return subscribeStoredAccount(setAccount);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      if (!relatedCollection || !args.publicClient || !args.abi || !args.address) {
+        setOptions([]);
+        setError(null);
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+      try {
+        const normalizedAccount = account?.trim().toLowerCase() ?? '';
+        const page = mustOwn && normalizedAccount
+          ? await listOwnedRecords(
+              {
+                manifest: args.manifest,
+                publicClient: args.publicClient,
+                abi: args.abi,
+                appAddress: args.address
+              },
+              relatedCollection.name,
+              normalizedAccount
+            )
+          : await listAllRecords({
+              manifest: args.manifest,
+              publicClient: args.publicClient,
+              abi: args.abi,
+              address: args.address,
+              collectionName: relatedCollection.name
+            });
+        const pageItems = Array.isArray(page)
+          ? page
+          : page.ids.map((id, index) => ({ id, record: page.records[index] }));
+
+        const nextOptions = pageItems
+          .map(({ id, record }) => {
+            if (!record) return null;
+            return {
+              id,
+              label: relatedRecordLabel(relatedCollection.name, id, record),
+              owned: Boolean(normalizedAccount) && recordOwner(record) === normalizedAccount,
+              record
+            };
+          })
+          .filter(Boolean) as ReferenceOption[];
+
+        nextOptions.sort((left, right) => {
+          if (left.owned !== right.owned) return left.owned ? -1 : 1;
+          if (left.label !== right.label) return left.label.localeCompare(right.label);
+          return left.id < right.id ? -1 : left.id > right.id ? 1 : 0;
+        });
+
+        const visibleOptions = mustOwn ? nextOptions.filter((option) => option.owned) : nextOptions;
+
+        if (cancelled) return;
+        setOptions(visibleOptions);
+
+        const ownedOptions = visibleOptions.filter((option) => option.owned);
+        if (!args.value && account) {
+          let preferred = '';
+          try {
+            preferred = window.localStorage.getItem(
+              selectionStorageKey({ collectionName: args.collectionName, fieldName: args.fieldName, account })
+            ) ?? '';
+          } catch {
+            preferred = '';
+          }
+          if (preferred && visibleOptions.some((option) => String(option.id) === preferred)) {
+            onChangeRef.current(preferred);
+          } else if (ownedOptions.length === 1) {
+            onChangeRef.current(String(ownedOptions[0]?.id ?? ''));
+          }
+        }
+      } catch (cause: any) {
+        if (cancelled) return;
+        setOptions([]);
+        setError(String(cause?.message ?? cause));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [account, args.abi, args.address, args.collectionName, args.fieldName, args.manifest, args.publicClient, args.value, relatedCollection, mustOwn]);
+
+  useEffect(() => {
+    if (!account || !args.value) return;
+    try {
+      window.localStorage.setItem(
+        selectionStorageKey({ collectionName: args.collectionName, fieldName: args.fieldName, account }),
+        args.value
+      );
+    } catch {
+      // ignore
+    }
+  }, [account, args.collectionName, args.fieldName, args.value]);
+
+  const selectedOption = options.find((option) => String(option.id) === args.value) ?? null;
+
+  return {
+    account,
+    loading,
+    error,
+    options,
+    mustOwn,
+    relatedCollection,
+    ownedOptions: options.filter((option) => option.owned),
+    selectedOption
+  };
+}
+
+export function useRequiredReferenceCreationGates(args: {
+  manifest: any;
+  publicClient: any;
+  abi: any[] | null;
+  address: `0x${string}` | undefined;
+  collection: ReturnType<typeof getCollection> | null;
+  requiredFieldNames: string[];
+}) {
+  const [gates, setGates] = useState<ReferenceCreationGate[]>([]);
+  const [account, setAccount] = useState<string | null>(null);
+
+  const requiredReferenceTargets = useMemo(() => {
+    if (!args.collection) return [];
+    return args.collection.fields
+      .filter((field) => field.type === 'reference' && args.requiredFieldNames.includes(field.name))
+      .map((field) => {
+        const relation = (args.collection?.relations ?? []).find((entry) => entry.field === field.name) ?? null;
+        const relatedCollection = relation?.to ? getCollection(relation.to) : null;
+        if (!relatedCollection) return null;
+        return {
+          fieldName: field.name,
+          relatedCollection,
+          mustOwn: Boolean(relation?.mustOwn)
+        };
+      })
+      .filter(Boolean) as Array<{ fieldName: string; relatedCollection: NonNullable<ReturnType<typeof getCollection>>; mustOwn: boolean }>;
+  }, [args.collection, args.requiredFieldNames]);
+
+  useEffect(() => {
+    setAccount(getStoredAccount());
+    return subscribeStoredAccount(setAccount);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      if (!requiredReferenceTargets.length || !args.publicClient || !args.abi || !args.address) {
+        setGates([]);
+        return;
+      }
+
+      setGates(
+        requiredReferenceTargets.map((entry) => ({
+          fieldName: entry.fieldName,
+          relatedCollection: entry.relatedCollection,
+          count: 0,
+          loading: true,
+          error: null,
+          mustOwn: entry.mustOwn,
+          missingWallet: false
+        }))
+      );
+
+      const next: ReferenceCreationGate[] = [];
+      for (const entry of requiredReferenceTargets) {
+        try {
+          if (entry.mustOwn) {
+            if (!account) {
+              next.push({
+                fieldName: entry.fieldName,
+                relatedCollection: entry.relatedCollection,
+                count: 0,
+                loading: false,
+                error: null,
+                mustOwn: true,
+                missingWallet: true
+              });
+              continue;
+            }
+
+            const owned = await listOwnedRuntimeRecords({
+              manifest: args.manifest,
+              publicClient: args.publicClient,
+              abi: args.abi,
+              address: args.address,
+              collectionName: entry.relatedCollection.name,
+              owner: account as `0x${string}`,
+              maxRecords: 1
+            });
+            next.push({
+              fieldName: entry.fieldName,
+              relatedCollection: entry.relatedCollection,
+              count: owned.ids.length,
+              loading: false,
+              error: null,
+              mustOwn: true,
+              missingWallet: false
+            });
+            continue;
+          }
+
+          const count = await countRecords({
+            publicClient: args.publicClient,
+            abi: args.abi,
+            address: args.address,
+            collectionName: entry.relatedCollection.name,
+            includeDeleted: false
+          });
+          next.push({
+            fieldName: entry.fieldName,
+            relatedCollection: entry.relatedCollection,
+            count: Number(count),
+            loading: false,
+            error: null,
+            mustOwn: false,
+            missingWallet: false
+          });
+        } catch (cause: any) {
+          next.push({
+            fieldName: entry.fieldName,
+            relatedCollection: entry.relatedCollection,
+            count: 0,
+            loading: false,
+            error: String(cause?.message ?? cause),
+            mustOwn: entry.mustOwn,
+            missingWallet: false
+          });
+        }
+      }
+
+      if (!cancelled) setGates(next);
+    }
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [account, args.abi, args.address, args.manifest, args.publicClient, requiredReferenceTargets]);
+
+  return {
+    gates,
+    loading: gates.some((gate) => gate.loading),
+    blockers: gates.filter((gate) => !gate.loading && !gate.error && gate.count === 0)
+  };
+}
diff --git a/packages/templates/next-export-ui/src/lib/runtime.ts b/packages/templates/next-export-ui/src/lib/runtime.ts
index 6575b14..d5cccf6 100644
--- a/packages/templates/next-export-ui/src/lib/runtime.ts
+++ b/packages/templates/next-export-ui/src/lib/runtime.ts
@@ -1,5 +1,5 @@
 import { fetchAppAbi } from './abi';
-import { listRecords, listRecordsByIndex } from './app';
+import { listOwnedRecordsPage, listRecords, listRecordsByIndex } from './app';
 import { extractHashtagTokens, hashtagIndexKey, normalizeHashtagToken } from './indexing';
 import { chainFromId } from './chains';
 import { chainWithRpcOverride, makePublicClient } from './clients';
@@ -87,6 +87,49 @@ export async function listAllRecords(args: {
   return { ids, records };
 }
 
+export async function listOwnedRecords(args: {
+  publicClient: any;
+  abi: any[];
+  address: `0x${string}`;
+  collectionName: string;
+  owner: `0x${string}`;
+  manifest?: any;
+  pageSize?: number;
+  maxRecords?: number;
+  includeDeleted?: boolean;
+}): Promise<{ ids: bigint[]; records: any[] }> {
+  const pageSize = clampListPageSize(args.manifest, args.pageSize);
+  const ids: bigint[] = [];
+  const records: any[] = [];
+  let offset = 0n;
+
+  for (;;) {
+    const remaining = typeof args.maxRecords === 'number' ? Math.max(0, args.maxRecords - ids.length) : pageSize;
+    if (remaining === 0) break;
+    const page = await listOwnedRecordsPage({
+      publicClient: args.publicClient,
+      abi: args.abi,
+      address: args.address,
+      collectionName: args.collectionName,
+      owner: args.owner,
+      offset,
+      limit: Math.min(pageSize, remaining),
+      includeDeleted: args.includeDeleted
+    });
+
+    if (!page.ids.length) break;
+
+    ids.push(...page.ids);
+    records.push(...page.records);
+
+    if (typeof args.maxRecords === 'number' && ids.length >= args.maxRecords) break;
+    if (page.ids.length < pageSize) break;
+    offset += BigInt(page.ids.length);
+  }
+
+  return { ids, records };
+}
+
 export async function listRecordsByFieldValue(args: {
   publicClient: any;
   abi: any[];
diff --git a/packages/templates/next-export-ui/src/lib/ths.ts b/packages/templates/next-export-ui/src/lib/ths.ts
index cc01f95..af602b8 100644
--- a/packages/templates/next-export-ui/src/lib/ths.ts
+++ b/packages/templates/next-export-ui/src/lib/ths.ts
@@ -39,6 +39,14 @@ export interface PaymentRule {
   amountWei: string;
 }
 
+export interface ThsRelation {
+  field: string;
+  to: string;
+  enforce?: boolean;
+  mustOwn?: boolean;
+  reverseIndex?: boolean;
+}
+
 export interface ThsCollection {
   name: string;
   plural?: string;
@@ -60,7 +68,7 @@ export interface ThsCollection {
   transferRules?: {
     access: Access;
   };
-  relations?: Array<Record<string, unknown>>;
+  relations?: ThsRelation[];
   indexes?: Record<string, unknown>;
   ui?: Record<string, unknown>;
 }
@@ -71,6 +79,11 @@ export interface ThsSchema {
   app: {
     name: string;
     slug: string;
+    brand?: {
+      primaryText?: string;
+      accentText?: string;
+    };
+    primaryCollection?: string;
     features?: Record<string, unknown>;
     ui?: {
       homePage?: {
@@ -79,6 +92,53 @@ export interface ThsSchema {
       extensions?: {
         directory?: string;
       };
+      generated?: {
+        feeds?: Array<{
+          id: string;
+          collection: string;
+          limit?: number;
+          card?: {
+            referenceField?: string;
+            textField?: string;
+            mediaField?: string;
+          };
+        }>;
+        tokenPages?: Array<{
+          id: string;
+          collection: string;
+          field: string;
+          tokenizer: 'hashtag';
+          feed?: string;
+          limit?: number;
+          title?: string;
+          emptyTitle?: string;
+          emptyBody?: string;
+        }>;
+        homeSections?: Array<
+          | {
+              type: 'hero';
+              eyebrow?: string;
+              title: string;
+              accent?: string;
+              description?: string;
+              badges?: string[];
+              actions?: Array<{ label: string; href: string; variant?: 'default' | 'primary' }>;
+            }
+          | {
+              type: 'feed';
+              feed: string;
+              title: string;
+              emptyTitle?: string;
+              emptyBody?: string;
+            }
+          | {
+              type: 'tokenList';
+              tokenPage: string;
+              title: string;
+              emptyBody?: string;
+            }
+        >;
+      };
     };
   };
   collections: ThsCollection[];
@@ -91,10 +151,27 @@ export function getCollection(name: string): ThsCollection | null {
   return (ths.collections as any[]).find((c) => c && c.name === name) ?? null;
 }
 
+export function primaryCollection(): ThsCollection | null {
+  const configured = typeof ths.app.primaryCollection === 'string' ? ths.app.primaryCollection.trim() : '';
+  if (configured) return getCollection(configured);
+  return (ths.collections as any[])[0] ?? null;
+}
+
 export function getField(collection: ThsCollection, fieldName: string): ThsField | null {
   return (collection.fields as any[]).find((f) => f && f.name === fieldName) ?? null;
 }
 
+export function getRelationForField(collection: ThsCollection, fieldName: string): ThsRelation | null {
+  const relations = Array.isArray(collection.relations) ? collection.relations : [];
+  return relations.find((relation) => relation && relation.field === fieldName) ?? null;
+}
+
+export function getRelatedCollection(collection: ThsCollection, fieldName: string): ThsCollection | null {
+  const relation = getRelationForField(collection, fieldName);
+  if (!relation?.to) return null;
+  return getCollection(relation.to);
+}
+
 export function displayField(collection: ThsCollection): ThsField | null {
   // Prefer first required field, else first string-like, else first.
   const required = Array.isArray(collection.createRules?.required) ? collection.createRules.required : [];
@@ -138,3 +215,19 @@ export function fieldLinkUi(field: ThsField): { label: string | null; target: '_
     target: field.ui.target === '_self' ? '_self' : '_blank'
   };
 }
+
+export function fieldDisplayName(field: ThsField): string {
+  if (typeof field.ui?.label === 'string' && field.ui.label.trim()) return field.ui.label.trim();
+  return field.name;
+}
+
+export function collectionNavLabel(collection: ThsCollection): string {
+  const explicitPlural = typeof collection.plural === 'string' ? collection.plural.trim() : '';
+  if (explicitPlural) return explicitPlural;
+
+  const name = String(collection.name ?? '').trim();
+  if (!name) return 'Records';
+  if (/(s|x|z|sh|ch)$/i.test(name)) return `${name}es`;
+  if (/[^aeiou]y$/i.test(name)) return `${name.slice(0, -1)}ies`;
+  return `${name}s`;
+}
diff --git a/packages/templates/next-export-ui/src/lib/upload.ts b/packages/templates/next-export-ui/src/lib/upload.ts
index 1b9e716..3326533 100644
--- a/packages/templates/next-export-ui/src/lib/upload.ts
+++ b/packages/templates/next-export-ui/src/lib/upload.ts
@@ -22,6 +22,16 @@ export type UploadConfig = {
   maxBytes: number | null;
 };
 
+export type UploadPhase = 'requesting' | 'accepted' | 'processing' | 'completed' | 'failed';
+
+export type UploadStateUpdate = {
+  phase: UploadPhase;
+  message: string;
+  progress: number;
+  jobId?: string | null;
+  elapsedMs?: number;
+};
+
 type PendingUploadResponse = {
   ok: true;
   pending: true;
@@ -97,6 +107,7 @@ export async function uploadFile(args: {
   manifest: any;
   file: File;
   onProgress?: (percent: number) => void;
+  onStateChange?: (state: UploadStateUpdate) => void;
 }): Promise<UploadResult> {
   const config = getUploadConfig(args.manifest);
   if (!config) throw new Error('Uploads are not enabled for this app.');
@@ -116,14 +127,27 @@ export async function uploadFile(args: {
 
   return await new Promise<UploadResult>((resolve, reject) => {
     let settled = false;
+    const notify = (state: UploadStateUpdate) => {
+      args.onStateChange?.(state);
+    };
     const finishResolve = (value: UploadResult) => {
       if (settled) return;
       settled = true;
+      notify({
+        phase: 'completed',
+        message: value.cid ? `Upload completed (${value.cid.slice(0, 12)}…).` : 'Upload completed.',
+        progress: 100
+      });
       resolve(value);
     };
     const finishReject = (error: Error) => {
       if (settled) return;
       settled = true;
+      notify({
+        phase: 'failed',
+        message: error.message || 'Upload failed.',
+        progress: 100
+      });
       reject(error);
     };
     const xhr = new XMLHttpRequest();
@@ -137,9 +161,21 @@ export async function uploadFile(args: {
       xhr.setRequestHeader('X-TokenHost-Upload-Mode', 'async');
     }
 
+    notify({
+      phase: 'requesting',
+      message: `Uploading ${args.file.name || 'file'} to Token Host…`,
+      progress: 0
+    });
+
     xhr.upload.onprogress = (event) => {
       if (!event.lengthComputable || !args.onProgress) return;
-      args.onProgress(Math.max(0, Math.min(100, Math.round((event.loaded / event.total) * 100))));
+      const percent = Math.max(0, Math.min(100, Math.round((event.loaded / event.total) * 100)));
+      args.onProgress(percent);
+      notify({
+        phase: 'requesting',
+        message: `Uploading ${args.file.name || 'file'} to Token Host…`,
+        progress: percent
+      });
     };
 
     async function pollUploadJob(statusUrl: string): Promise<UploadResult> {
@@ -156,6 +192,13 @@ export async function uploadFile(args: {
         }
         if (body?.pending) {
           args.onProgress?.(100);
+          notify({
+            phase: 'processing',
+            message: `Token Host accepted the upload and is processing it via ${config.runnerMode}. This can take a minute or two.`,
+            progress: 100,
+            jobId: body?.jobId ? String(body.jobId) : null,
+            elapsedMs: Date.now() - startedAt
+          });
           continue;
         }
         if (!body?.ok || !body?.upload?.url) {
@@ -189,6 +232,12 @@ export async function uploadFile(args: {
 
         if (xhr.status === 202 && body?.pending && body?.jobId) {
           const pending = body as PendingUploadResponse;
+          notify({
+            phase: 'accepted',
+            message: `Upload accepted. Token Host is processing it via ${config.runnerMode}.`,
+            progress: 100,
+            jobId: pending.jobId
+          });
           const statusUrl = normalizeUrl(pending.statusUrl || '', `${config.statusUrl}?jobId=${encodeURIComponent(pending.jobId)}`);
           const completed = await pollUploadJob(statusUrl);
           finishResolve(completed);
diff --git a/schemas/tokenhost-ths.schema.json b/schemas/tokenhost-ths.schema.json
index 7a29ddd..ba9a062 100644
--- a/schemas/tokenhost-ths.schema.json
+++ b/schemas/tokenhost-ths.schema.json
@@ -29,6 +29,15 @@
           "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$"
         },
         "description": { "type": "string" },
+        "brand": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "primaryText": { "type": "string", "minLength": 1 },
+            "accentText": { "type": "string", "minLength": 1 }
+          }
+        },
+        "primaryCollection": { "type": "string", "minLength": 1 },
         "theme": {
           "type": "object",
           "description": "Theme preset selection and future theme options.",
@@ -40,6 +49,50 @@
             }
           }
         },
+        "ui": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "homePage": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "mode": {
+                  "type": "string",
+                  "enum": ["generated", "custom"]
+                }
+              }
+            },
+            "extensions": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "directory": {
+                  "type": "string",
+                  "description": "Path to UI override files, resolved relative to the schema file."
+                }
+              }
+            },
+            "generated": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "feeds": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedFeed" }
+                },
+                "tokenPages": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedTokenPage" }
+                },
+                "homeSections": {
+                  "type": "array",
+                  "items": { "$ref": "#/$defs/generatedHomeSection" }
+                }
+              }
+            }
+          }
+        },
         "features": {
           "type": "object",
           "additionalProperties": false,
@@ -130,7 +183,20 @@
         },
         "ui": {
           "type": "object",
-          "additionalProperties": true
+          "additionalProperties": true,
+          "properties": {
+            "component": {
+              "type": "string",
+              "enum": ["default", "externalLink"]
+            },
+            "label": {
+              "type": "string"
+            },
+            "target": {
+              "type": "string",
+              "enum": ["_blank", "_self"]
+            }
+          }
         }
       },
       "allOf": [
@@ -270,8 +336,99 @@
         "field": { "type": "string" },
         "to": { "type": "string" },
         "enforce": { "type": "boolean" },
+        "mustOwn": { "type": "boolean" },
         "reverseIndex": { "type": "boolean" }
       }
+    },
+    "generatedAction": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["label", "href"],
+      "properties": {
+        "label": { "type": "string", "minLength": 1 },
+        "href": { "type": "string", "minLength": 1 },
+        "variant": { "type": "string", "enum": ["default", "primary"] }
+      }
+    },
+    "generatedFeedCard": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "referenceField": { "type": "string" },
+        "textField": { "type": "string" },
+        "mediaField": { "type": "string" }
+      }
+    },
+    "generatedFeed": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "collection"],
+      "properties": {
+        "id": { "type": "string", "pattern": "^[a-z][a-zA-Z0-9_-]*$" },
+        "collection": { "type": "string" },
+        "limit": { "type": "integer", "minimum": 1, "maximum": 100 },
+        "card": { "$ref": "#/$defs/generatedFeedCard" }
+      }
+    },
+    "generatedTokenPage": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "collection", "field", "tokenizer"],
+      "properties": {
+        "id": { "type": "string", "pattern": "^[a-z][a-zA-Z0-9_-]*$" },
+        "collection": { "type": "string" },
+        "field": { "type": "string" },
+        "tokenizer": { "type": "string", "enum": ["hashtag"] },
+        "feed": { "type": "string" },
+        "limit": { "type": "integer", "minimum": 1, "maximum": 100 },
+        "title": { "type": "string" },
+        "emptyTitle": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedHeroSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "title"],
+      "properties": {
+        "type": { "const": "hero" },
+        "eyebrow": { "type": "string" },
+        "title": { "type": "string" },
+        "accent": { "type": "string" },
+        "description": { "type": "string" },
+        "badges": { "type": "array", "items": { "type": "string" } },
+        "actions": { "type": "array", "items": { "$ref": "#/$defs/generatedAction" } }
+      }
+    },
+    "generatedFeedSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "feed", "title"],
+      "properties": {
+        "type": { "const": "feed" },
+        "feed": { "type": "string" },
+        "title": { "type": "string" },
+        "emptyTitle": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedTokenListSection": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["type", "tokenPage", "title"],
+      "properties": {
+        "type": { "const": "tokenList" },
+        "tokenPage": { "type": "string" },
+        "title": { "type": "string" },
+        "emptyBody": { "type": "string" }
+      }
+    },
+    "generatedHomeSection": {
+      "oneOf": [
+        { "$ref": "#/$defs/generatedHeroSection" },
+        { "$ref": "#/$defs/generatedFeedSection" },
+        { "$ref": "#/$defs/generatedTokenListSection" }
+      ]
     }
   }
 }
diff --git a/test/testCliGenerateUi.js b/test/testCliGenerateUi.js
index ea6829e..da85ea8 100644
--- a/test/testCliGenerateUi.js
+++ b/test/testCliGenerateUi.js
@@ -102,6 +102,8 @@ function minimalSchema() {
 function minimalSchemaWithThemePreset() {
   const schema = minimalSchema();
   schema.app.theme = { preset: 'cyber-grid' };
+  schema.app.brand = { primaryText: 'micro', accentText: 'blog' };
+  schema.app.primaryCollection = 'Item';
   return schema;
 }
 
@@ -143,6 +145,44 @@ function schemaWithUiOverrides() {
   };
 }
 
+function schemaWithReferenceRelation() {
+  return {
+    thsVersion: '2025-12',
+    schemaVersion: '0.0.1',
+    app: {
+      name: 'Reference App',
+      slug: 'reference-app',
+      features: { uploads: false, onChainIndexing: true }
+    },
+    collections: [
+      {
+        name: 'Profile',
+        fields: [{ name: 'handle', type: 'string', required: true }],
+        createRules: { required: ['handle'], access: 'public' },
+        visibilityRules: { gets: ['handle'], access: 'public' },
+        updateRules: { mutable: ['handle'], access: 'owner' },
+        deleteRules: { softDelete: true, access: 'owner' },
+        transferRules: { access: 'owner' },
+        indexes: { unique: [{ field: 'handle', scope: 'allTime' }], index: [] }
+      },
+      {
+        name: 'Post',
+        fields: [
+          { name: 'authorProfile', type: 'reference', required: true },
+          { name: 'body', type: 'string', required: true }
+        ],
+        createRules: { required: ['authorProfile', 'body'], access: 'public' },
+        visibilityRules: { gets: ['authorProfile', 'body'], access: 'public' },
+        updateRules: { mutable: ['body'], access: 'owner' },
+        deleteRules: { softDelete: true, access: 'owner' },
+        transferRules: { access: 'owner' },
+        indexes: { unique: [], index: [{ field: 'authorProfile' }] },
+        relations: [{ field: 'authorProfile', to: 'Profile', enforce: true, reverseIndex: true }]
+      }
+    ]
+  };
+}
+
 describe('th generate (UI template)', function () {
   this.timeout(180000);
 
@@ -172,6 +212,9 @@ describe('th generate (UI template)', function () {
     expect(layoutSource).to.include('NetworkStatus');
     expect(layoutSource).to.include('themeBootScript');
     expect(layoutSource).to.not.include('/tokenhost/ops');
+    expect(layoutSource).to.not.include('href=\"/\">Overview</Link>');
+    expect(layoutSource).to.include('Create {primaryModel.name}');
+    expect(layoutSource).to.include('brandPrimary');
 
     const generatedTokens = fs.readFileSync(path.join(outDir, 'ui', 'src', 'theme', 'tokens.json'), 'utf-8');
     expect(generatedTokens).to.equal(readTemplateThemeTokens());
@@ -196,10 +239,14 @@ describe('th generate (UI template)', function () {
 
     const generatedImageField = fs.readFileSync(path.join(outDir, 'ui', 'src', 'components', 'ImageFieldInput.tsx'), 'utf-8');
     expect(generatedImageField).to.include('onBusyChange');
+    expect(generatedImageField).to.include('Long-running upload');
+    expect(generatedImageField).to.include('Retry');
 
     const generatedUpload = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'upload.ts'), 'utf-8');
     expect(generatedUpload).to.include('buildUploadNetworkError');
     expect(generatedUpload).to.include('xhr.timeout = 5 * 60 * 1000;');
+    expect(generatedUpload).to.include("phase: 'accepted'");
+    expect(generatedUpload).to.include('Token Host accepted the upload');
 
     const generatedClients = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'clients.ts'), 'utf-8');
     expect(generatedClients).to.include('async function refreshWalletChainConfig');
@@ -220,9 +267,78 @@ describe('th generate (UI template)', function () {
 
     const generatedThs = fs.readFileSync(path.join(outDir, 'ui', 'src', 'generated', 'ths.ts'), 'utf-8');
     expect(generatedThs).to.include('"preset": "cyber-grid"');
+    expect(generatedThs).to.include('"primaryText": "micro"');
+    expect(generatedThs).to.include('"primaryCollection": "Item"');
 
     const generatedTokens = fs.readFileSync(path.join(outDir, 'ui', 'src', 'theme', 'tokens.json'), 'utf-8');
     expect(generatedTokens).to.equal(readTemplateThemeTokens());
+
+    const generatedThsLib = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'ths.ts'), 'utf-8');
+    expect(generatedThsLib).to.include('export function collectionNavLabel');
+
+    const generatedLayout = fs.readFileSync(path.join(outDir, 'ui', 'app', 'layout.tsx'), 'utf-8');
+    expect(generatedLayout).to.include('collectionNavLabel(collection)');
+    expect(generatedLayout).to.not.include('<a className="navRailLink" href="/.well-known/tokenhost/manifest.json">Manifest</a>');
+  });
+
+  it('upstreams relation metadata into reference-aware generated CRUD UI', function () {
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'th-ui-reference-'));
+    const schemaPath = path.join(dir, 'schema.json');
+    const outDir = path.join(dir, 'out');
+    writeJson(schemaPath, schemaWithReferenceRelation());
+
+    const res = runTh(['generate', schemaPath, '--out', outDir], process.cwd());
+    expect(res.status, res.stderr || res.stdout).to.equal(0);
+
+    const generatedThs = fs.readFileSync(path.join(outDir, 'ui', 'src', 'generated', 'ths.ts'), 'utf-8');
+    expect(generatedThs).to.include('"relations"');
+    expect(generatedThs).to.include('"authorProfile"');
+    expect(generatedThs).to.include('"to": "Profile"');
+
+    const generatedReferenceField = fs.readFileSync(path.join(outDir, 'ui', 'src', 'components', 'ReferenceFieldInput.tsx'), 'utf-8');
+    expect(generatedReferenceField).to.include('useOwnedReferenceOptions');
+    expect(generatedReferenceField).to.include('Owned records appear first');
+    expect(generatedReferenceField).to.include("href={`/${relatedCollection.name}/?mode=new`}");
+
+    const generatedAccount = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'account.ts'), 'utf-8');
+    expect(generatedAccount).to.include("const ACCOUNT_EVENT_NAME = 'tokenhost:account-changed'");
+    expect(generatedAccount).to.include('export function subscribeStoredAccount');
+
+    const generatedResolvedReference = fs.readFileSync(path.join(outDir, 'ui', 'src', 'components', 'ResolvedReferenceValue.tsx'), 'utf-8');
+    expect(generatedResolvedReference).to.include('getRelatedCollection');
+    expect(generatedResolvedReference).to.include("href={`/${relatedCollection.name}/?mode=view&id=${String(id)}`}");
+
+    const generatedRelations = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'relations.ts'), 'utf-8');
+    expect(generatedRelations).to.include('resolveReferenceRecords');
+    expect(generatedRelations).to.include('listOwnedRecords');
+    expect(generatedRelations).to.include('useOwnedReferenceOptions');
+    expect(generatedRelations).to.include('useRequiredReferenceCreationGates');
+    expect(generatedRelations).to.include('TH_REFERENCE_SELECTION');
+    expect(generatedRelations).to.include('subscribeStoredAccount');
+    expect(generatedRelations).to.include('maxRecords: 1');
+
+    const generatedNewPage = fs.readFileSync(path.join(outDir, 'ui', 'app', '[collection]', 'new', 'ClientPage.tsx'), 'utf-8');
+    expect(generatedNewPage).to.include('ReferenceFieldInput');
+    expect(generatedNewPage).to.include("f.type === 'reference'");
+    expect(generatedNewPage).to.include('You must create a');
+    expect(generatedNewPage).to.include('Checking required linked records before showing the form.');
+    expect(generatedNewPage).to.include('Waiting for media upload…');
+    expect(generatedNewPage).to.include('textareaFeature');
+
+    const generatedEditPage = fs.readFileSync(path.join(outDir, 'ui', 'app', '[collection]', 'edit', 'ClientPage.tsx'), 'utf-8');
+    expect(generatedEditPage).to.include('ReferenceFieldInput');
+    expect(generatedEditPage).to.include('Waiting for media upload…');
+    expect(generatedEditPage).to.include('textareaFeature');
+
+    const generatedViewPage = fs.readFileSync(path.join(outDir, 'ui', 'app', '[collection]', 'view', 'ClientPage.tsx'), 'utf-8');
+    expect(generatedViewPage).to.include('ResolvedReferenceValue');
+
+    const generatedRecordCard = fs.readFileSync(path.join(outDir, 'ui', 'src', 'components', 'RecordCard.tsx'), 'utf-8');
+    expect(generatedRecordCard).to.include('ResolvedReferenceValue');
+
+    const generatedApp = fs.readFileSync(path.join(outDir, 'ui', 'src', 'lib', 'app.ts'), 'utf-8');
+    expect(generatedApp).to.include('function fnListOwnedIds');
+    expect(generatedApp).to.include('function listOwnedRecordsPage');
   });
 
   it('generated UI builds (next export)', function () {
@@ -278,7 +394,7 @@ describe('th generate (UI template)', function () {
     expect(generatedThs).to.include('"directory": "ui-overrides"');
   });
 
-  it('builds the canonical microblog example UI with custom home/tag routes', function () {
+  it('builds the canonical microblog example UI from generated feed/token config', function () {
     this.timeout(180000);
 
     const schemaPath = path.join(process.cwd(), 'apps', 'example', 'microblog.schema.json');
@@ -291,10 +407,19 @@ describe('th generate (UI template)', function () {
     expect(fs.existsSync(path.join(uiDir, 'app', 'page.tsx'))).to.equal(true);
     expect(fs.existsSync(path.join(uiDir, 'app', 'tag', 'page.tsx'))).to.equal(true);
     expect(fs.existsSync(path.join(uiDir, 'app', 'Post', 'page.tsx'))).to.equal(true);
+    expect(fs.existsSync(path.join(uiDir, 'src', 'components', 'GeneratedHomePageClient.tsx'))).to.equal(true);
+    expect(fs.existsSync(path.join(uiDir, 'src', 'components', 'GeneratedTokenPageClient.tsx'))).to.equal(true);
+    expect(fs.existsSync(path.join(uiDir, 'src', 'components', 'GeneratedFeedStream.tsx'))).to.equal(true);
+    expect(fs.existsSync(path.join(uiDir, 'src', 'components', 'MicroblogHomeClient.tsx'))).to.equal(false);
+    expect(fs.existsSync(path.join(uiDir, 'src', 'components', 'MicroblogTagClient.tsx'))).to.equal(false);
     const generatedThs = fs.readFileSync(path.join(uiDir, 'src', 'generated', 'ths.ts'), 'utf-8');
     expect(generatedThs).to.include('"preset": "cyber-grid"');
     expect(generatedThs).to.include('"authorProfile"');
     expect(generatedThs).to.not.include('"authorHandle"');
+    expect(generatedThs).to.include('"homeSections"');
+    expect(generatedThs).to.include('"tokenPages"');
+    expect(generatedThs).to.include('"feeds"');
+    expect(generatedThs).to.not.include('"extensions": {');
 
     const install = runCmd('pnpm', ['install'], uiDir);
     expect(install.status, install.stderr || install.stdout).to.equal(0);
diff --git a/test/testCrudGenerator.js b/test/testCrudGenerator.js
index 0a1ffd4..c3044f9 100644
--- a/test/testCrudGenerator.js
+++ b/test/testCrudGenerator.js
@@ -60,4 +60,55 @@ describe('Spec-aligned CRUD generator', function () {
     const { errors } = compileSolidity(appSol.path, appSol.contents, 'App');
     expect(errors.map((e) => e.formattedMessage || e.message).join('\n')).to.equal('');
   });
+
+  it('emits relation ownership enforcement for mustOwn references', function () {
+    const raw = {
+      thsVersion: '2025-12',
+      schemaVersion: '0.0.1',
+      app: {
+        name: 'Reference Auth',
+        slug: 'reference-auth',
+        features: { uploads: false, onChainIndexing: true }
+      },
+      collections: [
+        {
+          name: 'Profile',
+          fields: [{ name: 'handle', type: 'string', required: true }],
+          createRules: { required: ['handle'], access: 'public' },
+          visibilityRules: { gets: ['handle'], access: 'public' },
+          updateRules: { mutable: ['handle'], access: 'owner' },
+          deleteRules: { softDelete: true, access: 'owner' },
+          indexes: { unique: [], index: [] }
+        },
+        {
+          name: 'Post',
+          fields: [{ name: 'authorProfile', type: 'reference', required: true }],
+          createRules: { required: ['authorProfile'], access: 'public' },
+          visibilityRules: { gets: ['authorProfile'], access: 'public' },
+          updateRules: { mutable: ['authorProfile'], access: 'owner' },
+          deleteRules: { softDelete: true, access: 'owner' },
+          indexes: { unique: [], index: [] },
+          relations: [{ field: 'authorProfile', to: 'Profile', enforce: true, mustOwn: true }]
+        }
+      ]
+    };
+
+    const structural = validateThsStructural(raw);
+    expect(structural.ok).to.equal(true);
+    const schema = structural.data;
+    const lintIssues = lintThs(schema);
+    const lintErrors = lintIssues.filter((i) => i.severity === 'error');
+    expect(lintErrors).to.have.length(0);
+
+    const appSol = generateAppSolidity(schema);
+    expect(appSol.contents).to.include('error RelatedRecordNotOwned();');
+    expect(appSol.contents).to.include('mapping(address => uint256[]) private ownerIndex_Profile;');
+    expect(appSol.contents).to.include('function listOwnedIdsProfile(address owner, uint256 offset, uint256 limit, bool includeDeleted) external view returns (uint256[] memory)');
+    expect(appSol.contents).to.include('function _requireOwnedProfile(uint256 id) internal view');
+    expect(appSol.contents).to.include('_requireOwnedProfile(input.authorProfile);');
+    expect(appSol.contents).to.include('_requireOwnedProfile(authorProfile);');
+
+    const { errors } = compileSolidity(appSol.path, appSol.contents, 'App');
+    expect(errors.map((e) => e.formattedMessage || e.message).join('\n')).to.equal('');
+  });
 });
diff --git a/test/testThsSchema.js b/test/testThsSchema.js
index 51089b4..2b2662b 100644
--- a/test/testThsSchema.js
+++ b/test/testThsSchema.js
@@ -138,6 +138,8 @@ describe('THS schema validation + lint', function () {
       app: {
         name: 'Test App',
         slug: 'test-app',
+        brand: { primaryText: 'test', accentText: 'app' },
+        primaryCollection: 'Item',
         theme: { preset: 'cyber-grid' },
         features: { uploads: false, onChainIndexing: true }
       }
@@ -147,6 +149,103 @@ describe('THS schema validation + lint', function () {
     expect(res.ok).to.equal(true);
   });
 
+  it('lintThs rejects unknown app.primaryCollection values', function () {
+    const input = minimalSchema({
+      app: {
+        name: 'Test App',
+        slug: 'test-app',
+        primaryCollection: 'Missing',
+        features: { uploads: false, onChainIndexing: true }
+      }
+    });
+
+    const res = validateThsStructural(input);
+    expect(res.ok).to.equal(true);
+    const issues = lintThs(res.data);
+    expect(issues.some((i) => i.code === 'lint.app.primary_collection_unknown')).to.equal(true);
+  });
+
+  it('validateThsStructural accepts generated feed/token/home UI primitives', function () {
+    const input = minimalSchema({
+      app: {
+        name: 'Test App',
+        slug: 'test-app',
+        features: { uploads: true, onChainIndexing: true },
+        ui: {
+          homePage: { mode: 'generated' },
+          generated: {
+            feeds: [
+              {
+                id: 'items',
+                collection: 'Item',
+                card: {
+                  textField: 'title'
+                }
+              }
+            ],
+            tokenPages: [
+              {
+                id: 'itemTokens',
+                collection: 'Item',
+                field: 'title',
+                tokenizer: 'hashtag',
+                feed: 'items'
+              }
+            ],
+            homeSections: [
+              {
+                type: 'hero',
+                title: 'Test app'
+              },
+              {
+                type: 'tokenList',
+                tokenPage: 'itemTokens',
+                title: 'Trending tags'
+              },
+              {
+                type: 'feed',
+                feed: 'items',
+                title: 'Latest items'
+              }
+            ]
+          }
+        }
+      }
+    });
+
+    const res = validateThsStructural(input);
+    expect(res.ok).to.equal(true);
+  });
+
+  it('validateThsStructural accepts relation ownership requirements', function () {
+    const input = minimalSchema({
+      collections: [
+        {
+          name: 'Profile',
+          fields: [{ name: 'handle', type: 'string', required: true }],
+          createRules: { required: ['handle'], access: 'public' },
+          visibilityRules: { gets: ['handle'], access: 'public' },
+          updateRules: { mutable: ['handle'], access: 'owner' },
+          deleteRules: { softDelete: true, access: 'owner' },
+          indexes: { unique: [], index: [] }
+        },
+        {
+          name: 'Post',
+          fields: [{ name: 'authorProfile', type: 'reference', required: true }],
+          createRules: { required: ['authorProfile'], access: 'public' },
+          visibilityRules: { gets: ['authorProfile'], access: 'public' },
+          updateRules: { mutable: ['authorProfile'], access: 'owner' },
+          deleteRules: { softDelete: true, access: 'owner' },
+          indexes: { unique: [], index: [] },
+          relations: [{ field: 'authorProfile', to: 'Profile', enforce: true, mustOwn: true }]
+        }
+      ]
+    });
+
+    const res = validateThsStructural(input);
+    expect(res.ok).to.equal(true);
+  });
+
   it('validateThsStructural rejects unknown app.theme.preset values', function () {
     const input = minimalSchema({
       app: {
@@ -180,6 +279,59 @@ describe('THS schema validation + lint', function () {
     expect(issues.some((i) => i.code === 'lint.app.ui.custom_home_without_extensions')).to.equal(true);
   });
 
+  it('lintThs rejects generated UI references to unknown feeds and token pages', function () {
+    const input = minimalSchema({
+      app: {
+        name: 'Test App',
+        slug: 'test-app',
+        features: { uploads: false, onChainIndexing: true },
+        ui: {
+          homePage: { mode: 'generated' },
+          generated: {
+            feeds: [
+              {
+                id: 'items',
+                collection: 'Item',
+                card: {
+                  textField: 'missingField'
+                }
+              }
+            ],
+            tokenPages: [
+              {
+                id: 'itemTokens',
+                collection: 'Item',
+                field: 'missingField',
+                tokenizer: 'hashtag',
+                feed: 'missingFeed'
+              }
+            ],
+            homeSections: [
+              {
+                type: 'tokenList',
+                tokenPage: 'missingTokenPage',
+                title: 'Broken token page'
+              },
+              {
+                type: 'feed',
+                feed: 'missingFeed',
+                title: 'Broken feed'
+              }
+            ]
+          }
+        }
+      }
+    });
+
+    const res = validateThsStructural(input);
+    expect(res.ok).to.equal(true);
+    const issues = lintThs(res.data);
+    expect(issues.some((i) => i.code === 'lint.app.ui.generated.feed_unknown_field')).to.equal(true);
+    expect(issues.some((i) => i.code === 'lint.app.ui.generated.token_unknown_field')).to.equal(true);
+    expect(issues.some((i) => i.code === 'lint.app.ui.generated.section_unknown_token_page')).to.equal(true);
+    expect(issues.some((i) => i.code === 'lint.app.ui.generated.section_unknown_feed')).to.equal(true);
+  });
+
   it('validateThsStructural accepts tokenized query index primitives', function () {
     const input = minimalSchema({
       collections: [