# zxsos/hghubx architecture

> Architecture diagram of the GitHub repository zxsos/hghubx, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zxsos/hghubx
- Repository: https://github.com/zxsos/hghubx

## Overview

HGhubX is a cross-platform Tauri client for browsing third-party video and post content and watching it in an immersive player. The main user path runs from the app shell through discovery or search surfaces, into a feed/player, and through the typed frontend API to native commands and upstream networking. Native media handling, session/line selection, and optional diagnostics are distinct supporting capabilities. Relationships below follow shown imports, calls, or README statements; unsampled wiring is omitted or marked unverified.

Main entry points: [`src/api.ts`](https://github.com/zxsos/hghubx/blob/main/src/api.ts) (Frontend API), [`src/App.tsx`](https://github.com/zxsos/hghubx/blob/main/src/App.tsx) (App shell), [`src-tauri/src/api.rs`](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/api.rs) (Native commands), [`src/pages/Category.tsx`](https://github.com/zxsos/hghubx/blob/main/src/pages/Category.tsx) (Categories)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Client experience"]
  node_shell["App shell<br/>[App.tsx]"]
  node_state["App state<br/>[store.tsx]"]
  node_html["HTML security<br/>[html.ts]"]
  node_clipboard["Clipboard<br/>[clipboard.ts]"]
end

subgraph group_content["Content browsing"]
  node_home["Home and discovery<br/>[Home.tsx]"]
  node_discover["Discover<br/>[Discover.tsx]"]
  node_category["Categories<br/>[Category.tsx]"]
  node_search["Search<br/>[Search.tsx]"]
  node_profiles["Profiles and posts<br/>[User.tsx]"]
  node_types["Content models<br/>[types.ts]"]
  node_cards["Content cards<br/>[cards.tsx]"]
  node_inline_search["Inline search<br/>[InplaceSearch.tsx]"]
end

subgraph group_native["Native services"]
  node_api["Frontend API<br/>[api.ts]"]
  node_line_picker["Line selection<br/>[LinePicker.tsx]"]
  node_native_api["Native commands<br/>[api.rs]"]
  node_network["Upstream networking<br/>[net.rs]"]
  node_lines["Line management<br/>[lines.rs]"]
  node_session["Session storage<br/>[session.rs]"]
  node_policy["Network policy<br/>[network_policy.rs]"]
  node_logging[("Application logging<br/>[logging.rs]")]
end

subgraph group_media["Playback and diagnostics"]
  node_feed["Feed and player<br/>[Feed.tsx]"]
  node_player["Playback controls<br/>[Player.tsx]"]
  node_media["Media delivery<br/>[media.rs]"]
  node_diagnostics["Playback diagnostics"]
  node_playback_log[("Playback log<br/>[playback_log.rs]")]
end

node_user(("Viewer"))
node_upstream{{"Third-party site"}}

node_user -->|"uses"| node_shell
node_shell -->|"renders"| node_home
node_shell -->|"renders"| node_search
node_shell -->|"renders"| node_category
node_shell -->|"routes to"| node_profiles
node_shell -->|"opens"| node_feed
node_shell -->|"uses"| node_state
node_home -.->|"requests data"| node_api
node_discover -->|"requests data"| node_api
node_category -->|"requests data"| node_api
node_search -->|"requests data"| node_api
node_profiles -->|"requests data"| node_api
node_discover -->|"renders"| node_cards
node_category -->|"renders"| node_cards
node_search -->|"renders"| node_cards
node_profiles -->|"renders"| node_cards
node_search -->|"uses"| node_inline_search
node_category -->|"uses"| node_inline_search
node_feed -->|"renders"| node_player
node_feed -->|"requests data"| node_api
node_player -->|"requests media"| node_api
node_line_picker -->|"changes line"| node_api
node_api -.->|"invokes commands"| node_native_api
node_native_api -->|"dispatches requests"| node_network
node_native_api -->|"uses"| node_session
node_native_api -->|"uses"| node_lines
node_native_api -->|"checks policy"| node_policy
node_native_api -->|"logs"| node_logging
node_network -->|"checks policy"| node_policy
node_network -->|"sends requests"| node_upstream
node_player -->|"records events"| node_diagnostics
node_api -->|"traces failures"| node_diagnostics
node_diagnostics -.->|"writes events"| node_playback_log
node_native_api -->|"records events"| node_playback_log
node_playback_log -->|"uses timestamp"| node_logging
node_api -.->|"loads media"| node_media
node_media -->|"fetches media"| node_network
node_state -->|"loads settings"| node_api
node_state -->|"sets security"| node_html
node_diagnostics -->|"copies report"| node_clipboard

click node_shell "https://github.com/zxsos/hghubx/blob/main/src/App.tsx"
click node_state "https://github.com/zxsos/hghubx/blob/main/src/store.tsx"
click node_home "https://github.com/zxsos/hghubx/blob/main/src/pages/Home.tsx"
click node_discover "https://github.com/zxsos/hghubx/blob/main/src/pages/Discover.tsx"
click node_category "https://github.com/zxsos/hghubx/blob/main/src/pages/Category.tsx"
click node_search "https://github.com/zxsos/hghubx/blob/main/src/pages/Search.tsx"
click node_profiles "https://github.com/zxsos/hghubx/blob/main/src/pages/User.tsx"
click node_feed "https://github.com/zxsos/hghubx/blob/main/src/components/Feed.tsx"
click node_player "https://github.com/zxsos/hghubx/blob/main/src/components/Player.tsx"
click node_api "https://github.com/zxsos/hghubx/blob/main/src/api.ts"
click node_types "https://github.com/zxsos/hghubx/blob/main/src/types.ts"
click node_cards "https://github.com/zxsos/hghubx/blob/main/src/components/cards.tsx"
click node_inline_search "https://github.com/zxsos/hghubx/blob/main/src/components/InplaceSearch.tsx"
click node_line_picker "https://github.com/zxsos/hghubx/blob/main/src/components/LinePicker.tsx"
click node_native_api "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/api.rs"
click node_network "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/net.rs"
click node_lines "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/lines.rs"
click node_session "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/session.rs"
click node_policy "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/network_policy.rs"
click node_media "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/media.rs"
click node_diagnostics "https://github.com/zxsos/hghubx/blob/main/src/playbackDiagnostics.ts"
click node_playback_log "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/playback_log.rs"
click node_logging "https://github.com/zxsos/hghubx/blob/main/src-tauri/src/logging.rs"
click node_html "https://github.com/zxsos/hghubx/blob/main/src/html.ts"
click node_clipboard "https://github.com/zxsos/hghubx/blob/main/src/clipboard.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_shell,node_state,node_html,node_clipboard,node_user toneBlue
class node_home,node_discover,node_category,node_search,node_profiles,node_types,node_cards,node_inline_search toneAmber
class node_api,node_line_picker,node_native_api,node_network,node_lines,node_session,node_policy,node_logging toneMint
class node_feed,node_player,node_media,node_diagnostics,node_playback_log toneRose
class node_upstream toneIndigo
```

## Components

### Client experience

- [App shell](https://github.com/zxsos/hghubx/blob/main/src/App.tsx): `src/App.tsx`
- [App state](https://github.com/zxsos/hghubx/blob/main/src/store.tsx): `src/store.tsx`
- [HTML security](https://github.com/zxsos/hghubx/blob/main/src/html.ts): `src/html.ts`
- [Clipboard](https://github.com/zxsos/hghubx/blob/main/src/clipboard.ts): `src/clipboard.ts`

### Content browsing

- [Home and discovery](https://github.com/zxsos/hghubx/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Discover](https://github.com/zxsos/hghubx/blob/main/src/pages/Discover.tsx): `src/pages/Discover.tsx`
- [Categories](https://github.com/zxsos/hghubx/blob/main/src/pages/Category.tsx): `src/pages/Category.tsx`
- [Search](https://github.com/zxsos/hghubx/blob/main/src/pages/Search.tsx): `src/pages/Search.tsx`
- [Profiles and posts](https://github.com/zxsos/hghubx/blob/main/src/pages/User.tsx): `src/pages/User.tsx`
- [Content models](https://github.com/zxsos/hghubx/blob/main/src/types.ts): `src/types.ts`
- [Content cards](https://github.com/zxsos/hghubx/blob/main/src/components/cards.tsx): `src/components/cards.tsx`
- [Inline search](https://github.com/zxsos/hghubx/blob/main/src/components/InplaceSearch.tsx): `src/components/InplaceSearch.tsx`

### Native services

- [Frontend API](https://github.com/zxsos/hghubx/blob/main/src/api.ts): `src/api.ts`
- [Line selection](https://github.com/zxsos/hghubx/blob/main/src/components/LinePicker.tsx): `src/components/LinePicker.tsx`
- [Native commands](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/api.rs): `src-tauri/src/api.rs`
- [Upstream networking](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/net.rs): `src-tauri/src/net.rs`
- [Line management](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/lines.rs): `src-tauri/src/lines.rs`
- [Session storage](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/session.rs): `src-tauri/src/session.rs`
- [Network policy](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/network_policy.rs): `src-tauri/src/network_policy.rs`
- [Application logging](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/logging.rs): `src-tauri/src/logging.rs`

### Playback and diagnostics

- [Feed and player](https://github.com/zxsos/hghubx/blob/main/src/components/Feed.tsx): `src/components/Feed.tsx`
- [Playback controls](https://github.com/zxsos/hghubx/blob/main/src/components/Player.tsx): `src/components/Player.tsx`
- [Media delivery](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/media.rs): `src-tauri/src/media.rs`
- [Playback diagnostics](https://github.com/zxsos/hghubx/blob/main/src/playbackDiagnostics.ts): `src/playbackDiagnostics.ts`
- [Playback log](https://github.com/zxsos/hghubx/blob/main/src-tauri/src/playback_log.rs): `src-tauri/src/playback_log.rs`

### Other components

- **Viewer**
- **Third-party site**

## Connections

- Viewer → App shell: uses
- App shell → Home and discovery: renders (evidence: `src/App.tsx`)
- App shell → Search: renders (evidence: `src/App.tsx`)
- App shell → Categories: renders (evidence: `src/App.tsx`)
- App shell → Profiles and posts: routes to (evidence: `src/App.tsx`)
- App shell → Feed and player: opens (evidence: `src/App.tsx`)
- App shell → App state: uses (evidence: `src/App.tsx`)
- Home and discovery → Frontend API: requests data
- Discover → Frontend API: requests data (evidence: `src/pages/Discover.tsx`)
- Categories → Frontend API: requests data (evidence: `src/pages/Category.tsx`)
- Search → Frontend API: requests data (evidence: `src/pages/Search.tsx`)
- Profiles and posts → Frontend API: requests data (evidence: `src/pages/User.tsx`)
- Discover → Content cards: renders (evidence: `src/pages/Discover.tsx`)
- Categories → Content cards: renders (evidence: `src/pages/Category.tsx`)
- Search → Content cards: renders (evidence: `src/pages/Search.tsx`)
- Profiles and posts → Content cards: renders (evidence: `src/pages/User.tsx`)
- Search → Inline search: uses (evidence: `src/pages/Search.tsx`)
- Categories → Inline search: uses (evidence: `src/pages/Category.tsx`)
- Feed and player → Playback controls: renders (evidence: `src/components/Feed.tsx`)
- Feed and player → Frontend API: requests data (evidence: `src/components/Feed.tsx`)
- Playback controls → Frontend API: requests media (evidence: `src/components/Player.tsx`)
- Line selection → Frontend API: changes line (evidence: `src/components/LinePicker.tsx`)
- Frontend API → Native commands: invokes commands
- Native commands → Upstream networking: dispatches requests (evidence: `src-tauri/src/api.rs`)
- Native commands → Session storage: uses (evidence: `src-tauri/src/api.rs`)
- Native commands → Line management: uses (evidence: `src-tauri/src/api.rs`)
- Native commands → Network policy: checks policy (evidence: `src-tauri/src/api.rs`)
- Native commands → Application logging: logs (evidence: `src-tauri/src/api.rs`)
- Upstream networking → Network policy: checks policy (evidence: `src-tauri/src/net.rs`)
- Upstream networking → Third-party site: sends requests (evidence: `src-tauri/src/net.rs`)
- Playback controls → Playback diagnostics: records events (evidence: `src/components/Player.tsx`)
- Frontend API → Playback diagnostics: traces failures (evidence: `src/api.ts`)
- Playback diagnostics → Playback log: writes events
- Native commands → Playback log: records events (evidence: `src-tauri/src/api.rs`)
- Playback log → Application logging: uses timestamp (evidence: `src-tauri/src/playback_log.rs`)
- Frontend API → Media delivery: loads media
- Media delivery → Upstream networking: fetches media (evidence: `src-tauri/src/media.rs`)
- App state → Frontend API: loads settings (evidence: `src/store.tsx`)
- App state → HTML security: sets security (evidence: `src/store.tsx`)
- Playback diagnostics → Clipboard: copies report (evidence: `src/playbackDiagnostics.ts`)