Rebrand to gitlawb logo and polish the repo detail page

Branding: the official gitlawb mark (extracted as a 4KB currentColor SVG
from the platform brand asset) replaces the text-only header branding —
now [logo] explorer — and the purple-bolt favicon, which becomes the
mark on a black tile. Title and footer read "gitlawb explorer".

Detail page:
- Owner DID middle-truncates via new truncateDid() (did:key:z6Mkn…xXxYk),
  full DID on hover and in the copy button; footer node DID reuses it.
- Right stats column widens 380px → 440px with rebalanced cells so the
  commit hash and created date sit on one line.
- README render and file markdown preview drop the 72ch cap; the code
  viewer drops its 1100px cap — both now fill the content width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: kevincodex1

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>gitlawb node explorer</title>
+    <title>gitlawb explorer</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap" rel="stylesheet" />

public/favicon.svg

@@ -1,4 +1,5 @@
 import { CopyButton } from '../ui/CopyButton';
+import { truncateDid } from '../../lib/api';
 import { useNodeStatus } from '../../hooks/useNodeStatus';
 
 export default function Footer() {
@@ -9,15 +10,15 @@ export default function Footer() {
     <footer className="border-t border-border mt-auto">
       <div className="mx-auto flex max-w-[1280px] flex-wrap items-center justify-between gap-x-6 gap-y-2 px-4 sm:px-8 lg:px-12 py-5 text-[11px] text-muted-foreground">
         <span className="whitespace-nowrap">
-          gitlawb node explorer
+          gitlawb explorer
           {version && <span className="text-dim">&ensp;v{version}</span>}
           {node?.network && <span className="text-dim">&ensp;{node.network}</span>}
         </span>
 
         {node?.did && (
           <span className="flex items-center gap-2 min-w-0">
-            <span className="truncate max-w-[220px] sm:max-w-[420px] lg:max-w-none text-dim">
-              {node.did}
+            <span title={node.did} className="text-dim whitespace-nowrap">
+              {truncateDid(node.did)}
             </span>
             <CopyButton value={node.did} label="did" />
           </span>

src/components/layout/Footer.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { ThemeToggle } from '../ui/ThemeToggle';
 import { Pill } from '../ui/Pill';
+import { Logo } from '../ui/Logo';
 import { useNodeStatus } from '../../hooks/useNodeStatus';
 
 export default function TopBar() {
@@ -13,11 +14,12 @@ export default function TopBar() {
         {/* Left: branding */}
         <Link
           to="/repos"
-          className="flex items-center gap-3 shrink-0 min-w-0
+          className="flex items-center gap-2.5 shrink-0 min-w-0
             focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-warm"
         >
+          <Logo className="h-5 w-auto shrink-0 text-foreground" />
           <span className="text-[13px] font-bold text-foreground whitespace-nowrap">
-            gitlawb node explorer
+            explorer
           </span>
         </Link>
         {node?.network && <Pill className="max-sm:hidden">{node.network}</Pill>}

src/components/layout/TopBar.tsx

@@ -1,5 +1,5 @@
 import type { Repository } from '../../types/repo';
-import { shortDid } from '../../lib/api';
+import { shortDid, truncateDid } from '../../lib/api';
 import { CopyButton } from '../ui/CopyButton';
 import { Pill } from '../ui/Pill';
 import { MicroLabel } from '../ui/MicroLabel';
@@ -11,6 +11,8 @@ interface DetailHeaderProps {
 export function DetailHeader({ repo }: DetailHeaderProps) {
   // repo.owner is already the full DID (did:key:z6Mk…)
   const fullDid = repo.owner;
+  const truncatedDid = truncateDid(fullDid);
+  const didSplitAt = truncatedDid.lastIndexOf(':') + 1;
 
   return (
     <div className="min-w-0">
@@ -37,11 +39,12 @@ export function DetailHeader({ repo }: DetailHeaderProps) {
 
       {/* Owner/dates panel */}
       <div className="border border-border">
-        {/* Owner row */}
+        {/* Owner row — middle-truncated for display, copy yields the full DID */}
         <div className="flex items-center gap-3 sm:gap-4 px-4 sm:px-6 py-3 sm:py-4 border-b border-border-inner">
           <MicroLabel className="w-[64px] flex-shrink-0">owner</MicroLabel>
-          <span className="text-[11px] sm:text-[12.5px] flex-1 truncate min-w-0 text-foreground">
-            {fullDid}
+          <span title={fullDid} className="text-[11px] sm:text-[12.5px] flex-1 truncate min-w-0 text-foreground">
+            <span className="text-dim">{truncatedDid.slice(0, didSplitAt)}</span>
+            {truncatedDid.slice(didSplitAt)}
           </span>
           <CopyButton value={fullDid} label="copy" />
         </div>

src/components/repo-detail/DetailHeader.tsx

@@ -99,7 +99,7 @@ function MarkdownPreview({ owner, name, path, content }: {
   }
   return (
     <div className="flex gap-8 p-4 sm:p-6">
-      <MarkdownView html={html} className="min-w-0 flex-1 max-w-[72ch]" />
+      <MarkdownView html={html} className="min-w-0 flex-1" />
       {headings.length >= 3 && <TocRail headings={headings} />}
     </div>
   );
@@ -137,7 +137,7 @@ export function FileViewer({
   });
 
   return (
-    <div className="overflow-hidden border border-border max-w-[1100px]">
+    <div className="overflow-hidden border border-border">
       {/* Header */}
       <div className="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 min-h-10 py-1.5 border-b border-border bg-surface flex-wrap">
         <button

src/components/repo-detail/FileViewer.tsx

@@ -71,7 +71,7 @@ export function ReadmePanel({ owner, name, dirPath, entries }: ReadmePanelProps)
         </div>
       ) : (
         <div className="flex gap-8 p-4 sm:p-6">
-          <MarkdownView html={state.html ?? ''} className="min-w-0 flex-1 max-w-[72ch]" />
+          <MarkdownView html={state.html ?? ''} className="min-w-0 flex-1" />
           {headings.length >= 3 && <TocRail headings={headings} />}
         </div>
       )}

src/components/repo-detail/ReadmePanel.tsx

@@ -26,15 +26,15 @@ function Cell({ label, children, sub, className = '' }: {
 
 export function StatsPanel({ stars, latestCommit, created }: StatsPanelProps) {
   return (
-    <div className="grid grid-cols-3 border border-border">
+    <div className="grid grid-cols-[0.9fr_1.05fr_1.05fr] border border-border">
       <Cell label="stars" sub="social proof">
         {stars}
       </Cell>
       <Cell label="latest" sub={latestCommit ? latestCommit.time : 'no commits'} className="border-l border-border">
         <span className="text-warm">{latestCommit ? latestCommit.shortHash : '—'}</span>
       </Cell>
       <Cell label="created" sub="first seen" className="border-l border-border">
-        <span className="text-[15px] sm:text-[16px]">{created}</span>
+        <span className="text-[15px] sm:text-[16px] whitespace-nowrap">{created}</span>
       </Cell>
     </div>
   );