Merge pull request #54 from rivet-dev/feat/unify-observability-sections

Refine observability messaging across product pages

Author: NicholasKissel

src/components/marketing/actors/ActorsObservabilitySection.tsx

@@ -1,4 +1,4 @@
-import { Activity, Database, GitBranch, Terminal } from "lucide-react";
+import { Bot, LayoutDashboard } from "lucide-react";
 import { CARD_TITLE_CLASS, SECTION_H2_CLASS, SECTION_LEDE_CLASS } from "../typography";
 import { SITE_SECTION_CLASS, SITE_STANDARD_RAIL_CLASS } from "../layout";
 
@@ -7,28 +7,16 @@ const INSPECTOR_SRC =
 
 const features = [
   {
-    title: "SQLite Viewer",
+    title: "Actor Inspector",
     description:
-      "Browse and query SQLite databases in real-time across actors and agent sessions",
-    icon: Database,
+      "Inspect live state, connections, queues, workflow history, and SQLite data without building admin tooling.",
+    icon: LayoutDashboard,
   },
   {
-    title: "Workflow State",
+    title: "Rivet MCP",
     description:
-      "Inspect workflow progress, steps, and retries as they execute",
-    icon: GitBranch,
-  },
-  {
-    title: "Event Monitoring",
-    description:
-      "Follow Actor actions, connection events, and application logs while debugging a run",
-    icon: Activity,
-  },
-  {
-    title: "REPL",
-    description:
-      "Debug actors and agent sessions by calling actions, subscribing to events, and interacting directly with your code",
-    icon: Terminal,
+      "Ask your AI client to find Actors, call actions, and open the same Inspector inline as it debugs your application.",
+    icon: Bot,
   },
 ];
 
@@ -37,10 +25,10 @@ export const ActorsObservabilitySection = () => (
     <div className={SITE_STANDARD_RAIL_CLASS}>
       <div className="grid gap-10 lg:grid-cols-[0.75fr_1.25fr] lg:gap-16" data-site-reveal>
         <div>
-          <h2 className={`text-balance ${SECTION_H2_CLASS}`}>Complete observability.</h2>
+          <h2 className={`text-balance ${SECTION_H2_CLASS}`}>See inside every Actor.</h2>
           <p className={SECTION_LEDE_CLASS}>
-            Inspect Actor state, SQLite data, workflow progress, events, and
-            callable actions from the Rivet dashboard.
+            Open the Actor Inspector in the dashboard, or inside your AI client
+            through Rivet MCP.
           </p>
         </div>
         <div className="grid gap-x-8 sm:grid-cols-2">

src/components/marketing/enterprise/EnterpriseObservabilitySection.tsx

@@ -1,4 +1,4 @@
-import { Activity, Laptop, Layers } from "lucide-react";
+import { Bot, LayoutDashboard } from "lucide-react";
 import { CARD_TITLE_CLASS, SECTION_H2_CLASS, SECTION_LEDE_CLASS } from "../typography";
 import { SITE_SECTION_CLASS, SITE_STANDARD_RAIL_CLASS } from "../layout";
 
@@ -7,22 +7,16 @@ const INSPECTOR_SRC =
 
 const features = [
   {
-    title: "Local to production",
+    title: "Rivet dashboard",
     description:
-      "The same dashboard runs against local dev, your VPC, and air-gapped deployments.",
-    icon: Laptop,
+      "Inspect Actors, agentOS sessions, workflow runs, app releases, SQLite data, events, and logs in one place.",
+    icon: LayoutDashboard,
   },
   {
-    title: "Observe your stack",
+    title: "Rivet MCP",
     description:
-      "Inspect actor state, SQLite data, workflow progress, events, and logs in one place.",
-    icon: Activity,
-  },
-  {
-    title: "Composable by design",
-    description:
-      "Actors, agentOS, Workflows, and Dynamic Apps build on one primitive, so one dashboard covers them all.",
-    icon: Layers,
+      "Give approved AI clients scoped access to find Actors, call actions, and open the same Inspector inline.",
+    icon: Bot,
   },
 ];
 
@@ -33,7 +27,8 @@ export const EnterpriseObservabilitySection = () => (
         <div>
           <h2 className={`text-balance ${SECTION_H2_CLASS}`}>Complete observability.</h2>
           <p className={SECTION_LEDE_CLASS}>
-            Every deployment includes the Rivet dashboard.
+            Use one dashboard from local development to production, whether
+            Rivet runs in your VPC, on-premises, or air-gapped.
           </p>
         </div>
         <div>

src/components/marketing/sections/ObservabilitySection.tsx

@@ -1,34 +1,27 @@
-import { Activity, Database, GitBranch, Terminal } from "lucide-react";
-import { BODY_CLASS, CARD_TITLE_CLASS, SECTION_H2_CLASS } from "../typography";
+import { Bot, LayoutDashboard } from "lucide-react";
+import {
+  BODY_CLASS,
+  CARD_TITLE_CLASS,
+  SECTION_H2_CLASS,
+  SECTION_LEDE_CLASS,
+} from "../typography";
 import { SITE_SECTION_CLASS, SITE_STANDARD_RAIL_CLASS } from "../layout";
 
 const inspectorSrc =
   "https://assets.rivet.dev/website/marketing/screenshots/rivet-actors-inspector-state.png";
 
 const features = [
   {
-    title: "SQLite Viewer",
+    title: "Rivet dashboard",
     description:
-      "Browse and query SQLite databases in real-time across actors and agent sessions",
-    icon: Database,
+      "Inspect Actor state and SQLite data, agentOS sessions, workflow runs, and Dynamic App releases in one place.",
+    icon: LayoutDashboard,
   },
   {
-    title: "Workflow State",
+    title: "Rivet MCP",
     description:
-      "Inspect workflow progress, steps, and retries as they execute",
-    icon: GitBranch,
-  },
-  {
-    title: "Event Monitoring",
-    description:
-      "Follow Actor actions, connection events, and application logs while debugging a run",
-    icon: Activity,
-  },
-  {
-    title: "REPL",
-    description:
-      "Debug actors and agent sessions by calling actions, subscribing to events, and interacting directly with your code",
-    icon: Terminal,
+      "Let Claude Code, Codex, Cursor, and other AI clients find Actors, call actions, and open the Inspector inline.",
+    icon: Bot,
   },
 ];
 
@@ -40,6 +33,10 @@ export const ObservabilitySection = () => (
           <h2 className={`text-balance ${SECTION_H2_CLASS}`}>
             Complete observability.
           </h2>
+          <p className={SECTION_LEDE_CLASS}>
+            Inspect every part of Rivet in the dashboard, or bring the same live
+            context into your AI client with Rivet MCP.
+          </p>
         </div>
 
         <div

src/pages/dynamic-apps.astro

@@ -170,20 +170,12 @@ const appCapabilities = [
 
 const observabilityCapabilities = [
 	{
-		title: 'SQLite viewer',
-		body: "Browse and query each app's SQLite data in realtime, across every deployment.",
+		title: 'App Inspector',
+		body: "See an app's active release, publish history, runtime state, SQLite data, background jobs, and events in one place.",
 	},
 	{
-		title: 'Workflow state',
-		body: 'Inspect the progress, steps, and retries of jobs running inside an app.',
-	},
-	{
-		title: 'Event monitoring',
-		body: 'Follow actions, connection events, and application logs while an app serves traffic.',
-	},
-	{
-		title: 'REPL',
-		body: 'Debug a live app by calling its actions and subscribing to its events from the dashboard.',
+		title: 'Rivet MCP',
+		body: "Let your AI client inspect the app's Actor and call actions while it diagnoses runtime issues.",
 	},
 ];
 
@@ -415,14 +407,14 @@ const compositionLayers = [
 					<div data-site-reveal>
 						<h2 class={`text-balance ${SECTION_H2_CLASS}`}>See inside every app.</h2>
 						<p class={SECTION_LEDE_CLASS}>
-							Deployed apps run as Rivet Actors, so the dashboard shows their data, jobs, events, and actions live.
+							Open an app in the Rivet dashboard, or inspect the Actor behind it from your AI client with Rivet MCP.
 						</p>
 					</div>
-					<div class="grid gap-4 sm:grid-cols-2" data-site-reveal-group>
+					<div class="grid gap-6 sm:grid-cols-2" data-site-reveal-group>
 						{observabilityCapabilities.map((capability) => (
-							<div class={SITE_CARD_CLASS} data-site-reveal-child>
+							<div class="border-t border-ink/15 pt-5" data-site-reveal-child>
 								<h3 class={CARD_TITLE_CLASS}>{capability.title}</h3>
-								<p class="mt-2 text-sm leading-relaxed text-ink-soft">{capability.body}</p>
+								<p class="mt-2 text-[15px] leading-relaxed text-ink-soft">{capability.body}</p>
 							</div>
 						))}
 					</div>

src/pages/workflows.astro

@@ -116,20 +116,12 @@ const actorInheritance = [
 
 const capabilities = [
 	{
-		title: 'Step history',
-		body: "Every step's status, from pending through complete or failed.",
+		title: 'Run Inspector',
+		body: "Trace every step's status, timing, attempts, inputs, outputs, and errors; replay eligible steps after a fix.",
 	},
 	{
-		title: 'Timing and retries',
-		body: 'Durations, attempt counts, backoff delays, and terminal errors.',
-	},
-	{
-		title: 'Inputs and outputs',
-		body: 'The recorded values each step received and returned.',
-	},
-	{
-		title: 'Replay',
-		body: 'Re-run eligible steps after the underlying problem is fixed.',
+		title: 'Rivet MCP',
+		body: 'Ask your AI client to inspect the Actor behind a run and diagnose failures from its workflow history.',
 	},
 ];
 
@@ -329,6 +321,9 @@ const compositionLayers = [
 				<div class="grid gap-10 lg:grid-cols-[0.75fr_1.25fr] lg:gap-16">
 					<div data-site-reveal>
 						<h2 class={`text-balance ${SECTION_H2_CLASS}`}>See the history behind every run.</h2>
+						<p class={SECTION_LEDE_CLASS}>
+							Open a run in the Rivet dashboard, or inspect it from your AI client with Rivet MCP.
+						</p>
 					</div>
 					<div class="grid gap-6 sm:grid-cols-2" data-site-reveal-group>
 						{capabilities.map((capability) => (