From e57e97c34def5cd2276885a4857b3ff2e6f01085 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Fri, 21 Nov 2025 13:30:14 -0800
Subject: [PATCH 01/13] feat: replaced hard coded benthos schema json file with
 new connect query endpoint

---
 .../skills/frontend-developer/SKILL.md        | 304 +++++++++++++++++
 .../rp-connect/onboarding/connect-tile.tsx    |   6 +-
 .../rp-connect/onboarding/connect-tiles.tsx   |  12 +-
 .../onboarding/onboarding-wizard.tsx          |  23 +-
 .../pages/rp-connect/pipelines-create.tsx     |  10 +
 .../pages/rp-connect/types/constants.ts       |  53 ---
 .../pages/rp-connect/types/schema.ts          |  96 +-----
 .../pages/rp-connect/utils/categories.ts      |   4 +-
 .../pages/rp-connect/utils/schema.ts          | 306 +++++++-----------
 .../pages/rp-connect/utils/wizard.ts          |   6 +-
 .../components/pages/rp-connect/utils/yaml.ts |   7 +-
 frontend/src/react-query/api/connect.tsx      |  43 +++
 12 files changed, 532 insertions(+), 338 deletions(-)
 create mode 100644 frontend/.claude/skills/frontend-developer/SKILL.md
 create mode 100644 frontend/src/react-query/api/connect.tsx

diff --git a/frontend/.claude/skills/frontend-developer/SKILL.md b/frontend/.claude/skills/frontend-developer/SKILL.md
new file mode 100644
index 000000000..b7b257303
--- /dev/null
+++ b/frontend/.claude/skills/frontend-developer/SKILL.md
@@ -0,0 +1,304 @@
+---
+name: frontend-developer
+description: "Build user interfaces using Redpanda UI Registry components with React, TypeScript, and Vitest testing. Use when user requests UI components, pages, forms, or mentions 'build UI', 'create component', 'design system', 'frontend', or 'registry'."
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, mcp__ide__getDiagnostics
+---
+
+# Frontend UI Development
+
+Build UIs using the Redpanda UI Registry design system following this repo's patterns.
+
+## Critical Rules
+
+**ALWAYS:**
+
+- Fetch registry docs FIRST: Invoke `mcp__context7__get-library-docs` with library `/websites/redpanda-ui-registry_netlify_app`
+- Use registry components from `src/components/redpanda-ui/`
+- Install components via CLI: `yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r <component>`
+- Use functional React components with TypeScript
+- Run `bun i --yarn` after installing packages
+
+**NEVER:**
+
+- Use deprecated `@redpanda-data/ui` or Chakra UI
+- Modify files in registry base directory (check `cli.json`)
+- Copy/paste registry source code
+- Add margin `className` directly to registry components
+- Use inline `style` prop on registry components
+- Leave `console.log` or comments in code
+
+## Workflow
+
+### 1. Fetch Registry Documentation
+
+```bash
+# REQUIRED FIRST STEP
+Invoke: mcp__context7__get-library-docs
+Library: /websites/redpanda-ui-registry_netlify_app
+```
+
+### 2. Install Components
+
+```bash
+# Single component
+yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r button
+
+# Multiple components (space-separated)
+yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r card dialog form
+
+# Then generate yarn.lock
+bun i --yarn
+```
+
+### 3. Write Component
+
+**Structure:**
+
+```typescript
+// Functional component with explicit types
+interface Props {
+  title: string;
+  onSubmit: (data: FormData) => void;
+}
+
+export function MyComponent({ title, onSubmit }: Props) {
+  // Component logic
+}
+```
+
+**Styling:**
+
+```typescript
+// ✅ CORRECT: Use component variants
+<Button variant="primary" size="lg">Click</Button>
+
+// ✅ CORRECT: Wrap for spacing
+<div className="mt-4">
+  <Button variant="primary">Click</Button>
+</div>
+
+// ❌ WRONG: Direct margin on component
+<Button className="mt-4" variant="primary">Click</Button>
+```
+
+**TypeScript:**
+
+- Define prop interfaces
+- Never use `any` - infer correct types
+- Use generics for collections
+
+**Performance:**
+
+- Hoist static content outside component
+- Use `useMemo` for expensive computations
+- Use `memo` for components receiving props
+
+### 4. Write Tests
+
+**Test types:**
+
+- Unit tests (`.test.ts`): Pure logic, utilities, helpers - Node environment
+- Integration tests (`.test.tsx`): React components, UI interactions - JSDOM environment
+
+**Unit test example:**
+
+```typescript
+// utils.test.ts
+import { formatNumber } from "./utils";
+
+describe("formatNumber", () => {
+  test("should format numbers with commas", () => {
+    expect(formatNumber(1000)).toBe("1,000");
+  });
+});
+```
+
+**Integration test example:**
+
+```typescript
+// component.test.tsx
+import { render, screen, fireEvent } from 'test-utils';
+import { MyComponent } from './component';
+
+describe('MyComponent', () => {
+  test('should call onSubmit when button clicked', () => {
+    const onSubmit = vi.fn();
+    render(<MyComponent onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(onSubmit).toHaveBeenCalled();
+  });
+});
+```
+
+**Mocking:**
+
+```typescript
+vi.mock("module-name", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("module-name")>();
+  return {
+    ...actual,
+    functionToMock: vi.fn(),
+  };
+});
+
+const mockFunction = vi.mocked(functionToMock);
+```
+
+### 5. Validation
+
+```bash
+# Run in order
+bun run type:check    # TypeScript errors
+bun run test          # All tests
+bun run lint          # Code quality
+bun run build         # Production build
+bun run start         # Dev server - check browser
+```
+
+**Success criteria:**
+
+- ✓ No TypeScript errors
+- ✓ All tests passing
+- ✓ No lint errors
+- ✓ Build succeeds
+- ✓ No runtime errors in browser
+
+## Testing Commands
+
+```bash
+bun run test                 # All tests (unit + integration)
+bun run test:unit            # Unit tests only (.test.ts)
+bun run test:integration     # Integration tests only (.test.tsx)
+bun run test:watch           # Watch mode
+bun run test:ui              # Interactive UI
+bun run test:coverage        # Coverage report
+```
+
+## Common Patterns
+
+### Registry Component Usage
+
+Check `src/components/redpanda-ui/` for installed components before installing new ones.
+
+Use component variants instead of custom styling:
+
+```typescript
+<Button variant="primary" size="lg" />
+<Card variant="outline" />
+<Dialog size="md" />
+```
+
+### Form Patterns
+
+For complex forms, use React Hook Form + Zod:
+
+```typescript
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+});
+
+const form = useForm({
+  resolver: zodResolver(schema),
+  defaultValues: { name: "", email: "" },
+});
+```
+
+For simple forms, use AutoForm:
+
+```typescript
+import { AutoForm } from '@autoform/react';
+import { ZodProvider } from '@autoform/zod';
+
+<AutoForm
+  schema={schema}
+  onSubmit={handleSubmit}
+  provider={ZodProvider}
+/>
+```
+
+### Reusable Sub-Components
+
+Create sub-components in the same file when logic repeats:
+
+```typescript
+export function FeatureComponent() {
+  return (
+    <div>
+      <FeatureHeader />
+      <FeatureContent />
+    </div>
+  );
+}
+
+// Colocated sub-components
+function FeatureHeader() { /* ... */ }
+function FeatureContent() { /* ... */ }
+```
+
+## Testing Best Practices
+
+**File naming:**
+
+- `.test.ts` for utilities and pure functions (unit tests)
+- `.test.tsx` for React components (integration tests)
+
+**Mock location:**
+
+- Use pre-configured mocks from `src/test-utils/`
+- Mock external dependencies, not internal code
+
+**Render utility:**
+
+- Import from `test-utils/test-utils.tsx` for component tests
+- Includes all providers (React Query, Router, Auth0)
+
+**Async testing:**
+
+- Use `waitFor` for async operations
+- Test loading and error states
+- Verify state updates
+
+## Quick Reference
+
+**Check before installing:**
+
+```bash
+# Check if component exists
+ls src/components/redpanda-ui/components/
+```
+
+**Multi-component install:**
+
+```bash
+yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r \
+  button card dialog form input label select
+```
+
+**After package install:**
+
+```bash
+bun i --yarn  # ALWAYS run this
+```
+
+**Testing shortcuts:**
+
+- Unit test: Pure function? Use `.test.ts`
+- Integration test: React component? Use `.test.tsx`
+- Mock external: Add to `src/test-utils/`
+- Custom render: Use `test-utils/test-utils.tsx`
+
+## Output
+
+After completing work:
+
+1. Confirm all validation steps passed
+2. Summarize what was built
+3. Note any runtime checks needed in browser
+4. Mention test coverage if relevant
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
index 4c01b1b37..c3b305307 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
@@ -6,9 +6,11 @@ import { InlineCode, Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { CheckIcon, Waypoints } from 'lucide-react';
 import { AnimatePresence, type MotionProps, motion } from 'motion/react';
+import { ComponentStatus } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 
 import { ConnectorLogo } from './connector-logo';
 import type { ConnectComponentSpec } from '../types/schema';
+import { componentStatusToString } from '../utils/schema';
 
 const logoStyle = {
   height: '24px',
@@ -67,9 +69,9 @@ export const ConnectTile = ({
         <div className="flex flex-col gap-1">
           <InlineCode className="truncate bg-background px-0 py-0 font-semibold text-md">{component.name}</InlineCode>
           <span>
-            {component.status && component.status !== 'stable' && component.name !== 'redpanda' && (
+            {component.status && component.status !== ComponentStatus.STABLE && component.name !== 'redpanda' && (
               <Badge size="sm" variant="gray">
-                {component.status}
+                {componentStatusToString(component.status)}
               </Badge>
             )}
           </span>
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 9abde34a0..61dc3ed00 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -19,13 +19,14 @@ import { SearchIcon } from 'lucide-react';
 import type { MotionProps } from 'motion/react';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useListComponentsQuery } from 'react-query/api/connect';
 
 import { ConnectTile } from './connect-tile';
 import type { ConnectComponentSpec, ConnectComponentType, ExtendedConnectComponentSpec } from '../types/schema';
 import type { BaseStepRef } from '../types/wizard';
 import { type ConnectTilesListFormData, connectTilesListFormSchema } from '../types/wizard';
 import { getAllCategories } from '../utils/categories';
-import { getBuiltInComponents } from '../utils/schema';
+import { parseSchema } from '../utils/schema';
 
 const PRIORITY_COMPONENTS = [
   'redpanda',
@@ -185,9 +186,14 @@ export const ConnectTiles = memo(
         defaultValues,
       });
 
+      const { data: componentListResponse } = useListComponentsQuery();
+      const builtInComponents = useMemo(
+        () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
+        [componentListResponse]
+      );
       const allComponents = useMemo(
-        () => [...getBuiltInComponents(), ...(additionalComponents || [])],
-        [additionalComponents]
+        () => [...builtInComponents, ...(additionalComponents || [])],
+        [builtInComponents, additionalComponents]
       );
 
       const categories = useMemo(
diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index cc72d8208..6f021b230 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -7,6 +7,7 @@ import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { runInAction } from 'mobx';
 import { AnimatePresence } from 'motion/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useListComponentsQuery } from 'react-query/api/connect';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   useOnboardingTopicDataStore,
@@ -32,6 +33,7 @@ import {
 } from '../types/constants';
 import type { ExtendedConnectComponentSpec } from '../types/schema';
 import type { AddTopicFormData, BaseStepRef, ConnectTilesListFormData, UserStepRef } from '../types/wizard';
+import { parseSchema } from '../utils/schema';
 import { handleStepResult, regenerateYamlForTopicUserComponents } from '../utils/wizard';
 import { getConnectTemplate } from '../utils/yaml';
 
@@ -48,7 +50,14 @@ export const ConnectOnboardingWizard = ({
     {
       name: 'custom',
       type: 'custom',
-      plugin: false,
+      status: 0,
+      summary: '',
+      description: '',
+      categories: [],
+      version: '',
+      examples: [],
+      footnotes: '',
+      $typeName: 'redpanda.api.dataplane.v1.ComponentSpec',
     },
   ],
   onChange,
@@ -56,6 +65,12 @@ export const ConnectOnboardingWizard = ({
 }: ConnectOnboardingWizardProps = {}) => {
   const navigate = useNavigate();
 
+  const { data: componentListResponse } = useListComponentsQuery();
+  const components = useMemo(
+    () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
+    [componentListResponse]
+  );
+
   const persistedInputConnectionName = useOnboardingWizardDataStore(useShallow((state) => state.input?.connectionName));
   const persistedOutputConnectionName = useOnboardingWizardDataStore(
     useShallow((state) => state.output?.connectionName)
@@ -159,6 +174,7 @@ export const ConnectOnboardingWizard = ({
           const yamlContent = getConnectTemplate({
             connectionName,
             connectionType,
+            components,
             showOptionalFields: false,
             existingYaml: useOnboardingYamlContentStore.getState().yamlContent,
           });
@@ -208,6 +224,7 @@ export const ConnectOnboardingWizard = ({
           const yamlContent = getConnectTemplate({
             connectionName,
             connectionType,
+            components,
             showOptionalFields: false,
             existingYaml: useOnboardingYamlContentStore.getState().yamlContent,
           });
@@ -253,7 +270,7 @@ export const ConnectOnboardingWizard = ({
           const result = await addTopicStepRef.current?.triggerSubmit();
           if (result?.success && result.data) {
             setTopicData({ topicName: result.data.topicName });
-            regenerateYamlForTopicUserComponents();
+            regenerateYamlForTopicUserComponents(components);
           }
           handleStepResult(result, methods.next);
         } finally {
@@ -271,7 +288,7 @@ export const ConnectOnboardingWizard = ({
               saslMechanism: result.data.saslMechanism,
               consumerGroup: result.data.consumerGroup || '',
             });
-            regenerateYamlForTopicUserComponents();
+            regenerateYamlForTopicUserComponents(components);
             methods.next();
           }
         } finally {
diff --git a/frontend/src/components/pages/rp-connect/pipelines-create.tsx b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
index 8b3877c9e..5f2fe20f0 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-create.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
@@ -36,6 +36,7 @@ import { observer } from 'mobx-react';
 import type { editor, IDisposable, languages } from 'monaco-editor';
 import { PipelineCreateSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import React, { type Dispatch, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
+import { useListComponentsQuery } from 'react-query/api/connect';
 import { useListSecretsQuery } from 'react-query/api/secret';
 import { Link, useSearchParams } from 'react-router-dom';
 import {
@@ -50,6 +51,7 @@ import { SecretsQuickAdd } from './secrets/secrets-quick-add';
 import { cpuToTasks, MAX_TASKS, MIN_TASKS, tasksToCPU } from './tasks';
 import { getContextualVariableSyntax, REDPANDA_CONTEXTUAL_VARIABLES } from './types/constants';
 import type { ConnectComponentType } from './types/schema';
+import { parseSchema } from './utils/schema';
 import { getConnectTemplate } from './utils/yaml';
 import type { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
 import { appGlobal } from '../../../state/app-global';
@@ -415,6 +417,11 @@ export const PipelineEditor = observer(
     const [searchParams] = useSearchParams();
     const isServerlessMode = searchParams.get('serverless') === 'true';
 
+    const { data: componentListResponse } = useListComponentsQuery();
+    const components = useMemo(
+      () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
+      [componentListResponse]
+    );
     const { data: secretsData, refetch: refetchSecrets } = useListSecretsQuery();
     const existingSecrets = useMemo(() => {
       if (!secretsData?.secrets) {
@@ -443,6 +450,7 @@ export const PipelineEditor = observer(
       const mergedYaml = getConnectTemplate({
         connectionName,
         connectionType,
+        components,
         showOptionalFields: false,
         existingYaml: currentValue,
       });
@@ -489,6 +497,7 @@ export const PipelineEditor = observer(
           getConnectTemplate({
             connectionName: inputData.connectionName,
             connectionType: inputData.connectionType,
+            components,
             showOptionalFields: false,
             existingYaml: yamlContent,
           }) || yamlContent;
@@ -499,6 +508,7 @@ export const PipelineEditor = observer(
             getConnectTemplate({
               connectionName: outputData.connectionName,
               connectionType: outputData.connectionType,
+              components,
               showOptionalFields: false,
               existingYaml: yamlContent,
             }) || yamlContent;
diff --git a/frontend/src/components/pages/rp-connect/types/constants.ts b/frontend/src/components/pages/rp-connect/types/constants.ts
index 60d0a6ec8..9c1bfc65f 100644
--- a/frontend/src/components/pages/rp-connect/types/constants.ts
+++ b/frontend/src/components/pages/rp-connect/types/constants.ts
@@ -60,59 +60,6 @@ export const REDPANDA_CONTEXTUAL_VARIABLES = {
   },
 } as const;
 
-// temporary until we get backend support to filter out managed components
-// currently query selecting components that are visible using this filter:
-// @link https://docs.redpanda.com/redpanda-connect/components/about/?type=processor%2Cinput%2Coutput%2Cscanner%2Cmetric%2Ccache%2Ctracer%2Crate_limit%2Cbuffer&support=certified%2Ccommunity&cloud=no&enterprise=yes%2Cno
-export const MANAGED_ONLY_CONNECT_COMPONENTS = [
-  'amqp_1',
-  'awk',
-  'aws_cloudwatch',
-  'beanstalkd',
-  'cassandra',
-  'cockroachdb_changefeed',
-  'command',
-  'couchbase',
-  'crash',
-  'cypher',
-  'discord',
-  'dynamic',
-  'file',
-  'grok',
-  'hdfs',
-  'influxdb',
-  'jaeger',
-  'javascript',
-  'json_api',
-  'logger',
-  'msgpack',
-  'nanomsg',
-  'nats_stream',
-  'nsq',
-  'ockam_kafka',
-  'ollama_chat',
-  'ollama_embeddings',
-  'ollama_moderation',
-  'open_telemetry_collector',
-  'parquet',
-  'protobuf',
-  'pulsar',
-  'pusher',
-  'redpanda_data_transform',
-  'sentry_capture',
-  'socket',
-  'socket_server',
-  'sqlite',
-  'statsd',
-  'stdin',
-  'stdout',
-  'subprocess',
-  'tigerbeetle_cdc',
-  'twitter_search',
-  'wasm',
-  'websocket',
-  'zmq4',
-];
-
 export const getContextualVariableSyntax = (name: ContextualVariableName): string => `\${${name}}`;
 
 export type ContextualVariableName = keyof typeof REDPANDA_CONTEXTUAL_VARIABLES;
diff --git a/frontend/src/components/pages/rp-connect/types/schema.ts b/frontend/src/components/pages/rp-connect/types/schema.ts
index ee1f254a8..555388c80 100644
--- a/frontend/src/components/pages/rp-connect/types/schema.ts
+++ b/frontend/src/components/pages/rp-connect/types/schema.ts
@@ -1,81 +1,11 @@
-import benthosSchemaFull from '../../../../assets/rp-connect-schema-full.json' with { type: 'json' };
+import type { ComponentSpec, ComponentStatus, FieldSpec } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 
-export type BenthosSchemaFull = typeof benthosSchemaFull;
-
-export type BloblangFunctionSpec = NonNullable<BenthosSchemaFull['bloblang-functions']>[number];
-export type BloblangMethodSpec = NonNullable<BenthosSchemaFull['bloblang-methods']>[number];
-
-// RawFieldSpec needs manual definition since it's a recursive structure with many optional properties
-// that TypeScript infers too narrowly from the JSON data
-export interface RawFieldSpec {
-  name?: string;
-  type?: string;
-  kind?: string;
-  description?: string;
-  is_advanced?: boolean;
-  is_deprecated?: boolean;
-  is_optional?: boolean;
-  is_secret?: boolean;
-  default?: unknown;
-  interpolated?: boolean;
-  bloblang?: boolean;
-  examples?: unknown[];
-  annotated_options?: [string, string][];
-  options?: string[];
+// RawFieldSpec matches proto FieldSpec structure
+export interface RawFieldSpec extends Omit<FieldSpec, 'children'> {
+  comment?: string; // Keep for internal use (YAML generation)
   children?: RawFieldSpec[];
-  version?: string;
-  linter?: string;
-  scrubber?: string;
-  comment?: string; // Schema-derived comment for YAML generation
-}
-
-interface ConnectAnnotatedExample {
-  title: string;
-  summary: string;
-  config: string;
-}
-
-// RawComponentSpec manually defined to include all properties from all component types
-export interface RawComponentSpec {
-  name: string;
-  type: string;
-  status?: string;
-  support_level?: string;
-  plugin: boolean;
-  summary?: string;
-  description?: string;
-  categories?: string[] | null;
-  footnotes?: string;
-  examples?: ConnectAnnotatedExample[];
-  config?: RawFieldSpec;
-  version?: string;
 }
 
-export type BloblangParams = BloblangFunctionSpec['params'];
-export type BloblangParam = NonNullable<BloblangParams['named']>[number];
-export type MethodCatSpec = NonNullable<BloblangMethodSpec['categories']>[number];
-export type ExampleSpec = NonNullable<BloblangFunctionSpec['examples']>[number];
-
-// Represents the stability status of a Benthos component or feature.
-export const CONNECT_COMPONENT_STATUS = [
-  // The component/feature is considered stable and recommended for production use.
-  // Breaking changes are highly unlikely.
-  'stable',
-  // The component/feature is in beta. It's largely complete and functional
-  // but may have some bugs or undergo minor breaking changes before becoming stable.
-  'beta',
-  // The component/feature is experimental. It's subject to significant changes
-  // or removal in future versions. Use with caution and expect potential instability or breaking changes.
-  'experimental',
-  // The component/feature is deprecated and will be removed in a future version.
-  // It should be avoided in new configurations and migrated away from in existing ones.
-  'deprecated',
-] as const;
-
-export type KnownConnectComponentStatus = (typeof CONNECT_COMPONENT_STATUS)[number];
-
-export type ConnectComponentStatus = (typeof CONNECT_COMPONENT_STATUS)[number] | (string & {});
-
 export const CONNECT_COMPONENT_TYPE = [
   // Buffers messages, often used between inputs/outputs and processing stages
   // to decouple components, absorb temporary load spikes, or ensure message persistence.
@@ -113,7 +43,7 @@ export const CONNECT_COMPONENT_TYPE = [
   'tracer',
   // used exclusively for skipping the wizard
   'custom',
-] as const satisfies readonly RawComponentSpec['type'][];
+] as const satisfies readonly ComponentSpec['type'][];
 
 export type ConnectComponentType = (typeof CONNECT_COMPONENT_TYPE)[number];
 
@@ -176,20 +106,10 @@ export const CONNECT_VALUE_TYPE = [
 
 export type ConnectValueType = (typeof CONNECT_VALUE_TYPE)[number] | (string & {});
 
-export interface ConnectComponentSpec extends Omit<RawComponentSpec, 'type' | 'status' | 'config'> {
-  name: string;
+export interface ConnectComponentSpec extends Omit<ComponentSpec, 'type' | 'status'> {
   type: ConnectComponentType;
-  status?: ConnectComponentStatus;
-  support_level?: string;
-  plugin: boolean;
-  summary?: string;
-  description?: string;
-  categories?: string[] | null;
-  footnotes?: string;
-  examples?: ConnectAnnotatedExample[];
-  config?: RawFieldSpec;
-  version?: string;
-  logoUrl?: string;
+  status: ComponentStatus;
+  logoUrl?: string; // UI-specific field
 }
 
 /**
diff --git a/frontend/src/components/pages/rp-connect/utils/categories.ts b/frontend/src/components/pages/rp-connect/utils/categories.ts
index 1590b244c..d88cd6524 100644
--- a/frontend/src/components/pages/rp-connect/utils/categories.ts
+++ b/frontend/src/components/pages/rp-connect/utils/categories.ts
@@ -1,4 +1,4 @@
-import type { ConnectComponentType, ExtendedConnectComponentSpec, RawComponentSpec } from '../types/schema';
+import type { ConnectComponentSpec, ConnectComponentType, ExtendedConnectComponentSpec } from '../types/schema';
 
 export interface ConnectNodeCategory {
   id: string;
@@ -47,7 +47,7 @@ export const getCategoryDisplayName = (category: string): string =>
   displayNames[category] || category.charAt(0).toUpperCase() + category.slice(1).replace(/_/g, ' ');
 
 export const getAllCategories = (
-  components: (RawComponentSpec | ExtendedConnectComponentSpec)[],
+  components: (ConnectComponentSpec | ExtendedConnectComponentSpec)[],
   componentType?: ConnectComponentType[]
 ): ConnectNodeCategory[] => {
   const categorySet = new Set<string>();
diff --git a/frontend/src/components/pages/rp-connect/utils/schema.ts b/frontend/src/components/pages/rp-connect/utils/schema.ts
index 9db9359cc..dcd7568c5 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.ts
+++ b/frontend/src/components/pages/rp-connect/utils/schema.ts
@@ -1,152 +1,82 @@
+import {
+  type ComponentList,
+  type ComponentSpec,
+  ComponentStatus,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
 import { isConsumerGroupField, isPasswordField, isSchemaRegistryUrlField, isTopicField, isUserField } from './wizard';
-import benthosSchemaFull from '../../../../assets/rp-connect-schema-full.json' with { type: 'json' };
 import {
   CRITICAL_CONNECTION_FIELDS,
   convertToScreamingSnakeCase,
   getContextualVariableSyntax,
   getSecretSyntax,
-  MANAGED_ONLY_CONNECT_COMPONENTS,
   NON_CRITICAL_CONFIG_OBJECTS,
   REDPANDA_TOPIC_AND_USER_COMPONENTS,
 } from '../types/constants';
-import {
-  type BenthosSchemaFull,
-  CONNECT_COMPONENT_TYPE,
-  type ConnectComponentSpec,
-  type ConnectComponentType,
-  type ConnectConfigKey,
-  type ConnectConfigObject,
-  type RawComponentSpec,
-  type RawFieldSpec,
+import type {
+  ConnectComponentSpec,
+  ConnectComponentType,
+  ConnectConfigKey,
+  ConnectConfigObject,
+  RawFieldSpec,
 } from '../types/schema';
 
-const convertFieldSpecFromFullSchema = (fieldSpec: RawFieldSpec): RawFieldSpec => {
-  const spec: RawFieldSpec = {
-    name: fieldSpec.name || '',
-    type: fieldSpec.type || 'unknown',
-    kind: fieldSpec.kind || 'scalar',
-    description: fieldSpec.description,
-    is_advanced: fieldSpec.is_advanced,
-    is_deprecated: fieldSpec.is_deprecated,
-    is_optional: fieldSpec.is_optional,
-    is_secret: fieldSpec.is_secret,
-    default: fieldSpec.default,
-    interpolated: fieldSpec.interpolated,
-    bloblang: fieldSpec.bloblang,
-    examples: fieldSpec.examples,
-    annotated_options: fieldSpec.annotated_options,
-    options: fieldSpec.options,
-    version: fieldSpec.version,
-    linter: fieldSpec.linter,
-    scrubber: fieldSpec.scrubber,
-  };
-
-  if (fieldSpec.children && Array.isArray(fieldSpec.children)) {
-    spec.children = fieldSpec.children.map(convertFieldSpecFromFullSchema);
-  }
-
-  return spec;
-};
-
-const createComponentConfigSpec = (component: RawComponentSpec): RawFieldSpec => {
-  const config = component.config;
-
-  const configSpec: RawFieldSpec = {
-    name: component.name,
-    type: 'object',
-    kind: 'scalar',
-    children: [],
-  };
-
-  if (config?.children && Array.isArray(config.children)) {
-    configSpec.children = config.children.map(convertFieldSpecFromFullSchema);
+// Helper to convert proto ComponentStatus enum to string
+export function componentStatusToString(status: ComponentStatus): string {
+  switch (status) {
+    case ComponentStatus.STABLE:
+      return 'stable';
+    case ComponentStatus.BETA:
+      return 'beta';
+    case ComponentStatus.EXPERIMENTAL:
+      return 'experimental';
+    case ComponentStatus.DEPRECATED:
+      return 'deprecated';
+    case ComponentStatus.UNSPECIFIED:
+      return 'stable';
+    default:
+      return 'stable';
   }
-
-  return configSpec;
-};
-
-const typeToSchemaKey: Record<Exclude<ConnectComponentType, 'custom'>, keyof BenthosSchemaFull> = {
-  input: 'inputs',
-  output: 'outputs',
-  processor: 'processors',
-  cache: 'caches',
-  buffer: 'buffers',
-  rate_limit: 'rate-limits',
-  scanner: 'scanners',
-  metrics: 'metrics',
-  tracer: 'tracers',
-};
-
-const typeToYamlConfigKey: Record<Exclude<ConnectComponentType, 'custom'>, ConnectConfigKey> = {
-  input: 'input',
-  output: 'output',
-  processor: 'pipeline',
-  cache: 'cache_resources',
-  buffer: 'buffer',
-  rate_limit: 'rate_limit_resources',
-  scanner: 'scanner',
-  metrics: 'metrics',
-  tracer: 'tracer',
-};
+}
 
 /**
- * Phase 0: Parses benthos schema and returns all components with metadata
- * @returns all components with metadata
+ * Consolidated mapping for component types across different contexts:
+ * - listKey: Field name in ComponentList proto (plural)
+ * - yamlKey: Key used in YAML config structure
  */
-const parseSchema = () => {
-  const schemaData = benthosSchemaFull;
-  const allComponents: ConnectComponentSpec[] = [];
-
-  // Parse each component type from flat arrays
-  for (const componentType of CONNECT_COMPONENT_TYPE) {
-    if (componentType === 'custom') {
-      continue;
-    }
-    const schemaKey = typeToSchemaKey[componentType];
-    const componentsArray = schemaData[schemaKey] as RawComponentSpec[] | undefined;
-
-    if (!(componentsArray && Array.isArray(componentsArray))) {
-      continue;
-    }
-
-    for (const comp of componentsArray) {
-      if (MANAGED_ONLY_CONNECT_COMPONENTS.includes(comp.name)) {
-        continue;
-      }
-      const componentSpec: ConnectComponentSpec = {
-        name: comp.name,
-        type: comp.type as Exclude<ConnectComponentType, 'custom'>,
-        status: comp.status || 'stable',
-        plugin: comp.plugin,
-        summary: comp.summary,
-        description: comp.description,
-        categories: comp.categories || undefined,
-        config: createComponentConfigSpec(comp),
-        version: comp.version || '1.0.0',
-      };
-
-      allComponents.push(componentSpec);
-    }
-  }
-
-  return allComponents;
+const COMPONENT_TYPE_MAPPINGS: Record<
+  Exclude<ConnectComponentType, 'custom'>,
+  { listKey: keyof ComponentList; yamlKey: ConnectConfigKey }
+> = {
+  buffer: { listKey: 'buffers', yamlKey: 'buffer' },
+  cache: { listKey: 'caches', yamlKey: 'cache_resources' },
+  input: { listKey: 'inputs', yamlKey: 'input' },
+  output: { listKey: 'outputs', yamlKey: 'output' },
+  processor: { listKey: 'processors', yamlKey: 'pipeline' },
+  rate_limit: { listKey: 'rateLimits', yamlKey: 'rate_limit_resources' },
+  metrics: { listKey: 'metrics', yamlKey: 'metrics' },
+  tracer: { listKey: 'tracers', yamlKey: 'tracer' },
+  scanner: { listKey: 'scanners', yamlKey: 'scanner' },
 };
 
-// Singleton cache for parsed components (lazy-loaded to avoid circular dependencies)
-let _builtInComponentsCache: ConnectComponentSpec[] | undefined;
+// Derived mapping for backward compatibility
+const typeToYamlConfigKey: Record<Exclude<ConnectComponentType, 'custom'>, ConnectConfigKey> = Object.fromEntries(
+  Object.entries(COMPONENT_TYPE_MAPPINGS).map(([type, { yamlKey }]) => [type, yamlKey])
+) as Record<Exclude<ConnectComponentType, 'custom'>, ConnectConfigKey>;
 
 /**
- * Gets built-in components, parsing schema on first call and caching result
- * This lazy initialization prevents circular dependency issues during module loading
+ * Parses ComponentList from API response into ConnectComponentSpec array.
+ * Converts proto ComponentSpec to strongly-typed ConnectComponentSpec by overriding the type field.
  */
-export const getBuiltInComponents = (): ConnectComponentSpec[] => {
-  if (!_builtInComponentsCache) {
-    _builtInComponentsCache = parseSchema();
-  }
-  return _builtInComponentsCache;
-};
+export const parseSchema = (componentList: ComponentList): ConnectComponentSpec[] =>
+  Object.entries(COMPONENT_TYPE_MAPPINGS).flatMap(([componentType, { listKey }]) =>
+    ((componentList[listKey] as ComponentSpec[]) || []).map((comp) => ({
+      ...comp,
+      type: componentType as Exclude<ConnectComponentType, 'custom'>,
+      config: comp.config,
+    }))
+  );
 
 const generateRedpandaTopLevelConfig = (): Record<string, unknown> => {
   const userData = onboardingWizardStore.getUserData();
@@ -359,44 +289,34 @@ function shouldHideField(params: {
 }): boolean {
   const { spec, showOptionalFields, showAdvancedFields, componentName } = params;
 
+  // Critical fields always visible
   const isRedpandaComponent = componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName);
-  const isCriticalRedpandaField = isRedpandaComponent && spec.name && CRITICAL_CONNECTION_FIELDS.has(spec.name);
-  const isExplicitlyRequired = spec.is_optional === false;
-  const isExplicitlyOptional = spec.is_optional === true;
-  const isImplicitlyRequired = spec.is_optional === undefined && spec.default === undefined;
-  const isExplicitlyAdvanced = spec.is_advanced === true;
-  const isNonCriticalRedpandaField = isRedpandaComponent && spec.name && NON_CRITICAL_CONFIG_OBJECTS.has(spec.name);
-
-  if (isCriticalRedpandaField) {
-    return false;
-  }
-
-  // this is a really wierd edge case where the schema doesn't match the docs, and this is the only consistent way to show "common" fields
-  if (isExplicitlyRequired || isImplicitlyRequired || !isExplicitlyAdvanced) {
-    return false;
-  }
-
-  if (showAdvancedFields && isExplicitlyAdvanced) {
+  const isCriticalField = isRedpandaComponent && spec.name && CRITICAL_CONNECTION_FIELDS.has(spec.name);
+  if (isCriticalField) {
     return false;
   }
 
-  if (showOptionalFields && isExplicitlyOptional) {
-    return false;
-  }
+  const isAdvanced = spec.advanced === true;
+  const isOptional = spec.optional === true;
 
-  if (isExplicitlyAdvanced) {
+  // Hide advanced fields unless explicitly requested
+  if (isAdvanced && !showAdvancedFields) {
     return true;
   }
 
-  if (isExplicitlyOptional) {
+  // Hide optional fields unless explicitly requested
+  if (isOptional && !showOptionalFields) {
     return true;
   }
 
-  if (isNonCriticalRedpandaField) {
+  // Hide non-critical config objects for Redpanda components
+  const isNonCriticalConfigObject = isRedpandaComponent && spec.name && NON_CRITICAL_CONFIG_OBJECTS.has(spec.name);
+  if (isNonCriticalConfigObject && !showOptionalFields) {
     return true;
   }
 
-  return true;
+  // Show everything else (required, non-advanced, non-optional fields)
+  return false;
 }
 
 function generateObjectValue(
@@ -409,7 +329,7 @@ function generateObjectValue(
     return {};
   }
 
-  const obj = {} as Record<string, unknown>;
+  const obj: Record<string, unknown> = {};
 
   for (const child of spec.children) {
     const childValue = generateDefaultValue(child, {
@@ -437,7 +357,7 @@ function generateArrayValue(params: {
   // Special case: SASL arrays for redpanda/kafka_franz components
   const isSaslArray = spec.name?.toLowerCase() === 'sasl';
   if (isSaslArray && spec.children && componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName)) {
-    const saslObj = {} as Record<string, unknown>;
+    const saslObj: Record<string, unknown> = {};
 
     for (const child of spec.children) {
       const childValue = generateDefaultValue(child, {
@@ -470,8 +390,10 @@ function generateScalarValue(spec: RawFieldSpec, options: GenerateDefaultValueOp
       return 0;
     case 'bool':
       return false;
-    case 'object':
-      return generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName) ?? {};
+    case 'object': {
+      const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
+      return obj && Object.keys(obj).length > 0 ? obj : undefined;
+    }
     default:
       return '';
   }
@@ -484,24 +406,41 @@ interface GenerateDefaultValueOptions {
   parentName?: string;
 }
 
-export function generateDefaultValue(
-  spec: RawFieldSpec,
-  options?: GenerateDefaultValueOptions
-): RawFieldSpec['default'] {
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Complex field generation logic with many conditions
+export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefaultValueOptions): unknown {
   const { showOptionalFields, showAdvancedFields, componentName, parentName } = options || {};
 
   const isCriticalField = spec.name ? CRITICAL_CONNECTION_FIELDS.has(spec.name) : false;
-  const isExplicitlyRequired = spec.is_optional === false;
-  const isExplicitlyOptional = spec.is_optional === true;
-  const isImplicitlyRequired = spec.is_optional === undefined && spec.default === undefined;
-  const hasNonEmptyDefault = spec.default !== undefined && spec.default !== '';
+  const isExplicitlyRequired = spec.optional === false;
+  const isExplicitlyOptional = spec.optional === true;
+  const isImplicitlyRequired = spec.optional === undefined && spec.defaultValue === undefined;
+  const hasNonEmptyDefault = spec.defaultValue !== undefined && spec.defaultValue !== '';
+
+  const shouldHide = shouldHideField({
+    spec,
+    showOptionalFields: !!showOptionalFields,
+    showAdvancedFields: !!showAdvancedFields,
+    componentName,
+  });
+
+  // biome-ignore lint/suspicious/noConsole: Debug logging for field value generation
+  console.log('DEBUG [generateDefaultValue] Processing field:', {
+    fieldName: spec.name,
+    fieldType: spec.type,
+    fieldKind: spec.kind,
+    hasDefault: !!spec.defaultValue,
+    isOptional: spec.optional,
+    isAdvanced: spec.advanced,
+    shouldHide,
+    isCriticalField,
+  });
 
   if (hasNonEmptyDefault && isExplicitlyRequired) {
-    spec.comment = `Required (default: ${JSON.stringify(spec.default)})`;
+    spec.comment = `Required (default: ${JSON.stringify(spec.defaultValue)})`;
   } else if ((isExplicitlyRequired || isImplicitlyRequired) && spec.name !== 'seed_brokers') {
     spec.comment = 'Required';
   } else if (hasNonEmptyDefault && isExplicitlyOptional) {
-    spec.comment = `Optional (default: ${JSON.stringify(spec.default)})`;
+    spec.comment = `Optional (default: ${JSON.stringify(spec.defaultValue)})`;
   } else if (isExplicitlyOptional || isCriticalField) {
     spec.comment = 'Optional';
   } else if (spec.name === 'seed_brokers') {
@@ -529,38 +468,41 @@ export function generateDefaultValue(
   }
 
   // Check if field should be hidden
-  if (
-    shouldHideField({
-      spec,
-      showOptionalFields: showOptionalFields ?? false,
-      showAdvancedFields: showAdvancedFields ?? false,
-      componentName,
-    })
-  ) {
+  if (shouldHide) {
     return undefined;
   }
 
-  // Return default if available
-  if (spec.default !== undefined) {
-    return spec.default;
+  // Return default if available, but skip empty string defaults for object types
+  // (empty string is a placeholder, we want to generate the actual object from children)
+  if (spec.defaultValue !== undefined && !(spec.defaultValue === '' && spec.type === 'object')) {
+    return spec.defaultValue;
   }
 
   // Generate value based on field kind
+  let generatedValue: unknown;
   switch (spec.kind) {
     case 'scalar':
-      return generateScalarValue(spec, options || {});
-    case 'array':
-      return generateArrayValue({
+      generatedValue = generateScalarValue(spec, options || {});
+      break;
+    case 'array': {
+      const arrayValue = generateArrayValue({
         spec,
         showOptionalFields: showOptionalFields ?? false,
         showAdvancedFields: showAdvancedFields ?? false,
         componentName,
       });
+      generatedValue = arrayValue && arrayValue.length > 0 ? arrayValue : undefined;
+      break;
+    }
     case '2darray':
-      return [];
+      generatedValue = [];
+      break;
     case 'map':
-      return {};
+      generatedValue = {};
+      break;
     default:
-      return undefined;
+      generatedValue = undefined;
   }
+
+  return generatedValue;
 }
diff --git a/frontend/src/components/pages/rp-connect/utils/wizard.ts b/frontend/src/components/pages/rp-connect/utils/wizard.ts
index 162b726b0..aa229ee2d 100644
--- a/frontend/src/components/pages/rp-connect/utils/wizard.ts
+++ b/frontend/src/components/pages/rp-connect/utils/wizard.ts
@@ -7,7 +7,7 @@ import {
 
 import { getConnectTemplate } from './yaml';
 import { REDPANDA_TOPIC_AND_USER_COMPONENTS } from '../types/constants';
-import type { RawFieldSpec } from '../types/schema';
+import type { ConnectComponentSpec, RawFieldSpec } from '../types/schema';
 import type { StepSubmissionResult } from '../types/wizard';
 
 export const handleStepResult = <T>(result: StepSubmissionResult<T> | undefined, onSuccess: () => void): boolean => {
@@ -48,7 +48,7 @@ export const handleStepResult = <T>(result: StepSubmissionResult<T> | undefined,
  * Regenerates YAML templates for components that require topic/user data
  * Used at ADD_TOPIC and ADD_USER steps to update YAML with new context
  */
-export const regenerateYamlForTopicUserComponents = (): void => {
+export const regenerateYamlForTopicUserComponents = (components: ConnectComponentSpec[]): void => {
   const { setWizardData: _, ...wizardData } = useOnboardingWizardDataStore.getState();
 
   const inputNeedsTopicUser =
@@ -64,6 +64,7 @@ export const regenerateYamlForTopicUserComponents = (): void => {
         getConnectTemplate({
           connectionName: wizardData.input.connectionName,
           connectionType: wizardData.input.connectionType,
+          components,
           showOptionalFields: false,
           existingYaml: yamlContent,
         }) || yamlContent;
@@ -74,6 +75,7 @@ export const regenerateYamlForTopicUserComponents = (): void => {
         getConnectTemplate({
           connectionName: wizardData.output.connectionName,
           connectionType: wizardData.output.connectionType,
+          components,
           showOptionalFields: false,
           existingYaml: yamlContent,
         }) || yamlContent;
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.ts b/frontend/src/components/pages/rp-connect/utils/yaml.ts
index dee723255..f0ead6c91 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.ts
@@ -1,7 +1,7 @@
 import { toast } from 'sonner';
 import { Document, parseDocument, stringify as yamlStringify } from 'yaml';
 
-import { getBuiltInComponents, schemaToConfig } from './schema';
+import { schemaToConfig } from './schema';
 // import { HANDLED_ARRAY_MERGE_PATHS } from '../types/constants';
 import type { ConnectComponentSpec, ConnectConfigObject, RawFieldSpec } from '../types/schema';
 
@@ -436,21 +436,22 @@ export const configToYaml = (
 export const getConnectTemplate = ({
   connectionName,
   connectionType,
+  components,
   showOptionalFields,
   showAdvancedFields,
   existingYaml,
 }: {
   connectionName: string;
   connectionType: string;
+  components: ConnectComponentSpec[];
   showOptionalFields?: boolean;
   showAdvancedFields?: boolean;
   existingYaml?: string;
 }) => {
   // Phase 0: Find the component spec for the selected connectionName and connectionType
-  const builtInComponents = getBuiltInComponents();
   const componentSpec =
     connectionName && connectionType
-      ? builtInComponents.find((comp) => comp.type === connectionType && comp.name === connectionName)
+      ? components.find((comp) => comp.type === connectionType && comp.name === connectionName)
       : undefined;
 
   if (!componentSpec) {
diff --git a/frontend/src/react-query/api/connect.tsx b/frontend/src/react-query/api/connect.tsx
new file mode 100644
index 000000000..d2804fa01
--- /dev/null
+++ b/frontend/src/react-query/api/connect.tsx
@@ -0,0 +1,43 @@
+import { create } from '@bufbuild/protobuf';
+import type { GenMessage } from '@bufbuild/protobuf/codegenv1';
+import { useQuery } from '@connectrpc/connect-query';
+import {
+  LintPipelineConfigRequestSchema,
+  type LintPipelineConfigResponse,
+  ListComponentsRequestSchema,
+  type ListComponentsResponse,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import {
+  lintPipelineConfig,
+  listComponents,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline-PipelineService_connectquery';
+import type { QueryOptions } from 'react-query/react-query.utils';
+
+export const useListComponentsQuery = (
+  options?: QueryOptions<GenMessage<ListComponentsResponse>, ListComponentsResponse>
+) => {
+  const listComponentsRequest = create(ListComponentsRequestSchema, {});
+
+  return useQuery(listComponents, listComponentsRequest, {
+    staleTime: 1000 * 60 * 60, // 1 hour
+    gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    ...options,
+  });
+};
+
+export const useLintPipelineConfigQuery = (
+  configYaml: string,
+  options?: QueryOptions<GenMessage<LintPipelineConfigResponse>, LintPipelineConfigResponse> & {
+    enabled?: boolean;
+  }
+) => {
+  const request = create(LintPipelineConfigRequestSchema, { configYaml });
+
+  return useQuery(lintPipelineConfig, request, {
+    enabled: options?.enabled && configYaml.length > 0,
+    staleTime: 0,
+    ...options,
+  });
+};

From b26592b82686f8858577424808019cb79fae2e02 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:42:20 -0800
Subject: [PATCH 02/13] feat: new ui and removed enableRpcnTiles flag from
 pipelines-create

---
 .../onboarding/create-pipeline-sidebar.tsx    |  89 ++--
 .../pages/rp-connect/pipeline/details.tsx     | 104 +++++
 .../pages/rp-connect/pipeline/index.tsx       | 415 ++++++++++++++++++
 .../pages/rp-connect/pipeline/list.tsx        |   0
 .../pages/rp-connect/pipeline/toolbar.tsx     | 189 ++++++++
 .../rp-connect/pipeline/use-pipeline-mode.ts  |  33 ++
 .../pages/rp-connect/pipelines-create.tsx     | 286 ++----------
 frontend/src/components/routes.tsx            |  15 +-
 frontend/src/react-query/api/connect.tsx      |   4 +-
 9 files changed, 856 insertions(+), 279 deletions(-)
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/details.tsx
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/index.tsx
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/list.tsx
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts

diff --git a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
index 6686a86e7..e33d0402e 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
@@ -1,39 +1,87 @@
 import { useDisclosure } from '@redpanda-data/ui';
+import { extractSecretReferences, getUniqueSecretNames } from 'components/ui/secret/secret-detection';
 import type { editor } from 'monaco-editor';
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useListSecretsQuery } from 'react-query/api/secret';
+import { useOnboardingWizardDataStore } from 'state/onboarding-wizard-store';
 
 import { AddConnectorDialog } from './add-connector-dialog';
 import { AddConnectorsCard } from './add-connectors-card';
 import { AddContextualVariablesCard } from './add-contextual-variables-card';
 import { AddSecretsCard } from './add-secrets-card';
 import { AddSecretsDialog } from './add-secrets-dialog';
-import type { ConnectComponentType } from '../types/schema';
+import type { ConnectComponentSpec, ConnectComponentType } from '../types/schema';
+import { getConnectTemplate } from '../utils/yaml';
 
 type CreatePipelineSidebarProps = {
   editorInstance: editor.IStandaloneCodeEditor | null;
-  onAddConnector: ((connectionName: string, connectionType: ConnectComponentType) => void) | undefined;
-  detectedSecrets: string[];
-  existingSecrets: string[];
-  onSecretsCreated: () => void;
   editorContent: string;
+  setYamlContent: (yaml: string) => void;
+  components: ConnectComponentSpec[];
 };
 
 export const CreatePipelineSidebar = memo(
-  ({
-    editorInstance,
-    onAddConnector,
-    detectedSecrets,
-    existingSecrets,
-    onSecretsCreated,
-    editorContent,
-  }: CreatePipelineSidebarProps) => {
+  ({ editorInstance, editorContent, setYamlContent, components }: CreatePipelineSidebarProps) => {
     const { isOpen: isAddConnectorOpen, onOpen: openAddConnector, onClose: closeAddConnector } = useDisclosure();
     const [selectedConnector, setSelectedConnector] = useState<ConnectComponentType | undefined>(undefined);
     const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
 
+    // Fetch secrets internally
+    const { data: secretsResponse, refetch: refetchSecrets } = useListSecretsQuery({});
+    const existingSecrets = useMemo(
+      () => (secretsResponse?.secrets ? secretsResponse.secrets.map((s) => s?.id || '') : []),
+      [secretsResponse]
+    );
+
+    const detectedSecrets = useMemo(() => {
+      if (!editorContent) {
+        return [];
+      }
+      const references = extractSecretReferences(editorContent);
+      return getUniqueSecretNames(references);
+    }, [editorContent]);
+
     const hasInput = useMemo(() => editorContent.includes('input:'), [editorContent]);
     const hasOutput = useMemo(() => editorContent.includes('output:'), [editorContent]);
 
+    const handleAddConnector = useCallback(
+      (connectionName: string, connectionType: ConnectComponentType) => {
+        const template = getConnectTemplate({
+          connectionName,
+          connectionType,
+          existingYaml: editorContent,
+          components,
+        });
+
+        if (template) {
+          setYamlContent(template);
+
+          // Sync wizard data to Zustand store
+          const wizardData = useOnboardingWizardDataStore.getState();
+          wizardData.setWizardData({
+            ...wizardData,
+            [connectionType]: {
+              connectionName,
+              connectionType,
+            },
+          });
+        }
+        closeAddConnector();
+      },
+      [editorContent, components, setYamlContent, closeAddConnector]
+    );
+
+    const existingSecretsSet = useMemo(() => new Set(existingSecrets), [existingSecrets]);
+    const missingSecrets = useMemo(
+      () => detectedSecrets.filter((secret) => !existingSecretsSet.has(secret)),
+      [detectedSecrets, existingSecretsSet]
+    );
+
+    const handleSecretsCreated = useCallback(() => {
+      refetchSecrets();
+      setIsSecretsDialogOpen(false);
+    }, [refetchSecrets]);
+
     if (editorInstance === null) {
       return <div className="min-w-[300px]" />;
     }
@@ -43,19 +91,6 @@ export const CreatePipelineSidebar = memo(
       openAddConnector();
     };
 
-    const handleAddConnector = (connectionName: string, connectionType: ConnectComponentType) => {
-      onAddConnector?.(connectionName, connectionType);
-      closeAddConnector();
-    };
-
-    const existingSecretsSet = new Set(existingSecrets);
-    const missingSecrets = detectedSecrets.filter((secret) => !existingSecretsSet.has(secret));
-
-    const handleSecretsCreated = () => {
-      onSecretsCreated();
-      setIsSecretsDialogOpen(false);
-    };
-
     return (
       <div className="flex flex-col gap-4">
         <AddConnectorsCard
diff --git a/frontend/src/components/pages/rp-connect/pipeline/details.tsx b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
new file mode 100644
index 000000000..75bf4e5fa
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/redpanda-ui/components/collapsible';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from 'components/redpanda-ui/components/form';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Slider } from 'components/redpanda-ui/components/slider';
+import { Textarea } from 'components/redpanda-ui/components/textarea';
+import { ChevronDown } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+
+import { MAX_TASKS, MIN_TASKS } from '../tasks';
+
+interface DetailsProps {
+  readonly?: boolean;
+}
+
+export function Details({ readonly = false }: DetailsProps) {
+  const { control } = useFormContext();
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel required>Pipeline Name</FormLabel>
+            <FormControl>
+              <Input {...field} disabled={readonly} placeholder="Enter pipeline name" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <Collapsible>
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md border bg-muted/50 px-4 py-2 font-medium text-sm hover:bg-muted">
+          <span>Advanced Settings</span>
+          <ChevronDown className="h-4 w-4 transition-transform duration-200 [&[data-state=open]]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="mt-4 space-y-4">
+          <FormField
+            control={control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <Textarea
+                    {...field}
+                    disabled={readonly}
+                    placeholder="Optional description for this pipeline"
+                    rows={3}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {!readonly && (
+            <FormField
+              control={control}
+              name="computeUnits"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Compute Units: {field.value}</FormLabel>
+                  <FormControl>
+                    <Slider
+                      disabled={readonly}
+                      max={MAX_TASKS}
+                      min={MIN_TASKS}
+                      onValueChange={(values) => field.onChange(values[0])}
+                      step={1}
+                      value={[field.value]}
+                    />
+                  </FormControl>
+                  <FormDescription>One compute unit = 0.1 CPU and 400 MB memory</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
new file mode 100644
index 000000000..e421933bf
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -0,0 +1,415 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@redpanda-data/ui';
+import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
+import { Form } from 'components/redpanda-ui/components/form';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
+import { YamlEditor } from 'components/ui/yaml/yaml-editor';
+import { useDebounce } from 'hooks/use-debounce';
+import { AlertCircle } from 'lucide-react';
+import type { editor } from 'monaco-editor';
+import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
+import {
+  CreatePipelineRequestSchema,
+  UpdatePipelineRequestSchema,
+} from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
+import {
+  CreatePipelineRequestSchema as CreatePipelineRequestSchemaDataPlane,
+  LintPipelineConfigRequestSchema,
+  PipelineCreateSchema,
+  PipelineUpdateSchema,
+  UpdatePipelineRequestSchema as UpdatePipelineRequestSchemaDataPlane,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useLintPipelineConfigMutation, useListComponentsQuery } from 'react-query/api/connect';
+import { useCreatePipelineMutation, useGetPipelineQuery, useUpdatePipelineMutation } from 'react-query/api/pipeline';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useOnboardingWizardDataStore, useOnboardingYamlContentStore } from 'state/onboarding-wizard-store';
+import { z } from 'zod';
+
+import { Details } from './details';
+import { Toolbar } from './toolbar';
+import { usePipelineMode } from './use-pipeline-mode';
+import { extractLintHintsFromError, formatPipelineError } from '../errors';
+import { CreatePipelineSidebar } from '../onboarding/create-pipeline-sidebar';
+import { cpuToTasks, MIN_TASKS, tasksToCPU } from '../tasks';
+import { parseSchema } from '../utils/schema';
+import { getConnectTemplate } from '../utils/yaml';
+
+const pipelineFormSchema = z.object({
+  name: z.string().min(1, 'Pipeline name is required').max(100, 'Pipeline name must be less than 100 characters'),
+  description: z.string().optional(),
+  computeUnits: z.number().min(MIN_TASKS).int(),
+});
+
+type PipelineFormValues = z.infer<typeof pipelineFormSchema>;
+
+export default function PipelinePage() {
+  const { mode, pipelineId } = usePipelineMode();
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  // Zustand store for wizard persistence (CREATE mode only)
+  const [searchParams] = useSearchParams();
+  const isServerlessMode = searchParams.get('serverless') === 'true';
+  const hasInitializedServerless = useRef(false);
+  const persistedYamlContent = useOnboardingYamlContentStore((state) => state.yamlContent);
+
+  // Form state with validation
+  const form = useForm<PipelineFormValues>({
+    resolver: zodResolver(pipelineFormSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      computeUnits: MIN_TASKS,
+    },
+  });
+
+  const [yamlContent, setYamlContent] = useState('');
+  const [lintHints, setLintHints] = useState<Record<string, LintHint>>({});
+
+  // Editor ref for sidebar integration
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  // Fetch pipeline data in view/edit modes
+  const { data: pipelineResponse, isLoading: isPipelineLoading } = useGetPipelineQuery(
+    { id: pipelineId || '' },
+    {
+      enabled: mode !== 'create' && !!pipelineId,
+    }
+  );
+
+  const pipeline = pipelineResponse?.response?.pipeline;
+
+  // Fetch components for schema
+  const { data: componentListResponse } = useListComponentsQuery();
+  const components = useMemo(
+    () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
+    [componentListResponse]
+  );
+
+  // Mutations - only those used in this component
+  const createMutation = useCreatePipelineMutation();
+  const updateMutation = useUpdatePipelineMutation();
+
+  // Linting
+  const lintMutation = useLintPipelineConfigMutation();
+  const handleLint = async (yaml: string) => {
+    if (!yaml || mode === 'view') {
+      return;
+    }
+
+    try {
+      const response = await lintMutation.mutateAsync(create(LintPipelineConfigRequestSchema, { configYaml: yaml }));
+      const hints: Record<string, LintHint> = {};
+      for (const [idx, hint] of Object.entries(response.lintHints)) {
+        hints[`hint_${idx}`] = hint;
+      }
+      setLintHints(hints);
+    } catch (err) {
+      setLintHints(extractLintHintsFromError(err));
+    }
+  };
+
+  const debouncedLint = useDebounce(handleLint, 500);
+
+  // Zustand store syncing (CREATE mode only)
+  const debouncedSyncToStore = useDebounce(
+    useCallback(
+      (yaml: string) => {
+        if (mode === 'create') {
+          useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent: yaml });
+        }
+      },
+      [mode]
+    ),
+    500
+  );
+
+  // Initialize form data from pipeline (edit/view)
+  useEffect(() => {
+    if (pipeline && mode !== 'create') {
+      form.reset({
+        name: pipeline.displayName,
+        description: pipeline.description || '',
+        computeUnits: cpuToTasks(pipeline.resources?.cpuShares) || MIN_TASKS,
+      });
+      setYamlContent(pipeline.configYaml);
+    }
+  }, [pipeline, mode, form]);
+
+  // Load persisted YAML from Zustand (CREATE mode only)
+  useEffect(() => {
+    if (mode === 'create' && persistedYamlContent) {
+      setYamlContent(persistedYamlContent);
+    }
+  }, [mode, persistedYamlContent]);
+
+  // Serverless mode initialization - generate YAML from wizard data on mount
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Only runs once after hydration, ref prevents re-initialization
+  useEffect(() => {
+    if (mode !== 'create' || !isServerlessMode || hasInitializedServerless.current) {
+      return;
+    }
+
+    const wizardData = useOnboardingWizardDataStore.getState();
+    const inputData = wizardData.input;
+    const outputData = wizardData.output;
+
+    if (inputData?.connectionName && inputData?.connectionType) {
+      let generatedYaml = '';
+
+      // Generate input template
+      generatedYaml =
+        getConnectTemplate({
+          connectionName: inputData.connectionName,
+          connectionType: inputData.connectionType,
+          components,
+          showOptionalFields: false,
+          existingYaml: generatedYaml,
+        }) || generatedYaml;
+
+      // Generate output template if exists
+      if (outputData?.connectionName && outputData?.connectionType) {
+        generatedYaml =
+          getConnectTemplate({
+            connectionName: outputData.connectionName,
+            connectionType: outputData.connectionType,
+            components,
+            showOptionalFields: false,
+            existingYaml: generatedYaml,
+          }) || generatedYaml;
+      }
+
+      if (generatedYaml) {
+        useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent: generatedYaml });
+      }
+    }
+
+    hasInitializedServerless.current = true;
+  }, []);
+
+  // Clear wizard store (CREATE mode)
+  const clearWizardStore = useCallback(() => {
+    useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent: '' });
+    useOnboardingWizardDataStore.getState().setWizardData({
+      input: undefined,
+      output: undefined,
+    });
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    // Validate form
+    const isValid = await form.trigger();
+    if (!isValid) {
+      return;
+    }
+
+    const { name, description, computeUnits } = form.getValues();
+
+    if (mode === 'create') {
+      const pipelineCreate = create(PipelineCreateSchema, {
+        displayName: name,
+        configYaml: yamlContent,
+        description: description || '',
+        resources: { cpuShares: tasksToCPU(computeUnits) || '0', memoryShares: '0' },
+      });
+
+      const createRequestDataPlane = create(CreatePipelineRequestSchemaDataPlane, {
+        pipeline: pipelineCreate,
+      });
+
+      const createRequest = create(CreatePipelineRequestSchema, {
+        request: createRequestDataPlane,
+      });
+
+      createMutation.mutate(createRequest, {
+        onSuccess: (response) => {
+          setLintHints({});
+          clearWizardStore();
+          toast({
+            status: 'success',
+            title: 'Pipeline created',
+            duration: 4000,
+            isClosable: false,
+          });
+          const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
+          const currentUnits = form.getValues('computeUnits');
+          if (retUnits && currentUnits !== retUnits) {
+            toast({
+              status: 'warning',
+              title: `Pipeline has been resized to use ${retUnits} compute units`,
+              duration: 6000,
+              isClosable: false,
+            });
+          }
+          navigate('/connect-clusters');
+        },
+        onError: (err) => {
+          setLintHints(extractLintHintsFromError(err));
+          toast({
+            status: 'error',
+            title: 'Failed to create pipeline',
+            description: formatPipelineError(err),
+            duration: null,
+            isClosable: true,
+          });
+        },
+      });
+    } else if (pipelineId) {
+      const pipelineUpdate = create(PipelineUpdateSchema, {
+        displayName: name,
+        configYaml: yamlContent,
+        description: description || '',
+        resources: { cpuShares: tasksToCPU(computeUnits) || '0', memoryShares: '0' },
+      });
+
+      const updateRequestDataPlane = create(UpdatePipelineRequestSchemaDataPlane, {
+        id: pipelineId,
+        pipeline: pipelineUpdate,
+      });
+
+      const updateRequest = create(UpdatePipelineRequestSchema, {
+        request: updateRequestDataPlane,
+      });
+
+      updateMutation.mutate(updateRequest, {
+        onSuccess: (response) => {
+          setLintHints({});
+          toast({
+            status: 'success',
+            title: 'Pipeline updated',
+            duration: 4000,
+            isClosable: false,
+          });
+          const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
+          const currentUnits = form.getValues('computeUnits');
+          if (retUnits && currentUnits !== retUnits) {
+            toast({
+              status: 'warning',
+              title: `Pipeline has been resized to use ${retUnits} compute units`,
+              duration: 6000,
+              isClosable: false,
+            });
+          }
+          navigate(`/rp-connect/${pipelineId}`);
+        },
+        onError: (err) => {
+          setLintHints(extractLintHintsFromError(err));
+          toast({
+            status: 'error',
+            title: 'Failed to update pipeline',
+            description: formatPipelineError(err),
+            duration: null,
+            isClosable: true,
+          });
+        },
+      });
+    }
+  }, [form, yamlContent, mode, pipelineId, createMutation, updateMutation, toast, navigate, clearWizardStore]);
+
+  const handleSetYamlContent = useCallback((newYaml: string) => {
+    setYamlContent(newYaml);
+  }, []);
+
+  const handleYamlChange = useCallback(
+    (value: string | undefined) => {
+      if (value) {
+        setYamlContent(value);
+        if (mode === 'create') {
+          debouncedSyncToStore(value);
+        }
+        debouncedLint(value);
+      }
+    },
+    [debouncedLint, debouncedSyncToStore, mode]
+  );
+
+  const handleEditorDidMount = useCallback((editorInstance: editor.IStandaloneCodeEditor) => {
+    editorRef.current = editorInstance;
+  }, []);
+
+  const isSaving = useMemo(
+    () => createMutation.isPending || updateMutation.isPending,
+    [createMutation.isPending, updateMutation.isPending]
+  );
+
+  if (isPipelineLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full">
+      {/* Sidebar - only in create mode */}
+      {mode === 'create' && (
+        <div className="w-[300px] overflow-auto border-r p-4">
+          <CreatePipelineSidebar
+            components={components}
+            editorContent={yamlContent}
+            editorInstance={editorRef.current}
+            setYamlContent={handleSetYamlContent}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-1 flex-col overflow-auto p-6">
+        {/* Toolbar */}
+        <Toolbar
+          isSaving={isSaving}
+          mode={mode}
+          onCancel={mode === 'create' ? clearWizardStore : undefined}
+          onSave={handleSave}
+          pipelineId={pipelineId}
+          pipelineName={form.getValues('name')}
+          pipelineState={pipeline?.state}
+        />
+
+        {/* Details - controlled component with readonly prop */}
+        <Form {...form}>
+          <Details readonly={mode === 'view'} />
+        </Form>
+
+        {/* YAML Editor */}
+        <div className="mt-4 flex-1 overflow-hidden rounded-md border">
+          <YamlEditor
+            onChange={handleYamlChange}
+            onMount={handleEditorDidMount}
+            options={{
+              readOnly: mode === 'view',
+            }}
+            value={yamlContent}
+          />
+        </div>
+
+        {/* Lint Hints - only in create/edit modes */}
+        {mode !== 'view' && Object.keys(lintHints).length > 0 && (
+          <div className="mt-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <LintHintList lintHints={lintHints} />
+              </AlertDescription>
+            </Alert>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/list.tsx b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
new file mode 100644
index 000000000..93946881a
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
@@ -0,0 +1,189 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { useToast } from '@redpanda-data/ui';
+import { Button } from 'components/redpanda-ui/components/button';
+import { ToggleGroup, ToggleGroupItem } from 'components/redpanda-ui/components/toggle-group';
+import {
+  DeletePipelineRequestSchema,
+  StartPipelineRequestSchema,
+  StopPipelineRequestSchema,
+} from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
+import type { Pipeline_State } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { Pipeline_State as PipelineState } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { useCallback } from 'react';
+import { useDeletePipelineMutation, useStartPipelineMutation, useStopPipelineMutation } from 'react-query/api/pipeline';
+import { useNavigate } from 'react-router-dom';
+
+import { formatPipelineError } from '../errors';
+
+interface ToolbarProps {
+  mode: 'create' | 'edit' | 'view';
+  pipelineId?: string;
+  pipelineName?: string;
+  pipelineState?: Pipeline_State;
+  onSave?: () => void;
+  onCancel?: () => void;
+  isSaving?: boolean;
+}
+
+export function Toolbar({ mode, pipelineId, pipelineName, pipelineState, onSave, onCancel, isSaving }: ToolbarProps) {
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  // Call mutations locally instead of receiving via props
+  const deleteMutation = useDeletePipelineMutation();
+  const startMutation = useStartPipelineMutation();
+  const stopMutation = useStopPipelineMutation();
+
+  const isRunning = pipelineState === PipelineState.RUNNING;
+  const isTransitioning = pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING;
+  const isActionLoading = startMutation.isPending || stopMutation.isPending || deleteMutation.isPending;
+
+  const handleDelete = useCallback(() => {
+    if (!pipelineId) {
+      return;
+    }
+
+    // biome-ignore lint: User confirmation required for destructive action
+    if (window.confirm(`Delete pipeline "${pipelineName}"?`)) {
+      const deleteRequest = create(DeletePipelineRequestSchema, {
+        request: { id: pipelineId },
+      });
+
+      deleteMutation.mutate(deleteRequest, {
+        onSuccess: () => {
+          toast({
+            status: 'success',
+            title: 'Pipeline deleted',
+            duration: 4000,
+            isClosable: false,
+          });
+          navigate('/connect-clusters');
+        },
+        onError: (err) => {
+          toast({
+            status: 'error',
+            title: 'Failed to delete pipeline',
+            description: formatPipelineError(err),
+            duration: null,
+            isClosable: true,
+          });
+        },
+      });
+    }
+  }, [pipelineId, pipelineName, deleteMutation, toast, navigate]);
+
+  const handleStartStop = useCallback(() => {
+    if (!pipelineId) {
+      return;
+    }
+
+    if (isRunning) {
+      const stopRequest = create(StopPipelineRequestSchema, {
+        request: { id: pipelineId },
+      });
+
+      stopMutation.mutate(stopRequest, {
+        onSuccess: () => {
+          toast({
+            status: 'success',
+            title: 'Pipeline stopped',
+            duration: 4000,
+            isClosable: false,
+          });
+        },
+        onError: (err) => {
+          toast({
+            status: 'error',
+            title: 'Failed to stop pipeline',
+            description: formatPipelineError(err),
+            duration: null,
+            isClosable: true,
+          });
+        },
+      });
+    } else {
+      const startRequest = create(StartPipelineRequestSchema, {
+        request: { id: pipelineId },
+      });
+
+      startMutation.mutate(startRequest, {
+        onSuccess: () => {
+          toast({
+            status: 'success',
+            title: 'Pipeline started',
+            duration: 4000,
+            isClosable: false,
+          });
+        },
+        onError: (err) => {
+          toast({
+            status: 'error',
+            title: 'Failed to start pipeline',
+            description: formatPipelineError(err),
+            duration: null,
+            isClosable: true,
+          });
+        },
+      });
+    }
+  }, [pipelineId, isRunning, startMutation, stopMutation, toast]);
+
+  const handleEdit = useCallback(() => {
+    navigate(`/rp-connect/${pipelineId}/edit`);
+  }, [navigate, pipelineId]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    navigate(-1);
+  }, [navigate, onCancel]);
+
+  return (
+    <div className="mb-4 flex items-center justify-between border-b pb-4">
+      <div className="flex items-center gap-2">
+        {mode === 'view' && (
+          <>
+            <Button onClick={handleEdit} variant="default">
+              Edit
+            </Button>
+            <Button disabled={isActionLoading || isTransitioning} onClick={handleStartStop} variant="outline">
+              {isRunning ? 'Stop' : 'Start'}
+            </Button>
+            <Button onClick={handleDelete} variant="destructive">
+              Delete
+            </Button>
+          </>
+        )}
+
+        {(mode === 'edit' || mode === 'create') && (
+          <>
+            <Button disabled={isSaving} onClick={onSave}>
+              {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
+            </Button>
+            <Button onClick={handleCancel} variant="outline">
+              Cancel
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* Mode indicator using ToggleGroup (visual only) */}
+      {mode !== 'create' && (
+        <ToggleGroup className="pointer-events-none opacity-60" type="single" value={mode}>
+          <ToggleGroupItem value="view">View</ToggleGroupItem>
+          <ToggleGroupItem value="edit">Edit</ToggleGroupItem>
+        </ToggleGroup>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts b/frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts
new file mode 100644
index 000000000..92867f3d0
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { useLocation, useParams } from 'react-router-dom';
+
+type PipelineMode = 'create' | 'edit' | 'view';
+
+export function usePipelineMode(): { mode: PipelineMode; pipelineId?: string } {
+  const { pipelineId } = useParams<{ pipelineId: string }>();
+  const location = useLocation();
+
+  if (location.pathname.includes('/wizard')) {
+    return { mode: 'create' };
+  }
+
+  if (pipelineId && location.pathname.includes('/edit')) {
+    return { mode: 'edit', pipelineId };
+  }
+
+  if (pipelineId) {
+    return { mode: 'view', pipelineId };
+  }
+
+  return { mode: 'create' };
+}
diff --git a/frontend/src/components/pages/rp-connect/pipelines-create.tsx b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
index 5f2fe20f0..5c935f2d7 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-create.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
@@ -11,49 +11,24 @@
 
 import { create } from '@bufbuild/protobuf';
 import type { Monaco } from '@monaco-editor/react';
-import {
-  Button,
-  type CreateToastFnReturn,
-  Flex,
-  FormField,
-  Input,
-  NumberInput,
-  useDisclosure,
-  useToast,
-} from '@redpanda-data/ui';
+import { Button, Flex, FormField, Input, NumberInput, useDisclosure, useToast } from '@redpanda-data/ui';
 import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
 import { Button as NewButton } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { Link as UILink, Text as UIText } from 'components/redpanda-ui/components/typography';
-import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
-import { extractSecretReferences, getUniqueSecretNames } from 'components/ui/secret/secret-detection';
-import { isFeatureFlagEnabled } from 'config';
-import { useDebounce } from 'hooks/use-debounce';
 import { AlertCircle, PlusIcon } from 'lucide-react';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import type { editor, IDisposable, languages } from 'monaco-editor';
 import { PipelineCreateSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
-import React, { type Dispatch, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
-import { useListComponentsQuery } from 'react-query/api/connect';
-import { useListSecretsQuery } from 'react-query/api/secret';
-import { Link, useSearchParams } from 'react-router-dom';
-import {
-  onboardingWizardStore,
-  useOnboardingWizardDataStore,
-  useOnboardingYamlContentStore,
-} from 'state/onboarding-wizard-store';
-
-import { extractLintHintsFromError, formatPipelineError } from './errors';
-import { CreatePipelineSidebar } from './onboarding/create-pipeline-sidebar';
+import React, { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { formatPipelineError } from './errors';
 import { SecretsQuickAdd } from './secrets/secrets-quick-add';
 import { cpuToTasks, MAX_TASKS, MIN_TASKS, tasksToCPU } from './tasks';
 import { getContextualVariableSyntax, REDPANDA_CONTEXTUAL_VARIABLES } from './types/constants';
-import type { ConnectComponentType } from './types/schema';
-import { parseSchema } from './utils/schema';
-import { getConnectTemplate } from './utils/yaml';
-import type { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
 import { appGlobal } from '../../../state/app-global';
 import { pipelinesApi, rpcnSecretManagerApi } from '../../../state/backend-api';
 import { DefaultSkeleton } from '../../../utils/tsx-utils';
@@ -74,7 +49,6 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   @observable editorContent = exampleContent;
   @observable isCreating = false;
   @observable secrets: string[] = [];
-  @observable lintResults: Record<string, LintHint> = {};
   // TODO: Actually show this within the pipeline create page
   @observable tags = {} as Record<string, string>;
 
@@ -111,12 +85,11 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
 
     const CreateButton = () => {
       const toast = useToast();
-      const enableRpcnTiles = isFeatureFlagEnabled('enableRpcnTiles');
 
       return (
         <NewButton
           disabled={alreadyExists || isNameEmpty || this.isCreating}
-          onClick={action(() => this.createPipeline(enableRpcnTiles ? undefined : toast))}
+          onClick={action(() => this.createPipeline(toast))}
           variant="secondary"
         >
           {this.isCreating && <Spinner />}
@@ -186,18 +159,9 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
           <PipelineEditor onChange={(x) => (this.editorContent = x)} secrets={this.secrets} yaml={this.editorContent} />
         </div>
 
-        {isFeatureFlagEnabled('enableRpcnTiles') && this.lintResults && Object.keys(this.lintResults).length > 0 && (
-          <div className="mt-4">
-            <LintHintList lintHints={this.lintResults} />
-          </div>
-        )}
-
         <Flex alignItems="center" gap="4">
           <CreateButton />
-          <Link
-            onClick={() => (isFeatureFlagEnabled('enableRpcnTiles') ? onboardingWizardStore.reset() : undefined)}
-            to="/connect-clusters"
-          >
+          <Link to="/connect-clusters">
             <Button variant="link">Cancel</Button>
           </Link>
         </Flex>
@@ -206,7 +170,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   // biome-ignore lint/suspicious/useAwait: async needed for error handling in MobX action
-  async createPipeline(toast?: CreateToastFnReturn) {
+  async createPipeline(toast: ReturnType<typeof useToast>) {
     this.isCreating = true;
 
     pipelinesApi
@@ -227,25 +191,20 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
       )
       .then(
         action(async (r) => {
-          if (toast) {
+          toast({
+            status: 'success',
+            duration: 4000,
+            isClosable: false,
+            title: 'Pipeline created',
+          });
+          const retUnits = cpuToTasks(r.response?.pipeline?.resources?.cpuShares);
+          if (retUnits && this.tasks !== retUnits) {
             toast({
-              status: 'success',
-              duration: 4000,
+              status: 'warning',
+              duration: 6000,
               isClosable: false,
-              title: 'Pipeline created',
+              title: `Pipeline has been resized to use ${retUnits} compute units`,
             });
-            const retUnits = cpuToTasks(r.response?.pipeline?.resources?.cpuShares);
-            if (retUnits && this.tasks !== retUnits) {
-              toast({
-                status: 'warning',
-                duration: 6000,
-                isClosable: false,
-                title: `Pipeline has been resized to use ${retUnits} compute units`,
-              });
-            }
-          } else {
-            this.lintResults = {};
-            onboardingWizardStore.reset();
           }
 
           await pipelinesApi.refreshPipelines(true);
@@ -254,17 +213,13 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
       )
       .catch(
         action((err) => {
-          if (toast) {
-            toast({
-              status: 'error',
-              duration: null,
-              isClosable: true,
-              title: 'Failed to create pipeline',
-              description: formatPipelineError(err),
-            });
-          } else {
-            this.lintResults = extractLintHintsFromError(err);
-          }
+          toast({
+            status: 'error',
+            duration: null,
+            isClosable: true,
+            title: 'Failed to create pipeline',
+            description: formatPipelineError(err),
+          });
         })
       )
       .finally(() => {
@@ -393,134 +348,6 @@ export const PipelineEditor = observer(
     const [secretAutocomplete, setSecretAutocomplete] = useState<IDisposable | undefined>(undefined);
     const [contextualVarsAutocomplete, setContextualVarsAutocomplete] = useState<IDisposable | undefined>(undefined);
     const [monaco, setMonaco] = useState<Monaco | undefined>(undefined);
-    const persistedYamlContent = useOnboardingYamlContentStore((state) => state.yamlContent);
-    const enableRpcnTiles = isFeatureFlagEnabled('enableRpcnTiles');
-
-    const [actualEditorContent, setActualEditorContent] = useState<string>('');
-    const hasInitializedServerless = useRef(false);
-
-    const debouncedSyncToStore = useDebounce((yamlContent: string) => {
-      useOnboardingYamlContentStore.getState().setYamlContent({
-        yamlContent,
-      });
-    }, 500);
-
-    const yaml = useMemo(() => {
-      // If wizard is enabled and we have persisted yaml content, use that
-      if (enableRpcnTiles && persistedYamlContent) {
-        return persistedYamlContent;
-      }
-      // Otherwise fall back to prop
-      return p.yaml;
-    }, [enableRpcnTiles, persistedYamlContent, p.yaml]);
-
-    const [searchParams] = useSearchParams();
-    const isServerlessMode = searchParams.get('serverless') === 'true';
-
-    const { data: componentListResponse } = useListComponentsQuery();
-    const components = useMemo(
-      () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
-      [componentListResponse]
-    );
-    const { data: secretsData, refetch: refetchSecrets } = useListSecretsQuery();
-    const existingSecrets = useMemo(() => {
-      if (!secretsData?.secrets) {
-        return [];
-      }
-      return secretsData.secrets.map((secret) => secret?.id).filter(Boolean) as string[];
-    }, [secretsData]);
-
-    const detectedSecrets = useMemo(() => {
-      try {
-        const secretRefs = extractSecretReferences(yaml);
-        return getUniqueSecretNames(secretRefs);
-      } catch {
-        return [];
-      }
-    }, [yaml]);
-
-    const handleAddConnector = (connectionName: string, connectionType: ConnectComponentType) => {
-      if (!editorInstance) {
-        return;
-      }
-
-      // Always get current YAML from editor instance (not store)
-      const currentValue = editorInstance.getValue();
-
-      const mergedYaml = getConnectTemplate({
-        connectionName,
-        connectionType,
-        components,
-        showOptionalFields: false,
-        existingYaml: currentValue,
-      });
-
-      if (!mergedYaml) {
-        return;
-      }
-
-      editorInstance.setValue(mergedYaml);
-
-      useOnboardingYamlContentStore.getState().setYamlContent({
-        yamlContent: mergedYaml,
-      });
-
-      const wizardData = useOnboardingWizardDataStore.getState();
-      wizardData.setWizardData({
-        ...wizardData,
-        [connectionType]: {
-          connectionName,
-          connectionType,
-        },
-      });
-    };
-
-    // On initial mount in serverless mode, generate YAML from persisted connectors
-    // Wait for hydration to complete before initializing
-    // biome-ignore lint/correctness/useExhaustiveDependencies: Only runs once after hydration, ref prevents re-initialization
-    useEffect(() => {
-      const shouldInitialize = enableRpcnTiles && isServerlessMode && !hasInitializedServerless.current;
-
-      if (!shouldInitialize) {
-        return;
-      }
-
-      const wizardData = useOnboardingWizardDataStore.getState();
-      const inputData = wizardData.input;
-      const outputData = wizardData.output;
-
-      if (inputData?.connectionName && inputData?.connectionType) {
-        let yamlContent = '';
-
-        // Generate input template
-        yamlContent =
-          getConnectTemplate({
-            connectionName: inputData.connectionName,
-            connectionType: inputData.connectionType,
-            components,
-            showOptionalFields: false,
-            existingYaml: yamlContent,
-          }) || yamlContent;
-
-        // Generate output template if exists
-        if (outputData?.connectionName && outputData?.connectionType) {
-          yamlContent =
-            getConnectTemplate({
-              connectionName: outputData.connectionName,
-              connectionType: outputData.connectionType,
-              components,
-              showOptionalFields: false,
-              existingYaml: yamlContent,
-            }) || yamlContent;
-        }
-
-        if (yamlContent) {
-          useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent });
-        }
-      }
-
-      hasInitializedServerless.current = true;
-    }, []);
 
     useEffect(() => {
       return () => {
@@ -535,33 +362,6 @@ export const PipelineEditor = observer(
       };
     }, [secretAutocomplete, contextualVarsAutocomplete]);
 
-    // Sync actual editor content with editor instance
-    useEffect(() => {
-      if (!editorInstance) {
-        return;
-      }
-
-      const currentValue = editorInstance.getValue();
-      setActualEditorContent(currentValue);
-
-      if (currentValue !== p.yaml) {
-        p.onChange?.(currentValue);
-      }
-
-      const disposable = editorInstance.onDidChangeModelContent(() => {
-        const newValue = editorInstance.getValue();
-        setActualEditorContent(newValue);
-
-        if (enableRpcnTiles) {
-          debouncedSyncToStore(newValue);
-        }
-      });
-
-      return () => {
-        disposable.dispose();
-      };
-    }, [editorInstance, enableRpcnTiles, debouncedSyncToStore, p.onChange, p.yaml]);
-
     return (
       <Tabs
         tabs={[
@@ -574,7 +374,7 @@ export const PipelineEditor = observer(
                 <div className="flex min-h-[400px] gap-7">
                   <PipelinesYamlEditor
                     defaultPath="config.yaml"
-                    defaultValue={yaml}
+                    defaultValue={p.yaml}
                     language="yaml"
                     onChange={(e) => {
                       if (e) {
@@ -593,27 +393,17 @@ export const PipelineEditor = observer(
                     path="config.yaml"
                   />
 
-                  {!p.isDisabled &&
-                    (enableRpcnTiles ? (
-                      <CreatePipelineSidebar
-                        detectedSecrets={detectedSecrets}
-                        editorContent={actualEditorContent}
-                        editorInstance={editorInstance}
-                        existingSecrets={existingSecrets}
-                        onAddConnector={handleAddConnector}
-                        onSecretsCreated={refetchSecrets}
-                      />
-                    ) : (
-                      <QuickActions
-                        editorInstance={editorInstance}
-                        resetAutocompleteSecrets={() => {
-                          if (secretAutocomplete && monaco) {
-                            secretAutocomplete.dispose();
-                            void registerSecretsAutocomplete(monaco, setSecretAutocomplete);
-                          }
-                        }}
-                      />
-                    ))}
+                  {!p.isDisabled && (
+                    <QuickActions
+                      editorInstance={editorInstance}
+                      resetAutocompleteSecrets={() => {
+                        if (secretAutocomplete && monaco) {
+                          secretAutocomplete.dispose();
+                          void registerSecretsAutocomplete(monaco, setSecretAutocomplete);
+                        }
+                      }}
+                    />
+                  )}
                 </div>
 
                 {isKafkaConnectPipeline(p.yaml) && (
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx
index 1949018f6..d5c855bfe 100644
--- a/frontend/src/components/routes.tsx
+++ b/frontend/src/components/routes.tsx
@@ -67,6 +67,7 @@ import RoleCreatePage from './pages/roles/role-create-page';
 import RoleDetailPage from './pages/roles/role-detail-page';
 import RoleUpdatePage from './pages/roles/role-update-page';
 import { ConnectOnboardingWizard } from './pages/rp-connect/onboarding/onboarding-wizard';
+import PipelinePage from './pages/rp-connect/pipeline';
 import RpConnectPipelinesCreate from './pages/rp-connect/pipelines-create';
 import RpConnectPipelinesDetails from './pages/rp-connect/pipelines-details';
 import RpConnectPipelinesEdit from './pages/rp-connect/pipelines-edit';
@@ -527,14 +528,22 @@ export const APP_ROUTES: IRouteEntry[] = [
   MakeRoute<{}>('/rp-connect/create', RpConnectPipelinesCreate, 'Connectors'),
   MakeRoute<{}>(
     '/rp-connect/wizard',
-    ConnectOnboardingWizard,
+    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : ConnectOnboardingWizard,
     'Connectors',
     undefined,
     undefined,
     routeVisibility(() => isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded())
   ),
-  MakeRoute<{ pipelineId: string }>('/rp-connect/:pipelineId', RpConnectPipelinesDetails, 'Connectors'),
-  MakeRoute<{ pipelineId: string }>('/rp-connect/:pipelineId/edit', RpConnectPipelinesEdit, 'Connectors'),
+  MakeRoute<{ pipelineId: string }>(
+    '/rp-connect/:pipelineId',
+    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : RpConnectPipelinesDetails,
+    'Connectors'
+  ),
+  MakeRoute<{ pipelineId: string }>(
+    '/rp-connect/:pipelineId/edit',
+    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : RpConnectPipelinesEdit,
+    'Connectors'
+  ),
   MakeRoute<{ secretId: string }>('/rp-connect/secrets/:secretId/edit', RpConnectSecretUpdate, 'Connector-Secrets'),
 
   MakeRoute<{}>(
diff --git a/frontend/src/react-query/api/connect.tsx b/frontend/src/react-query/api/connect.tsx
index d2804fa01..1c1f6d812 100644
--- a/frontend/src/react-query/api/connect.tsx
+++ b/frontend/src/react-query/api/connect.tsx
@@ -1,6 +1,6 @@
 import { create } from '@bufbuild/protobuf';
 import type { GenMessage } from '@bufbuild/protobuf/codegenv1';
-import { useQuery } from '@connectrpc/connect-query';
+import { useMutation, useQuery } from '@connectrpc/connect-query';
 import {
   LintPipelineConfigRequestSchema,
   type LintPipelineConfigResponse,
@@ -41,3 +41,5 @@ export const useLintPipelineConfigQuery = (
     ...options,
   });
 };
+
+export const useLintPipelineConfigMutation = () => useMutation(lintPipelineConfig);

From fd2569859a5fc4c96d55207051a6a0e85f7dd470 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Sun, 23 Nov 2025 12:32:56 -0800
Subject: [PATCH 03/13] feat: cleanup

---
 .../add-contextual-variables-card.tsx         |   5 -
 .../onboarding/add-secrets-card.tsx           |  26 ++-
 .../rp-connect/onboarding/connect-tile.tsx    |  13 +-
 .../rp-connect/onboarding/connect-tiles.tsx   | 138 +++++++++----
 .../onboarding/create-pipeline-sidebar.tsx    |   7 +-
 .../onboarding/onboarding-wizard.tsx          |   4 +-
 .../pages/rp-connect/pipeline/details.tsx     | 169 +++++++++-------
 .../pages/rp-connect/pipeline/footer.tsx      |  43 ++++
 .../pages/rp-connect/pipeline/index.tsx       |  87 ++++-----
 .../pages/rp-connect/pipeline/list.tsx        |   0
 .../pages/rp-connect/pipeline/toolbar.tsx     | 184 ++++++++++--------
 .../pages/rp-connect/pipelines-create.tsx     |   5 +
 .../pages/rp-connect/pipelines-details.tsx    |   4 +
 .../pages/rp-connect/pipelines-edit.tsx       |   4 +
 .../redpanda-ui/components/accordion.tsx      |  74 +++++--
 .../redpanda-ui/components/button.tsx         |  11 +-
 .../redpanda-ui/components/spinner.tsx        |  26 ++-
 frontend/src/components/routes.tsx            |  15 +-
 .../ui/lint-hint/lint-hint-list.tsx           |   6 +-
 .../components/ui/yaml/yaml-editor-card.tsx   |   6 +-
 .../src/components/ui/yaml/yaml-editor.tsx    |   2 +-
 frontend/src/react-query/api/connect.tsx      |   1 +
 frontend/src/react-query/api/pipeline.tsx     |  14 ++
 23 files changed, 536 insertions(+), 308 deletions(-)
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/footer.tsx
 delete mode 100644 frontend/src/components/pages/rp-connect/pipeline/list.tsx

diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-contextual-variables-card.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-contextual-variables-card.tsx
index e6366fc2c..0ea159eff 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-contextual-variables-card.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-contextual-variables-card.tsx
@@ -182,11 +182,6 @@ export const AddContextualVariablesCard = ({
               </div>
             </Collapsible>
           )}
-
-          <Text className="text-muted-foreground text-sm">
-            Click a variable to insert it at your cursor position. These variables are automatically resolved at
-            runtime.
-          </Text>
         </div>
       </CardContent>
     </Card>
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
index b9ee3ff7f..299d23ea2 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
@@ -4,7 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'compo
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/redpanda-ui/components/collapsible';
 import { Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
-import { AlertCircle, Check, ChevronDown, PlusIcon } from 'lucide-react';
+import { Check, ChevronDown, PlusIcon } from 'lucide-react';
 import type { editor } from 'monaco-editor';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -92,7 +92,7 @@ export const AddSecretsCard = ({
         <CardDescription>Manage secret variables in your pipeline configuration.</CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className="flex flex-col gap-4">
           {existingSecrets.length > 0 && (
             <Collapsible onOpenChange={setIsOpen} open={isOpen}>
               <div className="flex flex-col gap-2">
@@ -147,26 +147,24 @@ export const AddSecretsCard = ({
           )}
           {missingSecrets.length > 0 && (
             <div className="flex flex-col gap-2">
-              <Text className="font-medium text-destructive text-sm">Missing secrets:</Text>
+              <Text variant="label">Missing secrets:</Text>
               <div className="flex flex-wrap gap-2">
                 {missingSecrets.map((secret) => (
-                  <Button key={secret} onClick={onOpenDialog} size="sm" variant="destructive">
-                    <AlertCircle className="h-3 w-3" />
-                    Create {secret}
-                  </Button>
+                  <Badge
+                    className="cursor-pointer font-mono hover:opacity-80"
+                    key={secret}
+                    onClick={onOpenDialog}
+                    variant="red"
+                  >
+                    Create $secrets.{secret}
+                  </Badge>
                 ))}
               </div>
             </div>
           )}
-          {existingSecrets.length === 0 && detectedSecrets.length === 0 && (
-            <Text className="text-muted-foreground text-sm">
-              Your pipeline doesn't reference any secrets yet. Use <code>$&#123;secrets.NAME&#125;</code> syntax to
-              reference secrets.
-            </Text>
-          )}
           <Button onClick={onOpenDialog} size={existingSecrets.length > 0 ? 'sm' : 'default'} variant="outline">
-            <PlusIcon className="h-4 w-4" />
             {existingSecrets.length > 0 ? 'Add more secrets' : 'Add secret'}
+            <PlusIcon className="h-4 w-4" />
           </Button>
         </div>
       </CardContent>
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
index c3b305307..29fac2be4 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
@@ -69,11 +69,14 @@ export const ConnectTile = ({
         <div className="flex flex-col gap-1">
           <InlineCode className="truncate bg-background px-0 py-0 font-semibold text-md">{component.name}</InlineCode>
           <span>
-            {component.status && component.status !== ComponentStatus.STABLE && component.name !== 'redpanda' && (
-              <Badge size="sm" variant="gray">
-                {componentStatusToString(component.status)}
-              </Badge>
-            )}
+            {(component.status === ComponentStatus.BETA ||
+              component.status === ComponentStatus.EXPERIMENTAL ||
+              component.status === ComponentStatus.DEPRECATED) &&
+              component.name !== 'redpanda' && (
+                <Badge size="sm" variant="gray">
+                  {componentStatusToString(component.status)}
+                </Badge>
+              )}
           </span>
         </div>
         <div className="-translate-y-1/2 absolute top-1/2 right-0">
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 61dc3ed00..16f44025a 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -13,6 +13,7 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from 'components/
 import { Input, InputStart } from 'components/redpanda-ui/components/input';
 import { Label } from 'components/redpanda-ui/components/label';
 import { SimpleMultiSelect } from 'components/redpanda-ui/components/multi-select';
+import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
 import { Heading, Link, Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { SearchIcon } from 'lucide-react';
@@ -114,6 +115,41 @@ const searchComponents = (
   return result;
 };
 
+const ConnectTilesSkeleton = memo(
+  ({
+    children,
+    gridCols = 4,
+    tileCount = 12,
+  }: {
+    children?: React.ReactNode;
+    gridCols?: number;
+    tileCount?: number;
+  }) => {
+    const skeletonTiles = Array.from({ length: tileCount }, (_, i) => (
+      <div className="h-[78px] rounded-lg border bg-card p-4" key={`skeleton-tile-${i}`}>
+        <SkeletonGroup direction="horizontal" spacing="default">
+          <SkeletonGroup className="flex-1" direction="vertical" spacing="sm">
+            <Skeleton variant="heading" width="md" />
+            <Skeleton variant="text" width="xs" />
+          </SkeletonGroup>
+          <Skeleton className="size-6" variant="circle" />
+        </SkeletonGroup>
+      </div>
+    ));
+
+    return (
+      <Choicebox>
+        <div className={cn('grid-auto-rows-fr grid gap-2', `grid-cols-${gridCols}`)}>
+          {children}
+          {skeletonTiles}
+        </div>
+      </Choicebox>
+    );
+  }
+);
+
+ConnectTilesSkeleton.displayName = 'ConnectTilesSkeleton';
+
 export type ConnectTilesProps = {
   additionalComponents?: ExtendedConnectComponentSpec[];
   componentTypeFilter?: ConnectComponentType[];
@@ -186,7 +222,7 @@ export const ConnectTiles = memo(
         defaultValues,
       });
 
-      const { data: componentListResponse } = useListComponentsQuery();
+      const { data: componentListResponse, isLoading: isLoadingComponents } = useListComponentsQuery();
       const builtInComponents = useMemo(
         () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
         [componentListResponse]
@@ -310,48 +346,66 @@ export const ConnectTiles = memo(
                   <FormField
                     control={form.control}
                     name="connectionName"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          {filteredComponents.length === 0 ? (
-                            <div className="flex flex-col items-center justify-center py-8 text-center">
-                              <Text className="text-muted-foreground">No connections found matching your filters</Text>
-                              <Text className="mt-1 text-muted-foreground text-sm">
-                                Try adjusting your search or category filters
-                              </Text>
+                    render={({ field }) => {
+                      const renderTiles = () =>
+                        filteredComponents.map((component) => {
+                          const uniqueKey = `${component.type}-${component.name}`;
+                          const isChecked =
+                            field.value === component.name && form.getValues('connectionType') === component.type;
+
+                          return (
+                            <ConnectTile
+                              checked={isChecked}
+                              component={component}
+                              key={uniqueKey}
+                              onChange={() => {
+                                field.onChange(component.name);
+                                form.setValue('connectionType', component.type as ConnectComponentType);
+                                onChange?.(component.name, component.type as ConnectComponentType);
+                              }}
+                              uniqueKey={uniqueKey}
+                            />
+                          );
+                        });
+
+                      const hasNoResults = !isLoadingComponents && filteredComponents.length === 0;
+                      const hasResults = filteredComponents.length > 0;
+                      const showSkeleton = hasResults && isLoadingComponents;
+
+                      let content: React.ReactNode;
+
+                      if (hasNoResults) {
+                        content = (
+                          <div className="flex flex-col items-center justify-center py-8 text-center">
+                            <Text className="text-muted-foreground">No connections found matching your filters</Text>
+                            <Text className="mt-1 text-muted-foreground text-sm">
+                              Try adjusting your search or category filters
+                            </Text>
+                          </div>
+                        );
+                      } else if (showSkeleton) {
+                        content = (
+                          <ConnectTilesSkeleton gridCols={gridCols} tileCount={PRIORITY_COMPONENTS.length}>
+                            {renderTiles()}
+                          </ConnectTilesSkeleton>
+                        );
+                      } else {
+                        content = (
+                          <Choicebox>
+                            <div className={cn('grid-auto-rows-fr grid gap-2', `grid-cols-${gridCols}`)}>
+                              {renderTiles()}
                             </div>
-                          ) : (
-                            <Choicebox>
-                              <div className={cn('grid-auto-rows-fr grid gap-2', `grid-cols-${gridCols}`)}>
-                                {filteredComponents.map((component) => {
-                                  const uniqueKey = `${component.type}-${component.name}`;
-                                  const isChecked =
-                                    field.value === component.name &&
-                                    form.getValues('connectionType') === component.type;
-
-                                  return (
-                                    <ConnectTile
-                                      checked={isChecked}
-                                      component={component}
-                                      key={uniqueKey}
-                                      onChange={() => {
-                                        field.onChange(component.name);
-                                        form.setValue('connectionType', component.type as ConnectComponentType);
-                                        // Only call onChange for non-wizard use cases (e.g., dialog)
-                                        // Wizard saves to session storage only after "Next" is clicked
-                                        onChange?.(component.name, component.type as ConnectComponentType);
-                                      }}
-                                      uniqueKey={uniqueKey}
-                                    />
-                                  );
-                                })}
-                              </div>
-                            </Choicebox>
-                          )}
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
+                          </Choicebox>
+                        );
+                      }
+
+                      return (
+                        <FormItem>
+                          <FormControl>{content}</FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      );
+                    }}
                   />
                 </div>
                 {/* Gradient overlay to indicate scrollability - only show when not at bottom */}
diff --git a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
index e33d0402e..83dcba309 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
@@ -1,4 +1,5 @@
 import { useDisclosure } from '@redpanda-data/ui';
+import { cn } from 'components/redpanda-ui/lib/utils';
 import { extractSecretReferences, getUniqueSecretNames } from 'components/ui/secret/secret-detection';
 import type { editor } from 'monaco-editor';
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -13,6 +14,8 @@ import { AddSecretsDialog } from './add-secrets-dialog';
 import type { ConnectComponentSpec, ConnectComponentType } from '../types/schema';
 import { getConnectTemplate } from '../utils/yaml';
 
+const sidebarClassNames = 'w-[260px]';
+
 type CreatePipelineSidebarProps = {
   editorInstance: editor.IStandaloneCodeEditor | null;
   editorContent: string;
@@ -83,7 +86,7 @@ export const CreatePipelineSidebar = memo(
     }, [refetchSecrets]);
 
     if (editorInstance === null) {
-      return <div className="min-w-[300px]" />;
+      return <div className={sidebarClassNames} />;
     }
 
     const handleConnectorTypeChange = (connectorType: ConnectComponentType) => {
@@ -92,7 +95,7 @@ export const CreatePipelineSidebar = memo(
     };
 
     return (
-      <div className="flex flex-col gap-4">
+      <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
         <AddConnectorsCard
           editorContent={editorContent}
           hasInput={hasInput}
diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index 6f021b230..7fe4e5ea3 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -22,7 +22,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { AddTopicStep } from './add-topic-step';
 import { AddUserStep } from './add-user-step';
 import { ConnectTiles } from './connect-tiles';
-import RpConnectPipelinesCreate from '../pipelines-create';
+import PipelinePage from '../pipeline';
 import {
   REDPANDA_TOPIC_AND_USER_COMPONENTS,
   stepMotionProps,
@@ -394,7 +394,7 @@ export const ConnectOnboardingWizard = ({
                         </CardTitle>
                       </CardHeader>
                       <CardContent>
-                        <RpConnectPipelinesCreate matchedPath="/rp-connect/wizard" />
+                        <PipelinePage />
                       </CardContent>
                     </Card>
                   ),
diff --git a/frontend/src/components/pages/rp-connect/pipeline/details.tsx b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
index 75bf4e5fa..6a89294d3 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/details.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
@@ -9,7 +9,13 @@
  * by the Apache License, Version 2.0
  */
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/redpanda-ui/components/collapsible';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from 'components/redpanda-ui/components/accordion';
+import { Card, CardContent } from 'components/redpanda-ui/components/card';
 import {
   FormControl,
   FormDescription,
@@ -19,9 +25,10 @@ import {
   FormMessage,
 } from 'components/redpanda-ui/components/form';
 import { Input } from 'components/redpanda-ui/components/input';
+import { Label } from 'components/redpanda-ui/components/label';
 import { Slider } from 'components/redpanda-ui/components/slider';
 import { Textarea } from 'components/redpanda-ui/components/textarea';
-import { ChevronDown } from 'lucide-react';
+import { Text } from 'components/redpanda-ui/components/typography';
 import { useFormContext } from 'react-hook-form';
 
 import { MAX_TASKS, MIN_TASKS } from '../tasks';
@@ -31,74 +38,102 @@ interface DetailsProps {
 }
 
 export function Details({ readonly = false }: DetailsProps) {
-  const { control } = useFormContext();
+  const { control, watch } = useFormContext();
+  const name = watch('name');
+  const description = watch('description');
+  const computeUnits = watch('computeUnits');
 
-  return (
-    <div className="space-y-4">
-      <FormField
-        control={control}
-        name="name"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel required>Pipeline Name</FormLabel>
-            <FormControl>
-              <Input {...field} disabled={readonly} placeholder="Enter pipeline name" />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+  if (readonly) {
+    return (
+      <Card size="full">
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <Label>Pipeline Name</Label>
+            <Text>{name}</Text>
+          </div>
+
+          <Accordion collapsible type="single">
+            <AccordionItem value="advanced" variant="outlined">
+              <AccordionTrigger>Advanced Settings</AccordionTrigger>
+              <AccordionContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Description</Label>
+                  <Text>{description || '-'}</Text>
+                </div>
 
-      <Collapsible>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md border bg-muted/50 px-4 py-2 font-medium text-sm hover:bg-muted">
-          <span>Advanced Settings</span>
-          <ChevronDown className="h-4 w-4 transition-transform duration-200 [&[data-state=open]]:rotate-180" />
-        </CollapsibleTrigger>
-        <CollapsibleContent className="mt-4 space-y-4">
-          <FormField
-            control={control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                  <Textarea
-                    {...field}
-                    disabled={readonly}
-                    placeholder="Optional description for this pipeline"
-                    rows={3}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                <div className="space-y-2">
+                  <Label>Compute Units: {computeUnits}</Label>
+                  <Text variant="muted">One compute unit = 0.1 CPU and 400 MB memory</Text>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+    );
+  }
 
-          {!readonly && (
-            <FormField
-              control={control}
-              name="computeUnits"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Compute Units: {field.value}</FormLabel>
-                  <FormControl>
-                    <Slider
-                      disabled={readonly}
-                      max={MAX_TASKS}
-                      min={MIN_TASKS}
-                      onValueChange={(values) => field.onChange(values[0])}
-                      step={1}
-                      value={[field.value]}
-                    />
-                  </FormControl>
-                  <FormDescription>One compute unit = 0.1 CPU and 400 MB memory</FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+  return (
+    <Card size="full">
+      <CardContent>
+        <FormField
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>Pipeline Name</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Enter pipeline name" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
           )}
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
+        />
+
+        <Accordion collapsible type="single">
+          <AccordionItem value="advanced" variant="outlined">
+            <AccordionTrigger>Advanced Settings</AccordionTrigger>
+            <AccordionContent className="space-y-4">
+              <FormField
+                control={control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder="Optional description for this pipeline" rows={3} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={control}
+                name="computeUnits"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Compute Units: {field.value}</FormLabel>
+                    <FormControl>
+                      <Slider
+                        max={MAX_TASKS}
+                        min={MIN_TASKS}
+                        onValueChange={(values) => field.onChange(values[0])}
+                        step={1}
+                        value={[field.value]}
+                      />
+                    </FormControl>
+                    <FormDescription className="text-muted-foreground text-sm">
+                      One compute unit = 0.1 CPU and 400 MB memory
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
new file mode 100644
index 000000000..83357cb8f
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { Button } from 'components/redpanda-ui/components/button';
+import { memo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface FooterProps {
+  mode: 'create' | 'edit';
+  onSave: () => void;
+  onCancel?: () => void;
+  isSaving?: boolean;
+}
+
+export const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) => {
+  const navigate = useNavigate();
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    navigate(-1);
+  }, [navigate, onCancel]);
+
+  return (
+    <div className="flex items-center justify-end gap-2 border-t pt-4">
+      <Button disabled={isSaving} onClick={handleCancel} variant="outline">
+        Cancel
+      </Button>
+      <Button disabled={isSaving} onClick={onSave}>
+        {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
+      </Button>
+    </div>
+  );
+});
+
+Footer.displayName = 'Footer';
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index e421933bf..f0fc1611a 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -16,9 +16,8 @@ import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert
 import { Form } from 'components/redpanda-ui/components/form';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
-import { YamlEditor } from 'components/ui/yaml/yaml-editor';
+import { YamlEditorCard } from 'components/ui/yaml/yaml-editor-card';
 import { useDebounce } from 'hooks/use-debounce';
-import { AlertCircle } from 'lucide-react';
 import type { editor } from 'monaco-editor';
 import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
 import {
@@ -41,6 +40,7 @@ import { useOnboardingWizardDataStore, useOnboardingYamlContentStore } from 'sta
 import { z } from 'zod';
 
 import { Details } from './details';
+import { Footer } from './footer';
 import { Toolbar } from './toolbar';
 import { usePipelineMode } from './use-pipeline-mode';
 import { extractLintHintsFromError, formatPipelineError } from '../errors';
@@ -67,6 +67,7 @@ export default function PipelinePage() {
   const isServerlessMode = searchParams.get('serverless') === 'true';
   const hasInitializedServerless = useRef(false);
   const persistedYamlContent = useOnboardingYamlContentStore((state) => state.yamlContent);
+  const [editorInstance, setEditorInstance] = useState<null | editor.IStandaloneCodeEditor>(null);
 
   // Form state with validation
   const form = useForm<PipelineFormValues>({
@@ -81,9 +82,6 @@ export default function PipelinePage() {
   const [yamlContent, setYamlContent] = useState('');
   const [lintHints, setLintHints] = useState<Record<string, LintHint>>({});
 
-  // Editor ref for sidebar integration
-  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-
   // Fetch pipeline data in view/edit modes
   const { data: pipelineResponse, isLoading: isPipelineLoading } = useGetPipelineQuery(
     { id: pipelineId || '' },
@@ -92,7 +90,7 @@ export default function PipelinePage() {
     }
   );
 
-  const pipeline = pipelineResponse?.response?.pipeline;
+  const pipeline = useMemo(() => pipelineResponse?.response?.pipeline, [pipelineResponse]);
 
   // Fetch components for schema
   const { data: componentListResponse } = useListComponentsQuery();
@@ -338,10 +336,6 @@ export default function PipelinePage() {
     [debouncedLint, debouncedSyncToStore, mode]
   );
 
-  const handleEditorDidMount = useCallback((editorInstance: editor.IStandaloneCodeEditor) => {
-    editorRef.current = editorInstance;
-  }, []);
-
   const isSaving = useMemo(
     () => createMutation.isPending || updateMutation.isPending,
     [createMutation.isPending, updateMutation.isPending]
@@ -356,60 +350,57 @@ export default function PipelinePage() {
   }
 
   return (
-    <div className="flex h-full">
-      {/* Sidebar - only in create mode */}
-      {mode === 'create' && (
-        <div className="w-[300px] overflow-auto border-r p-4">
-          <CreatePipelineSidebar
-            components={components}
-            editorContent={yamlContent}
-            editorInstance={editorRef.current}
-            setYamlContent={handleSetYamlContent}
-          />
-        </div>
-      )}
-
-      <div className="flex flex-1 flex-col overflow-auto p-6">
-        {/* Toolbar */}
-        <Toolbar
-          isSaving={isSaving}
-          mode={mode}
-          onCancel={mode === 'create' ? clearWizardStore : undefined}
-          onSave={handleSave}
-          pipelineId={pipelineId}
-          pipelineName={form.getValues('name')}
-          pipelineState={pipeline?.state}
-        />
+    <div className="flex w-full gap-4">
+      <div className="flex flex-1 flex-col gap-4 overflow-auto">
+        {/* Toolbar - only in view mode */}
+        {mode === 'view' && pipelineId && (
+          <Toolbar pipelineId={pipelineId} pipelineName={form.getValues('name')} pipelineState={pipeline?.state} />
+        )}
 
-        {/* Details - controlled component with readonly prop */}
         <Form {...form}>
           <Details readonly={mode === 'view'} />
         </Form>
 
-        {/* YAML Editor */}
-        <div className="mt-4 flex-1 overflow-hidden rounded-md border">
-          <YamlEditor
-            onChange={handleYamlChange}
-            onMount={handleEditorDidMount}
-            options={{
-              readOnly: mode === 'view',
-            }}
-            value={yamlContent}
-          />
-        </div>
+        <YamlEditorCard
+          onChange={handleYamlChange}
+          onMount={(editorRef) => {
+            setEditorInstance(editorRef);
+          }}
+          options={{
+            readOnly: mode === 'view',
+          }}
+          value={yamlContent}
+        />
 
         {/* Lint Hints - only in create/edit modes */}
         {mode !== 'view' && Object.keys(lintHints).length > 0 && (
           <div className="mt-4">
             <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
               <AlertDescription>
-                <LintHintList lintHints={lintHints} />
+                <LintHintList className="w-full" lintHints={lintHints} />
               </AlertDescription>
             </Alert>
           </div>
         )}
+
+        {/* Footer - only in create/edit modes */}
+        {mode !== 'view' && (
+          <Footer
+            isSaving={isSaving}
+            mode={mode}
+            onCancel={mode === 'create' ? clearWizardStore : undefined}
+            onSave={handleSave}
+          />
+        )}
       </div>
+      {(mode === 'create' || mode === 'edit') && (
+        <CreatePipelineSidebar
+          components={components}
+          editorContent={yamlContent}
+          editorInstance={editorInstance}
+          setYamlContent={handleSetYamlContent}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/pages/rp-connect/pipeline/list.tsx b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
index 93946881a..8bc38022b 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
@@ -12,7 +12,17 @@
 import { create } from '@bufbuild/protobuf';
 import { useToast } from '@redpanda-data/ui';
 import { Button } from 'components/redpanda-ui/components/button';
-import { ToggleGroup, ToggleGroupItem } from 'components/redpanda-ui/components/toggle-group';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Group } from 'components/redpanda-ui/components/group';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { Pause, Pencil, Play } from 'lucide-react';
 import {
   DeletePipelineRequestSchema,
   StartPipelineRequestSchema,
@@ -20,74 +30,72 @@ import {
 } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
 import type { Pipeline_State } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { Pipeline_State as PipelineState } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
-import { useCallback } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useDeletePipelineMutation, useStartPipelineMutation, useStopPipelineMutation } from 'react-query/api/pipeline';
 import { useNavigate } from 'react-router-dom';
 
 import { formatPipelineError } from '../errors';
 
 interface ToolbarProps {
-  mode: 'create' | 'edit' | 'view';
-  pipelineId?: string;
+  pipelineId: string;
   pipelineName?: string;
   pipelineState?: Pipeline_State;
-  onSave?: () => void;
-  onCancel?: () => void;
-  isSaving?: boolean;
 }
 
-export function Toolbar({ mode, pipelineId, pipelineName, pipelineState, onSave, onCancel, isSaving }: ToolbarProps) {
+export const Toolbar = memo(({ pipelineId, pipelineName, pipelineState }: ToolbarProps) => {
   const navigate = useNavigate();
   const toast = useToast();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
-  // Call mutations locally instead of receiving via props
   const deleteMutation = useDeletePipelineMutation();
   const startMutation = useStartPipelineMutation();
   const stopMutation = useStopPipelineMutation();
 
-  const isRunning = pipelineState === PipelineState.RUNNING;
-  const isTransitioning = pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING;
-  const isActionLoading = startMutation.isPending || stopMutation.isPending || deleteMutation.isPending;
-
-  const handleDelete = useCallback(() => {
-    if (!pipelineId) {
-      return;
-    }
-
-    // biome-ignore lint: User confirmation required for destructive action
-    if (window.confirm(`Delete pipeline "${pipelineName}"?`)) {
-      const deleteRequest = create(DeletePipelineRequestSchema, {
-        request: { id: pipelineId },
-      });
-
-      deleteMutation.mutate(deleteRequest, {
-        onSuccess: () => {
-          toast({
-            status: 'success',
-            title: 'Pipeline deleted',
-            duration: 4000,
-            isClosable: false,
-          });
-          navigate('/connect-clusters');
-        },
-        onError: (err) => {
-          toast({
-            status: 'error',
-            title: 'Failed to delete pipeline',
-            description: formatPipelineError(err),
-            duration: null,
-            isClosable: true,
-          });
-        },
-      });
-    }
-  }, [pipelineId, pipelineName, deleteMutation, toast, navigate]);
+  const isRunning = useMemo(() => pipelineState === PipelineState.RUNNING, [pipelineState]);
+  const isTransitioning = useMemo(
+    () => pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING,
+    [pipelineState]
+  );
+  const isActionLoading = useMemo(
+    () => startMutation.isPending || stopMutation.isPending || deleteMutation.isPending,
+    [startMutation.isPending, stopMutation.isPending, deleteMutation.isPending]
+  );
+  const isLoading = useMemo(() => isActionLoading || isTransitioning, [isActionLoading, isTransitioning]);
+
+  const handleDeleteClick = useCallback(() => {
+    setIsDeleteDialogOpen(true);
+  }, []);
+
+  const handleDeleteConfirm = useCallback(() => {
+    const deleteRequest = create(DeletePipelineRequestSchema, {
+      request: { id: pipelineId },
+    });
+
+    deleteMutation.mutate(deleteRequest, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        toast({
+          status: 'success',
+          title: 'Pipeline deleted',
+          duration: 4000,
+          isClosable: false,
+        });
+        navigate('/connect-clusters');
+      },
+      onError: (err) => {
+        setIsDeleteDialogOpen(false);
+        toast({
+          status: 'error',
+          title: 'Failed to delete pipeline',
+          description: formatPipelineError(err),
+          duration: null,
+          isClosable: true,
+        });
+      },
+    });
+  }, [pipelineId, deleteMutation, toast, navigate]);
 
   const handleStartStop = useCallback(() => {
-    if (!pipelineId) {
-      return;
-    }
-
     if (isRunning) {
       const stopRequest = create(StopPipelineRequestSchema, {
         request: { id: pipelineId },
@@ -143,47 +151,53 @@ export function Toolbar({ mode, pipelineId, pipelineName, pipelineState, onSave,
     navigate(`/rp-connect/${pipelineId}/edit`);
   }, [navigate, pipelineId]);
 
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    navigate(-1);
-  }, [navigate, onCancel]);
-
   return (
-    <div className="mb-4 flex items-center justify-between border-b pb-4">
-      <div className="flex items-center gap-2">
-        {mode === 'view' && (
-          <>
-            <Button onClick={handleEdit} variant="default">
+    <>
+      <div className="mb-4 flex items-center justify-between border-b pb-4">
+        <Button
+          disabled={isLoading}
+          // biome-ignore lint/style/noNestedTernary: because I said so
+          icon={isLoading ? <Spinner size="sm" /> : isRunning ? <Pause /> : <Play />}
+          onClick={handleStartStop}
+          variant="secondary"
+        >
+          {/** biome-ignore lint/style/noNestedTernary: because I said so */}
+          {isLoading ? (isRunning ? 'Stopping...' : 'Starting...') : isRunning ? 'Stop' : 'Start'}
+        </Button>
+
+        <div>
+          <Group>
+            <Button icon={<Pencil />} onClick={handleEdit} variant="outline">
               Edit
             </Button>
-            <Button disabled={isActionLoading || isTransitioning} onClick={handleStartStop} variant="outline">
-              {isRunning ? 'Stop' : 'Start'}
-            </Button>
-            <Button onClick={handleDelete} variant="destructive">
+            <Button onClick={handleDeleteClick} variant="destructiveOutline">
               Delete
             </Button>
-          </>
-        )}
+          </Group>
+        </div>
+      </div>
 
-        {(mode === 'edit' || mode === 'create') && (
-          <>
-            <Button disabled={isSaving} onClick={onSave}>
-              {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
-            </Button>
-            <Button onClick={handleCancel} variant="outline">
+      {/* Delete confirmation dialog */}
+      <Dialog onOpenChange={setIsDeleteDialogOpen} open={isDeleteDialogOpen}>
+        <DialogContent size="md" variant="destructive">
+          <DialogHeader>
+            <DialogTitle>Delete Pipeline</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete <strong>{pipelineName}</strong>? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setIsDeleteDialogOpen(false)} variant="outline">
               Cancel
             </Button>
-          </>
-        )}
-      </div>
-
-      {/* Mode indicator using ToggleGroup (visual only) */}
-      {mode !== 'create' && (
-        <ToggleGroup className="pointer-events-none opacity-60" type="single" value={mode}>
-          <ToggleGroupItem value="view">View</ToggleGroupItem>
-          <ToggleGroupItem value="edit">Edit</ToggleGroupItem>
-        </ToggleGroup>
-      )}
-    </div>
+            <Button disabled={deleteMutation.isPending} onClick={handleDeleteConfirm} variant="destructive">
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
-}
+});
+
+Toolbar.displayName = 'Toolbar';
diff --git a/frontend/src/components/pages/rp-connect/pipelines-create.tsx b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
index 5c935f2d7..519db66c3 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-create.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
@@ -17,6 +17,7 @@ import { Button as NewButton } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { Link as UILink, Text as UIText } from 'components/redpanda-ui/components/typography';
+import { isFeatureFlagEnabled } from 'config';
 import { AlertCircle, PlusIcon } from 'lucide-react';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -26,6 +27,7 @@ import React, { type Dispatch, type SetStateAction, useEffect, useState } from '
 import { Link } from 'react-router-dom';
 
 import { formatPipelineError } from './errors';
+import PipelinePage from './pipeline';
 import { SecretsQuickAdd } from './secrets/secrets-quick-add';
 import { cpuToTasks, MAX_TASKS, MIN_TASKS, tasksToCPU } from './tasks';
 import { getContextualVariableSyntax, REDPANDA_CONTEXTUAL_VARIABLES } from './types/constants';
@@ -73,6 +75,9 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
diff --git a/frontend/src/components/pages/rp-connect/pipelines-details.tsx b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
index 6ed01b2e6..dec38c747 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-details.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
@@ -19,6 +19,7 @@ import { Link } from 'react-router-dom';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
 import { openDeleteModal } from './modals';
+import PipelinePage from './pipeline';
 import { PipelineStatus } from './pipelines-list';
 import { cpuToTasks } from './tasks';
 import usePaginationParams from '../../../hooks/use-pagination-params';
@@ -77,6 +78,9 @@ class RpConnectPipelinesDetails extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
diff --git a/frontend/src/components/pages/rp-connect/pipelines-edit.tsx b/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
index 62e66bc2c..004f6e626 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
@@ -21,6 +21,7 @@ import { Link } from 'react-router-dom';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
 import { extractLintHintsFromError, formatPipelineError } from './errors';
+import PipelinePage from './pipeline';
 import { PipelineEditor } from './pipelines-create';
 import { cpuToTasks, MAX_TASKS, MIN_TASKS, tasksToCPU } from './tasks';
 import type { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
@@ -66,6 +67,9 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
diff --git a/frontend/src/components/redpanda-ui/components/accordion.tsx b/frontend/src/components/redpanda-ui/components/accordion.tsx
index 1fc255d56..77bb70fa4 100644
--- a/frontend/src/components/redpanda-ui/components/accordion.tsx
+++ b/frontend/src/components/redpanda-ui/components/accordion.tsx
@@ -4,12 +4,14 @@ import { ChevronDown } from 'lucide-react';
 import { AnimatePresence, type HTMLMotionProps, motion, type Transition } from 'motion/react';
 import { Accordion as AccordionPrimitive } from 'radix-ui';
 import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';
 
 type AccordionItemContextType = {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
+  variant: 'default' | 'contained' | 'outlined';
 };
 
 const AccordionItemContext = React.createContext<AccordionItemContextType | undefined>(undefined);
@@ -30,20 +32,34 @@ function Accordion({ testId, ...props }: AccordionProps) {
   return <AccordionPrimitive.Root data-slot="accordion" data-testid={testId} {...props} />;
 }
 
-type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item> & {
-  children: React.ReactNode;
-  testId?: string;
-};
+const accordionItemVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'border-b',
+      contained: '',
+      outlined: 'rounded-md border-1 bg-white dark:bg-base-900',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
 
-function AccordionItem({ className, children, testId, ...props }: AccordionItemProps) {
+type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item> &
+  VariantProps<typeof accordionItemVariants> & {
+    children: React.ReactNode;
+    testId?: string;
+  };
+
+function AccordionItem({ className, children, testId, variant = 'default', ...props }: AccordionItemProps) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <AccordionItemContext.Provider value={{ isOpen, setIsOpen }}>
+    <AccordionItemContext.Provider value={{ isOpen, setIsOpen, variant: variant || 'default' }}>
       <AccordionPrimitive.Item
         data-slot="accordion-item"
         data-testid={testId}
-        className={cn('border-b', className)}
+        className={cn(accordionItemVariants({ variant }), className)}
         {...props}
       >
         {children}
@@ -52,6 +68,22 @@ function AccordionItem({ className, children, testId, ...props }: AccordionItemP
   );
 }
 
+const accordionTriggerVariants = cva(
+  'flex flex-1 text-start items-center justify-between font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'py-4 hover:underline',
+        contained: 'w-full rounded-md border bg-muted/50 px-4 py-2 text-sm hover:bg-muted',
+        outlined: 'w-full rounded-t-md px-3 py-2 text-sm hover:bg-muted/50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
 type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
   transition?: Transition;
   chevron?: boolean;
@@ -72,7 +104,7 @@ const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerPro
   ) => {
     const triggerRef = React.useRef<HTMLButtonElement>(null);
     React.useImperativeHandle(ref, () => triggerRef.current || document.createElement('button'));
-    const { isOpen, setIsOpen } = useAccordionItem();
+    const { isOpen, setIsOpen, variant } = useAccordionItem();
 
     React.useEffect(() => {
       const node = triggerRef.current;
@@ -97,16 +129,15 @@ const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerPro
       };
     }, [setIsOpen]);
 
+    const chevronSize = variant === 'contained' || variant === 'outlined' ? 'size-4' : 'size-5';
+
     return (
       <AccordionPrimitive.Header data-slot="accordion-header" className="flex">
         <AccordionPrimitive.Trigger
           ref={triggerRef}
           data-slot="accordion-trigger"
           data-testid={testId}
-          className={cn(
-            'flex flex-1 text-start items-center justify-between py-4 font-medium hover:underline',
-            className,
-          )}
+          className={cn(accordionTriggerVariants({ variant }), className)}
           {...props}
         >
           {children}
@@ -117,7 +148,7 @@ const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerPro
               animate={{ rotate: isOpen ? 180 : 0 }}
               transition={transition}
             >
-              <ChevronDown className="size-5 shrink-0" />
+              <ChevronDown className={cn(chevronSize, 'shrink-0')} />
             </motion.div>
           )}
         </AccordionPrimitive.Trigger>
@@ -134,6 +165,19 @@ type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Cont
     testId?: string;
   };
 
+const accordionContentVariants = cva('pb-4 pt-0', {
+  variants: {
+    variant: {
+      default: 'text-sm',
+      contained: 'text-sm',
+      outlined: 'px-4 pb-4 pt-2 text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
 function AccordionContent({
   className,
   children,
@@ -141,7 +185,7 @@ function AccordionContent({
   testId,
   ...props
 }: AccordionContentProps) {
-  const { isOpen } = useAccordionItem();
+  const { isOpen, variant } = useAccordionItem();
 
   return (
     <AnimatePresence>
@@ -162,7 +206,7 @@ function AccordionContent({
             className="overflow-hidden"
             {...props}
           >
-            <div className={cn('pb-4 pt-0 text-sm', className)}>{children}</div>
+            <div className={cn(accordionContentVariants({ variant }), className)}>{children}</div>
           </motion.div>
         </AccordionPrimitive.Content>
       )}
diff --git a/frontend/src/components/redpanda-ui/components/button.tsx b/frontend/src/components/redpanda-ui/components/button.tsx
index 827764c39..09497332f 100644
--- a/frontend/src/components/redpanda-ui/components/button.tsx
+++ b/frontend/src/components/redpanda-ui/components/button.tsx
@@ -8,7 +8,7 @@ import { useGroup } from './group';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive selection:bg-selected selection:text-selected-foreground",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive selection:bg-selected selection:text-selected-foreground [&_svg]:!block",
   {
     variants: {
       variant: {
@@ -22,6 +22,7 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
         dashed: 'border-dashed border-2 border-primary',
         secondaryOutline: 'border !border-secondary text-secondary bg-background shadow-xs hover:bg-secondary/10',
+        destructiveOutline: 'border !border-destructive text-destructive bg-background shadow-xs hover:bg-destructive/10',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -45,8 +46,9 @@ const Button = React.forwardRef<
       testId?: string;
       as?: ElementType;
       to?: string;
+      icon?: React.ReactNode;
     }
->(({ className, variant, size, asChild = false, testId, as, to, ...props }, ref) => {
+>(({ className, variant, size, asChild = false, testId, as, to, icon, children, ...props }, ref) => {
   const Comp = as ?? (asChild ? SlotPrimitive.Slot : 'button');
   const { attached, position } = useGroup();
 
@@ -68,7 +70,10 @@ const Button = React.forwardRef<
       )}
       to={to}
       {...props}
-    />
+    >
+      {children}
+      {icon && <span className="size-4">{icon}</span>}
+    </Comp>
   );
 });
 
diff --git a/frontend/src/components/redpanda-ui/components/spinner.tsx b/frontend/src/components/redpanda-ui/components/spinner.tsx
index 58df99547..f63de2a3c 100644
--- a/frontend/src/components/redpanda-ui/components/spinner.tsx
+++ b/frontend/src/components/redpanda-ui/components/spinner.tsx
@@ -1,9 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority';
 import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
+const spinnerVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      xs: 'size-3',
+      sm: 'size-4',
+      md: 'size-6',
+      lg: 'size-8',
+      xl: 'size-12',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+interface SpinnerProps extends React.ComponentProps<'svg'>, VariantProps<typeof spinnerVariants> {}
+
+function Spinner({ className, size, ...props }: SpinnerProps) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn(spinnerVariants({ size }), className)} {...props} />
+  );
 }
 
-export { Spinner };
+export { Spinner, type SpinnerProps };
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx
index d5c855bfe..1949018f6 100644
--- a/frontend/src/components/routes.tsx
+++ b/frontend/src/components/routes.tsx
@@ -67,7 +67,6 @@ import RoleCreatePage from './pages/roles/role-create-page';
 import RoleDetailPage from './pages/roles/role-detail-page';
 import RoleUpdatePage from './pages/roles/role-update-page';
 import { ConnectOnboardingWizard } from './pages/rp-connect/onboarding/onboarding-wizard';
-import PipelinePage from './pages/rp-connect/pipeline';
 import RpConnectPipelinesCreate from './pages/rp-connect/pipelines-create';
 import RpConnectPipelinesDetails from './pages/rp-connect/pipelines-details';
 import RpConnectPipelinesEdit from './pages/rp-connect/pipelines-edit';
@@ -528,22 +527,14 @@ export const APP_ROUTES: IRouteEntry[] = [
   MakeRoute<{}>('/rp-connect/create', RpConnectPipelinesCreate, 'Connectors'),
   MakeRoute<{}>(
     '/rp-connect/wizard',
-    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : ConnectOnboardingWizard,
+    ConnectOnboardingWizard,
     'Connectors',
     undefined,
     undefined,
     routeVisibility(() => isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded())
   ),
-  MakeRoute<{ pipelineId: string }>(
-    '/rp-connect/:pipelineId',
-    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : RpConnectPipelinesDetails,
-    'Connectors'
-  ),
-  MakeRoute<{ pipelineId: string }>(
-    '/rp-connect/:pipelineId/edit',
-    isFeatureFlagEnabled('enableRpcnTiles') ? PipelinePage : RpConnectPipelinesEdit,
-    'Connectors'
-  ),
+  MakeRoute<{ pipelineId: string }>('/rp-connect/:pipelineId', RpConnectPipelinesDetails, 'Connectors'),
+  MakeRoute<{ pipelineId: string }>('/rp-connect/:pipelineId/edit', RpConnectPipelinesEdit, 'Connectors'),
   MakeRoute<{ secretId: string }>('/rp-connect/secrets/:secretId/edit', RpConnectSecretUpdate, 'Connector-Secrets'),
 
   MakeRoute<{}>(
diff --git a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
index ce3dbd83c..37e200aa9 100644
--- a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
+++ b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
@@ -9,20 +9,22 @@
  */
 
 import { Text } from 'components/redpanda-ui/components/typography';
+import { cn } from 'components/redpanda-ui/lib/utils';
 import { PencilRuler } from 'lucide-react';
 import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
 
 type LintHintListProps = {
   lintHints: Record<string, LintHint>;
+  className?: string;
 };
 
-export const LintHintList: React.FC<LintHintListProps> = ({ lintHints }) => {
+export const LintHintList: React.FC<LintHintListProps> = ({ className, lintHints }) => {
   if (!lintHints || Object.keys(lintHints).length === 0) {
     return null;
   }
 
   return (
-    <div className="space-y-3">
+    <div className={cn('space-y-3', className)}>
       <div className="flex items-center gap-2">
         <PencilRuler className="h-4 w-4" />
         <Text className="font-medium" variant="label">
diff --git a/frontend/src/components/ui/yaml/yaml-editor-card.tsx b/frontend/src/components/ui/yaml/yaml-editor-card.tsx
index ef14ad166..56ca0e5ac 100644
--- a/frontend/src/components/ui/yaml/yaml-editor-card.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor-card.tsx
@@ -13,6 +13,7 @@ import { Code, Maximize2, PencilRuler } from 'lucide-react';
 import type { editor } from 'monaco-editor';
 
 import { YamlEditor } from './yaml-editor';
+import { EditorProps } from '@monaco-editor/react';
 
 type YamlEditorCardProps = {
   value: string;
@@ -24,7 +25,7 @@ type YamlEditorCardProps = {
   onExpand?: () => void;
   isLinting?: boolean;
   options?: editor.IStandaloneEditorConstructionOptions;
-};
+} & Omit<EditorProps, 'onChange'>;
 
 export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
   value,
@@ -36,6 +37,7 @@ export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
   onExpand,
   isLinting = false,
   options,
+  ...rest
 }) => {
   // When height is 100%, use flex layout to properly fill the container
   const isFlexHeight = height === '100%';
@@ -82,7 +84,7 @@ export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
           }
           style={isFlexHeight ? undefined : { height }}
         >
-          <YamlEditor onChange={(val) => onChange(val || '')} options={options} value={value} />
+          <YamlEditor {...rest} onChange={(val) => onChange(val || '')} options={options} value={value} />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/ui/yaml/yaml-editor.tsx b/frontend/src/components/ui/yaml/yaml-editor.tsx
index 57627b58b..90466f120 100644
--- a/frontend/src/components/ui/yaml/yaml-editor.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor.tsx
@@ -32,7 +32,7 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   scrollBeyondLastLine: false,
   cursorBlinking: 'phase',
   lineNumbersMinChars: 3,
-  lineDecorationsWidth: 0,
+  lineDecorationsWidth: 8,
   overviewRulerBorder: false,
   scrollbar: {
     alwaysConsumeMouseWheel: false,
diff --git a/frontend/src/react-query/api/connect.tsx b/frontend/src/react-query/api/connect.tsx
index 1c1f6d812..15430e7d8 100644
--- a/frontend/src/react-query/api/connect.tsx
+++ b/frontend/src/react-query/api/connect.tsx
@@ -23,6 +23,7 @@ export const useListComponentsQuery = (
     gcTime: 1000 * 60 * 60 * 24, // 24 hours
     refetchOnMount: false,
     refetchOnWindowFocus: false,
+    retry: 3,
     ...options,
   });
 };
diff --git a/frontend/src/react-query/api/pipeline.tsx b/frontend/src/react-query/api/pipeline.tsx
index 9ba18d401..0855a419d 100644
--- a/frontend/src/react-query/api/pipeline.tsx
+++ b/frontend/src/react-query/api/pipeline.tsx
@@ -161,6 +161,13 @@ export const useStartPipelineMutation = () => {
           cardinality: 'infinite',
         }),
       });
+      await queryClient.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: PipelineService.method.getPipeline,
+          cardinality: 'finite',
+        }),
+        exact: false,
+      });
     },
     onError: (error) =>
       formatToastErrorMessageGRPC({
@@ -182,6 +189,13 @@ export const useStopPipelineMutation = () => {
           cardinality: 'infinite',
         }),
       });
+      await queryClient.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: PipelineService.method.getPipeline,
+          cardinality: 'finite',
+        }),
+        exact: false,
+      });
     },
     onError: (error) =>
       formatToastErrorMessageGRPC({

From cbb25e2f304ca249889d29fda571637f57e7777b Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Sun, 23 Nov 2025 15:55:33 -0800
Subject: [PATCH 04/13] feat: remaining bug bash fixes

---
 .../onboarding/add-secrets-card.tsx           |  94 +++++++++++--
 .../onboarding/add-secrets-dialog.tsx         |   3 +
 .../rp-connect/onboarding/add-topic-step.tsx  |   8 +-
 .../rp-connect/onboarding/add-user-step.tsx   |   9 +-
 .../rp-connect/onboarding/connect-tiles.tsx   |  22 ++-
 .../onboarding/create-pipeline-sidebar.tsx    |  45 +------
 .../onboarding/onboarding-wizard.tsx          |  42 +++++-
 .../pages/rp-connect/pipeline/footer.tsx      |   2 +
 .../pages/rp-connect/pipeline/index.tsx       |  99 +++++++-------
 .../pages/rp-connect/types/wizard.ts          |   8 +-
 .../components/pages/rp-connect/utils/yaml.ts |  55 +++++---
 .../redpanda-ui/components/typography.tsx     |  17 ++-
 .../ui/lint-hint/lint-hint-list.tsx           |  30 +++--
 .../ui/secret/quick-add-secrets.tsx           | 127 +++++++++++++-----
 .../components/ui/yaml/yaml-editor-card.tsx   |   8 +-
 .../src/components/ui/yaml/yaml-editor.tsx    |  50 +++++--
 frontend/src/hooks/use-debounced-value.ts     |  23 ++++
 frontend/src/react-query/api/connect.tsx      |  23 +++-
 18 files changed, 468 insertions(+), 197 deletions(-)
 create mode 100644 frontend/src/hooks/use-debounced-value.ts

diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
index 299d23ea2..f7e876d1a 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
@@ -2,27 +2,48 @@ import { Badge } from 'components/redpanda-ui/components/badge';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/redpanda-ui/components/collapsible';
-import { Text } from 'components/redpanda-ui/components/typography';
+import { InlineCode, Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
+import { extractSecretReferences, getUniqueSecretNames } from 'components/ui/secret/secret-detection';
 import { Check, ChevronDown, PlusIcon } from 'lucide-react';
 import type { editor } from 'monaco-editor';
 import { useCallback, useMemo, useState } from 'react';
+import { useListSecretsQuery } from 'react-query/api/secret';
+
+import { AddSecretsDialog } from './add-secrets-dialog';
 
 export const AddSecretsCard = ({
-  detectedSecrets,
-  missingSecrets,
-  existingSecrets,
+  editorContent,
   editorInstance,
-  onOpenDialog,
 }: {
-  detectedSecrets: string[];
-  missingSecrets: string[];
-  existingSecrets: string[];
+  editorContent: string;
   editorInstance: editor.IStandaloneCodeEditor | null;
-  onOpenDialog: () => void;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
+
+  // Fetch secrets
+  const { data: secretsResponse, refetch: refetchSecrets } = useListSecretsQuery({});
+  const existingSecrets = useMemo(
+    () => (secretsResponse?.secrets ? secretsResponse.secrets.map((s) => s?.id || '') : []),
+    [secretsResponse]
+  );
+
+  // Detect secrets in editor content
+  const detectedSecrets = useMemo(() => {
+    if (!editorContent) {
+      return [];
+    }
+    const references = extractSecretReferences(editorContent);
+    return getUniqueSecretNames(references);
+  }, [editorContent]);
+
   const detectedSecretsSet = useMemo(() => new Set(detectedSecrets), [detectedSecrets]);
+  const existingSecretsSet = useMemo(() => new Set(existingSecrets), [existingSecrets]);
+  const missingSecrets = useMemo(
+    () => detectedSecrets.filter((secret) => !existingSecretsSet.has(secret)),
+    [detectedSecrets, existingSecretsSet]
+  );
 
   const categorizedSecrets = useMemo(() => {
     const used: string[] = [];
@@ -85,6 +106,40 @@ export const AddSecretsCard = ({
     },
     [editorInstance]
   );
+
+  const handleSecretsCreated = useCallback(() => {
+    refetchSecrets();
+    setIsSecretsDialogOpen(false);
+  }, [refetchSecrets]);
+
+  const handleOpenDialog = useCallback(() => {
+    setIsSecretsDialogOpen(true);
+  }, []);
+
+  const handleUpdateEditorContent = useCallback(
+    (oldName: string, newName: string) => {
+      if (!editorInstance) {
+        return;
+      }
+
+      const model = editorInstance.getModel();
+      if (!model) {
+        return;
+      }
+
+      // Find and replace all occurrences of ${secrets.oldName} with ${secrets.newName}
+      const oldPattern = `\${secrets.${oldName}}`;
+      const newPattern = `\${secrets.${newName}}`;
+      const content = model.getValue();
+      const updatedContent = content.replaceAll(oldPattern, newPattern);
+
+      if (content !== updatedContent) {
+        model.setValue(updatedContent);
+      }
+    },
+    [editorInstance]
+  );
+
   return (
     <Card>
       <CardHeader>
@@ -147,27 +202,38 @@ export const AddSecretsCard = ({
           )}
           {missingSecrets.length > 0 && (
             <div className="flex flex-col gap-2">
-              <Text variant="label">Missing secrets:</Text>
+              <Text className="text-destructive" variant="label">
+                Missing secrets:
+              </Text>
               <div className="flex flex-wrap gap-2">
                 {missingSecrets.map((secret) => (
                   <Badge
-                    className="cursor-pointer font-mono hover:opacity-80"
+                    className="cursor-pointer text-sm hover:opacity-80"
                     key={secret}
-                    onClick={onOpenDialog}
+                    onClick={handleOpenDialog}
                     variant="red"
                   >
-                    Create $secrets.{secret}
+                    Create <InlineCode className="bg-transparent">$secrets.{secret}</InlineCode>
+                    <PlusIcon className="size-4" />
                   </Badge>
                 ))}
               </div>
             </div>
           )}
-          <Button onClick={onOpenDialog} size={existingSecrets.length > 0 ? 'sm' : 'default'} variant="outline">
+          <Button onClick={handleOpenDialog} size={existingSecrets.length > 0 ? 'sm' : 'default'} variant="outline">
             {existingSecrets.length > 0 ? 'Add more secrets' : 'Add secret'}
             <PlusIcon className="h-4 w-4" />
           </Button>
         </div>
       </CardContent>
+      <AddSecretsDialog
+        existingSecrets={existingSecrets}
+        isOpen={isSecretsDialogOpen}
+        missingSecrets={missingSecrets}
+        onClose={() => setIsSecretsDialogOpen(false)}
+        onSecretsCreated={handleSecretsCreated}
+        onUpdateEditorContent={handleUpdateEditorContent}
+      />
     </Card>
   );
 };
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-dialog.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-dialog.tsx
index fa1f33310..f3c730215 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-dialog.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-dialog.tsx
@@ -18,12 +18,14 @@ export const AddSecretsDialog = ({
   missingSecrets,
   existingSecrets,
   onSecretsCreated,
+  onUpdateEditorContent,
 }: {
   isOpen: boolean;
   onClose: () => void;
   missingSecrets: string[];
   existingSecrets: string[];
   onSecretsCreated: () => void;
+  onUpdateEditorContent?: (oldName: string, newName: string) => void;
 }) => {
   const [errorMessages, setErrorMessages] = useState<string[]>([]);
 
@@ -61,6 +63,7 @@ export const AddSecretsDialog = ({
             existingSecrets={existingSecrets}
             onError={handleError}
             onSecretsCreated={handleSecretsCreated}
+            onUpdateEditorContent={onUpdateEditorContent}
             requiredSecrets={missingSecrets}
             scopes={[Scope.REDPANDA_CONNECT]}
           />
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-topic-step.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-topic-step.tsx
index 177c0227f..1cd494057 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-topic-step.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-topic-step.tsx
@@ -48,10 +48,11 @@ import { isUsingDefaultRetentionSettings, parseTopicConfigFromExisting, TOPIC_FO
 
 interface AddTopicStepProps {
   defaultTopicName?: string;
+  onValidityChange?: (isValid: boolean) => void;
 }
 
 export const AddTopicStep = forwardRef<BaseStepRef<AddTopicFormData>, AddTopicStepProps & MotionProps>(
-  ({ defaultTopicName, ...motionProps }, ref) => {
+  ({ defaultTopicName, onValidityChange, ...motionProps }, ref) => {
     const queryClient = useQueryClient();
 
     const { data: topicList } = useLegacyListTopicsQuery(create(ListTopicsRequestSchema, {}), {
@@ -95,6 +96,11 @@ export const AddTopicStep = forwardRef<BaseStepRef<AddTopicFormData>, AddTopicSt
 
     const watchedTopicName = form.watch('topicName');
 
+    // Notify parent when validity changes
+    useEffect(() => {
+      onValidityChange?.(form.formState.isValid);
+    }, [form.formState.isValid, onValidityChange]);
+
     const existingTopicSelected = useMemo(() => {
       // Only check if the CURRENT form topic name matches an existing topic
       if (!watchedTopicName) {
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
index 03d4b45db..7b78f7eaa 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
@@ -34,7 +34,7 @@ import type { MotionProps } from 'motion/react';
 import { ACL_ResourceType } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
 import { listACLs } from 'protogen/redpanda/api/dataplane/v1/acl-ACLService_connectquery';
 import { listUsers } from 'protogen/redpanda/api/dataplane/v1/user-UserService_connectquery';
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useListUsersQuery } from 'react-query/api/user';
 import { LONG_LIVED_CACHE_STALE_TIME } from 'react-query/react-query.utils';
@@ -62,6 +62,7 @@ interface AddUserStepProps {
   topicName?: string;
   defaultConsumerGroup?: string;
   showConsumerGroupFields?: boolean;
+  onValidityChange?: (isValid: boolean) => void;
 }
 
 export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProps>(
@@ -72,6 +73,7 @@ export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProp
       topicName,
       defaultConsumerGroup,
       showConsumerGroupFields = false,
+      onValidityChange,
       ...motionProps
     },
     ref
@@ -114,6 +116,11 @@ export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProp
     const watchedPasswordLength = form.watch('passwordLength');
     const watchedConsumerGroup = form.watch('consumerGroup');
 
+    // Notify parent when validity changes
+    useEffect(() => {
+      onValidityChange?.(form.formState.isValid);
+    }, [form.formState.isValid, onValidityChange]);
+
     const existingUserSelected = useMemo(() => {
       // Only check if the CURRENT form username matches an existing user
       // Don't use persisted username to avoid showing existing user state when creating a new one
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 16f44025a..974642ddd 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -154,6 +154,7 @@ export type ConnectTilesProps = {
   additionalComponents?: ExtendedConnectComponentSpec[];
   componentTypeFilter?: ConnectComponentType[];
   onChange?: (connectionName: string, connectionType: ConnectComponentType) => void;
+  onValidityChange?: (isValid: boolean) => void;
   hideHeader?: boolean;
   hideFilters?: boolean;
   defaultConnectionName?: string;
@@ -174,6 +175,7 @@ export const ConnectTiles = memo(
         additionalComponents,
         componentTypeFilter,
         onChange,
+        onValidityChange,
         hideHeader,
         hideFilters,
         defaultConnectionName,
@@ -218,7 +220,7 @@ export const ConnectTiles = memo(
 
       const form = useForm<ConnectTilesListFormData>({
         resolver: zodResolver(connectTilesListFormSchema),
-        mode: 'onSubmit',
+        mode: 'onChange',
         defaultValues,
       });
 
@@ -257,6 +259,11 @@ export const ConnectTiles = memo(
         });
       }, [checkScrollable]);
 
+      // Notify parent when validity changes
+      useEffect(() => {
+        onValidityChange?.(form.formState.isValid);
+      }, [form.formState.isValid, onValidityChange]);
+
       useImperativeHandle(ref, () => ({
         triggerSubmit: async () => {
           const isValid = await form.trigger();
@@ -359,9 +366,16 @@ export const ConnectTiles = memo(
                               component={component}
                               key={uniqueKey}
                               onChange={() => {
-                                field.onChange(component.name);
-                                form.setValue('connectionType', component.type as ConnectComponentType);
-                                onChange?.(component.name, component.type as ConnectComponentType);
+                                if (isChecked) {
+                                  // Unselect if already selected
+                                  field.onChange('');
+                                  form.setValue('connectionType', '' as ConnectComponentType);
+                                } else {
+                                  // Select the component
+                                  field.onChange(component.name);
+                                  form.setValue('connectionType', component.type as ConnectComponentType);
+                                  onChange?.(component.name, component.type as ConnectComponentType);
+                                }
                               }}
                               uniqueKey={uniqueKey}
                             />
diff --git a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
index 83dcba309..8d7c3ec1e 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
@@ -1,16 +1,13 @@
 import { useDisclosure } from '@redpanda-data/ui';
 import { cn } from 'components/redpanda-ui/lib/utils';
-import { extractSecretReferences, getUniqueSecretNames } from 'components/ui/secret/secret-detection';
 import type { editor } from 'monaco-editor';
 import { memo, useCallback, useMemo, useState } from 'react';
-import { useListSecretsQuery } from 'react-query/api/secret';
 import { useOnboardingWizardDataStore } from 'state/onboarding-wizard-store';
 
 import { AddConnectorDialog } from './add-connector-dialog';
 import { AddConnectorsCard } from './add-connectors-card';
 import { AddContextualVariablesCard } from './add-contextual-variables-card';
 import { AddSecretsCard } from './add-secrets-card';
-import { AddSecretsDialog } from './add-secrets-dialog';
 import type { ConnectComponentSpec, ConnectComponentType } from '../types/schema';
 import { getConnectTemplate } from '../utils/yaml';
 
@@ -27,22 +24,6 @@ export const CreatePipelineSidebar = memo(
   ({ editorInstance, editorContent, setYamlContent, components }: CreatePipelineSidebarProps) => {
     const { isOpen: isAddConnectorOpen, onOpen: openAddConnector, onClose: closeAddConnector } = useDisclosure();
     const [selectedConnector, setSelectedConnector] = useState<ConnectComponentType | undefined>(undefined);
-    const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
-
-    // Fetch secrets internally
-    const { data: secretsResponse, refetch: refetchSecrets } = useListSecretsQuery({});
-    const existingSecrets = useMemo(
-      () => (secretsResponse?.secrets ? secretsResponse.secrets.map((s) => s?.id || '') : []),
-      [secretsResponse]
-    );
-
-    const detectedSecrets = useMemo(() => {
-      if (!editorContent) {
-        return [];
-      }
-      const references = extractSecretReferences(editorContent);
-      return getUniqueSecretNames(references);
-    }, [editorContent]);
 
     const hasInput = useMemo(() => editorContent.includes('input:'), [editorContent]);
     const hasOutput = useMemo(() => editorContent.includes('output:'), [editorContent]);
@@ -74,17 +55,6 @@ export const CreatePipelineSidebar = memo(
       [editorContent, components, setYamlContent, closeAddConnector]
     );
 
-    const existingSecretsSet = useMemo(() => new Set(existingSecrets), [existingSecrets]);
-    const missingSecrets = useMemo(
-      () => detectedSecrets.filter((secret) => !existingSecretsSet.has(secret)),
-      [detectedSecrets, existingSecretsSet]
-    );
-
-    const handleSecretsCreated = useCallback(() => {
-      refetchSecrets();
-      setIsSecretsDialogOpen(false);
-    }, [refetchSecrets]);
-
     if (editorInstance === null) {
       return <div className={sidebarClassNames} />;
     }
@@ -102,22 +72,9 @@ export const CreatePipelineSidebar = memo(
           hasOutput={hasOutput}
           onAddConnector={handleConnectorTypeChange}
         />
-        <AddSecretsCard
-          detectedSecrets={detectedSecrets}
-          editorInstance={editorInstance}
-          existingSecrets={existingSecrets}
-          missingSecrets={missingSecrets}
-          onOpenDialog={() => setIsSecretsDialogOpen(true)}
-        />
+        <AddSecretsCard editorContent={editorContent} editorInstance={editorInstance} />
         <AddContextualVariablesCard editorContent={editorContent} editorInstance={editorInstance} />
 
-        <AddSecretsDialog
-          existingSecrets={existingSecrets}
-          isOpen={isSecretsDialogOpen}
-          missingSecrets={missingSecrets}
-          onClose={() => setIsSecretsDialogOpen(false)}
-          onSecretsCreated={handleSecretsCreated}
-        />
         <AddConnectorDialog
           connectorType={selectedConnector}
           isOpen={isAddConnectorOpen}
diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index 7fe4e5ea3..b6a7589d1 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -52,7 +52,7 @@ export const ConnectOnboardingWizard = ({
       type: 'custom',
       status: 0,
       summary: '',
-      description: '',
+      description: 'Build your own pipeline from scratch.',
       categories: [],
       version: '',
       examples: [],
@@ -133,6 +133,14 @@ export const ConnectOnboardingWizard = ({
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Track form validity for each step
+  const [stepValidity, setStepValidity] = useState<Record<string, boolean>>({
+    [WizardStep.ADD_INPUT]: false,
+    [WizardStep.ADD_OUTPUT]: false,
+    [WizardStep.ADD_TOPIC]: false,
+    [WizardStep.ADD_USER]: false,
+  });
+
   useEffect(() => {
     runInAction(() => {
       uiState.pageTitle = 'Create Pipeline';
@@ -147,11 +155,6 @@ export const ConnectOnboardingWizard = ({
     if (methods.current.id === WizardStep.ADD_INPUT) {
       resetOnboardingWizardStore();
     } else if (methods.current.id === WizardStep.ADD_OUTPUT) {
-      const { setWizardData: _, ...currentWizardData } = useOnboardingWizardDataStore.getState();
-      setWizardData({
-        input: currentWizardData.input,
-        output: {},
-      });
       setTopicData({});
       setUserData({});
     }
@@ -313,6 +316,23 @@ export const ConnectOnboardingWizard = ({
     }
   }, [onCancelProp, navigate, resetOnboardingWizardStore, searchParams]);
 
+  // Callbacks to update validity for each step
+  const handleInputValidityChange = useCallback((isValid: boolean) => {
+    setStepValidity((prev) => ({ ...prev, [WizardStep.ADD_INPUT]: isValid }));
+  }, []);
+
+  const handleOutputValidityChange = useCallback((isValid: boolean) => {
+    setStepValidity((prev) => ({ ...prev, [WizardStep.ADD_OUTPUT]: isValid }));
+  }, []);
+
+  const handleTopicValidityChange = useCallback((isValid: boolean) => {
+    setStepValidity((prev) => ({ ...prev, [WizardStep.ADD_TOPIC]: isValid }));
+  }, []);
+
+  const handleUserValidityChange = useCallback((isValid: boolean) => {
+    setStepValidity((prev) => ({ ...prev, [WizardStep.ADD_USER]: isValid }));
+  }, []);
+
   return (
     <PageContent className={className}>
       <WizardStepper.Provider className="space-y-2" initialStep={initialStep}>
@@ -348,6 +368,7 @@ export const ConnectOnboardingWizard = ({
                       defaultConnectionName={persistedInputConnectionName}
                       defaultConnectionType="input"
                       key={`input-connector-tiles-${persistedInputConnectionName || 'empty'}`}
+                      onValidityChange={handleInputValidityChange}
                       ref={addInputStepRef}
                       tileWrapperClassName="min-h-[300px] max-h-[35vh]"
                       title="Stream data to your pipeline"
@@ -361,6 +382,7 @@ export const ConnectOnboardingWizard = ({
                       defaultConnectionName={persistedOutputConnectionName}
                       defaultConnectionType="output"
                       key={`output-connector-tiles-${persistedOutputConnectionName || 'empty'}`}
+                      onValidityChange={handleOutputValidityChange}
                       ref={addOutputStepRef}
                       tileWrapperClassName="min-h-[300px] max-h-[35vh]"
                       title="Stream data from your pipeline"
@@ -371,6 +393,7 @@ export const ConnectOnboardingWizard = ({
                       {...stepMotionProps}
                       defaultTopicName={persistedTopicName}
                       key="add-topic-step"
+                      onValidityChange={handleTopicValidityChange}
                       ref={addTopicStepRef}
                     />
                   ),
@@ -381,6 +404,7 @@ export const ConnectOnboardingWizard = ({
                       defaultSaslMechanism={persistedUserSaslMechanism}
                       defaultUsername={persistedUsername}
                       key="add-user-step"
+                      onValidityChange={handleUserValidityChange}
                       ref={addUserStepRef}
                       showConsumerGroupFields={persistedInputIsRedpandaComponent}
                       topicName={persistedTopicName}
@@ -422,7 +446,11 @@ export const ConnectOnboardingWizard = ({
                   </Button>
                 )}
                 {!methods.isLast && (
-                  <Button className="min-w-[70px]" disabled={isSubmitting} onClick={() => handleNext(methods)}>
+                  <Button
+                    className="min-w-[70px]"
+                    disabled={isSubmitting || !stepValidity[methods.current.id]}
+                    onClick={() => handleNext(methods)}
+                  >
                     {isSubmitting ? (
                       <Spinner />
                     ) : (
diff --git a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
index 83357cb8f..f74991eae 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
@@ -10,6 +10,7 @@
  */
 
 import { Button } from 'components/redpanda-ui/components/button';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -35,6 +36,7 @@ export const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) =
       </Button>
       <Button disabled={isSaving} onClick={onSave}>
         {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
+        {isSaving && <Spinner size="sm" />}
       </Button>
     </div>
   );
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index f0fc1611a..d90dd2268 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -18,7 +18,9 @@ import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
 import { YamlEditorCard } from 'components/ui/yaml/yaml-editor-card';
 import { useDebounce } from 'hooks/use-debounce';
+import { useDebouncedValue } from 'hooks/use-debounced-value';
 import type { editor } from 'monaco-editor';
+import type { JSONSchema } from 'monaco-yaml';
 import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
 import {
   CreatePipelineRequestSchema,
@@ -26,14 +28,17 @@ import {
 } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
 import {
   CreatePipelineRequestSchema as CreatePipelineRequestSchemaDataPlane,
-  LintPipelineConfigRequestSchema,
   PipelineCreateSchema,
   PipelineUpdateSchema,
   UpdatePipelineRequestSchema as UpdatePipelineRequestSchemaDataPlane,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useLintPipelineConfigMutation, useListComponentsQuery } from 'react-query/api/connect';
+import {
+  useGetPipelineServiceConfigSchemaQuery,
+  useLintPipelineConfigQuery,
+  useListComponentsQuery,
+} from 'react-query/api/connect';
 import { useCreatePipelineMutation, useGetPipelineQuery, useUpdatePipelineMutation } from 'react-query/api/pipeline';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useOnboardingWizardDataStore, useOnboardingYamlContentStore } from 'state/onboarding-wizard-store';
@@ -67,6 +72,7 @@ export default function PipelinePage() {
   const isServerlessMode = searchParams.get('serverless') === 'true';
   const hasInitializedServerless = useRef(false);
   const persistedYamlContent = useOnboardingYamlContentStore((state) => state.yamlContent);
+  const setPersistedYamlContent = useOnboardingYamlContentStore((state) => state.setYamlContent);
   const [editorInstance, setEditorInstance] = useState<null | editor.IStandaloneCodeEditor>(null);
 
   // Form state with validation
@@ -99,43 +105,50 @@ export default function PipelinePage() {
     [componentListResponse]
   );
 
-  // Mutations - only those used in this component
-  const createMutation = useCreatePipelineMutation();
-  const updateMutation = useUpdatePipelineMutation();
-
-  // Linting
-  const lintMutation = useLintPipelineConfigMutation();
-  const handleLint = async (yaml: string) => {
-    if (!yaml || mode === 'view') {
-      return;
+  // Fetch JSON Schema from backend for YAML editor
+  const { data: schemaResponse } = useGetPipelineServiceConfigSchemaQuery();
+  const yamlEditorSchema = useMemo(() => {
+    if (!schemaResponse?.configSchema) {
+      return undefined;
     }
 
     try {
-      const response = await lintMutation.mutateAsync(create(LintPipelineConfigRequestSchema, { configYaml: yaml }));
-      const hints: Record<string, LintHint> = {};
-      for (const [idx, hint] of Object.entries(response.lintHints)) {
-        hints[`hint_${idx}`] = hint;
-      }
-      setLintHints(hints);
-    } catch (err) {
-      setLintHints(extractLintHintsFromError(err));
+      const parsed = JSON.parse(schemaResponse.configSchema);
+      return {
+        definitions: parsed.definitions as Record<string, JSONSchema> | undefined,
+        properties: parsed.properties as Record<string, JSONSchema> | undefined,
+      };
+    } catch {
+      // Fallback to undefined if schema parsing fails - editor will use basic YAML schema
+      return undefined;
     }
-  };
+  }, [schemaResponse]);
+
+  // Mutations - only those used in this component
+  const createMutation = useCreatePipelineMutation();
+  const updateMutation = useUpdatePipelineMutation();
 
-  const debouncedLint = useDebounce(handleLint, 500);
+  // Linting - debounce the input to avoid excessive API calls
+  const debouncedYamlContent = useDebouncedValue(yamlContent, 500);
 
-  // Zustand store syncing (CREATE mode only)
-  const debouncedSyncToStore = useDebounce(
-    useCallback(
-      (yaml: string) => {
-        if (mode === 'create') {
-          useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent: yaml });
+  const { data: lintResponse, isPending: isLinting } = useLintPipelineConfigQuery(debouncedYamlContent, {
+    enabled: mode !== 'view',
+  });
+
+  // Process lint results when they arrive
+  useEffect(() => {
+    if (lintResponse) {
+      try {
+        const hints: Record<string, LintHint> = {};
+        for (const [idx, hint] of Object.entries(lintResponse?.lintHints || [])) {
+          hints[`hint_${idx}`] = hint;
         }
-      },
-      [mode]
-    ),
-    500
-  );
+        setLintHints(hints);
+      } catch (err) {
+        setLintHints(extractLintHintsFromError(err));
+      }
+    }
+  }, [lintResponse]);
 
   // Initialize form data from pipeline (edit/view)
   useEffect(() => {
@@ -323,18 +336,13 @@ export default function PipelinePage() {
     setYamlContent(newYaml);
   }, []);
 
-  const handleYamlChange = useCallback(
-    (value: string | undefined) => {
-      if (value) {
-        setYamlContent(value);
-        if (mode === 'create') {
-          debouncedSyncToStore(value);
-        }
-        debouncedLint(value);
-      }
-    },
-    [debouncedLint, debouncedSyncToStore, mode]
-  );
+  const handleYamlChange = useDebounce((value: string) => {
+    setYamlContent(value);
+    // only when we're in create mode (which is always embedded within the wizard) we sync to the zustand store
+    if (mode === 'create') {
+      setPersistedYamlContent({ yamlContent: value });
+    }
+  }, 500);
 
   const isSaving = useMemo(
     () => createMutation.isPending || updateMutation.isPending,
@@ -369,6 +377,7 @@ export default function PipelinePage() {
           options={{
             readOnly: mode === 'view',
           }}
+          schema={yamlEditorSchema}
           value={yamlContent}
         />
 
@@ -377,7 +386,7 @@ export default function PipelinePage() {
           <div className="mt-4">
             <Alert variant="destructive">
               <AlertDescription>
-                <LintHintList className="w-full" lintHints={lintHints} />
+                <LintHintList className="w-full" isPending={isLinting} lintHints={lintHints} />
               </AlertDescription>
             </Alert>
           </div>
diff --git a/frontend/src/components/pages/rp-connect/types/wizard.ts b/frontend/src/components/pages/rp-connect/types/wizard.ts
index 30a918143..3fdf1bf84 100644
--- a/frontend/src/components/pages/rp-connect/types/wizard.ts
+++ b/frontend/src/components/pages/rp-connect/types/wizard.ts
@@ -12,8 +12,8 @@ import { z } from 'zod';
 import { CONNECT_COMPONENT_TYPE } from './schema';
 
 export const connectTilesListFormSchema = z.object({
-  connectionName: z.optional(z.string().min(1, { message: 'Please select a connection method.' })),
-  connectionType: z.optional(z.enum(CONNECT_COMPONENT_TYPE)),
+  connectionName: z.string().min(1, { message: 'Please select a connection method.' }),
+  connectionType: z.enum(CONNECT_COMPONENT_TYPE),
 });
 
 export type ConnectTilesListFormData = z.infer<typeof connectTilesListFormSchema>;
@@ -93,8 +93,8 @@ export const addUserFormSchema = z.object({
 export type AddUserFormData = z.infer<typeof addUserFormSchema>;
 
 const onboardingWizardFormSchema = z.object({
-  input: connectTilesListFormSchema,
-  output: connectTilesListFormSchema,
+  input: connectTilesListFormSchema.optional(),
+  output: connectTilesListFormSchema.optional(),
   topicName: z.optional(addTopicFormSchema.shape.topicName),
   username: z.optional(addUserFormSchema.shape.username),
 });
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.ts b/frontend/src/components/pages/rp-connect/utils/yaml.ts
index f0ead6c91..80837d842 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.ts
@@ -271,22 +271,23 @@ export const mergeConnectConfigs = (
     doc = parseDocument(existingYaml);
   } catch (error) {
     const description = error instanceof Error ? error.message : String(error);
-    toast.error('Failed to parse YAML', {
+    toast.error('Cannot merge: YAML has structural errors', {
       description,
     });
-    return newConfigObject;
+    return undefined; // Keep existing YAML in editor
   }
 
   const componentType = detectComponentType(newConfigObject, doc);
-  // const unhandledArrayPaths = findUnhandledArrayMergePaths(newConfigObject, doc);
-
-  // if (unhandledArrayPaths.length > 0) {
-  //   toast.error('Unable to merge array fields', {
-  //     description: `Existing YAML arrays at ${unhandledArrayPaths.join(', ')} will be replaced by generated values.`,
-  //   });
-  // }
 
-  mergeByComponentType(componentType, doc, newConfigObject);
+  try {
+    mergeByComponentType(componentType, doc, newConfigObject);
+  } catch (error) {
+    const description = error instanceof Error ? error.message : String(error);
+    toast.error('Cannot merge: Merge operation failed', {
+      description,
+    });
+    return undefined; // Keep existing YAML in editor
+  }
 
   return doc;
 };
@@ -405,11 +406,11 @@ export const configToYaml = (
   configObject: Document.Parsed | Partial<ConnectConfigObject> | undefined,
   componentSpec?: ConnectComponentSpec
 ): string => {
-  try {
-    if (!configObject) {
-      return '';
-    }
+  if (!configObject) {
+    return '';
+  }
 
+  try {
     let doc: Document.Parsed | Document;
 
     if (typeof (configObject as Document.Parsed).getIn === 'function') {
@@ -428,8 +429,15 @@ export const configToYaml = (
     let yamlString = yamlStringify(doc, yamlConfig);
     yamlString = addRootSpacing(yamlString);
     return yamlString;
-  } catch (_error) {
-    return JSON.stringify(configObject, null, 2);
+  } catch (error) {
+    const description = error instanceof Error ? error.message : String(error);
+    toast.error('Failed to generate YAML', {
+      description,
+    });
+
+    // Return empty string - the existing YAML in the editor will be preserved
+    // This prevents JSON output from appearing
+    return '';
   }
 };
 
@@ -469,7 +477,20 @@ export const getConnectTemplate = ({
   // Phase 2 & 3: Merge with existing (if any) and convert to YAML
   if (existingYaml) {
     const mergedConfig = mergeConnectConfigs(existingYaml, newConfigObject);
-    return configToYaml(mergedConfig, spec);
+
+    // If merge failed (returned undefined), keep existing YAML
+    if (!mergedConfig) {
+      return existingYaml;
+    }
+
+    const yamlResult = configToYaml(mergedConfig, spec);
+
+    // If YAML conversion failed (returned empty), keep existing YAML
+    if (!yamlResult) {
+      return existingYaml;
+    }
+
+    return yamlResult;
   }
 
   return configToYaml(newConfigObject, spec);
diff --git a/frontend/src/components/redpanda-ui/components/typography.tsx b/frontend/src/components/redpanda-ui/components/typography.tsx
index 2637c8a7a..3dffbf07d 100644
--- a/frontend/src/components/redpanda-ui/components/typography.tsx
+++ b/frontend/src/components/redpanda-ui/components/typography.tsx
@@ -215,16 +215,29 @@ export function Link({ className, children, testId, ...props }: LinkProps) {
   );
 }
 
+const preVariants = cva('bg-muted rounded-md text-sm overflow-y-auto', {
+  variants: {
+    variant: {
+      default: 'p-4 my-6',
+      dense: 'p-2',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
 // Preformatted Code Block Component
 interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
   children: React.ReactNode;
   testId?: string;
+  variant?: 'default' | 'dense';
 }
 
-export function Pre({ className, children, testId, ...props }: PreProps) {
+export function Pre({ className, children, testId, variant, ...props }: PreProps) {
   return (
     <pre
-      className={cn('bg-muted rounded-md p-4 my-6 text-sm overflow-y-auto', className)}
+      className={cn(preVariants({ variant }), className)}
       data-testid={testId}
       {...props}
     >
diff --git a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
index 37e200aa9..4448047e4 100644
--- a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
+++ b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
@@ -8,18 +8,21 @@
  * by the Apache License, Version 2.0
  */
 
-import { Text } from 'components/redpanda-ui/components/typography';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { Pre, Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { PencilRuler } from 'lucide-react';
 import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
+import { memo } from 'react';
 
 type LintHintListProps = {
   lintHints: Record<string, LintHint>;
   className?: string;
+  isPending?: boolean;
 };
 
-export const LintHintList: React.FC<LintHintListProps> = ({ className, lintHints }) => {
-  if (!lintHints || Object.keys(lintHints).length === 0) {
+export const LintHintList: React.FC<LintHintListProps> = memo(({ className, lintHints, isPending }) => {
+  if (!lintHints || Object.keys(lintHints).length === 0 && !isPending) {
     return null;
   }
 
@@ -30,24 +33,25 @@ export const LintHintList: React.FC<LintHintListProps> = ({ className, lintHints
         <Text className="font-medium" variant="label">
           Linting issues
         </Text>
+        {isPending && <Spinner size="sm" />}
       </div>
       <div className="overflow-hidden rounded-lg border border-gray-200 bg-gray-50">
-        <div className="space-y-3 p-3">
+        <div className="flex flex-col gap-4 p-3">
           {Object.entries(lintHints).map(([toolName, hint]) => (
-            <div className="space-y-1" key={toolName}>
+            <div className="flex-col flex gap-1.5" key={toolName}>
               {hint.line > 0 ? (
                 <div className="flex flex-col gap-1">
-                  <Text className="font-medium text-gray-600 text-xs">
+                  <Pre variant="dense">
                     Line {hint.line}, Col {hint.column}
-                  </Text>
-                  <Text className="rounded border bg-white px-2 py-1 font-mono text-gray-800 text-sm leading-relaxed">
+                  </Pre>
+                  <Pre variant="dense">
                     {hint.hint}
-                  </Text>
+                  </Pre>
                 </div>
               ) : (
-                <Text className="rounded border bg-white px-2 py-1 font-mono text-gray-800 text-sm leading-relaxed">
+                <Pre variant="dense">
                   {hint.hint}
-                </Text>
+                </Pre>
               )}
               {hint.lintType && (
                 <Text className="font-medium text-gray-500 text-xs uppercase tracking-wide">{hint.lintType}</Text>
@@ -58,4 +62,6 @@ export const LintHintList: React.FC<LintHintListProps> = ({ className, lintHints
       </div>
     </div>
   );
-};
+});
+
+LintHintList.displayName = 'LintHintList';
diff --git a/frontend/src/components/ui/secret/quick-add-secrets.tsx b/frontend/src/components/ui/secret/quick-add-secrets.tsx
index f96225dca..a914e8885 100644
--- a/frontend/src/components/ui/secret/quick-add-secrets.tsx
+++ b/frontend/src/components/ui/secret/quick-add-secrets.tsx
@@ -35,7 +35,7 @@ import {
   type Scope,
 } from 'protogen/redpanda/api/dataplane/v1/secret_pb';
 import type React from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useCreateSecretMutation } from 'react-query/api/secret';
 import { toast } from 'sonner';
@@ -52,6 +52,7 @@ type QuickAddSecretsProps = {
   enableNewSecrets?: boolean;
   hideHeader?: boolean;
   onError?: (errors: string[]) => void;
+  onUpdateEditorContent?: (oldName: string, newName: string) => void;
 };
 
 const SecretFormSchema = z.record(
@@ -86,19 +87,50 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
   onSecretsCreated,
   enableNewSecrets = false,
   onError,
+  onUpdateEditorContent,
 }) => {
-  const { mutateAsync: createSecret, isPending: isCreateSecretPending } = useCreateSecretMutation();
+  const { mutateAsync: createSecret } = useCreateSecretMutation();
   const [createdSecrets, setCreatedSecrets] = useState<string[]>([]);
   const [newlyCreatedSecrets, setNewlyCreatedSecrets] = useState<string[]>([]);
 
-  const missingSecrets = requiredSecrets.filter(
-    (secret) => !(existingSecrets.includes(secret) || createdSecrets.includes(secret))
-  );
+  /**
+   * Normalizes secret name to uppercase and validates characters
+   * Secrets are always stored in uppercase
+   */
+  const normalizeSecretName = (name: string): string => {
+    // Convert to uppercase and replace invalid characters with underscores
+    return name.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+  };
+  
+  // Create sets of uppercase normalized names for efficient lookup
+  const existingSecretsSet = new Set(existingSecrets.map(normalizeSecretName));
+  const createdSecretsSet = new Set(createdSecrets.map(normalizeSecretName));
+  
+  // Normalize and deduplicate missing secrets to uppercase
+  const missingSecretsMap = useMemo(() => {
+    const map = new Map<string, string>(); // normalized -> original
+    for (const secret of requiredSecrets) {
+      const normalized = normalizeSecretName(secret);
+      if (!existingSecretsSet.has(normalized) && !createdSecretsSet.has(normalized)) {
+        map.set(normalized, secret);
+      }
+    }
+    return map;
+  }, [requiredSecrets, existingSecretsSet, createdSecretsSet]);
+  
+  const missingSecrets = Array.from(missingSecretsMap.keys());
+
+  // Memoize form key to force remount when missing secrets change
+  // This ensures form state resets when secrets are created (via query cache invalidation)
+  const formKey = useMemo(() => missingSecrets.sort().join(','), [missingSecrets]);
 
   const form = useForm<SecretFormData>({
     resolver: zodResolver(SecretFormSchema),
     defaultValues: Object.fromEntries(
-      missingSecrets.map((secretName) => [secretName, { value: defaultValues[secretName] || '' }])
+      missingSecrets.map((normalizedName) => {
+        const originalName = missingSecretsMap.get(normalizedName) || normalizedName;
+        return [normalizedName, { value: defaultValues[originalName] || defaultValues[normalizedName] || '' }];
+      })
     ),
   });
 
@@ -111,14 +143,23 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
   });
 
   const handleCreateSecrets = async (data: SecretFormData) => {
-    const secretEntries = Object.entries(data);
+    // Filter out secrets that have already been created
+    const secretEntries = Object.entries(data).filter(([normalizedSecretName]) => {
+      return !(existingSecretsSet.has(normalizedSecretName) || createdSecretsSet.has(normalizedSecretName));
+    });
+
+    if (secretEntries.length === 0) {
+      toast.info('All secrets have already been created');
+      return;
+    }
+
     const errors: Array<{ secretName: string; error: ConnectError }> = [];
     const successfulSecrets: string[] = [];
 
     await Promise.allSettled(
-      secretEntries.map(([secretName, { value }]) => {
+      secretEntries.map(([normalizedSecretName, { value }]) => {
         const dataPlaneRequest = create(CreateSecretRequestSchemaDataPlane, {
-          id: secretName,
+          id: normalizedSecretName,
           secretData: base64ToUInt8Array(encodeBase64(value)),
           scopes,
           labels: {},
@@ -130,10 +171,16 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
           }),
           {
             onSuccess: () => {
-              successfulSecrets.push(secretName);
+              successfulSecrets.push(normalizedSecretName);
+              
+              // Update editor content if the original name had incorrect casing
+              const originalName = missingSecretsMap.get(normalizedSecretName);
+              if (originalName && originalName !== normalizedSecretName && onUpdateEditorContent) {
+                onUpdateEditorContent(originalName, normalizedSecretName);
+              }
             },
             onError: (error) => {
-              errors.push({ secretName, error });
+              errors.push({ secretName: normalizedSecretName, error });
             },
           }
         );
@@ -166,9 +213,23 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
   };
 
   const handleCreateNewSecret = async (data: NewSecretFormData) => {
+    // Normalize the secret name to uppercase
+    const normalizedName = normalizeSecretName(data.name);
+    
+    // Check if this secret already exists
+    if (existingSecretsSet.has(normalizedName) || createdSecretsSet.has(normalizedName)) {
+      const errorMessage = `Secret "${normalizedName}" already exists`;
+      if (onError) {
+        onError([errorMessage]);
+      } else {
+        toast.error(errorMessage);
+      }
+      return;
+    }
+
     try {
       const dataPlaneRequest = create(CreateSecretRequestSchemaDataPlane, {
-        id: data.name,
+        id: normalizedName,
         secretData: base64ToUInt8Array(encodeBase64(data.value)),
         scopes,
         labels: {},
@@ -181,19 +242,19 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
       );
 
       // Update created secrets state
-      setCreatedSecrets((prev) => [...prev, data.name]);
-      setNewlyCreatedSecrets((prev) => [...prev, data.name]);
+      setCreatedSecrets((prev) => [...prev, normalizedName]);
+      setNewlyCreatedSecrets((prev) => [...prev, normalizedName]);
       // Call onSecretsCreated callback
-      onSecretsCreated?.([data.name]);
+      onSecretsCreated?.([normalizedName]);
       // Reset form
       newSecretForm.reset();
 
-      toast.success(`Secret "${data.name}" created successfully`);
+      toast.success(`Secret "${normalizedName}" created successfully`);
     } catch (error) {
       const errorMessage = formatToastErrorMessageGRPC({
         error: error as ConnectError,
         action: 'create',
-        entity: `secret ${data.name}`,
+        entity: `secret ${normalizedName}`,
       });
 
       if (onError) {
@@ -220,31 +281,31 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
-            <Alert className="border-amber-200 bg-amber-50">
-              <AlertTriangle className="h-4 w-4 text-amber-600" />
-              <AlertDescription className="text-amber-800">
+            <Alert variant="destructive">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>
                 The tool requires secrets to function properly. Create them below before proceeding.
               </AlertDescription>
             </Alert>
 
             <div className="space-y-4">
               <div className="flex flex-col gap-2">
-                <Form {...form}>
+                <Form key={formKey} {...form}>
                   <form className="space-y-3" onSubmit={form.handleSubmit(handleCreateSecrets)}>
-                    {missingSecrets.map((secretName) => (
+                    {missingSecrets.map((normalizedSecretName) => (
                       <FormField
                         control={form.control}
-                        key={secretName}
-                        name={`${secretName}.value` as keyof SecretFormData}
+                        key={normalizedSecretName}
+                        name={`${normalizedSecretName}.value` as keyof SecretFormData}
                         render={({ field }) => (
                           <FormItem>
-                            <FormLabel className="font-medium font-mono text-sm">{secretName}</FormLabel>
+                            <FormLabel className="font-medium font-mono text-sm">{normalizedSecretName}</FormLabel>
                             <FormControl>
                               <Input
                                 name={field.name}
                                 onBlur={field.onBlur}
                                 onChange={field.onChange}
-                                placeholder={`Enter value for ${secretName}...`}
+                                placeholder={`Enter value for ${normalizedSecretName}...`}
                                 ref={field.ref}
                                 type="password"
                                 value={typeof field.value === 'string' ? field.value : field.value?.value || ''}
@@ -258,11 +319,11 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
 
                     <Button
                       className="w-full"
-                      disabled={isCreateSecretPending || !form.formState.isValid}
+                      disabled={form.formState.isSubmitting}
                       type="submit"
                       variant="secondary"
                     >
-                      {isCreateSecretPending ? (
+                      {form.formState.isSubmitting ? (
                         <div className="flex items-center gap-2">
                           <Loader2 className="h-4 w-4 animate-spin" />
                           <Text as="span">Creating...</Text>
@@ -321,10 +382,12 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
                           <Input
                             placeholder="e.g., API_KEY, DATABASE_PASSWORD"
                             {...field}
-                            onChange={(e) => field.onChange(e.target.value.toUpperCase())}
+                            onChange={(e) => field.onChange(normalizeSecretName(e.target.value))}
                           />
                         </FormControl>
-                        <FormDescription>Secrets are stored in uppercase</FormDescription>
+                        <FormDescription>
+                          Secrets are stored in uppercase. Invalid characters will be replaced with underscores.
+                        </FormDescription>
                         <FormMessage />
                       </FormItem>
                     )}
@@ -346,11 +409,11 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
 
                   <Button
                     className="w-full"
-                    disabled={isCreateSecretPending || !newSecretForm.formState.isValid}
+                    disabled={newSecretForm.formState.isSubmitting}
                     type="submit"
                     variant="secondary"
                   >
-                    {isCreateSecretPending ? (
+                    {newSecretForm.formState.isSubmitting ? (
                       <div className="flex items-center gap-2">
                         <Loader2 className="h-4 w-4 animate-spin" />
                         <Text as="span">Creating...</Text>
diff --git a/frontend/src/components/ui/yaml/yaml-editor-card.tsx b/frontend/src/components/ui/yaml/yaml-editor-card.tsx
index 56ca0e5ac..0e3287233 100644
--- a/frontend/src/components/ui/yaml/yaml-editor-card.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor-card.tsx
@@ -11,6 +11,7 @@
 import { Button } from 'components/redpanda-ui/components/button';
 import { Code, Maximize2, PencilRuler } from 'lucide-react';
 import type { editor } from 'monaco-editor';
+import type { JSONSchema } from 'monaco-yaml';
 
 import { YamlEditor } from './yaml-editor';
 import { EditorProps } from '@monaco-editor/react';
@@ -25,6 +26,10 @@ type YamlEditorCardProps = {
   onExpand?: () => void;
   isLinting?: boolean;
   options?: editor.IStandaloneEditorConstructionOptions;
+  schema?: {
+    definitions?: Record<string, JSONSchema>;
+    properties?: Record<string, JSONSchema>;
+  };
 } & Omit<EditorProps, 'onChange'>;
 
 export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
@@ -37,6 +42,7 @@ export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
   onExpand,
   isLinting = false,
   options,
+  schema,
   ...rest
 }) => {
   // When height is 100%, use flex layout to properly fill the container
@@ -84,7 +90,7 @@ export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
           }
           style={isFlexHeight ? undefined : { height }}
         >
-          <YamlEditor {...rest} onChange={(val) => onChange(val || '')} options={options} value={value} />
+          <YamlEditor {...rest} onChange={(val) => onChange(val || '')} options={options} schema={schema} value={value} />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/ui/yaml/yaml-editor.tsx b/frontend/src/components/ui/yaml/yaml-editor.tsx
index 90466f120..ca6dcd5af 100644
--- a/frontend/src/components/ui/yaml/yaml-editor.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor.tsx
@@ -12,11 +12,16 @@
 import Editor, { type EditorProps, type Monaco } from '@monaco-editor/react';
 import 'monaco-editor';
 import type { editor } from 'monaco-editor';
+import type { JSONSchema } from 'monaco-yaml';
 import { configureMonacoYaml, type MonacoYaml, type MonacoYamlOptions } from 'monaco-yaml';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export type YamlEditorProps = EditorProps & {
   'data-testid'?: string;
+  schema?: {
+    definitions?: Record<string, JSONSchema>;
+    properties?: Record<string, JSONSchema>;
+  };
 };
 
 const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
@@ -52,7 +57,7 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   },
 } as const;
 
-const monacoYamlOptions: MonacoYamlOptions = {
+const defaultFallbackSchema: MonacoYamlOptions = {
   enableSchemaRequest: false,
   format: true,
   completion: true,
@@ -66,13 +71,37 @@ const monacoYamlOptions: MonacoYamlOptions = {
       uri: 'http://example.com/yaml-schema.json',
     },
   ],
-} as MonacoYamlOptions;
+};
 
 export const YamlEditor = (props: YamlEditorProps) => {
-  const { options: givenOptions, ...rest } = props;
+  const { options: givenOptions, schema, ...rest } = props;
   const options = { ...defaultOptions, ...(givenOptions ?? {}) };
   const [yaml, setYaml] = useState<MonacoYaml | undefined>(undefined);
 
+  // Build Monaco YAML options with schema from props or fallback
+  const monacoYamlOptions = useMemo<MonacoYamlOptions>(() => {
+    if (schema?.definitions || schema?.properties) {
+      return {
+        enableSchemaRequest: false,
+        format: true,
+        completion: true,
+        validate: true,
+        schemas: [
+          {
+            fileMatch: ['**/*.yaml', '**/*.yml'],
+            schema: {
+              type: 'object',
+              ...(schema.definitions && { definitions: schema.definitions }),
+              ...(schema.properties && { properties: schema.properties }),
+            },
+            uri: 'https://redpanda-connect-schema.json',
+          },
+        ],
+      };
+    }
+    return defaultFallbackSchema;
+  }, [schema]);
+
   useEffect(
     () => () => {
       if (yaml) {
@@ -82,10 +111,14 @@ export const YamlEditor = (props: YamlEditorProps) => {
     [yaml]
   );
 
-  const setMonacoOptions = useCallback((monaco: Monaco) => {
-    const yamlConfig = configureMonacoYaml(monaco, monacoYamlOptions);
-    setYaml(yamlConfig);
-  }, []);
+
+  const setMonacoOptions = useCallback(
+    (monaco: Monaco) => {
+      const yamlConfig = configureMonacoYaml(monaco, monacoYamlOptions);
+      setYaml(yamlConfig);
+    },
+    [monacoYamlOptions]
+  );
 
   return (
     <Editor
@@ -94,7 +127,6 @@ export const YamlEditor = (props: YamlEditorProps) => {
       loading={<LoadingPlaceholder />}
       options={options}
       wrapperProps={{
-        className: 'kowlEditor',
         style: {
           minWidth: 0,
           width: '100%',
diff --git a/frontend/src/hooks/use-debounced-value.ts b/frontend/src/hooks/use-debounced-value.ts
new file mode 100644
index 000000000..10065da5d
--- /dev/null
+++ b/frontend/src/hooks/use-debounced-value.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook that returns a debounced version of a value
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds
+ * @returns The debounced value
+ */
+export const useDebouncedValue = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/frontend/src/react-query/api/connect.tsx b/frontend/src/react-query/api/connect.tsx
index 15430e7d8..0ca619299 100644
--- a/frontend/src/react-query/api/connect.tsx
+++ b/frontend/src/react-query/api/connect.tsx
@@ -1,18 +1,36 @@
 import { create } from '@bufbuild/protobuf';
 import type { GenMessage } from '@bufbuild/protobuf/codegenv1';
-import { useMutation, useQuery } from '@connectrpc/connect-query';
+import { useQuery } from '@connectrpc/connect-query';
 import {
+  GetPipelineServiceConfigSchemaRequestSchema,
+  type GetPipelineServiceConfigSchemaResponse,
   LintPipelineConfigRequestSchema,
   type LintPipelineConfigResponse,
   ListComponentsRequestSchema,
   type ListComponentsResponse,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import {
+  getPipelineServiceConfigSchema,
   lintPipelineConfig,
   listComponents,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline-PipelineService_connectquery';
 import type { QueryOptions } from 'react-query/react-query.utils';
 
+export const useGetPipelineServiceConfigSchemaQuery = (
+  options?: QueryOptions<GenMessage<GetPipelineServiceConfigSchemaResponse>, GetPipelineServiceConfigSchemaResponse>
+) => {
+  const request = create(GetPipelineServiceConfigSchemaRequestSchema, {});
+
+  return useQuery(getPipelineServiceConfigSchema, request, {
+    staleTime: 1000 * 60 * 60, // 1 hour
+    gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    retry: 3,
+    ...options,
+  });
+};
+
 export const useListComponentsQuery = (
   options?: QueryOptions<GenMessage<ListComponentsResponse>, ListComponentsResponse>
 ) => {
@@ -37,10 +55,7 @@ export const useLintPipelineConfigQuery = (
   const request = create(LintPipelineConfigRequestSchema, { configYaml });
 
   return useQuery(lintPipelineConfig, request, {
-    enabled: options?.enabled && configYaml.length > 0,
     staleTime: 0,
     ...options,
   });
 };
-
-export const useLintPipelineConfigMutation = () => useMutation(lintPipelineConfig);

From e0b30b82140216672efca7b2e1ebbb9babb5e3bb Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Sun, 23 Nov 2025 16:47:34 -0800
Subject: [PATCH 05/13] feat: few more

---
 .../components/pages/rp-connect/onboarding/connect-tiles.tsx  | 4 ++--
 .../pages/rp-connect/onboarding/onboarding-wizard.tsx         | 4 ++--
 frontend/src/components/pages/rp-connect/pipeline/footer.tsx  | 2 +-
 frontend/src/components/pages/rp-connect/pipeline/index.tsx   | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 974642ddd..5e3e3fe17 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -40,8 +40,8 @@ const PRIORITY_COMPONENTS = [
   'mongodb_cdc',
   'snowflake_streaming',
   'redpanda_migrator',
-  'kafka_franz',
-  'gcp_pubsub',
+  'mysql_cdc',
+  'snowflake_put',
   'slack',
   'sftp',
   'nats',
diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index b6a7589d1..483aa71c8 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -51,8 +51,8 @@ export const ConnectOnboardingWizard = ({
       name: 'custom',
       type: 'custom',
       status: 0,
-      summary: '',
-      description: 'Build your own pipeline from scratch.',
+      summary: 'Build your own pipeline from scratch.',
+      description: '',
       categories: [],
       version: '',
       examples: [],
diff --git a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
index f74991eae..391b26b67 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
@@ -34,7 +34,7 @@ export const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) =
       <Button disabled={isSaving} onClick={handleCancel} variant="outline">
         Cancel
       </Button>
-      <Button disabled={isSaving} onClick={onSave}>
+      <Button className="min-w-[70px]" disabled={isSaving} onClick={onSave}>
         {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
         {isSaving && <Spinner size="sm" />}
       </Button>
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index d90dd2268..f18600fc2 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -14,7 +14,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useToast } from '@redpanda-data/ui';
 import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
 import { Form } from 'components/redpanda-ui/components/form';
-import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { WaitingRedpanda } from 'components/redpanda-ui/components/waiting-redpanda';
 import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
 import { YamlEditorCard } from 'components/ui/yaml/yaml-editor-card';
 import { useDebounce } from 'hooks/use-debounce';
@@ -352,7 +352,7 @@ export default function PipelinePage() {
   if (isPipelineLoading) {
     return (
       <div className="flex h-full items-center justify-center">
-        <Spinner />
+        <WaitingRedpanda />
       </div>
     );
   }

From de278ef9321dc2ab769c51bdaf3619bfdc268baa Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Sun, 23 Nov 2025 17:21:00 -0800
Subject: [PATCH 06/13] feat: updated tests

---
 .../pages/rp-connect/types/constants.ts       |   3 +-
 .../utils/__fixtures__/component-schemas.ts   | 455 ++++++++++++++++
 .../pages/rp-connect/utils/schema.test.tsx    | 510 +++++-------------
 .../pages/rp-connect/utils/yaml.test.ts       |  38 +-
 4 files changed, 616 insertions(+), 390 deletions(-)
 create mode 100644 frontend/src/components/pages/rp-connect/utils/__fixtures__/component-schemas.ts

diff --git a/frontend/src/components/pages/rp-connect/types/constants.ts b/frontend/src/components/pages/rp-connect/types/constants.ts
index 9c1bfc65f..ce2d5c899 100644
--- a/frontend/src/components/pages/rp-connect/types/constants.ts
+++ b/frontend/src/components/pages/rp-connect/types/constants.ts
@@ -18,7 +18,7 @@ export const REDPANDA_TOPIC_AND_USER_COMPONENTS = [
  * Fields that are critical for connection and should always be shown
  * even when they have defaults
  */
-export const CRITICAL_CONNECTION_FIELDS = new Set(['sasl', 'consumer_group']);
+export const CRITICAL_CONNECTION_FIELDS = new Set(['sasl', 'consumer_group', 'topics']);
 
 /**
  * Configuration object fields that should be hidden for REDPANDA_SECRET_COMPONENTS
@@ -86,6 +86,7 @@ export const wizardStepDefinitions = [
   { id: WizardStep.ADD_OUTPUT, title: 'Add an output' },
   { id: WizardStep.ADD_TOPIC, title: 'Add a topic' },
   { id: WizardStep.ADD_USER, title: 'Add permissions' },
+
   { id: WizardStep.CREATE_CONFIG, title: 'Edit pipeline' },
 ];
 
diff --git a/frontend/src/components/pages/rp-connect/utils/__fixtures__/component-schemas.ts b/frontend/src/components/pages/rp-connect/utils/__fixtures__/component-schemas.ts
new file mode 100644
index 000000000..94e86ab95
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/utils/__fixtures__/component-schemas.ts
@@ -0,0 +1,455 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import {
+  type ComponentList,
+  ComponentListSchema,
+  type ComponentSpec,
+  ComponentSpecSchema,
+  ComponentStatus,
+  type FieldSpec,
+  FieldSpecSchema,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+
+import type { ConnectComponentSpec } from '../../types/schema';
+
+/**
+ * Helper to create a FieldSpec for testing
+ */
+function createField(field: Partial<FieldSpec>): FieldSpec {
+  const baseSpec: Record<string, unknown> = {
+    name: field.name || '',
+    type: field.type || 'string',
+    kind: field.kind || 'scalar',
+    optional: field.optional !== undefined ? field.optional : false,
+    advanced: field.advanced !== undefined ? field.advanced : false,
+    deprecated: field.deprecated !== undefined ? field.deprecated : false,
+    children: field.children || [],
+    description: field.description || '',
+    examples: field.examples || [],
+  };
+
+  // Only add defaultValue if explicitly provided
+  if (field.defaultValue !== undefined) {
+    baseSpec.defaultValue = field.defaultValue;
+  }
+
+  return create(FieldSpecSchema, baseSpec);
+}
+
+/**
+ * Kafka Output Component - Most complex component for testing
+ */
+export const mockKafkaOutput = create(ComponentSpecSchema, {
+  name: 'kafka',
+  type: 'output',
+  status: ComponentStatus.STABLE,
+  summary: 'Kafka output for testing',
+  description: 'Writes messages to Kafka topics',
+  config: createField({
+    name: 'root',
+    type: 'object',
+    kind: 'scalar',
+    children: [
+      createField({
+        name: 'topic',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: false,
+        description: 'The topic to publish messages to',
+      }),
+      createField({
+        name: 'addresses',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+        optional: false,
+        description: 'Kafka broker addresses',
+      }),
+      createField({
+        name: 'key',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: true,
+      }),
+      createField({
+        name: 'partitioner',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: 'fnv1a_hash',
+        optional: true,
+      }),
+      createField({
+        name: 'compression',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: 'none',
+        optional: true,
+      }),
+      createField({
+        name: 'client_id',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: 'benthos',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'rack_id',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'sasl',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: true,
+        children: [
+          createField({
+            name: 'mechanism',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: 'none',
+            advanced: true,
+          }),
+          createField({
+            name: 'user',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+            advanced: true,
+          }),
+          createField({
+            name: 'password',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+            advanced: true,
+          }),
+          createField({
+            name: 'access_token',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+            optional: true,
+            advanced: true,
+          }),
+          createField({
+            name: 'token_cache',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+            optional: true,
+            advanced: true,
+          }),
+          createField({
+            name: 'token_key',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+            optional: true,
+            advanced: true,
+          }),
+        ],
+      }),
+      createField({
+        name: 'tls',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: true,
+        children: [
+          createField({
+            name: 'enabled',
+            type: 'bool',
+            kind: 'scalar',
+            defaultValue: 'false',
+          }),
+        ],
+      }),
+      createField({
+        name: 'batching',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: false, // Non-advanced config object
+        children: [
+          createField({
+            name: 'count',
+            type: 'int',
+            kind: 'scalar',
+            defaultValue: '0',
+            optional: false, // Non-advanced, shows even when showOptionalFields=false
+          }),
+        ],
+      }),
+      createField({
+        name: 'metadata',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: false, // Non-advanced config object
+        children: [
+          createField({
+            name: 'include_prefixes',
+            type: 'string',
+            kind: 'array',
+            optional: false, // Non-advanced, shows even when showOptionalFields=false
+          }),
+        ],
+      }),
+      createField({
+        name: 'backoff',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: false, // Non-advanced config object
+        children: [
+          createField({
+            name: 'initial_interval',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '1s',
+            optional: false, // Non-advanced, shows even when showOptionalFields=false
+          }),
+        ],
+      }),
+    ],
+  }),
+});
+
+/**
+ * Redpanda Input Component - Tests SASL array format
+ */
+export const mockRedpandaInput = create(ComponentSpecSchema, {
+  name: 'redpanda',
+  type: 'input',
+  status: ComponentStatus.STABLE,
+  summary: 'Redpanda input for testing',
+  description: 'Reads messages from Redpanda topics',
+  config: createField({
+    name: 'root',
+    type: 'object',
+    kind: 'scalar',
+    children: [
+      createField({
+        name: 'topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+        description: 'Topics to consume from',
+      }),
+      createField({
+        name: 'seed_brokers',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+        description: 'Seed broker addresses',
+      }),
+      createField({
+        name: 'consumer_group',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: true,
+      }),
+      createField({
+        name: 'client_id',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: 'benthos',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'rack_id',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'metadata_max_age',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '5m',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'request_timeout_overhead',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '500ms',
+        optional: true,
+        advanced: true,
+      }),
+      createField({
+        name: 'sasl',
+        type: 'object',
+        kind: 'array',
+        optional: true,
+        advanced: true,
+        children: [
+          createField({
+            name: 'mechanism',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: 'none',
+          }),
+          createField({
+            name: 'username',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+          }),
+          createField({
+            name: 'password',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: '',
+          }),
+        ],
+      }),
+    ],
+  }),
+});
+
+/**
+ * Memory Cache Component - Simple cache for testing
+ */
+export const mockMemoryCache = create(ComponentSpecSchema, {
+  name: 'memory',
+  type: 'cache',
+  status: ComponentStatus.STABLE,
+  summary: 'Memory cache for testing',
+  description: 'In-memory cache',
+  config: createField({
+    name: 'root',
+    type: 'object',
+    kind: 'scalar',
+    children: [
+      createField({
+        name: 'ttl',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '5m',
+        optional: true,
+      }),
+      createField({
+        name: 'init_values',
+        type: 'object',
+        kind: 'map',
+        defaultValue: '',
+        optional: true,
+      }),
+    ],
+  }),
+});
+
+/**
+ * Bloblang Processor - Simple processor for testing
+ */
+export const mockBloblangProcessor = create(ComponentSpecSchema, {
+  name: 'bloblang',
+  type: 'processor',
+  status: ComponentStatus.STABLE,
+  summary: 'Bloblang processor for testing',
+  description: 'Bloblang mapping processor',
+  config: createField({
+    name: 'root',
+    type: 'string',
+    kind: 'scalar',
+    defaultValue: '',
+    description: 'Bloblang mapping',
+  }),
+});
+
+/**
+ * Avro Scanner - Has advanced fields to test visibility
+ */
+export const mockAvroScanner = create(ComponentSpecSchema, {
+  name: 'avro',
+  type: 'scanner',
+  status: ComponentStatus.STABLE,
+  summary: 'Avro scanner for testing',
+  description: 'Avro format scanner',
+  config: createField({
+    name: 'root',
+    type: 'object',
+    kind: 'scalar',
+    optional: false,
+    defaultValue: '', // Empty string default for objects - will generate object from children
+    children: [
+      createField({
+        name: 'raw_json',
+        type: 'bool',
+        kind: 'scalar',
+        // No defaultValue - will generate boolean false
+        advanced: true,
+        optional: true,
+      }),
+    ],
+  }),
+});
+
+/**
+ * Create a mock ComponentList with all test fixtures
+ */
+export function createMockComponentList(): ComponentList {
+  return create(ComponentListSchema, {
+    version: '1.0.0',
+    inputs: [mockRedpandaInput],
+    outputs: [mockKafkaOutput],
+    caches: [mockMemoryCache],
+    processors: [mockBloblangProcessor],
+    scanners: [mockAvroScanner],
+    buffers: [],
+    rateLimits: [],
+    metrics: [],
+    tracers: [],
+    bloblangFunctions: [],
+    bloblangMethods: [],
+  });
+}
+
+/**
+ * Convert ComponentSpec to ConnectComponentSpec for testing
+ */
+export function mockComponentToConnectSpec(
+  component: ComponentSpec,
+  type: 'input' | 'output' | 'cache' | 'processor' | 'scanner'
+): ConnectComponentSpec {
+  return {
+    ...component,
+    type,
+    config: component.config,
+  } as ConnectComponentSpec;
+}
+
+/**
+ * Get mock components organized by type for easy access in tests
+ */
+export const mockComponents = {
+  kafkaOutput: mockComponentToConnectSpec(mockKafkaOutput, 'output'),
+  redpandaInput: mockComponentToConnectSpec(mockRedpandaInput, 'input'),
+  memoryCache: mockComponentToConnectSpec(mockMemoryCache, 'cache'),
+  bloblangProcessor: mockComponentToConnectSpec(mockBloblangProcessor, 'processor'),
+  avroScanner: mockComponentToConnectSpec(mockAvroScanner, 'scanner'),
+};
diff --git a/frontend/src/components/pages/rp-connect/utils/schema.test.tsx b/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
index 7d5d297d3..624c74479 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
+++ b/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
@@ -1,7 +1,8 @@
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
-import { generateDefaultValue, getBuiltInComponents, schemaToConfig } from './schema';
+import { mockComponents } from './__fixtures__/component-schemas';
+import { generateDefaultValue, schemaToConfig } from './schema';
 import type { RawFieldSpec } from '../types/schema';
 
 vi.mock('zustand');
@@ -12,24 +13,24 @@ describe('generateDefaultValue', () => {
   });
 
   describe('Critical connection fields for Redpanda components', () => {
-    test('should ALWAYS show SASL for Redpanda components even when optional/advanced', () => {
-      const spec: RawFieldSpec = {
+    test('SASL always shown for Redpanda components (critical field)', () => {
+      const spec = {
         name: 'sasl',
         type: 'object',
         kind: 'scalar',
-        is_optional: true,
-        is_advanced: true,
+        optional: true,
+        advanced: true,
         children: [
           {
             name: 'mechanism',
             type: 'string',
             kind: 'scalar',
-            default: 'none',
+            defaultValue: 'none',
           },
         ],
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
@@ -39,48 +40,24 @@ describe('generateDefaultValue', () => {
       expect((result as Record<string, unknown>).mechanism).toBe('SCRAM-SHA-256');
     });
 
-    test('should ALWAYS show consumer_group for Redpanda components even when optional', () => {
-      onboardingWizardStore.setUserData({
-        username: 'admin',
-        saslMechanism: 'SCRAM-SHA-256',
-        consumerGroup: 'test-group',
-      });
-
-      const spec: RawFieldSpec = {
-        name: 'consumer_group',
-        type: 'string',
-        kind: 'scalar',
-        default: '',
-        is_optional: true,
-      };
-
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'kafka_franz',
-      });
-
-      expect(result).toBe('test-group');
-    });
-
-    test('should NOT show critical fields for non-Redpanda components when optional/advanced', () => {
-      const spec: RawFieldSpec = {
+    test('critical fields NOT shown for non-Redpanda components', () => {
+      const spec = {
         name: 'sasl',
         type: 'object',
         kind: 'scalar',
-        is_optional: true,
-        is_advanced: true,
+        optional: true,
+        advanced: true,
         children: [
           {
             name: 'mechanism',
             type: 'string',
             kind: 'scalar',
-            default: 'none',
+            defaultValue: 'none',
           },
         ],
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'http',
@@ -90,100 +67,62 @@ describe('generateDefaultValue', () => {
     });
   });
 
-  describe('Explicitly required fields (is_optional: false)', () => {
-    test('should ALWAYS show required fields even when advanced', () => {
-      const spec: RawFieldSpec = {
-        name: 'topic',
+  describe('Field visibility rules', () => {
+    test('advanced fields are hidden when showAdvancedFields=false', () => {
+      const spec = {
+        name: 'advanced_field',
         type: 'string',
         kind: 'scalar',
-        default: '',
-        is_optional: false,
-        is_advanced: true,
+        defaultValue: 'value',
+        optional: false,
+        advanced: true,
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
       });
 
-      expect(result).toBe('');
-    });
-
-    test('should show required fields with defaults', () => {
-      const spec: RawFieldSpec = {
-        name: 'required_field',
-        type: 'string',
-        kind: 'scalar',
-        default: 'required-value',
-        is_optional: false,
-      };
-
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'http',
-      });
-
-      expect(result).toBe('required-value');
+      expect(result).toBeUndefined();
     });
-  });
 
-  describe('showAdvancedFields flag', () => {
-    test('should show advanced fields when showAdvancedFields=true', () => {
-      const spec: RawFieldSpec = {
-        name: 'advanced_option',
+    test('optional fields are hidden when showOptionalFields=false', () => {
+      const spec = {
+        name: 'optional_field',
         type: 'string',
         kind: 'scalar',
-        default: 'advanced-default',
-        is_advanced: true,
-        is_optional: true,
+        defaultValue: 'value',
+        optional: true,
+        advanced: false,
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: true,
         componentName: 'http',
       });
 
-      expect(result).toBe('advanced-default');
-    });
-
-    test('should hide advanced fields when showAdvancedFields=false', () => {
-      const spec: RawFieldSpec = {
-        name: 'advanced_option',
-        type: 'string',
-        kind: 'scalar',
-        default: 'advanced-default',
-        is_advanced: true,
-        is_optional: true,
-      };
-
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'http',
-      });
-
       expect(result).toBeUndefined();
     });
 
-    test('should show all fields when showAdvancedFields=true, even optional ones', () => {
-      const spec: RawFieldSpec = {
-        name: 'optional_field',
+    test('required non-advanced fields are shown', () => {
+      const spec = {
+        name: 'required_field',
         type: 'string',
         kind: 'scalar',
-        default: 'optional-default',
-        is_optional: true,
+        defaultValue: 'required-value',
+        optional: false,
+        advanced: false,
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
-        showAdvancedFields: true,
+        showAdvancedFields: false,
         componentName: 'http',
       });
 
-      expect(result).toBe('optional-default');
+      expect(result).toBe('required-value');
     });
   });
 
@@ -197,32 +136,15 @@ describe('generateDefaultValue', () => {
       });
     });
 
-    test('should populate consumer_group field for redpanda input components', () => {
-      const spec: RawFieldSpec = {
-        name: 'consumer_group',
-        type: 'string',
-        kind: 'scalar',
-        default: '',
-      };
-
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'kafka_franz',
-      });
-
-      expect(result).toBe('my-consumer-group');
-    });
-
-    test('should populate topic field for redpanda components', () => {
-      const spec: RawFieldSpec = {
+    test('populates topic field (scalar) from wizard', () => {
+      const spec = {
         name: 'topic',
         type: 'string',
         kind: 'scalar',
-        default: '',
+        defaultValue: '',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'redpanda',
@@ -231,15 +153,15 @@ describe('generateDefaultValue', () => {
       expect(result).toBe('example');
     });
 
-    test('should populate topics array for redpanda components', () => {
-      const spec: RawFieldSpec = {
+    test('populates topics array from wizard', () => {
+      const spec = {
         name: 'topics',
         type: 'string',
         kind: 'array',
-        default: [],
+        defaultValue: '',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'redpanda',
@@ -248,242 +170,203 @@ describe('generateDefaultValue', () => {
       expect(result).toEqual(['example']);
     });
 
-    test('should NOT populate topic for non-redpanda components', () => {
-      const spec: RawFieldSpec = {
-        name: 'topic',
+    test('populates user/password fields as secret references', () => {
+      const userSpec = {
+        name: 'user',
         type: 'string',
         kind: 'scalar',
-        default: '',
+        defaultValue: '',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(userSpec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
-        componentName: 'http',
+        componentName: 'kafka',
       });
 
-      expect(result).toBe('');
+      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
+      expect(result).toBe('${secrets.KAFKA_USER_ADMIN}');
     });
+  });
 
-    test('should use secret syntax for user field with wizard data', () => {
-      const spec: RawFieldSpec = {
-        name: 'user',
+  describe('Comment generation', () => {
+    test('required fields get "Required" comment', () => {
+      const spec = {
+        name: 'required_field',
         type: 'string',
         kind: 'scalar',
-        default: '',
+        optional: false,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
       });
 
-      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
-      expect(result).toBe('${secrets.KAFKA_USER_ADMIN}');
+      expect(spec.comment).toBe('Required');
     });
 
-    test('should use secret syntax for password field with wizard data', () => {
-      const spec: RawFieldSpec = {
-        name: 'password',
+    test('required fields with defaults get "Required (default: ...)" comment', () => {
+      const spec = {
+        name: 'required_field',
         type: 'string',
         kind: 'scalar',
-        default: '',
-        is_secret: true,
+        defaultValue: 'my-default',
+        optional: false,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
       });
 
-      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
-      expect(result).toBe('${secrets.KAFKA_PASSWORD_ADMIN}');
-    });
-  });
-
-  describe('Contextual variables population', () => {
-    beforeEach(() => {
-      sessionStorage.clear();
+      expect(spec.comment).toBe('Required (default: "my-default")');
     });
 
-    test('should populate schema_registry.url with REDPANDA_SCHEMA_REGISTRY_URL', () => {
-      const spec: RawFieldSpec = {
-        name: 'url',
+    test('optional fields get "Optional" comment', () => {
+      const spec = {
+        name: 'optional_field',
         type: 'string',
         kind: 'scalar',
-        default: '',
+        optional: true,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
+      generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: true,
         showAdvancedFields: false,
         componentName: 'kafka',
-        parentName: 'schema_registry',
       });
 
-      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
-      expect(result).toBe('${REDPANDA_SCHEMA_REGISTRY_URL}');
-    });
-  });
-
-  describe('Connection defaults for Redpanda Cloud', () => {
-    beforeEach(() => {
-      sessionStorage.clear();
+      expect(spec.comment).toBe('Optional');
     });
 
-    test('should default SASL mechanism to SCRAM-SHA-256 for REDPANDA components', () => {
-      const spec: RawFieldSpec = {
-        name: 'mechanism',
+    test('optional fields with defaults get "Optional (default: ...)" comment', () => {
+      const spec = {
+        name: 'optional_field',
         type: 'string',
         kind: 'scalar',
-        default: 'none',
+        defaultValue: 'my-default',
+        optional: true,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
+      generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: true,
         showAdvancedFields: false,
         componentName: 'kafka',
-        parentName: 'sasl',
       });
 
-      expect(result).toBe('SCRAM-SHA-256');
+      expect(spec.comment).toBe('Optional (default: "my-default")');
     });
 
-    test('should use wizard SASL mechanism when available', () => {
-      onboardingWizardStore.setUserData({
-        username: 'admin',
-        saslMechanism: 'SCRAM-SHA-512',
-        consumerGroup: '',
-      });
-
-      const spec: RawFieldSpec = {
-        name: 'mechanism',
-        type: 'string',
+    test('critical fields get "Optional" comment even when not optional', () => {
+      const spec = {
+        name: 'sasl',
+        type: 'object',
         kind: 'scalar',
-        default: 'none',
+        optional: true,
+        comment: undefined,
+        children: [],
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as unknown as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
-        parentName: 'sasl',
       });
 
-      expect(result).toBe('SCRAM-SHA-512');
+      expect(spec.comment).toBe('Optional');
     });
   });
 
-  describe('Implicitly required fields (no is_optional, no default)', () => {
-    test('should show implicitly required fields with Required comment', () => {
-      const spec: RawFieldSpec = {
-        name: 'topics',
-        type: 'string',
-        kind: 'array',
-        // No is_optional, no default = implicitly required
-      };
-
-      const result = generateDefaultValue(spec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'redpanda',
-      });
-
-      expect(result).toBeDefined();
-      expect(spec.comment).toBe('Required');
+  describe('Smart defaults for Redpanda components', () => {
+    beforeEach(() => {
+      sessionStorage.clear();
     });
 
-    test('should show seed_brokers with Optional comment (special case)', () => {
-      const spec: RawFieldSpec = {
-        name: 'seed_brokers',
+    test('schema registry URL uses contextual variable', () => {
+      const spec = {
+        name: 'url',
         type: 'string',
-        kind: 'array',
-        // No is_optional, no default
+        kind: 'scalar',
+        defaultValue: '',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
-        componentName: 'redpanda',
+        componentName: 'kafka',
+        parentName: 'schema_registry',
       });
 
-      expect(result).toBeDefined();
-      expect(spec.comment).toBe('Optional');
+      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
+      expect(result).toBe('${REDPANDA_SCHEMA_REGISTRY_URL}');
     });
 
-    test('should show mechanism with Required comment', () => {
-      const spec: RawFieldSpec = {
+    test('SASL mechanism defaults to SCRAM-SHA-256', () => {
+      const spec = {
         name: 'mechanism',
         type: 'string',
         kind: 'scalar',
-        // No is_optional, no default in our test (real schema has default: 'none')
+        defaultValue: 'none',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'kafka',
         parentName: 'sasl',
       });
 
-      expect(result).toBe('SCRAM-SHA-256'); // Gets connection default
-      expect(spec.comment).toBe('Required');
+      expect(result).toBe('SCRAM-SHA-256');
     });
   });
 
-  describe('SASL object generation', () => {
-    beforeEach(() => {
+  describe('SASL critical field behavior', () => {
+    test('SASL populates with wizard data (user, password as secrets)', () => {
       onboardingWizardStore.setUserData({
         username: 'admin',
         saslMechanism: 'SCRAM-SHA-256',
         consumerGroup: '',
       });
-    });
 
-    test('should populate sasl object with mechanism, user, and password when user exists', () => {
-      const saslSpec: RawFieldSpec = {
+      const saslSpec = {
         name: 'sasl',
         type: 'object',
         kind: 'scalar',
-        is_advanced: true,
-        is_optional: true,
+        advanced: true,
+        optional: true,
         children: [
           {
             name: 'mechanism',
             type: 'string',
             kind: 'scalar',
-            default: 'none',
-            is_advanced: true,
+            defaultValue: 'none',
+            advanced: true,
           },
           {
             name: 'user',
             type: 'string',
             kind: 'scalar',
-            default: '',
-            is_advanced: true,
+            defaultValue: '',
+            advanced: true,
           },
           {
             name: 'password',
             type: 'string',
             kind: 'scalar',
-            default: '',
-            is_advanced: true,
-            is_secret: true,
-          },
-          {
-            name: 'access_token',
-            type: 'string',
-            kind: 'scalar',
-            default: '',
-            is_advanced: true,
-            is_optional: true,
+            defaultValue: '',
+            advanced: true,
+            secret: true,
           },
         ],
-      };
+      } as unknown as RawFieldSpec;
 
-      // SASL is critical connection field, so it should be shown for Redpanda components
       const result = generateDefaultValue(saslSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
@@ -496,43 +379,10 @@ describe('generateDefaultValue', () => {
       expect(result.user).toBe('${secrets.KAFKA_USER_ADMIN}');
       // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
       expect(result.password).toBe('${secrets.KAFKA_PASSWORD_ADMIN}');
-      expect(result.access_token).toBeUndefined(); // Optional advanced field should be hidden
-    });
-
-    test('should NOT populate sasl object when user does not exist', () => {
-      sessionStorage.clear();
-
-      const saslSpec: RawFieldSpec = {
-        name: 'sasl',
-        type: 'object',
-        kind: 'scalar',
-        is_advanced: true,
-        is_optional: true,
-        children: [
-          {
-            name: 'mechanism',
-            type: 'string',
-            kind: 'scalar',
-            default: 'none',
-            is_advanced: true,
-          },
-        ],
-      };
-
-      // Without wizard data, SASL is still a critical field but will be empty
-      const result = generateDefaultValue(saslSpec, {
-        showOptionalFields: false,
-        showAdvancedFields: false,
-        componentName: 'kafka',
-      });
-
-      // SASL is critical, so it should show with default mechanism
-      expect(result).toBeDefined();
-      expect((result as Record<string, unknown>).mechanism).toBe('SCRAM-SHA-256');
     });
   });
 
-  describe('Full integration with real schema components', () => {
+  describe('Full component integration', () => {
     beforeEach(() => {
       onboardingWizardStore.setTopicData({ topicName: 'example' });
       onboardingWizardStore.setUserData({
@@ -542,9 +392,8 @@ describe('generateDefaultValue', () => {
       });
     });
 
-    test('kafka output should only show critical fields', () => {
-      const builtInComponents = getBuiltInComponents();
-      const kafkaOutput = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
+    test('kafka output shows required and critical fields, hides optional/advanced', () => {
+      const kafkaOutput = mockComponents.kafkaOutput;
 
       const result = schemaToConfig(kafkaOutput, false, false);
       const config = result?.config as Record<string, any>;
@@ -552,114 +401,39 @@ describe('generateDefaultValue', () => {
 
       expect(outputConfig).toBeDefined();
 
-      // Required fields should be shown
+      // Required fields shown
       expect(outputConfig.topic).toBe('example');
-      expect(outputConfig.addresses).toBeDefined(); // Implicitly required field
+      expect(outputConfig.addresses).toBeDefined();
 
-      // Critical connection fields should be shown
+      // Critical connection fields shown with wizard data
       expect(outputConfig.sasl).toBeDefined();
       // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
       expect(outputConfig.sasl.user).toBe('${secrets.KAFKA_USER_ADMIN}');
       // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
       expect(outputConfig.sasl.password).toBe('${secrets.KAFKA_PASSWORD_ADMIN}');
 
-      // Non-critical config objects with non-advanced children will show
-      expect(outputConfig.batching).toBeDefined();
-      expect(outputConfig.metadata).toBeDefined();
-      expect(outputConfig.backoff).toBeDefined();
-
-      // Non-advanced fields will show (even if they have defaults)
-      expect(outputConfig.key).toBeDefined();
-      expect(outputConfig.partitioner).toBeDefined();
-      expect(outputConfig.compression).toBeDefined();
-
-      // Only advanced fields are hidden
+      // Optional and advanced fields hidden
+      expect(outputConfig.batching).toBeUndefined();
+      expect(outputConfig.key).toBeUndefined();
       expect(outputConfig.client_id).toBeUndefined();
-      expect(outputConfig.rack_id).toBeUndefined();
-
-      // SASL should not have optional advanced fields
       expect(outputConfig.sasl.access_token).toBeUndefined();
-      expect(outputConfig.sasl.token_cache).toBeUndefined();
-      expect(outputConfig.sasl.token_key).toBeUndefined();
     });
 
-    test('redpanda input should only show critical fields', () => {
-      const builtInComponents = getBuiltInComponents();
-      const redpandaInput = builtInComponents.find((c) => c.name === 'redpanda' && c.type === 'input');
+    test('redpanda input with wizard data populates topics and SASL', () => {
+      const redpandaInput = mockComponents.redpandaInput;
 
       const result = schemaToConfig(redpandaInput, false, false);
       const config = result?.config as Record<string, any>;
       const inputConfig = config?.input?.redpanda;
 
       expect(inputConfig).toBeDefined();
-
-      // Required fields should be shown
       expect(inputConfig.topics).toEqual(['example']);
-      expect(inputConfig.seed_brokers).toBeDefined(); // Required field
+      expect(inputConfig.seed_brokers).toBeDefined();
 
-      // Critical connection fields should be shown
-      expect(inputConfig.sasl).toBeDefined();
+      // SASL array format for redpanda components
       expect(Array.isArray(inputConfig.sasl)).toBe(true);
-      expect(inputConfig.sasl.length).toBeGreaterThan(0);
       // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
       expect(inputConfig.sasl[0].username).toBe('${secrets.KAFKA_USER_ADMIN}');
-      // biome-ignore lint/suspicious/noTemplateCurlyInString: This is a literal string for configuration templates, not a TypeScript template literal
-      expect(inputConfig.sasl[0].password).toBe('${secrets.KAFKA_PASSWORD_ADMIN}');
-
-      // Optional/advanced fields should be hidden
-      expect(inputConfig.client_id).toBeUndefined();
-      expect(inputConfig.metadata_max_age).toBeUndefined();
-      expect(inputConfig.request_timeout_overhead).toBeUndefined();
-      expect(inputConfig.rack_id).toBeUndefined();
-    });
-
-    test('kafka output with showAdvancedFields should show advanced fields', () => {
-      const builtInComponents = getBuiltInComponents();
-      const kafkaOutput = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
-
-      const result = schemaToConfig(kafkaOutput, false, true);
-      const config = result?.config as Record<string, any>;
-      const outputConfig = config?.output?.kafka;
-
-      expect(outputConfig).toBeDefined();
-
-      // Critical fields still shown
-      expect(outputConfig.topic).toBe('example');
-      expect(outputConfig.addresses).toBeDefined();
-      expect(outputConfig.sasl).toBeDefined();
-
-      // Advanced fields now shown
-      expect(outputConfig.client_id).toBeDefined();
-      expect(outputConfig.sasl.access_token).toBeDefined();
-      expect(outputConfig.tls).toBeDefined();
-    });
-  });
-
-  describe('Scanner configuration', () => {
-    test('should show scanner fields when showAdvancedFields=true', () => {
-      const builtInComponents = getBuiltInComponents();
-      const avroScanner = builtInComponents.find((c) => c.name === 'avro' && c.type === 'scanner');
-
-      const result = schemaToConfig(avroScanner, false, true);
-      const config = result?.config as Record<string, any>;
-      const scannerConfig = config?.avro;
-
-      expect(scannerConfig).toBeDefined();
-      // Advanced fields show when showAdvancedFields=true
-      expect(scannerConfig.raw_json).toBe(false);
-    });
-
-    test('should hide advanced scanner fields when showAdvancedFields=false', () => {
-      const builtInComponents = getBuiltInComponents();
-      const avroScanner = builtInComponents.find((c) => c.name === 'avro' && c.type === 'scanner');
-
-      const result = schemaToConfig(avroScanner, false, false);
-      const config = result?.config as Record<string, any>;
-      const scannerConfig = config?.avro;
-
-      expect(scannerConfig).toBeDefined();
-      // Advanced fields hidden when showAdvancedFields=false
-      expect(Object.keys(scannerConfig as Record<string, unknown>).length).toBe(0);
     });
   });
 });
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.test.ts b/frontend/src/components/pages/rp-connect/utils/yaml.test.ts
index 6498c24e8..447362619 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.test.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.test.ts
@@ -1,13 +1,13 @@
 import { describe, expect, test } from 'vitest';
 
-import { getBuiltInComponents, schemaToConfig } from './schema';
+import { mockComponents } from './__fixtures__/component-schemas';
+import { schemaToConfig } from './schema';
 import { configToYaml, getConnectTemplate, mergeConnectConfigs } from './yaml';
 import type { ConnectComponentSpec } from '../types/schema';
 
 describe('yaml utils for creating connect configs', () => {
   describe('YAML spacing for merged components', () => {
     test('should add newline between root-level items when adding cache', () => {
-      const builtInComponents = getBuiltInComponents();
       const existingYaml = `input:
   generate:
     mapping: 'root = {}'
@@ -15,7 +15,7 @@ describe('yaml utils for creating connect configs', () => {
 output:
   drop: {}`;
 
-      const cacheSpec = builtInComponents.find((c) => c.name === 'memory' && c.type === 'cache');
+      const cacheSpec = mockComponents.memoryCache;
       if (!cacheSpec) {
         throw new Error('memory cache not found');
       }
@@ -33,12 +33,11 @@ output:
     });
 
     test('should add newline between root-level items when adding processor', () => {
-      const builtInComponents = getBuiltInComponents();
       const existingYaml = `input:
   generate:
     mapping: 'root = {}'`;
 
-      const processorSpec = builtInComponents.find((c) => c.name === 'bloblang' && c.type === 'processor');
+      const processorSpec = mockComponents.bloblangProcessor;
       if (!processorSpec) {
         throw new Error('bloblang processor not found');
       }
@@ -58,7 +57,7 @@ output:
 
   describe('YAML comment generation', () => {
     test('should add comments to required fields', () => {
-      const spec: ConnectComponentSpec = {
+      const spec = {
         name: 'test_output',
         type: 'output',
         plugin: false,
@@ -71,11 +70,11 @@ output:
               name: 'required_field',
               type: 'string',
               kind: 'scalar',
-              is_optional: false,
+              optional: false,
             },
           ],
         },
-      };
+      } as unknown as ConnectComponentSpec;
 
       const result = schemaToConfig(spec, false);
       if (!result) {
@@ -90,7 +89,7 @@ output:
     });
 
     test('should add comments to optional fields with defaults', () => {
-      const spec: ConnectComponentSpec = {
+      const spec = {
         name: 'test_output',
         type: 'output',
         plugin: false,
@@ -103,12 +102,12 @@ output:
               name: 'optional_field',
               type: 'string',
               kind: 'scalar',
-              is_optional: true,
-              default: 'default_value',
+              optional: true,
+              defaultValue: 'default_value',
             },
           ],
         },
-      };
+      } as unknown as ConnectComponentSpec;
 
       const result = schemaToConfig(spec, true);
       if (!result) {
@@ -123,8 +122,7 @@ output:
     });
 
     test('should add comments to critical connection fields', () => {
-      const builtInComponents = getBuiltInComponents();
-      const kafkaSpec = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
+      const kafkaSpec = mockComponents.kafkaOutput;
 
       if (!kafkaSpec) {
         throw new Error('kafka output not found');
@@ -140,12 +138,11 @@ output:
 
       // Critical fields like topic should have comments
       expect(yaml).toContain('topic:');
-      expect(yaml).toContain('# Optional');
+      expect(yaml).toContain('# Required');
     });
 
     test('should not add comments to parent objects but should add to arrays', () => {
-      const builtInComponents = getBuiltInComponents();
-      const kafkaSpec = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
+      const kafkaSpec = mockComponents.kafkaOutput;
 
       if (!kafkaSpec) {
         throw new Error('kafka output not found');
@@ -181,15 +178,13 @@ output:
     });
 
     test('should preserve existing comments and add comments to merged component', () => {
-      const builtInComponents = getBuiltInComponents();
-
       // Start with a simple input
       const inputYaml = `input:
   generate:
     mapping: "" # Existing comment`;
 
       // Now merge in an output component
-      const kafkaOutputSpec = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
+      const kafkaOutputSpec = mockComponents.kafkaOutput;
       if (!kafkaOutputSpec) {
         throw new Error('kafka output not found');
       }
@@ -197,6 +192,7 @@ output:
       const mergedYaml = getConnectTemplate({
         connectionName: 'kafka',
         connectionType: 'output',
+        components: Object.values(mockComponents),
         existingYaml: inputYaml,
         showOptionalFields: false,
       });
@@ -210,7 +206,7 @@ output:
 
       // Should add comments to the newly merged output (critical fields)
       expect(mergedYaml).toContain('topic:');
-      expect(mergedYaml).toContain('# Optional');
+      expect(mergedYaml).toContain('# Required');
     });
   });
 });

From 59a29be645253fc3d2669745a1a245e88fe7c330 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Tue, 25 Nov 2025 10:08:36 -0800
Subject: [PATCH 07/13] feat: reversed shouldShowField

---
 .../pages/rp-connect/utils/schema.ts          | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/pages/rp-connect/utils/schema.ts b/frontend/src/components/pages/rp-connect/utils/schema.ts
index dcd7568c5..59c866575 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.ts
+++ b/frontend/src/components/pages/rp-connect/utils/schema.ts
@@ -281,7 +281,7 @@ function populateConnectionDefaults(
   return undefined;
 }
 
-function shouldHideField(params: {
+function shouldShowField(params: {
   spec: RawFieldSpec;
   showOptionalFields: boolean;
   showAdvancedFields: boolean;
@@ -293,30 +293,30 @@ function shouldHideField(params: {
   const isRedpandaComponent = componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName);
   const isCriticalField = isRedpandaComponent && spec.name && CRITICAL_CONNECTION_FIELDS.has(spec.name);
   if (isCriticalField) {
-    return false;
+    return true;
   }
 
   const isAdvanced = spec.advanced === true;
   const isOptional = spec.optional === true;
 
-  // Hide advanced fields unless explicitly requested
+  // Don't show advanced fields unless explicitly requested
   if (isAdvanced && !showAdvancedFields) {
-    return true;
+    return false;
   }
 
-  // Hide optional fields unless explicitly requested
+  // Don't show optional fields unless explicitly requested
   if (isOptional && !showOptionalFields) {
-    return true;
+    return false;
   }
 
-  // Hide non-critical config objects for Redpanda components
+  // Don't show non-critical config objects for Redpanda components unless showing optional fields
   const isNonCriticalConfigObject = isRedpandaComponent && spec.name && NON_CRITICAL_CONFIG_OBJECTS.has(spec.name);
   if (isNonCriticalConfigObject && !showOptionalFields) {
-    return true;
+    return false;
   }
 
   // Show everything else (required, non-advanced, non-optional fields)
-  return false;
+  return true;
 }
 
 function generateObjectValue(
@@ -416,25 +416,13 @@ export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefau
   const isImplicitlyRequired = spec.optional === undefined && spec.defaultValue === undefined;
   const hasNonEmptyDefault = spec.defaultValue !== undefined && spec.defaultValue !== '';
 
-  const shouldHide = shouldHideField({
+  const shouldShow = shouldShowField({
     spec,
     showOptionalFields: !!showOptionalFields,
     showAdvancedFields: !!showAdvancedFields,
     componentName,
   });
 
-  // biome-ignore lint/suspicious/noConsole: Debug logging for field value generation
-  console.log('DEBUG [generateDefaultValue] Processing field:', {
-    fieldName: spec.name,
-    fieldType: spec.type,
-    fieldKind: spec.kind,
-    hasDefault: !!spec.defaultValue,
-    isOptional: spec.optional,
-    isAdvanced: spec.advanced,
-    shouldHide,
-    isCriticalField,
-  });
-
   if (hasNonEmptyDefault && isExplicitlyRequired) {
     spec.comment = `Required (default: ${JSON.stringify(spec.defaultValue)})`;
   } else if ((isExplicitlyRequired || isImplicitlyRequired) && spec.name !== 'seed_brokers') {
@@ -467,8 +455,8 @@ export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefau
     }
   }
 
-  // Check if field should be hidden
-  if (shouldHide) {
+  // Check if field should be shown
+  if (!shouldShow) {
     return undefined;
   }
 

From c861bfa8ee4871d0c11e1d7664c5ad021dd6ae77 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Wed, 26 Nov 2025 20:41:03 -0800
Subject: [PATCH 08/13] feat: addressed pr comments and improved yaml
 generation to rely more on backend schema than opinionated defaults and what
 fields are actually shown

---
 .../skills/frontend-developer/SKILL.md        |  56 ++-
 .../src/components/pages/connect/overview.tsx |  15 +-
 .../onboarding/add-secrets-card.tsx           |  21 +-
 .../pages/rp-connect/pipeline/details.tsx     |  31 +-
 .../pages/rp-connect/pipeline/footer.tsx      |  45 --
 .../pages/rp-connect/pipeline/index.tsx       | 303 ++++++++-----
 .../pages/rp-connect/pipeline/list.tsx        | 320 ++++++++++++++
 .../pages/rp-connect/pipeline/toolbar.tsx     | 222 ++++------
 .../pages/rp-connect/pipelines-create.tsx     |  67 ++-
 .../pages/rp-connect/pipelines-details.tsx    |  12 +-
 .../pages/rp-connect/pipelines-edit.tsx       |  51 +--
 .../pages/rp-connect/pipelines-list.tsx       |  59 +--
 .../pages/rp-connect/types/constants.ts       |  24 +-
 .../pages/rp-connect/utils/schema.test.tsx    | 411 +++++++++++++++++-
 .../pages/rp-connect/utils/schema.ts          | 212 +++++++--
 .../{pipeline => utils}/use-pipeline-mode.ts  |   2 +-
 .../components/pages/rp-connect/utils/yaml.ts |  35 +-
 .../redpanda-ui/components/button.tsx         |  19 +-
 .../redpanda-ui/components/input.tsx          |   8 +-
 .../ui/delete-resource-alert-dialog.tsx       |  68 ++-
 .../ui/lint-hint/lint-hint-list.tsx           |   7 +-
 .../ui/secret/quick-add-secrets.tsx           |   4 +-
 .../src/components/ui/yaml/yaml-editor.tsx    |  42 +-
 frontend/src/react-query/api/connect.tsx      |  16 +-
 frontend/src/utils/regex.ts                   |   1 +
 frontend/src/utils/secret.utils.ts            |   4 +-
 26 files changed, 1469 insertions(+), 586 deletions(-)
 delete mode 100644 frontend/src/components/pages/rp-connect/pipeline/footer.tsx
 create mode 100644 frontend/src/components/pages/rp-connect/pipeline/list.tsx
 rename frontend/src/components/pages/rp-connect/{pipeline => utils}/use-pipeline-mode.ts (94%)
 create mode 100644 frontend/src/utils/regex.ts

diff --git a/frontend/.claude/skills/frontend-developer/SKILL.md b/frontend/.claude/skills/frontend-developer/SKILL.md
index b7b257303..a7aa7d389 100644
--- a/frontend/.claude/skills/frontend-developer/SKILL.md
+++ b/frontend/.claude/skills/frontend-developer/SKILL.md
@@ -47,7 +47,7 @@ yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r bu
 yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r card dialog form
 
 # Then generate yarn.lock
-bun i --yarn
+bun i && bun i --yarn
 ```
 
 ### 3. Write Component
@@ -90,7 +90,7 @@ export function MyComponent({ title, onSubmit }: Props) {
 **Performance:**
 
 - Hoist static content outside component
-- Use `useMemo` for expensive computations
+- Use `useMemo` for expensive computations - but only when there's a noticeable performance impact
 - Use `memo` for components receiving props
 
 ### 4. Write Tests
@@ -117,17 +117,40 @@ describe("formatNumber", () => {
 
 ```typescript
 // component.test.tsx
-import { render, screen, fireEvent } from 'test-utils';
+import { render, screen, fireEvent, waitFor } from 'test-utils';
+import { createRouterTransport } from '@connectrpc/connect';
+import { createPipeline } from 'protogen/redpanda/api/console/v1alpha1/pipeline-PipelineService_connectquery';
 import { MyComponent } from './component';
 
 describe('MyComponent', () => {
-  test('should call onSubmit when button clicked', () => {
-    const onSubmit = vi.fn();
-    render(<MyComponent onSubmit={onSubmit} />);
-
-    fireEvent.click(screen.getByRole('button'));
-
-    expect(onSubmit).toHaveBeenCalled();
+  test('should trigger gRPC mutation when form is submitted', async () => {
+    // Mock the gRPC service method
+    const mockCreatePipeline = vi.fn(() =>
+      Promise.resolve({ id: '123', name: 'test-pipeline' })
+    );
+
+    // Create a mocked transport
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(createPipeline, mockCreatePipeline);
+    });
+
+    // Render with the mocked transport
+    render(<MyComponent />, { transport });
+
+    // Fill out the form
+    fireEvent.change(screen.getByLabelText('Pipeline Name'), {
+      target: { value: 'test-pipeline' }
+    });
+
+    // Submit the form
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }));
+
+    // Verify the mutation was called with correct data
+    await waitFor(() => {
+      expect(mockCreatePipeline).toHaveBeenCalledWith({
+        name: 'test-pipeline'
+      });
+    });
   });
 });
 ```
@@ -150,11 +173,11 @@ const mockFunction = vi.mocked(functionToMock);
 
 ```bash
 # Run in order
-bun run type:check    # TypeScript errors
-bun run test          # All tests
-bun run lint          # Code quality
-bun run build         # Production build
-bun run start         # Dev server - check browser
+bun run type:check            # TypeScript errors
+bun run test                  # All tests
+bun run lint                  # Code quality
+bun run build                 # Production build
+bun run start2 --port=3004    # Dev server - check browser
 ```
 
 **Success criteria:**
@@ -172,7 +195,6 @@ bun run test                 # All tests (unit + integration)
 bun run test:unit            # Unit tests only (.test.ts)
 bun run test:integration     # Integration tests only (.test.tsx)
 bun run test:watch           # Watch mode
-bun run test:ui              # Interactive UI
 bun run test:coverage        # Coverage report
 ```
 
@@ -284,7 +306,7 @@ yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r \
 **After package install:**
 
 ```bash
-bun i --yarn  # ALWAYS run this
+bun i && bun i --yarn  # ALWAYS run this
 ```
 
 **Testing shortcuts:**
diff --git a/frontend/src/components/pages/connect/overview.tsx b/frontend/src/components/pages/connect/overview.tsx
index b100a6a0c..a306c5bbd 100644
--- a/frontend/src/components/pages/connect/overview.tsx
+++ b/frontend/src/components/pages/connect/overview.tsx
@@ -17,7 +17,7 @@ import { WaitingRedpanda } from 'components/redpanda-ui/components/waiting-redpa
 import { observer, useLocalObservable } from 'mobx-react';
 import { Component, type FunctionComponent } from 'react';
 import { useKafkaConnectConnectorsQuery } from 'react-query/api/kafka-connect';
-import { Navigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import {
   ConnectorClass,
@@ -29,10 +29,10 @@ import {
   TaskState,
   TasksColumn,
 } from './helper';
-import { isFeatureFlagEnabled, isServerless } from '../../../config';
+import { isServerless } from '../../../config';
 import { ListSecretScopesRequestSchema } from '../../../protogen/redpanda/api/dataplane/v1/secret_pb';
 import { appGlobal } from '../../../state/app-global';
-import { api, pipelinesApi, rpcnSecretManagerApi } from '../../../state/backend-api';
+import { api, rpcnSecretManagerApi } from '../../../state/backend-api';
 import type { ClusterConnectorInfo, ClusterConnectors, ClusterConnectorTaskInfo } from '../../../state/rest-interfaces';
 import { Features } from '../../../state/supported-features';
 import { uiSettings } from '../../../state/ui';
@@ -122,15 +122,6 @@ class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaC
   }
 
   render() {
-    // Redirect to wizard if enableRpcnTiles is enabled, kafka connect is disabled, and there are no existing pipelines
-    if (
-      isFeatureFlagEnabled('enableRpcnTiles') &&
-      pipelinesApi.pipelines?.length === 0 &&
-      !this.props.isKafkaConnectEnabled
-    ) {
-      return <Navigate replace to="/rp-connect/wizard" />;
-    }
-
     const tabs = [
       {
         key: ConnectView.RedpandaConnect,
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
index f7e876d1a..8c21167bd 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx
@@ -23,7 +23,7 @@ export const AddSecretsCard = ({
   const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
 
   // Fetch secrets
-  const { data: secretsResponse, refetch: refetchSecrets } = useListSecretsQuery({});
+  const { data: secretsResponse } = useListSecretsQuery({});
   const existingSecrets = useMemo(
     () => (secretsResponse?.secrets ? secretsResponse.secrets.map((s) => s?.id || '') : []),
     [secretsResponse]
@@ -107,15 +107,6 @@ export const AddSecretsCard = ({
     [editorInstance]
   );
 
-  const handleSecretsCreated = useCallback(() => {
-    refetchSecrets();
-    setIsSecretsDialogOpen(false);
-  }, [refetchSecrets]);
-
-  const handleOpenDialog = useCallback(() => {
-    setIsSecretsDialogOpen(true);
-  }, []);
-
   const handleUpdateEditorContent = useCallback(
     (oldName: string, newName: string) => {
       if (!editorInstance) {
@@ -210,7 +201,7 @@ export const AddSecretsCard = ({
                   <Badge
                     className="cursor-pointer text-sm hover:opacity-80"
                     key={secret}
-                    onClick={handleOpenDialog}
+                    onClick={() => setIsSecretsDialogOpen(true)}
                     variant="red"
                   >
                     Create <InlineCode className="bg-transparent">$secrets.{secret}</InlineCode>
@@ -220,7 +211,11 @@ export const AddSecretsCard = ({
               </div>
             </div>
           )}
-          <Button onClick={handleOpenDialog} size={existingSecrets.length > 0 ? 'sm' : 'default'} variant="outline">
+          <Button
+            onClick={() => setIsSecretsDialogOpen(true)}
+            size={existingSecrets.length > 0 ? 'sm' : 'default'}
+            variant="outline"
+          >
             {existingSecrets.length > 0 ? 'Add more secrets' : 'Add secret'}
             <PlusIcon className="h-4 w-4" />
           </Button>
@@ -231,7 +226,7 @@ export const AddSecretsCard = ({
         isOpen={isSecretsDialogOpen}
         missingSecrets={missingSecrets}
         onClose={() => setIsSecretsDialogOpen(false)}
-        onSecretsCreated={handleSecretsCreated}
+        onSecretsCreated={() => setIsSecretsDialogOpen(false)}
         onUpdateEditorContent={handleUpdateEditorContent}
       />
     </Card>
diff --git a/frontend/src/components/pages/rp-connect/pipeline/details.tsx b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
index 6a89294d3..e37233591 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/details.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
@@ -115,13 +115,30 @@ export function Details({ readonly = false }: DetailsProps) {
                   <FormItem>
                     <FormLabel>Compute Units: {field.value}</FormLabel>
                     <FormControl>
-                      <Slider
-                        max={MAX_TASKS}
-                        min={MIN_TASKS}
-                        onValueChange={(values) => field.onChange(values[0])}
-                        step={1}
-                        value={[field.value]}
-                      />
+                      <div className="flex items-center gap-2">
+                        <Slider
+                          max={MAX_TASKS}
+                          min={MIN_TASKS}
+                          onValueChange={(values) => field.onChange(values[0])}
+                          step={1}
+                          value={[field.value]}
+                        />
+                        <Input
+                          className="w-12"
+                          max={MAX_TASKS}
+                          min={MIN_TASKS}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            if (!Number.isNaN(value) && value >= MIN_TASKS && value <= MAX_TASKS) {
+                              field.onChange(value);
+                            }
+                          }}
+                          showStepControls
+                          step={1}
+                          type="number"
+                          value={field.value}
+                        />
+                      </div>
                     </FormControl>
                     <FormDescription className="text-muted-foreground text-sm">
                       One compute unit = 0.1 CPU and 400 MB memory
diff --git a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx b/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
deleted file mode 100644
index 391b26b67..000000000
--- a/frontend/src/components/pages/rp-connect/pipeline/footer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { Button } from 'components/redpanda-ui/components/button';
-import { Spinner } from 'components/redpanda-ui/components/spinner';
-import { memo, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-interface FooterProps {
-  mode: 'create' | 'edit';
-  onSave: () => void;
-  onCancel?: () => void;
-  isSaving?: boolean;
-}
-
-export const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) => {
-  const navigate = useNavigate();
-
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    navigate(-1);
-  }, [navigate, onCancel]);
-
-  return (
-    <div className="flex items-center justify-end gap-2 border-t pt-4">
-      <Button disabled={isSaving} onClick={handleCancel} variant="outline">
-        Cancel
-      </Button>
-      <Button className="min-w-[70px]" disabled={isSaving} onClick={onSave}>
-        {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
-        {isSaving && <Spinner size="sm" />}
-      </Button>
-    </div>
-  );
-});
-
-Footer.displayName = 'Footer';
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index f18600fc2..0dea39263 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -10,11 +10,14 @@
  */
 
 import { create } from '@bufbuild/protobuf';
+import { ConnectError } from '@connectrpc/connect';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useToast } from '@redpanda-data/ui';
 import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Card } from 'components/redpanda-ui/components/card';
 import { Form } from 'components/redpanda-ui/components/form';
-import { WaitingRedpanda } from 'components/redpanda-ui/components/waiting-redpanda';
+import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
 import { YamlEditorCard } from 'components/ui/yaml/yaml-editor-card';
 import { useDebounce } from 'hooks/use-debounce';
@@ -32,7 +35,7 @@ import {
   PipelineUpdateSchema,
   UpdatePipelineRequestSchema as UpdatePipelineRequestSchemaDataPlane,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import {
   useGetPipelineServiceConfigSchemaQuery,
@@ -41,19 +44,124 @@ import {
 } from 'react-query/api/connect';
 import { useCreatePipelineMutation, useGetPipelineQuery, useUpdatePipelineMutation } from 'react-query/api/pipeline';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
 import { useOnboardingWizardDataStore, useOnboardingYamlContentStore } from 'state/onboarding-wizard-store';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 import { z } from 'zod';
 
 import { Details } from './details';
-import { Footer } from './footer';
 import { Toolbar } from './toolbar';
-import { usePipelineMode } from './use-pipeline-mode';
-import { extractLintHintsFromError, formatPipelineError } from '../errors';
+import { extractLintHintsFromError } from '../errors';
 import { CreatePipelineSidebar } from '../onboarding/create-pipeline-sidebar';
 import { cpuToTasks, MIN_TASKS, tasksToCPU } from '../tasks';
 import { parseSchema } from '../utils/schema';
+import { type PipelineMode, usePipelineMode } from '../utils/use-pipeline-mode';
 import { getConnectTemplate } from '../utils/yaml';
 
+interface FooterProps {
+  mode: PipelineMode;
+  onSave?: () => void;
+  onCancel: () => void;
+  isSaving?: boolean;
+}
+
+const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) => {
+  if (mode === 'view') {
+    return (
+      <div className="flex items-center justify-between gap-2 border-t pt-4">
+        <Button onClick={onCancel} variant="outline">
+          Cancel
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-t pt-4">
+      <Button disabled={isSaving} onClick={onCancel} variant="outline">
+        Cancel
+      </Button>
+      <Button className="min-w-[70px]" disabled={isSaving} onClick={onSave}>
+        {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
+        {isSaving && <Spinner size="sm" />}
+      </Button>
+    </div>
+  );
+});
+
+const PipelinePageSkeleton = memo(({ mode }: { mode: PipelineMode }) => {
+  const content = (
+    <div className="flex flex-1 flex-col gap-4 overflow-auto">
+      {/* Toolbar for view mode */}
+      {mode === 'view' && (
+        <div className="mb-4 flex items-center justify-between border-b pb-4">
+          <Skeleton className="h-9 w-24" />
+          <SkeletonGroup direction="horizontal" spacing="sm">
+            <Skeleton className="h-9 w-20" />
+            <Skeleton className="h-9 w-16" />
+            <Skeleton className="h-9 w-20" />
+          </SkeletonGroup>
+        </div>
+      )}
+
+      {/* Details section */}
+      <div className="space-y-4 rounded-lg border p-4">
+        <SkeletonGroup spacing="default">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-9 w-full" />
+          </div>
+        </SkeletonGroup>
+      </div>
+
+      {/* YAML Editor section */}
+      <div className="flex-1 rounded-lg border">
+        <div className="border-b p-3">
+          <Skeleton className="h-5 w-48" />
+        </div>
+        <div className="p-4">
+          <SkeletonGroup spacing="sm">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[90%]" />
+            <Skeleton className="h-4 w-[95%]" />
+            <Skeleton className="h-4 w-[85%]" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[92%]" />
+          </SkeletonGroup>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-2 border-t pt-4">
+        <Skeleton className="h-9 w-20" />
+        {(mode === 'create' || mode === 'edit') && <Skeleton className="h-9 w-32" />}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex w-full gap-4">
+      {mode === 'create' ? content : <Card size="full">{content}</Card>}
+
+      {/* Sidebar for create/edit modes */}
+      {(mode === 'create' || mode === 'edit') && (
+        <div className="w-80 space-y-4 rounded-lg border p-4">
+          <Skeleton className="h-6 w-48" />
+          <SkeletonGroup spacing="default">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[90%]" />
+          </SkeletonGroup>
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-24 w-full" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
 const pipelineFormSchema = z.object({
   name: z.string().min(1, 'Pipeline name is required').max(100, 'Pipeline name must be less than 100 characters'),
   description: z.string().optional(),
@@ -65,7 +173,6 @@ type PipelineFormValues = z.infer<typeof pipelineFormSchema>;
 export default function PipelinePage() {
   const { mode, pipelineId } = usePipelineMode();
   const navigate = useNavigate();
-  const toast = useToast();
 
   // Zustand store for wizard persistence (CREATE mode only)
   const [searchParams] = useSearchParams();
@@ -75,7 +182,6 @@ export default function PipelinePage() {
   const setPersistedYamlContent = useOnboardingYamlContentStore((state) => state.setYamlContent);
   const [editorInstance, setEditorInstance] = useState<null | editor.IStandaloneCodeEditor>(null);
 
-  // Form state with validation
   const form = useForm<PipelineFormValues>({
     resolver: zodResolver(pipelineFormSchema),
     defaultValues: {
@@ -88,7 +194,6 @@ export default function PipelinePage() {
   const [yamlContent, setYamlContent] = useState('');
   const [lintHints, setLintHints] = useState<Record<string, LintHint>>({});
 
-  // Fetch pipeline data in view/edit modes
   const { data: pipelineResponse, isLoading: isPipelineLoading } = useGetPipelineQuery(
     { id: pipelineId || '' },
     {
@@ -98,8 +203,8 @@ export default function PipelinePage() {
 
   const pipeline = useMemo(() => pipelineResponse?.response?.pipeline, [pipelineResponse]);
 
-  // Fetch components for schema
   const { data: componentListResponse } = useListComponentsQuery();
+
   const components = useMemo(
     () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
     [componentListResponse]
@@ -124,18 +229,14 @@ export default function PipelinePage() {
     }
   }, [schemaResponse]);
 
-  // Mutations - only those used in this component
-  const createMutation = useCreatePipelineMutation();
-  const updateMutation = useUpdatePipelineMutation();
+  const { mutate: createMutation, isPending: isCreatePending } = useCreatePipelineMutation();
+  const { mutate: updateMutation, isPending: isUpdatePending } = useUpdatePipelineMutation();
 
-  // Linting - debounce the input to avoid excessive API calls
   const debouncedYamlContent = useDebouncedValue(yamlContent, 500);
-
   const { data: lintResponse, isPending: isLinting } = useLintPipelineConfigQuery(debouncedYamlContent, {
     enabled: mode !== 'view',
   });
 
-  // Process lint results when they arrive
   useEffect(() => {
     if (lintResponse) {
       try {
@@ -222,6 +323,17 @@ export default function PipelinePage() {
     });
   }, []);
 
+  const handleCancel = useCallback(() => {
+    if (mode === 'create') {
+      clearWizardStore();
+    }
+    if (mode === 'view') {
+      navigate('/connect-clusters');
+    } else {
+      navigate(-1);
+    }
+  }, [mode, clearWizardStore, navigate]);
+
   const handleSave = useCallback(async () => {
     // Validate form
     const isValid = await form.trigger();
@@ -237,6 +349,9 @@ export default function PipelinePage() {
         configYaml: yamlContent,
         description: description || '',
         resources: { cpuShares: tasksToCPU(computeUnits) || '0', memoryShares: '0' },
+        tags: {
+          __redpanda_cloud_pipeline_type: 'pipeline',
+        },
       });
 
       const createRequestDataPlane = create(CreatePipelineRequestSchemaDataPlane, {
@@ -247,37 +362,33 @@ export default function PipelinePage() {
         request: createRequestDataPlane,
       });
 
-      createMutation.mutate(createRequest, {
+      createMutation(createRequest, {
         onSuccess: (response) => {
           setLintHints({});
           clearWizardStore();
-          toast({
-            status: 'success',
-            title: 'Pipeline created',
-            duration: 4000,
-            isClosable: false,
-          });
+          toast.success('Pipeline created');
+
           const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
           const currentUnits = form.getValues('computeUnits');
           if (retUnits && currentUnits !== retUnits) {
-            toast({
-              status: 'warning',
-              title: `Pipeline has been resized to use ${retUnits} compute units`,
-              duration: 6000,
-              isClosable: false,
-            });
+            toast.warning(`Pipeline has been resized to use ${retUnits} compute units`);
+          }
+          const newPipelineId = response.response?.pipeline?.id;
+          if (newPipelineId) {
+            navigate(`/rp-connect/${newPipelineId}`);
+          } else {
+            navigate('/connect-clusters');
           }
-          navigate('/connect-clusters');
         },
         onError: (err) => {
           setLintHints(extractLintHintsFromError(err));
-          toast({
-            status: 'error',
-            title: 'Failed to create pipeline',
-            description: formatPipelineError(err),
-            duration: null,
-            isClosable: true,
-          });
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'create',
+              entity: 'pipeline',
+            })
+          );
         },
       });
     } else if (pipelineId) {
@@ -286,6 +397,9 @@ export default function PipelinePage() {
         configYaml: yamlContent,
         description: description || '',
         resources: { cpuShares: tasksToCPU(computeUnits) || '0', memoryShares: '0' },
+        tags: {
+          ...pipeline?.tags,
+        },
       });
 
       const updateRequestDataPlane = create(UpdatePipelineRequestSchemaDataPlane, {
@@ -297,40 +411,30 @@ export default function PipelinePage() {
         request: updateRequestDataPlane,
       });
 
-      updateMutation.mutate(updateRequest, {
+      updateMutation(updateRequest, {
         onSuccess: (response) => {
           setLintHints({});
-          toast({
-            status: 'success',
-            title: 'Pipeline updated',
-            duration: 4000,
-            isClosable: false,
-          });
+          toast.success('Pipeline updated');
           const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
           const currentUnits = form.getValues('computeUnits');
           if (retUnits && currentUnits !== retUnits) {
-            toast({
-              status: 'warning',
-              title: `Pipeline has been resized to use ${retUnits} compute units`,
-              duration: 6000,
-              isClosable: false,
-            });
+            toast.warning(`Pipeline has been resized to use ${retUnits} compute units`);
           }
           navigate(`/rp-connect/${pipelineId}`);
         },
         onError: (err) => {
           setLintHints(extractLintHintsFromError(err));
-          toast({
-            status: 'error',
-            title: 'Failed to update pipeline',
-            description: formatPipelineError(err),
-            duration: null,
-            isClosable: true,
-          });
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'update',
+              entity: 'pipeline',
+            })
+          );
         },
       });
     }
-  }, [form, yamlContent, mode, pipelineId, createMutation, updateMutation, toast, navigate, clearWizardStore]);
+  }, [form, yamlContent, mode, pipelineId, createMutation, updateMutation, navigate, clearWizardStore, pipeline]);
 
   const handleSetYamlContent = useCallback((newYaml: string) => {
     setYamlContent(newYaml);
@@ -344,63 +448,50 @@ export default function PipelinePage() {
     }
   }, 500);
 
-  const isSaving = useMemo(
-    () => createMutation.isPending || updateMutation.isPending,
-    [createMutation.isPending, updateMutation.isPending]
-  );
+  const isSaving = isCreatePending || isUpdatePending;
 
   if (isPipelineLoading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <WaitingRedpanda />
-      </div>
-    );
+    return <PipelinePageSkeleton mode={mode} />;
   }
 
+  const content = (
+    <>
+      <Form {...form}>
+        <Details readonly={mode === 'view'} />
+      </Form>
+
+      <YamlEditorCard
+        onChange={handleYamlChange}
+        onMount={(editorRef) => {
+          setEditorInstance(editorRef);
+        }}
+        options={{
+          readOnly: mode === 'view',
+        }}
+        schema={yamlEditorSchema}
+        value={yamlContent}
+      />
+
+      {mode !== 'view' && Object.keys(lintHints).length > 0 && (
+        <div className="mt-4">
+          <Alert variant="destructive">
+            <AlertDescription>
+              <LintHintList className="w-full" isPending={isLinting} lintHints={lintHints} />
+            </AlertDescription>
+          </Alert>
+        </div>
+      )}
+      <Footer isSaving={isSaving} mode={mode} onCancel={handleCancel} onSave={handleSave} />
+    </>
+  );
+
   return (
     <div className="flex w-full gap-4">
-      <div className="flex flex-1 flex-col gap-4 overflow-auto">
-        {/* Toolbar - only in view mode */}
+      <div className="flex flex-1 flex-col gap-4">
         {mode === 'view' && pipelineId && (
           <Toolbar pipelineId={pipelineId} pipelineName={form.getValues('name')} pipelineState={pipeline?.state} />
         )}
-
-        <Form {...form}>
-          <Details readonly={mode === 'view'} />
-        </Form>
-
-        <YamlEditorCard
-          onChange={handleYamlChange}
-          onMount={(editorRef) => {
-            setEditorInstance(editorRef);
-          }}
-          options={{
-            readOnly: mode === 'view',
-          }}
-          schema={yamlEditorSchema}
-          value={yamlContent}
-        />
-
-        {/* Lint Hints - only in create/edit modes */}
-        {mode !== 'view' && Object.keys(lintHints).length > 0 && (
-          <div className="mt-4">
-            <Alert variant="destructive">
-              <AlertDescription>
-                <LintHintList className="w-full" isPending={isLinting} lintHints={lintHints} />
-              </AlertDescription>
-            </Alert>
-          </div>
-        )}
-
-        {/* Footer - only in create/edit modes */}
-        {mode !== 'view' && (
-          <Footer
-            isSaving={isSaving}
-            mode={mode}
-            onCancel={mode === 'create' ? clearWizardStore : undefined}
-            onSave={handleSave}
-          />
-        )}
+        {mode === 'create' ? content : <Card size="full">{content}</Card>}
       </div>
       {(mode === 'create' || mode === 'edit') && (
         <CreatePipelineSidebar
diff --git a/frontend/src/components/pages/rp-connect/pipeline/list.tsx b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
new file mode 100644
index 000000000..11bbd1265
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
@@ -0,0 +1,320 @@
+/**
+ * Copyright 2025 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { ConnectError } from '@connectrpc/connect';
+import type { ColumnDef, VisibilityState } from '@tanstack/react-table';
+import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import { DataTablePagination } from 'components/redpanda-ui/components/data-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { DeleteResourceAlertDialog } from 'components/ui/delete-resource-alert-dialog';
+import { AlertCircle, Check, Loader2, Pause, Plus, Trash2 } from 'lucide-react';
+import { DeletePipelineRequestSchema } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
+import type { Pipeline as APIPipeline, Pipeline_State } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { Pipeline_State as PipelineState } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { useCallback, useMemo, useState } from 'react';
+import { useDeletePipelineMutation, useListPipelinesQuery } from 'react-query/api/pipeline';
+import { Link, useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useResetOnboardingWizardStore } from 'state/onboarding-wizard-store';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
+
+type Pipeline = {
+  id: string;
+  name: string;
+  description: string;
+  state: Pipeline_State;
+};
+
+const transformAPIPipeline = (apiPipeline: APIPipeline): Pipeline => ({
+  id: apiPipeline.id,
+  name: apiPipeline.displayName,
+  description: apiPipeline.description,
+  state: apiPipeline.state,
+});
+
+const PipelineStatusBadge = ({ state }: { state: Pipeline_State }) => {
+  const statusConfig = useMemo(() => {
+    switch (state) {
+      case PipelineState.RUNNING:
+        return {
+          variant: 'green' as const,
+          icon: <Check className="h-3 w-3" />,
+          text: 'Running',
+        };
+      case PipelineState.STARTING:
+        return {
+          variant: 'blue' as const,
+          icon: <Loader2 className="h-3 w-3 animate-spin" />,
+          text: 'Starting',
+        };
+      case PipelineState.STOPPING:
+        return {
+          variant: 'orange' as const,
+          icon: <Loader2 className="h-3 w-3 animate-spin" />,
+          text: 'Stopping',
+        };
+      case PipelineState.STOPPED:
+        return {
+          variant: 'gray' as const,
+          icon: <Pause className="h-3 w-3" />,
+          text: 'Stopped',
+        };
+      case PipelineState.COMPLETED:
+        return {
+          variant: 'green' as const,
+          icon: <Check className="h-3 w-3" />,
+          text: 'Completed',
+        };
+      case PipelineState.ERROR:
+        return {
+          variant: 'red' as const,
+          icon: <AlertCircle className="h-3 w-3" />,
+          text: 'Error',
+        };
+      case PipelineState.UNSPECIFIED:
+        return {
+          variant: 'gray' as const,
+          icon: <AlertCircle className="h-3 w-3" />,
+          text: 'Unknown',
+        };
+      default:
+        return {
+          variant: 'gray' as const,
+          icon: <AlertCircle className="h-3 w-3" />,
+          text: 'Unknown',
+        };
+    }
+  }, [state]);
+
+  return (
+    <Badge icon={statusConfig.icon} variant={statusConfig.variant}>
+      {statusConfig.text}
+    </Badge>
+  );
+};
+
+const PipelineListPageContent = () => {
+  const navigate = useNavigate();
+  const resetOnboardingWizardStore = useResetOnboardingWizardStore();
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  const { data: pipelinesData, isLoading, error } = useListPipelinesQuery();
+  const { mutate: deleteMutation, isPending: isDeletingPipeline } = useDeletePipelineMutation();
+
+  const pipelines = useMemo(
+    () =>
+      (pipelinesData?.pipelines || [])
+        .filter(
+          (pipeline): pipeline is APIPipeline => !!pipeline && pipeline.tags?.__redpanda_cloud_pipeline_type !== 'agent'
+        )
+        .map(transformAPIPipeline),
+    [pipelinesData]
+  );
+
+  const handleCreateClick = useCallback(() => {
+    resetOnboardingWizardStore();
+    navigate('/rp-connect/wizard');
+  }, [resetOnboardingWizardStore, navigate]);
+
+  const handleRowClick = useCallback(
+    (pipelineId: string, event: React.MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.closest('[data-actions-column]') || target.closest('button') || target.closest('a')) {
+        return;
+      }
+      navigate(`/rp-connect/${pipelineId}`);
+    },
+    [navigate]
+  );
+
+  const columns = useMemo<ColumnDef<Pipeline>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        cell: ({ row }) => (
+          <Link className="hover:underline" to={`/rp-connect/${encodeURIComponent(row.original.id)}`}>
+            <Text variant="default">{row.getValue('id')}</Text>
+          </Link>
+        ),
+        enableSorting: false,
+        size: 120,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Pipeline Name',
+        cell: ({ row }) => (
+          <Link className="hover:underline" to={`/rp-connect/${encodeURIComponent(row.original.id)}`}>
+            <Text className="font-medium" variant="default">
+              {row.getValue('name')}
+            </Text>
+          </Link>
+        ),
+        size: 250,
+      },
+      {
+        accessorKey: 'description',
+        header: 'Description',
+        cell: ({ row }) => <Text className="max-w-md truncate">{row.getValue('description') || '-'}</Text>,
+        enableSorting: false,
+        size: 400,
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        cell: ({ row }) => <PipelineStatusBadge state={row.getValue('state')} />,
+        size: 120,
+      },
+      {
+        id: 'actions',
+        enableHiding: false,
+        cell: ({ row }) => {
+          const handleDelete = (id: string) => {
+            const deleteRequest = create(DeletePipelineRequestSchema, {
+              request: { id },
+            });
+
+            deleteMutation(deleteRequest, {
+              onSuccess: () => {
+                toast.success('Pipeline deleted');
+              },
+              onError: (err) => {
+                toast.error(
+                  formatToastErrorMessageGRPC({
+                    error: ConnectError.from(err),
+                    action: 'delete',
+                    entity: 'pipeline',
+                  })
+                );
+              },
+            });
+          };
+
+          return (
+            <div className="flex justify-end" data-actions-column>
+              <DeleteResourceAlertDialog
+                buttonIcon={<Trash2 />}
+                buttonText=""
+                buttonVariant="ghost"
+                isDeleting={isDeletingPipeline}
+                onDelete={handleDelete}
+                resourceId={row.original.id}
+                resourceName={row.original.name}
+                resourceType="Pipeline"
+                triggerVariant="button"
+              />
+            </div>
+          );
+        },
+        size: 60,
+      },
+    ],
+    [deleteMutation, isDeletingPipeline]
+  );
+
+  const table = useReactTable({
+    data: pipelines,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+    state: {
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-end gap-4">
+        <Button icon={<Plus />} onClick={handleCreateClick} size="sm">
+          Create pipeline
+        </Button>
+      </div>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {(() => {
+            if (isLoading) {
+              return (
+                <TableRow>
+                  <TableCell className="h-24 text-center" colSpan={columns.length}>
+                    <div className="flex items-center justify-center gap-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Loading pipelines...
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            }
+            if (error) {
+              return (
+                <TableRow>
+                  <TableCell className="h-24 text-center" colSpan={columns.length}>
+                    <div className="flex items-center justify-center gap-2 text-red-600">
+                      <AlertCircle className="h-4 w-4" />
+                      Error loading pipelines: {error.message}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            }
+            if (table.getRowModel().rows?.length) {
+              return table.getRowModel().rows.map((row) => (
+                <TableRow
+                  className="cursor-pointer hover:bg-muted/50"
+                  data-state={row.getIsSelected() && 'selected'}
+                  key={row.id}
+                  onClick={(event) => handleRowClick(row.original.id, event)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ));
+            }
+            return (
+              <TableRow>
+                <TableCell className="h-24 text-center" colSpan={columns.length}>
+                  You have no Redpanda Connect pipelines
+                </TableCell>
+              </TableRow>
+            );
+          })()}
+        </TableBody>
+      </Table>
+      <DataTablePagination table={table} />
+    </div>
+  );
+};
+
+export const PipelineListPage = () => <PipelineListPageContent />;
diff --git a/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
index 8bc38022b..db0f9461b 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
@@ -10,18 +10,11 @@
  */
 
 import { create } from '@bufbuild/protobuf';
-import { useToast } from '@redpanda-data/ui';
+import { ConnectError } from '@connectrpc/connect';
 import { Button } from 'components/redpanda-ui/components/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from 'components/redpanda-ui/components/dialog';
 import { Group } from 'components/redpanda-ui/components/group';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { DeleteResourceAlertDialog } from 'components/ui/delete-resource-alert-dialog';
 import { Pause, Pencil, Play } from 'lucide-react';
 import {
   DeletePipelineRequestSchema,
@@ -30,11 +23,11 @@ import {
 } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
 import type { Pipeline_State } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { Pipeline_State as PipelineState } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useDeletePipelineMutation, useStartPipelineMutation, useStopPipelineMutation } from 'react-query/api/pipeline';
 import { useNavigate } from 'react-router-dom';
-
-import { formatPipelineError } from '../errors';
+import { toast } from 'sonner';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 
 interface ToolbarProps {
   pipelineId: string;
@@ -44,56 +37,40 @@ interface ToolbarProps {
 
 export const Toolbar = memo(({ pipelineId, pipelineName, pipelineState }: ToolbarProps) => {
   const navigate = useNavigate();
-  const toast = useToast();
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-
-  const deleteMutation = useDeletePipelineMutation();
-  const startMutation = useStartPipelineMutation();
-  const stopMutation = useStopPipelineMutation();
 
-  const isRunning = useMemo(() => pipelineState === PipelineState.RUNNING, [pipelineState]);
-  const isTransitioning = useMemo(
-    () => pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING,
-    [pipelineState]
-  );
-  const isActionLoading = useMemo(
-    () => startMutation.isPending || stopMutation.isPending || deleteMutation.isPending,
-    [startMutation.isPending, stopMutation.isPending, deleteMutation.isPending]
-  );
-  const isLoading = useMemo(() => isActionLoading || isTransitioning, [isActionLoading, isTransitioning]);
+  const { mutate: deleteMutation, isPending: isDeletePending } = useDeletePipelineMutation();
+  const { mutate: startMutation, isPending: isStartPending } = useStartPipelineMutation();
+  const { mutate: stopMutation, isPending: isStopPending } = useStopPipelineMutation();
 
-  const handleDeleteClick = useCallback(() => {
-    setIsDeleteDialogOpen(true);
-  }, []);
+  const isRunning = pipelineState === PipelineState.RUNNING;
+  const isTransitioning = pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING;
+  const isActionLoading = isStartPending || isStopPending || isDeletePending;
+  const isLoading = isActionLoading || isTransitioning;
 
-  const handleDeleteConfirm = useCallback(() => {
-    const deleteRequest = create(DeletePipelineRequestSchema, {
-      request: { id: pipelineId },
-    });
+  const handleDelete = useCallback(
+    (id: string) => {
+      const deleteRequest = create(DeletePipelineRequestSchema, {
+        request: { id },
+      });
 
-    deleteMutation.mutate(deleteRequest, {
-      onSuccess: () => {
-        setIsDeleteDialogOpen(false);
-        toast({
-          status: 'success',
-          title: 'Pipeline deleted',
-          duration: 4000,
-          isClosable: false,
-        });
-        navigate('/connect-clusters');
-      },
-      onError: (err) => {
-        setIsDeleteDialogOpen(false);
-        toast({
-          status: 'error',
-          title: 'Failed to delete pipeline',
-          description: formatPipelineError(err),
-          duration: null,
-          isClosable: true,
-        });
-      },
-    });
-  }, [pipelineId, deleteMutation, toast, navigate]);
+      deleteMutation(deleteRequest, {
+        onSuccess: () => {
+          toast.success('Pipeline deleted');
+          navigate('/connect-clusters');
+        },
+        onError: (err) => {
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'delete',
+              entity: 'pipeline',
+            })
+          );
+        },
+      });
+    },
+    [deleteMutation, navigate]
+  );
 
   const handleStartStop = useCallback(() => {
     if (isRunning) {
@@ -101,23 +78,18 @@ export const Toolbar = memo(({ pipelineId, pipelineName, pipelineState }: Toolba
         request: { id: pipelineId },
       });
 
-      stopMutation.mutate(stopRequest, {
+      stopMutation(stopRequest, {
         onSuccess: () => {
-          toast({
-            status: 'success',
-            title: 'Pipeline stopped',
-            duration: 4000,
-            isClosable: false,
-          });
+          toast.success('Pipeline stopped');
         },
         onError: (err) => {
-          toast({
-            status: 'error',
-            title: 'Failed to stop pipeline',
-            description: formatPipelineError(err),
-            duration: null,
-            isClosable: true,
-          });
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'stop',
+              entity: 'pipeline',
+            })
+          );
         },
       });
     } else {
@@ -125,78 +97,66 @@ export const Toolbar = memo(({ pipelineId, pipelineName, pipelineState }: Toolba
         request: { id: pipelineId },
       });
 
-      startMutation.mutate(startRequest, {
+      startMutation(startRequest, {
         onSuccess: () => {
-          toast({
-            status: 'success',
-            title: 'Pipeline started',
-            duration: 4000,
-            isClosable: false,
-          });
+          toast.success('Pipeline started');
         },
         onError: (err) => {
-          toast({
-            status: 'error',
-            title: 'Failed to start pipeline',
-            description: formatPipelineError(err),
-            duration: null,
-            isClosable: true,
-          });
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'start',
+              entity: 'pipeline',
+            })
+          );
         },
       });
     }
-  }, [pipelineId, isRunning, startMutation, stopMutation, toast]);
+  }, [pipelineId, isRunning, startMutation, stopMutation]);
 
   const handleEdit = useCallback(() => {
     navigate(`/rp-connect/${pipelineId}/edit`);
   }, [navigate, pipelineId]);
 
-  return (
-    <>
-      <div className="mb-4 flex items-center justify-between border-b pb-4">
-        <Button
-          disabled={isLoading}
-          // biome-ignore lint/style/noNestedTernary: because I said so
-          icon={isLoading ? <Spinner size="sm" /> : isRunning ? <Pause /> : <Play />}
-          onClick={handleStartStop}
-          variant="secondary"
-        >
-          {/** biome-ignore lint/style/noNestedTernary: because I said so */}
-          {isLoading ? (isRunning ? 'Stopping...' : 'Starting...') : isRunning ? 'Stop' : 'Start'}
-        </Button>
+  const primaryButtonProps = useMemo(() => {
+    if (isLoading) {
+      return {
+        icon: <Spinner size="sm" />,
+        children: isRunning ? 'Stopping...' : 'Starting...',
+      };
+    }
+    if (isRunning) {
+      return {
+        icon: <Pause />,
+        children: 'Stop',
+      };
+    }
+    return {
+      icon: <Play />,
+      children: 'Start',
+    };
+  }, [isRunning, isLoading]);
 
-        <div>
-          <Group>
-            <Button icon={<Pencil />} onClick={handleEdit} variant="outline">
-              Edit
-            </Button>
-            <Button onClick={handleDeleteClick} variant="destructiveOutline">
-              Delete
-            </Button>
-          </Group>
-        </div>
+  return (
+    <div className="flex items-center justify-between">
+      <Button disabled={isLoading} onClick={handleStartStop} variant="secondary" {...primaryButtonProps} />
+
+      <div>
+        <Group>
+          <Button icon={<Pencil />} onClick={handleEdit} variant="outline">
+            Edit
+          </Button>
+          <DeleteResourceAlertDialog
+            isDeleting={isDeletePending}
+            onDelete={handleDelete}
+            resourceId={pipelineId}
+            resourceName={pipelineName || 'this pipeline'}
+            resourceType="Pipeline"
+            triggerVariant="button"
+          />
+        </Group>
       </div>
-
-      {/* Delete confirmation dialog */}
-      <Dialog onOpenChange={setIsDeleteDialogOpen} open={isDeleteDialogOpen}>
-        <DialogContent size="md" variant="destructive">
-          <DialogHeader>
-            <DialogTitle>Delete Pipeline</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete <strong>{pipelineName}</strong>? This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button onClick={() => setIsDeleteDialogOpen(false)} variant="outline">
-              Cancel
-            </Button>
-            <Button disabled={deleteMutation.isPending} onClick={handleDeleteConfirm} variant="destructive">
-              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+    </div>
   );
 });
 
diff --git a/frontend/src/components/pages/rp-connect/pipelines-create.tsx b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
index 519db66c3..c03097a6b 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-create.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
@@ -10,14 +10,15 @@
  */
 
 import { create } from '@bufbuild/protobuf';
+import { ConnectError } from '@connectrpc/connect';
 import type { Monaco } from '@monaco-editor/react';
-import { Button, Flex, FormField, Input, NumberInput, useDisclosure, useToast } from '@redpanda-data/ui';
+import { Flex, FormField, Input, NumberInput, useDisclosure } from '@redpanda-data/ui';
 import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
-import { Button as NewButton } from 'components/redpanda-ui/components/button';
+import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { Link as UILink, Text as UIText } from 'components/redpanda-ui/components/typography';
-import { isFeatureFlagEnabled } from 'config';
+import { isEmbedded, isFeatureFlagEnabled } from 'config';
 import { AlertCircle, PlusIcon } from 'lucide-react';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -25,6 +26,7 @@ import type { editor, IDisposable, languages } from 'monaco-editor';
 import { PipelineCreateSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import React, { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { formatPipelineError } from './errors';
 import PipelinePage from './pipeline';
@@ -75,7 +77,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   render() {
-    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
       return <PipelinePage />;
     }
     if (!pipelinesApi.pipelines) {
@@ -88,20 +90,16 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
     const alreadyExists = pipelinesApi.pipelines.any((x) => x.id === this.fileName);
     const isNameEmpty = this.fileName.trim().length === 0;
 
-    const CreateButton = () => {
-      const toast = useToast();
-
-      return (
-        <NewButton
-          disabled={alreadyExists || isNameEmpty || this.isCreating}
-          onClick={action(() => this.createPipeline(toast))}
-          variant="secondary"
-        >
-          {this.isCreating && <Spinner />}
-          {this.isCreating ? 'Creating...' : 'Create'}
-        </NewButton>
-      );
-    };
+    const CreateButton = () => (
+      <Button
+        disabled={alreadyExists || isNameEmpty || this.isCreating}
+        onClick={action(() => this.createPipeline())}
+        variant="secondary"
+      >
+        {this.isCreating && <Spinner />}
+        {this.isCreating ? 'Creating...' : 'Create'}
+      </Button>
+    );
 
     return (
       <PageContent>
@@ -175,7 +173,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   // biome-ignore lint/suspicious/useAwait: async needed for error handling in MobX action
-  async createPipeline(toast: ReturnType<typeof useToast>) {
+  async createPipeline() {
     this.isCreating = true;
 
     pipelinesApi
@@ -196,34 +194,19 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
       )
       .then(
         action(async (r) => {
-          toast({
-            status: 'success',
-            duration: 4000,
-            isClosable: false,
-            title: 'Pipeline created',
-          });
+          toast.success('Pipeline created');
           const retUnits = cpuToTasks(r.response?.pipeline?.resources?.cpuShares);
           if (retUnits && this.tasks !== retUnits) {
-            toast({
-              status: 'warning',
-              duration: 6000,
-              isClosable: false,
-              title: `Pipeline has been resized to use ${retUnits} compute units`,
-            });
+            toast.warning(`Pipeline has been resized to use ${retUnits} compute units`);
           }
-
           await pipelinesApi.refreshPipelines(true);
           appGlobal.historyPush('/connect-clusters');
         })
       )
       .catch(
         action((err) => {
-          toast({
-            status: 'error',
-            duration: null,
-            isClosable: true,
-            title: 'Failed to create pipeline',
-            description: formatPipelineError(err),
+          toast.error('Failed to create pipeline', {
+            description: formatPipelineError(ConnectError.from(err)),
           });
         })
       )
@@ -267,10 +250,10 @@ const QuickActions = ({ editorInstance, resetAutocompleteSecrets }: QuickActions
           <CardDescription>Add a reference to a new or existing secret value, such as a key.</CardDescription>
         </CardHeader>
         <CardContent>
-          <NewButton onClick={openAddSecret} variant="secondary">
+          <Button onClick={openAddSecret} variant="secondary">
             <PlusIcon className="size-4" color="white" />
             Add secrets
-          </NewButton>
+          </Button>
         </CardContent>
       </Card>
       <SecretsQuickAdd isOpen={isAddSecretOpen} onAdd={onAddSecret} onCloseAddSecret={closeAddSecret} />
@@ -401,10 +384,10 @@ export const PipelineEditor = observer(
                   {!p.isDisabled && (
                     <QuickActions
                       editorInstance={editorInstance}
-                      resetAutocompleteSecrets={() => {
+                      resetAutocompleteSecrets={async () => {
                         if (secretAutocomplete && monaco) {
                           secretAutocomplete.dispose();
-                          void registerSecretsAutocomplete(monaco, setSecretAutocomplete);
+                          await registerSecretsAutocomplete(monaco, setSecretAutocomplete);
                         }
                       }}
                     />
diff --git a/frontend/src/components/pages/rp-connect/pipelines-details.tsx b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
index dec38c747..a84cf804d 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-details.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
@@ -11,12 +11,11 @@
 
 import { Alert, AlertIcon, Box, Button, createStandaloneToast, DataTable, Flex, SearchField } from '@redpanda-data/ui';
 import type { ColumnDef } from '@tanstack/react-table';
-import { isFeatureFlagEnabled } from 'config';
+import { isEmbedded, isFeatureFlagEnabled } from 'config';
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
 import { openDeleteModal } from './modals';
 import PipelinePage from './pipeline';
@@ -78,7 +77,7 @@ class RpConnectPipelinesDetails extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
-    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
       return <PipelinePage />;
     }
     if (!pipelinesApi.pipelines) {
@@ -116,12 +115,7 @@ class RpConnectPipelinesDetails extends PageComponent<{ pipelineId: string }> {
 
         <Flex gap="4" mb="4">
           <Link to={`/rp-connect/${pipelineId}/edit`}>
-            <Button
-              onClick={() => (isFeatureFlagEnabled('enableRpcnTiles') ? onboardingWizardStore.reset() : undefined)}
-              variant="solid"
-            >
-              Edit
-            </Button>
+            <Button variant="solid">Edit</Button>
           </Link>
 
           <Button
diff --git a/frontend/src/components/pages/rp-connect/pipelines-edit.tsx b/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
index 004f6e626..3340241b6 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-edit.tsx
@@ -12,15 +12,13 @@
 import { create } from '@bufbuild/protobuf';
 import { Button, type CreateToastFnReturn, Flex, FormField, Input, NumberInput, useToast } from '@redpanda-data/ui';
 import { Link as UILink, Text as UIText } from 'components/redpanda-ui/components/typography';
-import { LintHintList } from 'components/ui/lint-hint/lint-hint-list';
-import { isFeatureFlagEnabled } from 'config';
+import { isEmbedded, isFeatureFlagEnabled } from 'config';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { type Pipeline_ServiceAccount, PipelineUpdateSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { Link } from 'react-router-dom';
-import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
-import { extractLintHintsFromError, formatPipelineError } from './errors';
+import { formatPipelineError } from './errors';
 import PipelinePage from './pipeline';
 import { PipelineEditor } from './pipelines-create';
 import { cpuToTasks, MAX_TASKS, MIN_TASKS, tasksToCPU } from './tasks';
@@ -67,7 +65,7 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
-    if (isFeatureFlagEnabled('enableRpcnTiles')) {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
       return <PipelinePage />;
     }
     if (!pipelinesApi.pipelines) {
@@ -169,12 +167,6 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
           <PipelineEditor onChange={(x) => (this.editorContent = x)} secrets={this.secrets} yaml={this.editorContent} />
         </div>
 
-        {isFeatureFlagEnabled('enableRpcnTiles') && this.lintResults && Object.keys(this.lintResults).length > 0 && (
-          <div className="mt-4">
-            <LintHintList lintHints={this.lintResults} />
-          </div>
-        )}
-
         <Flex alignItems="center" gap="4">
           <UpdateButton />
           <Link to={`/rp-connect/${pipelineId}`}>
@@ -188,7 +180,6 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
   updatePipeline(toast: CreateToastFnReturn) {
     this.isUpdating = true;
     const pipelineId = this.props.pipelineId;
-    const enableRpcnTiles = isFeatureFlagEnabled('enableRpcnTiles');
 
     pipelinesApi
       .updatePipeline(
@@ -209,17 +200,13 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
       )
       .then(
         action(async (r) => {
-          if (enableRpcnTiles) {
-            this.lintResults = {};
-            onboardingWizardStore.reset();
-          } else {
-            toast({
-              status: 'success',
-              duration: 4000,
-              isClosable: false,
-              title: 'Pipeline updated',
-            });
-          }
+          toast({
+            status: 'success',
+            duration: 4000,
+            isClosable: false,
+            title: 'Pipeline updated',
+          });
+
           const retUnits = cpuToTasks(r.response?.pipeline?.resources?.cpuShares);
           if (retUnits && this.tasks !== retUnits) {
             toast({
@@ -235,17 +222,13 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
       )
       .catch(
         action((err) => {
-          if (enableRpcnTiles) {
-            this.lintResults = extractLintHintsFromError(err);
-          } else {
-            toast({
-              status: 'error',
-              duration: null,
-              isClosable: true,
-              title: 'Failed to update pipeline',
-              description: formatPipelineError(err),
-            });
-          }
+          toast({
+            status: 'error',
+            duration: null,
+            isClosable: true,
+            title: 'Failed to update pipeline',
+            description: formatPipelineError(err),
+          });
         })
       )
       .finally(() => {
diff --git a/frontend/src/components/pages/rp-connect/pipelines-list.tsx b/frontend/src/components/pages/rp-connect/pipelines-list.tsx
index 3adb220b1..22c2eca1a 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-list.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-list.tsx
@@ -13,17 +13,16 @@ import { CheckIcon } from '@chakra-ui/icons';
 import { TrashIcon } from '@heroicons/react/outline';
 import { Box, Button, createStandaloneToast, DataTable, Flex, Image, SearchField, Text } from '@redpanda-data/ui';
 import { Button as NewButton } from 'components/redpanda-ui/components/button';
-import { isFeatureFlagEnabled } from 'config';
+import { isEmbedded, isFeatureFlagEnabled } from 'config';
 import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { useCallback } from 'react';
 import { FaRegStopCircle } from 'react-icons/fa';
 import { HiX } from 'react-icons/hi';
 import { MdOutlineQuestionMark, MdRefresh } from 'react-icons/md';
-import { Link, useNavigate } from 'react-router-dom';
-import { useResetOnboardingWizardStore } from 'state/onboarding-wizard-store';
+import { Link } from 'react-router-dom';
 
 import { openDeleteModal } from './modals';
+import { PipelineListPage } from './pipeline/list';
 import EmptyConnectors from '../../../assets/redpanda/EmptyConnectors.svg';
 import { type Pipeline, Pipeline_State } from '../../../protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { appGlobal } from '../../../state/app-global';
@@ -48,25 +47,6 @@ const LegacyCreatePipelineButton = () => (
   </div>
 );
 
-/**
- * Navigates to wizard and clears session storage
- */
-const WizardCreatePipelineButton = () => {
-  const resetOnboardingWizardStore = useResetOnboardingWizardStore();
-  const navigate = useNavigate();
-
-  const handleClick = useCallback(() => {
-    resetOnboardingWizardStore();
-    navigate('/rp-connect/wizard');
-  }, [resetOnboardingWizardStore, navigate]);
-
-  return (
-    <div>
-      <NewButton onClick={handleClick}>Create pipeline</NewButton>
-    </div>
-  );
-};
-
 /**
  * Shows image, text, and create button
  */
@@ -74,7 +54,7 @@ const LegacyEmptyState = () => (
   <Flex alignItems="center" flexDirection="column" gap="4" justifyContent="center" mb="4">
     <Image src={EmptyConnectors} />
     <Box>You have no Redpanda Connect pipelines.</Box>
-    {isFeatureFlagEnabled('enableRpcnTiles') ? <WizardCreatePipelineButton /> : <LegacyCreatePipelineButton />}
+    <LegacyCreatePipelineButton />
   </Flex>
 );
 
@@ -187,6 +167,10 @@ class RpConnectPipelinesList extends PageComponent<{}> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelineListPage />;
+    }
+
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
@@ -217,22 +201,17 @@ class RpConnectPipelinesList extends PageComponent<{}> {
         <ToastContainer />
         {/* Pipeline List */}
 
-        {pipelinesApi.pipelines.length !== 0 &&
-          (isFeatureFlagEnabled('enableRpcnTiles') ? (
-            <div className="my-5">
-              <WizardCreatePipelineButton />
-            </div>
-          ) : (
-            <div className="my-5 flex flex-col gap-2">
-              <LegacyCreatePipelineButton />
-              <SearchField
-                placeholderText="Enter search term / regex..."
-                searchText={uiSettings.pipelinesList.quickSearch}
-                setSearchText={(x) => (uiSettings.pipelinesList.quickSearch = x)}
-                width="350px"
-              />
-            </div>
-          ))}
+        {pipelinesApi.pipelines.length !== 0 && (
+          <div className="my-5 flex flex-col gap-2">
+            <LegacyCreatePipelineButton />
+            <SearchField
+              placeholderText="Enter search term / regex..."
+              searchText={uiSettings.pipelinesList.quickSearch}
+              setSearchText={(x) => (uiSettings.pipelinesList.quickSearch = x)}
+              width="350px"
+            />
+          </div>
+        )}
 
         {(pipelinesApi.pipelines ?? []).length === 0 ? (
           <LegacyEmptyState />
diff --git a/frontend/src/components/pages/rp-connect/types/constants.ts b/frontend/src/components/pages/rp-connect/types/constants.ts
index ce2d5c899..13c751b0b 100644
--- a/frontend/src/components/pages/rp-connect/types/constants.ts
+++ b/frontend/src/components/pages/rp-connect/types/constants.ts
@@ -16,16 +16,20 @@ export const REDPANDA_TOPIC_AND_USER_COMPONENTS = [
 
 /**
  * Fields that are critical for connection and should always be shown
- * even when they have defaults
+ * even when they have defaults.
+ *
+ * Note: These fields are only shown if they exist in the component's schema.
+ * The existence check happens naturally through schema iteration.
  */
-export const CRITICAL_CONNECTION_FIELDS = new Set(['sasl', 'consumer_group', 'topics']);
-
-/**
- * Configuration object fields that should be hidden for REDPANDA_SECRET_COMPONENTS
- * when wizard data exists (unless showOptionalFields is true)
- * Note: 'tls' is NOT included here because Redpanda Cloud always requires TLS enabled
- */
-export const NON_CRITICAL_CONFIG_OBJECTS = new Set(['metadata', 'batching', 'backoff', 'retry']);
+export const CRITICAL_CONNECTION_FIELDS = new Set([
+  'sasl',
+  'consumer_group',
+  'topics',
+  'topic',
+  'key',
+  'partition',
+  'label',
+]);
 
 export const REDPANDA_CONTEXTUAL_VARIABLES = {
   REDPANDA_BROKERS: {
@@ -102,3 +106,5 @@ export const stepMotionProps: MotionProps = {
 };
 
 export const HANDLED_ARRAY_MERGE_PATHS = ['pipeline.processors', 'cache_resources', 'rate_limit_resources'];
+
+export type PipelineMode = 'create' | 'edit' | 'view';
diff --git a/frontend/src/components/pages/rp-connect/utils/schema.test.tsx b/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
index 624c74479..41695e603 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
+++ b/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
@@ -1,9 +1,11 @@
+import { create } from '@bufbuild/protobuf';
+import { ComponentStatus, FieldSpecSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { mockComponents } from './__fixtures__/component-schemas';
 import { generateDefaultValue, schemaToConfig } from './schema';
-import type { RawFieldSpec } from '../types/schema';
+import type { ConnectComponentSpec, RawFieldSpec } from '../types/schema';
 
 vi.mock('zustand');
 
@@ -13,7 +15,14 @@ describe('generateDefaultValue', () => {
   });
 
   describe('Critical connection fields for Redpanda components', () => {
-    test('SASL always shown for Redpanda components (critical field)', () => {
+    test('SASL shown for Redpanda components when wizard user data exists', () => {
+      // Set wizard user data to make SASL visible
+      onboardingWizardStore.setUserData({
+        username: 'testuser',
+        saslMechanism: 'SCRAM-SHA-256',
+        consumerGroup: '',
+      });
+
       const spec = {
         name: 'sasl',
         type: 'object',
@@ -38,6 +47,38 @@ describe('generateDefaultValue', () => {
 
       expect(result).toBeDefined();
       expect((result as Record<string, unknown>).mechanism).toBe('SCRAM-SHA-256');
+
+      // Clean up
+      onboardingWizardStore.setUserData({ username: '', consumerGroup: '' });
+    });
+
+    test('SASL NOT shown for Redpanda components without wizard user data', () => {
+      // Ensure no wizard user data
+      onboardingWizardStore.setUserData({ username: '', consumerGroup: '' });
+
+      const spec = {
+        name: 'sasl',
+        type: 'object',
+        kind: 'scalar',
+        optional: true,
+        advanced: true,
+        children: [
+          {
+            name: 'mechanism',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: 'none',
+          },
+        ],
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'kafka',
+      });
+
+      expect(result).toBeUndefined();
     });
 
     test('critical fields NOT shown for non-Redpanda components', () => {
@@ -170,6 +211,27 @@ describe('generateDefaultValue', () => {
       expect(result).toEqual(['example']);
     });
 
+    test('topics array field without wizard data generates array with empty string', () => {
+      // Clear wizard data to test default behavior
+      onboardingWizardStore.setTopicData({ topicName: undefined });
+
+      const spec = {
+        name: 'topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '', // Empty default should still generate array structure
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']); // Array with empty string, not just empty string
+      expect(Array.isArray(result)).toBe(true);
+    });
+
     test('populates user/password fields as secret references', () => {
       const userSpec = {
         name: 'user',
@@ -208,6 +270,42 @@ describe('generateDefaultValue', () => {
       expect(spec.comment).toBe('Required');
     });
 
+    test('topics field gets conditional requirement comment', () => {
+      const spec = {
+        name: 'topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+        comment: undefined,
+      };
+
+      generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(spec.comment).toBe('Required if regexp_topics and regexp_topics_include are not configured');
+    });
+
+    test('regexp_topics_include gets conditional requirement comment', () => {
+      const spec = {
+        name: 'regexp_topics_include',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+        comment: undefined,
+      };
+
+      generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(spec.comment).toBe('Required if topics is not configured');
+    });
+
     test('required fields with defaults get "Required (default: ...)" comment', () => {
       const spec = {
         name: 'required_field',
@@ -264,14 +362,13 @@ describe('generateDefaultValue', () => {
       expect(spec.comment).toBe('Optional (default: "my-default")');
     });
 
-    test('critical fields get "Optional" comment even when not optional', () => {
+    test('critical fields get special comments even when optional', () => {
       const spec = {
-        name: 'sasl',
-        type: 'object',
-        kind: 'scalar',
+        name: 'topics',
+        type: 'string',
+        kind: 'array',
         optional: true,
         comment: undefined,
-        children: [],
       };
 
       generateDefaultValue(spec as unknown as RawFieldSpec, {
@@ -280,7 +377,7 @@ describe('generateDefaultValue', () => {
         componentName: 'kafka',
       });
 
-      expect(spec.comment).toBe('Optional');
+      expect(spec.comment).toBe('Required if regexp_topics and regexp_topics_include are not configured');
     });
   });
 
@@ -414,7 +511,8 @@ describe('generateDefaultValue', () => {
 
       // Optional and advanced fields hidden
       expect(outputConfig.batching).toBeUndefined();
-      expect(outputConfig.key).toBeUndefined();
+      // key is now a critical field for all REDPANDA_TOPIC_AND_USER_COMPONENTS (kafka included)
+      expect(outputConfig.key).toBe('');
       expect(outputConfig.client_id).toBeUndefined();
       expect(outputConfig.sasl.access_token).toBeUndefined();
     });
@@ -436,4 +534,299 @@ describe('generateDefaultValue', () => {
       expect(inputConfig.sasl[0].username).toBe('${secrets.KAFKA_USER_ADMIN}');
     });
   });
+
+  describe('Redpanda input critical fields', () => {
+    test('seed_brokers is shown as array for redpanda input', () => {
+      const spec = {
+        name: 'seed_brokers',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('regexp_topics is shown as array for redpanda input', () => {
+      const spec = {
+        name: 'regexp_topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('regexp_topics_include is shown as array for redpanda input', () => {
+      const spec = {
+        name: 'regexp_topics_include',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('auto_replay_nacks defaults to boolean true', () => {
+      const spec = {
+        name: 'auto_replay_nacks',
+        type: 'bool',
+        kind: 'scalar',
+        defaultValue: 'true',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toBe(true);
+      expect(typeof result).toBe('boolean');
+    });
+
+    test('transaction_isolation_level has string default', () => {
+      const spec = {
+        name: 'transaction_isolation_level',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: 'read_uncommitted',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toBe('read_uncommitted');
+    });
+
+    test('input config includes label field', () => {
+      const mockRedpandaInputComponent: ConnectComponentSpec = {
+        name: 'redpanda',
+        type: 'input',
+        status: ComponentStatus.STABLE,
+        summary: 'Test',
+        description: '',
+        categories: [],
+        version: '',
+        examples: [],
+        footnotes: '',
+        $typeName: 'redpanda.api.dataplane.v1.ComponentSpec',
+        config: create(FieldSpecSchema, {
+          name: 'root',
+          type: 'object',
+          kind: 'scalar',
+          children: [],
+        }),
+      };
+
+      const result = schemaToConfig(mockRedpandaInputComponent, false, false);
+      const config = result?.config as Record<string, any>;
+
+      expect(config?.input?.label).toBe('');
+    });
+
+    test('output config includes label field', () => {
+      const mockKafkaOutputComponent: ConnectComponentSpec = {
+        name: 'kafka',
+        type: 'output',
+        status: ComponentStatus.STABLE,
+        summary: 'Test',
+        description: '',
+        categories: [],
+        version: '',
+        examples: [],
+        footnotes: '',
+        $typeName: 'redpanda.api.dataplane.v1.ComponentSpec',
+        config: create(FieldSpecSchema, {
+          name: 'root',
+          type: 'object',
+          kind: 'scalar',
+          children: [],
+        }),
+      };
+
+      const result = schemaToConfig(mockKafkaOutputComponent, false, false);
+      const config = result?.config as Record<string, any>;
+
+      expect(config?.output?.label).toBe('');
+    });
+
+    test('max_in_flight converts string default to number', () => {
+      const spec = {
+        name: 'max_in_flight',
+        type: 'int',
+        kind: 'scalar',
+        defaultValue: '256',
+        optional: false,
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toBe(256);
+      expect(typeof result).toBe('number');
+    });
+
+    test('key and partition shown for redpanda output, hidden for non-REDPANDA components', () => {
+      const keySpec = {
+        name: 'key',
+        type: 'string',
+        kind: 'scalar',
+        defaultValue: '',
+        optional: true,
+      };
+
+      // Redpanda - should show (REDPANDA_TOPIC_AND_USER_COMPONENTS + critical field)
+      const redpandaResult = generateDefaultValue(keySpec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+      expect(redpandaResult).toBe('');
+
+      // Kafka - should show (REDPANDA_TOPIC_AND_USER_COMPONENTS + critical field)
+      const kafkaResult = generateDefaultValue(keySpec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'kafka',
+      });
+      expect(kafkaResult).toBe('');
+
+      // http_client - should be hidden (not in REDPANDA_TOPIC_AND_USER_COMPONENTS)
+      const httpResult = generateDefaultValue(keySpec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'http_client',
+      });
+      expect(httpResult).toBeUndefined();
+    });
+
+    test('regexp_topics generates array even with empty default', () => {
+      const spec = {
+        name: 'regexp_topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('auto_replay_nacks with string "true" converts to boolean true', () => {
+      const spec = {
+        name: 'auto_replay_nacks',
+        type: 'bool',
+        kind: 'scalar',
+        defaultValue: 'true',
+        optional: false,
+        comment: undefined,
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toBe(true);
+      expect(typeof result).toBe('boolean');
+      expect(spec.comment).toBe('Required (default: true)');
+    });
+
+    test('max_in_flight with string "256" converts to number 256', () => {
+      const spec = {
+        name: 'max_in_flight',
+        type: 'int',
+        kind: 'scalar',
+        defaultValue: '256',
+        optional: false,
+        comment: undefined,
+      };
+
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toBe(256);
+      expect(typeof result).toBe('number');
+      expect(spec.comment).toBe('Required (default: 256)');
+    });
+
+    test('critical fields only affect visibility for fields that exist in schema', () => {
+      // Mock a component that doesn't have the 'max_in_flight' field in its schema
+      const mockComponentWithoutMaxInFlight: ConnectComponentSpec = {
+        name: 'http_client',
+        type: 'output',
+        status: ComponentStatus.STABLE,
+        summary: 'Test',
+        description: '',
+        categories: [],
+        version: '',
+        examples: [],
+        footnotes: '',
+        $typeName: 'redpanda.api.dataplane.v1.ComponentSpec',
+        config: create(FieldSpecSchema, {
+          name: 'root',
+          type: 'object',
+          kind: 'scalar',
+          children: [
+            // Only has url field, no max_in_flight
+            create(FieldSpecSchema, {
+              name: 'url',
+              type: 'string',
+              kind: 'scalar',
+              defaultValue: '',
+            }),
+          ],
+        }),
+      };
+
+      const result = schemaToConfig(mockComponentWithoutMaxInFlight, false, false);
+      const config = result?.config as Record<string, any>;
+      const outputConfig = config?.output?.http_client;
+
+      // Should only have the fields that exist in the schema
+      expect(outputConfig?.url).toBe('');
+      // max_in_flight should NOT be added even though it's in REDPANDA_CRITICAL_FIELDS
+      expect(outputConfig?.max_in_flight).toBeUndefined();
+    });
+  });
 });
diff --git a/frontend/src/components/pages/rp-connect/utils/schema.ts b/frontend/src/components/pages/rp-connect/utils/schema.ts
index 59c866575..893a99f3a 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.ts
+++ b/frontend/src/components/pages/rp-connect/utils/schema.ts
@@ -5,13 +5,19 @@ import {
 } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
 
-import { isConsumerGroupField, isPasswordField, isSchemaRegistryUrlField, isTopicField, isUserField } from './wizard';
+import {
+  hasWizardRelevantFields,
+  isConsumerGroupField,
+  isPasswordField,
+  isSchemaRegistryUrlField,
+  isTopicField,
+  isUserField,
+} from './wizard';
 import {
   CRITICAL_CONNECTION_FIELDS,
   convertToScreamingSnakeCase,
   getContextualVariableSyntax,
   getSecretSyntax,
-  NON_CRITICAL_CONFIG_OBJECTS,
   REDPANDA_TOPIC_AND_USER_COMPONENTS,
 } from '../types/constants';
 import type {
@@ -149,6 +155,11 @@ export const schemaToConfig = (
   switch (componentSpec.type) {
     case 'input':
     case 'output':
+      config[typeToYamlConfigKey[componentSpec.type]] = {
+        label: '',
+        [componentSpec.name]: connectionConfig,
+      };
+      break;
     case 'buffer':
     case 'metrics':
     case 'tracer':
@@ -289,15 +300,33 @@ function shouldShowField(params: {
 }): boolean {
   const { spec, showOptionalFields, showAdvancedFields, componentName } = params;
 
-  // Critical fields always visible
+  // Critical fields always visible (for REDPANDA_TOPIC_AND_USER_COMPONENTS)
   const isRedpandaComponent = componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName);
   const isCriticalField = isRedpandaComponent && spec.name && CRITICAL_CONNECTION_FIELDS.has(spec.name);
+
+  // Special case: SASL only shows if wizard user data exists
+  if (isCriticalField && spec.name === 'sasl') {
+    const userData = onboardingWizardStore.getUserData();
+    return !!userData?.username;
+  }
+
   if (isCriticalField) {
     return true;
   }
 
+  // Show fields that can be populated by wizard data
+  if (hasWizardRelevantFields(spec, componentName)) {
+    return true;
+  }
+
   const isAdvanced = spec.advanced === true;
   const isOptional = spec.optional === true;
+  const hasNonEmptyDefault = spec.defaultValue !== undefined && spec.defaultValue !== '';
+
+  // Show fields with defaults that aren't explicitly optional or advanced
+  if (hasNonEmptyDefault && !isOptional && !isAdvanced) {
+    return true;
+  }
 
   // Don't show advanced fields unless explicitly requested
   if (isAdvanced && !showAdvancedFields) {
@@ -309,12 +338,6 @@ function shouldShowField(params: {
     return false;
   }
 
-  // Don't show non-critical config objects for Redpanda components unless showing optional fields
-  const isNonCriticalConfigObject = isRedpandaComponent && spec.name && NON_CRITICAL_CONFIG_OBJECTS.has(spec.name);
-  if (isNonCriticalConfigObject && !showOptionalFields) {
-    return false;
-  }
-
   // Show everything else (required, non-advanced, non-optional fields)
   return true;
 }
@@ -377,7 +400,30 @@ function generateArrayValue(params: {
     }
   }
 
-  return [];
+  // Handle object arrays (arrays with children)
+  // Check for non-empty children array (empty arrays are truthy!)
+  if (spec.children && spec.children.length > 0) {
+    const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
+    // Return array with placeholder object only if object has fields
+    return obj && Object.keys(obj).length > 0 ? [obj] : [];
+  }
+
+  // Handle primitive arrays (string, int, float, bool, unknown)
+  // Always return array with placeholder element for proper YAML/Bloblang formatting
+  switch (spec.type) {
+    case 'string':
+      return [''];
+    case 'int':
+    case 'float':
+      return [0];
+    case 'bool':
+      return [false];
+    case 'unknown':
+      return [null];
+    default:
+      // Fallback for any other type (component types, etc.)
+      return [''];
+  }
 }
 
 function generateScalarValue(spec: RawFieldSpec, options: GenerateDefaultValueOptions): unknown {
@@ -390,6 +436,8 @@ function generateScalarValue(spec: RawFieldSpec, options: GenerateDefaultValueOp
       return 0;
     case 'bool':
       return false;
+    case 'unknown':
+      return null;
     case 'object': {
       const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
       return obj && Object.keys(obj).length > 0 ? obj : undefined;
@@ -406,36 +454,33 @@ interface GenerateDefaultValueOptions {
   parentName?: string;
 }
 
+/**
+ * Converts string default values to their proper types
+ */
+function convertDefaultValue(defaultValue: string, type: string): unknown {
+  if (type === 'bool') {
+    return defaultValue === 'true';
+  }
+  if (type === 'int' || type === 'float') {
+    const num = Number(defaultValue);
+    return Number.isNaN(num) ? defaultValue : num;
+  }
+  return defaultValue;
+}
+
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Complex field generation logic with many conditions
 export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefaultValueOptions): unknown {
   const { showOptionalFields, showAdvancedFields, componentName, parentName } = options || {};
 
-  const isCriticalField = spec.name ? CRITICAL_CONNECTION_FIELDS.has(spec.name) : false;
+  const isRedpandaComponent = componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName);
+  const isCriticalField = spec.name && isRedpandaComponent && CRITICAL_CONNECTION_FIELDS.has(spec.name);
   const isExplicitlyRequired = spec.optional === false;
   const isExplicitlyOptional = spec.optional === true;
   const isImplicitlyRequired = spec.optional === undefined && spec.defaultValue === undefined;
   const hasNonEmptyDefault = spec.defaultValue !== undefined && spec.defaultValue !== '';
 
-  const shouldShow = shouldShowField({
-    spec,
-    showOptionalFields: !!showOptionalFields,
-    showAdvancedFields: !!showAdvancedFields,
-    componentName,
-  });
-
-  if (hasNonEmptyDefault && isExplicitlyRequired) {
-    spec.comment = `Required (default: ${JSON.stringify(spec.defaultValue)})`;
-  } else if ((isExplicitlyRequired || isImplicitlyRequired) && spec.name !== 'seed_brokers') {
-    spec.comment = 'Required';
-  } else if (hasNonEmptyDefault && isExplicitlyOptional) {
-    spec.comment = `Optional (default: ${JSON.stringify(spec.defaultValue)})`;
-  } else if (isExplicitlyOptional || isCriticalField) {
-    spec.comment = 'Optional';
-  } else if (spec.name === 'seed_brokers') {
-    spec.comment = 'Optional';
-  }
-
   // Try wizard data population first for Redpanda secret components
+  // If these succeed, the field is relevant regardless of optional/advanced flags
   if (componentName && REDPANDA_TOPIC_AND_USER_COMPONENTS.includes(componentName)) {
     const wizardValue = populateWizardFields(spec, componentName);
     if (wizardValue !== undefined) {
@@ -455,15 +500,60 @@ export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefau
     }
   }
 
-  // Check if field should be shown
+  const shouldShow = shouldShowField({
+    spec,
+    showOptionalFields: !!showOptionalFields,
+    showAdvancedFields: !!showAdvancedFields,
+    componentName,
+  });
+
+  // Early exit if field should not be shown (and wasn't auto-populated above)
   if (!shouldShow) {
     return undefined;
   }
 
-  // Return default if available, but skip empty string defaults for object types
-  // (empty string is a placeholder, we want to generate the actual object from children)
-  if (spec.defaultValue !== undefined && !(spec.defaultValue === '' && spec.type === 'object')) {
-    return spec.defaultValue;
+  // Special comment handling for conditional and optional fields
+  if (spec.name === 'topics') {
+    spec.comment = 'Required if regexp_topics and regexp_topics_include are not configured';
+  } else if (spec.name === 'regexp_topics') {
+    spec.comment = 'Required if topics is not configured';
+  } else if (spec.name === 'regexp_topics_include') {
+    spec.comment = 'Required if topics is not configured';
+  } else if (spec.name === 'consumer_group') {
+    spec.comment = 'Required if topic partition is not specified';
+  } else if (spec.name === 'key' || spec.name === 'partition') {
+    spec.comment = 'Optional';
+  } else if (hasNonEmptyDefault) {
+    // Always show default if present, regardless of required/optional status
+    const convertedValue = convertDefaultValue(spec.defaultValue, spec.type);
+    const formattedDefault =
+      spec.type === 'bool' || spec.type === 'int' || spec.type === 'float'
+        ? convertedValue
+        : JSON.stringify(spec.defaultValue);
+
+    if (isExplicitlyRequired || isImplicitlyRequired) {
+      spec.comment = `Required (default: ${formattedDefault})`;
+    } else if (isExplicitlyOptional) {
+      spec.comment = `Optional (default: ${formattedDefault})`;
+    } else {
+      // Neither explicitly required nor optional - just show the default
+      spec.comment = `Default: ${formattedDefault}`;
+    }
+  } else if (isExplicitlyRequired || isImplicitlyRequired) {
+    spec.comment = 'Required';
+  } else if (isExplicitlyOptional || isCriticalField) {
+    spec.comment = 'Optional';
+  }
+
+  // Return default if available, but skip empty string defaults for object/array types
+  // (empty string is a placeholder, we want to generate the actual structure from children)
+  // Arrays need to generate their structure even with empty defaultValue
+  if (
+    spec.defaultValue !== undefined &&
+    !(spec.defaultValue === '' && (spec.type === 'object' || spec.kind === 'array'))
+  ) {
+    // Apply type conversion
+    return convertDefaultValue(spec.defaultValue, spec.type);
   }
 
   // Generate value based on field kind
@@ -483,10 +573,58 @@ export function generateDefaultValue(spec: RawFieldSpec, options?: GenerateDefau
       break;
     }
     case '2darray':
-      generatedValue = [];
+      // Generate array of arrays with placeholder for proper YAML/Bloblang formatting
+      if (spec.children) {
+        const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
+        generatedValue = obj && Object.keys(obj).length > 0 ? [[obj]] : [[]];
+      } else {
+        // Primitive 2darray based on type
+        switch (spec.type) {
+          case 'string':
+            generatedValue = [['']];
+            break;
+          case 'int':
+          case 'float':
+            generatedValue = [[0]];
+            break;
+          case 'bool':
+            generatedValue = [[false]];
+            break;
+          case 'unknown':
+            generatedValue = [[null]];
+            break;
+          default:
+            generatedValue = [['']];
+        }
+      }
       break;
     case 'map':
-      generatedValue = {};
+      // Generate map with single placeholder entry for better YAML visibility
+      switch (spec.type) {
+        case 'string':
+          generatedValue = { key: '' };
+          break;
+        case 'int':
+        case 'float':
+          generatedValue = { key: 0 };
+          break;
+        case 'bool':
+          generatedValue = { key: false };
+          break;
+        case 'unknown':
+          generatedValue = { key: null };
+          break;
+        case 'object':
+          if (spec.children) {
+            const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
+            generatedValue = obj && Object.keys(obj).length > 0 ? { key: obj } : {};
+          } else {
+            generatedValue = {};
+          }
+          break;
+        default:
+          generatedValue = { key: '' };
+      }
       break;
     default:
       generatedValue = undefined;
diff --git a/frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts b/frontend/src/components/pages/rp-connect/utils/use-pipeline-mode.ts
similarity index 94%
rename from frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts
rename to frontend/src/components/pages/rp-connect/utils/use-pipeline-mode.ts
index 92867f3d0..264256929 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/use-pipeline-mode.ts
+++ b/frontend/src/components/pages/rp-connect/utils/use-pipeline-mode.ts
@@ -11,7 +11,7 @@
 
 import { useLocation, useParams } from 'react-router-dom';
 
-type PipelineMode = 'create' | 'edit' | 'view';
+export type PipelineMode = 'create' | 'edit' | 'view';
 
 export function usePipelineMode(): { mode: PipelineMode; pipelineId?: string } {
   const { pipelineId } = useParams<{ pipelineId: string }>();
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.ts b/frontend/src/components/pages/rp-connect/utils/yaml.ts
index 80837d842..9b8acd2a2 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.ts
@@ -1,4 +1,6 @@
+import { ConnectError } from '@connectrpc/connect';
 import { toast } from 'sonner';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 import { Document, parseDocument, stringify as yamlStringify } from 'yaml';
 
 import { schemaToConfig } from './schema';
@@ -270,10 +272,13 @@ export const mergeConnectConfigs = (
   try {
     doc = parseDocument(existingYaml);
   } catch (error) {
-    const description = error instanceof Error ? error.message : String(error);
-    toast.error('Cannot merge: YAML has structural errors', {
-      description,
-    });
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Parse existing YAML',
+        entity: 'mergeConnectConfigs',
+      })
+    );
     return undefined; // Keep existing YAML in editor
   }
 
@@ -282,10 +287,13 @@ export const mergeConnectConfigs = (
   try {
     mergeByComponentType(componentType, doc, newConfigObject);
   } catch (error) {
-    const description = error instanceof Error ? error.message : String(error);
-    toast.error('Cannot merge: Merge operation failed', {
-      description,
-    });
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Merge selected component into existing config',
+        entity: 'mergeConnectConfigs',
+      })
+    );
     return undefined; // Keep existing YAML in editor
   }
 
@@ -430,10 +438,13 @@ export const configToYaml = (
     yamlString = addRootSpacing(yamlString);
     return yamlString;
   } catch (error) {
-    const description = error instanceof Error ? error.message : String(error);
-    toast.error('Failed to generate YAML', {
-      description,
-    });
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Convert connect config to YAML',
+        entity: 'configToYaml',
+      })
+    );
 
     // Return empty string - the existing YAML in the editor will be preserved
     // This prevents JSON output from appearing
diff --git a/frontend/src/components/redpanda-ui/components/button.tsx b/frontend/src/components/redpanda-ui/components/button.tsx
index 09497332f..208122f46 100644
--- a/frontend/src/components/redpanda-ui/components/button.tsx
+++ b/frontend/src/components/redpanda-ui/components/button.tsx
@@ -38,16 +38,19 @@ const buttonVariants = cva(
   },
 );
 
+export type ButtonProps = 
+React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    testId?: string;
+    as?: ElementType;
+    to?: string;
+    icon?: React.ReactNode;
+  }
+
 const Button = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<'button'> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-      testId?: string;
-      as?: ElementType;
-      to?: string;
-      icon?: React.ReactNode;
-    }
+  ButtonProps
 >(({ className, variant, size, asChild = false, testId, as, to, icon, children, ...props }, ref) => {
   const Comp = as ?? (asChild ? SlotPrimitive.Slot : 'button');
   const { attached, position } = useGroup();
diff --git a/frontend/src/components/redpanda-ui/components/input.tsx b/frontend/src/components/redpanda-ui/components/input.tsx
index 89e3644b5..ff3652f71 100644
--- a/frontend/src/components/redpanda-ui/components/input.tsx
+++ b/frontend/src/components/redpanda-ui/components/input.tsx
@@ -179,21 +179,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <div className="flex flex-row gap-1">
               <Button
                 type="button"
-                onClick={increment}
+                onClick={decrement}
                 disabled={props.disabled || readOnly}
                 size={size}
                 variant="outline"
               >
-                <Plus className="h-4 w-4" />
+                <Minus className="h-4 w-4" />
               </Button>
               <Button
                 type="button"
-                onClick={decrement}
+                onClick={increment}
                 disabled={props.disabled || readOnly}
                 size={size}
                 variant="outline"
               >
-                <Minus className="h-4 w-4" />
+                <Plus className="h-4 w-4" />
               </Button>
             </div>
           )}
diff --git a/frontend/src/components/ui/delete-resource-alert-dialog.tsx b/frontend/src/components/ui/delete-resource-alert-dialog.tsx
index 46614aa6a..c9ef6cfcf 100644
--- a/frontend/src/components/ui/delete-resource-alert-dialog.tsx
+++ b/frontend/src/components/ui/delete-resource-alert-dialog.tsx
@@ -22,6 +22,8 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from 'components/redpanda-ui/components/alert-dialog';
+import type { ButtonProps } from 'components/redpanda-ui/components/button';
+import { Button } from 'components/redpanda-ui/components/button';
 import { DropdownMenuItem } from 'components/redpanda-ui/components/dropdown-menu';
 import { Input } from 'components/redpanda-ui/components/input';
 import { InlineCode, Text } from 'components/redpanda-ui/components/typography';
@@ -37,6 +39,12 @@ export type DeleteResourceAlertDialogProps = {
   isDeleting?: boolean;
   // Optional: Additional content to show in the dialog
   children?: ReactNode;
+  // Trigger variant: "dropdown" renders a DropdownMenuItem, "button" renders a Button
+  triggerVariant?: 'dropdown' | 'button';
+  // Button-specific props when triggerVariant is "button"
+  buttonVariant?: ButtonProps['variant'];
+  buttonIcon?: React.ReactNode;
+  buttonText?: string;
 };
 
 export const DeleteResourceAlertDialog: React.FC<DeleteResourceAlertDialogProps> = ({
@@ -47,6 +55,10 @@ export const DeleteResourceAlertDialog: React.FC<DeleteResourceAlertDialogProps>
   onOpenChange,
   isDeleting,
   children,
+  triggerVariant = 'dropdown',
+  buttonVariant = 'destructiveOutline',
+  buttonIcon,
+  buttonText = 'Delete',
 }) => {
   const [confirmationText, setConfirmationText] = React.useState('');
   const isDeleteConfirmed = confirmationText.toLowerCase() === 'delete';
@@ -58,21 +70,45 @@ export const DeleteResourceAlertDialog: React.FC<DeleteResourceAlertDialogProps>
     }
   };
 
-  return (
-    <AlertDialog onOpenChange={onOpenChange}>
-      <AlertDialogTrigger asChild>
-        <DropdownMenuItem className="text-red-600 focus:text-red-600" onSelect={(e) => e.preventDefault()}>
-          {isDeleting ? (
-            <div className="flex items-center gap-4">
-              <Loader2 className="h-4 w-4 animate-spin" /> Deleting
-            </div>
-          ) : (
-            <div className="flex items-center gap-4">
-              <Trash2 className="h-4 w-4" /> Delete
-            </div>
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setConfirmationText('');
+    }
+    onOpenChange?.(open);
+  };
+
+  const renderTrigger = () => {
+    if (triggerVariant === 'button') {
+      return (
+        <Button disabled={isDeleting} icon={buttonIcon} variant={buttonVariant}>
+          {buttonText && !isDeleting && buttonText}
+          {isDeleting && (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" /> Deleting...
+            </>
           )}
-        </DropdownMenuItem>
-      </AlertDialogTrigger>
+        </Button>
+      );
+    }
+
+    return (
+      <DropdownMenuItem className="text-red-600 focus:text-red-600" onSelect={(e) => e.preventDefault()}>
+        {isDeleting ? (
+          <div className="flex items-center gap-4">
+            <Loader2 className="h-4 w-4 animate-spin" /> Deleting
+          </div>
+        ) : (
+          <div className="flex items-center gap-4">
+            <Trash2 className="h-4 w-4" /> Delete
+          </div>
+        )}
+      </DropdownMenuItem>
+    );
+  };
+
+  return (
+    <AlertDialog onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger asChild>{renderTrigger()}</AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader className="text-left">
           <AlertDialogTitle>Delete {resourceType}</AlertDialogTitle>
@@ -94,10 +130,10 @@ export const DeleteResourceAlertDialog: React.FC<DeleteResourceAlertDialogProps>
           <AlertDialogCancel onClick={() => setConfirmationText('')}>Cancel</AlertDialogCancel>
           <AlertDialogAction
             className="bg-red-600 hover:bg-red-700 focus:ring-red-600 disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={!isDeleteConfirmed}
+            disabled={!isDeleteConfirmed || isDeleting}
             onClick={handleDelete}
           >
-            Delete
+            {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
index 4448047e4..b553d1321 100644
--- a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
+++ b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
@@ -40,14 +40,9 @@ export const LintHintList: React.FC<LintHintListProps> = memo(({ className, lint
           {Object.entries(lintHints).map(([toolName, hint]) => (
             <div className="flex-col flex gap-1.5" key={toolName}>
               {hint.line > 0 ? (
-                <div className="flex flex-col gap-1">
                   <Pre variant="dense">
-                    Line {hint.line}, Col {hint.column}
+                    Line {hint.line}, Col {hint.column}: {hint.hint}
                   </Pre>
-                  <Pre variant="dense">
-                    {hint.hint}
-                  </Pre>
-                </div>
               ) : (
                 <Pre variant="dense">
                   {hint.hint}
diff --git a/frontend/src/components/ui/secret/quick-add-secrets.tsx b/frontend/src/components/ui/secret/quick-add-secrets.tsx
index a914e8885..32fb48cf2 100644
--- a/frontend/src/components/ui/secret/quick-add-secrets.tsx
+++ b/frontend/src/components/ui/secret/quick-add-secrets.tsx
@@ -39,6 +39,7 @@ import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useCreateSecretMutation } from 'react-query/api/secret';
 import { toast } from 'sonner';
+import { ALPHANUMERIC_WITH_HYPHENS } from 'utils/regex';
 import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 import { base64ToUInt8Array, encodeBase64 } from 'utils/utils';
 import { z } from 'zod';
@@ -99,7 +100,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
    */
   const normalizeSecretName = (name: string): string => {
     // Convert to uppercase and replace invalid characters with underscores
-    return name.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+    return name.toUpperCase().replace(ALPHANUMERIC_WITH_HYPHENS, '_');
   };
   
   // Create sets of uppercase normalized names for efficient lookup
@@ -149,7 +150,6 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
     });
 
     if (secretEntries.length === 0) {
-      toast.info('All secrets have already been created');
       return;
     }
 
diff --git a/frontend/src/components/ui/yaml/yaml-editor.tsx b/frontend/src/components/ui/yaml/yaml-editor.tsx
index ca6dcd5af..e1e66cbe0 100644
--- a/frontend/src/components/ui/yaml/yaml-editor.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor.tsx
@@ -14,7 +14,7 @@ import 'monaco-editor';
 import type { editor } from 'monaco-editor';
 import type { JSONSchema } from 'monaco-yaml';
 import { configureMonacoYaml, type MonacoYaml, type MonacoYamlOptions } from 'monaco-yaml';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 export type YamlEditorProps = EditorProps & {
   'data-testid'?: string;
@@ -76,7 +76,8 @@ const defaultFallbackSchema: MonacoYamlOptions = {
 export const YamlEditor = (props: YamlEditorProps) => {
   const { options: givenOptions, schema, ...rest } = props;
   const options = { ...defaultOptions, ...(givenOptions ?? {}) };
-  const [yaml, setYaml] = useState<MonacoYaml | undefined>(undefined);
+  const monacoRef = useRef<Monaco | null>(null);
+  const yamlRef = useRef<MonacoYaml | null>(null);
 
   // Build Monaco YAML options with schema from props or fallback
   const monacoYamlOptions = useMemo<MonacoYamlOptions>(() => {
@@ -102,27 +103,34 @@ export const YamlEditor = (props: YamlEditorProps) => {
     return defaultFallbackSchema;
   }, [schema]);
 
-  useEffect(
-    () => () => {
-      if (yaml) {
-        yaml.dispose();
+  // Reconfigure Monaco YAML when schema changes
+  useEffect(() => {
+    if (monacoRef.current) {
+      // Dispose previous YAML configuration
+      if (yamlRef.current) {
+        yamlRef.current.dispose();
       }
-    },
-    [yaml]
-  );
 
+      // Create new YAML configuration with updated schema
+      yamlRef.current = configureMonacoYaml(monacoRef.current, monacoYamlOptions);
+    }
+  }, [monacoYamlOptions]);
 
-  const setMonacoOptions = useCallback(
-    (monaco: Monaco) => {
-      const yamlConfig = configureMonacoYaml(monaco, monacoYamlOptions);
-      setYaml(yamlConfig);
-    },
-    [monacoYamlOptions]
-  );
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (yamlRef.current) {
+        yamlRef.current.dispose();
+      }
+    };
+  }, []);
 
   return (
     <Editor
-      beforeMount={(monaco) => setMonacoOptions(monaco)}
+      onMount={(_, monaco) => {
+        monacoRef.current = monaco;
+        yamlRef.current = configureMonacoYaml(monaco, monacoYamlOptions);
+      }}
       defaultLanguage="yaml"
       loading={<LoadingPlaceholder />}
       options={options}
diff --git a/frontend/src/react-query/api/connect.tsx b/frontend/src/react-query/api/connect.tsx
index 0ca619299..f95798054 100644
--- a/frontend/src/react-query/api/connect.tsx
+++ b/frontend/src/react-query/api/connect.tsx
@@ -14,7 +14,11 @@ import {
   lintPipelineConfig,
   listComponents,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline-PipelineService_connectquery';
-import type { QueryOptions } from 'react-query/react-query.utils';
+import {
+  LONG_LIVED_CACHE_STALE_TIME,
+  NO_LIVED_CACHE_STALE_TIME,
+  type QueryOptions,
+} from 'react-query/react-query.utils';
 
 export const useGetPipelineServiceConfigSchemaQuery = (
   options?: QueryOptions<GenMessage<GetPipelineServiceConfigSchemaResponse>, GetPipelineServiceConfigSchemaResponse>
@@ -22,11 +26,9 @@ export const useGetPipelineServiceConfigSchemaQuery = (
   const request = create(GetPipelineServiceConfigSchemaRequestSchema, {});
 
   return useQuery(getPipelineServiceConfigSchema, request, {
-    staleTime: 1000 * 60 * 60, // 1 hour
-    gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    staleTime: LONG_LIVED_CACHE_STALE_TIME,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
-    retry: 3,
     ...options,
   });
 };
@@ -37,11 +39,9 @@ export const useListComponentsQuery = (
   const listComponentsRequest = create(ListComponentsRequestSchema, {});
 
   return useQuery(listComponents, listComponentsRequest, {
-    staleTime: 1000 * 60 * 60, // 1 hour
-    gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    staleTime: LONG_LIVED_CACHE_STALE_TIME,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
-    retry: 3,
     ...options,
   });
 };
@@ -55,7 +55,7 @@ export const useLintPipelineConfigQuery = (
   const request = create(LintPipelineConfigRequestSchema, { configYaml });
 
   return useQuery(lintPipelineConfig, request, {
-    staleTime: 0,
+    staleTime: NO_LIVED_CACHE_STALE_TIME,
     ...options,
   });
 };
diff --git a/frontend/src/utils/regex.ts b/frontend/src/utils/regex.ts
new file mode 100644
index 000000000..aaafc0d68
--- /dev/null
+++ b/frontend/src/utils/regex.ts
@@ -0,0 +1 @@
+export const ALPHANUMERIC_WITH_HYPHENS = new RegExp(/[^A-Z0-9_]/g);
diff --git a/frontend/src/utils/secret.utils.ts b/frontend/src/utils/secret.utils.ts
index 8d28bb83a..6e5c35dad 100644
--- a/frontend/src/utils/secret.utils.ts
+++ b/frontend/src/utils/secret.utils.ts
@@ -9,6 +9,8 @@
  * by the Apache License, Version 2.0
  */
 
+import { ALPHANUMERIC_WITH_HYPHENS } from './regex';
+
 /**
  * Regex to remove trailing underscores from secret IDs
  */
@@ -34,7 +36,7 @@ const TRAILING_UNDERSCORES_REGEX = /_+$/;
  */
 export function sanitizeSecretId(value: string): string {
   // Convert to uppercase and replace non-alphanumeric chars with underscores
-  let sanitized = value.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+  let sanitized = value.toUpperCase().replace(ALPHANUMERIC_WITH_HYPHENS, '_');
 
   // Collapse consecutive underscores into single underscore
   sanitized = sanitized.replace(/_+/g, '_');

From d285181798c90aa3626044a872795838f166d2fd Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:10:35 -0800
Subject: [PATCH 09/13] feat: added error handling for schema parsing

---
 .../pages/rp-connect/utils/schema.ts          | 32 ++++++++++++++-----
 .../utils/{yaml.test.ts => yaml.test.tsx}     |  0
 2 files changed, 24 insertions(+), 8 deletions(-)
 rename frontend/src/components/pages/rp-connect/utils/{yaml.test.ts => yaml.test.tsx} (100%)

diff --git a/frontend/src/components/pages/rp-connect/utils/schema.ts b/frontend/src/components/pages/rp-connect/utils/schema.ts
index 893a99f3a..6b72e5138 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.ts
+++ b/frontend/src/components/pages/rp-connect/utils/schema.ts
@@ -1,9 +1,12 @@
+import { ConnectError } from '@connectrpc/connect';
 import {
   type ComponentList,
   type ComponentSpec,
   ComponentStatus,
 } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { toast } from 'sonner';
 import { onboardingWizardStore } from 'state/onboarding-wizard-store';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 
 import {
   hasWizardRelevantFields,
@@ -74,15 +77,28 @@ const typeToYamlConfigKey: Record<Exclude<ConnectComponentType, 'custom'>, Conne
 /**
  * Parses ComponentList from API response into ConnectComponentSpec array.
  * Converts proto ComponentSpec to strongly-typed ConnectComponentSpec by overriding the type field.
+ * Returns empty array and shows toast notification on error.
  */
-export const parseSchema = (componentList: ComponentList): ConnectComponentSpec[] =>
-  Object.entries(COMPONENT_TYPE_MAPPINGS).flatMap(([componentType, { listKey }]) =>
-    ((componentList[listKey] as ComponentSpec[]) || []).map((comp) => ({
-      ...comp,
-      type: componentType as Exclude<ConnectComponentType, 'custom'>,
-      config: comp.config,
-    }))
-  );
+export function parseSchema(componentList: ComponentList): ConnectComponentSpec[] {
+  try {
+    return Object.entries(COMPONENT_TYPE_MAPPINGS).flatMap(([componentType, { listKey }]) =>
+      ((componentList[listKey] as ComponentSpec[]) || []).map((comp) => ({
+        ...comp,
+        type: componentType as Exclude<ConnectComponentType, 'custom'>,
+        config: comp.config,
+      }))
+    );
+  } catch (error) {
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Parse component schema',
+        entity: 'Component list',
+      })
+    );
+    return [];
+  }
+}
 
 const generateRedpandaTopLevelConfig = (): Record<string, unknown> => {
   const userData = onboardingWizardStore.getUserData();
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.test.ts b/frontend/src/components/pages/rp-connect/utils/yaml.test.tsx
similarity index 100%
rename from frontend/src/components/pages/rp-connect/utils/yaml.test.ts
rename to frontend/src/components/pages/rp-connect/utils/yaml.test.tsx

From 990aa5a95bc34ff4c341116b56343444366ee315 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:26:08 -0800
Subject: [PATCH 10/13] feat: fixed deselecting connect tiles and reselecting
 them

---
 .../pages/rp-connect/onboarding/connect-tiles.tsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 5e3e3fe17..9cf219c9c 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -369,11 +369,13 @@ export const ConnectTiles = memo(
                                 if (isChecked) {
                                   // Unselect if already selected
                                   field.onChange('');
-                                  form.setValue('connectionType', '' as ConnectComponentType);
+                                  form.setValue('connectionType', '' as ConnectComponentType, { shouldValidate: true });
                                 } else {
                                   // Select the component
                                   field.onChange(component.name);
-                                  form.setValue('connectionType', component.type as ConnectComponentType);
+                                  form.setValue('connectionType', component.type as ConnectComponentType, {
+                                    shouldValidate: true,
+                                  });
                                   onChange?.(component.name, component.type as ConnectComponentType);
                                 }
                               }}

From 9d17e4ffb289fde0ae225e83a881f5217721e101 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Thu, 27 Nov 2025 12:20:58 -0800
Subject: [PATCH 11/13] feat: connect tiles is now prop driven via list
 component schema endpoint, better progressive loading states, no more silent
 errors, better conditional rendering of new UI withini legacy entry point

---
 .../src/components/pages/connect/overview.tsx |  32 ++--
 .../onboarding/add-connector-dialog.tsx       |   4 +
 .../rp-connect/onboarding/connect-tiles.tsx   |  17 +-
 .../onboarding/create-pipeline-sidebar.tsx    |  43 +++--
 .../onboarding/onboarding-wizard.tsx          |   6 +-
 .../pages/rp-connect/pipeline/index.tsx       |   5 +-
 .../pages/rp-connect/pipeline/list.tsx        | 147 ++++++++++++++++--
 .../pages/rp-connect/pipelines-list.tsx       |   6 -
 .../components/pages/rp-connect/utils/yaml.ts |   7 +
 9 files changed, 220 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/pages/connect/overview.tsx b/frontend/src/components/pages/connect/overview.tsx
index a306c5bbd..6a7db1a99 100644
--- a/frontend/src/components/pages/connect/overview.tsx
+++ b/frontend/src/components/pages/connect/overview.tsx
@@ -29,7 +29,7 @@ import {
   TaskState,
   TasksColumn,
 } from './helper';
-import { isServerless } from '../../../config';
+import { isEmbedded, isFeatureFlagEnabled, isServerless } from '../../../config';
 import { ListSecretScopesRequestSchema } from '../../../protogen/redpanda/api/dataplane/v1/secret_pb';
 import { appGlobal } from '../../../state/app-global';
 import { api, rpcnSecretManagerApi } from '../../../state/backend-api';
@@ -42,6 +42,7 @@ import SearchBar from '../../misc/search-bar';
 import Section from '../../misc/section';
 import Tabs, { type Tab } from '../../misc/tabs/tabs';
 import { PageComponent, type PageInitHelper } from '../page';
+import { PipelineListPage } from '../rp-connect/pipeline/list';
 import RpConnectPipelinesList from '../rp-connect/pipelines-list';
 import { RedpandaConnectIntro } from '../rp-connect/redpanda-connect-intro';
 
@@ -84,17 +85,24 @@ const WrapKafkaConnectOverview: FunctionComponent<{ matchedPath: string }> = (pr
 
   const { data: kafkaConnectors, isLoading: isLoadingKafkaConnectors } = useKafkaConnectConnectorsQuery();
 
-  if (isLoadingKafkaConnectors) {
-    return <WaitingRedpanda />;
-  }
-
-  const isKafkaConnectEnabled = kafkaConnectors?.isConfigured ?? false;
+  const isKafkaConnectEnabled = kafkaConnectors?.isConfigured === true;
 
-  return <KafkaConnectOverview defaultView={defaultTab} isKafkaConnectEnabled={isKafkaConnectEnabled} {...props} />;
+  return (
+    <KafkaConnectOverview
+      defaultView={defaultTab}
+      isKafkaConnectEnabled={isKafkaConnectEnabled}
+      isLoadingKafkaConnectors={isLoadingKafkaConnectors}
+      {...props}
+    />
+  );
 };
 
 @observer
-class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaConnectEnabled: boolean }> {
+class KafkaConnectOverview extends PageComponent<{
+  defaultView: string;
+  isKafkaConnectEnabled: boolean;
+  isLoadingKafkaConnectors: boolean;
+}> {
   initPage(p: PageInitHelper): void {
     p.title = 'Overview';
     p.addBreadcrumb('Connect', '/connect-clusters');
@@ -122,6 +130,12 @@ class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaC
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelineListPage />;
+    }
+    if (this.props.isLoadingKafkaConnectors) {
+      return <WaitingRedpanda />;
+    }
     const tabs = [
       {
         key: ConnectView.RedpandaConnect,
@@ -422,7 +436,7 @@ class TabTasks extends Component {
 }
 
 // biome-ignore lint/complexity/noBannedTypes: empty object represents pages with no route params
-const TabKafkaConnect = observer((_p: {}) => {
+export const TabKafkaConnect = observer((_p: {}) => {
   const settings = uiSettings.kafkaConnect;
 
   if (api.connectConnectorsError) {
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-connector-dialog.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-connector-dialog.tsx
index bd4bd3414..b765ae52f 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-connector-dialog.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-connector-dialog.tsx
@@ -6,6 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from 'components/redpanda-ui/components/dialog';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 
 import { ConnectTiles } from './connect-tiles';
 import type { ConnectComponentType } from '../types/schema';
@@ -15,11 +16,13 @@ export const AddConnectorDialog = ({
   onCloseAddConnector,
   connectorType,
   onAddConnector,
+  components,
 }: {
   isOpen: boolean;
   onCloseAddConnector: () => void;
   connectorType?: ConnectComponentType;
   onAddConnector: ((connectionName: string, connectionType: ConnectComponentType) => void) | undefined;
+  components: ComponentList;
 }) => (
   <Dialog onOpenChange={onCloseAddConnector} open={isOpen}>
     <DialogContent size="xl">
@@ -30,6 +33,7 @@ export const AddConnectorDialog = ({
       <DialogBody>
         <ConnectTiles
           className="px-0 pt-0"
+          components={components}
           componentTypeFilter={connectorType ? [connectorType] : undefined}
           gridCols={3}
           hideHeader
diff --git a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
index 9cf219c9c..94284fd59 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -18,9 +18,9 @@ import { Heading, Link, Text } from 'components/redpanda-ui/components/typograph
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { SearchIcon } from 'lucide-react';
 import type { MotionProps } from 'motion/react';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useListComponentsQuery } from 'react-query/api/connect';
 
 import { ConnectTile } from './connect-tile';
 import type { ConnectComponentSpec, ConnectComponentType, ExtendedConnectComponentSpec } from '../types/schema';
@@ -151,6 +151,8 @@ const ConnectTilesSkeleton = memo(
 ConnectTilesSkeleton.displayName = 'ConnectTilesSkeleton';
 
 export type ConnectTilesProps = {
+  components?: ComponentList;
+  isLoading?: boolean;
   additionalComponents?: ExtendedConnectComponentSpec[];
   componentTypeFilter?: ConnectComponentType[];
   onChange?: (connectionName: string, connectionType: ConnectComponentType) => void;
@@ -172,6 +174,8 @@ export const ConnectTiles = memo(
   forwardRef<BaseStepRef<ConnectTilesListFormData>, ConnectTilesProps & MotionProps>(
     (
       {
+        components,
+        isLoading,
         additionalComponents,
         componentTypeFilter,
         onChange,
@@ -224,11 +228,7 @@ export const ConnectTiles = memo(
         defaultValues,
       });
 
-      const { data: componentListResponse, isLoading: isLoadingComponents } = useListComponentsQuery();
-      const builtInComponents = useMemo(
-        () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
-        [componentListResponse]
-      );
+      const builtInComponents = useMemo(() => (components ? parseSchema(components) : []), [components]);
       const allComponents = useMemo(
         () => [...builtInComponents, ...(additionalComponents || [])],
         [builtInComponents, additionalComponents]
@@ -384,9 +384,10 @@ export const ConnectTiles = memo(
                           );
                         });
 
-                      const hasNoResults = !isLoadingComponents && filteredComponents.length === 0;
                       const hasResults = filteredComponents.length > 0;
-                      const showSkeleton = hasResults && isLoadingComponents;
+                      const showSkeleton = isLoading;
+                      // biome-ignore lint/complexity/useSimplifiedLogicExpression: Logic is intentionally explicit for clarity
+                      const hasNoResults = !showSkeleton && !hasResults;
 
                       let content: React.ReactNode;
 
diff --git a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
index 8d7c3ec1e..d7bd1dc3f 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
@@ -1,6 +1,8 @@
 import { useDisclosure } from '@redpanda-data/ui';
+import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import type { editor } from 'monaco-editor';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useOnboardingWizardDataStore } from 'state/onboarding-wizard-store';
 
@@ -8,7 +10,8 @@ import { AddConnectorDialog } from './add-connector-dialog';
 import { AddConnectorsCard } from './add-connectors-card';
 import { AddContextualVariablesCard } from './add-contextual-variables-card';
 import { AddSecretsCard } from './add-secrets-card';
-import type { ConnectComponentSpec, ConnectComponentType } from '../types/schema';
+import type { ConnectComponentType } from '../types/schema';
+import { parseSchema } from '../utils/schema';
 import { getConnectTemplate } from '../utils/yaml';
 
 const sidebarClassNames = 'w-[260px]';
@@ -17,13 +20,21 @@ type CreatePipelineSidebarProps = {
   editorInstance: editor.IStandaloneCodeEditor | null;
   editorContent: string;
   setYamlContent: (yaml: string) => void;
-  components: ConnectComponentSpec[];
+  componentList?: ComponentList;
+  isComponentListLoading?: boolean;
 };
 
 export const CreatePipelineSidebar = memo(
-  ({ editorInstance, editorContent, setYamlContent, components }: CreatePipelineSidebarProps) => {
+  ({
+    editorInstance,
+    editorContent,
+    setYamlContent,
+    componentList: rawComponentList,
+    isComponentListLoading,
+  }: CreatePipelineSidebarProps) => {
     const { isOpen: isAddConnectorOpen, onOpen: openAddConnector, onClose: closeAddConnector } = useDisclosure();
     const [selectedConnector, setSelectedConnector] = useState<ConnectComponentType | undefined>(undefined);
+    const components = useMemo(() => (rawComponentList ? parseSchema(rawComponentList) : []), [rawComponentList]);
 
     const hasInput = useMemo(() => editorContent.includes('input:'), [editorContent]);
     const hasOutput = useMemo(() => editorContent.includes('output:'), [editorContent]);
@@ -64,6 +75,17 @@ export const CreatePipelineSidebar = memo(
       openAddConnector();
     };
 
+    if (isComponentListLoading) {
+      return (
+        <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
+          <SkeletonGroup direction="vertical" spacing="default">
+            <Skeleton variant="heading" width="full" />
+            <Skeleton className="h-10 w-full" />
+          </SkeletonGroup>
+        </div>
+      );
+    }
+
     return (
       <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
         <AddConnectorsCard
@@ -75,12 +97,15 @@ export const CreatePipelineSidebar = memo(
         <AddSecretsCard editorContent={editorContent} editorInstance={editorInstance} />
         <AddContextualVariablesCard editorContent={editorContent} editorInstance={editorInstance} />
 
-        <AddConnectorDialog
-          connectorType={selectedConnector}
-          isOpen={isAddConnectorOpen}
-          onAddConnector={handleAddConnector}
-          onCloseAddConnector={closeAddConnector}
-        />
+        {rawComponentList && (
+          <AddConnectorDialog
+            components={rawComponentList}
+            connectorType={selectedConnector}
+            isOpen={isAddConnectorOpen}
+            onAddConnector={handleAddConnector}
+            onCloseAddConnector={closeAddConnector}
+          />
+        )}
       </div>
     );
   }
diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index 483aa71c8..8fdbbb124 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -65,7 +65,7 @@ export const ConnectOnboardingWizard = ({
 }: ConnectOnboardingWizardProps = {}) => {
   const navigate = useNavigate();
 
-  const { data: componentListResponse } = useListComponentsQuery();
+  const { data: componentListResponse, isLoading: isComponentListLoading } = useListComponentsQuery();
   const components = useMemo(
     () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
     [componentListResponse]
@@ -362,6 +362,8 @@ export const ConnectOnboardingWizard = ({
                 {methods.switch({
                   [WizardStep.ADD_INPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['input', 'custom']}
@@ -376,6 +378,8 @@ export const ConnectOnboardingWizard = ({
                   ),
                   [WizardStep.ADD_OUTPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['output', 'custom']}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index 0dea39263..df4ad6a23 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -203,7 +203,7 @@ export default function PipelinePage() {
 
   const pipeline = useMemo(() => pipelineResponse?.response?.pipeline, [pipelineResponse]);
 
-  const { data: componentListResponse } = useListComponentsQuery();
+  const { data: componentListResponse, isLoading: isComponentListLoading } = useListComponentsQuery();
 
   const components = useMemo(
     () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
@@ -495,9 +495,10 @@ export default function PipelinePage() {
       </div>
       {(mode === 'create' || mode === 'edit') && (
         <CreatePipelineSidebar
-          components={components}
+          componentList={componentListResponse?.components}
           editorContent={yamlContent}
           editorInstance={editorInstance}
+          isComponentListLoading={isComponentListLoading}
           setYamlContent={handleSetYamlContent}
         />
       )}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/list.tsx b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
index 11bbd1265..797d09498 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/list.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
@@ -16,20 +16,26 @@ import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } fro
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { Button } from 'components/redpanda-ui/components/button';
 import { DataTablePagination } from 'components/redpanda-ui/components/data-table';
+import { Skeleton } from 'components/redpanda-ui/components/skeleton';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
-import { Text } from 'components/redpanda-ui/components/typography';
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
+import { Link as ExternalLink, Text } from 'components/redpanda-ui/components/typography';
 import { DeleteResourceAlertDialog } from 'components/ui/delete-resource-alert-dialog';
 import { AlertCircle, Check, Loader2, Pause, Plus, Trash2 } from 'lucide-react';
 import { DeletePipelineRequestSchema } from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
 import type { Pipeline as APIPipeline, Pipeline_State } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { Pipeline_State as PipelineState } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { useCallback, useMemo, useState } from 'react';
+import { useKafkaConnectConnectorsQuery } from 'react-query/api/kafka-connect';
 import { useDeletePipelineMutation, useListPipelinesQuery } from 'react-query/api/pipeline';
 import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { useResetOnboardingWizardStore } from 'state/onboarding-wizard-store';
 import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 
+import { TabKafkaConnect } from '../../connect/overview';
+
 type Pipeline = {
   id: string;
   name: string;
@@ -44,6 +50,46 @@ const transformAPIPipeline = (apiPipeline: APIPipeline): Pipeline => ({
   state: apiPipeline.state,
 });
 
+const PipelineTableSkeleton = () => (
+  <div className="flex flex-col gap-4">
+    <div className="flex items-center justify-end gap-4">
+      <Skeleton className="h-9 w-40" />
+    </div>
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>ID</TableHead>
+          <TableHead>Pipeline Name</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead>State</TableHead>
+          <TableHead />
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <TableRow key={i}>
+            <TableCell>
+              <Skeleton className="h-4 w-24" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-40" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-64" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-6 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-8 w-8" />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </div>
+);
+
 const PipelineStatusBadge = ({ state }: { state: Pipeline_State }) => {
   const statusConfig = useMemo(() => {
     switch (state) {
@@ -243,6 +289,10 @@ const PipelineListPageContent = () => {
     },
   });
 
+  if (isLoading) {
+    return <PipelineTableSkeleton />;
+  }
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-end gap-4">
@@ -265,16 +315,7 @@ const PipelineListPageContent = () => {
         <TableBody>
           {(() => {
             if (isLoading) {
-              return (
-                <TableRow>
-                  <TableCell className="h-24 text-center" colSpan={columns.length}>
-                    <div className="flex items-center justify-center gap-2">
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Loading pipelines...
-                    </div>
-                  </TableCell>
-                </TableRow>
-              );
+              return <PipelineTableSkeleton />;
             }
             if (error) {
               return (
@@ -317,4 +358,86 @@ const PipelineListPageContent = () => {
   );
 };
 
-export const PipelineListPage = () => <PipelineListPageContent />;
+export const PipelineListPage = () => {
+  // Don't block on Kafka Connect query - it's optional and additive
+  // If query fails or is loading, we just don't show the Kafka Connect tab (fail gracefully)
+  const { data: kafkaConnectors, isLoading: isLoadingKafkaConnect } = useKafkaConnectConnectorsQuery();
+
+  // Only show Kafka Connect tab if it's explicitly configured
+  // This check is intentionally strict (=== true) to avoid showing the tab on errors/undefined
+  const isKafkaConnectEnabled = kafkaConnectors?.isConfigured === true;
+
+  // Show that we're checking for Kafka Connect in the background
+  // This is subtle and doesn't block the user experience
+  const showKafkaConnectLoadingHint = isLoadingKafkaConnect && !kafkaConnectors;
+
+  // Always show Redpanda Connect content - don't block on Kafka Connect availability
+  const redpandaConnectContent = (
+    <div className="flex flex-col gap-6">
+      <Text>
+        Redpanda Connect is a data streaming service for building scalable, high-performance data pipelines that drive
+        real-time analytics and actionable business insights. Integrate data across systems with hundreds of prebuilt
+        connectors, change data capture (CDC) capabilities, and YAML-configurable pipelines.{' '}
+        <ExternalLink href="https://docs.redpanda.com/redpanda-connect/home/" target="_blank">
+          Learn more
+        </ExternalLink>
+      </Text>
+      <PipelineListPageContent />
+    </div>
+  );
+
+  // If Kafka Connect is not enabled, just show Redpanda Connect content
+  if (!isKafkaConnectEnabled) {
+    return (
+      <div className="flex flex-col gap-4">
+        {showKafkaConnectLoadingHint ? (
+          <div className="flex min-h-10 items-center gap-2 text-muted-foreground text-sm">
+            <Spinner />
+            <Text variant="muted">Checking for Kafka Connect availability...</Text>
+          </div>
+        ) : (
+          <div className="h-10" />
+        )}
+        {redpandaConnectContent}
+      </div>
+    );
+  }
+
+  // If Kafka Connect is enabled, show tabs with intro text
+  return (
+    <div className="flex flex-col gap-6">
+      <Text>
+        There are two ways to integrate your Redpanda data with data from external systems: Redpanda Connect and Kafka
+        Connect.
+      </Text>
+      <Tabs defaultValue="redpanda-connect">
+        <TabsList variant="underline">
+          <TabsTrigger value="redpanda-connect" variant="underline">
+            Redpanda Connect
+          </TabsTrigger>
+          <TabsTrigger value="kafka-connect" variant="underline">
+            Kafka Connect
+          </TabsTrigger>
+        </TabsList>
+        <TabsContents className="p-6">
+          <TabsContent value="redpanda-connect">{redpandaConnectContent}</TabsContent>
+          <TabsContent value="kafka-connect">
+            <div className="flex flex-col gap-6">
+              <Text>
+                Kafka Connect is our set of managed connectors. These provide a way to integrate your Redpanda data with
+                different data systems.{' '}
+                <ExternalLink
+                  href="https://docs.redpanda.com/redpanda-cloud/develop/managed-connectors/"
+                  target="_blank"
+                >
+                  Learn more
+                </ExternalLink>
+              </Text>
+              <TabKafkaConnect />
+            </div>
+          </TabsContent>
+        </TabsContents>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/frontend/src/components/pages/rp-connect/pipelines-list.tsx b/frontend/src/components/pages/rp-connect/pipelines-list.tsx
index 22c2eca1a..fe80c68a5 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-list.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-list.tsx
@@ -13,7 +13,6 @@ import { CheckIcon } from '@chakra-ui/icons';
 import { TrashIcon } from '@heroicons/react/outline';
 import { Box, Button, createStandaloneToast, DataTable, Flex, Image, SearchField, Text } from '@redpanda-data/ui';
 import { Button as NewButton } from 'components/redpanda-ui/components/button';
-import { isEmbedded, isFeatureFlagEnabled } from 'config';
 import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FaRegStopCircle } from 'react-icons/fa';
@@ -22,7 +21,6 @@ import { MdOutlineQuestionMark, MdRefresh } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 
 import { openDeleteModal } from './modals';
-import { PipelineListPage } from './pipeline/list';
 import EmptyConnectors from '../../../assets/redpanda/EmptyConnectors.svg';
 import { type Pipeline, Pipeline_State } from '../../../protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { appGlobal } from '../../../state/app-global';
@@ -167,10 +165,6 @@ class RpConnectPipelinesList extends PageComponent<{}> {
   }
 
   render() {
-    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
-      return <PipelineListPage />;
-    }
-
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.ts b/frontend/src/components/pages/rp-connect/utils/yaml.ts
index 9b8acd2a2..64e73bcac 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.ts
@@ -474,6 +474,13 @@ export const getConnectTemplate = ({
       : undefined;
 
   if (!componentSpec) {
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: new ConnectError('Component spec not found'),
+        action: 'Get connect template',
+        entity: 'getConnectTemplate',
+      })
+    );
     return;
   }
 

From 1cd29e0e28517178306fca9d6b4a1d0369e0635f Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Mon, 1 Dec 2025 18:15:51 -0800
Subject: [PATCH 12/13] feat: andres comment

---
 .../pages/rp-connect/onboarding/onboarding-wizard.tsx      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
index 8fdbbb124..4ef5cdbfc 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx
@@ -1,3 +1,4 @@
+import { create } from '@bufbuild/protobuf';
 import PageContent from 'components/misc/page-content';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
@@ -6,6 +7,7 @@ import { Heading } from 'components/redpanda-ui/components/typography';
 import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { runInAction } from 'mobx';
 import { AnimatePresence } from 'motion/react';
+import { ComponentSpecSchema } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useListComponentsQuery } from 'react-query/api/connect';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -47,7 +49,7 @@ export type ConnectOnboardingWizardProps = {
 export const ConnectOnboardingWizard = ({
   className,
   additionalComponents = [
-    {
+    create(ComponentSpecSchema, {
       name: 'custom',
       type: 'custom',
       status: 0,
@@ -57,8 +59,7 @@ export const ConnectOnboardingWizard = ({
       version: '',
       examples: [],
       footnotes: '',
-      $typeName: 'redpanda.api.dataplane.v1.ComponentSpec',
-    },
+    }) as ExtendedConnectComponentSpec,
   ],
   onChange,
   onCancel: onCancelProp,

From 453cbd472c6abaa822f37de471c17a63484f0553 Mon Sep 17 00:00:00 2001
From: Blair McKee <23467862+eblairmckee@users.noreply.github.com>
Date: Tue, 2 Dec 2025 12:53:39 -0800
Subject: [PATCH 13/13] feat: improved lint results text wrapping, improved
 layout

---
 .../components/pages/rp-connect/errors.tsx    |  4 ++--
 .../onboarding/create-pipeline-sidebar.tsx    |  9 +++------
 .../pages/rp-connect/pipeline/index.tsx       | 20 ++++++++++++-------
 .../redpanda-ui/components/code-block.tsx     |  7 ++++++-
 .../ui/lint-hint/lint-hint-list.tsx           | 11 ++++------
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/pages/rp-connect/errors.tsx b/frontend/src/components/pages/rp-connect/errors.tsx
index d8d369564..d9781545c 100644
--- a/frontend/src/components/pages/rp-connect/errors.tsx
+++ b/frontend/src/components/pages/rp-connect/errors.tsx
@@ -1,6 +1,6 @@
 import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
-import { Text } from '@redpanda-data/ui';
+import { Text } from 'components/redpanda-ui/components/typography';
 
 import { type LintHint, LintHintSchema } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
 
@@ -10,7 +10,7 @@ import { type LintHint, LintHintSchema } from '../../../protogen/redpanda/api/co
  *
  * Key differences from formatPipelineError:
  * - Returns structured LintHint objects (for LintResults component)
- * - formatPipelineError returns JSX (for legacy toast display)
+ * - formatPipelineError returns JSX (for toast erroring messaging)
  *
  * Leverages ConnectError properties:
  * - err.code: gRPC status code (e.g., "invalid_argument", "not_found")
diff --git a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
index d7bd1dc3f..c83896678 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx
@@ -1,6 +1,5 @@
 import { useDisclosure } from '@redpanda-data/ui';
 import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
-import { cn } from 'components/redpanda-ui/lib/utils';
 import type { editor } from 'monaco-editor';
 import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -14,8 +13,6 @@ import type { ConnectComponentType } from '../types/schema';
 import { parseSchema } from '../utils/schema';
 import { getConnectTemplate } from '../utils/yaml';
 
-const sidebarClassNames = 'w-[260px]';
-
 type CreatePipelineSidebarProps = {
   editorInstance: editor.IStandaloneCodeEditor | null;
   editorContent: string;
@@ -67,7 +64,7 @@ export const CreatePipelineSidebar = memo(
     );
 
     if (editorInstance === null) {
-      return <div className={sidebarClassNames} />;
+      return null;
     }
 
     const handleConnectorTypeChange = (connectorType: ConnectComponentType) => {
@@ -77,7 +74,7 @@ export const CreatePipelineSidebar = memo(
 
     if (isComponentListLoading) {
       return (
-        <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
+        <div className="flex flex-col gap-4">
           <SkeletonGroup direction="vertical" spacing="default">
             <Skeleton variant="heading" width="full" />
             <Skeleton className="h-10 w-full" />
@@ -87,7 +84,7 @@ export const CreatePipelineSidebar = memo(
     }
 
     return (
-      <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
+      <div className="flex flex-col gap-4">
         <AddConnectorsCard
           editorContent={editorContent}
           hasInput={hasInput}
diff --git a/frontend/src/components/pages/rp-connect/pipeline/index.tsx b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
index df4ad6a23..2f7bf63da 100644
--- a/frontend/src/components/pages/rp-connect/pipeline/index.tsx
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -10,7 +10,6 @@
  */
 
 import { create } from '@bufbuild/protobuf';
-import { ConnectError } from '@connectrpc/connect';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
 import { Button } from 'components/redpanda-ui/components/button';
@@ -63,9 +62,10 @@ interface FooterProps {
   onSave?: () => void;
   onCancel: () => void;
   isSaving?: boolean;
+  disabled?: boolean;
 }
 
-const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) => {
+const Footer = memo(({ mode, onSave, onCancel, isSaving, disabled }: FooterProps) => {
   if (mode === 'view') {
     return (
       <div className="flex items-center justify-between gap-2 border-t pt-4">
@@ -81,7 +81,7 @@ const Footer = memo(({ mode, onSave, onCancel, isSaving }: FooterProps) => {
       <Button disabled={isSaving} onClick={onCancel} variant="outline">
         Cancel
       </Button>
-      <Button className="min-w-[70px]" disabled={isSaving} onClick={onSave}>
+      <Button className="min-w-[70px]" disabled={isSaving || disabled} onClick={onSave}>
         {mode === 'create' ? 'Create Pipeline' : 'Update Pipeline'}
         {isSaving && <Spinner size="sm" />}
       </Button>
@@ -384,7 +384,7 @@ export default function PipelinePage() {
           setLintHints(extractLintHintsFromError(err));
           toast.error(
             formatToastErrorMessageGRPC({
-              error: ConnectError.from(err),
+              error: err,
               action: 'create',
               entity: 'pipeline',
             })
@@ -426,7 +426,7 @@ export default function PipelinePage() {
           setLintHints(extractLintHintsFromError(err));
           toast.error(
             formatToastErrorMessageGRPC({
-              error: ConnectError.from(err),
+              error: err,
               action: 'update',
               entity: 'pipeline',
             })
@@ -481,12 +481,18 @@ export default function PipelinePage() {
           </Alert>
         </div>
       )}
-      <Footer isSaving={isSaving} mode={mode} onCancel={handleCancel} onSave={handleSave} />
+      <Footer
+        disabled={Object.keys(lintHints).length > 0}
+        isSaving={isSaving}
+        mode={mode}
+        onCancel={handleCancel}
+        onSave={handleSave}
+      />
     </>
   );
 
   return (
-    <div className="flex w-full gap-4">
+    <div className="grid grid-cols-[minmax(auto,_950px)_260px] gap-4">
       <div className="flex flex-1 flex-col gap-4">
         {mode === 'view' && pipelineId && (
           <Toolbar pipelineId={pipelineId} pipelineName={form.getValues('name')} pipelineState={pipeline?.state} />
diff --git a/frontend/src/components/redpanda-ui/components/code-block.tsx b/frontend/src/components/redpanda-ui/components/code-block.tsx
index 18327eda2..217845a91 100644
--- a/frontend/src/components/redpanda-ui/components/code-block.tsx
+++ b/frontend/src/components/redpanda-ui/components/code-block.tsx
@@ -174,6 +174,10 @@ interface SimpleCodeBlockProps {
   maxHeight?: 'sm' | 'default' | 'lg' | 'none';
   onCopy?: () => void;
   className?: string;
+  /**
+   * Class name for the code block
+   */
+  codeClassName?: string;
   testId?: string;
 }
 
@@ -188,6 +192,7 @@ export const SimpleCodeBlock = ({
   maxHeight = 'default',
   onCopy,
   className,
+  codeClassName,
   testId,
 }: SimpleCodeBlockProps) => {
   return (
@@ -203,7 +208,7 @@ export const SimpleCodeBlock = ({
       testId={testId}
     >
       <Pre>
-        <code className={language}>{code}</code>
+        <code className={cn(language, 'break-all wrap-break-word whitespace-pre-wrap', codeClassName)}>{code}</code>
       </Pre>
     </CodeBlock>
   );
diff --git a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
index b553d1321..e60b89e84 100644
--- a/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
+++ b/frontend/src/components/ui/lint-hint/lint-hint-list.tsx
@@ -8,8 +8,9 @@
  * by the Apache License, Version 2.0
  */
 
+import { SimpleCodeBlock } from 'components/redpanda-ui/components/code-block';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
-import { Pre, Text } from 'components/redpanda-ui/components/typography';
+import { Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { PencilRuler } from 'lucide-react';
 import type { LintHint } from 'protogen/redpanda/api/common/v1/linthint_pb';
@@ -40,13 +41,9 @@ export const LintHintList: React.FC<LintHintListProps> = memo(({ className, lint
           {Object.entries(lintHints).map(([toolName, hint]) => (
             <div className="flex-col flex gap-1.5" key={toolName}>
               {hint.line > 0 ? (
-                  <Pre variant="dense">
-                    Line {hint.line}, Col {hint.column}: {hint.hint}
-                  </Pre>
+                  <SimpleCodeBlock code={`Line ${hint.line}, Col ${hint.column}: ${hint.hint}`} width="full" className="my-0"/>
               ) : (
-                <Pre variant="dense">
-                  {hint.hint}
-                </Pre>
+                <SimpleCodeBlock code={hint.hint} width="full" className="my-0"/>
               )}
               {hint.lintType && (
                 <Text className="font-medium text-gray-500 text-xs uppercase tracking-wide">{hint.lintType}</Text>