feat(webapp): chat AI UI improvements, new task landing pages and side menu (#3941)

Major dashboard restructure plus the new task landing pages and
self-serve schedules add-on integration.

## Side menu

- Full restructure: standalone Tasks / Runs / Sessions block at the top;
new collapsible sections for AI, Observability, Deployments, Manage
- Persisted collapse state per section in `dashboardPreferences`
- New / updated icons across the menu
- Dashboards section: built-in Run metrics + AI metrics + custom
dashboards, with drag-to-reorder via ReactGridLayout
(`DashboardList.tsx`)
- DevPresence connection indicator in the env selector (DEV + V2)

## Tasks (`_index` — unified Tasks page)

- Replaces the separated Agents / Standard / Schedules listing pages
with one table
- New `UnifiedTaskListPresenter` composes `TaskListPresenter` +
`AgentListPresenter` (shared `currentWorker` lookup)
- Columns: Type (with kind badge), ID, File, Running (numeric for tasks;
running + suspended pills for agents), Activity (24h stacked-by-status),
sticky menu
- Search + "Task type" multi-select filter (URL-synced)
- Client-side pagination at 25/page
- Right-hand "useful links" panel (cookie-persisted state)
- Live-reload SSE: page revalidates on `WORKER_CREATED` so onboarding
`trigger dev` flips the blank state automatically

## Agent landing page (`/agents/$agentParam`)

- New per-agent detail page
- Top tabs (Sessions / Runs) toggle both the chart panel and the table
- Three dashboard-style chart cards: Sessions/Runs activity, LLM spend,
Tokens
- `AgentDetailPresenter` queries ClickHouse for run activity, session
activity (with FINAL on `sessions_v1`), and LLM cost/token activity from
`llm_metrics_v1`
- TimeFilter at the top drives all three charts
- Sticky table header, resizable horizontal handle, sidebar with Test
agent button + properties
- Docs link → `ai-chat/overview`

## Standard Task landing page (`/tasks/standard/$taskParam`)

- New per-task detail page mirroring the Agent layout
- `TaskDetailPresenter` for activity + properties
- Chart panel wrapped in a Card with "Runs by status" header
- Top bar with title, TimeFilter, pagination
- Right sidebar: Test task + identifier, queue, machine, retry, TTL,
payload schema, etc.

## Scheduled Task landing page (`/tasks/scheduled/$taskParam`)

- New per-task detail page mirroring the Agent / Standard layout
- Top-bar actions (right → left): pagination, Bulk replay…, View all
runs, TimeFilter, Create schedule
- Connected schedules mini-table in the sidebar
- **Self-serve schedules add-on integration** (reincarnated from the
now-removed `/schedules` listing page during the `origin/main` merge):
- Bottom usage bar pinned via `grid-rows-[auto_1fr_auto]` — progress
ring + "X/Y of your schedules" + Purchase / Upgrade / Request CTA
  - At-limit "Create schedule" intercept dialog
- `PurchaseSchedulesModal` extracted as a shared component
(`apps/webapp/app/components/schedules/PurchaseSchedulesModal.tsx`)
handling increase / decrease / above-quota / need-to-delete states
- New resource action route at
`/resources/orgs/$organizationSlug/schedules-addon`

## Sessions

- Index page: list, filters, blank state, help tooltip rework
- Detail page: combined input/output chronological view (replaces split
tabs)
- Improved raw-message view layout (full-height)
- AI payload UI: `data-*` parts grouped under "AI SDK data parts:" label
- `toSafeUrl` helper guards rendered URLs from streamed content
- Fix: duplicate assistant content on inspector tab switch

## Playground (Test agent)

- Restructured top menu; back button + agent-selector popover
- Improved blank state
- Recent agent chat history moved into the tabbed menu
- Better message-scroll container (full height)

## Dashboards

- New Dashboards landing page (`/dashboards`) — Run metrics, AI metrics,
Create your own CTAs
- `BuiltInDashboards` updated; new `TasksDashboardPresenter` for the
tasks overview
- Custom dashboards section gains drag-to-reorder; cosmetic fix for
active-row drag-handle blending

## PageHeader / shared primitives

- `PageTitle` gains an `accessory` prop supporting string (auto-wrapped
in tooltip) and ReactNode
- Help tooltips on Tasks, Runs, Sessions PageTitles explaining the
concept and sub-categories
- `Card` primitive used for dashboard-style chart panels throughout

## Code review fixes (last batch on this branch)

- ClickHouse activity queries hardened: `FINAL` + `_is_deleted = 0` on
`task_runs_v2` (ReplacingMergeTree); `organization_id` + `project_id`
filters for sort-key prefix; `inserted_at` partition filter on
`llm_metrics_v1`
- `UnifiedTaskListPresenter`: shared `currentWorker` lookup;
slug-collision guard in `mergeRunningStates`; off-by-one fixed in 24h
bucket alignment
- `ScheduleListPresenter`: halved platform RPCs by deriving limit from
`currentPlan` instead of calling `getLimit`
- Sessions detail: stopped IntersectionObserver / scroll listener
re-attach on every chunk; `requestAnimationFrame` deferral on
auto-scroll to avoid virtualizer race
- URL hardening: `?types=` validated against known kinds; new
`parseFiniteInt` helper applied to `from`/`to`/`page` params
- AgentView: HITL resolution buffer now cleared once parts reach a
terminal state (was an unbounded Map on long sessions); subscription
effect deps documented with eslint suppression
- `PurchaseSchedulesModal`: bundle state resets on each open instead of
persisting stale drafts

## Manual testing

Manual smoke-test plan is tracked under
[TRI-10883](https://linear.app/triggerdotdev/issue/TRI-10883), broken
into 20 sub-issues covering onboarding, self-serve schedules, side menu,
the four landing pages, sessions, runs, dashboards, regressions and
performance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: samejr

.server-changes/playground-history-tab.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Move the agent playground "Recent" conversations popover into a dedicated "History" tab in the sidebar, with the currently active conversation highlighted.

.server-changes/standard-task-sidebar-properties.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Expand the standard task landing page sidebar to surface more task metadata: description, export name, worker version, queue (with concurrency + paused state), machine, max duration, TTL, retry config, and payload schema presence.

apps/webapp/app/assets/icons/AIChatIcon.tsx

@@ -0,0 +1,27 @@
+export function AIChatIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.42975 3.52374C7.56942 3.17905 9.76406 3 12 3C14.2359 3 16.4306 3.17905 18.5702 3.52374C20.0066 3.75513 21 5.01325 21 6.42589V13.5741C21 14.9868 20.0066 16.2449 18.5702 16.4763C16.8747 16.7494 15.1447 16.9185 13.3869 16.977C13.1832 16.9837 12.9952 17.0654 12.8594 17.2013L9.28032 20.7803C9.06582 20.9948 8.74323 21.059 8.46298 20.9429C8.18272 20.8268 7.99999 20.5534 7.99999 20.25V16.8073C7.13516 16.7236 6.27812 16.6129 5.42975 16.4763C3.99338 16.2449 2.99998 14.9868 2.99998 13.5741V6.42589C2.99998 5.01325 3.99337 3.75513 5.42975 3.52374Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 6C12.3443 6 12.6501 6.22034 12.7589 6.54702L13.1795 7.8086C13.3387 8.28637 13.7136 8.66127 14.1914 8.82053L15.453 9.24106C15.7797 9.34995 16 9.65566 16 10C16 10.3443 15.7797 10.6501 15.453 10.7589L14.1914 11.1795C13.7136 11.3387 13.3387 11.7136 13.1795 12.1914L12.7589 13.453C12.6501 13.7797 12.3443 14 12 14C11.6557 14 11.3499 13.7797 11.2411 13.453L10.8205 12.1914C10.6613 11.7136 10.2864 11.3387 9.8086 11.1795L8.54702 10.7589C8.22034 10.6501 8 10.3443 8 10C8 9.65566 8.22034 9.34995 8.54702 9.24106L9.8086 8.82053C10.2864 8.66127 10.6613 8.28637 10.8205 7.8086L11.2411 6.54702C11.3499 6.22034 11.6557 6 12 6Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/AIMetricsIcon.tsx

@@ -1,15 +1,33 @@
 export function AIMetricsIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.5 2C5.8013 2 6.0688 2.1928 6.16408 2.47864L6.53204 3.58252C6.67139 4.00057 6.99943 4.32861 7.41748 4.46796L8.52136 4.83592C8.8072 4.9312 9 5.1987 9 5.5C9 5.8013 8.8072 6.0688 8.52136 6.16408L7.41748 6.53204C6.99943 6.67139 6.67139 6.99943 6.53204 7.41748L6.16408 8.52136C6.0688 8.8072 5.8013 9 5.5 9C5.1987 9 4.9312 8.8072 4.83592 8.52136L4.46796 7.41748C4.32861 6.99943 4.00057 6.67139 3.58252 6.53204L2.47864 6.16408C2.1928 6.0688 2 5.8013 2 5.5C2 5.1987 2.1928 4.9312 2.47864 4.83592L3.58252 4.46796C4.00057 4.32861 4.32861 4.00057 4.46796 3.58252L4.83592 2.47864C4.9312 2.1928 5.1987 2 5.5 2Z"
         fill="currentColor"
       />
       <path
-        d="M18.6 2.40002C18.1226 2.40002 17.6648 2.58967 17.3272 2.92723C16.9896 3.2648 16.8 3.72263 16.8 4.20002V19.8C16.8 20.2774 16.9896 20.7353 17.3272 21.0728C17.6648 21.4104 18.1226 21.6 18.6 21.6H19.8C20.2774 21.6 20.7352 21.4104 21.0728 21.0728C21.4104 20.7353 21.6 20.2774 21.6 19.8V4.20002C21.6 3.72263 21.4104 3.2648 21.0728 2.92723C20.7352 2.58967 20.2774 2.40002 19.8 2.40002H18.6ZM11.4 7.20002C10.9226 7.20002 10.4648 7.38967 10.1272 7.72723C9.78964 8.0648 9.6 8.52263 9.6 9.00002V19.8C9.6 20.2774 9.78964 20.7353 10.1272 21.0728C10.4648 21.4104 10.9226 21.6 11.4 21.6H12.6C13.0774 21.6 13.5352 21.4104 13.8728 21.0728C14.2104 20.7353 14.4 20.2774 14.4 19.8V9.00002C14.4 8.52263 14.2104 8.0648 13.8728 7.72723C13.5352 7.38967 13.0774 7.20002 12.6 7.20002H11.4ZM4.2 12C3.72261 12 3.26477 12.1897 2.92721 12.5272C2.58964 12.8648 2.4 13.3226 2.4 13.8V19.8C2.4 20.2774 2.58964 20.7353 2.92721 21.0728C3.26477 21.4104 3.72261 21.6 4.2 21.6H5.4C5.87739 21.6 6.33523 21.4104 6.67279 21.0728C7.01036 20.7353 7.2 20.2774 7.2 19.8V13.8C7.2 13.3226 7.01036 12.8648 6.67279 12.5272C6.33523 12.1897 5.87739 12 5.4 12H4.2Z"
-        fill="currentColor"
+        d="M9 12C9 10.8954 9.89543 10 11 10H13C14.1046 10 15 10.8954 15 12V21H9V12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M15 7C15 5.89543 15.8954 5 17 5H19C20.1046 5 21 5.89543 21 7V20C21 20.5523 20.5523 21 20 21H15V7Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M3 17C3 15.8954 3.89543 15 5 15H7C8.10457 15 9 15.8954 9 17V21H4C3.44772 21 3 20.5523 3 20V17Z"
+        stroke="currentColor"
+        strokeWidth="2"
       />
     </svg>
   );

apps/webapp/app/assets/icons/AIPenIcon.tsx

@@ -0,0 +1,31 @@
+export function AIPenIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 2C6.34434 2 6.65005 2.22034 6.75895 2.54702L7.17947 3.8086C7.33873 4.28637 7.71363 4.66127 8.1914 4.82053L9.45298 5.24105C9.77966 5.34995 10 5.65566 10 6C10 6.34434 9.77966 6.65005 9.45298 6.75895L8.1914 7.17947C7.71363 7.33873 7.33873 7.71363 7.17947 8.1914L6.75895 9.45298C6.65005 9.77966 6.34434 10 6 10C5.65566 10 5.34995 9.77966 5.24105 9.45298L4.82053 8.1914C4.66127 7.71363 4.28637 7.33873 3.8086 7.17947L2.54702 6.75895C2.22034 6.65005 2 6.34434 2 6C2 5.65566 2.22034 5.34995 2.54702 5.24105L3.8086 4.82053C4.28637 4.66127 4.66127 4.28637 4.82053 3.8086L5.24105 2.54702C5.34995 2.22034 5.65566 2 6 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.7573 3.6275L20.3732 5.24335C21.1542 6.0244 21.1542 7.29073 20.3732 8.07178L9.7203 18.7246C9.57776 18.8671 9.39569 18.9631 9.19757 19.0002L4.03376 19.9669L5.00051 14.8031C5.03763 14.6051 5.13358 14.4229 5.27603 14.2804L15.9289 3.6275C16.7099 2.84645 17.9763 2.84645 18.7573 3.6275Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <line
+        x1="17.6464"
+        y1="10.3536"
+        x2="13.6464"
+        y2="6.35355"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/AIPromptsIcon.tsx

@@ -0,0 +1,41 @@
+export function ArrowLeftRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 7.5L18 7.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.4 11L18.9 7.5L15.4 4"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 16.5L18 16.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 13L5 16.5L8.5 20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ArrowLeftRightIcon.tsx

@@ -0,0 +1,33 @@
+export function ArrowRightSquareIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 12L19 12"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.4 15.5L19.9 12L16.4 8.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 8V6C13 4.89543 12.1046 4 11 4H7C5.89543 4 5 4.89543 5 6V18C5 19.1046 5.89543 20 7 20H11C12.1046 20 13 19.1046 13 18V16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ArrowRightSquareIcon.tsx

@@ -8,10 +8,35 @@ export function AttemptIcon({ className }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <rect
+        width="6"
+        height="2"
+        rx="1"
+        transform="matrix(1 0 0 -1 9 15)"
+        fill="currentColor"
+      />
+      <rect
+        width="2.48444"
+        height="2"
+        rx="1"
+        transform="matrix(1 0 0 -1 10.8042 9)"
+        fill="currentColor"
+      />
+      <path
+        d="M12.125 7.06332C11.6119 6.88324 11.0493 7.14809 10.8613 7.65823L7.70722 16.2127C7.52479 16.7075 7.77801 17.2565 8.27281 17.4389C8.7645 17.6202 9.31041 17.3713 9.49607 16.8813L12.7262 8.35528C12.9243 7.83221 12.6528 7.24858 12.125 7.06332Z"
+        fill="currentColor"
+      />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM7.65398 16.4367C7.64829 16.4871 7.64671 16.5374 7.64905 16.5873C7.66648 16.959 7.90169 17.3021 8.27281 17.4389C8.7645 17.6202 9.31042 17.3713 9.49607 16.8813L10.2088 15H13.8788L14.5915 16.8813C14.7772 17.3713 15.3231 17.6202 15.8148 17.4389C16.3096 17.2565 16.5628 16.7075 16.3804 16.2127L13.2478 7.71625C13.1255 7.30217 12.7423 7 12.2886 7H11.8041C11.5337 7 11.2884 7.10733 11.1084 7.28171C11.0015 7.38343 10.9157 7.51053 10.8613 7.65817L7.70722 16.2126C7.67996 16.2865 7.66243 16.3617 7.65398 16.4367ZM12.0438 10.1564L10.9665 13H13.1211L12.0438 10.1564Z"
+        d="M11.9626 7.06332C12.4757 6.88324 13.0383 7.14809 13.2264 7.65823L16.3804 16.2127C16.5628 16.7075 16.3096 17.2565 15.8148 17.4389C15.3231 17.6202 14.7772 17.3713 14.5915 16.8813L11.3614 8.35528C11.1633 7.83221 11.4349 7.24858 11.9626 7.06332Z"
         fill="currentColor"
       />
     </svg>

apps/webapp/app/assets/icons/AttemptIcon.tsx

@@ -0,0 +1,20 @@
+export function AvatarCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
+      <circle cx="12" cy="9.5" r="2.5" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M6 19C7.00156 16.6478 9.32233 15 12.0254 15C14.6837 15 16.9724 16.5938 18 18.884"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}