Madraka · Nov 14, 2026 · Nov 14, 2026 · Nov 14, 2026 · Nov 14, 2026
diff --git a/.changeset/ui-dashboard-blocks.md b/.changeset/ui-dashboard-blocks.md
@@ -0,0 +1,5 @@
+---
+"@cloudhal/cli": patch
+---
+
+Studio's list toolbars come from one shared `@cloudhal/ui` block. The search now fills the free width of the row, and the filters, other actions, sort and refresh follow in a fixed order. `@cloudhal/ui` also gains `StatusIndicator`, `UsageMeterRow`, a "View docs" pill on `PageLayout`, and a resource mode for one resource's detail page: its tabs under the top bar, actions on the right, and no large title (#228).
diff --git a/apps/studio/scripts/design-lint.ts b/apps/studio/scripts/design-lint.ts
@@ -97,6 +97,7 @@ export type Template =
   | "moderation"
   | "queue"
   | "dashboard"
+  | "resource"
   | "settings"
   | "editor"
   | "auth"
@@ -135,6 +136,10 @@ export const TEMPLATE_REQUIRES: Record<Template, string[]> = {
     "Pagination",
   ],
   dashboard: ["PageLayout", "crumbs=", "title=", "Columns", "SectionCard"],
+  // One resource's detail page like the dashboard's Worker page (DESIGN.md §2 `resource`): the
+  // crumbs (and an environment switcher) in the top bar, the resource's tabs under it with the
+  // actions on the right, no large title (`title` is the hidden h1), then SectionCards.
+  resource: ["PageLayout", "crumbs=", "title=", "resource=", "SectionCard"],
   settings: ["PageLayout", "crumbs=", "title=", "SettingsLayout", "SettingsSection"],
   editor: ["PageLayout", "crumbs=", "title=", "EditorLayout", "SectionCard"],
   auth: ["AuthLayout", "Tabs", "Input", "Button"],

diff --git a/apps/studio/src/components/ListToolbar.tsx b/apps/studio/src/components/ListToolbar.tsx
diff --git a/apps/studio/src/routes/ActivityPage.tsx b/apps/studio/src/routes/ActivityPage.tsx
@@ -6,6 +6,7 @@ import {
   LayerCard,
   Link,
   LinkButton,
+  ListToolbar,
   PageLayout,
   RefreshButton,
   Select,
@@ -29,7 +30,6 @@ import { ActivityDetailDialog } from "../components/ActivityDetailDialog.tsx";
 import { ActorCell, DecisionCell, Outcome, ToolCell, useToolLabel } from "../components/Audit.tsx";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";
 import { useCan, useMemberRoles } from "../components/useMe.ts";

diff --git a/apps/studio/src/routes/AgentsPage.tsx b/apps/studio/src/routes/AgentsPage.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenu,
   Empty,
   LayerCard,
+  ListToolbar,
   PageLayout,
   Pagination,
   SectionEmpty,
@@ -49,7 +50,6 @@ import {
   useExtendElevation,
 } from "../components/Elevation.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { RoleBadge } from "../components/Roles.tsx";
 import { ScopeBadge } from "../components/ScopeBadge.tsx";

diff --git a/apps/studio/src/routes/ArticlesPage.tsx b/apps/studio/src/routes/ArticlesPage.tsx
@@ -6,6 +6,7 @@ import {
   ImagePreview,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   Select,
@@ -34,7 +35,6 @@ import { EntryDeleteDialog } from "../components/EntryDeleteDialog.tsx";
 import { EntryPath } from "../components/EntryPath.tsx";
 import { EntryStatus } from "../components/EntryStatus.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import {
   ListViewsCell,
   type ListViewsColumn,

diff --git a/apps/studio/src/routes/AutomationsPage.tsx b/apps/studio/src/routes/AutomationsPage.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenu,
   Empty,
   LayerCard,
+  ListToolbar,
   PageLayout,
   ScheduleStatusBadge,
   Switch,
@@ -22,7 +23,6 @@ import { useState } from "react";
 import { ModeBadge } from "../components/AgentModes.tsx";
 import { AutomationDialog } from "../components/AutomationDialog.tsx";
 import { deleteResourceProps } from "../components/deleteLabels.ts";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import {
   NewScheduleButton,

diff --git a/apps/studio/src/routes/CollectionsPage.tsx b/apps/studio/src/routes/CollectionsPage.tsx
@@ -5,6 +5,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   Table,
@@ -17,7 +18,6 @@ import { useParams } from "@tanstack/react-router";
 import { useState } from "react";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { NewCollectionDialog } from "../components/NewCollectionDialog.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";
 import { useCan } from "../components/useMe.ts";

diff --git a/apps/studio/src/routes/CommentsPage.tsx b/apps/studio/src/routes/CommentsPage.tsx
@@ -14,6 +14,7 @@ import {
   Empty,
   LayerCard,
   LinkButton,
+  ListToolbar,
   Meter,
   PageLayout,
   Pagination,
@@ -55,7 +56,6 @@ import {
 } from "../components/Comments.tsx";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { SettingRow } from "../components/Settings.tsx";
 import { useToast } from "../components/Toast.ts";
 import { useGate, useMe } from "../components/useMe.ts";

diff --git a/apps/studio/src/routes/MediaPage.tsx b/apps/studio/src/routes/MediaPage.tsx
@@ -3,6 +3,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   MediaDropZone,
   MediaGrid,
   MediaTile,
@@ -21,7 +22,6 @@ import { useNavigate, useParams } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { AssetBadges, AssetFrame, UsageBadge } from "../components/Media.tsx";
 import { UploadDialog } from "../components/MediaUpload.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";

diff --git a/apps/studio/src/routes/MembersPage.tsx b/apps/studio/src/routes/MembersPage.tsx
@@ -5,6 +5,7 @@ import {
   DropdownMenu,
   Empty,
   LayerCard,
+  ListToolbar,
   PageLayout,
   Pagination,
   SectionCard,
@@ -38,7 +39,6 @@ import { ConfirmDialog } from "../components/ConfirmDialog.tsx";
 import { Crumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
 import { InviteDialog, type InviteDraft } from "../components/InviteDialog.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import {
   ChangeRoleDialog,
   MemberIdentity,

diff --git a/apps/studio/src/routes/PagesPage.tsx b/apps/studio/src/routes/PagesPage.tsx
@@ -7,6 +7,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   Table,
@@ -21,7 +22,6 @@ import { type ReactNode, useState } from "react";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { deleteResourceProps } from "../components/deleteLabels.ts";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import {
   ListViewsCell,
   type ListViewsColumn,

diff --git a/apps/studio/src/routes/RedirectsPage.tsx b/apps/studio/src/routes/RedirectsPage.tsx
@@ -7,6 +7,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   Select,
@@ -35,7 +36,6 @@ import { ConfirmDialog } from "../components/ConfirmDialog.tsx";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
 import { ReadOnly, ViewOnlyBanner } from "../components/Gating.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RedirectDialog } from "../components/RedirectDialog.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";

diff --git a/apps/studio/src/routes/ScheduleHistoryPage.tsx b/apps/studio/src/routes/ScheduleHistoryPage.tsx
@@ -5,6 +5,7 @@ import {
   Empty,
   LayerCard,
   LinkButton,
+  ListToolbar,
   PageLayout,
   RefreshButton,
   SCHEDULE_RUN_STATES,
@@ -20,7 +21,6 @@ import { ClockCounterClockwise, GitDiff, ListMagnifyingGlass } from "@phosphor-i
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { useState } from "react";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { ScheduleRunDialog } from "../components/ScheduleRunDialog.tsx";
 import {
   itemsLabel,

diff --git a/apps/studio/src/routes/SchedulesPage.tsx b/apps/studio/src/routes/SchedulesPage.tsx
@@ -22,6 +22,7 @@ import {
   LayerCard,
   LayerDialog,
   LinkButton,
+  ListToolbar,
   PageLayout,
   Popover,
   type ScheduleEntry,
@@ -48,7 +49,6 @@ import {
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { ScheduleDialog } from "../components/ScheduleDialog.tsx";
 import {

diff --git a/apps/studio/src/routes/SitesPage.tsx b/apps/studio/src/routes/SitesPage.tsx
@@ -6,6 +6,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   SectionCard,
@@ -18,7 +19,6 @@ import { useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { Crumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { NewSiteDialog } from "../components/NewSiteDialog.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";
 import { useGate } from "../components/useMe.ts";

diff --git a/apps/studio/src/routes/SkillsPage.tsx b/apps/studio/src/routes/SkillsPage.tsx
@@ -7,6 +7,7 @@ import {
   Empty,
   InlineCopyText,
   LayerCard,
+  ListToolbar,
   PageLayout,
   Pagination,
   SectionCard,
@@ -21,7 +22,6 @@ import { useCallback, useState } from "react";
 import { CodeHighlighted } from "../components/CodeHighlighted.tsx";
 import { Crumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { ApprovalTool, SkillDetailDialog, SkillScope } from "../components/SkillDetailDialog.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";
 import { usePaging } from "../components/usePaging.ts";

diff --git a/apps/studio/src/routes/SnapshotsPage.tsx b/apps/studio/src/routes/SnapshotsPage.tsx
@@ -6,6 +6,7 @@ import {
   Input,
   LayerCard,
   LayerDialog,
+  ListToolbar,
   PageLayout,
   Pagination,
   Radio,
@@ -18,7 +19,6 @@ import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { useState } from "react";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { usePublishMode, useRequestedNotice } from "../components/Publish.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { SnapshotDiffDialog } from "../components/SnapshotDiffDialog.tsx";

diff --git a/apps/studio/src/routes/TaxonomyPage.tsx b/apps/studio/src/routes/TaxonomyPage.tsx
@@ -7,6 +7,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   SectionCard,
@@ -43,7 +44,6 @@ import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
 import { ReadOnly, ViewOnlyBanner } from "../components/Gating.tsx";
 import { GovernanceDialog, type GovernanceTarget } from "../components/GovernanceDialog.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { RelativeTime } from "../components/RelativeTime.tsx";
 import { SettingRow } from "../components/Settings.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";

diff --git a/apps/studio/src/routes/TranslationsPage.tsx b/apps/studio/src/routes/TranslationsPage.tsx
@@ -3,6 +3,7 @@ import {
   Empty,
   LayerCard,
   Link,
+  ListToolbar,
   PageLayout,
   Pagination,
   Select,
@@ -16,7 +17,6 @@ import { useParams } from "@tanstack/react-router";
 import { useState } from "react";
 import { SiteCrumbs } from "../components/Crumbs.tsx";
 import { ErrorBanner } from "../components/ErrorBanner.tsx";
-import { ListToolbar } from "../components/ListToolbar.tsx";
 import { Status } from "../components/Status.tsx";
 import { TableSkeleton } from "../components/TableSkeleton.tsx";
 import { usePaging } from "../components/usePaging.ts";