From e1a9f6112194055b42f87f0aaa3571845a7ac8a3 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Thu, 26 Feb 2026 19:28:49 +0100
Subject: [PATCH] refactor 8

Nostr-Signature: 716cfe7b5d8b788e6e24092a6ad7e92de0b3d383c43a343f3c5bec4d2bbdd4b9 573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc e80ed3d9d471bd6907e212edfd7cf3f6039fa80e4434c35f0591729515eaa98c7a8ac54f2ac6f7a2fefb7846de0e2f0a120543a0dbe862c47c7710a653189b0c
---
 nostr/commit-signatures.jsonl                 |   1 +
 src/app.css                                   |   1 -
 src/lib/components/PRDetail.svelte            |  79 +-
 src/routes/+layout.svelte                     |  25 +-
 src/routes/api-docs/+page.svelte              |  33 +-
 .../[repo]/commits/[hash]/verify/+server.ts   |   6 +-
 .../api/repos/[npub]/[repo]/tree/+server.ts   |  21 +-
 src/routes/repos/+page.svelte                 | 248 ++---
 src/routes/repos/[npub]/[repo]/+page.svelte   | 917 +++++-------------
 .../[repo]/components/DiscussionsTab.svelte   |  20 +-
 .../[npub]/[repo]/components/DocsTab.svelte   | 139 ++-
 .../[repo]/components/DocsViewer.svelte       | 162 ++--
 .../[npub]/[repo]/components/FilesTab.svelte  | 230 ++++-
 .../[repo]/components/HistoryTab.svelte       | 107 +-
 .../[npub]/[repo]/components/IssuesTab.svelte | 116 ++-
 .../[npub]/[repo]/components/PRsTab.svelte    |  48 +-
 .../[repo]/components/PatchesTab.svelte       |  78 +-
 .../[repo]/components/StatusTabLayout.svelte  |  38 +-
 .../[npub]/[repo]/components/TabLayout.svelte | 109 ++-
 .../dialogs/CloneUrlVerificationDialog.svelte |   6 +-
 .../dialogs/VerificationDialog.svelte         |   4 +-
 .../[npub]/[repo]/hooks/use-repo-effects.ts   |  77 +-
 .../[npub]/[repo]/services/auth-operations.ts | 122 +++
 .../[npub]/[repo]/services/patch-handlers.ts  |  42 +
 .../[npub]/[repo]/services/repo-operations.ts | 264 +++++
 .../[npub]/[repo]/services/tag-operations.ts  |   6 +-
 .../repos/[npub]/[repo]/stores/repo-state.ts  |   2 +-
 .../[npub]/[repo]/utils/content-renderer.ts   |  87 ++
 .../[npub]/[repo]/utils/discussion-utils.ts   |  30 +
 .../[npub]/[repo]/utils/file-handlers.ts      | 134 +++
 .../[npub]/[repo]/utils/repo-handlers.ts      |  78 ++
 31 files changed, 2118 insertions(+), 1112 deletions(-)
 create mode 100644 src/routes/repos/[npub]/[repo]/services/auth-operations.ts
 create mode 100644 src/routes/repos/[npub]/[repo]/services/patch-handlers.ts
 create mode 100644 src/routes/repos/[npub]/[repo]/utils/content-renderer.ts
 create mode 100644 src/routes/repos/[npub]/[repo]/utils/file-handlers.ts
 create mode 100644 src/routes/repos/[npub]/[repo]/utils/repo-handlers.ts

diff --git a/nostr/commit-signatures.jsonl b/nostr/commit-signatures.jsonl
index 23235a2..1257ae4 100644
--- a/nostr/commit-signatures.jsonl
+++ b/nostr/commit-signatures.jsonl
@@ -100,3 +100,4 @@
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1772110337,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","refactor 4"]],"content":"Signed commit: refactor 4","id":"d330d1a096e5f3951e8b2a66160a23c5ac28aa94313ecd0948c7e50baa60bdbb","sig":"febf4088cca3f7223f55ab300ed7fdb7b333c03d2534b05721dfaf9d9284f4599b385ba54379890fa6b846aed02d656a5e45429a6dd571dddbb997be6d8159b2"}
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1772111536,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","refactor 5"]],"content":"Signed commit: refactor 5","id":"47651ed0aee8072f356fbac30b6168f2c985bcca392f9ed7d7c38d9670d90f16","sig":"2ca5d04d4a619dc3e02962249f7c650e3a561315897b329f4493e87148c5dd89fbcb6694515a72d0d17e64c9930e57bd7761e27b353275bb1ada9449330f4e1c"}
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1772112054,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","refactor 6"]],"content":"Signed commit: refactor 6","id":"cd9b7e015ee3bd6a4c4ab7d54d90ab411a08c29f249158c4cdea2b12996b6b44","sig":"2a8fd0a3718169df1517c0b939ec9ea9793da4dc07b20d9366f09fe70b5268e94451916f975e2cea1a3741419440189d31f844e79863e84de00c0be7c449e92a"}
+{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1772112920,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","refactor 7"]],"content":"Signed commit: refactor 7","id":"80f54ac61390cfbc8f2496a162d7065c447033a2e085ab5886c8138e337e93f9","sig":"f64bd2c965eff3534ad68e245651c189dc925d9613dd85557d88af8c692361ade13ccdd9deb88ae07eb227aa002af99d525a7fdf6f29eca854b5a02882ef226f"}
diff --git a/src/app.css b/src/app.css
index 3dfd118..e19172c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1221,7 +1221,6 @@ button.theme-option.active img.theme-icon-option,
 .repo-badge:hover {
   background: var(--bg-secondary);
   border-color: var(--accent);
-  transform: translateY(-1px);
   box-shadow: 0 2px 4px var(--shadow-color-light);
   font-size: 0.9rem; /* Preserve font size on hover */
   color: var(--text-primary);
diff --git a/src/lib/components/PRDetail.svelte b/src/lib/components/PRDetail.svelte
index 9b11531..dfc15c8 100644
--- a/src/lib/components/PRDetail.svelte
+++ b/src/lib/components/PRDetail.svelte
@@ -10,7 +10,16 @@
   import { KIND } from '../types/nostr.js';
   import { nip19 } from 'nostr-tools';
   import CommentRenderer from './CommentRenderer.svelte';
-  import type { Comment } from './CommentRenderer.svelte';
+  // Define Comment type locally to match CommentRenderer's export
+  type Comment = {
+    id: string;
+    content: string;
+    author: string;
+    createdAt: number;
+    kind: number;
+    pubkey: string;
+    replies?: Comment[];
+  };
   import { loadNostrLinks } from '../utils/nostr-links.js';
   import type { NostrEvent } from '../types/nostr.js';
 
@@ -129,12 +138,14 @@
           await loadNostrLinks(comment.content, nostrClient, nostrLinkEvents, nostrLinkProfiles);
         }
         for (const highlight of highlights) {
-          if (highlight.comment) {
+          if (highlight.comment && typeof highlight.comment === 'string') {
             await loadNostrLinks(highlight.comment, nostrClient, nostrLinkEvents, nostrLinkProfiles);
           }
           if (highlight.comments) {
             for (const comment of highlight.comments) {
-              await loadNostrLinks(comment.content, nostrClient, nostrLinkEvents, nostrLinkProfiles);
+              if (comment.content && typeof comment.content === 'string') {
+                await loadNostrLinks(comment.content, nostrClient, nostrLinkEvents, nostrLinkProfiles);
+              }
             }
           }
         }
@@ -734,7 +745,7 @@
     margin-bottom: 1rem;
   }
 
-  .add-comment-btn, .reply-btn {
+  .add-comment-btn {
     padding: 0.4rem 0.8rem;
     background: var(--button-primary);
     color: var(--accent-text, #ffffff);
@@ -746,11 +757,11 @@
     transition: background 0.2s ease;
   }
 
-  .add-comment-btn:hover, .reply-btn:hover {
+  .add-comment-btn:hover {
     background: var(--button-primary-hover);
   }
 
-  .highlight-item, .comment-item {
+  .highlight-item {
     margin-bottom: 1.5rem;
     padding: 1rem;
     background: var(--bg-secondary);
@@ -758,22 +769,7 @@
     border-left: 3px solid var(--accent);
   }
 
-  .comment-item.nested {
-    margin-left: 2rem;
-    margin-top: 0.75rem;
-    border-left-color: var(--success-text);
-    background: var(--bg-secondary);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  }
-
-  .comment-item.nested .comment-content {
-    border-left-color: var(--success-text);
-    background: var(--card-bg);
-    margin: 0.5rem 0;
-    padding: 0.875rem 1rem;
-  }
-
-  .highlight-header, .comment-header {
+  .highlight-header {
     display: flex;
     gap: 1rem;
     margin-bottom: 0.5rem;
@@ -781,7 +777,7 @@
     color: var(--text-muted);
   }
 
-  .highlight-author, .comment-author {
+  .highlight-author {
     font-weight: bold;
     color: var(--text-primary);
   }
@@ -844,17 +840,6 @@
     filter: brightness(0) saturate(100%) invert(1);
   }
 
-  .comment-content {
-    margin: 0.75rem 0;
-    padding: 1rem 1.25rem;
-    background: var(--bg-secondary);
-    border-radius: 6px;
-    border-left: 4px solid var(--accent);
-    color: var(--text-primary);
-    font-size: 1rem;
-    line-height: 1.6;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
 
   .highlight-comments {
     margin-top: 1rem;
@@ -1004,32 +989,6 @@
     background: var(--success-hover, #218838);
   }
 
-  .close-btn {
-    background: var(--error-text, #dc3545);
-    color: white;
-  }
-
-  .close-btn:hover:not(:disabled) {
-    background: var(--error-hover, #c82333);
-  }
-
-  .reopen-btn {
-    background: var(--accent, #007bff);
-    color: white;
-  }
-
-  .reopen-btn:hover:not(:disabled) {
-    background: var(--accent-hover, #0056b3);
-  }
-
-  .draft-btn {
-    background: var(--bg-tertiary, #6c757d);
-    color: white;
-  }
-
-  .draft-btn:hover:not(:disabled) {
-    background: var(--bg-secondary, #5a6268);
-  }
 
   @media (max-width: 768px) {
     .pr-actions {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 64145e4..9b81d0d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -290,7 +290,7 @@
   }
 
   async function checkPendingTransfers(userPubkeyHex: string) {
-    if (!isMounted) return;
+    if (!isMounted || typeof window === 'undefined') return;
     
     try {
       // Add timeout to prevent hanging
@@ -313,14 +313,29 @@
           pendingTransfers = data.pendingTransfers.filter(
             (t: { eventId: string }) => !dismissedTransfers.has(t.eventId)
           );
+        } else if (isMounted) {
+          // Clear transfers if response is ok but no transfers
+          pendingTransfers = [];
         }
+      } else if (response.status === 404 && isMounted) {
+        // Endpoint doesn't exist - silently ignore
+        pendingTransfers = [];
       }
     } catch (err) {
-      // Only log if it's not an abort (timeout) and component is still mounted
-      if (isMounted && err instanceof Error && err.name !== 'AbortError') {
-        console.error('Failed to check for pending transfers:', err);
+      // Only log if it's not an abort (timeout), not a network error, and component is still mounted
+      if (isMounted && err instanceof Error) {
+        // Ignore expected errors
+        if (err.name === 'AbortError') {
+          // Timeout - silently ignore
+          return;
+        }
+        if (err.name === 'TypeError' && err.message.includes('NetworkError')) {
+          // Network error (server not available, CORS, etc.) - silently ignore
+          return;
+        }
+        // Log other unexpected errors
+        console.warn('Failed to check for pending transfers:', err);
       }
-      // Silently ignore timeouts - they're expected if the server is slow
     }
   }
 
diff --git a/src/routes/api-docs/+page.svelte b/src/routes/api-docs/+page.svelte
index 88a4e09..f28bca8 100644
--- a/src/routes/api-docs/+page.svelte
+++ b/src/routes/api-docs/+page.svelte
@@ -1,28 +1,47 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { page } from '$app/stores';
   import { isNIP07Available, getPublicKeyWithNIP07, signEventWithNIP07 } from '$lib/services/nostr/nip07-signer.js';
   import type { NostrEvent } from '$lib/types/nostr.js';
 
-  const browserExample = `// Get user's pubkey (hex format) from NIP-07 extension
+  // Get the actual domain from page data or current URL
+  const getApiBaseUrl = () => {
+    const gitDomain = $page.data?.gitDomain;
+    const currentHost = $page.url?.host;
+    
+    // Use gitDomain if available and not localhost, otherwise use current host
+    if (gitDomain && !gitDomain.startsWith('localhost') && !gitDomain.startsWith('127.0.0.1')) {
+      return `https://${gitDomain}`;
+    } else if (currentHost) {
+      const protocol = currentHost.startsWith('localhost') || currentHost.startsWith('127.0.0.1') ? 'http' : 'https';
+      return `${protocol}://${currentHost}`;
+    }
+    // Fallback
+    return typeof window !== 'undefined' ? window.location.origin : 'https://gitrepublic.imwald.eu';
+  };
+
+  const apiBaseUrl = $derived(getApiBaseUrl());
+
+  const browserExample = $derived(`// Get user's pubkey (hex format) from NIP-07 extension
 const userPubkey = await window.nostr.getPublicKey();
 // Convert npub to hex if needed
 const userPubkeyHex = /* convert npub to hex */;
 
 // Make API request
-const response = await fetch('/api/repos/list', {
+const response = await fetch('${apiBaseUrl}/api/repos/list', {
   headers: {
     'X-User-Pubkey': userPubkeyHex
   }
 });
-const data = await response.json();`;
+const data = await response.json();`);
 
-  const nip98Example = `// Create NIP-98 auth event
+  const nip98Example = $derived(`// Create NIP-98 auth event
 import { finalizeEvent } from 'nostr-tools';
 const authEvent = finalizeEvent({
   kind: 27235, // NIP-98 auth kind
   created_at: Math.floor(Date.now() / 1000),
   tags: [
-    ['u', 'https://gitrepublic.com/api/repos/list'],
+    ['u', '${apiBaseUrl}/api/repos/list'],
     ['method', 'GET']
   ],
   content: ''
@@ -32,11 +51,11 @@ const authEvent = finalizeEvent({
 const base64Event = btoa(JSON.stringify(authEvent));
 
 // Make API request
-const response = await fetch('https://gitrepublic.com/api/repos/list', {
+const response = await fetch('${apiBaseUrl}/api/repos/list', {
   headers: {
     'Authorization': \`Nostr \${base64Event}\`
   }
-});`;
+});`);
 
   onMount(() => {
     // Load Swagger UI from local static files
diff --git a/src/routes/api/repos/[npub]/[repo]/commits/[hash]/verify/+server.ts b/src/routes/api/repos/[npub]/[repo]/commits/[hash]/verify/+server.ts
index e9ea45f..2abe2e9 100644
--- a/src/routes/api/repos/[npub]/[repo]/commits/[hash]/verify/+server.ts
+++ b/src/routes/api/repos/[npub]/[repo]/commits/[hash]/verify/+server.ts
@@ -6,7 +6,7 @@ import { json } from '@sveltejs/kit';
 // @ts-ignore - SvelteKit generates this type
 import type { RequestHandler } from './$types';
 import { createRepoGetHandler } from '$lib/utils/api-handlers.js';
-import type { RepoRequestContext } from '$lib/utils/api-context.js';
+import type { RepoRequestContext, RequestEvent } from '$lib/utils/api-context.js';
 import { handleApiError } from '$lib/utils/error-handler.js';
 import { nostrClient, fileManager } from '$lib/services/service-registry.js';
 import { verifyCommitFromMessage } from '$lib/services/git/commit-signer.js';
@@ -18,8 +18,8 @@ const repoRoot = typeof process !== 'undefined' && process.env?.GIT_REPO_ROOT
   : '/repos';
 
 export const GET: RequestHandler = createRepoGetHandler(
-  async (context: RepoRequestContext) => {
-    const { hash } = context.params as { hash: string };
+  async (context: RepoRequestContext, event: RequestEvent) => {
+    const { hash } = event.params;
     
     if (!hash) {
       throw handleApiError(new Error('Missing commit hash'), { operation: 'verifyCommit', npub: context.npub, repo: context.repo }, 'Missing commit hash');
diff --git a/src/routes/api/repos/[npub]/[repo]/tree/+server.ts b/src/routes/api/repos/[npub]/[repo]/tree/+server.ts
index 213e4d4..b9a3138 100644
--- a/src/routes/api/repos/[npub]/[repo]/tree/+server.ts
+++ b/src/routes/api/repos/[npub]/[repo]/tree/+server.ts
@@ -290,14 +290,29 @@ export const GET: RequestHandler = createRepoGetHandler(
       }
       
       // Log the actual error for debugging
-      logger.error({ error: err, npub: context.npub, repo: context.repo }, '[Tree] Error listing files');
-      // Check if it's a "not found" error
-      if (err instanceof Error && err.message.includes('not found')) {
+      logger.error({ error: err, npub: context.npub, repo: context.repo, path: context.path }, '[Tree] Error listing files');
+      
+      // For optional paths (like "docs"), return empty array instead of 404
+      // This allows components to gracefully handle missing directories
+      const optionalPaths = ['docs'];
+      if (context.path && optionalPaths.includes(context.path.toLowerCase())) {
+        logger.debug({ npub: context.npub, repo: context.repo, path: context.path }, '[Tree] Optional path not found, returning empty array');
+        return json([]);
+      }
+      
+      // Check if it's a "not found" error for the repo itself
+      if (err instanceof Error && (err.message.includes('Repository not found') || err.message.includes('not cloned'))) {
         throw handleNotFoundError(
           err.message,
           { operation: 'listFiles', npub: context.npub, repo: context.repo }
         );
       }
+      
+      // For other errors with optional paths, return empty array
+      if (context.path && optionalPaths.includes(context.path.toLowerCase())) {
+        return json([]);
+      }
+      
       // Otherwise, it's a server error
       throw handleApiError(
         err,
diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte
index 7e418bc..250a139 100644
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -637,38 +637,57 @@
 <div class="container">
   <main>
     {#if userPubkey && myRepos.length > 0}
-      <div class="my-repos-section">
-        <h3>My Repositories</h3>
-        <div class="my-repos-badges">
+      <!-- My Repositories Section -->
+      <div class="repo-section">
+        <div class="section-header">
+          <h3>My Repositories</h3>
+          <span class="section-badge">{myRepos.length}</span>
+        </div>
+        <div class="repos-list">
           {#each myRepos as item}
             {@const repo = item.event}
             {@const repoImage = getRepoImage(repo)}
             {@const isTransferred = item.transferred || false}
-            <a 
-              href="/repos/{item.npub}/{item.repoName}" 
-              class="repo-badge"
-              class:transferred={isTransferred}
-              title={isTransferred ? 'Transferred to another owner' : ''}
-            >
-              {#if repoImage}
-                <img src={repoImage} alt={getRepoName(repo)} class="repo-badge-image" />
-              {:else}
-                <img src="/icons/package.svg" alt="Repository" class="repo-badge-icon" />
-              {/if}
-              <span class="repo-badge-name">{getRepoName(repo)}</span>
-              {#if isTransferred}
-                <span class="transferred-badge" title="Transferred">↗</span>
-              {/if}
-            </a>
+            <div class="repo-card repo-card-my" class:transferred={isTransferred}>
+              <div class="repo-card-content">
+                <div class="repo-header">
+                  <div class="repo-header-text">
+                    <div class="repo-title-row">
+                      {#if repoImage}
+                        <img src={repoImage} alt="Repository" class="repo-avatar" />
+                      {/if}
+                      <h3>{getRepoName(repo)}</h3>
+                      {#if isTransferred}
+                        <span class="transferred-badge" title="Transferred to another owner">↗</span>
+                      {/if}
+                    </div>
+                    {#if getRepoDescription(repo)}
+                      <p class="description">{getRepoDescription(repo)}</p>
+                    {/if}
+                  </div>
+                  <a href="/repos/{item.npub}/{item.repoName}" class="view-button" title="View repository">
+                    <img src="/icons/arrow-right.svg" alt="View" />
+                  </a>
+                </div>
+                <div class="repo-meta">
+                  <span>Created: {new Date(repo.created_at * 1000).toLocaleDateString()}</span>
+                  {#if getForkCount(repo) > 0}
+                    {@const forkCount = getForkCount(repo)}
+                    <span class="fork-count">🍴 {forkCount} fork{forkCount === 1 ? '' : 's'}</span>
+                  {/if}
+                </div>
+              </div>
+            </div>
           {/each}
         </div>
       </div>
     {/if}
 
     <!-- Most Favorited Repositories -->
-    <div class="most-favorited-section">
+    <div class="repo-section">
       <div class="section-header">
         <h3>Most Favorited Repositories</h3>
+        <span class="section-badge">{mostFavoritedRepos.length}</span>
         {#if loadingMostFavorited}
           <span class="loading-indicator">Loading...</span>
         {/if}
@@ -678,24 +697,38 @@
       {:else if mostFavoritedRepos.length === 0}
         <div class="empty">No favorited repositories found.</div>
       {:else}
-        <div class="most-favorited-list">
+        <div class="repos-list">
           {#each mostFavoritedRepos as item}
             {@const repo = item.event}
             {@const repoImage = getRepoImage(repo)}
-            <a href="/repos/{item.npub}/{item.repoName}" class="most-favorited-item">
-              {#if repoImage}
-                <img src={repoImage} alt={getRepoName(repo)} class="most-favorited-image" />
-              {:else}
-                <img src="/icons/package.svg" alt="Repository" class="most-favorited-icon" />
-              {/if}
-              <div class="most-favorited-info">
-                <h4>{getRepoName(repo)}</h4>
-                {#if getRepoDescription(repo)}
-                  <p class="most-favorited-description">{getRepoDescription(repo)}</p>
-                {/if}
-                <span class="most-favorited-count">{item.favoriteCount} {item.favoriteCount === 1 ? 'favorite' : 'favorites'}</span>
+            <div class="repo-card repo-card-favorited">
+              <div class="repo-card-content">
+                <div class="repo-header">
+                  <div class="repo-header-text">
+                    <div class="repo-title-row">
+                      {#if repoImage}
+                        <img src={repoImage} alt="Repository" class="repo-avatar" />
+                      {/if}
+                      <h3>{getRepoName(repo)}</h3>
+                    </div>
+                    {#if getRepoDescription(repo)}
+                      <p class="description">{getRepoDescription(repo)}</p>
+                    {/if}
+                  </div>
+                  <a href="/repos/{item.npub}/{item.repoName}" class="view-button" title="View repository">
+                    <img src="/icons/arrow-right.svg" alt="View" />
+                  </a>
+                </div>
+                <div class="repo-meta">
+                  <span>Created: {new Date(repo.created_at * 1000).toLocaleDateString()}</span>
+                  <span class="favorite-count">⭐ {item.favoriteCount} {item.favoriteCount === 1 ? 'favorite' : 'favorites'}</span>
+                  {#if getForkCount(repo) > 0}
+                    {@const forkCount = getForkCount(repo)}
+                    <span class="fork-count">🍴 {forkCount} fork{forkCount === 1 ? '' : 's'}</span>
+                  {/if}
+                </div>
               </div>
-            </a>
+            </div>
           {/each}
         </div>
         {#if mostFavoritedCache && mostFavoritedCache.data.length > 10}
@@ -745,13 +778,7 @@
             {#each registeredRepos as item}
               {@const repo = item.event}
               {@const repoImage = getRepoImage(repo)}
-              {@const repoBanner = getRepoBanner(repo)}
               <div class="repo-card repo-card-registered">
-                {#if repoBanner}
-                  <div class="repo-card-banner">
-                    <img src={repoBanner} alt="Banner" />
-                  </div>
-                {/if}
                 <div class="repo-card-content">
                   <div class="repo-header">
                     <div class="repo-header-text">
@@ -799,14 +826,8 @@
             {#each localRepos as item}
               {@const repo = item.announcement}
               {@const repoImage = repo ? getRepoImage(repo) : null}
-              {@const repoBanner = repo ? getRepoBanner(repo) : null}
               {@const canDelete = isOwner(item.npub, item.repoName)}
               <div class="repo-card repo-card-local">
-                {#if repoBanner}
-                  <div class="repo-card-banner">
-                    <img src={repoBanner} alt="Banner" />
-                  </div>
-                {/if}
                 <div class="repo-card-content">
                   <div class="repo-header">
                     <div class="repo-header-text">
@@ -859,105 +880,11 @@
 </div>
 
 <style>
-  .most-favorited-section {
-    margin: 2rem 0;
-    padding: 1.5rem;
-    background: var(--card-bg, #ffffff);
-    border: 1px solid var(--border-color, #e0e0e0);
-    border-radius: 0.5rem;
-  }
-
-  .most-favorited-section .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .most-favorited-section .section-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    color: var(--text-primary, #1a1a1a);
-  }
-
   .loading-indicator {
     color: var(--text-secondary, #666);
     font-size: 0.875rem;
   }
 
-  .most-favorited-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .most-favorited-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    background: var(--bg-secondary, #f5f5f5);
-    border: 1px solid var(--border-color, #e0e0e0);
-    border-radius: 0.5rem;
-    text-decoration: none;
-    color: inherit;
-    transition: all 0.2s ease;
-  }
-
-  .most-favorited-item:hover {
-    background: var(--bg-tertiary, #eeeeee);
-    border-color: var(--accent, #007bff);
-    transform: translateY(-2px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .most-favorited-image,
-  .most-favorited-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 0.25rem;
-    object-fit: cover;
-    flex-shrink: 0;
-  }
-
-  .most-favorited-icon {
-    padding: 8px;
-    background: var(--bg-tertiary, #eeeeee);
-  }
-
-  .most-favorited-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .most-favorited-info h4 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.1rem;
-    color: var(--text-primary, #1a1a1a);
-  }
-
-  .most-favorited-description {
-    margin: 0 0 0.5rem 0;
-    color: var(--text-secondary, #666);
-    font-size: 0.9rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  .most-favorited-count {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    background: var(--accent, #007bff);
-    color: var(--accent-text, #ffffff);
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
   .pagination {
     display: flex;
     justify-content: center;
@@ -981,7 +908,6 @@
 
   .pagination button:hover:not(:disabled) {
     background: var(--accent-hover, #0056b3);
-    transform: translateY(-1px);
   }
 
   .pagination button:disabled {
@@ -1006,27 +932,15 @@
     border: 1px solid var(--border-color, #e0e0e0);
     border-radius: 0.5rem;
     overflow: hidden;
-    transition: all 0.2s ease;
+    transition: box-shadow 0.2s ease;
     display: flex;
     flex-direction: column;
+    min-height: 160px;
+    height: 100%;
   }
 
   .repo-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
-  }
-
-  .repo-card-banner {
-    width: 100%;
-    height: 120px;
-    overflow: hidden;
-    background: var(--bg-secondary, #f5f5f5);
-  }
-
-  .repo-card-banner img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
   }
 
   .repo-card-content {
@@ -1034,6 +948,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+    min-height: 0;
   }
 
   .repo-header {
@@ -1103,7 +1018,6 @@
 
   .view-button:hover {
     background: var(--accent-hover, #0056b3);
-    transform: translateX(2px);
   }
 
   .view-button img {
@@ -1154,6 +1068,26 @@
     color: var(--text-secondary, #666);
   }
 
+  .favorite-count {
+    color: var(--text-secondary, #666);
+    font-weight: 500;
+  }
+
+  .transferred-badge {
+    font-size: 0.875rem;
+    color: var(--text-secondary, #666);
+    margin-left: 0.5rem;
+    opacity: 0.7;
+  }
+
+  .repo-card.transferred {
+    opacity: 0.7;
+  }
+
+  .repo-card.transferred:hover {
+    opacity: 0.9;
+  }
+
   .repo-section {
     margin: 2rem 0;
   }
diff --git a/src/routes/repos/[npub]/[repo]/+page.svelte b/src/routes/repos/[npub]/[repo]/+page.svelte
index 6e7ed8e..97d4570 100644
--- a/src/routes/repos/[npub]/[repo]/+page.svelte
+++ b/src/routes/repos/[npub]/[repo]/+page.svelte
@@ -91,6 +91,29 @@
     formatPubkey as formatPubkeyUtil,
     getMimeType as getMimeTypeUtil
   } from './utils/file-helpers.js';
+  import {
+    handleContentChange as handleContentChangeUtil,
+    handleFileClick as handleFileClickUtil,
+    copyFileContent as copyFileContentUtil,
+    downloadFile as downloadFileUtil,
+    handleBack as handleBackUtil,
+    toggleWordWrap as toggleWordWrapUtil
+  } from './utils/file-handlers.js';
+  import {
+    copyCloneUrl as copyCloneUrlUtil
+  } from './utils/repo-handlers.js';
+  import {
+    countAllReplies as countAllRepliesUtil,
+    toggleThread as toggleThreadUtil
+  } from './utils/discussion-utils.js';
+  import {
+    checkAuth as checkAuthService,
+    login as loginService
+  } from './services/auth-operations.js';
+  import {
+    handlePatchCodeSelection as handlePatchCodeSelectionUtil,
+    startPatchComment as startPatchCommentUtil
+  } from './services/patch-handlers.js';
   import {
     createBranch as createBranchService,
     deleteBranch as deleteBranchService,
@@ -148,7 +171,13 @@
     loadBookmarkStatus as loadBookmarkStatusService,
     loadCloneUrlReachability as loadCloneUrlReachabilityService,
     loadForkInfo as loadForkInfoService,
-    loadRepoImages as loadRepoImagesService
+    loadRepoImages as loadRepoImagesService,
+    generateAnnouncementFileForRepo as generateAnnouncementFileForRepoService,
+    copyVerificationToClipboard as copyVerificationToClipboardService,
+    downloadVerificationFile as downloadVerificationFileService,
+    verifyCloneUrl as verifyCloneUrlService,
+    deleteAnnouncement as deleteAnnouncementService,
+    copyEventId as copyEventIdService
   } from './services/repo-operations.js';
   import {
     loadReadme as loadReadmeService
@@ -158,13 +187,9 @@
   let state = $state(createRepoState());
   
   // Local variables for component-specific state
-  let announcementEventId: string | null = null;
+  let announcementEventId = { value: null as string | null };
   let applying: Record<string, boolean> = {};
   
-  // Initialize effects
-  usePageDataEffect(state, () => $page.data);
-  usePageParamsEffect(state, () => $page.params as { npub?: string; repo?: string });
-
   // Extract fields from announcement for convenience
   const repoAnnouncement = $derived(state.pageData.announcement);
   const repoName = $derived(repoAnnouncement?.tags.find((t: string[]) => t[0] === 'name')?.[1] || state.repo);
@@ -261,15 +286,44 @@
   let cachedUserEmail: string | null = null;
   let cachedUserName: string | null = null;
   
-  // Initialize maintainers effect (using derived values directly in hook)
-  useMaintainersEffect(state, () => repoOwnerPubkeyDerived, () => repoMaintainers, loadAllMaintainers, () => $page.data);
+  // Initialize user store sync effect (will be called in onMount to avoid SSR issues)
+  const cachedUserData = { email: cachedUserEmail, name: cachedUserName };
   
-  // Initialize auto-save effect
-  useAutoSaveEffect(state, autoSaveInterval, setupAutoSave);
+  // Initialize patch highlights, tab change, and branch change effects
+  const lastTab = { value: null as string | null };
+  const lastBranch = { value: null as string | null };
   
-  // Initialize user store sync effect
-  const cachedUserData = { email: cachedUserEmail, name: cachedUserName };
-  useUserStoreEffect(state, cachedUserData, () => $userStore, {
+  // Initialize activeTab from URL query parameter
+  $effect(() => {
+    if (typeof window === 'undefined' || !state.isMounted) return;
+    const tabFromQuery = $page.url.searchParams.get('tab');
+    
+    const validTabs = ['docs', 'files', 'issues', 'prs', 'patches', 'discussions', 'history', 'tags', 'code-search'];
+    
+    if (tabFromQuery && validTabs.includes(tabFromQuery)) {
+      // Update from URL query parameter
+      if (tabFromQuery !== state.ui.activeTab) {
+        state.ui.activeTab = tabFromQuery as typeof state.ui.activeTab;
+      }
+    } else if (!tabFromQuery) {
+      // No tab in query params - 'files' is the default (no param = files tab)
+      // Only set default if activeTab is not already a valid tab
+      if (!validTabs.includes(state.ui.activeTab)) {
+        state.ui.activeTab = 'files';
+      }
+      // If activeTab is already 'files', do nothing (user is on files tab)
+      // If activeTab is another valid tab but URL has no param, don't override
+      // This allows onTabChange handlers to manage state without interference
+    }
+  });
+  
+  // Initialize effects at component level (must be top-level, not in onMount)
+  // Hooks return effect callbacks that we call within $effect blocks
+  $effect(usePageDataEffect(state, () => $page.data));
+  $effect(usePageParamsEffect(state, () => $page.params as { npub?: string; repo?: string }));
+  $effect(useMaintainersEffect(state, () => repoOwnerPubkeyDerived, () => repoMaintainers, loadAllMaintainers, () => $page.data));
+  $effect(useAutoSaveEffect(state, autoSaveInterval, setupAutoSave));
+  $effect(useUserStoreEffect(state, cachedUserData, () => $userStore, {
     checkMaintainerStatus,
     loadBookmarkStatus,
     loadAllMaintainers,
@@ -279,23 +333,32 @@
     loadReadme,
     loadTags,
     loadDiscussions
-  });
+  }));
+  $effect(useRepoImagesEffect(state, () => $page.data));
+  $effect(usePatchHighlightsEffect(state, loadPatchHighlights));
+  $effect(useTabChangeEffect(state, lastTab, findReadmeFileUtil, {
+    loadFiles,
+    loadFile,
+    loadCommitHistory,
+    loadTags,
+    loadReleases,
+    loadIssues,
+    loadPRs,
+    loadDocumentation,
+    loadDiscussions,
+    loadPatches
+  }));
+  $effect(useBranchChangeEffect(state, lastBranch, {
+    loadReadme,
+    loadFile,
+    loadFiles,
+    loadCommitHistory,
+    loadDocumentation
+  }));
   
   // Function to toggle word wrap and refresh highlighting
   async function toggleWordWrap() {
-    state.ui.wordWrap = !state.ui.wordWrap;
-    console.log('Word wrap toggled:', state.ui.wordWrap);
-    // Force DOM update by accessing the element
-    await new Promise(resolve => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(resolve);
-      });
-    });
-    // Re-apply syntax highlighting to refresh the display
-    if (state.files.currentFile && state.files.content) {
-      const ext = state.files.currentFile.split('.').pop() || '';
-      await applySyntaxHighlighting(state.files.content, ext);
-    }
+    await toggleWordWrapUtil(state, { applySyntaxHighlighting });
   }
   
   // Helper: Check if repo needs to be cloned for write operations
@@ -308,66 +371,25 @@
   
   // Copy clone URL to clipboard
   async function copyCloneUrl() {
-    if (state.clone.copyingUrl) return;
-    
-    state.clone.copyingUrl = true;
-    try {
-      // Use the current page URL to get the correct host and port
-      // This ensures we use the same domain/port the user is currently viewing
-      // Guard against SSR - $page store can only be accessed in component context
-      if (typeof window === 'undefined') return;
-      // Guard against SSR - $page.url might not be available
-      if (typeof window === 'undefined' || !$page?.url) {
-        return '';
-      }
-      const currentUrl = $page.url;
-      const host = currentUrl.host; // Includes port if present (e.g., "localhost:5173")
-      const protocol = currentUrl.protocol.slice(0, -1); // Remove trailing ":"
-      
-      // Use /api/git/ format for better compatibility with commit signing hook
-      const cloneUrl = `${protocol}://${host}/api/git/${state.npub}/${state.repo}.git`;
-      const cloneCommand = `git clone ${cloneUrl}`;
-      
-      // Try to use the Clipboard API
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(cloneCommand);
-        alert(`Clone command copied to clipboard!\n\n${cloneCommand}`);
-      } else {
-        // Fallback: create a temporary textarea
-        const textarea = document.createElement('textarea');
-        textarea.value = cloneCommand;
-        textarea.style.position = 'fixed';
-        textarea.style.opacity = '0';
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textarea);
-        alert(`Clone command copied to clipboard!\n\n${cloneCommand}`);
-      }
-    } catch (err) {
-      console.error('Failed to copy clone command:', err);
-      alert('Failed to copy clone command to clipboard');
-    } finally {
-      state.clone.copyingUrl = false;
-    }
+    await copyCloneUrlUtil(state, $page.data, $page.url);
   }
   
 
   
   // Tabs menu - defined after state.issues and state.prs
-  // Order: Files, Issues, PRs, Patches, Discussion, History, Tags, Code Search, Docs
+  // Order: Docs, Files, Issues, PRs, Patches, Discussion, History, Tags, Code Search
   // Show tabs that require cloned repo when repo is cloned OR API fallback is available
   const tabs = $derived.by(() => {
     const allTabs = [
+      { id: 'docs', label: 'Documentation', icon: '/icons/book.svg', requiresClone: false },
       { id: 'files', label: 'Files', icon: '/icons/file-text.svg', requiresClone: true },
-      { id: 'state.issues', label: 'Issues', icon: '/icons/alert-circle.svg', requiresClone: false },
-      { id: 'state.prs', label: 'Pull Requests', icon: '/icons/git-pull-request.svg', requiresClone: false },
-      { id: 'state.patches', label: 'Patches', icon: '/icons/clipboard-list.svg', requiresClone: false },
-      { id: 'state.discussions', label: 'Discussions', icon: '/icons/message-circle.svg', requiresClone: false },
+      { id: 'issues', label: 'Issues', icon: '/icons/alert-circle.svg', requiresClone: false },
+      { id: 'prs', label: 'Pull Requests', icon: '/icons/git-pull-request.svg', requiresClone: false },
+      { id: 'patches', label: 'Patches', icon: '/icons/clipboard-list.svg', requiresClone: false },
+      { id: 'discussions', label: 'Discussions', icon: '/icons/message-circle.svg', requiresClone: false },
       { id: 'history', label: 'Commit History', icon: '/icons/git-commit.svg', requiresClone: true },
-      { id: 'state.git.tags', label: 'Tags', icon: '/icons/tag.svg', requiresClone: true },
-      { id: 'code-search', label: 'Code Search', icon: '/icons/search.svg', requiresClone: true },
-      { id: 'docs', label: 'Docs', icon: '/icons/book.svg', requiresClone: false }
+      { id: 'tags', label: 'Tags', icon: '/icons/tag.svg', requiresClone: true },
+      { id: 'code-search', label: 'Code Search', icon: '/icons/search.svg', requiresClone: true }
     ];
     
     // Show all tabs if repo is cloned OR API fallback is available
@@ -792,7 +814,7 @@
   });
 
   // Repository owner pubkey (decoded from npub) - kept for backward compatibility with some functions
-  let readmeAutoLoadTimeout: ReturnType<typeof setTimeout> | null = null;
+  let readmeAutoLoadTimeout = { value: null as ReturnType<typeof setTimeout> | null };
 
   // Load clone URL reachability status
   async function loadCloneUrlReachability(forceRefresh: boolean = false) {
@@ -834,18 +856,6 @@
   }
 
   // Helper function to count all replies recursively (including nested ones)
-  function countAllReplies(comments: Array<{ replies?: Array<any> }> | undefined): number {
-    if (!comments || comments.length === 0) {
-      return 0;
-    }
-    let count = comments.length;
-    for (const comment of comments) {
-      if (comment.replies && comment.replies.length > 0) {
-        count += countAllReplies(comment.replies);
-      }
-    }
-    return count;
-  }
 
   async function checkCloneStatus(force: boolean = false) {
     await checkCloneStatusService(force, state, repoCloneUrls);
@@ -896,11 +906,7 @@
   }
 
   function toggleThread(threadId: string) {
-    if (state.ui.expandedThreads.has(threadId)) {
-      state.ui.expandedThreads.delete(threadId);
-    } else {
-      state.ui.expandedThreads.add(threadId);
-    }
+    toggleThreadUtil(threadId, state.ui.expandedThreads);
     // Trigger reactivity
     state.ui.expandedThreads = new Set(state.ui.expandedThreads);
   }
@@ -914,8 +920,7 @@
   }
 
   // Reactively update images when pageData changes (only once, when data becomes available)
-  // Initialize repo images effect
-  useRepoImagesEffect(state, () => $page.data);
+  // Initialize repo images effect (moved to onMount)
 
   onMount(async () => {
     // Initialize bookmarks service
@@ -926,10 +931,12 @@
     
     // Decode npub to get repo owner pubkey for bookmark address
     try {
-      const decoded = nip19.decode(state.npub);
-      if (decoded.type === 'npub') {
-        state.metadata.ownerPubkey = decoded.data as string;
-        state.metadata.address = `${KIND.REPO_ANNOUNCEMENT}:${state.metadata.ownerPubkey}:${state.repo}`;
+      if (state.npub && state.npub.trim()) {
+        const decoded = nip19.decode(state.npub);
+        if (decoded.type === 'npub') {
+          state.metadata.ownerPubkey = decoded.data as string;
+          state.metadata.address = `${KIND.REPO_ANNOUNCEMENT}:${state.metadata.ownerPubkey}:${state.repo}`;
+        }
       }
     } catch (err) {
       console.warn('Failed to decode npub for bookmark address:', err);
@@ -1021,9 +1028,9 @@
           autoSaveInterval.value = null;
         }
         
-        if (readmeAutoLoadTimeout) {
-          clearTimeout(readmeAutoLoadTimeout);
-          readmeAutoLoadTimeout = null;
+        if (readmeAutoLoadTimeout.value) {
+          clearTimeout(readmeAutoLoadTimeout.value);
+          readmeAutoLoadTimeout.value = null;
         }
         
         // Clean up event listeners
@@ -1260,190 +1267,24 @@
   }
 
   async function generateAnnouncementFileForRepo() {
-    if (!repoOwnerPubkeyDerived || !state.user.pubkeyHex) {
-      state.error = 'Unable to generate announcement file: missing repository or user information';
-      return;
-    }
-
-    try {
-      // Fetch the repository announcement event
-      const nostrClient = new NostrClient([...new Set([...DEFAULT_NOSTR_RELAYS, ...DEFAULT_NOSTR_SEARCH_RELAYS])]);
-      const events = await nostrClient.fetchEvents([
-        {
-          kinds: [KIND.REPO_ANNOUNCEMENT],
-          authors: [repoOwnerPubkeyDerived],
-          '#d': [state.repo],
-          limit: 1
-        }
-      ]);
-
-      if (events.length === 0) {
-        state.error = 'Repository announcement not found. Please ensure the repository is registered on Nostr.';
-        return;
-      }
-
-      const announcement = events[0] as NostrEvent;
-      // Generate announcement event JSON (for download/reference)
-      state.verification.fileContent = JSON.stringify(announcement, null, 2) + '\n';
-      state.openDialog = 'verification';
-    } catch (err) {
-      console.error('Failed to generate announcement file:', err);
-      state.error = `Failed to generate announcement file: ${err instanceof Error ? err.message : String(err)}`;
-    }
+    await generateAnnouncementFileForRepoService(state, repoOwnerPubkeyDerived);
   }
 
   function copyVerificationToClipboard() {
-    if (!state.verification.fileContent) return;
-    
-    navigator.clipboard.writeText(state.verification.fileContent).then(() => {
-      alert('Verification file content copied to clipboard!');
-    }).catch((err) => {
-      console.error('Failed to copy:', err);
-      alert('Failed to copy to clipboard. Please select and copy manually.');
-    });
+    copyVerificationToClipboardService(state);
   }
 
   // Verify clone URL by committing announcement
   async function verifyCloneUrl() {
-    if (!state.verification.selectedCloneUrl || !state.user.pubkey || !state.user.pubkeyHex) {
-      state.error = 'Unable to verify: missing information';
-      return;
-    }
-
-    if (!state.maintainers.isMaintainer && state.user.pubkeyHex !== repoOwnerPubkeyDerived) {
-      state.error = 'Only repository owners and maintainers can verify clone URLs';
-      return;
-    }
-
-    // selectedCloneUrl is already set when user selects it
-    state.error = null;
-
-    try {
-      const response = await fetch(`/api/repos/${state.npub}/${state.repo}/verify`, {
-        method: 'POST',
-        headers: buildApiHeaders()
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || `Failed to verify: ${response.statusText}`);
-      }
-
-      const data = await response.json();
-      
-      // Close dialog
-      state.openDialog = null;
-      state.verification.selectedCloneUrl = null;
-
-      // Reload verification status after a short delay
-      setTimeout(() => {
-        checkVerification().catch((err: unknown) => {
-          console.warn('Failed to reload verification status:', err);
-        });
-      }, 1000);
-
-      // Show success message
-      alert(data.message || 'Repository verification initiated. The verification status will update shortly.');
-    } catch (err) {
-      state.error = err instanceof Error ? err.message : 'Failed to verify repository';
-      console.error('Error verifying clone URL:', err);
-    } finally {
-      state.verification.selectedCloneUrl = null;
-    }
+    await verifyCloneUrlService(state, repoOwnerPubkeyDerived, { checkVerification });
   }
 
   async function deleteAnnouncement() {
-    if (!state.user.pubkey || !state.user.pubkeyHex) {
-      alert('Please connect your NIP-07 extension');
-      return;
-    }
-
-    if (!repoOwnerPubkeyDerived || state.user.pubkeyHex !== repoOwnerPubkeyDerived) {
-      alert('Only the repository owner can delete the announcement');
-      return;
-    }
-
-    // First confirmation
-    if (!confirm('WARNING: Are you sure you want to delete this repository announcement?\n\nThis will permanently delete the repository announcement from Nostr relays. This action CANNOT be undone.\n\nClick OK to continue, or Cancel to abort.')) {
-      return;
-    }
-
-    // Second confirmation for critical operation
-    if (!confirm('FINAL CONFIRMATION: This will permanently delete the repository announcement.\n\nAre you absolutely certain you want to proceed?\n\nThis action CANNOT be undone.')) {
-      return;
-    }
-
-    state.creating.announcement = true;
-    state.error = null;
-
-    try {
-      // Fetch the repository announcement to get its event ID
-      const nostrClient = new NostrClient([...new Set([...DEFAULT_NOSTR_RELAYS, ...DEFAULT_NOSTR_SEARCH_RELAYS])]);
-      const events = await nostrClient.fetchEvents([
-        {
-          kinds: [KIND.REPO_ANNOUNCEMENT],
-          authors: [repoOwnerPubkeyDerived],
-          '#d': [state.repo],
-          limit: 1
-        }
-      ]);
-
-      if (events.length === 0) {
-        throw new Error('Repository announcement not found');
-      }
-
-      const announcement = events[0];
-      announcementEventId = announcement.id;
-
-      // Get user relays
-      const { outbox } = await getUserRelays(state.user.pubkeyHex, nostrClient);
-      const combinedRelays = combineRelays(outbox);
-
-      // Create deletion request (NIP-09)
-      const deletionRequestTemplate: Omit<NostrEvent, 'sig' | 'id'> = {
-        kind: KIND.DELETION_REQUEST,
-        pubkey: state.user.pubkeyHex,
-        created_at: Math.floor(Date.now() / 1000),
-        content: `Requesting deletion of repository announcement for ${state.repo}`,
-        tags: [
-          ['e', announcement.id], // Reference to the announcement event
-          ['a', `${KIND.REPO_ANNOUNCEMENT}:${repoOwnerPubkeyDerived}:${state.repo}`], // Repository address
-          ['k', KIND.REPO_ANNOUNCEMENT.toString()] // Kind of event being deleted
-        ]
-      };
-
-      // Sign with NIP-07
-      const signedDeletionRequest = await signEventWithNIP07(deletionRequestTemplate);
-
-      // Publish to relays
-      const publishResult = await nostrClient.publishEvent(signedDeletionRequest, combinedRelays);
-
-      if (publishResult.success.length > 0) {
-        alert(`Deletion request published successfully to ${publishResult.success.length} relay(s).`);
-      } else {
-        throw new Error(`Failed to publish deletion request to any relay. Errors: ${publishResult.failed.map(f => `${f.relay}: ${f.error}`).join('; ')}`);
-      }
-    } catch (err) {
-      console.error('Failed to delete announcement:', err);
-      state.error = err instanceof Error ? err.message : 'Failed to send deletion request';
-      alert(state.error);
-    } finally {
-      state.creating.announcement = false;
-    }
+    await deleteAnnouncementService(state, repoOwnerPubkeyDerived, announcementEventId);
   }
 
   function downloadVerificationFile() {
-    if (!state.verification.fileContent) return;
-    
-    const blob = new Blob([state.verification.fileContent], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'announcement-event.json';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    downloadVerificationFileService(state);
   }
 
   // buildApiHeaders is now imported from utils/api-client.ts - using it directly
@@ -1524,352 +1365,51 @@
   }
 
   async function loadFiles(path: string = '') {
-    // Skip if repository doesn't exist
-    if (state.repoNotFound) return;
-    
-    state.loading.main = true;
-    state.error = null;
-    try {
-      // Validate and get a valid branch name
-      let branchName: string;
-      if (typeof state.git.currentBranch === 'string' && state.git.currentBranch.trim() !== '' && !state.git.currentBranch.includes('#')) {
-        const branchNames = state.git.branches.map((b: any) => typeof b === 'string' ? b : b.name);
-        if (branchNames.includes(state.git.currentBranch)) {
-          branchName = state.git.currentBranch;
-        } else {
-          branchName = state.git.defaultBranch || (state.git.branches.length > 0 
-            ? (typeof state.git.branches[0] === 'string' ? state.git.branches[0] : state.git.branches[0].name)
-            : 'HEAD');
-        }
-      } else {
-        branchName = state.git.defaultBranch || (state.git.branches.length > 0 
-          ? (typeof state.git.branches[0] === 'string' ? state.git.branches[0] : state.git.branches[0].name)
-          : 'HEAD');
-      }
-      
-      const url = `/api/repos/${state.npub}/${state.repo}/tree?ref=${encodeURIComponent(branchName)}&path=${encodeURIComponent(path)}`;
-      const response = await fetch(url, {
-        headers: buildApiHeaders()
-      });
-      
-      if (!response.ok) {
-        if (response.status === 404) {
-          // Check if this is a "not cloned" state.error - API fallback might be available
-          const errorText = await response.text().catch(() => '');
-          if (errorText.includes('not cloned locally')) {
-            // Repository is not cloned - check if API fallback might be available
-            if (repoCloneUrls && repoCloneUrls.length > 0) {
-              // We have clone URLs, so API fallback might work - mark as unknown for now
-              // It will be set to true if a subsequent request succeeds
-              state.clone.apiFallbackAvailable = null;
-              // Don't set state.repoNotFound - allow API fallback to be attempted
-            } else {
-              // No clone URLs, API fallback won't work
-              state.repoNotFound = true;
-              state.clone.apiFallbackAvailable = false;
-            }
-            // Throw state.error but use the actual state.error text from the API
-            throw new Error(errorText || 'Repository not found. This repository exists in Nostr but hasn\'t been provisioned on this server yet. The server will automatically provision it soon, or you can contact the server administrator.');
-          } else {
-            // Generic 404 - repository doesn't exist
-            state.repoNotFound = true;
-            state.clone.apiFallbackAvailable = false;
-            throw new Error(`Repository not found. This repository exists in Nostr but hasn't been provisioned on this server yet. The server will automatically provision it soon, or you can contact the server administrator.`);
-          }
-        } else if (response.status === 403) {
-          // 403 means access denied - don't set state.repoNotFound, just show state.error
-          // This allows retry after login
-          const accessDeniedError = new Error(`Access denied: ${response.statusText}. You may need to log in or you may not have permission to view this repository.`);
-          // Log as info since this is normal client behavior (not logged in or no access)
-          console.info('Access denied (normal behavior):', accessDeniedError.message);
-          throw accessDeniedError;
-        }
-        throw new Error(`Failed to load files: ${response.statusText}`);
-      }
-
-      state.files.list = await response.json();
-      state.files.currentPath = path;
-      
-      // If repo is not cloned but we got state.files.list, API fallback is available
-      if (state.clone.isCloned === false && state.files.list.length > 0) {
-        state.clone.apiFallbackAvailable = true;
-      }
-      
-      // Auto-load README if we're in the root directory and no file is currently selected
-      // Only attempt once per path to prevent loops
-      if (path === '' && !state.files.currentFile && !state.metadata.readmeAutoLoadAttempted) {
-        const readmeFile = findReadmeFileUtil(state.files.list);
-        if (readmeFile) {
-          state.metadata.readmeAutoLoadAttempted = true;
-          // Clear any existing timeout
-          if (readmeAutoLoadTimeout) {
-            clearTimeout(readmeAutoLoadTimeout);
-          }
-          // Small delay to ensure UI is ready
-          readmeAutoLoadTimeout = setTimeout(() => {
-            loadFile(readmeFile.path).catch(err => {
-              // If load fails (e.g., 429 rate limit), reset the flag after a delay
-              // so we can retry later, but not immediately
-              if (err instanceof Error && err.message.includes('Too Many Requests')) {
-                console.warn('[README] Rate limited, will retry later');
-                setTimeout(() => {
-                  state.metadata.readmeAutoLoadAttempted = false;
-                }, 5000); // Retry after 5 seconds
-              } else {
-                // For other errors, reset immediately
-                state.metadata.readmeAutoLoadAttempted = false;
-              }
-            });
-            readmeAutoLoadTimeout = null;
-          }, 100);
-        }
-      } else if (path !== '' || state.files.currentFile) {
-        // Reset flag when navigating away from root or when a file is selected
-        state.metadata.readmeAutoLoadAttempted = false;
-        if (readmeAutoLoadTimeout) {
-          clearTimeout(readmeAutoLoadTimeout);
-          readmeAutoLoadTimeout = null;
-        }
-      }
-    } catch (err) {
-      state.error = err instanceof Error ? err.message : 'Failed to load state.files.list';
-      // Only log as state.error if it's not a 403 (access denied), which is normal behavior
-      if (err instanceof Error && err.message.includes('Access denied')) {
-        // Already logged as info above, don't log again
-      } else {
-        console.error('Error loading files:', err);
-      }
-    } finally {
-      state.loading.main = false;
-    }
+    await loadFilesService(path, state, repoCloneUrls, readmeAutoLoadTimeout, {
+      getUserEmail,
+      getUserName,
+      loadFiles,
+      loadFile,
+      renderFileAsHtml,
+      applySyntaxHighlighting,
+      findReadmeFile: findReadmeFileUtil,
+      rewriteImagePaths
+    });
   }
 
   async function loadFile(filePath: string) {
-    state.loading.main = true;
-    state.error = null;
-    try {
-      // Ensure state.git.currentBranch is a string (branch name), not an object
-      // If state.git.currentBranch is not set, use the first available branch or 'master' as fallback
-      let branchName: string;
-      
-      if (typeof state.git.currentBranch === 'string' && state.git.currentBranch.trim() !== '') {
-        // Validate that state.git.currentBranch is actually a valid branch name
-        // Check if it exists in the state.git.branches list
-        const branchNames = state.git.branches.map((b: any) => typeof b === 'string' ? b : b.name);
-        if (branchNames.includes(state.git.currentBranch)) {
-          branchName = state.git.currentBranch;
-        } else {
-          // state.git.currentBranch is set but not in state.git.branches list, use state.git.defaultBranch or fallback
-          branchName = state.git.defaultBranch || (state.git.branches.length > 0 
-            ? (typeof state.git.branches[0] === 'string' ? state.git.branches[0] : state.git.branches[0].name)
-            : 'HEAD');
-        }
-      } else if (typeof state.git.currentBranch === 'object' && state.git.currentBranch !== null && 'name' in state.git.currentBranch) {
-        branchName = (state.git.currentBranch as { name: string }).name;
-      } else {
-        // state.git.currentBranch is null, undefined, or invalid - use state.git.defaultBranch or fallback
-        branchName = state.git.defaultBranch || (state.git.branches.length > 0 
-          ? (typeof state.git.branches[0] === 'string' ? state.git.branches[0] : state.git.branches[0].name)
-          : 'HEAD');
-      }
-      
-      // Final validation: ensure branchName is a valid string
-      // Note: We allow '#' in branch names for existing state.git.branches (they'll be URL-encoded)
-      // Only reject if it's empty or not a string
-      if (!branchName || typeof branchName !== 'string' || branchName.trim() === '') {
-        console.warn('[loadFile] Invalid branch name detected, using fallback:', branchName);
-        branchName = state.git.defaultBranch || (state.git.branches.length > 0 
-          ? (typeof state.git.branches[0] === 'string' ? state.git.branches[0] : state.git.branches[0].name)
-          : 'HEAD');
-      }
-      
-      // Determine language from file extension first to check if it's an image
-      const ext = filePath.split('.').pop()?.toLowerCase() || '';
-      
-      // Check if this is an image file BEFORE making the API call
-      state.preview.file.isImage = isImageFileType(ext);
-      
-      if (state.preview.file.isImage) {
-        // For image state.files.list, construct the raw file URL and skip state.loading.main text content
-        state.preview.file.imageUrl = `/api/repos/${state.npub}/${state.repo}/raw?path=${encodeURIComponent(filePath)}&ref=${encodeURIComponent(branchName)}`;
-        state.files.content = ''; // Clear content for images
-        state.files.editedContent = ''; // Clear edited content for images
-        state.preview.file.html = ''; // Clear HTML for images
-        state.preview.file.highlightedContent = ''; // Clear highlighted content
-        state.files.language = 'text';
-        state.files.currentFile = filePath;
-        state.files.hasChanges = false;
-      } else {
-        // Not an image, load file content normally
-        state.preview.file.imageUrl = null;
-        
-        const url = `/api/repos/${state.npub}/${state.repo}/file?path=${encodeURIComponent(filePath)}&ref=${encodeURIComponent(branchName)}`;
-        const response = await fetch(url, {
-          headers: buildApiHeaders()
-        });
-        
-        if (!response.ok) {
-          // Handle rate limiting specifically to prevent loops
-          if (response.status === 429) {
-            const error = new Error(`Failed to load file: Too Many Requests`);
-            console.warn('[File Load] Rate limited, please wait before retrying');
-            throw error;
-          }
-          throw new Error(`Failed to load file: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-        state.files.content = data.content;
-        state.files.editedContent = data.content;
-        state.files.currentFile = filePath;
-        state.files.hasChanges = false;
-        
-        // Reset README auto-load flag when a file is successfully loaded
-        if (filePath && filePath.toLowerCase().includes('readme')) {
-          state.metadata.readmeAutoLoadAttempted = false;
-        }
-        
-        if (ext === 'md' || ext === 'markdown') {
-          state.files.language = 'markdown';
-        } else if (ext === 'adoc' || ext === 'asciidoc') {
-          state.files.language = 'asciidoc';
-        } else {
-          state.files.language = 'text';
-        }
-        
-        // Reset preview mode to default (preview) when state.loading.main a new file
-        state.preview.file.showPreview = true;
-        state.preview.file.html = '';
-        
-        // Render markdown/asciidoc/HTML/CSV state.files.list as HTML for preview
-        if (state.files.content && (ext === 'md' || ext === 'markdown' || ext === 'adoc' || ext === 'asciidoc' || ext === 'html' || ext === 'htm' || ext === 'csv')) {
-          await renderFileAsHtml(state.files.content, ext || '');
-        }
-        
-        // Apply syntax highlighting
-        // For state.files.list that support HTML preview (markdown, HTML, etc.), only show highlighting in raw mode
-        // For code state.files.list and other non-markup state.files.list, always show syntax highlighting
-        const hasHtmlPreview = supportsPreview(ext);
-        if (state.files.content) {
-          if (hasHtmlPreview) {
-            // Markup files: only show highlighting when not in preview mode (raw mode)
-            if (!state.preview.file.showPreview) {
-              await applySyntaxHighlighting(state.files.content, ext || '');
-            }
-          } else {
-            // Code files and other non-markup files: always show syntax highlighting
-            await applySyntaxHighlighting(state.files.content, ext || '');
-          }
-        }
-      }
-    } catch (err) {
-      state.error = err instanceof Error ? err.message : 'Failed to load file';
-      console.error('Error state.loading.main file:', err);
-    } finally {
-      state.loading.main = false;
-    }
+    await loadFileService(filePath, state, {
+      getUserEmail,
+      getUserName,
+      loadFiles,
+      loadFile,
+      renderFileAsHtml,
+      applySyntaxHighlighting,
+      findReadmeFile: findReadmeFileUtil,
+      rewriteImagePaths
+    });
   }
 
   function handleContentChange(value: string) {
-    state.files.editedContent = value;
-    state.files.hasChanges = value !== state.files.content;
+    handleContentChangeUtil(value, state);
   }
 
   function handleFileClick(file: { name: string; path: string; type: 'file' | 'directory' }) {
-    if (file.type === 'directory') {
-      state.files.pathStack.push(state.files.currentPath);
-      loadFiles(file.path);
-    } else {
-      loadFile(file.path);
-      // On mobile, switch to file viewer when a file is clicked
-      if (window.innerWidth <= 768) {
-        state.ui.showFileListOnMobile = false;
-      }
-    }
+    handleFileClickUtil(file, state, { loadFiles, loadFile });
   }
 
   // Copy file content to clipboard
   async function copyFileContent(event?: Event) {
-    if (!state.files.content || state.preview.copying) return;
-    
-    state.preview.copying = true;
-    try {
-      await navigator.clipboard.writeText(state.files.content);
-      // Show temporary feedback
-      const button = event?.target as HTMLElement;
-      if (button) {
-        const originalTitle = button.getAttribute('title') || '';
-        button.setAttribute('title', 'Copied!');
-        setTimeout(() => {
-          button.setAttribute('title', originalTitle);
-        }, 2000);
-      }
-    } catch (err) {
-      console.error('Failed to copy file content:', err);
-      alert('Failed to copy file content to clipboard');
-    } finally {
-      state.preview.copying = false;
-    }
+    await copyFileContentUtil(state, event);
   }
 
   // Download file
   function downloadFile() {
-    if (!state.files.content || !state.files.currentFile) return;
-    
-    try {
-      // Determine MIME type based on file extension
-      const ext = state.files.currentFile.split('.').pop()?.toLowerCase() || '';
-      const mimeTypes: Record<string, string> = {
-        'js': 'text/javascript',
-        'ts': 'text/typescript',
-        'json': 'application/json',
-        'css': 'text/css',
-        'html': 'text/html',
-        'htm': 'text/html',
-        'md': 'text/markdown',
-        'txt': 'text/plain',
-        'csv': 'text/csv',
-        'xml': 'application/xml',
-        'svg': 'image/svg+xml',
-        'py': 'text/x-python',
-        'java': 'text/x-java-source',
-        'c': 'text/x-csrc',
-        'cpp': 'text/x-c++src',
-        'h': 'text/x-csrc',
-        'hpp': 'text/x-c++src',
-        'sh': 'text/x-shellscript',
-        'bash': 'text/x-shellscript',
-        'yaml': 'text/yaml',
-        'yml': 'text/yaml',
-        'toml': 'text/toml',
-        'ini': 'text/plain',
-        'conf': 'text/plain',
-        'log': 'text/plain'
-      };
-      
-      const mimeType = mimeTypes[ext] || 'text/plain';
-      const blob = new Blob([state.files.content], { type: mimeType });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = state.files.currentFile.split('/').pop() || 'file';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      console.error('Failed to download file:', err);
-      alert('Failed to download file');
-    }
+    downloadFileUtil(state);
   }
 
   function handleBack() {
-    if (state.files.pathStack.length > 0) {
-      const parentPath = state.files.pathStack.pop() || '';
-      loadFiles(parentPath);
-    } else {
-      loadFiles('');
-    }
+    handleBackUtil(state, { loadFiles });
   }
 
   // Cache for user profile email and name (already declared above)
@@ -2205,14 +1745,7 @@
     startPos: number,
     endPos: number
   ) {
-    if (!text.trim() || !state.user.pubkey) return;
-    
-    state.forms.patchHighlight.text = text;
-    state.forms.patchHighlight.startLine = startLine;
-    state.forms.patchHighlight.endLine = endLine;
-    state.forms.patchHighlight.startPos = startPos;
-    state.forms.patchHighlight.endPos = endPos;
-    state.openDialog = 'patchHighlight';
+    handlePatchCodeSelectionUtil(text, startLine, endLine, startPos, endPos, state);
   }
 
   async function createPatchHighlight() {
@@ -2220,53 +1753,17 @@
   }
 
   function formatPubkey(pubkey: string): string {
-    try {
-      return nip19.npubEncode(pubkey);
-    } catch {
-      return pubkey.slice(0, 8) + '...';
-    }
+    return formatPubkeyUtil(pubkey);
   }
 
   function startPatchComment(parentId?: string) {
-    if (!state.user.pubkey) {
-      alert('Please connect your NIP-07 extension');
-      return;
-    }
-    state.forms.patchComment.replyingTo = parentId || null;
-    state.openDialog = 'patchComment';
+    startPatchCommentUtil(parentId, state);
   }
 
   async function createPatchComment() {
     await createPatchCommentService(state, highlightsService, { loadPatches });
   }
 
-  // Initialize patch highlights effect
-  usePatchHighlightsEffect(state, loadPatchHighlights);
-  
-  // Initialize tab change effect
-  const lastTab = { value: null as string | null };
-  useTabChangeEffect(state, lastTab, findReadmeFileUtil, {
-    loadFiles,
-    loadFile,
-    loadCommitHistory,
-    loadTags,
-    loadReleases,
-    loadIssues,
-    loadPRs,
-    loadDocumentation,
-    loadDiscussions,
-    loadPatches
-  });
-  
-  // Initialize branch change effect
-  const lastBranch = { value: null as string | null };
-  useBranchChangeEffect(state, lastBranch, {
-    loadReadme,
-    loadFile,
-    loadFiles,
-    loadCommitHistory,
-    loadDocumentation
-  });
 </script>
 
 <svelte:head>
@@ -2414,7 +1911,7 @@
           </button>
           </div>
           <div class="clone-url-list" class:collapsed={!state.clone.urlsExpanded}>
-            {#if state.clone.isCloned === true}
+            {#if state.clone.isCloned === true && $page.data?.gitDomain && !$page.data.gitDomain.startsWith('localhost') && !$page.data.gitDomain.startsWith('127.0.0.1')}
               <button 
                 class="copy-clone-url-button"
                 onclick={() => copyCloneUrl()}
@@ -2670,6 +2167,19 @@
             handleBranchChangeDirect(branch);
           }}
           userPubkey={state.user.pubkey}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
       {/if}
 
@@ -2699,6 +2209,19 @@
           verifyingCommits={state.git.verifyingCommits}
           showDiff={state.git.showDiff}
           diffData={state.git.diffData}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
       {/if}
 
@@ -2721,7 +2244,17 @@
         {tabs}
         showLeftPanelOnMobile={state.ui.showLeftPanelOnMobile}
         onTagSelect={(tagName) => state.git.selectedTag = tagName}
-        onTabChange={(tab) => state.ui.activeTab = tab as typeof state.ui.activeTab}
+        onTabChange={(tab: string) => {
+          state.ui.activeTab = tab as typeof state.ui.activeTab;
+          // Update URL without page reload
+          const url = new URL($page.url);
+          if (tab === 'files') {
+            url.searchParams.delete('tab');
+          } else {
+            url.searchParams.set('tab', tab);
+          }
+          goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+        }}
         onToggleMobilePanel={() => state.ui.showLeftPanelOnMobile = !state.ui.showLeftPanelOnMobile}
         onCreateTag={() => state.openDialog = 'createTag'}
         onCreateRelease={(tagName, tagHash) => {
@@ -2739,7 +2272,12 @@
           <TabsMenu 
             activeTab={state.ui.activeTab} 
             {tabs} 
-            onTabChange={(tab) => state.ui.activeTab = tab as typeof state.ui.activeTab}
+            onTabChange={(tab: string) => {
+              state.ui.activeTab = tab as typeof state.ui.activeTab;
+              // Update URL without page reload
+              const newPath = `/repos/${state.npub}/${state.repo}${tab === 'files' ? '' : `/${tab}`}`;
+              goto(newPath, { replaceState: true, noScroll: true });
+            }}
           />
           <h2>Code Search</h2>
           <button 
@@ -2774,6 +2312,19 @@
           }}
           issueReplies={state.issueReplies}
           loadingReplies={state.loading.issueReplies}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
       {/if}
 
@@ -2821,8 +2372,21 @@
               }
             }
           }}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
-        {/if}
+      {/if}
 
       <!-- Patches Tab -->
       {#if state.ui.activeTab === 'patches'}
@@ -2834,6 +2398,12 @@
           onSelect={(id) => {
             state.selected.patch = id;
           }}
+          onStatusUpdate={async (id, status) => {
+            const patch = state.patches.find(p => p.id === id);
+            if (patch) {
+              await updatePatchStatus(id, patch.author, status);
+            }
+          }}
           onApply={async (id) => {
             applying[id] = true;
             try {
@@ -2883,8 +2453,21 @@
             }
           }}
           {applying}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
-              {/if}
+      {/if}
 
       <!-- Discussions Tab -->
       {#if state.ui.activeTab === 'discussions'}
@@ -2893,8 +2476,21 @@
           repo={state.repo}
           repoAnnouncement={repoAnnouncement}
           userPubkey={state.user.pubkey}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
-        {/if}
+      {/if}
 
       <!-- Docs Tab -->
       {#if state.ui.activeTab === 'docs'}
@@ -2903,8 +2499,21 @@
           repo={state.repo}
           currentBranch={state.git.currentBranch || null}
           relays={[...DEFAULT_NOSTR_RELAYS, ...DEFAULT_NOSTR_SEARCH_RELAYS]}
+          activeTab={state.ui.activeTab}
+          {tabs}
+          onTabChange={(tab: string) => {
+            state.ui.activeTab = tab as typeof state.ui.activeTab;
+            // Update URL query parameter without page reload
+            const url = new URL($page.url);
+            if (tab === 'files') {
+              url.searchParams.delete('tab');
+            } else {
+              url.searchParams.set('tab', tab);
+            }
+            goto(url.pathname + url.search, { replaceState: true, noScroll: true });
+          }}
         />
-        {/if}
+      {/if}
 
       <!-- Files tab content is now handled by FilesTab component -->
 
diff --git a/src/routes/repos/[npub]/[repo]/components/DiscussionsTab.svelte b/src/routes/repos/[npub]/[repo]/components/DiscussionsTab.svelte
index 57eeb72..525b31f 100644
--- a/src/routes/repos/[npub]/[repo]/components/DiscussionsTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/DiscussionsTab.svelte
@@ -29,9 +29,20 @@
     repo: string;
     repoAnnouncement?: NostrEvent;
     userPubkey?: string | null;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
 
-  let { npub, repo, repoAnnouncement, userPubkey }: Props = $props();
+  let { 
+    npub, 
+    repo, 
+    repoAnnouncement, 
+    userPubkey,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
+  }: Props = $props();
 
   let discussions = $state<Discussion[]>([]);
   let loadingDiscussions = $state(false);
@@ -326,7 +337,12 @@
   }
 </script>
 
-<TabLayout>
+<TabLayout
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Discussions"
+>
   {#snippet leftPane()}
     <div class="discussions-sidebar">
       <div class="discussions-header">
diff --git a/src/routes/repos/[npub]/[repo]/components/DocsTab.svelte b/src/routes/repos/[npub]/[repo]/components/DocsTab.svelte
index ad19880..78eb6cd 100644
--- a/src/routes/repos/[npub]/[repo]/components/DocsTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/DocsTab.svelte
@@ -17,13 +17,19 @@
     repo?: string;
     currentBranch?: string | null;
     relays?: string[];
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
     npub = '',
     repo = '',
     currentBranch = null,
-    relays = DEFAULT_NOSTR_RELAYS
+    relays = DEFAULT_NOSTR_RELAYS,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
   
   let documentationContent = $state<string | null>(null);
@@ -50,15 +56,47 @@
     try {
       logger.operation('Loading documentation', { npub, repo, branch: currentBranch });
       
-      // Try to find documentation files
-      const response = await fetch(`/api/repos/${npub}/${repo}/tree?ref=${currentBranch || 'HEAD'}&path=docs`);
+      // Try README first (faster, always available if repo has content)
+      const readmePromise = (async () => {
+        try {
+          const readmeResponse = await fetch(`/api/repos/${npub}/${repo}/readme?ref=${currentBranch || 'HEAD'}`);
+          if (readmeResponse.ok) {
+            const readmeData = await readmeResponse.json();
+            if (readmeData.content) {
+              return {
+                content: readmeData.content,
+                kind: readmeData.type || 'markdown',
+                path: 'README.md'
+              };
+            }
+          }
+        } catch (readmeErr) {
+          logger.debug({ error: readmeErr, npub, repo }, 'No README found');
+        }
+        return null;
+      })();
       
-      if (response.ok) {
-        const data = await response.json();
-        docFiles = data.files || [];
-        
-        // Look for README or index files first
-        const readmeFile = docFiles.find(f => 
+      // Try docs folder in parallel
+      const docsPromise = (async () => {
+        try {
+          const response = await fetch(`/api/repos/${npub}/${repo}/tree?ref=${currentBranch || 'HEAD'}&path=docs`);
+          if (response.ok) {
+            const data = await response.json();
+            return Array.isArray(data) ? data : (data.files || []);
+          }
+        } catch (err) {
+          logger.debug({ error: err, npub, repo }, 'Docs folder not found');
+        }
+        return [];
+      })();
+      
+      // Wait for both, prefer docs folder if it has files
+      const [readmeResult, docsFiles] = await Promise.all([readmePromise, docsPromise]);
+      docFiles = docsFiles;
+      
+      if (docsFiles.length > 0) {
+        // Look for README or index files first in docs folder
+        const readmeFile = docsFiles.find((f: { name: string; path: string }) => 
           f.name.toLowerCase() === 'readme.md' || 
           f.name.toLowerCase() === 'readme.adoc' ||
           f.name.toLowerCase() === 'index.md'
@@ -66,26 +104,21 @@
         
         if (readmeFile) {
           await loadDocFile(readmeFile.path);
-        } else if (docFiles.length > 0) {
-          // Load first file
-          await loadDocFile(docFiles[0].path);
-        }
-      } else {
-        // Try to load README from root
-        try {
-          const readmeResponse = await fetch(`/api/repos/${npub}/${repo}/readme?ref=${currentBranch || 'HEAD'}`);
-          if (readmeResponse.ok) {
-            const readmeData = await readmeResponse.json();
-            documentationContent = readmeData.content || '';
-            documentationKind = readmeData.type || 'markdown';
-          }
-        } catch {
-          // No README found
+        } else {
+          // Load first file from docs folder
+          await loadDocFile(docsFiles[0].path);
         }
+      } else if (readmeResult) {
+        // No docs folder, use README from root
+        documentationContent = readmeResult.content;
+        documentationKind = readmeResult.kind as 'markdown' | 'asciidoc';
+        selectedDoc = readmeResult.path;
       }
       
-      // Check for kind 30040 publication index
-      await checkForPublicationIndex();
+      // Check for kind 30040 publication index (only if no content found yet)
+      if (!documentationContent && !indexEvent) {
+        await checkForPublicationIndex();
+      }
       
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to load documentation';
@@ -154,11 +187,22 @@
   }
 </script>
 
-<TabLayout {loading} {error}>
+<TabLayout 
+  {loading} 
+  {error}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Documentation"
+>
   {#snippet leftPane()}
     <div class="docs-sidebar">
       <h3>Documentation</h3>
-      {#if docFiles.length > 0}
+      {#if loading}
+        <div class="loading">Loading documentation...</div>
+      {:else if error}
+        <div class="error">{error}</div>
+      {:else if docFiles.length > 0}
         <ul class="doc-list">
           {#each docFiles as file}
             <li>
@@ -171,12 +215,24 @@
             </li>
           {/each}
         </ul>
+      {:else if documentationContent}
+        <div class="empty-sidebar">
+          <p>No custom documentation found. Displaying the ReadMe, instead.</p>
+        </div>
+      {:else}
+        <div class="empty-sidebar">
+          <p>No documentation files found</p>
+        </div>
       {/if}
     </div>
   {/snippet}
   
   {#snippet rightPanel()}
-    {#if documentationKind === '30040' && indexEvent}
+    {#if loading}
+      <div class="loading">Loading documentation...</div>
+    {:else if error}
+      <div class="error">{error}</div>
+    {:else if documentationKind === '30040' && indexEvent}
       <DocsViewer
         contentType="30040"
         {indexEvent}
@@ -187,6 +243,10 @@
       <DocsViewer
         content={documentationContent}
         contentType={documentationKind || 'text'}
+        npub={npub}
+        repo={repo}
+        currentBranch={currentBranch || 'HEAD'}
+        filePath={selectedDoc || 'README.md'}
       />
     {:else}
       <div class="empty-docs">
@@ -246,4 +306,25 @@
     font-size: 0.9rem;
     margin-top: 0.5rem;
   }
+  
+  .empty-sidebar {
+    padding: 1rem;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+  
+  .loading {
+    padding: 1rem;
+    text-align: center;
+    color: var(--text-secondary);
+  }
+  
+  .error {
+    padding: 1rem;
+    background: var(--error-bg, #ffebee);
+    color: var(--error-color, #c62828);
+    border-radius: 4px;
+    margin: 1rem;
+  }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/DocsViewer.svelte b/src/routes/repos/[npub]/[repo]/components/DocsViewer.svelte
index 408355c..4f4273a 100644
--- a/src/routes/repos/[npub]/[repo]/components/DocsViewer.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/DocsViewer.svelte
@@ -9,19 +9,78 @@
   import type { NostrEvent } from '$lib/types/nostr.js';
   import { KIND } from '$lib/types/nostr.js';
   import logger from '$lib/services/logger.js';
+  import { renderContent } from '../utils/content-renderer.js';
+  
+  // Rewrite image paths in HTML to point to repository file API
+  function rewriteImagePaths(html: string, filePath: string, npub: string, repo: string, branch: string): string {
+    if (!html || !filePath) return html;
+    
+    // Get the directory of the current file
+    const fileDir = filePath.includes('/') 
+      ? filePath.substring(0, filePath.lastIndexOf('/'))
+      : '';
+    
+    // Rewrite relative image paths
+    return html.replace(/<img([^>]*)\ssrc=["']([^"']+)["']([^>]*)>/gi, (match, before, src, after) => {
+      // Skip if it's already an absolute URL (http/https/data) or already an API URL
+      if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('data:') || src.startsWith('/api/')) {
+        return match;
+      }
+      
+      // Resolve relative path
+      let imagePath: string;
+      if (src.startsWith('/')) {
+        // Absolute path from repo root
+        imagePath = src.substring(1);
+      } else if (src.startsWith('./')) {
+        // Relative to current file directory
+        imagePath = fileDir ? `${fileDir}/${src.substring(2)}` : src.substring(2);
+      } else {
+        // Relative to current file directory
+        imagePath = fileDir ? `${fileDir}/${src}` : src;
+      }
+      
+      // Normalize path (remove .. and .)
+      const pathParts = imagePath.split('/').filter(p => p !== '.' && p !== '');
+      const normalizedPath: string[] = [];
+      for (const part of pathParts) {
+        if (part === '..') {
+          normalizedPath.pop();
+        } else {
+          normalizedPath.push(part);
+        }
+      }
+      imagePath = normalizedPath.join('/');
+      
+      // Build API URL
+      const apiUrl = `/api/repos/${npub}/${repo}/raw?path=${encodeURIComponent(imagePath)}&ref=${encodeURIComponent(branch)}`;
+      
+      return `<img${before} src="${apiUrl}"${after}>`;
+    });
+  }
   
   interface Props {
     content?: string;
     contentType?: 'markdown' | 'asciidoc' | 'text' | '30040';
     indexEvent?: NostrEvent | null;
     relays?: string[];
+    onItemClick?: ((item: any) => void) | null;
+    npub?: string;
+    repo?: string;
+    currentBranch?: string;
+    filePath?: string | null;
   }
   
   let {
     content = '',
     contentType = 'text',
     indexEvent = null,
-    relays = []
+    relays = [],
+    onItemClick = null,
+    npub = '',
+    repo = '',
+    currentBranch = 'HEAD',
+    filePath = null
   }: Props = $props();
   
   let renderedContent = $state('');
@@ -35,66 +94,29 @@
     }
     
     if (content) {
-      renderContent();
+      doRenderContent();
     }
   });
   
-  async function renderContent() {
+  async function doRenderContent() {
     loading = true;
     error = null;
     
     try {
       logger.operation('Rendering content', { contentType, length: content.length });
       
-      if (contentType === 'markdown') {
-        const MarkdownIt = (await import('markdown-it')).default;
-        const hljsModule = await import('highlight.js');
-        const hljs = hljsModule.default || hljsModule;
-        
-        const md = new MarkdownIt({
-          highlight: function (str: string, lang: string): string {
-            if (lang && hljs.getLanguage(lang)) {
-              try {
-                return '<pre class="hljs"><code>' +
-                       hljs.highlight(str, { language: lang }).value +
-                       '</code></pre>';
-              } catch (err) {
-                // Fallback to escaped HTML
-              }
-            }
-            return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
-          }
-        });
-        
-        renderedContent = md.render(content);
-        
-        // Add IDs to headings for anchor links
-        renderedContent = renderedContent.replace(/<h([1-6])>(.*?)<\/h[1-6]>/g, (match, level, text) => {
-          const textContent = text.replace(/<[^>]*>/g, '').trim();
-          const slug = textContent
-            .toLowerCase()
-            .replace(/[^\w\s-]/g, '')
-            .replace(/\s+/g, '-')
-            .replace(/-+/g, '-')
-            .replace(/^-|-$/g, '');
-          
-          return `<h${level} id="${slug}">${text}</h${level}>`;
-        });
-      } else if (contentType === 'asciidoc') {
-        const asciidoctor = (await import('asciidoctor')).default();
-        renderedContent = asciidoctor.convert(content, {
-          safe: 'safe',
-          attributes: {
-            'source-highlighter': 'highlight.js'
-          }
-        });
+      // Use the shared content renderer utility
+      // contentType '30040' is handled separately by PublicationIndexViewer
+      if (contentType === '30040') {
+        // Should not reach here, but handle gracefully
+        renderedContent = '';
       } else {
-        // Plain text - escape HTML
-        renderedContent = content
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/\n/g, '<br>');
+        renderedContent = await renderContent(content, contentType as 'markdown' | 'asciidoc' | 'text');
+        
+        // Rewrite image paths to use API endpoint
+        if (npub && repo && filePath) {
+          renderedContent = rewriteImagePaths(renderedContent, filePath, npub, repo, currentBranch);
+        }
       }
       
       logger.operation('Content rendered', { contentType });
@@ -107,10 +129,14 @@
   }
   
   function handleItemClick(item: any) {
-    logger.debug({ item }, 'Publication index item clicked');
-    // Could navigate to item URL or emit event
-    if (item.url) {
-      window.open(item.url, '_blank');
+    if (onItemClick) {
+      onItemClick(item);
+    } else {
+      logger.debug({ item }, 'Publication index item clicked');
+      // Could navigate to item URL or emit event
+      if (item.url) {
+        window.open(item.url, '_blank');
+      }
     }
   }
 </script>
@@ -137,8 +163,9 @@
 
 <style>
   .docs-viewer {
-    padding: 1rem;
+    width: 100%;
     max-width: 100%;
+    box-sizing: border-box;
   }
   
   .loading, .error, .empty {
@@ -152,7 +179,18 @@
   }
   
   .rendered-content {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     line-height: 1.6;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+  
+  .rendered-content :global(img) {
+    max-width: 100%;
+    height: auto;
+    display: block;
   }
   
   .rendered-content :global(h1),
@@ -198,6 +236,8 @@
     border-radius: 4px;
     overflow-x: auto;
     margin: 1rem 0;
+    max-width: 100%;
+    box-sizing: border-box;
   }
   
   .rendered-content :global(pre code) {
@@ -233,8 +273,18 @@
   
   .rendered-content :global(table) {
     width: 100%;
+    max-width: 100%;
     border-collapse: collapse;
     margin: 1rem 0;
+    box-sizing: border-box;
+    display: table;
+    table-layout: auto;
+  }
+  
+  .rendered-content :global(table) :global(td),
+  .rendered-content :global(table) :global(th) {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
   
   .rendered-content :global(th),
diff --git a/src/routes/repos/[npub]/[repo]/components/FilesTab.svelte b/src/routes/repos/[npub]/[repo]/components/FilesTab.svelte
index be1cb2b..969cba2 100644
--- a/src/routes/repos/[npub]/[repo]/components/FilesTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/FilesTab.svelte
@@ -47,6 +47,9 @@
     defaultBranch?: string | null;
     onBranchChange?: (branch: string) => void;
     userPubkey?: string | null;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
@@ -87,11 +90,21 @@
     currentBranch = null,
     defaultBranch = null,
     onBranchChange = () => {},
-    userPubkey = null
+    userPubkey = null,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
 </script>
 
-<TabLayout {loading} {error}>
+<TabLayout 
+  {loading} 
+  {error}
+  activeTab={activeTab}
+  tabs={tabs}
+  onTabChange={onTabChange}
+  title={currentFile ? `File: ${currentFile.split('/').pop()}` : (readmeContent ? 'README' : 'Files')}
+>
   {#snippet leftPane()}
     <FileBrowser
       {files}
@@ -128,7 +141,7 @@
             {@html readmeHtml}
           </div>
         {:else if readmeContent}
-          <div class="readme-content">
+          <div class="readme-content raw-content">
             <pre><code class="hljs language-text">{readmeContent}</code></pre>
           </div>
         {/if}
@@ -227,9 +240,13 @@
                     {@html fileHtml}
                   </div>
                 {:else if highlightedFileContent}
-                  {@html highlightedFileContent}
+                  <div class="raw-content">
+                    {@html highlightedFileContent}
+                  </div>
                 {:else}
-                  <pre><code class="hljs">{fileContent}</code></pre>
+                  <div class="raw-content">
+                    <pre><code class="hljs">{fileContent}</code></pre>
+                  </div>
                 {/if}
               </div>
             {/if}
@@ -255,6 +272,36 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+  
+  .file-editor .editor-header {
+    display: flex !important;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    min-width: 0;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    position: relative;
+    z-index: 1;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+  
+  .file-path {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 1rem;
   }
   
   .editor-footer {
@@ -275,4 +322,177 @@
     height: 100%;
     color: var(--text-secondary);
   }
+  
+  .raw-content {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: auto;
+    box-sizing: border-box;
+    contain: layout;
+    min-width: 0;
+  }
+  
+  .raw-content pre {
+    margin: 0;
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    overflow-x: auto;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    max-width: 100%;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+  
+  .raw-content code {
+    display: block;
+    overflow-x: auto;
+    max-width: 100%;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  .raw-content :global(code.hljs) {
+    overflow-x: auto;
+    display: block;
+    max-width: 100% !important;
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    box-sizing: border-box;
+  }
+  
+  .raw-content :global(code.hljs *),
+  .raw-content :global(code.hljs span),
+  .raw-content :global(code.hljs .hljs-tag),
+  .raw-content :global(code.hljs .hljs-name),
+  .raw-content :global(code.hljs .hljs-attr),
+  .raw-content :global(code.hljs .hljs-string),
+  .raw-content :global(code.hljs .hljs-section),
+  .raw-content :global(code.hljs .hljs-quote),
+  .raw-content :global(code.hljs .hljs-link),
+  .raw-content :global(code.hljs .hljs-code),
+  .raw-content :global(code.hljs .hljs-bullet),
+  .raw-content :global(code.hljs .language-xml) {
+    max-width: 100% !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: pre-wrap !important;
+    display: inline;
+    box-sizing: border-box;
+  }
+  
+  .raw-content :global(pre code.hljs) {
+    width: 100%;
+    max-width: 100% !important;
+    min-width: 0;
+  }
+  
+  .readme-content.raw-content {
+    max-width: 100%;
+    overflow-x: auto;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  
+  .editor-container {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+  
+  .read-only-editor {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+  
+  .read-only-editor > .raw-content,
+  .read-only-editor > .file-preview {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+  
+  .read-only-editor > .raw-content > pre {
+    max-width: 100%;
+    min-width: 0;
+  }
+  
+  .read-only-editor > .raw-content > pre > code {
+    max-width: 100%;
+    min-width: 0;
+    display: block;
+  }
+  
+  .readme-section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+  
+  .readme-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+    width: 100%;
+  }
+  
+  .readme-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--text-primary);
+  }
+  
+  .readme-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  
+  .readme-content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    width: 100%;
+    max-width: 100%;
+    padding: 1.5rem;
+  }
+  
+  .file-editor .editor-actions {
+    display: flex !important;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    visibility: visible !important;
+    opacity: 1 !important;
+    width: auto;
+    min-width: 0;
+  }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/HistoryTab.svelte b/src/routes/repos/[npub]/[repo]/components/HistoryTab.svelte
index 03adf77..4957dff 100644
--- a/src/routes/repos/[npub]/[repo]/components/HistoryTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/HistoryTab.svelte
@@ -22,6 +22,9 @@
     verifyingCommits?: Set<string>;
     showDiff?: boolean;
     diffData?: Array<{ file: string; additions: number; deletions: number; diff: string }>;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
@@ -33,11 +36,21 @@
     onVerify = () => {},
     verifyingCommits = new Set(),
     showDiff = false,
-    diffData = []
+    diffData = [],
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
 </script>
 
-<TabLayout {loading} {error}>
+<TabLayout 
+  {loading} 
+  {error}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Commit History"
+>
   {#snippet leftPane()}
     <div class="commits-list">
       <h3>Commits</h3>
@@ -218,6 +231,24 @@
   
   .commit-detail {
     padding: 1rem;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    min-width: 0;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+  
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    height: 100%;
+    color: var(--text-secondary);
+    box-sizing: border-box;
   }
   
   .commit-detail-header {
@@ -227,14 +258,34 @@
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--border-color);
+    min-width: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .commit-detail-header h2 {
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    flex: 1;
   }
   
   .commit-info {
     margin: 1rem 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
   }
   
   .info-row {
     margin: 1rem 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    box-sizing: border-box;
   }
   
   .commit-message-text {
@@ -243,21 +294,45 @@
     background: var(--bg-secondary);
     border-radius: 4px;
     white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
   }
   
   .files-list {
     margin-top: 0.5rem;
     padding-left: 1.5rem;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .files-list li {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
   }
   
   .diff-section {
     margin-top: 2rem;
     padding-top: 2rem;
     border-top: 1px solid var(--border-color);
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
   }
   
   .diff-file {
     margin: 1rem 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
   }
   
   .diff-header {
@@ -267,11 +342,22 @@
     padding: 0.5rem;
     background: var(--bg-secondary);
     border-radius: 4px 4px 0 0;
+    min-width: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .diff-header strong {
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    flex: 1;
   }
   
   .diff-stats {
     font-family: monospace;
     font-size: 0.9rem;
+    flex-shrink: 0;
   }
   
   .diff-content {
@@ -280,7 +366,24 @@
     background: var(--bg-secondary);
     border-radius: 0 0 4px 4px;
     overflow-x: auto;
+    overflow-y: hidden;
     font-family: monospace;
     font-size: 0.85rem;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+  
+  .diff-content code {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    box-sizing: border-box;
   }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/IssuesTab.svelte b/src/routes/repos/[npub]/[repo]/components/IssuesTab.svelte
index e3aa257..131dee8 100644
--- a/src/routes/repos/[npub]/[repo]/components/IssuesTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/IssuesTab.svelte
@@ -4,6 +4,7 @@
    */
   
   import StatusTabLayout from './StatusTabLayout.svelte';
+  import { renderContent } from '../utils/content-renderer.js';
   
   interface Props {
     issues: Array<{
@@ -23,6 +24,9 @@
     onStatusUpdate?: (id: string, status: string) => void;
     issueReplies?: Array<any>;
     loadingReplies?: boolean;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
@@ -33,20 +37,37 @@
     onSelect = () => {},
     onStatusUpdate = () => {},
     issueReplies = [],
-    loadingReplies = false
+    loadingReplies = false,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
   
   const items = $derived(issues.map(issue => ({
+    ...issue,
     id: issue.id,
     title: issue.subject,
-    status: issue.status,
-    ...issue
+    status: issue.status || 'open'
   })));
   
   const selectedId = $derived(selectedIssue);
+  
+  // Cache for rendered content
+  let renderedContent = $state<Map<string, string>>(new Map());
+  
+  async function getRenderedContent(content: string, kind?: number): Promise<string> {
+    if (!content) return 'No content';
+    const cacheKey = `${kind || 'markdown'}:${content.slice(0, 50)}`;
+    if (renderedContent.has(cacheKey)) {
+      return renderedContent.get(cacheKey)!;
+    }
+    const rendered = await renderContent(content, kind);
+    renderedContent.set(cacheKey, rendered);
+    return rendered;
+  }
 </script>
 
-{#snippet itemRenderer({ item })}
+{#snippet itemRenderer({ item }: { item: any })}
   <div class="issue-item-content">
     <div class="issue-subject">{item.subject}</div>
     <div class="issue-meta">
@@ -56,41 +77,58 @@
   </div>
 {/snippet}
 
-{#snippet detailRenderer({ item })}
-    <div class="issue-detail">
-      <div class="issue-detail-header">
-        <h2>{item.subject}</h2>
-        <div class="issue-actions">
-          <select 
-            value={item.status}
-            onchange={(e) => onStatusUpdate(item.id, (e.target as HTMLSelectElement).value)}
-          >
-            <option value="open">Open</option>
-            <option value="closed">Closed</option>
-            <option value="resolved">Resolved</option>
-          </select>
-        </div>
+{#snippet detailRenderer({ item }: { item: any })}
+  {@const contentPromise = getRenderedContent(item.content || '', item.kind)}
+  {@const currentStatus = item.status || 'open'}
+  <div class="issue-detail">
+    <div class="issue-detail-header">
+      <h2>{item.subject}</h2>
+      <div class="issue-actions">
+        <select 
+          value={currentStatus}
+          onchange={(e) => onStatusUpdate(item.id, (e.target as HTMLSelectElement).value)}
+        >
+          <option value="open">Open</option>
+          <option value="closed">Closed</option>
+          <option value="resolved">Resolved</option>
+        </select>
       </div>
-      
-      <div class="issue-content">
-        {@html item.content || 'No content'}
-      </div>
-      
-      {#if loadingReplies}
-        <div class="loading">Loading replies...</div>
-      {:else if issueReplies.length > 0}
-        <div class="issue-replies">
-          <h3>Replies</h3>
-          {#each issueReplies as reply}
-            <div class="reply">
-              <div class="reply-author">{reply.author}</div>
-              <div class="reply-content">{reply.content}</div>
-              <div class="reply-date">{new Date(reply.created_at * 1000).toLocaleString()}</div>
-            </div>
-          {/each}
-        </div>
-      {/if}
     </div>
+    
+    <div class="issue-content">
+      {#await contentPromise}
+        <div class="loading">Rendering content...</div>
+      {:then html}
+        {@html html}
+      {:catch err}
+        <div class="error">Failed to render content: {err instanceof Error ? err.message : String(err)}</div>
+      {/await}
+    </div>
+    
+    {#if loadingReplies}
+      <div class="loading">Loading replies...</div>
+    {:else if issueReplies.length > 0}
+      <div class="issue-replies">
+        <h3>Replies</h3>
+        {#each issueReplies as reply}
+          {@const replyPromise = getRenderedContent(reply.content || '', reply.kind)}
+          <div class="reply">
+            <div class="reply-author">{reply.author}</div>
+            <div class="reply-content">
+              {#await replyPromise}
+                <div class="loading">Rendering...</div>
+              {:then html}
+                {@html html}
+              {:catch err}
+                {reply.content}
+              {/await}
+            </div>
+            <div class="reply-date">{new Date(reply.created_at * 1000).toLocaleString()}</div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
 {/snippet}
 
 <StatusTabLayout
@@ -106,6 +144,10 @@
   ]}
   {itemRenderer}
   {detailRenderer}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Issues"
 />
 
 <style>
diff --git a/src/routes/repos/[npub]/[repo]/components/PRsTab.svelte b/src/routes/repos/[npub]/[repo]/components/PRsTab.svelte
index 3d2f92d..9494241 100644
--- a/src/routes/repos/[npub]/[repo]/components/PRsTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/PRsTab.svelte
@@ -4,6 +4,8 @@
    */
   
   import StatusTabLayout from './StatusTabLayout.svelte';
+  import { renderContent } from '../utils/content-renderer.js';
+  import { onMount } from 'svelte';
   
   interface Props {
     prs: Array<{
@@ -21,6 +23,9 @@
     error?: string | null;
     onSelect?: (id: string) => void;
     onStatusUpdate?: (id: string, status: string) => void;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
@@ -29,20 +34,37 @@
     loading = false,
     error = null,
     onSelect = () => {},
-    onStatusUpdate = () => {}
+    onStatusUpdate = () => {},
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
   
   const items = $derived(prs.map(pr => ({
+    ...pr,
     id: pr.id,
     title: pr.subject,
-    status: pr.status,
-    ...pr
+    status: pr.status || 'open'
   })));
   
   const selectedId = $derived(selectedPR);
+  
+  // Cache for rendered content
+  let renderedContent = $state<Map<string, string>>(new Map());
+  
+  async function getRenderedContent(content: string, kind?: number): Promise<string> {
+    if (!content) return 'No content';
+    const cacheKey = `${kind || 'markdown'}:${content.slice(0, 50)}`;
+    if (renderedContent.has(cacheKey)) {
+      return renderedContent.get(cacheKey)!;
+    }
+    const rendered = await renderContent(content, kind);
+    renderedContent.set(cacheKey, rendered);
+    return rendered;
+  }
 </script>
 
-{#snippet itemRenderer({ item })}
+{#snippet itemRenderer({ item }: { item: any })}
   <div class="pr-item-content">
     <div class="pr-subject">{item.subject}</div>
     <div class="pr-meta">
@@ -55,13 +77,15 @@
   </div>
 {/snippet}
 
-{#snippet detailRenderer({ item })}
+{#snippet detailRenderer({ item }: { item: any })}
+  {@const contentPromise = getRenderedContent(item.content || '', item.kind)}
+  {@const currentStatus = item.status || 'open'}
   <div class="pr-detail">
     <div class="pr-detail-header">
       <h2>{item.subject}</h2>
       <div class="pr-actions">
         <select 
-          value={item.status}
+          value={currentStatus}
           onchange={(e) => onStatusUpdate(item.id, (e.target as HTMLSelectElement).value)}
         >
           <option value="open">Open</option>
@@ -72,7 +96,13 @@
     </div>
     
     <div class="pr-content">
-      {@html item.content || 'No content'}
+      {#await contentPromise}
+        <div class="loading">Rendering content...</div>
+      {:then html}
+        {@html html}
+      {:catch err}
+        <div class="error">Failed to render content: {err instanceof Error ? err.message : String(err)}</div>
+      {/await}
     </div>
     
     {#if item.commitId}
@@ -96,6 +126,10 @@
   ]}
   {itemRenderer}
   {detailRenderer}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Pull Requests"
 />
 
 <style>
diff --git a/src/routes/repos/[npub]/[repo]/components/PatchesTab.svelte b/src/routes/repos/[npub]/[repo]/components/PatchesTab.svelte
index 664c001..47a063a 100644
--- a/src/routes/repos/[npub]/[repo]/components/PatchesTab.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/PatchesTab.svelte
@@ -4,6 +4,7 @@
    */
   
   import StatusTabLayout from './StatusTabLayout.svelte';
+  import { renderContent } from '../utils/content-renderer.js';
   
   interface Props {
     patches: Array<{
@@ -13,6 +14,7 @@
       status: string;
       author: string;
       created_at: number;
+      kind?: number;
       [key: string]: any;
     }>;
     selectedPatch?: string | null;
@@ -20,7 +22,11 @@
     error?: string | null;
     onSelect?: (id: string) => void;
     onApply?: (id: string) => void;
+    onStatusUpdate?: (id: string, status: string) => void;
     applying?: Record<string, boolean>;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
   }
   
   let {
@@ -30,20 +36,38 @@
     error = null,
     onSelect = () => {},
     onApply = () => {},
-    applying = {}
+    onStatusUpdate = () => {},
+    applying = {},
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {}
   }: Props = $props();
   
   const items = $derived(patches.map(patch => ({
+    ...patch,
     id: patch.id,
     title: patch.subject,
-    status: patch.status || 'open',
-    ...patch
+    status: patch.status || 'open'
   })));
   
   const selectedId = $derived(selectedPatch);
+  
+  // Cache for rendered content
+  let renderedContent = $state<Map<string, string>>(new Map());
+  
+  async function getRenderedContent(content: string, kind?: number): Promise<string> {
+    if (!content) return 'No content';
+    const cacheKey = `${kind || 'markdown'}:${content.slice(0, 50)}`;
+    if (renderedContent.has(cacheKey)) {
+      return renderedContent.get(cacheKey)!;
+    }
+    const rendered = await renderContent(content, kind);
+    renderedContent.set(cacheKey, rendered);
+    return rendered;
+  }
 </script>
 
-{#snippet itemRenderer({ item })}
+{#snippet itemRenderer({ item }: { item: any })}
   <div class="patch-item-content">
     <div class="patch-subject">{item.subject}</div>
     <div class="patch-meta">
@@ -53,12 +77,23 @@
   </div>
 {/snippet}
 
-{#snippet detailRenderer({ item })}
+{#snippet detailRenderer({ item }: { item: any })}
+  {@const contentPromise = getRenderedContent(item.content || '', item.kind)}
+  {@const currentStatus = item.status || 'open'}
   <div class="patch-detail">
     <div class="patch-detail-header">
       <h2>{item.subject}</h2>
       <div class="patch-actions">
-        {#if item.status === 'open'}
+        <select 
+          value={currentStatus}
+          onchange={(e) => onStatusUpdate(item.id, (e.target as HTMLSelectElement).value)}
+          class="status-select"
+        >
+          <option value="open">Open</option>
+          <option value="applied">Applied</option>
+          <option value="rejected">Rejected</option>
+        </select>
+        {#if currentStatus === 'open'}
           <button 
             onclick={() => onApply(item.id)}
             disabled={applying[item.id]}
@@ -71,7 +106,13 @@
     </div>
     
     <div class="patch-content">
-      <pre><code>{item.content}</code></pre>
+      {#await contentPromise}
+        <div class="loading">Rendering content...</div>
+      {:then html}
+        {@html html}
+      {:catch err}
+        <div class="error">Failed to render content: {err instanceof Error ? err.message : String(err)}</div>
+      {/await}
     </div>
   </div>
 {/snippet}
@@ -89,6 +130,10 @@
   ]}
   {itemRenderer}
   {detailRenderer}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  title="Patches"
 />
 
 <style>
@@ -124,15 +169,7 @@
   
   .patch-content {
     margin: 1rem 0;
-  }
-  
-  .patch-content pre {
-    background: var(--bg-secondary);
-    padding: 1rem;
-    border-radius: 4px;
-    overflow-x: auto;
-    font-family: monospace;
-    font-size: 0.9rem;
+    line-height: 1.6;
   }
   
   .apply-button {
@@ -148,4 +185,13 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  
+  .status-select {
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    margin-right: 0.5rem;
+  }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/StatusTabLayout.svelte b/src/routes/repos/[npub]/[repo]/components/StatusTabLayout.svelte
index 19e1351..29510f2 100644
--- a/src/routes/repos/[npub]/[repo]/components/StatusTabLayout.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/StatusTabLayout.svelte
@@ -20,6 +20,10 @@
     statusGroups?: Array<{ label: string; value: string }>;
     itemRenderer?: import('svelte').Snippet<[{ item: { id: string; title: string; status: string; [key: string]: any } }]>;
     detailRenderer?: import('svelte').Snippet<[{ item: { id: string; title: string; status: string; [key: string]: any } }]>;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
+    title?: string;
   }
   
   let {
@@ -33,7 +37,11 @@
       { label: 'Closed', value: 'closed' }
     ],
     itemRenderer,
-    detailRenderer
+    detailRenderer,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {},
+    title = ''
   }: Props = $props();
   
   let selectedItem = $derived(items.find(item => item.id === selectedId) || null);
@@ -58,7 +66,14 @@
   const grouped = $derived(groupByStatus());
 </script>
 
-<TabLayout {loading} {error}>
+<TabLayout 
+  {loading} 
+  {error}
+  {activeTab}
+  {tabs}
+  {onTabChange}
+  {title}
+>
   {#snippet leftPane()}
     <div class="status-groups">
       {#each statusGroups as { label, value }}
@@ -104,6 +119,10 @@
           <pre>{JSON.stringify(selectedItem, null, 2)}</pre>
         </div>
       {/if}
+    {:else}
+      <div class="empty-state">
+        <p>Select an item to view details</p>
+      </div>
     {/if}
   {/snippet}
 </TabLayout>
@@ -167,9 +186,24 @@
   
   .detail-view {
     padding: 1rem;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
   
   .detail-view h2 {
     margin-top: 0;
   }
+  
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    height: 100%;
+    color: var(--text-secondary);
+    box-sizing: border-box;
+  }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/TabLayout.svelte b/src/routes/repos/[npub]/[repo]/components/TabLayout.svelte
index 00a6094..f63ac66 100644
--- a/src/routes/repos/[npub]/[repo]/components/TabLayout.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/TabLayout.svelte
@@ -4,49 +4,98 @@
    * Provides left-pane/right-panel structure for all tabs
    */
   
+  import TabsMenu from '$lib/components/TabsMenu.svelte';
+  
   interface Props {
     leftPane?: any;
     rightPanel?: any;
     loading?: boolean;
     error?: string | null;
+    activeTab?: string;
+    tabs?: Array<{ id: string; label: string; icon?: string }>;
+    onTabChange?: (tab: string) => void;
+    title?: string;
   }
   
   let {
     leftPane = null,
     rightPanel = null,
     loading = false,
-    error = null
+    error = null,
+    activeTab = '',
+    tabs = [],
+    onTabChange = () => {},
+    title = ''
   }: Props = $props();
 </script>
 
-<div class="tab-layout">
-  <div class="left-pane">
-    {#if loading}
-      <div class="loading">Loading...</div>
-    {:else if error}
-      <div class="error">{error}</div>
-    {:else}
-      {#if leftPane}
-        {@render leftPane()}
+<div class="tab-layout-wrapper">
+  {#if tabs.length > 0}
+    <div class="tab-header">
+      <TabsMenu 
+        activeTab={activeTab || ''} 
+        {tabs} 
+        onTabChange={(tab) => onTabChange(tab)}
+      />
+      {#if title}
+        <h2 class="tab-title">{title}</h2>
       {/if}
-    {/if}
-  </div>
+    </div>
+  {/if}
   
-  <div class="right-panel">
-    {#if rightPanel}
-      {@render rightPanel()}
-    {:else}
-      <div class="empty-state">
-        <p>Select an item to view details</p>
-      </div>
-    {/if}
+  <div class="tab-layout">
+    <div class="left-pane">
+      {#if loading}
+        <div class="loading">Loading...</div>
+      {:else if error}
+        <div class="error">{error}</div>
+      {:else}
+        {#if leftPane}
+          {@render leftPane()}
+        {/if}
+      {/if}
+    </div>
+    
+    <div class="right-panel">
+      {#if rightPanel}
+        {@render rightPanel()}
+      {:else}
+        <div class="empty-state">
+          <p>Select an item to view details</p>
+        </div>
+      {/if}
+    </div>
   </div>
 </div>
 
 <style>
-  .tab-layout {
+  .tab-layout-wrapper {
     display: flex;
+    flex-direction: column;
     height: 100%;
+  }
+  
+  .tab-header {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--bg-primary);
+    flex-shrink: 0;
+  }
+  
+  .tab-title {
+    flex: 1;
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--text-primary);
+  }
+  
+  .tab-layout {
+    display: flex;
+    flex: 1;
+    min-height: 0;
     gap: 1rem;
   }
   
@@ -59,8 +108,22 @@
   
   .right-panel {
     flex: 1;
+    min-width: 0;
+    width: 100%;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+  
+  .right-panel > * {
+    min-width: 0;
+    max-width: 100%;
+    width: 100%;
+    flex: 1;
+    box-sizing: border-box;
   }
   
   .loading, .error {
@@ -76,7 +139,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
     height: 100%;
     color: var(--text-secondary);
+    box-sizing: border-box;
   }
 </style>
diff --git a/src/routes/repos/[npub]/[repo]/components/dialogs/CloneUrlVerificationDialog.svelte b/src/routes/repos/[npub]/[repo]/components/dialogs/CloneUrlVerificationDialog.svelte
index 97813b0..0cec054 100644
--- a/src/routes/repos/[npub]/[repo]/components/dialogs/CloneUrlVerificationDialog.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/dialogs/CloneUrlVerificationDialog.svelte
@@ -25,7 +25,7 @@
     </p>
     {#if state.verification.selectedCloneUrl}
       <p style="margin: 1rem 0;">
-        <strong>Clone URL:</strong> <code>{state.verification.selectedCloneUrl}</code>
+        <strong>Clone URL:</strong> <code class="verification-code">{state.verification.selectedCloneUrl}</code>
       </p>
     {/if}
     {#if state.clone.isCloned !== true}
@@ -34,7 +34,7 @@
       </div>
     {:else}
       <p style="margin: 1rem 0; color: var(--text-secondary);">
-        This will commit the repository announcement event to <code>nostr/repo-events.jsonl</code> in the default branch, which verifies that you control this repository.
+        This will commit the repository announcement event to <code class="verification-code">nostr/repo-events.jsonl</code> in the default branch, which verifies that you control this repository.
       </p>
     {/if}
     {#if state.error}
@@ -71,7 +71,7 @@
     margin-bottom: 1rem;
   }
 
-  .verification-instructions code {
+  .verification-code {
     background: var(--bg-secondary, #f5f5f5);
     padding: 0.2rem 0.4rem;
     border-radius: 3px;
diff --git a/src/routes/repos/[npub]/[repo]/components/dialogs/VerificationDialog.svelte b/src/routes/repos/[npub]/[repo]/components/dialogs/VerificationDialog.svelte
index 82754c0..89be781 100644
--- a/src/routes/repos/[npub]/[repo]/components/dialogs/VerificationDialog.svelte
+++ b/src/routes/repos/[npub]/[repo]/components/dialogs/VerificationDialog.svelte
@@ -16,7 +16,7 @@
 <Modal {open} title="Repository Verification File" ariaLabel="Repository verification file" {onClose}>
   <div class="modal-body">
     <p class="verification-instructions">
-      The announcement event should be saved to <code>nostr/repo-events.jsonl</code> in your repository.
+      The announcement event should be saved to <code class="verification-code">nostr/repo-events.jsonl</code> in your repository.
       You can download the announcement event JSON below for reference.
     </p>
     <div class="verification-file-content">
@@ -45,7 +45,7 @@
     color: var(--text-secondary, #666);
   }
 
-  .verification-instructions code {
+  .verification-code {
     background: var(--bg-secondary, #f5f5f5);
     padding: 0.2rem 0.4rem;
     border-radius: 3px;
diff --git a/src/routes/repos/[npub]/[repo]/hooks/use-repo-effects.ts b/src/routes/repos/[npub]/[repo]/hooks/use-repo-effects.ts
index 27dba77..becaf57 100644
--- a/src/routes/repos/[npub]/[repo]/hooks/use-repo-effects.ts
+++ b/src/routes/repos/[npub]/[repo]/hooks/use-repo-effects.ts
@@ -6,17 +6,15 @@
  * where $page and $userStore runes are available
  */
 
-import { page } from '$app/stores';
-import { userStore } from '$lib/stores/user-store.js';
 import { settingsStore } from '$lib/services/settings-store.js';
 import type { RepoState } from '../stores/repo-state.js';
 
 /**
  * Sync pageData from $page store
- * Must be called from component context where $page is available
+ * Returns effect callback that should be called within $effect in component
  */
-export function usePageDataEffect(state: RepoState, getPageData: () => any): void {
-  $effect(() => {
+export function usePageDataEffect(state: RepoState, getPageData: () => any): () => void {
+  return () => {
     if (typeof window === 'undefined' || !state.isMounted) return;
     try {
       const data = getPageData();
@@ -28,15 +26,15 @@ export function usePageDataEffect(state: RepoState, getPageData: () => any): voi
         console.warn('Failed to update pageData:', err);
       }
     }
-  });
+  };
 }
 
 /**
  * Sync params from $page store
- * Must be called from component context where $page is available
+ * Returns effect callback that should be called within $effect in component
  */
-export function usePageParamsEffect(state: RepoState, getPageParams: () => { npub?: string; repo?: string }): void {
-  $effect(() => {
+export function usePageParamsEffect(state: RepoState, getPageParams: () => { npub?: string; repo?: string }): () => void {
+  return () => {
     if (typeof window === 'undefined' || !state.isMounted) return;
     try {
       const params = getPageParams();
@@ -58,12 +56,12 @@ export function usePageParamsEffect(state: RepoState, getPageParams: () => { npu
         // Ignore errors - params will be set eventually
       }
     }
-  });
+  };
 }
 
 /**
  * Load maintainers when repo data is available
- * Must be called from component context where $page is available
+ * Returns effect callback that should be called within $effect in component
  */
 export function useMaintainersEffect(
   state: RepoState,
@@ -71,8 +69,8 @@ export function useMaintainersEffect(
   getRepoMaintainers: () => string[],
   loadAllMaintainers: () => Promise<void>,
   getPageData: () => any
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (typeof window === 'undefined' || !state.isMounted) return;
     try {
       const data = getPageData();
@@ -107,18 +105,19 @@ export function useMaintainersEffect(
         console.warn('Maintainers effect error:', err);
       }
     }
-  });
+  };
 }
 
 /**
  * Watch auto-save settings and manage auto-save interval
+ * Returns effect callback that should be called within $effect in component
  */
 export function useAutoSaveEffect(
   state: RepoState,
   autoSaveInterval: { value: ReturnType<typeof setInterval> | null },
   setupAutoSave: () => void
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted) return;
     settingsStore.getSettings().then(settings => {
       if (!state.isMounted) return;
@@ -135,12 +134,12 @@ export function useAutoSaveEffect(
         console.warn('Failed to check auto-save setting:', err);
       }
     });
-  });
+  };
 }
 
 /**
  * Sync user state from userStore and reload data on login/logout
- * Must be called from component context where $userStore is available
+ * Returns effect callback that should be called within $effect in component
  */
 export function useUserStoreEffect(
   state: RepoState,
@@ -157,8 +156,8 @@ export function useUserStoreEffect(
     loadTags: () => Promise<void>;
     loadDiscussions: () => Promise<void>;
   }
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted) return;
     try {
       const currentUser = getUserStore();
@@ -245,18 +244,19 @@ export function useUserStoreEffect(
         console.warn('User store sync error:', err);
       }
     }
-  });
+  };
 }
 
 /**
  * Handle tab switching when clone status changes
+ * Returns effect callback that should be called within $effect in component
  */
 export function useTabSwitchEffect(
   state: RepoState,
   tabs: Array<{ id: string }>,
   canUseApiFallback: boolean
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted) return;
     if (state.clone.isCloned === false && !canUseApiFallback && tabs.length > 0) {
       const currentTab = tabs.find(t => t.id === state.ui.activeTab);
@@ -264,15 +264,15 @@ export function useTabSwitchEffect(
         state.ui.activeTab = tabs[0].id as typeof state.ui.activeTab;
       }
     }
-  });
+  };
 }
 
 /**
  * Update repo images from pageData
- * Must be called from component context where $page is available
+ * Returns effect callback that should be called within $effect in component
  */
-export function useRepoImagesEffect(state: RepoState, getPageData: () => any): void {
-  $effect(() => {
+export function useRepoImagesEffect(state: RepoState, getPageData: () => any): () => void {
+  return () => {
     if (typeof window === 'undefined' || !state.isMounted) return;
     try {
       const data = getPageData();
@@ -290,17 +290,18 @@ export function useRepoImagesEffect(state: RepoState, getPageData: () => any): v
         console.warn('Image update effect error:', err);
       }
     }
-  });
+  };
 }
 
 /**
  * Load patch highlights when patch is selected
+ * Returns effect callback that should be called within $effect in component
  */
 export function usePatchHighlightsEffect(
   state: RepoState,
   loadPatchHighlights: (patchId: string, author: string) => Promise<void>
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted || !state.selected.patch) return;
     const patch = state.patches.find(p => p.id === state.selected.patch);
     if (patch) {
@@ -308,11 +309,12 @@ export function usePatchHighlightsEffect(
         if (state.isMounted) console.warn('Failed to load patch highlights:', err);
       });
     }
-  });
+  };
 }
 
 /**
  * Load tab content when tab changes
+ * Returns effect callback that should be called within $effect in component
  */
 export function useTabChangeEffect(
   state: RepoState,
@@ -330,8 +332,8 @@ export function useTabChangeEffect(
     loadDiscussions: () => Promise<void>;
     loadPatches: () => Promise<void>;
   }
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted) return;
     if (state.ui.activeTab !== lastTab.value) {
       lastTab.value = state.ui.activeTab;
@@ -389,11 +391,12 @@ export function useTabChangeEffect(
         });
       }
     }
-  });
+  };
 }
 
 /**
  * Reload branch-dependent data when branch changes
+ * Returns effect callback that should be called within $effect in component
  */
 export function useBranchChangeEffect(
   state: RepoState,
@@ -405,8 +408,8 @@ export function useBranchChangeEffect(
     loadCommitHistory: () => Promise<void>;
     loadDocumentation: () => Promise<void>;
   }
-): void {
-  $effect(() => {
+): () => void {
+  return () => {
     if (!state.isMounted) return;
     if (state.git.currentBranch && state.git.currentBranch !== lastBranch.value) {
       lastBranch.value = state.git.currentBranch;
@@ -443,5 +446,5 @@ export function useBranchChangeEffect(
         });
       }
     }
-  });
+  };
 }
diff --git a/src/routes/repos/[npub]/[repo]/services/auth-operations.ts b/src/routes/repos/[npub]/[repo]/services/auth-operations.ts
new file mode 100644
index 0000000..3e99c79
--- /dev/null
+++ b/src/routes/repos/[npub]/[repo]/services/auth-operations.ts
@@ -0,0 +1,122 @@
+/**
+ * Authentication operations service
+ * Handles user authentication and login
+ */
+
+import type { RepoState } from '../stores/repo-state.js';
+import { userStore } from '$lib/stores/user-store.js';
+import { getPublicKeyWithNIP07 } from '$lib/services/nostr/nip07-signer.js';
+import { get } from 'svelte/store';
+
+/**
+ * Check authentication status
+ */
+export async function checkAuth(state: RepoState): Promise<void> {
+  // Check userStore first
+  const currentUser = get(userStore);
+  if (currentUser.userPubkey && currentUser.userPubkeyHex) {
+    state.user.pubkey = currentUser.userPubkey;
+    state.user.pubkeyHex = currentUser.userPubkeyHex;
+    // Recheck maintainer status and bookmark status after auth
+    // These will be called by useUserStoreEffect hook
+  }
+}
+
+/**
+ * Login with NIP-07
+ */
+export async function login(
+  state: RepoState,
+  callbacks: {
+    checkMaintainerStatus: () => Promise<void>;
+    loadBookmarkStatus: () => Promise<void>;
+  }
+): Promise<void> {
+  // Check userStore first
+  const currentUser = get(userStore);
+  if (currentUser.userPubkey && currentUser.userPubkeyHex) {
+    state.user.pubkey = currentUser.userPubkey;
+    state.user.pubkeyHex = currentUser.userPubkeyHex;
+    // Recheck maintainer status and bookmark status after auth
+    await callbacks.checkMaintainerStatus();
+    await callbacks.loadBookmarkStatus();
+    return;
+  }
+  
+  try {
+    // Get public key from NIP-07 extension
+    const pubkey = await getPublicKeyWithNIP07();
+    if (!pubkey) {
+      state.error = 'Failed to get public key from NIP-07 extension';
+      return;
+    }
+    
+    state.user.pubkey = pubkey;
+    
+    // Convert npub to hex if needed
+    let pubkeyHex: string;
+    if (pubkey.startsWith('npub')) {
+      try {
+        const { nip19 } = await import('nostr-tools');
+        const decoded = nip19.decode(pubkey);
+        if (decoded.type === 'npub') {
+          pubkeyHex = decoded.data as string;
+        } else {
+          state.error = 'Invalid public key format';
+          return;
+        }
+      } catch {
+        state.error = 'Invalid public key format';
+        return;
+      }
+    } else {
+      pubkeyHex = pubkey;
+    }
+    
+    state.user.pubkeyHex = pubkeyHex;
+    
+    // Check write access and update user store
+    const { determineUserLevel } = await import('$lib/services/nostr/user-level-service.js');
+    const levelResult = await determineUserLevel(state.user.pubkey, state.user.pubkeyHex);
+    
+    // Update user store with write access level
+    userStore.setUser(
+      levelResult.userPubkey,
+      levelResult.userPubkeyHex,
+      levelResult.level,
+      levelResult.error || null
+    );
+    
+    // Update activity tracking
+    const { updateActivity } = await import('$lib/services/activity-tracker.js');
+    updateActivity();
+    
+    // Check for pending transfer events
+    if (state.user.pubkeyHex) {
+      try {
+        const response = await fetch('/api/transfers/pending', {
+          headers: {
+            'X-User-Pubkey': state.user.pubkeyHex
+          }
+        });
+        if (response.ok) {
+          const data = await response.json();
+          if (data.pendingTransfers && data.pendingTransfers.length > 0) {
+            window.dispatchEvent(new CustomEvent('pendingTransfers', { 
+              detail: { transfers: data.pendingTransfers } 
+            }));
+          }
+        }
+      } catch (err) {
+        console.error('Failed to check for pending transfers:', err);
+      }
+    }
+    
+    // Re-check maintainer status and bookmark status after login
+    await callbacks.checkMaintainerStatus();
+    await callbacks.loadBookmarkStatus();
+  } catch (err) {
+    state.error = err instanceof Error ? err.message : 'Failed to connect';
+    console.error('Login error:', err);
+  }
+}
diff --git a/src/routes/repos/[npub]/[repo]/services/patch-handlers.ts b/src/routes/repos/[npub]/[repo]/services/patch-handlers.ts
new file mode 100644
index 0000000..f1ff236
--- /dev/null
+++ b/src/routes/repos/[npub]/[repo]/services/patch-handlers.ts
@@ -0,0 +1,42 @@
+/**
+ * Patch handler utilities
+ * UI interaction handlers for patch operations
+ */
+
+import type { RepoState } from '../stores/repo-state.js';
+
+/**
+ * Handle patch code selection
+ */
+export function handlePatchCodeSelection(
+  text: string,
+  startLine: number,
+  endLine: number,
+  startPos: number,
+  endPos: number,
+  state: RepoState
+): void {
+  if (!text.trim() || !state.user.pubkey) return;
+  
+  state.forms.patchHighlight.text = text;
+  state.forms.patchHighlight.startLine = startLine;
+  state.forms.patchHighlight.endLine = endLine;
+  state.forms.patchHighlight.startPos = startPos;
+  state.forms.patchHighlight.endPos = endPos;
+  state.openDialog = 'patchHighlight';
+}
+
+/**
+ * Start patch comment
+ */
+export function startPatchComment(
+  parentId: string | undefined,
+  state: RepoState
+): void {
+  if (!state.user.pubkey) {
+    alert('Please connect your NIP-07 extension');
+    return;
+  }
+  state.forms.patchComment.replyingTo = parentId || null;
+  state.openDialog = 'patchComment';
+}
diff --git a/src/routes/repos/[npub]/[repo]/services/repo-operations.ts b/src/routes/repos/[npub]/[repo]/services/repo-operations.ts
index 5233291..390bd05 100644
--- a/src/routes/repos/[npub]/[repo]/services/repo-operations.ts
+++ b/src/routes/repos/[npub]/[repo]/services/repo-operations.ts
@@ -557,3 +557,267 @@ export async function loadRepoImages(
     console.error('Error loading repo images:', err);
   }
 }
+
+/**
+ * Generate announcement file for repository
+ */
+export async function generateAnnouncementFileForRepo(
+  state: RepoState,
+  repoOwnerPubkeyDerived: string | null
+): Promise<void> {
+  if (!repoOwnerPubkeyDerived || !state.user.pubkeyHex) {
+    state.error = 'Unable to generate announcement file: missing repository or user information';
+    return;
+  }
+
+  try {
+    // Fetch the repository announcement event
+    const { NostrClient } = await import('$lib/services/nostr/nostr-client.js');
+    const { DEFAULT_NOSTR_RELAYS, DEFAULT_NOSTR_SEARCH_RELAYS } = await import('$lib/config.js');
+    const { KIND } = await import('$lib/types/nostr.js');
+    const nostrClient = new NostrClient([...new Set([...DEFAULT_NOSTR_RELAYS, ...DEFAULT_NOSTR_SEARCH_RELAYS])]);
+    const events = await nostrClient.fetchEvents([
+      {
+        kinds: [KIND.REPO_ANNOUNCEMENT],
+        authors: [repoOwnerPubkeyDerived],
+        '#d': [state.repo],
+        limit: 1
+      }
+    ]);
+
+    if (events.length === 0) {
+      state.error = 'Repository announcement not found. Please ensure the repository is registered on Nostr.';
+      return;
+    }
+
+    const announcement = events[0] as NostrEvent;
+    // Generate announcement event JSON (for download/reference)
+    state.verification.fileContent = JSON.stringify(announcement, null, 2) + '\n';
+    state.openDialog = 'verification';
+  } catch (err) {
+    console.error('Failed to generate announcement file:', err);
+    state.error = `Failed to generate announcement file: ${err instanceof Error ? err.message : String(err)}`;
+  }
+}
+
+/**
+ * Copy verification file content to clipboard
+ */
+export function copyVerificationToClipboard(state: RepoState): void {
+  if (!state.verification.fileContent) return;
+  
+  navigator.clipboard.writeText(state.verification.fileContent).then(() => {
+    alert('Verification file content copied to clipboard!');
+  }).catch((err) => {
+    console.error('Failed to copy:', err);
+    alert('Failed to copy to clipboard. Please select and copy manually.');
+  });
+}
+
+/**
+ * Download verification file
+ */
+export function downloadVerificationFile(state: RepoState): void {
+  if (!state.verification.fileContent) return;
+  
+  const blob = new Blob([state.verification.fileContent], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'announcement-event.json';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Verify clone URL
+ */
+export async function verifyCloneUrl(
+  state: RepoState,
+  repoOwnerPubkeyDerived: string | null,
+  callbacks: { checkVerification: () => Promise<void> }
+): Promise<void> {
+  if (!state.verification.selectedCloneUrl || !state.user.pubkey || !state.user.pubkeyHex) {
+    state.error = 'Unable to verify: missing information';
+    return;
+  }
+
+  if (!state.maintainers.isMaintainer && state.user.pubkeyHex !== repoOwnerPubkeyDerived) {
+    state.error = 'Only repository owners and maintainers can verify clone URLs';
+    return;
+  }
+
+  // selectedCloneUrl is already set when user selects it
+  state.error = null;
+
+  try {
+    const data = await apiRequest<{ message?: string }>(`/api/repos/${state.npub}/${state.repo}/verify`, {
+      method: 'POST'
+    } as RequestInit);
+    
+    // Close dialog
+    state.openDialog = null;
+    state.verification.selectedCloneUrl = null;
+
+    // Reload verification status after a short delay
+    setTimeout(() => {
+      callbacks.checkVerification().catch((err: unknown) => {
+        console.warn('Failed to reload verification status:', err);
+      });
+    }, 1000);
+
+    // Show success message
+    alert(data.message || 'Repository verification initiated. The verification status will update shortly.');
+  } catch (err) {
+    state.error = err instanceof Error ? err.message : 'Failed to verify repository';
+    console.error('Error verifying clone URL:', err);
+  } finally {
+    state.verification.selectedCloneUrl = null;
+  }
+}
+
+/**
+ * Delete repository announcement
+ */
+export async function deleteAnnouncement(
+  state: RepoState,
+  repoOwnerPubkeyDerived: string | null,
+  announcementEventId: { value: string | null }
+): Promise<void> {
+  if (!state.user.pubkey || !state.user.pubkeyHex) {
+    alert('Please connect your NIP-07 extension');
+    return;
+  }
+
+  if (!repoOwnerPubkeyDerived || state.user.pubkeyHex !== repoOwnerPubkeyDerived) {
+    alert('Only the repository owner can delete the announcement');
+    return;
+  }
+
+  // First confirmation
+  if (!confirm('WARNING: Are you sure you want to delete this repository announcement?\n\nThis will permanently delete the repository announcement from Nostr relays. This action CANNOT be undone.\n\nClick OK to continue, or Cancel to abort.')) {
+    return;
+  }
+
+  // Second confirmation for critical operation
+  if (!confirm('FINAL CONFIRMATION: This will permanently delete the repository announcement.\n\nAre you absolutely certain you want to proceed?\n\nThis action CANNOT be undone.')) {
+    return;
+  }
+
+  state.creating.announcement = true;
+  state.error = null;
+
+  try {
+    // Fetch the repository announcement to get its event ID
+    const { NostrClient } = await import('$lib/services/nostr/nostr-client.js');
+    const { DEFAULT_NOSTR_RELAYS, DEFAULT_NOSTR_SEARCH_RELAYS, combineRelays } = await import('$lib/config.js');
+    const { getUserRelays } = await import('$lib/services/nostr/user-relays.js');
+    const { signEventWithNIP07 } = await import('$lib/services/nostr/nip07-signer.js');
+    const { KIND } = await import('$lib/types/nostr.js');
+    const nostrClient = new NostrClient([...new Set([...DEFAULT_NOSTR_RELAYS, ...DEFAULT_NOSTR_SEARCH_RELAYS])]);
+    const events = await nostrClient.fetchEvents([
+      {
+        kinds: [KIND.REPO_ANNOUNCEMENT],
+        authors: [repoOwnerPubkeyDerived],
+        '#d': [state.repo],
+        limit: 1
+      }
+    ]);
+
+    if (events.length === 0) {
+      throw new Error('Repository announcement not found');
+    }
+
+    const announcement = events[0];
+    announcementEventId.value = announcement.id;
+
+    // Get user relays
+    const { outbox } = await getUserRelays(state.user.pubkeyHex, nostrClient);
+    const combinedRelays = combineRelays(outbox);
+
+    // Create deletion request (NIP-09)
+    const deletionRequestTemplate: Omit<NostrEvent, 'sig' | 'id'> = {
+      kind: KIND.DELETION_REQUEST,
+      pubkey: state.user.pubkeyHex,
+      created_at: Math.floor(Date.now() / 1000),
+      content: `Requesting deletion of repository announcement for ${state.repo}`,
+      tags: [
+        ['e', announcement.id], // Reference to the announcement event
+        ['a', `${KIND.REPO_ANNOUNCEMENT}:${repoOwnerPubkeyDerived}:${state.repo}`], // Repository address
+        ['k', KIND.REPO_ANNOUNCEMENT.toString()] // Kind of event being deleted
+      ]
+    };
+
+    // Sign with NIP-07
+    const signedDeletionRequest = await signEventWithNIP07(deletionRequestTemplate);
+
+    // Publish to relays
+    const publishResult = await nostrClient.publishEvent(signedDeletionRequest, combinedRelays);
+
+    if (publishResult.success.length > 0) {
+      alert(`Deletion request published successfully to ${publishResult.success.length} relay(s).`);
+    } else {
+      throw new Error(`Failed to publish deletion request to any relay. Errors: ${publishResult.failed.map(f => `${f.relay}: ${f.error}`).join('; ')}`);
+    }
+  } catch (err) {
+    console.error('Failed to delete announcement:', err);
+    state.error = err instanceof Error ? err.message : 'Failed to send deletion request';
+    alert(state.error);
+  } finally {
+    state.creating.announcement = false;
+  }
+}
+
+/**
+ * Copy event ID to clipboard
+ */
+export async function copyEventId(
+  state: RepoState,
+  repoOwnerPubkeyDerived: string | null
+): Promise<void> {
+  if (!state.metadata.address || !repoOwnerPubkeyDerived) {
+    alert('Repository address not available');
+    return;
+  }
+
+  try {
+    const { nip19 } = await import('nostr-tools');
+    const { KIND } = await import('$lib/types/nostr.js');
+    
+    // Create naddr (NIP-19 address) for the repository
+    const naddr = nip19.naddrEncode({
+      kind: KIND.REPO_ANNOUNCEMENT,
+      pubkey: repoOwnerPubkeyDerived,
+      identifier: state.repo,
+      relays: []
+    });
+
+    // Try to use the Clipboard API
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(naddr);
+    } else {
+      // Fallback: use execCommand for older browsers or if clipboard API fails
+      const textArea = document.createElement('textarea');
+      textArea.value = naddr;
+      textArea.style.position = 'fixed';
+      textArea.style.opacity = '0';
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        document.execCommand('copy');
+        textArea.remove();
+      } catch (execErr) {
+        textArea.remove();
+        throw new Error('Failed to copy to clipboard. Please copy manually: ' + naddr);
+      }
+    }
+    
+    // Show message with naddr
+    alert(`Event ID copied to clipboard!\n\nnaddr (repository address):\n${naddr}`);
+  } catch (err) {
+    console.error('Failed to copy event ID:', err);
+    alert(`Failed to copy event ID: ${err instanceof Error ? err.message : String(err)}`);
+  }
+}
diff --git a/src/routes/repos/[npub]/[repo]/services/tag-operations.ts b/src/routes/repos/[npub]/[repo]/services/tag-operations.ts
index 141bc8a..52a84ea 100644
--- a/src/routes/repos/[npub]/[repo]/services/tag-operations.ts
+++ b/src/routes/repos/[npub]/[repo]/services/tag-operations.ts
@@ -22,13 +22,15 @@ export async function loadTags(
     const tags = await apiRequest<Array<{ name: string; hash: string; message?: string; date?: number }>>(
       `/api/repos/${state.npub}/${state.repo}/tags`
     );
-    state.git.tags = tags;
+    state.git.tags = tags || [];
     // Auto-select first tag if none selected
     if (state.git.tags.length > 0 && !state.git.selectedTag) {
       state.git.selectedTag = state.git.tags[0].name;
     }
   } catch (err) {
-    console.error('Failed to load tags:', err);
+    // If tags endpoint returns 404 or error, just set empty array (tags are optional)
+    console.warn('Failed to load tags (this is OK if repo has no tags):', err);
+    state.git.tags = [];
   }
 }
 
diff --git a/src/routes/repos/[npub]/[repo]/stores/repo-state.ts b/src/routes/repos/[npub]/[repo]/stores/repo-state.ts
index fa021b3..c3c8943 100644
--- a/src/routes/repos/[npub]/[repo]/stores/repo-state.ts
+++ b/src/routes/repos/[npub]/[repo]/stores/repo-state.ts
@@ -582,7 +582,7 @@ export function createRepoState(): RepoState {
       pubkeyHex: null
     },
     ui: {
-      activeTab: 'files',
+      activeTab: 'docs',
       showRepoMenu: false,
       showFileListOnMobile: true,
       showLeftPanelOnMobile: true,
diff --git a/src/routes/repos/[npub]/[repo]/utils/content-renderer.ts b/src/routes/repos/[npub]/[repo]/utils/content-renderer.ts
new file mode 100644
index 0000000..e1aa4ee
--- /dev/null
+++ b/src/routes/repos/[npub]/[repo]/utils/content-renderer.ts
@@ -0,0 +1,87 @@
+/**
+ * Content rendering utility
+ * Renders content as Markdown (default) or AsciiDoc (for kinds 30041 and 30818)
+ * Consolidates rendering logic used by DocsViewer, PRsTab, IssuesTab, and PatchesTab
+ */
+
+/**
+ * Render content as HTML based on kind or contentType
+ * @param content - The content to render
+ * @param kindOrType - The Nostr event kind (30041 or 30818 for AsciiDoc) or contentType string ('asciidoc' for AsciiDoc, everything else for Markdown)
+ * @returns Promise<string> - Rendered HTML
+ */
+export async function renderContent(
+  content: string, 
+  kindOrType?: number | 'markdown' | 'asciidoc' | 'text'
+): Promise<string> {
+  if (!content) return '';
+  
+  // Determine if we should use AsciiDoc
+  let useAsciiDoc = false;
+  if (typeof kindOrType === 'number') {
+    // Nostr event kind: 30041 or 30818 for AsciiDoc
+    useAsciiDoc = kindOrType === 30041 || kindOrType === 30818;
+  } else if (typeof kindOrType === 'string') {
+    // Content type string: 'asciidoc' for AsciiDoc
+    useAsciiDoc = kindOrType === 'asciidoc';
+  }
+  
+  if (useAsciiDoc) {
+    // Use AsciiDoc parser
+    const asciidoctor = (await import('asciidoctor')).default();
+    const result = asciidoctor.convert(content, {
+      safe: 'safe',
+      attributes: {
+        'source-highlighter': 'highlight.js'
+      }
+    });
+    return typeof result === 'string' ? result : String(result);
+  } else if (typeof kindOrType === 'string' && kindOrType === 'text') {
+    // Plain text - escape HTML
+    return content
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br>');
+  } else {
+    // Use Markdown parser (default)
+    const MarkdownIt = (await import('markdown-it')).default;
+    const hljsModule = await import('highlight.js');
+    const hljs = hljsModule.default || hljsModule;
+    
+    const md = new MarkdownIt({
+      html: true,
+      linkify: true,
+      typographer: true,
+      highlight: function (str: string, lang: string): string {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return '<pre class="hljs"><code>' +
+                   hljs.highlight(str, { language: lang }).value +
+                   '</code></pre>';
+          } catch (err) {
+            // Fallback to escaped HTML if highlighting fails
+          }
+        }
+        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+      }
+    });
+    
+    let rendered = md.render(content);
+    
+    // Add IDs to headings for anchor links (like DocsViewer does)
+    rendered = rendered.replace(/<h([1-6])>(.*?)<\/h[1-6]>/g, (match, level, text) => {
+      const textContent = text.replace(/<[^>]*>/g, '').trim();
+      const slug = textContent
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+      
+      return `<h${level} id="${slug}">${text}</h${level}>`;
+    });
+    
+    return rendered;
+  }
+}
diff --git a/src/routes/repos/[npub]/[repo]/utils/discussion-utils.ts b/src/routes/repos/[npub]/[repo]/utils/discussion-utils.ts
index 334f3cf..abf6e19 100644
--- a/src/routes/repos/[npub]/[repo]/utils/discussion-utils.ts
+++ b/src/routes/repos/[npub]/[repo]/utils/discussion-utils.ts
@@ -47,3 +47,33 @@ export function getReferencedEventFromDiscussion(
   }
   return undefined;
 }
+
+/**
+ * Count all replies recursively
+ */
+export function countAllReplies(comments: Array<{ replies?: Array<any> }> | undefined): number {
+  if (!comments || comments.length === 0) {
+    return 0;
+  }
+  let count = comments.length;
+  for (const comment of comments) {
+    if (comment.replies && comment.replies.length > 0) {
+      count += countAllReplies(comment.replies);
+    }
+  }
+  return count;
+}
+
+/**
+ * Toggle thread expansion
+ */
+export function toggleThread(
+  threadId: string,
+  expandedThreads: Set<string>
+): void {
+  if (expandedThreads.has(threadId)) {
+    expandedThreads.delete(threadId);
+  } else {
+    expandedThreads.add(threadId);
+  }
+}
diff --git a/src/routes/repos/[npub]/[repo]/utils/file-handlers.ts b/src/routes/repos/[npub]/[repo]/utils/file-handlers.ts
new file mode 100644
index 0000000..add8567
--- /dev/null
+++ b/src/routes/repos/[npub]/[repo]/utils/file-handlers.ts
@@ -0,0 +1,134 @@
+/**
+ * File handler utilities
+ * UI interaction handlers for file operations
+ */
+
+import type { RepoState } from '../stores/repo-state.js';
+import { getMimeType } from './file-helpers.js';
+
+/**
+ * Handle content change in file editor
+ */
+export function handleContentChange(value: string, state: RepoState): void {
+  state.files.editedContent = value;
+  state.files.hasChanges = value !== state.files.content;
+}
+
+/**
+ * Handle file click (directory or file)
+ */
+export function handleFileClick(
+  file: { name: string; path: string; type: 'file' | 'directory' },
+  state: RepoState,
+  callbacks: {
+    loadFiles: (path: string) => Promise<void>;
+    loadFile: (path: string) => Promise<void>;
+  }
+): void {
+  if (file.type === 'directory') {
+    state.files.pathStack.push(state.files.currentPath);
+    callbacks.loadFiles(file.path);
+  } else {
+    callbacks.loadFile(file.path);
+    // On mobile, switch to file viewer when a file is clicked
+    if (typeof window !== 'undefined' && window.innerWidth <= 768) {
+      state.ui.showFileListOnMobile = false;
+    }
+  }
+}
+
+/**
+ * Copy file content to clipboard
+ */
+export async function copyFileContent(
+  state: RepoState,
+  event?: Event
+): Promise<void> {
+  if (!state.files.content || state.preview.copying) return;
+  
+  state.preview.copying = true;
+  try {
+    await navigator.clipboard.writeText(state.files.content);
+    // Show temporary feedback
+    const button = event?.target as HTMLElement;
+    if (button) {
+      const originalTitle = button.getAttribute('title') || '';
+      button.setAttribute('title', 'Copied!');
+      setTimeout(() => {
+        button.setAttribute('title', originalTitle);
+      }, 2000);
+    }
+  } catch (err) {
+    console.error('Failed to copy file content:', err);
+    alert('Failed to copy file content to clipboard');
+  } finally {
+    state.preview.copying = false;
+  }
+}
+
+/**
+ * Download file
+ */
+export function downloadFile(state: RepoState): void {
+  if (!state.files.content || !state.files.currentFile) return;
+  
+  try {
+    // Determine MIME type based on file extension
+    const ext = state.files.currentFile.split('.').pop()?.toLowerCase() || '';
+    const mimeType = getMimeType(ext);
+    
+    const blob = new Blob([state.files.content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = state.files.currentFile.split('/').pop() || 'file';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    console.error('Failed to download file:', err);
+    alert('Failed to download file');
+  }
+}
+
+/**
+ * Handle back navigation in file browser
+ */
+export function handleBack(
+  state: RepoState,
+  callbacks: {
+    loadFiles: (path: string) => Promise<void>;
+  }
+): void {
+  if (state.files.pathStack.length > 0) {
+    const parentPath = state.files.pathStack.pop() || '';
+    callbacks.loadFiles(parentPath);
+  } else {
+    callbacks.loadFiles('');
+  }
+}
+
+/**
+ * Toggle word wrap
+ */
+export async function toggleWordWrap(
+  state: RepoState,
+  callbacks: {
+    applySyntaxHighlighting: (content: string, ext: string) => Promise<void>;
+  }
+): Promise<void> {
+  state.ui.wordWrap = !state.ui.wordWrap;
+  console.log('Word wrap toggled:', state.ui.wordWrap);
+  // Force DOM update by accessing the element
+  await new Promise(resolve => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    });
+  });
+  // Re-apply syntax highlighting to refresh the display
+  if (state.files.currentFile && state.files.content) {
+    const ext = state.files.currentFile.split('.').pop() || '';
+    await callbacks.applySyntaxHighlighting(state.files.content, ext);
+  }
+}
diff --git a/src/routes/repos/[npub]/[repo]/utils/repo-handlers.ts b/src/routes/repos/[npub]/[repo]/utils/repo-handlers.ts
new file mode 100644
index 0000000..d448638
--- /dev/null
+++ b/src/routes/repos/[npub]/[repo]/utils/repo-handlers.ts
@@ -0,0 +1,78 @@
+/**
+ * Repository handler utilities
+ * UI interaction handlers for repository operations
+ */
+
+import type { RepoState } from '../stores/repo-state.js';
+import type { Page } from '@sveltejs/kit';
+
+/**
+ * Copy clone URL to clipboard
+ */
+export async function copyCloneUrl(
+  state: RepoState,
+  pageData: { gitDomain?: string } | undefined,
+  pageUrl: Page['url'] | undefined
+): Promise<void> {
+  if (state.clone.copyingUrl) return;
+  
+  state.clone.copyingUrl = true;
+  try {
+    // Guard against SSR
+    if (typeof window === 'undefined') return;
+    if (!pageUrl) {
+      return;
+    }
+    
+    // Use gitDomain from page data if available, otherwise use current URL host
+    // gitDomain is set from GIT_DOMAIN env var and is the actual production domain
+    let host: string;
+    let protocol: string;
+    
+    if (pageData?.gitDomain) {
+      const gitDomain = pageData.gitDomain;
+      // Check if gitDomain is localhost - if so, we should use the actual current domain
+      const isLocalhost = gitDomain.startsWith('localhost') || gitDomain.startsWith('127.0.0.1');
+      
+      if (isLocalhost) {
+        // During development, use the actual current domain from the URL
+        host = pageUrl.host;
+        protocol = pageUrl.protocol.slice(0, -1); // Remove trailing ":"
+      } else {
+        // Use the configured git domain (production)
+        host = gitDomain;
+        protocol = 'https'; // Production domains should use HTTPS
+      }
+    } else {
+      // Fallback to current URL
+      host = pageUrl.host;
+      protocol = pageUrl.protocol.slice(0, -1);
+    }
+    
+    // Use /api/git/ format for better compatibility with commit signing hook
+    const cloneUrl = `${protocol}://${host}/api/git/${state.npub}/${state.repo}.git`;
+    const cloneCommand = `git clone ${cloneUrl}`;
+    
+    // Try to use the Clipboard API
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(cloneCommand);
+      alert(`Clone command copied to clipboard!\n\n${cloneCommand}`);
+    } else {
+      // Fallback: create a temporary textarea
+      const textarea = document.createElement('textarea');
+      textarea.value = cloneCommand;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      alert(`Clone command copied to clipboard!\n\n${cloneCommand}`);
+    }
+  } catch (err) {
+    console.error('Failed to copy clone command:', err);
+    alert('Failed to copy clone command to clipboard');
+  } finally {
+    state.clone.copyingUrl = false;
+  }
+}