How cheapgriffy/pipeline-web-client works
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: DashboardView.vue Dashboard · auth.js Auth state · App.vue Root app · index.js Route guards
Components 15
App and navigation
- App bootstrap
src/main.js - Root app
src/App.vue - Route guards
src/router/index.js
Identity
- Login and register
src/views/LoginView.vue - Auth state
src/stores/auth.js
Script management
- Dashboard
src/views/DashboardView.vue - Script state
src/stores/scripts.js - Script editor
src/components/ScriptModal.vue - Script card
src/components/ScriptCard.vue - Shell selector
src/components/ShellModeToggle.vue
External services
- HTTP API client
src/api/index.js - Pipeline API
- Browser local storage
Other components
- User
- Script runner
Connections 19
- 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