cub-scout-ui

A clear, minimal reference UI for exploring cub-scout JSON outputs.

This repo is intentionally opinionated:

• Local mode first: no OAuth needed, no backend required.
• Connected mode optional: can use ConfigHub auth flow through @confighub/ui-react.
• Readable architecture: parser + view model + tree explorer.

If you only want to validate the UI behavior, local mode is enough.

What this example covers

• Parse and render these cub-scout payloads:
  • tree ownership
  • tree runtime
  • tree git
• Paste JSON, upload JSON, or load included sample payloads.
• Search/filter tree nodes.
• Inspect selected node details.

Repository structure

src/
  App.tsx                    # main explorer page
  data/samples.ts            # reusable sample payloads
  lib/cubScoutAdapter.ts     # payload detection + view model construction
  types/cubScout.ts          # data contracts for supported payloads
  test/adapter.test.ts       # parser unit tests

Data flow

flowchart LR
  A["cub-scout CLI JSON"] --> B["Parser (src/lib/cubScoutAdapter.ts)"]
  B --> C["Explorer model"]
  C --> D["Tree UI (SimpleTreeView)"]
  D --> E["Node details pane"]

Loading

Quick start (Local mode, no OAuth)

npm install
npm run dev

Open: http://127.0.0.1:5173

Expected result:

1. You see the cub-scout-ui page immediately.
2. Click Load sample then Apply JSON.
3. A hierarchy appears on the right.
4. Clicking nodes updates the details panel.
5. Search narrows tree results.

If all 5 happen, local mode is working.

Connected mode (ConfigHub OAuth)

Connected mode is opt-in.

VITE_ENABLE_CONFIGHUB_AUTH=true \
CONFIGHUB_BACKEND_URL=https://hub.confighub.com \
npm run dev

Why redirect mismatches happen

If your OAuth provider/backend does not allow the exact dev origin, login fails.

You must register the exact URL used by Vite. This example runs at:

• http://127.0.0.1:5173

If you change host/port, register that exact origin too.

Redirect mismatch checklist

1. Confirm the browser URL is exactly http://127.0.0.1:5173.
2. Ensure that exact origin is allowed in ConfigHub OAuth/backend settings.
3. Keep host/port stable (strictPort is enabled in Vite config).
4. Retry login.

Getting real cub-scout JSON

Examples:

cub-scout tree ownership --format json > ownership.json
cub-scout tree runtime --json > runtime.json
cub-scout tree git --format json > git.json

Then upload the file or paste JSON into the left panel.

Test commands

npm test
npm run build

Environment variables

• VITE_ENABLE_CONFIGHUB_AUTH
  • false (default): local mode
  • true: connected mode with auth gate
• CONFIGHUB_BACKEND_URL
  • default: https://hub.confighub.com
  • set to local backend if needed

How this differs from react-sdk basic app

• Focuses on cub-scout JSON exploration, not spaces/units dashboard.
• Works fully offline in local mode.
• Includes explicit OAuth troubleshooting so login failures are easier to diagnose.