Lenso UI

Template · Console shell

Console Workspace

A full-width Console shell with workspace switching, Agent profiles, local navigation, Plugin pages, and a persistent assistant entry.

Live playground

从一个问题开始

分析、写作或讨论想法，Acme Agent 会在这个会话里继续。

Keep the shell and the page separate

  • The top-left control switches workspaces; the tabs after the divider belong to the selected workspace.
  • The assistant entry stays in the same place across workspaces. Its conversation and action approval flow belong to the Console application.
  • Render Agent Chat, Agent, Code, and Design as profiles of the selected App Agent; each profile owns its own session.
  • Use the sidebar for the current workspace’s destinations. A Plugin may register pages and local navigation without transferring its business data or authorization to the shell.

Compose with Lenso UI

  • Use compact navigation geometry: 32px rows, quiet neutral selected fills, one-line ellipsis, and 14px icons with an 8px text gap.
  • Use PromptComposer for Agent input and CommandMenu for production search; this preview shows their placement, while the owning product supplies real actions and results.
  • The preview data is illustrative. The Console must resolve App identity, Plugin contribution lifecycle, permissions, and live state before rendering production pages.

Implementation

The shell takes controlled workspace and tab state. The application supplies page content, Plugin navigation, search data, and assistant behavior.

import { useState } from "react";
import { FolderIcon } from "lucide-react";
import {
  ConsoleSidebarItem,
  ConsoleWorkspace,
  type ConsoleTabId,
  type ConsoleWorkspaceId,
} from "@/components/templates/console-workspace";

export function AppConsole() {
  const [workspace, setWorkspace] = useState<ConsoleWorkspaceId>("agent");
  const [tabs, setTabs] = useState<Record<ConsoleWorkspaceId, ConsoleTabId>>({
    agent: "chat",
    app: "overview",
    projects: "project",
  });

  return (
    <ConsoleWorkspace
      workspace={workspace}
      activeTab={tabs[workspace]}
      onWorkspaceChange={setWorkspace}
      onTabChange={(tab, target = workspace) =>
        setTabs((current) => ({ ...current, [target]: tab }))
      }
      sidebar={<ConsoleSidebarItem icon={FolderIcon}>Projects</ConsoleSidebarItem>}
    >
      <div>Render the selected Agent profile or Plugin page here.</div>
    </ConsoleWorkspace>
  );
}
Lenso UI