Skip to main content

Frontend Dashboard Example

This example is useful when the repo you are describing is a web application with operator-facing screens, route-level entrypoints, and backend API dependencies. It shows how the integrations model adapts to frontend work without losing the same REPO_FACTS.json structure used by service and SDK repos.

Why this profile is a good starting point

  • It emphasizes routes, components, and UI integration points instead of binaries or library exports.
  • It captures the browser-facing dependency graph that matters for dashboard work: framework, UI kit, data fetching, and backend APIs.
  • It demonstrates that the same generator model can express frontend constraints and safe edit zones without creating a frontend-only schema.

Profile at a glance

  • Repo: Lumio Admin Dashboard
  • Repo path: {profile.facts.repo.path}
  • Repo kind: {profile.facts.repo.kind}
  • Language: {profile.facts.repo.language}
  • Draft status: {profile.facts.meta.draftStatus}
  • Summary: Next.js admin dashboard for Lumio workflows, analytics, and document management.

Provenance

  • Source repo path: {profile.provenance.sourceRepoPath}
  • Snapshot date: {profile.provenance.snapshotDate}
  • Owner or steward: {profile.provenance.ownerOrSteward}
  • Provenance note: Derived from the repo README and package metadata present in the repo snapshot.

What the facts emphasize

App entry points and UI structure

The entry points guide a reader toward routes, layout, and reusable UI code:

- src/app/page.tsx
- src/app/layout.tsx
- package.json
- src/app
- src/components
- src/lib
- Next.js 16 App Router web app

Commands, dependencies, and operator-facing behavior

The command set stays aligned with a Next.js application workflow:

  • Setup: {profile.facts.commands.setup.join(" | ")}
  • Dev: {profile.facts.commands.dev.join(" | ")}
  • Test: {profile.facts.commands.test.join(" | ")}
  • Build: {profile.facts.commands.build.join(" | ")}

The integration surface highlights what a dashboard depends on and what it produces:

  • Inputs: FastAPI backend APIs, environment variables
  • Outputs: Admin UI flows, workflow editing and monitoring screens
  • Dependencies: Next.js, React, Ant Design, TanStack Query

Safe edit zones and risky areas

Frontend repos often look easy to change until a contract or workflow breaks. The example keeps that nuance visible:

- Risky area: API integration, workflow editors, and shared UI contracts.
- Safe edit zone: Documentation and tightly scoped UI text or helper changes.
- Source doc: README.md (Project README)

Generated artifact preview

The rendered pack below proves that the shared generator is not only for backend repos. The same artifact set can carry enough frontend context to orient an engineer or agent before they edit routes, components, or API integration code.

Lumio Admin Dashboard example artifacts

Generated from the shared renderer path for momentum-online/lumio_admin_dashboard.

Canonical repo facts

REPO_FACTS.json

json via generic-v1

{
  "meta": {
    "schemaVersion": "1",
    "artifactVersion": "1",
    "generatorVersion": "integrations-v1",
    "draftStatus": "draft",
    "unknowns": [
      "ownerOrSteward: unknown (not explicitly stated in repo docs)",
      "ownership ownerOrSteward is unknown",
      "lifecycle.lastReviewed"
    ]
  },
  "repo": {
    "key": "lumio-admin-dashboard",
    "name": "Lumio Admin Dashboard",
    "path": "momentum-online/lumio_admin_dashboard",
    "language": "typescript",
    "kind": "frontend-dashboard",
    "summary": "Next.js admin dashboard for Lumio workflows, analytics, and document management."
  },
  "entryPoints": {
    "files": [
      "src/app/page.tsx",
      "src/app/layout.tsx",
      "package.json"
    ],
    "directories": [
      "src/app",
      "src/components",
      "src/lib"
    ],
    "runtime": [
      "Next.js 16 App Router web app"
    ]
  },
  "commands": {
    "setup": [
      "pnpm install"
    ],
    "dev": [
      "pnpm dev"
    ],
    "test": [
      "pnpm test"
    ],
    "build": [
      "pnpm build"
    ]
  },
  "integrationSurface": {
    "inputs": [
      "FastAPI backend APIs",
      "environment variables"
    ],
    "outputs": [
      "Admin UI flows",
      "workflow editing and monitoring screens"
    ],
    "dependencies": [
      "Next.js",
      "React",
      "Ant Design",
      "TanStack Query"
    ]
  },
  "sourceDocs": {
    "docs": [
      {
        "title": "Project README",
        "path": "README.md"
      }
    ],
    "runbooks": []
  },
  "lifecycle": {
    "stage": "active",
    "ownerOrSteward": "unknown",
    "lastReviewed": "unknown"
  },
  "ownership": {
    "stopAndAsk": [
      "Before changing user-facing flows or shared contracts."
    ],
    "verification": [
      "Run frontend tests and confirm key screens manually."
    ],
    "riskyAreas": [
      "API integration, workflow editors, and shared UI contracts."
    ],
    "safeEditZones": [
      "Docs, small presentation tweaks, and isolated utilities."
    ]
  },
  "agentBehavior": {
    "stopAndAsk": [
      "Pause before changing workflows, contracts, or auth-sensitive code."
    ],
    "verification": [
      "Run focused tests and check the affected screen path."
    ],
    "riskyAreas": [
      "Route flows, editor state, and backend contract assumptions."
    ],
    "safeEditZones": [
      "Documentation and tightly scoped UI text or helper changes."
    ]
  }
}