# mizcausevic-dev/portfolio-command-center architecture

> Architecture diagram of the GitHub repository mizcausevic-dev/portfolio-command-center, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mizcausevic-dev/portfolio-command-center
- Repository: https://github.com/mizcausevic-dev/portfolio-command-center

## Overview

#### Purpose and principal workflow
Portfolio Command Center is a static React portfolio interface that organizes repository data into executive-facing platform, language, industry, and signal views, with search and filtering to explore repositories. The main workflow begins when a **site visitor** opens the page; separately, an **operator** can run the catalog-sync command to fetch GitHub repository metadata and regenerate the catalog consumed by the app.

#### Components

##### Application and exploration
- **Site visitor** — *(external; no repository path)* The person who opens the portfolio and explores its views.
- **React mount** — `src/main.tsx` — Mounts the React application at the page’s `root` element and loads the effect and application styles.
- **Portfolio command surface** — `src/App.tsx` — Holds page-level filter and search state, derives sorted and paginated repository results, and renders the portfolio’s command-center views.
- **Platform constellation** — `src/components/PortfolioConstellation.tsx` — Renders an interactive SVG of named platforms and curated repository leaves, with keyboard-accessible controls and a dossier panel; its caller is not shown in the sampled excerpts.
- **Constellation geometry** — `src/lib/constellationLayout.ts` — Supplies the pure polar-coordinate, label, sizing, truncation, and remainder calculations used by the diagram.

##### Catalog and portfolio signals
- **Portfolio data model and derived signals** — `src/data.ts` — Imports the generated catalog and defines platform groupings and signal rules, deriving portfolio metrics and atlas data for the UI.
- **Generated repository catalog** — `src/generatedRepoCatalog.json` — Provides the checked-in repository records consumed by the data module; its contents are not sampled.
- **Repository and atlas types** — `src/types.ts` — Defines the TypeScript shapes for repository entries, named platforms, language and industry entries, and metrics.
- **Catalog sync command** — `scripts/sync-repo-catalog.mjs` — Uses the GitHub CLI to fetch repository metadata, infers catalog attributes such as platform, vertical, language, and freshness, and writes the generated JSON.
- **Catalog operator** — *(external; no repository path)* The person or process that runs the catalog sync command.

##### External handoff
- **AI chat destinations** — *(external; no repository path)* ChatGPT, Claude, Perplexity, and Gemini, opened as external links with an encoded prompt and page URL.
- **Send-to-AI links** — `src/components/SendToLlm.tsx` — Builds those destination URLs and renders the visitor-facing links; it does not read or transmit page content.

#### Relationships
- **Site visitor -> React mount:** opens the deployed page; `src/main.tsx` mounts React at the document’s `root` element.
- **React mount -> Portfolio command surface:** renders the `App` component; `src/main.tsx`.
- **Portfolio command surface -> Portfolio data model and derived signals:** imports signal logic and renders views from portfolio data; `src/App.tsx` and `src/data.ts`.
- **Portfolio data model and derived signals -> Generated repository catalog:** reads the imported catalog to derive portfolio data; `src/data.ts`.
- **Portfolio command surface -> Constellation geometry:** the diagram’s geometry helpers are used by its rendering component; `src/components/PortfolioConstellation.tsx` imports the helpers from `src/lib/constellationLayout.ts`.
- **Portfolio command surface -> Platform constellation:** the README describes named-platform views as part of the command surface, but the sampled excerpts do not establish the component’s caller or runtime wiring.
- **Catalog operator -> Catalog sync command:** runs the catalog-generation command; `package.json` defines `sync:catalog` as the script invoking `scripts/sync-repo-catalog.mjs`.
- **Catalog sync command -> GitHub CLI:** invokes `gh repo list` to obtain repository data; `scripts/sync-repo-catalog.mjs`.
- **Catalog sync command -> Generated repository catalog:** writes the generated catalog file; `scripts/sync-repo-catalog.mjs`.
- **Send-to-AI links -> AI chat destinations:** opens a new tab with a URL-encoded prompt and page URL; `src/components/SendToLlm.tsx`.

#### Coverage limits
The `App` and data excerpts are partial, and the generated catalog’s contents are not included. The precise composition and caller wiring for the constellation, other views, and the deployment path cannot be established from the sampled inputs. The README describes the intended exploration flow; the excerpts do not establish every component connection.

Main entry points: [`src/App.tsx`](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/App.tsx) (Portfolio command surface), [`scripts/sync-repo-catalog.mjs`](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/scripts/sync-repo-catalog.mjs) (Catalog sync command), [`src/main.tsx`](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/main.tsx) (React mount), [`src/data.ts`](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/data.ts) (Portfolio data model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_exploration["Portfolio exploration"]
  node_react_mount["React mount<br/>entrypoint"]
  node_portfolio_command_surface["Portfolio command surface<br/>React app"]
  node_platform_constellation["Platform constellation<br/>React component"]
  node_constellation_geometry["Constellation geometry<br/>layout helpers"]
end

subgraph group_catalog["Portfolio catalog"]
  node_portfolio_data["Portfolio data model<br/>derived data"]
  node_generated_catalog["Generated repository catalog<br/>catalog file"]
end

subgraph group_sync["Catalog synchronization"]
  node_catalog_sync["Catalog sync command<br/>script"]
end

subgraph group_ai_handoff["AI handoff"]
  node_send_to_ai["Send-to-AI links<br/>React component"]
end

node_site_visitor["Site visitor<br/>external actor"]
node_catalog_operator["Catalog operator<br/>external actor"]
node_github_cli["GitHub CLI<br/>external tool"]
node_ai_destinations["AI chat destinations<br/>external services"]

node_site_visitor -->|"opens page"| node_react_mount
node_react_mount -->|"renders"| node_portfolio_command_surface
node_portfolio_command_surface -->|"uses signals"| node_portfolio_data
node_portfolio_data -->|"reads catalog"| node_generated_catalog
node_portfolio_command_surface -->|"uses helpers"| node_constellation_geometry
node_portfolio_command_surface -->|"includes view"| node_platform_constellation
node_catalog_operator -->|"runs command"| node_catalog_sync
node_catalog_sync -->|"fetches metadata"| node_github_cli
node_catalog_sync -->|"writes catalog"| node_generated_catalog
node_send_to_ai -->|"opens links"| node_ai_destinations

click node_react_mount "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/main.tsx"
click node_portfolio_command_surface "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/App.tsx"
click node_platform_constellation "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/components/PortfolioConstellation.tsx"
click node_constellation_geometry "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/lib/constellationLayout.ts"
click node_portfolio_data "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/data.ts"
click node_generated_catalog "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/generatedRepoCatalog.json"
click node_catalog_sync "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/scripts/sync-repo-catalog.mjs"
click node_send_to_ai "https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/components/SendToLlm.tsx"

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_react_mount,node_portfolio_command_surface,node_platform_constellation,node_constellation_geometry toneBlue
class node_portfolio_data,node_generated_catalog toneAmber
class node_catalog_sync toneMint
class node_send_to_ai toneRose
class node_site_visitor,node_catalog_operator,node_github_cli,node_ai_destinations toneIndigo
```

## Components

### Portfolio exploration

- [React mount](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/main.tsx): entrypoint · `src/main.tsx`
- [Portfolio command surface](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/App.tsx): React app · `src/App.tsx`
- [Platform constellation](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/components/PortfolioConstellation.tsx): React component · README describes named-platform views; sampled excerpts do not establish caller wiring. · `src/components/PortfolioConstellation.tsx`
- [Constellation geometry](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/lib/constellationLayout.ts): layout helpers · `src/lib/constellationLayout.ts`

### Portfolio catalog

- [Portfolio data model](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/data.ts): derived data · `src/data.ts`
- [Generated repository catalog](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/generatedRepoCatalog.json): catalog file · `src/generatedRepoCatalog.json`

### Catalog synchronization

- [Catalog sync command](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/scripts/sync-repo-catalog.mjs): script · `scripts/sync-repo-catalog.mjs`

### AI handoff

- [Send-to-AI links](https://github.com/mizcausevic-dev/portfolio-command-center/blob/main/src/components/SendToLlm.tsx): React component · Builds external URLs; does not read or transmit page content. · `src/components/SendToLlm.tsx`

### Other components

- **Site visitor**: external actor
- **Catalog operator**: external actor
- **GitHub CLI**: external tool
- **AI chat destinations**: external services

## Connections

- Site visitor → React mount: opens page
- React mount → Portfolio command surface: renders
- Portfolio command surface → Portfolio data model: uses signals
- Portfolio data model → Generated repository catalog: reads catalog
- Portfolio command surface → Constellation geometry: uses helpers · The relationship list attributes this to the command surface; the excerpts identify the constellation component as the importer.
- Portfolio command surface → Platform constellation: includes view · README describes this view; sampled excerpts do not establish runtime wiring.
- Catalog operator → Catalog sync command: runs command
- Catalog sync command → GitHub CLI: fetches metadata
- Catalog sync command → Generated repository catalog: writes catalog
- Send-to-AI links → AI chat destinations: opens links · Opens a new tab with an encoded prompt and page URL.