diff --git a/crates/tauri-app/src-tauri/src/pds_client.rs b/crates/tauri-app/src-tauri/src/pds_client.rs
index 47689f0..afe7c54 100644
--- a/crates/tauri-app/src-tauri/src/pds_client.rs
+++ b/crates/tauri-app/src-tauri/src/pds_client.rs
@@ -385,6 +385,8 @@ pub struct UploadedBlobRef {
     #[serde(rename = "$link")]
     pub link: String,
 }
+
+impl PdsHttpClient {
     /// `POST /xrpc/com.atproto.repo.getRecord?repo=<did>&collection=app.bsky.actor.profile&rkey=self`
     /// Returns the record's CBOR-decoded value as JSON, or `None` if no
     /// record exists for that path. The server replies with a
@@ -446,3 +448,4 @@ pub struct UploadedBlobRef {
         let v: serde_json::Value = r.json().await?;
         Ok(v.get("profile").cloned().unwrap_or(serde_json::Value::Null))
     }
+}
diff --git a/crates/tauri-app/src/App.svelte b/crates/tauri-app/src/App.svelte
index e76fa39..6cbaa0b 100644
--- a/crates/tauri-app/src/App.svelte
+++ b/crates/tauri-app/src/App.svelte
@@ -4,23 +4,18 @@
     session,
     pdsStatus,
     fetchTimeline,
-    fetchProfile,
     fetchSearch,
     fetchPost,
     openExternalUrl,
     showError,
-    pickAndUploadImage,
-    setMyProfile,
     type Session,
     type Post,
-    type ProfileResponse,
   } from "./lib/api/client";
   import NavRail from "./lib/components/NavRail.svelte";
   import StatusBar from "./lib/components/StatusBar.svelte";
   import PostCard from "./lib/components/PostCard.svelte";
   import ComposeBox from "./lib/components/ComposeBox.svelte";
-  import UserProfileView from "./lib/components/UserProfileView.svelte";
-  import Avatar from "./lib/components/Avatar.svelte";
+  import ProfileView from "./lib/components/ProfileView.svelte";
   import LoginScreen from "./lib/components/LoginScreen.svelte";
   import Terminal from "./lib/components/Terminal.svelte";
   import Skeleton from "./lib/components/Skeleton.svelte";
@@ -44,50 +39,6 @@
   let seenUris: Set<string> = new Set();
   let _statusTimer: number | undefined;
 
-  // Profile state.
-  let profile: ProfileResponse | null = $state(null);
-  let profileLoading: boolean = $state(false);
-  let profileError: string | null = $state(null);
-
-  // Edit-profile state.
-  let editingProfile: boolean = $state(false);
-  let editProfileName: string = $state("");
-  let editProfileDesc: string = $state("");
-  let editProfileAvatarCid: string | null = $state(null);
-  let savingProfile: boolean = $state(false);
-
-  async function pickAndUploadAvatar() {
-    try {
-      const r = await pickAndUploadImage();
-      if (r) editProfileAvatarCid = r.cid;
-    } catch (e) {
-      console.warn("avatar upload failed", e);
-    }
-  }
-
-  async function saveProfile() {
-    if (!currentUser) return;
-    savingProfile = true;
-    try {
-      const updated = await setMyProfile({
-        displayName: editProfileName || undefined,
-        description: editProfileDesc || undefined,
-        avatarBlobCid: editProfileAvatarCid || undefined,
-      });
-      // Refresh the cached profile from the response (or re-fetch).
-      if (updated) {
-        profile = { ...profile, ...updated } as ProfileResponse | null;
-      } else {
-        await refreshProfile(currentUser.handle);
-      }
-      editingProfile = false;
-    } catch (e) {
-      console.warn("profile save failed", e);
-    } finally {
-      savingProfile = false;
-    }
-  }
-
   // Search state.
   let searchQuery: string = $state("");
   let searchResults: Post[] = $state([]);
@@ -133,7 +84,7 @@
   /// Navigate to the "user" profile view for `handle`. Called from
   /// `<PostCard on_handle_click>` and the avatar/handle buttons in
   /// the post header. The actual profile fetch happens inside
-  /// `<UserProfileView>` on mount.
+  /// `<ProfileView>` on mount.
   function openUserProfile(handle: string) {
     selectedHandle = handle;
     view = "user";
@@ -306,8 +257,8 @@
       void refreshTimeline(true);
     }
     if (next === "profile") {
-      const handle = currentUser.handle;
-      void refreshProfile(handle);
+      // ProfileView fetches its own data on mount; nothing to
+      // preload here.
     }
     if (next === "search" && searchQuery.trim().length > 0) {
       scheduleSearch();
@@ -376,19 +327,6 @@
     }
   }
 
-  async function refreshProfile(handle: string) {
-    profileLoading = true;
-    profileError = null;
-    try {
-      profile = await fetchProfile(handle);
-    } catch (e) {
-      profileError = String(e);
-      profile = null;
-    } finally {
-      profileLoading = false;
-    }
-  }
-
   function scheduleSearch() {
     if (_searchDebounce) clearTimeout(_searchDebounce);
     _searchDebounce = window.setTimeout(() => {
@@ -439,7 +377,6 @@
     try {
       await session.logout();
       setView("home");
-      profile = null;
       searchResults = [];
       threadRoot = null;
       threadParent = null;
@@ -451,13 +388,6 @@
   // Derive a display handle. The session already gives us the user's
   // real handle (e.g. "alice.bsky.social"). When the AppView decorates
   // posts that have empty handles it falls back to a synthetic
-  // "@did:plc:abcd…" form, so the fallback here matches that.
-  function displayHandle(h: string | null | undefined): string {
-    if (!h) return "@unknown";
-    if (h.startsWith("@")) return h;
-    return `@${h}`;
-  }
-
   // Mirror the URLs the Rust shell reads from MAARCADETWEET_PDS_URL /
   // MAARCADETWEET_APPVIEW_URL (see `crates/tauri-app/src-tauri/src/lib.rs`).
   // Used in the Settings view to show which backends the client is
@@ -552,156 +482,23 @@
             <span class="title">// profile —</span>
             <span class="as">@{selectedHandle}</span>
           </div>
-          <UserProfileView
+          <ProfileView
             handle={selectedHandle}
             on_thread_click={openThread}
             current_user_did={currentUser?.did ?? null}
           />
         {:else if view === "profile"}
-          <div class="head">
-            <span class="prompt">$</span>
-            <span class="title">// profile —</span>
-            <span class="as">@{currentUser.handle}</span>
-          </div>
-          {#if profileLoading && !profile}
-            <Skeleton rows={4} />
-          {:else if profileError}
-            <div class="toast toast--err">err: {profileError}</div>
-          {:else if profile}
-            <section class="profile">
-              <header class="profile__head">
-                <div class="profile__handle">{displayHandle(profile.handle)}</div>
-                <div class="profile__did" title={profile.did}>{profile.did}</div>
-                {#if profile.avatar_cid}
-                  <Avatar
-                    did={profile.did}
-                    cid={profile.avatar_cid}
-                    name={profile.display_name ?? profile.handle}
-                    size={64}
-                  />
-                {/if}
-              </header>
-
-              {#if profile.description}
-                <div class="profile__bio">{profile.description}</div>
-              {:else}
-                <div class="profile__bio profile__bio--empty">
-                  // no profile yet — click "edit profile" to set one up.
-                </div>
-              {/if}
-
-              <div class="profile__actions">
-                <button
-                  class="btn btn--ghost"
-                  onclick={() => (editingProfile = !editingProfile)}
-                >
-                  {editingProfile ? "cancel" : "edit profile"}
-                </button>
-              </div>
-              {#if editingProfile}
-                <div class="profile__edit">
-                  <input
-                    type="text"
-                    placeholder="display name"
-                    maxlength="64"
-                    bind:value={editProfileName}
-                  />
-                  <textarea
-                    placeholder="description"
-                    rows="3"
-                    maxlength="300"
-                    bind:value={editProfileDesc}
-                  ></textarea>
-                  <div class="profile__edit-avatar">
-                    {#if editProfileAvatarCid}
-                      <span class="meta">cid: {editProfileAvatarCid.slice(0, 10)}…</span>
-                      <button
-                        class="btn btn--ghost"
-                        onclick={() => (editProfileAvatarCid = null)}
-                      >
-                        clear
-                      </button>
-                    {:else}
-                      <span class="meta">no avatar</span>
-                    {/if}
-                    <button
-                      class="btn btn--ghost"
-                      onclick={pickAndUploadAvatar}
-                    >upload…</button>
-                  </div>
-                  <div class="profile__edit-actions">
-                    <button
-                      class="btn btn--primary"
-                      disabled={savingProfile}
-                      onclick={saveProfile}
-                    >
-                      {savingProfile ? "saving…" : "save"}
-                    </button>
-                  </div>
-                </div>
-              {/if}
-
-              <div class="profile__stats">
-                <span>{profile.post_count} posts</span>
-                <span>{profile.followers} followers</span>
-                <span>{profile.following} following</span>
-              </div>
-
-              <div class="profile__actions">
-                <button
-                  class="btn btn--ghost"
-                  type="button"
-                  title="Copy DID to clipboard"
-                  onclick={() => copyToClipboard(profile!.did)}
-                >copy did</button>
-                <button
-                  class="btn btn--ghost"
-                  type="button"
-                  title="Copy AT URI to clipboard"
-                  onclick={() =>
-                    copyToClipboard(`at://${profile!.did}/app.twi.post`)}
-                >copy at-uri</button>
-                <button
-                  class="btn btn--ghost"
-                  type="button"
-                  title="Open profile in your default browser"
-                  onclick={() =>
-                    openExternalUrl(
-                      `https://bsky.app/profile/${profile!.handle}`,
-                    )}
-                >open in browser</button>
-                <button
-                  class="btn btn--ghost"
-                  type="button"
-                  title="Sign out of this app"
-                  onclick={handleLogout}
-                >sign out</button>
-              </div>
-
-              <dl class="counts">
-                <div>
-                  <dt>followers</dt>
-                  <dd>{profile.followers}</dd>
-                </div>
-                <div>
-                  <dt>following</dt>
-                  <dd>{profile.following}</dd>
-                </div>
-                <div>
-                  <dt>posts</dt>
-                  <dd>{profile.posts.length}</dd>
-                </div>
-              </dl>
-
-              {#if profile.posts.length === 0}
-                <div class="empty">// no posts yet — compose your first one</div>
-              {:else}
-                <h3 class="profile__h3">// recent posts</h3>
-                {#each profile.posts as p (p.uri)}
-<PostCard post={p} on_thread_click={openThread} on_handle_click={openUserProfile} />
-                {/each}
-              {/if}
-            </section>
+          {#if currentUser}
+            <div class="head">
+              <span class="prompt">$</span>
+              <span class="title">// profile —</span>
+              <span class="as">@{currentUser.handle}</span>
+            </div>
+            <ProfileView
+              handle={currentUser.handle}
+              on_thread_click={openThread}
+              current_user_did={currentUser.did}
+            />
           {/if}
         {:else if view === "settings"}
           <div class="head">
@@ -895,11 +692,6 @@
     padding: var(--s-3);
   }
 
-  .profile__actions {
-    display: flex;
-    gap: var(--s-2);
-    margin: var(--s-3) 0;
-  }
   .head {
     font-family: var(--font-mono);
     font-size: var(--fs-50);
@@ -972,61 +764,6 @@
   .btn--ghost:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
   .btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
-  .profile {
-    padding: 0 var(--s-3);
-  }
-  .profile__head {
-    display: flex;
-    flex-direction: column;
-    gap: var(--s-1);
-    padding: var(--s-3) 0 var(--s-4);
-    border-bottom: 1px solid var(--line);
-    margin-bottom: var(--s-3);
-  }
-  .profile__handle {
-    font-family: var(--font-mono);
-    font-weight: 700;
-    font-size: var(--fs-200);
-    color: var(--orange);
-  }
-  .profile__did {
-    font-family: var(--font-mono);
-    font-size: var(--fs-50);
-    color: var(--text-dim);
-    word-break: break-all;
-  }
-  .profile__bio {
-    font-family: var(--font-mono);
-    font-size: var(--fs-100);
-    color: var(--text);
-    padding: var(--s-2) 0;
-  }
-  .profile__bio--empty {
-    color: var(--text-dim);
-    font-style: italic;
-  }
-  .counts {
-    display: flex;
-    gap: var(--s-6);
-    padding: var(--s-2) var(--s-4);
-    margin: 0 0 var(--s-4);
-    font-family: var(--font-mono);
-    font-size: var(--fs-50);
-  }
-  .counts > div {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .counts dt { color: var(--text-dim); letter-spacing: 0.04em; }
-  .counts dd {
-    margin: 0;
-    color: var(--text);
-    font-weight: 700;
-    font-size: var(--fs-200);
-    font-variant-numeric: tabular-nums;
-  }
-
   .toasts {
     position: fixed;
     right: var(--s-4);
@@ -1066,7 +803,6 @@
     border-color: var(--red);
   }
 
-  .profile__h3,
   .settings__h3 {
     font-family: var(--font-mono);
     font-size: var(--fs-50);
diff --git a/crates/tauri-app/src/lib/components/ProfileView.svelte b/crates/tauri-app/src/lib/components/ProfileView.svelte
new file mode 100644
index 0000000..fa5db70
--- /dev/null
+++ b/crates/tauri-app/src/lib/components/ProfileView.svelte
@@ -0,0 +1,652 @@
+<script lang="ts">
+  import Avatar from "./Avatar.svelte";
+  import PostCard from "./PostCard.svelte";
+  import {
+    setMyProfile,
+    pickAndUploadImage,
+    fetchBlob,
+    releaseBlob,
+  } from "../api/client";
+  import { onDestroy, onMount } from "svelte";
+
+  type Props = {
+    handle: string;
+    on_thread_click?: (uri: string) => void;
+    /// DID of the authenticated user. When this matches the
+    /// profile's DID, the "edit profile" button is shown; the
+    /// /user-profile/<handle> route is then the user's own
+    /// profile (and the avatar / bio are editable).
+    current_user_did?: string | null;
+  };
+  let { handle, on_thread_click, current_user_did }: Props = $props();
+
+  type State =
+    | { kind: "loading" }
+    | { kind: "error"; message: string }
+    | { kind: "ready"; data: AppViewProfile };
+
+  type AppViewProfile = {
+    did: string;
+    handle: string;
+    posts: AppViewPost[];
+    followers: number;
+    following: number;
+    display_name?: string;
+    description?: string;
+    avatar_cid?: string;
+    banner_cid?: string;
+    post_count: number;
+  };
+
+  type AppViewPost = {
+    uri: string;
+    did: string;
+    handle: string;
+    rkey: string;
+    collection: string;
+    text: string;
+    cid: string;
+    parent_uri?: string | null;
+    root_uri?: string | null;
+    embed?: null;
+    langs: string[];
+    created_at: string;
+    avatar_cid?: string | null;
+  };
+
+  let editing: boolean = $state(false);
+  // Type-annotated so TypeScript keeps the discriminated-union narrowing
+  // when we do `viewModel.kind === "ready"` — otherwise $state infers
+  // the literal `"loading"` from the initial value and the `===`
+  // checks become "no overlap" errors.
+  let viewModel: State = $state({ kind: "loading" } as State);
+  let editName: string = $state("");
+  let editDesc: string = $state("");
+  let editAvatarCid: string | null = $state(null);
+  let saving: boolean = $state(false);
+
+  // Banner blob URL — fetched via the same path as Avatar (Tauri
+  // getBlob via fetchBlob). Released on unmount or when banner
+  // changes.
+  let bannerUrl: string | null = $state(null);
+  let bannerCidLoaded: string | null = null;
+
+  async function load() {
+    viewModel = { kind: "loading" };
+    try {
+      const r = await fetch(`/api/profile/${encodeURIComponent(handle)}`);
+      if (!r.ok) {
+        viewModel = {
+          kind: "error",
+          message: `profile fetch failed: ${r.status}`,
+        };
+        return;
+      }
+      const data: AppViewProfile = await r.json();
+      viewModel = { kind: "ready", data };
+    } catch (e) {
+      viewModel = { kind: "error", message: String(e) };
+    }
+  }
+
+  $effect(() => {
+    const bannerCid =
+      viewModel.kind === "ready" ? viewModel.data.banner_cid ?? null : null;
+    // Release the previous URL whenever the banner CID changes
+    // (including to/from null).
+    if (bannerCidLoaded !== bannerCid) {
+      if (bannerUrl) {
+        if (viewModel.kind === "ready" && viewModel.data.did) {
+          releaseBlob(viewModel.data.did, bannerCidLoaded ?? "");
+        }
+        URL.revokeObjectURL(bannerUrl);
+        bannerUrl = null;
+      }
+      bannerCidLoaded = bannerCid;
+      if (!bannerCid || viewModel.kind !== "ready") return;
+      const did = viewModel.data.did;
+      let cancelled = false;
+      fetchBlob(did, bannerCid)
+        .then((u) => {
+          if (!cancelled) bannerUrl = u;
+          else URL.revokeObjectURL(u);
+        })
+        .catch(() => {
+          /* fall back to CSS gradient placeholder */
+        });
+      return () => {
+        cancelled = true;
+      };
+    }
+  });
+
+  onMount(() => {
+    void load();
+  });
+
+  onDestroy(() => {
+    if (bannerUrl) URL.revokeObjectURL(bannerUrl);
+  });
+
+  const isOwn = $derived(
+    !!current_user_did &&
+      viewModel.kind === "ready" &&
+      viewModel.data.did === current_user_did,
+  );
+  const isEmptyProfile = $derived(
+    viewModel.kind === "ready" &&
+      !viewModel.data.display_name &&
+      !viewModel.data.description &&
+      !viewModel.data.avatar_cid &&
+      !viewModel.data.banner_cid,
+  );
+
+  function openEdit() {
+    if (viewModel.kind !== "ready") return;
+    editName = viewModel.data.display_name ?? "";
+    editDesc = viewModel.data.description ?? "";
+    editAvatarCid = viewModel.data.avatar_cid ?? null;
+    editing = true;
+  }
+
+  async function saveProfile() {
+    if (viewModel.kind !== "ready") return;
+    saving = true;
+    try {
+      await setMyProfile({
+        displayName: editName || undefined,
+        description: editDesc || undefined,
+        avatarBlobCid: editAvatarCid || undefined,
+      });
+      editing = false;
+      await load();
+    } catch (e) {
+      console.warn("profile save failed", e);
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function pickAndUploadAvatar() {
+    const blob = await pickAndUploadImage();
+    if (!blob) return;
+    editAvatarCid = blob.cid;
+  }
+
+  type Tab = "posts" | "replies" | "likes";
+  let activeTab: Tab = $state("posts");
+</script>
+
+<section class="profile">
+  <!-- ─── banner ────────────────────────────────────────────────── -->
+  <div
+    class="profile__banner"
+    style:background-image={bannerUrl ? `url(${bannerUrl})` : "none"}
+  >
+    {#if !bannerUrl}
+      <!--
+        Placeholder shown when the profile has no banner blob.
+        Subtle orange-tinted terminal grid — keeps the page from
+        looking bare without competing with the avatar.
+      -->
+      <div class="profile__banner-grid" aria-hidden="true"></div>
+    {/if}
+  </div>
+
+  <!-- ─── avatar + actions ──────────────────────────────────────── -->
+  <div class="profile__topbar">
+    <div class="profile__avatar-overlap">
+      {#if viewModel.kind === "ready"}
+        <Avatar
+          did={viewModel.data.did}
+          cid={viewModel.data.avatar_cid ?? null}
+          name={viewModel.data.display_name ?? viewModel.data.handle}
+          size={96}
+        />
+      {:else}
+        <span class="profile__avatar-skeleton"></span>
+      {/if}
+    </div>
+    <div class="profile__actions">
+      {#if viewModel.kind === "ready"}
+        {#if isOwn}
+          {#if editing}
+            <button
+              class="btn btn--ghost"
+              type="button"
+              onclick={() => (editing = false)}
+            >cancel</button>
+          {:else}
+            <button
+              class="btn btn--primary"
+              type="button"
+              onclick={openEdit}
+            >edit profile</button>
+          {/if}
+        {:else}
+          <!--
+            Follow is a placeholder UI — actual follow wiring lives
+            on a future PR. Disabled so users can't trigger a no-op
+            network call.
+          -->
+          <button class="btn btn--primary" type="button" disabled
+            >follow</button
+          >
+        {/if}
+      {/if}
+    </div>
+  </div>
+
+  <!-- ─── identity ──────────────────────────────────────────────── -->
+  {#if viewModel.kind === "ready"}
+    <div class="profile__identity">
+      <h2 class="profile__name">
+        {viewModel.data.display_name ?? viewModel.data.handle}
+      </h2>
+      <div class="profile__handle">@{viewModel.data.handle}</div>
+    </div>
+  {:else if viewModel.kind === "loading"}
+    <div class="profile__identity">
+      <h2 class="profile__name profile__name--skeleton">…</h2>
+      <div class="profile__handle">@{handle}</div>
+    </div>
+  {:else}
+    <div class="profile__identity profile__identity--err">
+      err: {viewModel.message}
+    </div>
+  {/if}
+
+  <!-- ─── bio ───────────────────────────────────────────────────── -->
+  {#if viewModel.kind === "ready"}
+    {#if viewModel.data.description}
+      <p class="profile__bio">{viewModel.data.description}</p>
+    {:else if isEmptyProfile}
+      <p class="profile__bio profile__bio--empty">
+        {#if isOwn}
+          // no profile yet — click "edit profile" to set one up.
+        {:else}
+          // no profile yet.
+        {/if}
+      </p>
+    {/if}
+  {/if}
+
+  <!-- ─── meta (did) ───────────────────────────────────────────── -->
+  {#if viewModel.kind === "ready"}
+    <div class="profile__meta">
+      <span class="profile__meta-item" title={viewModel.data.did}>
+        did: <code>{shortDid(viewModel.data.did)}</code>
+      </span>
+    </div>
+  {/if}
+
+  <!-- ─── counts ────────────────────────────────────────────────── -->
+  {#if viewModel.kind === "ready"}
+    <dl class="profile__counts">
+      <div>
+        <dt>posts</dt>
+        <dd>{viewModel.data.post_count}</dd>
+      </div>
+      <div>
+        <dt>followers</dt>
+        <dd>{viewModel.data.followers}</dd>
+      </div>
+      <div>
+        <dt>following</dt>
+        <dd>{viewModel.data.following}</dd>
+      </div>
+    </dl>
+  {/if}
+
+  <!-- ─── tabs ──────────────────────────────────────────────────── -->
+  <nav class="profile__tabs" aria-label="Profile sections">
+    <button
+      class="tab"
+      class:tab--active={activeTab === "posts"}
+      type="button"
+      onclick={() => (activeTab = "posts")}
+    >posts</button>
+    <button
+      class="tab"
+      class:tab--active={activeTab === "replies"}
+      type="button"
+      disabled
+      title="replies — coming soon"
+    >replies</button>
+    <button
+      class="tab"
+      class:tab--active={activeTab === "likes"}
+      type="button"
+      disabled
+      title="likes — coming soon"
+    >likes</button>
+  </nav>
+
+  <!-- ─── feed ──────────────────────────────────────────────────── -->
+  <div class="profile__feed">
+    {#if viewModel.kind === "ready"}
+      {#each viewModel.data.posts as p (p.uri)}
+        <PostCard post={p} on_thread_click={on_thread_click} />
+      {/each}
+      {#if viewModel.data.posts.length === 0}
+        <div class="profile__empty">// no posts yet.</div>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- ─── edit form (own profile only) ─────────────────────────── -->
+  {#if editing && viewModel.kind === "ready"}
+    <div class="profile__edit">
+      <h3 class="profile__edit-title">// edit profile</h3>
+      <label class="profile__edit-field">
+        <span class="key">display name</span>
+        <input type="text" bind:value={editName} maxlength="64" />
+      </label>
+      <label class="profile__edit-field">
+        <span class="key">description</span>
+        <textarea
+          bind:value={editDesc}
+          rows="3"
+          maxlength="300"
+        ></textarea>
+      </label>
+      <div class="profile__edit-field">
+        <span class="key">avatar</span>
+        <div class="profile__edit-row">
+          {#if editAvatarCid}
+            <span class="meta">cid: {editAvatarCid.slice(0, 10)}…</span>
+            <button
+              class="btn btn--ghost"
+              type="button"
+              onclick={() => (editAvatarCid = null)}
+            >clear</button>
+          {:else}
+            <span class="meta">none</span>
+          {/if}
+          <button
+            class="btn btn--ghost"
+            type="button"
+            onclick={pickAndUploadAvatar}
+          >upload…</button>
+        </div>
+      </div>
+      <div class="profile__edit-actions">
+        <button
+          class="btn btn--primary"
+          type="button"
+          disabled={saving}
+          onclick={saveProfile}
+        >
+          {saving ? "saving…" : "save"}
+        </button>
+      </div>
+    </div>
+  {/if}
+</section>
+
+<script lang="ts" module>
+  /// Compact DID renderer for the profile meta line — keeps the
+  /// `did:plc:bafyreiczj…` from spilling past the column.
+  export function shortDid(did: string): string {
+    if (did.length <= 24) return did;
+    const head = did.slice(0, 18);
+    const tail = did.slice(-6);
+    return `${head}…${tail}`;
+  }
+</script>
+
+<style>
+  /* No outer padding — banner + avatar overhang make the section
+     fill the column edge to edge on mobile. */
+
+  /* ─── banner ─────────────────────────────────────────────── */
+  .profile__banner {
+    position: relative;
+    height: 140px;
+    overflow: hidden;
+    background-color: var(--bg-elev);
+    background-size: cover;
+    background-position: center;
+  }
+  .profile__banner-grid {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(
+        135deg,
+        var(--bg-elev) 0%,
+        rgba(255, 102, 0, 0.12) 60%,
+        rgba(255, 102, 0, 0.04) 100%
+      ),
+      repeating-linear-gradient(
+        0deg,
+        transparent 0,
+        transparent 27px,
+        rgba(255, 102, 0, 0.06) 27px,
+        rgba(255, 102, 0, 0.06) 28px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        transparent 0,
+        transparent 27px,
+        rgba(255, 102, 0, 0.06) 27px,
+        rgba(255, 102, 0, 0.06) 28px
+      );
+  }
+
+  /* ─── avatar + actions ──────────────────────────────────── */
+  .profile__topbar {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 0 var(--s-4);
+    margin-top: -44px;
+    min-height: 52px;
+  }
+  .profile__avatar-overlap {
+    border: 4px solid var(--bg);
+    border-radius: 50%;
+    background: var(--bg);
+    line-height: 0;
+  }
+  .profile__avatar-skeleton {
+    display: inline-block;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: var(--bg-elev);
+  }
+  .profile__actions {
+    padding-bottom: var(--s-3);
+  }
+
+  /* ─── identity ──────────────────────────────────────────── */
+  .profile__identity {
+    padding: var(--s-3) var(--s-4) 0;
+  }
+  .profile__name {
+    font-family: var(--font-mono);
+    font-size: var(--fs-300);
+    font-weight: 700;
+    color: var(--text);
+    line-height: var(--lh-tight);
+    margin: 0;
+    word-break: break-word;
+  }
+  .profile__name--skeleton {
+    color: var(--text-dim);
+  }
+  .profile__handle {
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+    color: var(--text-dim);
+    margin-top: 2px;
+  }
+  .profile__identity--err {
+    color: var(--red);
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+  }
+
+  /* ─── bio ───────────────────────────────────────────────── */
+  .profile__bio {
+    padding: var(--s-3) var(--s-4) 0;
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+    color: var(--text);
+    line-height: var(--lh-body);
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .profile__bio--empty {
+    color: var(--text-dim);
+    font-style: italic;
+  }
+
+  /* ─── meta ──────────────────────────────────────────────── */
+  .profile__meta {
+    padding: var(--s-3) var(--s-4) 0;
+    font-family: var(--font-mono);
+    font-size: var(--fs-50);
+    color: var(--text-dim);
+    display: flex;
+    gap: var(--s-4);
+    flex-wrap: wrap;
+  }
+  .profile__meta code {
+    font-family: var(--font-mono);
+    color: var(--text-dim);
+  }
+
+  /* ─── counts ────────────────────────────────────────────── */
+  .profile__counts {
+    display: flex;
+    gap: var(--s-6);
+    padding: var(--s-3) var(--s-4);
+    margin: 0;
+    font-family: var(--font-mono);
+  }
+  .profile__counts > div {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .profile__counts dt {
+    color: var(--text-dim);
+    letter-spacing: var(--tracking-label);
+    font-size: var(--fs-50);
+  }
+  .profile__counts dd {
+    margin: 0;
+    color: var(--text);
+    font-weight: 700;
+    font-size: var(--fs-200);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── tabs ──────────────────────────────────────────────── */
+  .profile__tabs {
+    display: flex;
+    border-bottom: 1px solid var(--line);
+    margin-top: var(--s-2);
+  }
+  .tab {
+    flex: 1;
+    background: none;
+    border: 0;
+    padding: var(--s-3);
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color var(--dur) var(--ease),
+      border-color var(--dur) var(--ease);
+  }
+  .tab:hover:not(:disabled) {
+    color: var(--text);
+  }
+  .tab:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .tab--active {
+    color: var(--orange);
+    border-bottom-color: var(--orange);
+    font-weight: 700;
+  }
+
+  /* ─── feed ──────────────────────────────────────────────── */
+  .profile__feed {
+    padding: var(--s-2) 0 var(--s-6);
+  }
+  .profile__empty {
+    font-family: var(--font-mono);
+    color: var(--text-dim);
+    font-style: italic;
+    padding: var(--s-4);
+    text-align: center;
+  }
+
+  /* ─── edit form ─────────────────────────────────────────── */
+  .profile__edit {
+    border-top: 1px solid var(--line);
+    margin: var(--s-4) var(--s-4) 0;
+    padding: var(--s-4) 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-3);
+  }
+  .profile__edit-title {
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+    color: var(--orange);
+    margin: 0 0 var(--s-2);
+    font-weight: 700;
+    letter-spacing: var(--tracking-label);
+  }
+  .profile__edit-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-1);
+  }
+  .profile__edit-field .key {
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: var(--fs-50);
+    letter-spacing: var(--tracking-label);
+  }
+  .profile__edit-field input,
+  .profile__edit-field textarea {
+    background: var(--bg);
+    border: 1px solid var(--line-2);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: var(--fs-100);
+    padding: var(--s-2) var(--s-3);
+    border-radius: var(--r-sm);
+    resize: vertical;
+  }
+  .profile__edit-field input:focus,
+  .profile__edit-field textarea:focus {
+    outline: none;
+    border-color: var(--orange);
+  }
+  .profile__edit-row {
+    display: flex;
+    align-items: center;
+    gap: var(--s-2);
+    flex-wrap: wrap;
+  }
+  .profile__edit-row .meta {
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: var(--fs-50);
+  }
+  .profile__edit-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/crates/tauri-app/src/lib/components/UserProfileView.svelte b/crates/tauri-app/src/lib/components/UserProfileView.svelte
deleted file mode 100644
index 33a52f4..0000000
--- a/crates/tauri-app/src/lib/components/UserProfileView.svelte
+++ /dev/null
@@ -1,334 +0,0 @@
-<script lang="ts">
-  import Avatar from "./Avatar.svelte";
-  import PostCard from "./PostCard.svelte";
-  import { setMyProfile, pickAndUploadImage } from "../api/client";
-  import { onMount } from "svelte";
-
-  type Props = {
-    handle: string;
-    on_thread_click?: (uri: string) => void;
-    /// DID of the authenticated user. When this matches the
-    /// profile's DID, the "edit profile" button is shown; otherwise
-    /// it's hidden (you can only edit your own profile).
-    current_user_did?: string | null;
-  };
-  let { handle, on_thread_click, current_user_did }: Props = $props();
-
-  type State =
-    | { kind: "loading" }
-    | { kind: "error"; message: string }
-    | { kind: "ready"; data: AppViewProfile };
-
-  type AppViewProfile = {
-    did: string;
-    handle: string;
-    posts: AppViewPost[];
-    followers: number;
-    following: number;
-    display_name?: string;
-    description?: string;
-    avatar_cid?: string;
-    banner_cid?: string;
-    post_count: number;
-  };
-
-  type AppViewPost = {
-    uri: string;
-    did: string;
-    handle: string;
-    rkey: string;
-    collection: string;
-    text: string;
-    cid: string;
-    parent_uri?: string | null;
-    root_uri?: string | null;
-    embed?: null;
-    langs: string[];
-    created_at: string;
-    avatar_cid?: string | null;
-  };
-
-  let editing: boolean = $state(false);
-  let viewModel: State = $state({ kind: "loading" });
-  let editName: string = $state("");
-  let editDesc: string = $state("");
-  let editAvatarCid: string | null = $state(null);
-  let saving: boolean = $state(false);
-
-  async function load() {
-    viewModel = { kind: "loading" };
-    try {
-      const r = await fetch(`/api/profile/${encodeURIComponent(handle)}`);
-      if (!r.ok) {
-        viewModel = { kind: "error", message: `profile fetch failed: ${r.status}` };
-        return;
-      }
-      const data: AppViewProfile = await r.json();
-      viewModel = { kind: "ready", data };
-    } catch (e) {
-      viewModel = { kind: "error", message: String(e) };
-    }
-  }
-
-  function openEdit() {
-    if (viewModel.kind !== "ready") return;
-    editName = viewModel.data.display_name ?? "";
-    editDesc = viewModel.data.description ?? "";
-    editAvatarCid = viewModel.data.avatar_cid ?? null;
-    editing = true;
-  }
-
-  async function saveProfile() {
-    if (viewModel.kind !== "ready") return;
-    saving = true;
-    try {
-      await setMyProfile({
-        displayName: editName || undefined,
-        description: editDesc || undefined,
-        avatarBlobCid: editAvatarCid || undefined,
-      });
-      editing = false;
-      await load();
-    } catch (e) {
-      console.warn("profile save failed", e);
-    } finally {
-      saving = false;
-    }
-  }
-
-  async function pickAndUploadAvatar() {
-    const blob = await pickAndUploadImage();
-    if (!blob) return;
-    editAvatarCid = blob.cid;
-  }
-
-  onMount(() => {
-    void load();
-  });
-</script>
-
-<section class="user-profile">
-  <header class="user-profile__head">
-    {#if viewModel.kind === "ready"}
-      <div class="user-profile__avatar">
-        <Avatar
-          did={viewModel.data.did}
-          cid={viewModel.data.avatar_cid ?? null}
-          name={viewModel.data.display_name ?? viewModel.data.handle}
-          size={88}
-        />
-      </div>
-      <div class="user-profile__id">
-        <h2 class="user-profile__name">{viewModel.data.display_name ?? "@" + viewModel.data.handle}</h2>
-        <span class="user-profile__handle">@{viewModel.data.handle}</span>
-        <span class="user-profile__did" title={viewModel.data.did}>{viewModel.data.did}</span>
-      </div>
-      <div class="user-profile__actions">
-        {#if current_user_did && viewModel.data.did === current_user_did}
-          <button
-            class="btn btn--ghost"
-            type="button"
-            onclick={() => (editing ? (editing = false) : openEdit())}
-          >
-            {editing ? "cancel" : "edit profile"}
-          </button>
-        {/if}
-      </div>
-    {:else if viewModel.kind === "loading"}
-      <div class="user-profile__loading">loading…</div>
-    {:else}
-      <div class="user-profile__error">err: {viewModel.message}</div>
-    {/if}
-  </header>
-
-  {#if viewModel.kind === "ready" && viewModel.data.description}
-    <p class="user-profile__bio">{viewModel.data.description}</p>
-  {:else if viewModel.kind === "ready"}
-    <!--
-      Empty-state hint for a user who hasn't filled in their profile
-      yet. Only shown when *no* profile fields are populated (a
-      partial profile still renders whatever's there). The owner of
-      an empty profile sees an explicit "set up your profile" hint
-      instead of an awkward blank space.
-    -->
-    {#if !viewModel.data.display_name && !viewModel.data.description && !viewModel.data.avatar_cid}
-      <p class="user-profile__bio user-profile__bio--empty">
-        {#if current_user_did && viewModel.data.did === current_user_did}
-          // no profile yet — click "edit profile" to set one up.
-        {:else}
-          // no profile yet.
-        {/if}
-      </p>
-    {/if}
-  {/if}
-
-  {#if editing}
-    <div class="user-profile__edit">
-      <label>
-        <span class="key">display name</span>
-        <input type="text" bind:value={editName} maxlength="64" />
-      </label>
-      <label>
-        <span class="key">description</span>
-        <textarea
-          bind:value={editDesc}
-          rows="3"
-          maxlength="300"
-        ></textarea>
-      </label>
-      <div class="user-profile__edit-avatar">
-        <span class="key">avatar</span>
-        <div class="user-profile__edit-avatar-row">
-          {#if editAvatarCid}
-            <span class="meta">cid: {editAvatarCid.slice(0, 10)}…</span>
-            <button class="btn btn--ghost" type="button" onclick={() => (editAvatarCid = null)}>clear</button>
-          {:else}
-            <span class="meta">none</span>
-          {/if}
-          <button class="btn btn--ghost" type="button" onclick={pickAndUploadAvatar}>upload…</button>
-        </div>
-      </div>
-      <div class="user-profile__edit-actions">
-        <button class="btn btn--ghost" type="button" disabled={saving} onclick={saveProfile}>
-          {saving ? "saving…" : "save"}
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  {#if viewModel.kind === "ready"}
-    <dl class="user-profile__counts">
-      <div><dt>posts</dt><dd>{viewModel.data.post_count}</dd></div>
-      <div><dt>followers</dt><dd>{viewModel.data.followers}</dd></div>
-      <div><dt>following</dt><dd>{viewModel.data.following}</dd></div>
-    </dl>
-    <div class="user-profile__posts">
-      {#each viewModel.data.posts as p (p.uri)}
-        <PostCard post={p} on_thread_click={on_thread_click} />
-      {/each}
-    </div>
-  {/if}
-</section>
-
-<style>
-  .user-profile {
-    padding: 0 var(--s-3, 0.75rem);
-  }
-  .user-profile__head {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: var(--s-3, 0.75rem);
-    align-items: center;
-    padding: var(--s-3, 0.75rem) 0;
-    border-bottom: 1px dashed var(--line-2, #3a3a3a);
-  }
-  .user-profile__avatar {
-    display: flex;
-    align-items: center;
-  }
-  .user-profile__id {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .user-profile__name {
-    font-family: var(--font-mono, monospace);
-    font-size: 1.05rem;
-    color: var(--text, #e8e8e8);
-  }
-  .user-profile__handle {
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--orange, #ff6600);
-  }
-  .user-profile__did {
-    font-family: var(--font-mono, monospace);
-    font-size: 0.7rem;
-    color: var(--text-dim, #888);
-  }
-  .user-profile__bio {
-    font-family: var(--font-mono, monospace);
-    font-size: 0.85rem;
-    color: var(--text, #e8e8e8);
-    padding: var(--s-3, 0.75rem) 0;
-    border-bottom: 1px dashed var(--line, #2a2a2a);
-  }
-  .user-profile__bio--empty {
-    color: var(--text-dim, #888);
-    font-style: italic;
-  }
-  .user-profile__edit {
-    display: flex;
-    flex-direction: column;
-    gap: var(--s-2, 0.5rem);
-    padding: var(--s-3, 0.75rem) 0;
-    border-bottom: 1px dashed var(--line, #2a2a2a);
-  }
-  .user-profile__edit label,
-  .user-profile__edit-avatar {
-    display: flex;
-    align-items: baseline;
-    gap: var(--s-2, 0.5rem);
-  }
-  .user-profile__edit .key {
-    flex: 0 0 7rem;
-    color: var(--orange, #ff6600);
-    font-family: var(--font-mono, monospace);
-  }
-  .user-profile__edit input,
-  .user-profile__edit textarea {
-    flex: 1;
-    background: var(--bg, #0d0d0d);
-    border: 1px solid var(--line-2, #3a3a3a);
-    color: var(--text, #e8e8e8);
-    font-family: var(--font-mono, monospace);
-    padding: var(--s-1, 0.25rem) var(--s-2, 0.5rem);
-    border-radius: 4px;
-  }
-  .user-profile__edit-avatar-row {
-    flex: 1;
-    display: flex;
-    gap: var(--s-2, 0.5rem);
-    align-items: center;
-  }
-  .user-profile__edit-avatar-row .meta {
-    color: var(--text-dim, #888);
-    font-family: var(--font-mono, monospace);
-    font-size: 0.75rem;
-  }
-  .user-profile__edit-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-  .user-profile__counts {
-    display: flex;
-    gap: var(--s-5, 1.5rem);
-    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
-    margin: 0;
-    font-family: var(--font-mono, monospace);
-    font-size: 0.75rem;
-    color: var(--text-dim, #888);
-  }
-  .user-profile__counts > div {
-    display: flex;
-    flex-direction: column;
-  }
-  .user-profile__counts dt {
-    color: var(--text-dim, #888);
-    letter-spacing: 0.04em;
-  }
-  .user-profile__counts dd {
-    margin: 0;
-    color: var(--text, #e8e8e8);
-    font-weight: 700;
-  }
-  .user-profile__loading,
-  .user-profile__error {
-    font-family: var(--font-mono, monospace);
-    color: var(--text-dim, #888);
-    padding: var(--s-3, 0.75rem);
-  }
-  .user-profile__error {
-    color: var(--red, #ff3b30);
-  }
-</style>