For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/patterns/resource-workbench.md.
A3S UI
  • English
  • next

      • Resource Workbench

      Resource Workbench is the complete Office-derived composition: App Shell navigation, Workspace Header identity and actions, searchable templates or artifacts, and a split editor/inspector workspace.

      Live previewHTML · CSS · JavaScript

      My workspace

      4 recent resources

      Create from a template

      Start with a document, data model, or agent workspace.

      Recent work appears here

      Open a template to create the first resource.

      Composition

      App Shell
├── Activity Bar
└── Main workspace
    ├── Workspace Header
    └── Search + Resource Grid
        └── Resource Card

      Use a Split Pane when a selected resource opens beside an inspector, assistant, or trace detail view. Add a Ribbon only when the resource has enough persistent commands to justify it.

      Parameters and state

      The workbench introduces no new public class. Compose the documented parameters of each component and keep domain state—search terms, selected resources, save status, and navigation preference—in the host application.

      Responsive behavior

      • Collapse or hide persistent navigation before reducing content width.
      • Let Resource Grid reduce columns automatically through --resource-grid-min.
      • Collapse secondary Workspace Header actions on narrow screens.
      • Convert a side inspector to a Drawer when both split panes would become unusable.

      Accessibility

      Provide a page heading, named navigation landmarks, a labeled search input, and clear resource names. Move focus to the resource heading after navigation; do not move focus merely because a grid reflows.