Skip to content

design: Console plugin SDK and configured navigation folders #113

Open

Description

@imneov

Console plugin SDK and configured frontend navigation

Background

Console hosts built-in modules and separately delivered frontend pages. Operators need one startup declaration for enabled modules, menu order and directory grouping. Plugin authors need the host's React, Router, Query, UI and authenticated transport while developing and delivering business pages independently.

Implementation: #114.

Goals

  • Declare built-in modules and remote SDK plugins in one YAML tree; sibling order is navigation order.
  • Support nested, expandable menu folders that retain existing page permissions.
  • Maintain the reusable SDK in web/packages/plugin-sdk as @modelsphere/plugin-sdk.
  • Develop plugin source with Vite and React Fast Refresh, preserving compatible component state.
  • Deliver built JS/CSS through a static-resource image and Console's same-origin proxy.

Architecture

startup YAML -> validation/default resolution -> /plugins/index.json
                                                      |
compiled module registry + SDK registration -> ordered modules and folder ancestry
                                                      |
existing page permissions -> sidebar tree -> menu and page routes

resource delivery: Console proxy -> plugin Vite + HMR / static image
business requests: plugin page -> host apiFetch -> existing business API proxy
Component Responsibility
Embedded default YAML Declare the default built-in selection and order
Operator plugins tree Select built-ins/remotes, resource locations and nested folders
Go server Validate declarations, return the same-origin discovery tree, and proxy remote resources
Compiled registry Provide built-in page implementations by ID
ModelSphere SDK Register components/routes and share host instances; provide build/dev presets
Browser loader Resolve declarations, reject path collisions before remote execution and preserve configured order
Sidebar Filter page permissions, hide empty folders and open active route ancestors
Plugin repository Own business UI, tests and static-resource image

Configuration

plugins:
  - folder: models
    title: Models and experiments
    children:
      - id: inferences
        source: builtin
      - id: example
        source: remote
        url: http://example-frontend:8080
        entry: index.umd.js
        styles: [index.css]
        menu:
          title: Example
          label: Experiments
          path: /example
          component: Example
          icon: flask-conical
  - id: playground
    source: builtin
  - id: docs
    source: builtin
Input Behavior
Omitted/null plugins Load the embedded built-in defaults
Explicit plugins: [] Load no modules
Explicit sources/folders Load only the declared tree, in sibling order
Legacy unmarked remote list Default built-ins followed by the configured remotes
Nested folders Group modules without changing page routes or permissions

Development keeps the menu and uses development: true, a Vite upstream, and entry: __modelsphere_entry.ts. Configuration changes take effect after restarting the existing Console backend and refreshing the browser.

Interfaces

  • GET /plugins/index.json: builtin/remote/folder declarations with same-origin resource URLs.
  • GET /plugins/<id>/*: resources for configured remote leaves; browser Cookie/Authorization and upstream Set-Cookie are stripped.
  • Development descriptors permit proxied WebSocket HMR; deployment descriptors reject upgrades.
  • Plugin scripts use the Console host's React, Router, Query, UI, locale and authenticated API transport.

Acceptance and verification

  • SDK migration, source attribution, types, build and 188 SDK tests.
  • Configuration, HTTP proxy, credential stripping and development/deployment WebSocket tests.
  • Explicit module order, nested folders, empty/default/legacy configuration and collision tests.
  • Permission pruning, active detail ancestors, duplicate folder labels and collapsed navigation tests.
  • Browser Fast Refresh preserves document identity and local state, including new shared imports.
  • External plugin types, production bundle and 109 tests; GitHub image workflow 42192372759 succeeded.
  • Browser static-image registration, resource failure/recovery, entry removal and nested folder interactions.
  • Console type checking, 511 frontend tests and production build; full Go tests/vet and strict Helm lint.
  • Architecture, startup configuration example and plugin development/deployment guide updated.

Review entry points: docs/development/plugins.md, docs/plans/2026-11-05-global-sdk-design.md, and docs/plans/2026-11-06-configured-navigation-design.md.

GitHub verification

Latest head: cc29e7a (includes navigation commit 4745dbc). CI 42247317988 and publish 42247318085 passed. PR #114 is conflict-free and awaiting an Approver review.

Activity

  1. added
    kind/designA design proposal or a decision to be made
    area/shellUI shell: layout, navigation, permissions, preferences
    on Nov 4, 2026
  2. changed the title [-]design: load installed Console modules without a plugin manager[/-] [+]design: ModelSphere Plugin SDK with development HMR and image delivery[/+] on Nov 6, 2026
  3. changed the title [-]design: ModelSphere Plugin SDK with development HMR and image delivery[/-] [+]design: Console plugin SDK and configured navigation folders[/+] on Nov 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area/shellUI shell: layout, navigation, permissions, preferenceskind/designA design proposal or a decision to be madetriage/acceptedConfirmed and wanted

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions