feat(console): add user schema list and detail screens

[bastionstack]

Summary

Builds the user schema screens from the design system. /schemas was a placeholder and /schemas/{id} printed the raw JSON document.

• List — one row per schema: name, the attributes it collects as InlineCode chips, its enabled sign-in methods, and the id and creation date that identify it (decisions log D10). The whole row opens the detail; the row menu carries View schema.
• Detail — Fields shows a FIELD | TYPE | REQ. table where object-typed rows drill into the next level behind a breadcrumb, beside the document as JSON or YAML with a copy button and the CLI hint. Authentication lists every method the document's x-auth-methods declares, enabled or disabled.
• Sidebar — User schemas nests under Users via SidebarMenuSub; NavMeta gained an optional parent.

Read-only throughout (D0b). Versions, In use state and Last changed are left out — the backend models none of them (#445, and the open "Schema status & versions" question), so the screens show what exists rather than an empty control.

Try it locally

moon run console:dev-real     # seeded instance + dev server on :5174

Sign in with the credentials in the boot banner (dev@zitadel.local / Console-dev-1). zitadel setup creates one schema, which shows the two-method chip and both methods Enabled.

To see the rest — nested drill-in, the elided breadcrumb, a Disabled method, non-string types and a block scalar in the YAML view — add a second schema, using the project id from the same banner:

PROJECT=proj_...   # from the boot banner

curl -s -X POST "http://localhost:5174/api/schemas?project_id=$PROJECT" \
  -H 'content-type: application/json' -d '{
  "kind": "user-schema",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "metaSchema": "https://nextgen.com/api/schemas/user-schema.json",
  "title": "Business",
  "objectType": "business-user",
  "type": "object",
  "x-auth-methods": {
    "passkey":  { "enabled": true,  "position": 1 },
    "password": { "enabled": false, "position": 2 }
  },
  "required": ["email"],
  "properties": {
    "email": { "type": "string", "format": "email", "description": "Work address.\nUsed for sign-in: it must be unique." },
    "givenName":   { "type": "string" },
    "familyName":  { "type": "string" },
    "companyName": { "type": "string" },
    "seats":  { "type": "integer" },
    "active": { "type": "boolean" },
    "address": {
      "type": "object",
      "required": ["street"],
      "properties": {
        "street": { "type": "string" },
        "city":   { "type": "string" },
        "geo": {
          "type": "object",
          "properties": {
            "latitude": { "type": "number" },
            "datum": {
              "type": "object",
              "properties": {
                "reference": {
                  "type": "object",
                  "required": ["epsg"],
                  "properties": { "epsg": { "type": "string" }, "authority": { "type": "string" } }
                }
              }
            }
          }
        }
      }
    }
  }
}'

Open that schema and walk address → geo → datum → reference; the path elides to SCHEMA › … › DATUM › REFERENCE at the last level. Authentication shows Passkey enabled and Password disabled, and the YAML tab renders the multi-line description as a block scalar.

There is no DELETE /schemas, so seeded schemas persist until the next dev:real boot.

Validation

moon ci :lint :typecheck :build :test     # 54 tests, 2 pre-existing lint warnings in scripts/dev-real.mts
node scripts/check-pr-title.mjs --title "feat(console): add user schema list and detail screens"

Both screens were checked against their Figma nodes in light and dark at 1280 and 390, including the drill-in at every level.

Release notes / changeset

.changeset/console-user-schema-screens.md, @zitadel/server: minor — the console ships inside the server container, so the screens reach a user.

Notes

• Property order is alphabetical, not authored. GET /schemas/{id} serialises properties from a Go map, so the response order is randomised between identical requests; sorting is what stops the table reshuffling between loads. The note to drop the sort is already in lib/schema.ts.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nextgen	Ready	Preview	Aug 6, 2026 9:10am
nextgen-docs	Ready	Preview	Aug 6, 2026 9:10am
nextgen-mock-zitadel	Ready	Preview	Aug 6, 2026 9:10am

[github-actions]

🦋 Changeset detected

Latest commit: 38202da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@zitadel/server	Minor
@zitadel/cli	Minor
@zitadel/testing	Minor
@zitadel/server-linux-x64	Minor
@zitadel/server-linux-arm64	Minor
@zitadel/server-darwin-x64	Minor
@zitadel/server-darwin-arm64	Minor
@zitadel/server-win32-x64	Minor
@zitadel/api	Minor
@zitadel/config	Minor
@zitadel/components	Minor
@zitadel/sdk-core	Minor
@zitadel/sdk-next	Minor
@zitadel/sdk-nuxt	Minor
@zitadel/sdk-react	Minor
@zitadel/sdk-vue	Minor
@zitadel/sdk-angular	Minor
@zitadel/sdk-solid	Minor
@zitadel/sdk-svelte	Minor
@zitadel/sdk-qwik	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR replaces the console’s /schemas placeholder and raw JSON detail view with read-only “User schemas” list + detail screens, adds nested sidebar navigation under “Users”, and introduces on-demand syntax highlighting + YAML rendering for schema documents.

Changes:

• Implemented user schema list rows (name, attribute chips, enabled auth methods, created date + id) and a schema detail view with Fields drill-in and Authentication tab.
• Added schema utilities for property table rows, drill-in path resolution, and x-auth-methods display ordering; added YAML formatting and Shiki-based highlighting.
• Updated console navigation metadata to support nested sidebar items; added min-w-0 to the sidebar inset to prevent overflow.

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds yaml to the workspace catalog for YAML rendering support.
pnpm-lock.yaml	Locks new dependency versions (yaml, shiki) used by the console.
apps/console/src/styles.css	Adds CSS variable aliases to map Shiki token roles onto console syntax/* tokens.
apps/console/src/routes/auth-guard.spec.tsx	Updates guard test to handle redirected-to schemas loader via MSW; heading assertion updated.
apps/console/src/routes/_authed/schemas/schemas.spec.tsx	Adds/expands tests for schemas list + detail behavior (drill-in, auth tab, JSON/YAML, read-only affordances).
apps/console/src/routes/_authed/schemas/index.tsx	Implements the User schemas list route, loader, and row UI.
apps/console/src/routes/_authed/schemas/$schemaId.tsx	Implements the schema detail screen (Fields + Authentication tabs) using new components.
apps/console/src/nav.ts	Extends NavMeta to support nested nav via optional parent and optional icon.
apps/console/src/lib/schema.ts	Adds helpers for property-table rows, drill-in path resolution, and ordered auth method extraction.
apps/console/src/lib/highlight.ts	Introduces lazy-loaded Shiki highlighting producing token streams (no dangerouslySetInnerHTML).
apps/console/src/lib/date.ts	Adds localized Created date formatting used in list rows.
apps/console/src/components/ui/sidebar.tsx	Adds min-w-0 to prevent flex overflow pushing the sidebar off-screen.
apps/console/src/components/ui/inline-code.tsx	Adds InlineCode UI primitive used for attribute chips and CLI hint styling.
apps/console/src/components/ui/card.tsx	Adds Card UI primitive used as the screen content panel.
apps/console/src/components/schema-fields-panel.tsx	Adds drill-in field table + breadcrumb path component for schema detail.
apps/console/src/components/schema-document-viewer.tsx	Adds JSON/YAML document viewer with copy-to-clipboard and CLI hint footer.
apps/console/src/components/app-shell/use-nav-items.ts	Builds hierarchical sidebar items using nav.parent.
apps/console/src/components/app-shell/AppShell.tsx	Renders nested sidebar rows via SidebarMenuSub* components.
apps/console/src/components/app-shell/app-shell.spec.tsx	Updates/extends sidebar tests for nested “User schemas” under “Users”.
apps/console/package.json	Adds shiki and yaml dependencies used by schema detail viewer.
apps/console/docs/styling.md	Documents Card and InlineCode as canonical UI building blocks.
.changeset/console-user-schema-screens.md	Adds a changeset bumping @zitadel/server minor for the embedded console change.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file