# cheapgriffy/pipeline-web-client architecture

> Architecture diagram of the GitHub repository cheapgriffy/pipeline-web-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cheapgriffy/pipeline-web-client
- Repository: https://github.com/cheapgriffy/pipeline-web-client

## Overview

Pipeline is a Vue frontend for authenticating users and managing shareable scripts. The main workflow is login/register, enter the protected dashboard, create or import script content, browse and preview scripts, then copy a PowerShell or Bash command for remote execution. The UI also supports editing, deletion, profile/account management, and filtering. The sampled source shows frontend API calls and command generation, but not the backend implementation or the dashboard’s omitted submit/delete handlers; those relationships are left unexpanded where their wiring is uncertain.

Main entry points: [`src/views/DashboardView.vue`](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/views/DashboardView.vue) (Dashboard), [`src/stores/auth.js`](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/stores/auth.js) (Auth state), [`src/App.vue`](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/App.vue) (Root app), [`src/router/index.js`](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/router/index.js) (Route guards)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["App and navigation"]
  node_bootstrap["App bootstrap<br/>[main.js]"]
  node_app["Root app<br/>[App.vue]"]
  node_router["Route guards<br/>[index.js]"]
end

subgraph group_identity["Identity"]
  node_login["Login and register<br/>[LoginView.vue]"]
  node_auth["Auth state<br/>[auth.js]"]
end

subgraph group_scripts["Script management"]
  node_dashboard["Dashboard<br/>[DashboardView.vue]"]
  node_scripts["Script state<br/>[scripts.js]"]
  node_modal["Script editor<br/>[ScriptModal.vue]"]
  node_card["Script card<br/>[ScriptCard.vue]"]
  node_shell["Shell selector"]
end

subgraph group_integration["External services"]
  node_api["HTTP API client<br/>[index.js]"]
  node_backend{{"Pipeline API"}}
  node_localstorage[("Browser local storage")]
end

node_visitor(("User"))
node_shelluser(("Script runner"))

node_visitor -->|"uses"| node_app
node_bootstrap -->|"mounts"| node_app
node_app -->|"loads identity"| node_auth
node_app -->|"renders routes"| node_router
node_router -->|"routes guest"| node_login
node_router -->|"guards access"| node_dashboard
node_login -->|"submits credentials"| node_auth
node_auth -->|"requests identity"| node_api
node_auth -->|"reads/writes token"| node_localstorage
node_dashboard -->|"loads scripts"| node_scripts
node_dashboard -->|"uses profile state"| node_auth
node_dashboard -->|"opens editor"| node_modal
node_dashboard -->|"renders scripts"| node_card
node_dashboard -->|"selects shell"| node_shell
node_scripts -->|"requests scripts"| node_api
node_api -->|"sends HTTP requests"| node_backend
node_auth -->|"auth requests"| node_backend
node_card -.->|"provides execution command"| node_shelluser
node_shelluser -.->|"fetches public script"| node_backend

click node_bootstrap "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/main.js"
click node_app "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/App.vue"
click node_router "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/router/index.js"
click node_login "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/views/LoginView.vue"
click node_auth "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/stores/auth.js"
click node_dashboard "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/views/DashboardView.vue"
click node_scripts "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/stores/scripts.js"
click node_modal "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ScriptModal.vue"
click node_card "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ScriptCard.vue"
click node_shell "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ShellModeToggle.vue"
click node_api "https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/api/index.js"

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_bootstrap,node_app,node_router,node_visitor toneBlue
class node_login,node_auth toneAmber
class node_dashboard,node_scripts,node_modal,node_card,node_shell toneMint
class node_api,node_backend,node_localstorage toneRose
class node_shelluser toneIndigo
```

## Components

### App and navigation

- [App bootstrap](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/main.js): `src/main.js`
- [Root app](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/App.vue): `src/App.vue`
- [Route guards](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/router/index.js): `src/router/index.js`

### Identity

- [Login and register](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/views/LoginView.vue): `src/views/LoginView.vue`
- [Auth state](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/stores/auth.js): `src/stores/auth.js`

### Script management

- [Dashboard](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/views/DashboardView.vue): `src/views/DashboardView.vue`
- [Script state](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/stores/scripts.js): `src/stores/scripts.js`
- [Script editor](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ScriptModal.vue): `src/components/ScriptModal.vue`
- [Script card](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ScriptCard.vue): `src/components/ScriptCard.vue`
- [Shell selector](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/components/ShellModeToggle.vue): `src/components/ShellModeToggle.vue`

### External services

- [HTTP API client](https://github.com/cheapgriffy/pipeline-web-client/blob/main/src/api/index.js): `src/api/index.js`
- **Pipeline API**
- **Browser local storage**

### Other components

- **User**
- **Script runner**

## Connections

- User → Root app: uses
- App bootstrap → Root app: mounts
- Root app → Auth state: loads identity
- Root app → Route guards: renders routes
- Route guards → Login and register: routes guest
- Route guards → Dashboard: guards access
- Login and register → Auth state: submits credentials
- Auth state → HTTP API client: requests identity
- Auth state → Browser local storage: reads/writes token
- Dashboard → Script state: loads scripts
- Dashboard → Auth state: uses profile state
- Dashboard → Script editor: opens editor
- Dashboard → Script card: renders scripts
- Dashboard → Shell selector: selects shell
- Script state → HTTP API client: requests scripts
- HTTP API client → Pipeline API: sends HTTP requests
- Auth state → Pipeline API: auth requests
- Script card → Script runner: provides execution command
- Script runner → Pipeline API: fetches public script