diff --git a/frontend/.claude/skills/frontend-developer/SKILL.md b/frontend/.claude/skills/frontend-developer/SKILL.md
new file mode 100644
index 000000000..a7aa7d389
--- /dev/null
+++ b/frontend/.claude/skills/frontend-developer/SKILL.md
@@ -0,0 +1,326 @@
+---
+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 && 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 - but only when there's a noticeable performance impact
+- 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, 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 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'
+      });
+    });
+  });
+});
+```
+
+**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 start2 --port=3004    # 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: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 && 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/connect/overview.tsx b/frontend/src/components/pages/connect/overview.tsx
index b100a6a0c..6a7db1a99 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 { isEmbedded, isFeatureFlagEnabled, 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';
@@ -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,15 +130,12 @@ 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" />;
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelineListPage />;
+    }
+    if (this.props.isLoadingKafkaConnectors) {
+      return <WaitingRedpanda />;
     }
-
     const tabs = [
       {
         key: ConnectView.RedpandaConnect,
@@ -431,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/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/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/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..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
@@ -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 { AlertCircle, Check, ChevronDown, PlusIcon } from 'lucide-react';
+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 } = 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,31 @@ export const AddSecretsCard = ({
     },
     [editorInstance]
   );
+
+  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>
@@ -92,7 +138,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,29 +193,42 @@ 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 className="text-destructive" 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 text-sm hover:opacity-80"
+                    key={secret}
+                    onClick={() => setIsSecretsDialogOpen(true)}
+                    variant="red"
+                  >
+                    Create <InlineCode className="bg-transparent">$secrets.{secret}</InlineCode>
+                    <PlusIcon className="size-4" />
+                  </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" />
+          <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>
         </div>
       </CardContent>
+      <AddSecretsDialog
+        existingSecrets={existingSecrets}
+        isOpen={isSecretsDialogOpen}
+        missingSecrets={missingSecrets}
+        onClose={() => setIsSecretsDialogOpen(false)}
+        onSecretsCreated={() => setIsSecretsDialogOpen(false)}
+        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-tile.tsx b/frontend/src/components/pages/rp-connect/onboarding/connect-tile.tsx
index 4c01b1b37..29fac2be4 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,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 !== 'stable' && component.name !== 'redpanda' && (
-              <Badge size="sm" variant="gray">
-                {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 9abde34a0..94284fd59 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx
@@ -13,10 +13,12 @@ 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';
 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';
 
@@ -25,7 +27,7 @@ import type { ConnectComponentSpec, ConnectComponentType, ExtendedConnectCompone
 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',
@@ -38,8 +40,8 @@ const PRIORITY_COMPONENTS = [
   'mongodb_cdc',
   'snowflake_streaming',
   'redpanda_migrator',
-  'kafka_franz',
-  'gcp_pubsub',
+  'mysql_cdc',
+  'snowflake_put',
   'slack',
   'sftp',
   'nats',
@@ -113,10 +115,48 @@ 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 = {
+  components?: ComponentList;
+  isLoading?: boolean;
   additionalComponents?: ExtendedConnectComponentSpec[];
   componentTypeFilter?: ConnectComponentType[];
   onChange?: (connectionName: string, connectionType: ConnectComponentType) => void;
+  onValidityChange?: (isValid: boolean) => void;
   hideHeader?: boolean;
   hideFilters?: boolean;
   defaultConnectionName?: string;
@@ -134,9 +174,12 @@ export const ConnectTiles = memo(
   forwardRef<BaseStepRef<ConnectTilesListFormData>, ConnectTilesProps & MotionProps>(
     (
       {
+        components,
+        isLoading,
         additionalComponents,
         componentTypeFilter,
         onChange,
+        onValidityChange,
         hideHeader,
         hideFilters,
         defaultConnectionName,
@@ -181,13 +224,14 @@ export const ConnectTiles = memo(
 
       const form = useForm<ConnectTilesListFormData>({
         resolver: zodResolver(connectTilesListFormSchema),
-        mode: 'onSubmit',
+        mode: 'onChange',
         defaultValues,
       });
 
+      const builtInComponents = useMemo(() => (components ? parseSchema(components) : []), [components]);
       const allComponents = useMemo(
-        () => [...getBuiltInComponents(), ...(additionalComponents || [])],
-        [additionalComponents]
+        () => [...builtInComponents, ...(additionalComponents || [])],
+        [builtInComponents, additionalComponents]
       );
 
       const categories = useMemo(
@@ -215,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();
@@ -304,48 +353,76 @@ 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={() => {
+                                if (isChecked) {
+                                  // Unselect if already selected
+                                  field.onChange('');
+                                  form.setValue('connectionType', '' as ConnectComponentType, { shouldValidate: true });
+                                } else {
+                                  // Select the component
+                                  field.onChange(component.name);
+                                  form.setValue('connectionType', component.type as ConnectComponentType, {
+                                    shouldValidate: true,
+                                  });
+                                  onChange?.(component.name, component.type as ConnectComponentType);
+                                }
+                              }}
+                              uniqueKey={uniqueKey}
+                            />
+                          );
+                        });
+
+                      const hasResults = filteredComponents.length > 0;
+                      const showSkeleton = isLoading;
+                      // biome-ignore lint/complexity/useSimplifiedLogicExpression: Logic is intentionally explicit for clarity
+                      const hasNoResults = !showSkeleton && !hasResults;
+
+                      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 6686a86e7..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,41 +1,70 @@
 import { useDisclosure } from '@redpanda-data/ui';
+import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
 import type { editor } from 'monaco-editor';
-import { memo, useMemo, useState } from 'react';
+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';
 
 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 { parseSchema } from '../utils/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;
+  componentList?: ComponentList;
+  isComponentListLoading?: boolean;
 };
 
 export const CreatePipelineSidebar = memo(
   ({
     editorInstance,
-    onAddConnector,
-    detectedSecrets,
-    existingSecrets,
-    onSecretsCreated,
     editorContent,
+    setYamlContent,
+    componentList: rawComponentList,
+    isComponentListLoading,
   }: CreatePipelineSidebarProps) => {
     const { isOpen: isAddConnectorOpen, onOpen: openAddConnector, onClose: closeAddConnector } = useDisclosure();
     const [selectedConnector, setSelectedConnector] = useState<ConnectComponentType | undefined>(undefined);
-    const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
+    const components = useMemo(() => (rawComponentList ? parseSchema(rawComponentList) : []), [rawComponentList]);
 
     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]
+    );
+
     if (editorInstance === null) {
-      return <div className="min-w-[300px]" />;
+      return null;
     }
 
     const handleConnectorTypeChange = (connectorType: ConnectComponentType) => {
@@ -43,18 +72,16 @@ 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);
-    };
+    if (isComponentListLoading) {
+      return (
+        <div className="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="flex flex-col gap-4">
@@ -64,28 +91,18 @@ 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}
-          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 cc72d8208..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,7 +7,9 @@ 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';
 import {
   useOnboardingTopicDataStore,
@@ -21,7 +24,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,
@@ -32,6 +35,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';
 
@@ -45,17 +49,29 @@ export type ConnectOnboardingWizardProps = {
 export const ConnectOnboardingWizard = ({
   className,
   additionalComponents = [
-    {
+    create(ComponentSpecSchema, {
       name: 'custom',
       type: 'custom',
-      plugin: false,
-    },
+      status: 0,
+      summary: 'Build your own pipeline from scratch.',
+      description: '',
+      categories: [],
+      version: '',
+      examples: [],
+      footnotes: '',
+    }) as ExtendedConnectComponentSpec,
   ],
   onChange,
   onCancel: onCancelProp,
 }: ConnectOnboardingWizardProps = {}) => {
   const navigate = useNavigate();
 
+  const { data: componentListResponse, isLoading: isComponentListLoading } = 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)
@@ -118,6 +134,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';
@@ -132,11 +156,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({});
     }
@@ -159,6 +178,7 @@ export const ConnectOnboardingWizard = ({
           const yamlContent = getConnectTemplate({
             connectionName,
             connectionType,
+            components,
             showOptionalFields: false,
             existingYaml: useOnboardingYamlContentStore.getState().yamlContent,
           });
@@ -208,6 +228,7 @@ export const ConnectOnboardingWizard = ({
           const yamlContent = getConnectTemplate({
             connectionName,
             connectionType,
+            components,
             showOptionalFields: false,
             existingYaml: useOnboardingYamlContentStore.getState().yamlContent,
           });
@@ -253,7 +274,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 +292,7 @@ export const ConnectOnboardingWizard = ({
               saslMechanism: result.data.saslMechanism,
               consumerGroup: result.data.consumerGroup || '',
             });
-            regenerateYamlForTopicUserComponents();
+            regenerateYamlForTopicUserComponents(components);
             methods.next();
           }
         } finally {
@@ -296,6 +317,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}>
@@ -325,12 +363,15 @@ export const ConnectOnboardingWizard = ({
                 {methods.switch({
                   [WizardStep.ADD_INPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['input', 'custom']}
                       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"
@@ -338,12 +379,15 @@ export const ConnectOnboardingWizard = ({
                   ),
                   [WizardStep.ADD_OUTPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['output', 'custom']}
                       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"
@@ -354,6 +398,7 @@ export const ConnectOnboardingWizard = ({
                       {...stepMotionProps}
                       defaultTopicName={persistedTopicName}
                       key="add-topic-step"
+                      onValidityChange={handleTopicValidityChange}
                       ref={addTopicStepRef}
                     />
                   ),
@@ -364,6 +409,7 @@ export const ConnectOnboardingWizard = ({
                       defaultSaslMechanism={persistedUserSaslMechanism}
                       defaultUsername={persistedUsername}
                       key="add-user-step"
+                      onValidityChange={handleUserValidityChange}
                       ref={addUserStepRef}
                       showConsumerGroupFields={persistedInputIsRedpandaComponent}
                       topicName={persistedTopicName}
@@ -377,7 +423,7 @@ export const ConnectOnboardingWizard = ({
                         </CardTitle>
                       </CardHeader>
                       <CardContent>
-                        <RpConnectPipelinesCreate matchedPath="/rp-connect/wizard" />
+                        <PipelinePage />
                       </CardContent>
                     </Card>
                   ),
@@ -405,7 +451,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/details.tsx b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
new file mode 100644
index 000000000..e37233591
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/details.tsx
@@ -0,0 +1,156 @@
+/**
+ * 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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from 'components/redpanda-ui/components/accordion';
+import { Card, CardContent } from 'components/redpanda-ui/components/card';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  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 { Text } from 'components/redpanda-ui/components/typography';
+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, watch } = useFormContext();
+  const name = watch('name');
+  const description = watch('description');
+  const computeUnits = watch('computeUnits');
+
+  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>
+
+                <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>
+    );
+  }
+
+  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>
+          )}
+        />
+
+        <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>
+                      <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
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardContent>
+    </Card>
+  );
+}
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..2f7bf63da
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/index.tsx
@@ -0,0 +1,513 @@
+/**
+ * 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 { 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 { 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';
+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,
+  UpdatePipelineRequestSchema,
+} from 'protogen/redpanda/api/console/v1alpha1/pipeline_pb';
+import {
+  CreatePipelineRequestSchema as CreatePipelineRequestSchemaDataPlane,
+  PipelineCreateSchema,
+  PipelineUpdateSchema,
+  UpdatePipelineRequestSchema as UpdatePipelineRequestSchemaDataPlane,
+} from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+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 { 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 { Toolbar } from './toolbar';
+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;
+  disabled?: boolean;
+}
+
+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">
+        <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 || disabled} 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(),
+  computeUnits: z.number().min(MIN_TASKS).int(),
+});
+
+type PipelineFormValues = z.infer<typeof pipelineFormSchema>;
+
+export default function PipelinePage() {
+  const { mode, pipelineId } = usePipelineMode();
+  const navigate = useNavigate();
+
+  // 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);
+  const setPersistedYamlContent = useOnboardingYamlContentStore((state) => state.setYamlContent);
+  const [editorInstance, setEditorInstance] = useState<null | editor.IStandaloneCodeEditor>(null);
+
+  const form = useForm<PipelineFormValues>({
+    resolver: zodResolver(pipelineFormSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      computeUnits: MIN_TASKS,
+    },
+  });
+
+  const [yamlContent, setYamlContent] = useState('');
+  const [lintHints, setLintHints] = useState<Record<string, LintHint>>({});
+
+  const { data: pipelineResponse, isLoading: isPipelineLoading } = useGetPipelineQuery(
+    { id: pipelineId || '' },
+    {
+      enabled: mode !== 'create' && !!pipelineId,
+    }
+  );
+
+  const pipeline = useMemo(() => pipelineResponse?.response?.pipeline, [pipelineResponse]);
+
+  const { data: componentListResponse, isLoading: isComponentListLoading } = useListComponentsQuery();
+
+  const components = useMemo(
+    () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
+    [componentListResponse]
+  );
+
+  // Fetch JSON Schema from backend for YAML editor
+  const { data: schemaResponse } = useGetPipelineServiceConfigSchemaQuery();
+  const yamlEditorSchema = useMemo(() => {
+    if (!schemaResponse?.configSchema) {
+      return undefined;
+    }
+
+    try {
+      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]);
+
+  const { mutate: createMutation, isPending: isCreatePending } = useCreatePipelineMutation();
+  const { mutate: updateMutation, isPending: isUpdatePending } = useUpdatePipelineMutation();
+
+  const debouncedYamlContent = useDebouncedValue(yamlContent, 500);
+  const { data: lintResponse, isPending: isLinting } = useLintPipelineConfigQuery(debouncedYamlContent, {
+    enabled: mode !== 'view',
+  });
+
+  useEffect(() => {
+    if (lintResponse) {
+      try {
+        const hints: Record<string, LintHint> = {};
+        for (const [idx, hint] of Object.entries(lintResponse?.lintHints || [])) {
+          hints[`hint_${idx}`] = hint;
+        }
+        setLintHints(hints);
+      } catch (err) {
+        setLintHints(extractLintHintsFromError(err));
+      }
+    }
+  }, [lintResponse]);
+
+  // 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 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();
+    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' },
+        tags: {
+          __redpanda_cloud_pipeline_type: 'pipeline',
+        },
+      });
+
+      const createRequestDataPlane = create(CreatePipelineRequestSchemaDataPlane, {
+        pipeline: pipelineCreate,
+      });
+
+      const createRequest = create(CreatePipelineRequestSchema, {
+        request: createRequestDataPlane,
+      });
+
+      createMutation(createRequest, {
+        onSuccess: (response) => {
+          setLintHints({});
+          clearWizardStore();
+          toast.success('Pipeline created');
+
+          const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
+          const currentUnits = form.getValues('computeUnits');
+          if (retUnits && currentUnits !== retUnits) {
+            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');
+          }
+        },
+        onError: (err) => {
+          setLintHints(extractLintHintsFromError(err));
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: err,
+              action: 'create',
+              entity: 'pipeline',
+            })
+          );
+        },
+      });
+    } else if (pipelineId) {
+      const pipelineUpdate = create(PipelineUpdateSchema, {
+        displayName: name,
+        configYaml: yamlContent,
+        description: description || '',
+        resources: { cpuShares: tasksToCPU(computeUnits) || '0', memoryShares: '0' },
+        tags: {
+          ...pipeline?.tags,
+        },
+      });
+
+      const updateRequestDataPlane = create(UpdatePipelineRequestSchemaDataPlane, {
+        id: pipelineId,
+        pipeline: pipelineUpdate,
+      });
+
+      const updateRequest = create(UpdatePipelineRequestSchema, {
+        request: updateRequestDataPlane,
+      });
+
+      updateMutation(updateRequest, {
+        onSuccess: (response) => {
+          setLintHints({});
+          toast.success('Pipeline updated');
+          const retUnits = cpuToTasks(response.response?.pipeline?.resources?.cpuShares);
+          const currentUnits = form.getValues('computeUnits');
+          if (retUnits && currentUnits !== retUnits) {
+            toast.warning(`Pipeline has been resized to use ${retUnits} compute units`);
+          }
+          navigate(`/rp-connect/${pipelineId}`);
+        },
+        onError: (err) => {
+          setLintHints(extractLintHintsFromError(err));
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: err,
+              action: 'update',
+              entity: 'pipeline',
+            })
+          );
+        },
+      });
+    }
+  }, [form, yamlContent, mode, pipelineId, createMutation, updateMutation, navigate, clearWizardStore, pipeline]);
+
+  const handleSetYamlContent = useCallback((newYaml: string) => {
+    setYamlContent(newYaml);
+  }, []);
+
+  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 = isCreatePending || isUpdatePending;
+
+  if (isPipelineLoading) {
+    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
+        disabled={Object.keys(lintHints).length > 0}
+        isSaving={isSaving}
+        mode={mode}
+        onCancel={handleCancel}
+        onSave={handleSave}
+      />
+    </>
+  );
+
+  return (
+    <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} />
+        )}
+        {mode === 'create' ? content : <Card size="full">{content}</Card>}
+      </div>
+      {(mode === 'create' || mode === 'edit') && (
+        <CreatePipelineSidebar
+          componentList={componentListResponse?.components}
+          editorContent={yamlContent}
+          editorInstance={editorInstance}
+          isComponentListLoading={isComponentListLoading}
+          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
new file mode 100644
index 000000000..797d09498
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/list.tsx
@@ -0,0 +1,443 @@
+/**
+ * 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 { 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 { 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;
+  description: string;
+  state: Pipeline_State;
+};
+
+const transformAPIPipeline = (apiPipeline: APIPipeline): Pipeline => ({
+  id: apiPipeline.id,
+  name: apiPipeline.displayName,
+  description: apiPipeline.description,
+  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) {
+      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,
+    },
+  });
+
+  if (isLoading) {
+    return <PipelineTableSkeleton />;
+  }
+
+  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 <PipelineTableSkeleton />;
+            }
+            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 = () => {
+  // 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/pipeline/toolbar.tsx b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
new file mode 100644
index 000000000..db0f9461b
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx
@@ -0,0 +1,163 @@
+/**
+ * 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 { Button } from 'components/redpanda-ui/components/button';
+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,
+  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 { memo, useCallback, useMemo } from 'react';
+import { useDeletePipelineMutation, useStartPipelineMutation, useStopPipelineMutation } from 'react-query/api/pipeline';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
+
+interface ToolbarProps {
+  pipelineId: string;
+  pipelineName?: string;
+  pipelineState?: Pipeline_State;
+}
+
+export const Toolbar = memo(({ pipelineId, pipelineName, pipelineState }: ToolbarProps) => {
+  const navigate = useNavigate();
+
+  const { mutate: deleteMutation, isPending: isDeletePending } = useDeletePipelineMutation();
+  const { mutate: startMutation, isPending: isStartPending } = useStartPipelineMutation();
+  const { mutate: stopMutation, isPending: isStopPending } = useStopPipelineMutation();
+
+  const isRunning = pipelineState === PipelineState.RUNNING;
+  const isTransitioning = pipelineState === PipelineState.STARTING || pipelineState === PipelineState.STOPPING;
+  const isActionLoading = isStartPending || isStopPending || isDeletePending;
+  const isLoading = isActionLoading || isTransitioning;
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      const deleteRequest = create(DeletePipelineRequestSchema, {
+        request: { id },
+      });
+
+      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) {
+      const stopRequest = create(StopPipelineRequestSchema, {
+        request: { id: pipelineId },
+      });
+
+      stopMutation(stopRequest, {
+        onSuccess: () => {
+          toast.success('Pipeline stopped');
+        },
+        onError: (err) => {
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'stop',
+              entity: 'pipeline',
+            })
+          );
+        },
+      });
+    } else {
+      const startRequest = create(StartPipelineRequestSchema, {
+        request: { id: pipelineId },
+      });
+
+      startMutation(startRequest, {
+        onSuccess: () => {
+          toast.success('Pipeline started');
+        },
+        onError: (err) => {
+          toast.error(
+            formatToastErrorMessageGRPC({
+              error: ConnectError.from(err),
+              action: 'start',
+              entity: 'pipeline',
+            })
+          );
+        },
+      });
+    }
+  }, [pipelineId, isRunning, startMutation, stopMutation]);
+
+  const handleEdit = useCallback(() => {
+    navigate(`/rp-connect/${pipelineId}/edit`);
+  }, [navigate, pipelineId]);
+
+  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]);
+
+  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>
+    </div>
+  );
+});
+
+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 8b3877c9e..c03097a6b 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-create.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-create.tsx
@@ -10,48 +10,29 @@
  */
 
 import { create } from '@bufbuild/protobuf';
+import { ConnectError } from '@connectrpc/connect';
 import type { Monaco } from '@monaco-editor/react';
-import {
-  Button,
-  type CreateToastFnReturn,
-  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 { 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 { isEmbedded, isFeatureFlagEnabled } from 'config';
 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 { 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 { toast } from 'sonner';
+
+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';
-import type { ConnectComponentType } from './types/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';
@@ -72,7 +53,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>;
 
@@ -97,6 +77,9 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
@@ -107,21 +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();
-      const enableRpcnTiles = isFeatureFlagEnabled('enableRpcnTiles');
-
-      return (
-        <NewButton
-          disabled={alreadyExists || isNameEmpty || this.isCreating}
-          onClick={action(() => this.createPipeline(enableRpcnTiles ? undefined : 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>
@@ -184,18 +162,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>
@@ -204,7 +173,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
   }
 
   // biome-ignore lint/suspicious/useAwait: async needed for error handling in MobX action
-  async createPipeline(toast?: CreateToastFnReturn) {
+  async createPipeline() {
     this.isCreating = true;
 
     pipelinesApi
@@ -225,44 +194,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: 'warning',
-                duration: 6000,
-                isClosable: false,
-                title: `Pipeline has been resized to use ${retUnits} compute units`,
-              });
-            }
-          } else {
-            this.lintResults = {};
-            onboardingWizardStore.reset();
+          toast.success('Pipeline created');
+          const retUnits = cpuToTasks(r.response?.pipeline?.resources?.cpuShares);
+          if (retUnits && this.tasks !== retUnits) {
+            toast.warning(`Pipeline has been resized to use ${retUnits} compute units`);
           }
-
           await pipelinesApi.refreshPipelines(true);
           appGlobal.historyPush('/connect-clusters');
         })
       )
       .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.error('Failed to create pipeline', {
+            description: formatPipelineError(ConnectError.from(err)),
+          });
         })
       )
       .finally(() => {
@@ -305,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} />
@@ -391,126 +336,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: 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,
-        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,
-            showOptionalFields: false,
-            existingYaml: yamlContent,
-          }) || yamlContent;
-
-        // Generate output template if exists
-        if (outputData?.connectionName && outputData?.connectionType) {
-          yamlContent =
-            getConnectTemplate({
-              connectionName: outputData.connectionName,
-              connectionType: outputData.connectionType,
-              showOptionalFields: false,
-              existingYaml: yamlContent,
-            }) || yamlContent;
-        }
-
-        if (yamlContent) {
-          useOnboardingYamlContentStore.getState().setYamlContent({ yamlContent });
-        }
-      }
-
-      hasInitializedServerless.current = true;
-    }, []);
 
     useEffect(() => {
       return () => {
@@ -525,33 +350,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={[
@@ -564,7 +362,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) {
@@ -583,27 +381,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={async () => {
+                        if (secretAutocomplete && monaco) {
+                          secretAutocomplete.dispose();
+                          await registerSecretsAutocomplete(monaco, setSecretAutocomplete);
+                        }
+                      }}
+                    />
+                  )}
                 </div>
 
                 {isKafkaConnectPipeline(p.yaml) && (
diff --git a/frontend/src/components/pages/rp-connect/pipelines-details.tsx b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
index 6ed01b2e6..a84cf804d 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-details.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-details.tsx
@@ -11,14 +11,14 @@
 
 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';
 import { PipelineStatus } from './pipelines-list';
 import { cpuToTasks } from './tasks';
 import usePaginationParams from '../../../hooks/use-pagination-params';
@@ -77,6 +77,9 @@ class RpConnectPipelinesDetails extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
@@ -112,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 62e66bc2c..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,14 @@
 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';
 import type { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
@@ -66,6 +65,9 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelinePage />;
+    }
     if (!pipelinesApi.pipelines) {
       return DefaultSkeleton;
     }
@@ -165,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}`}>
@@ -184,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(
@@ -205,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({
@@ -231,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..fe80c68a5 100644
--- a/frontend/src/components/pages/rp-connect/pipelines-list.tsx
+++ b/frontend/src/components/pages/rp-connect/pipelines-list.tsx
@@ -13,15 +13,12 @@ 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 { 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 EmptyConnectors from '../../../assets/redpanda/EmptyConnectors.svg';
@@ -48,25 +45,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 +52,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>
 );
 
@@ -217,22 +195,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 60d0a6ec8..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']);
-
-/**
- * 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: {
@@ -60,59 +64,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;
@@ -139,6 +90,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' },
 ];
 
@@ -154,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/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/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/__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/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.test.tsx b/frontend/src/components/pages/rp-connect/utils/schema.test.tsx
index 7d5d297d3..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,8 +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 { generateDefaultValue, getBuiltInComponents, schemaToConfig } from './schema';
-import type { RawFieldSpec } from '../types/schema';
+import { mockComponents } from './__fixtures__/component-schemas';
+import { generateDefaultValue, schemaToConfig } from './schema';
+import type { ConnectComponentSpec, RawFieldSpec } from '../types/schema';
 
 vi.mock('zustand');
 
@@ -12,24 +15,31 @@ 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 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',
         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',
@@ -37,50 +47,58 @@ describe('generateDefaultValue', () => {
 
       expect(result).toBeDefined();
       expect((result as Record<string, unknown>).mechanism).toBe('SCRAM-SHA-256');
+
+      // Clean up
+      onboardingWizardStore.setUserData({ username: '', consumerGroup: '' });
     });
 
-    test('should ALWAYS show consumer_group for Redpanda components even when optional', () => {
-      onboardingWizardStore.setUserData({
-        username: 'admin',
-        saslMechanism: 'SCRAM-SHA-256',
-        consumerGroup: 'test-group',
-      });
+    test('SASL NOT shown for Redpanda components without wizard user data', () => {
+      // Ensure no wizard user data
+      onboardingWizardStore.setUserData({ username: '', consumerGroup: '' });
 
-      const spec: RawFieldSpec = {
-        name: 'consumer_group',
-        type: 'string',
+      const spec = {
+        name: 'sasl',
+        type: 'object',
         kind: 'scalar',
-        default: '',
-        is_optional: true,
+        optional: true,
+        advanced: true,
+        children: [
+          {
+            name: 'mechanism',
+            type: 'string',
+            kind: 'scalar',
+            defaultValue: 'none',
+          },
+        ],
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
-        componentName: 'kafka_franz',
+        componentName: 'kafka',
       });
 
-      expect(result).toBe('test-group');
+      expect(result).toBeUndefined();
     });
 
-    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 +108,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,293 +177,293 @@ describe('generateDefaultValue', () => {
       });
     });
 
-    test('should populate consumer_group field for redpanda input components', () => {
-      const spec: RawFieldSpec = {
-        name: 'consumer_group',
+    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: 'kafka_franz',
+        componentName: 'redpanda',
       });
 
-      expect(result).toBe('my-consumer-group');
+      expect(result).toBe('example');
     });
 
-    test('should populate topic field for redpanda components', () => {
-      const spec: RawFieldSpec = {
-        name: 'topic',
+    test('populates topics array from wizard', () => {
+      const spec = {
+        name: 'topics',
         type: 'string',
-        kind: 'scalar',
-        default: '',
+        kind: 'array',
+        defaultValue: '',
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'redpanda',
       });
 
-      expect(result).toBe('example');
+      expect(result).toEqual(['example']);
     });
 
-    test('should populate topics array for redpanda components', () => {
-      const spec: RawFieldSpec = {
+    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',
-        default: [],
+        defaultValue: '', // Empty default should still generate array structure
       };
 
-      const result = generateDefaultValue(spec, {
+      const result = generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
         componentName: 'redpanda',
       });
 
-      expect(result).toEqual(['example']);
+      expect(result).toEqual(['']); // Array with empty string, not just empty string
+      expect(Array.isArray(result)).toBe(true);
     });
 
-    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('topics field gets conditional requirement comment', () => {
+      const spec = {
+        name: 'topics',
         type: 'string',
-        kind: 'scalar',
-        default: '',
-        is_secret: true,
+        kind: 'array',
+        defaultValue: '',
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
-        componentName: 'kafka',
+        componentName: 'redpanda',
       });
 
-      // 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}');
+      expect(spec.comment).toBe('Required if regexp_topics and regexp_topics_include are not configured');
     });
-  });
 
-  describe('Contextual variables population', () => {
-    beforeEach(() => {
-      sessionStorage.clear();
+    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('should populate schema_registry.url with REDPANDA_SCHEMA_REGISTRY_URL', () => {
-      const spec: RawFieldSpec = {
-        name: 'url',
+    test('required fields with defaults get "Required (default: ...)" comment', () => {
+      const spec = {
+        name: 'required_field',
         type: 'string',
         kind: 'scalar',
-        default: '',
+        defaultValue: 'my-default',
+        optional: false,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as RawFieldSpec, {
         showOptionalFields: false,
         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}');
+      expect(spec.comment).toBe('Required (default: "my-default")');
     });
-  });
 
-  describe('Connection defaults for Redpanda Cloud', () => {
-    beforeEach(() => {
-      sessionStorage.clear();
-    });
-
-    test('should default SASL mechanism to SCRAM-SHA-256 for REDPANDA components', () => {
-      const spec: RawFieldSpec = {
-        name: 'mechanism',
+    test('optional fields get "Optional" comment', () => {
+      const spec = {
+        name: 'optional_field',
         type: 'string',
         kind: 'scalar',
-        default: 'none',
+        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');
     });
 
-    test('should use wizard SASL mechanism when available', () => {
-      onboardingWizardStore.setUserData({
-        username: 'admin',
-        saslMechanism: 'SCRAM-SHA-512',
-        consumerGroup: '',
-      });
-
-      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-512');
+      expect(spec.comment).toBe('Optional (default: "my-default")');
     });
-  });
 
-  describe('Implicitly required fields (no is_optional, no default)', () => {
-    test('should show implicitly required fields with Required comment', () => {
-      const spec: RawFieldSpec = {
+    test('critical fields get special comments even when optional', () => {
+      const spec = {
         name: 'topics',
         type: 'string',
         kind: 'array',
-        // No is_optional, no default = implicitly required
+        optional: true,
+        comment: undefined,
       };
 
-      const result = generateDefaultValue(spec, {
+      generateDefaultValue(spec as unknown as RawFieldSpec, {
         showOptionalFields: false,
         showAdvancedFields: false,
-        componentName: 'redpanda',
+        componentName: 'kafka',
       });
 
-      expect(result).toBeDefined();
-      expect(spec.comment).toBe('Required');
+      expect(spec.comment).toBe('Required if regexp_topics and regexp_topics_include are not configured');
     });
+  });
 
-    test('should show seed_brokers with Optional comment (special case)', () => {
-      const spec: RawFieldSpec = {
-        name: 'seed_brokers',
+  describe('Smart defaults for Redpanda components', () => {
+    beforeEach(() => {
+      sessionStorage.clear();
+    });
+
+    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 +476,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 +489,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 +498,335 @@ 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();
+      // 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.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}');
+    });
+  });
+
+  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: '',
+      };
 
-      // 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();
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
     });
 
-    test('kafka output with showAdvancedFields should show advanced fields', () => {
-      const builtInComponents = getBuiltInComponents();
-      const kafkaOutput = builtInComponents.find((c) => c.name === 'kafka' && c.type === 'output');
+    test('regexp_topics is shown as array for redpanda input', () => {
+      const spec = {
+        name: 'regexp_topics',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
 
-      const result = schemaToConfig(kafkaOutput, false, true);
-      const config = result?.config as Record<string, any>;
-      const outputConfig = config?.output?.kafka;
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
 
-      expect(outputConfig).toBeDefined();
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
+    });
 
-      // Critical fields still shown
-      expect(outputConfig.topic).toBe('example');
-      expect(outputConfig.addresses).toBeDefined();
-      expect(outputConfig.sasl).toBeDefined();
+    test('regexp_topics_include is shown as array for redpanda input', () => {
+      const spec = {
+        name: 'regexp_topics_include',
+        type: 'string',
+        kind: 'array',
+        defaultValue: '',
+      };
 
-      // Advanced fields now shown
-      expect(outputConfig.client_id).toBeDefined();
-      expect(outputConfig.sasl.access_token).toBeDefined();
-      expect(outputConfig.tls).toBeDefined();
+      const result = generateDefaultValue(spec as RawFieldSpec, {
+        showOptionalFields: false,
+        showAdvancedFields: false,
+        componentName: 'redpanda',
+      });
+
+      expect(result).toEqual(['']);
+      expect(Array.isArray(result)).toBe(true);
     });
-  });
 
-  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');
+    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');
+    });
 
-      const result = schemaToConfig(avroScanner, false, true);
+    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>;
-      const scannerConfig = config?.avro;
 
-      expect(scannerConfig).toBeDefined();
-      // Advanced fields show when showAdvancedFields=true
-      expect(scannerConfig.raw_json).toBe(false);
+      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('should hide advanced scanner fields when showAdvancedFields=false', () => {
-      const builtInComponents = getBuiltInComponents();
-      const avroScanner = builtInComponents.find((c) => c.name === 'avro' && c.type === 'scanner');
+    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(avroScanner, false, false);
+      const result = schemaToConfig(mockComponentWithoutMaxInFlight, false, false);
       const config = result?.config as Record<string, any>;
-      const scannerConfig = config?.avro;
+      const outputConfig = config?.output?.http_client;
 
-      expect(scannerConfig).toBeDefined();
-      // Advanced fields hidden when showAdvancedFields=false
-      expect(Object.keys(scannerConfig as Record<string, unknown>).length).toBe(0);
+      // 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 9db9359cc..6b72e5138 100644
--- a/frontend/src/components/pages/rp-connect/utils/schema.ts
+++ b/frontend/src/components/pages/rp-connect/utils/schema.ts
@@ -1,152 +1,104 @@
+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 { isConsumerGroupField, isPasswordField, isSchemaRegistryUrlField, isTopicField, isUserField } from './wizard';
-import benthosSchemaFull from '../../../../assets/rp-connect-schema-full.json' with { type: 'json' };
+import {
+  hasWizardRelevantFields,
+  isConsumerGroupField,
+  isPasswordField,
+  isSchemaRegistryUrlField,
+  isTopicField,
+  isUserField,
+} from './wizard';
 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.
+ * Returns empty array and shows toast notification on error.
  */
-export const getBuiltInComponents = (): ConnectComponentSpec[] => {
-  if (!_builtInComponentsCache) {
-    _builtInComponentsCache = parseSchema();
+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 [];
   }
-  return _builtInComponentsCache;
-};
+}
 
 const generateRedpandaTopLevelConfig = (): Record<string, unknown> => {
   const userData = onboardingWizardStore.getUserData();
@@ -219,6 +171,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':
@@ -351,7 +308,7 @@ function populateConnectionDefaults(
   return undefined;
 }
 
-function shouldHideField(params: {
+function shouldShowField(params: {
   spec: RawFieldSpec;
   showOptionalFields: boolean;
   showAdvancedFields: boolean;
@@ -359,43 +316,45 @@ function shouldHideField(params: {
 }): boolean {
   const { spec, showOptionalFields, showAdvancedFields, componentName } = params;
 
+  // Critical fields always visible (for REDPANDA_TOPIC_AND_USER_COMPONENTS)
   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;
-  }
+  const isCriticalField = isRedpandaComponent && spec.name && CRITICAL_CONNECTION_FIELDS.has(spec.name);
 
-  // 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;
+  // Special case: SASL only shows if wizard user data exists
+  if (isCriticalField && spec.name === 'sasl') {
+    const userData = onboardingWizardStore.getUserData();
+    return !!userData?.username;
   }
 
-  if (showAdvancedFields && isExplicitlyAdvanced) {
-    return false;
+  if (isCriticalField) {
+    return true;
   }
 
-  if (showOptionalFields && isExplicitlyOptional) {
-    return false;
+  // Show fields that can be populated by wizard data
+  if (hasWizardRelevantFields(spec, componentName)) {
+    return true;
   }
 
-  if (isExplicitlyAdvanced) {
+  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;
   }
 
-  if (isExplicitlyOptional) {
-    return true;
+  // Don't show advanced fields unless explicitly requested
+  if (isAdvanced && !showAdvancedFields) {
+    return false;
   }
 
-  if (isNonCriticalRedpandaField) {
-    return true;
+  // Don't show optional fields unless explicitly requested
+  if (isOptional && !showOptionalFields) {
+    return false;
   }
 
+  // Show everything else (required, non-advanced, non-optional fields)
   return true;
 }
 
@@ -409,7 +368,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 +396,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, {
@@ -457,7 +416,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 {
@@ -470,8 +452,12 @@ function generateScalarValue(spec: RawFieldSpec, options: GenerateDefaultValueOp
       return 0;
     case 'bool':
       return false;
-    case 'object':
-      return generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName) ?? {};
+    case 'unknown':
+      return null;
+    case 'object': {
+      const obj = generateObjectValue(spec, showOptionalFields, showAdvancedFields, componentName);
+      return obj && Object.keys(obj).length > 0 ? obj : undefined;
+    }
     default:
       return '';
   }
@@ -484,31 +470,33 @@ interface GenerateDefaultValueOptions {
   parentName?: string;
 }
 
-export function generateDefaultValue(
-  spec: RawFieldSpec,
-  options?: GenerateDefaultValueOptions
-): RawFieldSpec['default'] {
-  const { showOptionalFields, showAdvancedFields, componentName, parentName } = options || {};
+/**
+ * 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;
+}
 
-  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 !== '';
+// 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 || {};
 
-  if (hasNonEmptyDefault && isExplicitlyRequired) {
-    spec.comment = `Required (default: ${JSON.stringify(spec.default)})`;
-  } else if ((isExplicitlyRequired || isImplicitlyRequired) && spec.name !== 'seed_brokers') {
-    spec.comment = 'Required';
-  } else if (hasNonEmptyDefault && isExplicitlyOptional) {
-    spec.comment = `Optional (default: ${JSON.stringify(spec.default)})`;
-  } else if (isExplicitlyOptional || isCriticalField) {
-    spec.comment = 'Optional';
-  } else if (spec.name === 'seed_brokers') {
-    spec.comment = 'Optional';
-  }
+  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 !== '';
 
   // 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) {
@@ -528,39 +516,135 @@ export function generateDefaultValue(
     }
   }
 
-  // Check if field should be hidden
-  if (
-    shouldHideField({
-      spec,
-      showOptionalFields: showOptionalFields ?? false,
-      showAdvancedFields: showAdvancedFields ?? false,
-      componentName,
-    })
-  ) {
+  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
-  if (spec.default !== undefined) {
-    return spec.default;
+  // 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
+  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 [];
+      // 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':
-      return {};
+      // 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:
-      return undefined;
+      generatedValue = undefined;
   }
+
+  return generatedValue;
 }
diff --git a/frontend/src/components/pages/rp-connect/utils/use-pipeline-mode.ts b/frontend/src/components/pages/rp-connect/utils/use-pipeline-mode.ts
new file mode 100644
index 000000000..264256929
--- /dev/null
+++ b/frontend/src/components/pages/rp-connect/utils/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';
+
+export 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/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.test.ts b/frontend/src/components/pages/rp-connect/utils/yaml.test.tsx
similarity index 83%
rename from frontend/src/components/pages/rp-connect/utils/yaml.test.ts
rename to frontend/src/components/pages/rp-connect/utils/yaml.test.tsx
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.tsx
@@ -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');
     });
   });
 });
diff --git a/frontend/src/components/pages/rp-connect/utils/yaml.ts b/frontend/src/components/pages/rp-connect/utils/yaml.ts
index dee723255..64e73bcac 100644
--- a/frontend/src/components/pages/rp-connect/utils/yaml.ts
+++ b/frontend/src/components/pages/rp-connect/utils/yaml.ts
@@ -1,7 +1,9 @@
+import { ConnectError } from '@connectrpc/connect';
 import { toast } from 'sonner';
+import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 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';
 
@@ -270,23 +272,30 @@ export const mergeConnectConfigs = (
   try {
     doc = parseDocument(existingYaml);
   } catch (error) {
-    const description = error instanceof Error ? error.message : String(error);
-    toast.error('Failed to parse YAML', {
-      description,
-    });
-    return newConfigObject;
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Parse existing YAML',
+        entity: 'mergeConnectConfigs',
+      })
+    );
+    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) {
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: ConnectError.from(error),
+        action: 'Merge selected component into existing config',
+        entity: 'mergeConnectConfigs',
+      })
+    );
+    return undefined; // Keep existing YAML in editor
+  }
 
   return doc;
 };
@@ -405,11 +414,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,32 +437,50 @@ export const configToYaml = (
     let yamlString = yamlStringify(doc, yamlConfig);
     yamlString = addRootSpacing(yamlString);
     return yamlString;
-  } catch (_error) {
-    return JSON.stringify(configObject, null, 2);
+  } catch (error) {
+    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
+    return '';
   }
 };
 
 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) {
+    toast.error(
+      formatToastErrorMessageGRPC({
+        error: new ConnectError('Component spec not found'),
+        action: 'Get connect template',
+        entity: 'getConnectTemplate',
+      })
+    );
     return;
   }
 
@@ -468,7 +495,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/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..208122f46 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',
@@ -37,16 +38,20 @@ 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;
-    }
->(({ className, variant, size, asChild = false, testId, as, to, ...props }, ref) => {
+  ButtonProps
+>(({ 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 +73,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/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/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/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/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/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 ce3dbd83c..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,44 +8,42 @@
  * 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 { 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> = ({ 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;
   }
 
   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">
           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">
-                    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">
-                    {hint.hint}
-                  </Text>
-                </div>
+                  <SimpleCodeBlock code={`Line ${hint.line}, Col ${hint.column}: ${hint.hint}`} width="full" className="my-0"/>
               ) : (
-                <Text className="rounded border bg-white px-2 py-1 font-mono text-gray-800 text-sm leading-relaxed">
-                  {hint.hint}
-                </Text>
+                <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>
@@ -56,4 +54,6 @@ export const LintHintList: React.FC<LintHintListProps> = ({ 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..32fb48cf2 100644
--- a/frontend/src/components/ui/secret/quick-add-secrets.tsx
+++ b/frontend/src/components/ui/secret/quick-add-secrets.tsx
@@ -35,10 +35,11 @@ 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';
+import { ALPHANUMERIC_WITH_HYPHENS } from 'utils/regex';
 import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 import { base64ToUInt8Array, encodeBase64 } from 'utils/utils';
 import { z } from 'zod';
@@ -52,6 +53,7 @@ type QuickAddSecretsProps = {
   enableNewSecrets?: boolean;
   hideHeader?: boolean;
   onError?: (errors: string[]) => void;
+  onUpdateEditorContent?: (oldName: string, newName: string) => void;
 };
 
 const SecretFormSchema = z.record(
@@ -86,19 +88,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(ALPHANUMERIC_WITH_HYPHENS, '_');
+  };
+  
+  // 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 +144,22 @@ 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) {
+      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 ef14ad166..0e3287233 100644
--- a/frontend/src/components/ui/yaml/yaml-editor-card.tsx
+++ b/frontend/src/components/ui/yaml/yaml-editor-card.tsx
@@ -11,8 +11,10 @@
 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';
 
 type YamlEditorCardProps = {
   value: string;
@@ -24,7 +26,11 @@ 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> = ({
   value,
@@ -36,6 +42,8 @@ export const YamlEditorCard: React.FC<YamlEditorCardProps> = ({
   onExpand,
   isLinting = false,
   options,
+  schema,
+  ...rest
 }) => {
   // When height is 100%, use flex layout to properly fill the container
   const isFlexHeight = height === '100%';
@@ -82,7 +90,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} 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 57627b58b..e1e66cbe0 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 { useEffect, useMemo, useRef } from 'react';
 
 export type YamlEditorProps = EditorProps & {
   'data-testid'?: string;
+  schema?: {
+    definitions?: Record<string, JSONSchema>;
+    properties?: Record<string, JSONSchema>;
+  };
 };
 
 const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
@@ -32,7 +37,7 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   scrollBeyondLastLine: false,
   cursorBlinking: 'phase',
   lineNumbersMinChars: 3,
-  lineDecorationsWidth: 0,
+  lineDecorationsWidth: 8,
   overviewRulerBorder: false,
   scrollbar: {
     alwaysConsumeMouseWheel: false,
@@ -52,7 +57,7 @@ const defaultOptions: editor.IStandaloneEditorConstructionOptions = {
   },
 } as const;
 
-const monacoYamlOptions: MonacoYamlOptions = {
+const defaultFallbackSchema: MonacoYamlOptions = {
   enableSchemaRequest: false,
   format: true,
   completion: true,
@@ -66,35 +71,70 @@ 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);
+  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>(() => {
+    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) {
-        yaml.dispose();
+  // Reconfigure Monaco YAML when schema changes
+  useEffect(() => {
+    if (monacoRef.current) {
+      // Dispose previous YAML configuration
+      if (yamlRef.current) {
+        yamlRef.current.dispose();
       }
-    },
-    [yaml]
-  );
 
-  const setMonacoOptions = useCallback((monaco: Monaco) => {
-    const yamlConfig = configureMonacoYaml(monaco, monacoYamlOptions);
-    setYaml(yamlConfig);
+      // Create new YAML configuration with updated schema
+      yamlRef.current = configureMonacoYaml(monacoRef.current, monacoYamlOptions);
+    }
+  }, [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}
       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
new file mode 100644
index 000000000..f95798054
--- /dev/null
+++ b/frontend/src/react-query/api/connect.tsx
@@ -0,0 +1,61 @@
+import { create } from '@bufbuild/protobuf';
+import type { GenMessage } from '@bufbuild/protobuf/codegenv1';
+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 {
+  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>
+) => {
+  const request = create(GetPipelineServiceConfigSchemaRequestSchema, {});
+
+  return useQuery(getPipelineServiceConfigSchema, request, {
+    staleTime: LONG_LIVED_CACHE_STALE_TIME,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    ...options,
+  });
+};
+
+export const useListComponentsQuery = (
+  options?: QueryOptions<GenMessage<ListComponentsResponse>, ListComponentsResponse>
+) => {
+  const listComponentsRequest = create(ListComponentsRequestSchema, {});
+
+  return useQuery(listComponents, listComponentsRequest, {
+    staleTime: LONG_LIVED_CACHE_STALE_TIME,
+    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, {
+    staleTime: NO_LIVED_CACHE_STALE_TIME,
+    ...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({
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, '_');