Generated with Hive: Fix View Source link rendering for web page nodes in NodePreviewPanel

src/app/ontology/page.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation"
 import { OntologyGraph } from "./ontology-graph"
 import { TypeEditor } from "./type-editor"
 import { Plus, ArrowLeft, Box, Grid2x2 } from "lucide-react"
+import { useUserStore } from "@/stores/user-store"
 
 const OntologyGraph3D = dynamic(
   () => import("./ontology-graph-3d").then((m) => ({ default: m.OntologyGraph3D })),
@@ -47,11 +48,20 @@ export interface SchemaEdge {
 
 export default function OntologyPage() {
   const router = useRouter()
+  const isAdmin = useUserStore((s) => s.isAdmin)
+  const isAuthenticated = useUserStore((s) => s.isAuthenticated)
   const store = useSchemaStore()
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [view3D, setView3D] = useState(false)
   const [schemaError, setSchemaError] = useState<string | null>(null)
 
+  useEffect(() => {
+    if (isAuthenticated && !isAdmin) {
+      router.replace("/")
+      return
+    }
+  }, [isAdmin, isAuthenticated, router])
+
   useEffect(() => {
     if (isMocksEnabled()) {
       store.setSchemas(SMALL_SCHEMAS)
@@ -66,17 +76,19 @@ export default function OntologyPage() {
 
   const handleUpdateSchema = useCallback(
     async (updated: SchemaNode) => {
+      if (!isAdmin) return
       try {
         await store.updateSchema(updated)
         setSchemaError(null)
       } catch (err) {
         setSchemaError(err instanceof Error ? err.message : "Failed to save schema")
       }
     },
-    [store]
+    [isAdmin, store]
   )
 
   const handleAddType = useCallback(async () => {
+    if (!isAdmin) return
     // Find next available name
     const existing = new Set(store.schemas.map((s) => s.type))
     let n = 1
@@ -98,14 +110,15 @@ export default function OntologyPage() {
       setSchemaError(err instanceof Error ? err.message : "Failed to save schema")
     }
     setSelectedId(id)
-  }, [store])
+  }, [isAdmin, store])
 
   const handleDeleteSchema = useCallback(
     (refId: string) => {
+      if (!isAdmin) return
       store.removeSchema(refId)
       if (selectedId === refId) setSelectedId(null)
     },
-    [selectedId, store]
+    [isAdmin, selectedId, store]
   )
 
   return (

src/components/layout/node-preview-panel.tsx

@@ -48,6 +48,10 @@ function isUrl(value: string): boolean {
   }
 }
 
+function isMediaUrl(value: string): boolean {
+  return /\.(mp4|webm|mov|mp3|ogg|wav|m4a)(\?.*)?$/i.test(value)
+}
+
 function formatDuration(seconds: number): string {
   const h = Math.floor(seconds / 3600)
   const m = Math.floor((seconds % 3600) / 60)
@@ -200,7 +204,8 @@ function MediaCard({ node, props }: { node: GraphNode; props: Record<string, unk
   const isThisNodeSelected = usePlayerStore(
     (s) => s.playingNode?.ref_id === node.ref_id
   )
-  const mediaUrl = (props.media_url ?? props.link) as string | undefined
+  const rawLink = typeof props.link === "string" ? props.link : undefined
+  const mediaUrl = (props.media_url ?? (rawLink && isMediaUrl(rawLink) ? rawLink : undefined)) as string | undefined
   const duration = typeof props.duration === "number" ? props.duration : undefined
   const show = (props.show_title ?? props.show) as string | undefined
   const channel = props.channel as string | undefined
@@ -583,7 +588,12 @@ export function NodePreviewPanel({ node, onBack, schemas }: NodePreviewPanelProp
   //   bio wins over twitter_handle → Person, not TwitterAccount.
   //   media_url wins over source_link → MediaCard, not ArticleCard.
   const hasTweet = !!fp && "tweet_id" in fp && "text" in fp
-  const hasMedia = !!fp && ("media_url" in fp || "link" in fp)
+  const linkValue = typeof fp?.link === "string" ? fp.link : undefined
+  const hasMedia = !!fp && (
+    "media_url" in fp ||
+    (linkValue !== undefined && isMediaUrl(linkValue))
+  )
+  const hasWebPageLink = !!linkValue && !isMediaUrl(linkValue)
   const hasTranscript = !!fp && typeof fp.transcript === "string"
   const hasSummary = hasMedia && !!fp && typeof fp.summary === "string" && fp.summary.length > 0
   const hasPerson = !!fp && "bio" in fp && !hasTweet
@@ -769,6 +779,17 @@ export function NodePreviewPanel({ node, onBack, schemas }: NodePreviewPanelProp
               {hasMedia && fullNode && <MediaCard node={fullNode} props={fp} />}
               {hasSummary && <SummaryBlock text={fp.summary as string} />}
               {hasArticle && <ArticleCard props={fp} />}
+              {hasWebPageLink && (
+                <a
+                  href={linkValue}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 text-xs text-primary hover:underline"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  View Source
+                </a>
+              )}
               {hasTranscript && <TranscriptBlock text={fp.transcript as string} />}
 
               {/* Fallback: remaining properties not covered by widgets */}

src/components/layout/sources-panel.tsx

@@ -44,6 +44,7 @@ function SourceRow({
   const [deleting, setDeleting] = useState(false)
 
   const handleDelete = useCallback(async () => {
+    if (!canEdit) return
     setDeleting(true)
     try {
       await api.delete(`/radar/${source.ref_id}`)
@@ -53,7 +54,7 @@ function SourceRow({
     } finally {
       setDeleting(false)
     }
-  }, [source.ref_id, onDelete])
+  }, [canEdit, source.ref_id, onDelete])
 
   const displayName = extractNameFromSource(source.source, source.source_type as never)
 

src/components/modals/radar-settings.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/lib/graph-api"
 import { isMocksEnabled, MOCK_CRON_CONFIGS } from "@/lib/mock-data"
 import { CADENCE_PRESETS, snapToPreset } from "@/lib/cadence-presets"
+import { useUserStore } from "@/stores/user-store"
 
 const SOURCE_TYPE_LABELS: Record<RadarSourceType, string> = {
   twitter_handle: "Twitter handles",
@@ -23,6 +24,7 @@ const SOURCE_TYPE_LABELS: Record<RadarSourceType, string> = {
 }
 
 export function RadarSettings({ open }: { open: boolean }) {
+  const isAdmin = useUserStore((s) => s.isAdmin)
   const [configs, setConfigs] = useState<CronConfig[] | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -54,6 +56,7 @@ export function RadarSettings({ open }: { open: boolean }) {
       sourceType: RadarSourceType,
       fields: Partial<Pick<CronConfig, "enabled" | "cadence" | "workflow_id">>
     ) => {
+      if (!isAdmin) return
       // Optimistic update so the row reacts immediately on toggle/edit.
       setConfigs((prev) =>
         prev
@@ -76,7 +79,7 @@ export function RadarSettings({ open }: { open: boolean }) {
         load()
       }
     },
-    [load]
+    [isAdmin, load]
   )
 
   if (loading && !configs) {
@@ -101,7 +104,7 @@ export function RadarSettings({ open }: { open: boolean }) {
         off to pause without losing the cadence.
       </p>
       {configs?.map((cfg) => (
-        <RadarRow key={cfg.source_type} config={cfg} onUpdate={handleUpdate} />
+        <RadarRow key={cfg.source_type} config={cfg} onUpdate={handleUpdate} isAdmin={isAdmin} />
       ))}
     </div>
   )
@@ -110,12 +113,14 @@ export function RadarSettings({ open }: { open: boolean }) {
 function RadarRow({
   config,
   onUpdate,
+  isAdmin,
 }: {
   config: CronConfig
   onUpdate: (
     sourceType: RadarSourceType,
     fields: Partial<Pick<CronConfig, "enabled" | "cadence" | "workflow_id">>
   ) => Promise<void>
+  isAdmin: boolean
 }) {
   const [cadence, setCadence] = useState(snapToPreset(config.cadence))
   const [running, setRunning] = useState(false)
@@ -126,6 +131,7 @@ function RadarRow({
   }, [config.cadence])
 
   const handleRunNow = useCallback(async () => {
+    if (!isAdmin) return
     if (isMocksEnabled()) {
       setRunMessage("Mock: dispatched")
       return
@@ -140,7 +146,7 @@ function RadarRow({
     } finally {
       setRunning(false)
     }
-  }, [config.source_type])
+  }, [isAdmin, config.source_type])
 
   return (
     <div className="rounded-lg border border-border/50 bg-muted/30 p-3 space-y-2">

src/lib/__tests__/node-preview-panel.test.tsx

@@ -768,3 +768,72 @@ describe("NodePreviewPanel – paid_properties lock placeholders", () => {
     expect(screen.queryByText("🔒")).toBeNull()
   })
 })
+
+describe("NodePreviewPanel – View Source / web page link", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    userStoreOverrides = {}
+  })
+
+  it("renders 'View Source' link for a web page node with a plain link URL", async () => {
+    const node: GraphNode = {
+      ref_id: "n9",
+      node_type: "WebPage",
+      properties: { name: "Sphinx Chat Website", description: "Decentralised messaging on Lightning." },
+    }
+    const fullNode: GraphNode = {
+      ...node,
+      properties: { ...node.properties, link: "https://sphinx.chat" },
+    }
+    mockApiGet.mockResolvedValue({ nodes: [fullNode], edges: [] })
+
+    render(<NodePreviewPanel node={node} onBack={vi.fn()} schemas={[]} />)
+
+    await waitFor(() => {
+      expect(screen.getByText("View Source")).toBeInTheDocument()
+    })
+    const link = screen.getByRole("link", { name: /view source/i })
+    expect(link).toHaveAttribute("href", "https://sphinx.chat")
+    expect(link).toHaveAttribute("target", "_blank")
+  })
+
+  it("does not render 'View Source' for an audio node with a media link URL", async () => {
+    const node: GraphNode = {
+      ref_id: "a1",
+      node_type: "Episode",
+      properties: { name: "Audio Episode" },
+    }
+    const fullNode: GraphNode = {
+      ...node,
+      properties: { ...node.properties, link: "https://example.com/audio.mp3" },
+    }
+    mockApiGet.mockResolvedValue({ nodes: [fullNode], edges: [] })
+
+    render(<NodePreviewPanel node={node} onBack={vi.fn()} schemas={[]} />)
+
+    await waitFor(() => {
+      expect(screen.getByText("Play Audio")).toBeInTheDocument()
+    })
+    expect(screen.queryByText("View Source")).toBeNull()
+  })
+
+  it("renders player and no View Source for a node with media_url", async () => {
+    const node: GraphNode = {
+      ref_id: "m1",
+      node_type: "Episode",
+      properties: { name: "Media Node" },
+    }
+    const fullNode: GraphNode = {
+      ...node,
+      properties: { ...node.properties, media_url: "https://example.com/episode.mp3" },
+    }
+    mockApiGet.mockResolvedValue({ nodes: [fullNode], edges: [] })
+
+    render(<NodePreviewPanel node={node} onBack={vi.fn()} schemas={[]} />)
+
+    await waitFor(() => {
+      expect(screen.getByText("Play Audio")).toBeInTheDocument()
+    })
+    expect(screen.queryByText("View Source")).toBeNull()
+  })
+})

src/lib/mock-data.ts

@@ -95,6 +95,11 @@ export const MOCK_NODES: GraphNode[] = [
       source_role: "guest",
     },
   },
+  {
+    ref_id: "n12",
+    node_type: "WebPage",
+    properties: { name: "Sphinx Chat Website", description: "Decentralised messaging on Lightning." },
+  },
 ]
 
 // Full node data returned after unlock (simulates GET /v2/nodes/:ref_id?expand=edges)
@@ -282,6 +287,20 @@ export const MOCK_FULL_NODES: Record<string, GraphData> = {
     ],
     edges: [],
   },
+  n12: {
+    nodes: [
+      {
+        ref_id: "n12",
+        node_type: "WebPage",
+        properties: {
+          name: "Sphinx Chat Website",
+          description: "Decentralised messaging on Lightning.",
+          link: "https://sphinx.chat",
+        },
+      },
+    ],
+    edges: [],
+  },
 }
 
 export const MOCK_EDGES: GraphEdge[] = [