eddi-screens

EDDI Manager screen patterns

Most pages live in src/pages/ and render inside AppLayout (sidebar + top bar) via its <Outlet />. The layout already supplies p-6, max-w-screen-2xl, scroll, and a @container/main context — such a page renders its own content only, no shell, no width cap, no page background.

Three surfaces deliberately render outside AppLayout and own their full frame: landing-page.tsx (/welcome), agent-studio.tsx (/manage/studio/:agentId, a full-screen breakout), and everything under src/pages/workforce/ (mounted on WorkforceLayout, a standalone app with no Manager chrome). Check src/app.tsx before assuming the shell is there — those pages do supply their own padding, and the rules below are about the AppLayout ones.

Page skeleton

Most pages are a single space-y-6 column — roughly three in four of the files in src/pages/. Reference: src/pages/agents.tsx.

<div className="space-y-6">
  {/* 1. Header: icon + title + subtitle, actions right */}
  <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 className="flex items-center gap-2 text-3xl font-bold text-foreground">
        <Bot className="h-8 w-8 text-primary" />
        {t("pages.agents.title", "Agents")}
      </h1>
      <p className="mt-1 text-muted-foreground">
        {t("pages.agents.subtitle", "Build and deploy conversational agents")}
      </p>
    </div>
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline" data-testid="import-agent-btn">…</Button>
      <Button onClick={() => setCreateOpen(true)} data-testid="create-agent-btn">
        <Plus className="h-4 w-4" />
        {t("createOrWizard.newAgent", "New Agent")}
      </Button>
    </div>
  </div>

  {/* 2. Optional guidance banner */}
  {/* 3. Toolbar: search + ViewToggle */}
  {/* 4. Content: loading → error → empty → card grid or table */}
  {/* 5. Dialogs last */}
</div>

Rules that hold across pages: