diff --git a/.specs/build-log.md b/.specs/build-log.md
new file mode 100644
index 000000000..612d581dd
--- /dev/null
+++ b/.specs/build-log.md
@@ -0,0 +1,148 @@
+---
+name: build-log
+category: code
+structure: composition
+status: implemented
+spec_version: 2
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3950-34695
+  node_id: 3950:34695
+created: 2026-05-26
+last_updated: 2026-05-26
+checksum: 56087e49a0eb85e25a55fd2ce264ab2a259a2880901cb4a174e554d021eaa976
+
+---
+
+# Build Log — Component Spec
+
+## Purpose
+
+Composition-based terminal log viewer for CI/deploy output. **BuildLog** is the root shell and context provider; **BuildLogHeader**, **BuildLogContent**, and **BuildLogFooter** can be reordered, omitted, or replaced so teams can customize the toolbar and add footer actions without forking the log renderer.
+
+## Sub-components
+
+- `build-log.vue` — Root shell, shared state (lines, warnings filter), `provide` context.
+- `build-log-header.vue` — Default toolbar: copy, line count, warning filter, optional search slot (Figma LogHeader).
+- `build-log-content.vue` — Scrollable log body, line variants, bottom scroll fade.
+- `build-log-footer.vue` — Optional footer region for actions (download, follow live, pagination).
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `lines` | `BuildLogLine[]` | `[]` | no | Log entries (filtered in content by warnings-only). |
+| `warningsOnly` | `boolean` | `false` | no | When true, shows only `warning` lines. |
+| `showCopy` | `boolean` | `true` | no | Shows copy control in BuildLogHeader. |
+| `disabled` | `boolean` | `false` | no | Disables header toolbar controls. |
+
+`BuildLogLine` (exported from `injection-key.ts`):
+
+| Field | Type | Notes |
+|---|---|---|
+| `id` | `string` | Stable row key. |
+| `time` | `string` | Timestamp label. |
+| `type` | `'text' \| 'folder' \| 'framework-version' \| 'success' \| 'warning'` | Figma LogLine variant. |
+| `message` | `string` | Primary log text. |
+| `folderType` | `string` | Optional filename highlight for `folder`. |
+| `size` | `string` | Optional raw size for `folder`. |
+| `gzipSize` | `string` | Optional gzip size for `folder`. |
+| `suffix` | `string` | Optional highlight for `framework-version`. |
+
+## Events
+
+| Event | Payload | Notes |
+|---|---|---|
+| `update:warningsOnly` | `boolean` | v-model:warnings-only. |
+| `copy` | `string` | Fires after copy; payload is copied plain text. |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Sub-components (BuildLogHeader, BuildLogContent, BuildLogFooter) in desired order. |
+| `empty` | — | On BuildLogContent when no lines match filters. |
+
+### BuildLogHeader slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `left` | — | Replaces default left cluster (copy + line count). |
+| `right` | — | Replaces default right cluster (warning filter + search region). |
+| `search` | — | Optional search control; renders nothing when unset. |
+
+### BuildLogFooter slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Footer actions and metadata. |
+
+## States
+
+- Visual states: `default`, `hover` (per log line), `focus-visible`, `disabled`
+- `data-disabled` / `data-warnings-only` on BuildLog root
+- Log line `data-type` reflects `line.type`
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+|---|---|---|---|
+| line hover | `transition-colors duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+| bottom fade | `transition-opacity duration-150 ease-out` | inline | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| typography (header label) | `.text-label-sm` |
+| typography (log lines) | `.text-label-sm` |
+| surface (header/footer) | `var(--bg-surface)` |
+| surface (log canvas) | `var(--bg-canvas)` |
+| surface (line hover) | `var(--bg-surface-raised)` |
+| text (default line) | `var(--text-default)` |
+| text (timestamp) | `var(--text-muted)` |
+| text (warning line) | `var(--warning-contrast)` |
+| text (success line) | `var(--success-contrast)` |
+| border | `var(--border-muted)` |
+| spacing | `var(--spacing-sm)`, `var(--spacing-md)`, `var(--spacing-xxs)`, `var(--spacing-xl)` |
+| shape | `var(--shape-elements)` |
+| ring | `var(--ring-color)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | `font-code` on log rows | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus on interactive controls in header/footer.
+- BuildLogContent: `role="log"`, `aria-live="polite"`.
+- Warning filter: `aria-pressed`; copy: `aria-label="Copy logs"`.
+- `motion-reduce:transition-none` on motion-bearing classes.
+
+## Stories (Storybook)
+
+- Default (composed: Header + Content)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/.specs/deploy-success.md b/.specs/deploy-success.md
new file mode 100644
index 000000000..c271e8ff0
--- /dev/null
+++ b/.specs/deploy-success.md
@@ -0,0 +1,140 @@
+---
+name: deploy-success
+category: templates
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3996-39125
+  node_id: 3996:39125
+created: 2026-05-26
+last_updated: 2026-05-26
+checksum: dc9c58f6cc29fb4b2c84b2d5c9aa5d416f5b33a706a563926ff8a5bf0db5b42f
+---
+
+# Deploy Success — Component Spec
+
+## Purpose
+
+Full-page post-deploy success screen ([Figma 3996:39125](https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3996-39125)): optional `GlobalHeader` with brand, centered `CardBox` with congratulations header (scope tag + visit link), application name, embedded `BuildLog`, icon next-steps list, and a secondary manage CTA.
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `title` | `string` | `'Congratulations!'` | no | Main success heading in the card header region. |
+| `description` | `string` | `'You just deployed a new application into'` | no | Supporting copy before the scope tag. |
+| `scope` | `string` | `'mygithub-scope'` | no | Scope label rendered in the header tag. |
+| `appName` | `string` | `'myappname'` | no | Deployed application name above the build log. |
+| `lines` | `BuildLogLine[]` | `[]` | no | Build log entries passed to BuildLog. |
+| `stepsLabel` | `string` | `'Next Steps'` | no | Section label above the next-steps list. |
+| `steps` | `DeploySuccessStep[]` | `undefined` | yes | Ordered next-step entries (title, description, icon per row). |
+| `actionLabel` | `string` | `'Manage'` | no | Primary footer button label. |
+| `visitLabel` | `string` | `'Visit'` | no | Visit link label in the card header. |
+| `visitHref` | `string` | `'#'` | no | Visit link destination URL. |
+| `showHeader` | `boolean` | `true` | no | When true, renders the top GlobalHeader bar with the brand slot. |
+| `disabled` | `boolean` | `false` | no | Disables toolbar controls and the primary action button. |
+
+`DeploySuccessStep`:
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | `string` | Step title beside the leading icon. |
+| `description` | `string` | Supporting copy under the step title. |
+| `icon` | `string` | Azion icon class (e.g. `ai ai-domains`). |
+
+## Events
+
+| Event | Payload | Notes |
+|---|---|---|
+| `action-click` | `MouseEvent` | Fires when the primary footer button is activated. |
+| `visit-click` | `MouseEvent` | Fires when the visit link is activated. |
+| `step-click` | `[index: number, event: MouseEvent]` | Fires when a next-step row is activated. |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `header` | — | Replaces the built-in GlobalHeader bar (brand + regions). |
+| `success` | — | Replaces the built-in congratulations header inside CardBox header. |
+| `logs` | — | Replaces the built-in app name + BuildLog region in CardBox content. |
+| `steps` | — | Replaces the built-in next-steps list in CardBox footer. |
+| `actions` | — | Replaces the built-in footer primary button. |
+
+## States
+
+- Visual states: `default`, `hover`, `focus-visible`, `disabled`
+- `data-disabled` mirrors the `disabled` prop on the root
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+|---|---|---|---|
+| state change | `transition-colors duration-fast-02 ease-productive-entrance` | inline | `motion-reduce:transition-none` |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| typography (success title) | `.text-heading-sm` |
+| typography (app name) | `.text-heading-xs` |
+| typography (description) | `.text-body-sm` |
+| typography (steps label) | `.text-label-sm` |
+| typography (step title) | `.text-body-sm` |
+| typography (step description) | `.text-body-sm` |
+| canvas | `var(--bg-canvas)` |
+| surface | `var(--bg-surface)` |
+| text | `var(--text-default)` |
+| text (muted) | `var(--text-muted)` |
+| border | `var(--border-muted)` |
+| spacing (page) | `var(--spacing-xxl)` |
+| spacing (card sections) | `var(--spacing-lg)` |
+| spacing (section gap) | `var(--spacing-md)` |
+| spacing (step gap) | `var(--spacing-xs)` |
+| shape (card) | `var(--shape-card)` |
+| shape (step icon) | `var(--shape-button)` |
+| ring | `var(--ring-color)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Root is a full-height layout; `GlobalHeader` uses `role="banner"` when shown.
+- Main card content is in `<main>` with `aria-labelledby` pointing at the success heading.
+- Primary action is a native button with visible focus ring (delegated to `Button`).
+- Visit link opens in a new tab with `rel="noopener noreferrer"` when `target="_blank"`.
+- Step row icons and chevrons are decorative (`aria-hidden="true"`).
+- BuildLog content uses `role="log"` via BuildLogContent.
+- `motion-reduce:transition-none` on color transitions.
+
+## Stories (Storybook)
+
+- Default
+- Disabled
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + per `kind` + per `size` + Disabled, unless the spec's "Stories (Storybook)" section explicitly justifies the addition.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/webkit/code/BuildLog.stories.js b/apps/storybook/src/stories/webkit/code/BuildLog.stories.js
new file mode 100644
index 000000000..b2afd45e1
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/code/BuildLog.stories.js
@@ -0,0 +1,160 @@
+import LogView from '@aziontech/webkit/code/log-view'
+import LogViewContent from '@aziontech/webkit/code/log-view-content'
+import LogViewHeader from '@aziontech/webkit/code/log-view-header'
+import { ref } from 'vue'
+
+import { completeDeployLog } from './complete-deploy-log.js'
+
+const composedComponents = {
+  LogView,
+  LogViewHeader,
+  LogViewContent
+}
+
+/** @type {import('@storybook/vue3').Meta<typeof LogView>} */
+const meta = {
+  title: 'Webkit/Code/LogView',
+  component: LogView,
+  subcomponents: {
+    LogViewHeader,
+    LogViewContent
+  },
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Composition-based log viewer. LogView provides context; compose LogViewHeader (48px toolbar), LogViewContent, and optional LogViewFooter.'
+      }
+    }
+  },
+  argTypes: {
+    lines: {
+      control: false,
+      description: 'Log entries to render (filtered client-side by warnings-only).',
+      table: {
+        type: { summary: 'LogViewLine[]' },
+        defaultValue: { summary: '[]' },
+        category: 'props'
+      }
+    },
+    search: {
+      control: 'text',
+      description: 'Search query; filters log lines and highlights matches in LogViewContent.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" },
+        category: 'props'
+      }
+    },
+    warningsOnly: {
+      control: 'boolean',
+      description: 'When true, shows only lines whose type is warning.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'props'
+      }
+    },
+    showCopy: {
+      control: 'boolean',
+      description: 'Shows the transparent copy IconButton in LogViewHeader.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'props'
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables toolbar controls (copy, filter).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'props'
+      }
+    },
+    'onUpdate:search': {
+      action: 'update:search',
+      description: 'Emitted when the header search field changes (v-model:search).',
+      table: { type: { summary: 'string' }, category: 'events' }
+    },
+    'onUpdate:warningsOnly': {
+      action: 'update:warningsOnly',
+      description: 'Emitted when the warnings-only filter toggles (v-model:warnings-only).',
+      table: { type: { summary: 'boolean' }, category: 'events' }
+    },
+    onCopy: {
+      action: 'copy',
+      description: 'Fires after copy; payload is the copied plain text.',
+      table: { type: { summary: 'string' }, category: 'events' }
+    }
+  },
+  args: {
+    lines: completeDeployLog,
+    search: '',
+    warningsOnly: false,
+    showCopy: true,
+    disabled: false
+  }
+}
+
+export default meta
+
+/** @type {import('@storybook/vue3').StoryObj<typeof LogView>} */
+export const Default = {
+  render: (args) => ({
+    components: composedComponents,
+    setup() {
+      const search = ref(args.search ?? '')
+      const warningsOnly = ref(args.warningsOnly ?? false)
+      const {
+        'onUpdate:search': onUpdateSearch,
+        'onUpdate:warningsOnly': onUpdateWarningsOnly,
+        onCopy,
+        ...props
+      } = args
+
+      return {
+        props,
+        search,
+        warningsOnly,
+        onUpdateSearch,
+        onUpdateWarningsOnly,
+        onCopy
+      }
+    },
+    template: `
+      <LogView
+        v-bind="props"
+        v-model:search="search"
+        v-model:warnings-only="warningsOnly"
+        class="h-[640px]"
+        @update:search="onUpdateSearch"
+        @update:warnings-only="onUpdateWarningsOnly"
+        @copy="onCopy"
+      >
+        <LogViewHeader />
+        <LogViewContent />
+      </LogView>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'LogViewHeader + LogViewContent. Search filters lines and highlights matches in the log body.'
+      }
+    }
+  }
+}
diff --git a/apps/storybook/src/stories/webkit/code/complete-deploy-log.js b/apps/storybook/src/stories/webkit/code/complete-deploy-log.js
new file mode 100644
index 000000000..14db0527c
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/code/complete-deploy-log.js
@@ -0,0 +1,495 @@
+/** Complete Azion deploy log mirroring Figma BuildLogs / LogLine variants. */
+export const completeDeployLog = [
+  { id: '1', time: '13:47:33', type: 'text', message: '[TASK] - #. Deploy started successfully!' },
+  { id: '2', time: '13:47:33', type: 'text', message: '[TASK] - #. Creating Azion token!' },
+  { id: '3', time: '13:47:33', type: 'text', message: '[TASK] - #. Add to Azion CLI!' },
+  {
+    id: '4',
+    time: '13:47:33',
+    type: 'text',
+    message:
+      "Please remember to login before running any commands. You can do this by running the following command: 'azion login'"
+  },
+  {
+    id: '5',
+    time: '13:47:33',
+    type: 'text',
+    message: 'Token saved in /root/.azion/default/settings.toml'
+  },
+  {
+    id: '6',
+    time: '13:47:33',
+    type: 'text',
+    message: 'This token will be used by default with all commands'
+  },
+  {
+    id: '7',
+    time: '13:47:33',
+    type: 'text',
+    message: '[TASK] - # Current directory: vue/vue3-vite-static/'
+  },
+  { id: '8', time: '13:47:33', type: 'text', message: '[TASK] - #. Cloning template!' },
+  { id: '9', time: '13:47:38', type: 'text', message: '[TASK] - # Build template' },
+  {
+    id: '10',
+    time: '13:47:47',
+    type: 'text',
+    message: 'added 478 packages, and audited 479 packages in 9s'
+  },
+  { id: '11', time: '13:47:47', type: 'text', message: '82 packages are looking for funding' },
+  { id: '12', time: '13:47:47', type: 'text', message: 'run `npm fund` for details' },
+  {
+    id: '13',
+    time: '13:47:47',
+    type: 'warning',
+    message: '24 vulnerabilities (5 low, 7 moderate, 10 high, 2 critical)'
+  },
+  {
+    id: '14',
+    time: '13:47:47',
+    type: 'text',
+    message: 'To address issues that do not require attention, run:'
+  },
+  { id: '15', time: '13:47:47', type: 'text', message: 'npm audit fix' },
+  { id: '16', time: '13:47:47', type: 'text', message: 'To address all issues, run:' },
+  { id: '17', time: '13:47:47', type: 'text', message: 'npm audit fix --force' },
+  { id: '18', time: '13:47:47', type: 'text', message: 'Run `npm audit` for details.' },
+  { id: '19', time: '13:47:47', type: 'text', message: '[TASK] - # Link template!' },
+  { id: '20', time: '13:47:48', type: 'success', message: 'Project successfully configured' },
+  {
+    id: '21',
+    time: '13:47:48',
+    type: 'success',
+    message: 'Successfully written to your .gitignore file'
+  },
+  {
+    id: '22',
+    time: '13:47:48',
+    type: 'success',
+    message: 'Successfully created GitHub Actions workflow file at .github/workflows/azion-deploy.yml'
+  },
+  { id: '23', time: '13:47:50', type: 'text', message: '[TASK] - #. Dump azion variables!' },
+  { id: '24', time: '13:47:50', type: 'success', message: 'Variables file (.env) dumped successfully' },
+  { id: '25', time: '13:47:50', type: 'text', message: '[TASK] - # Deploy template!' },
+  {
+    id: '26',
+    time: '13:47:51',
+    type: 'text',
+    message: '2026-05-26T13:47:51.181Z DEBUG Verifying if an update is required'
+  },
+  { id: '27', time: '13:47:51', type: 'text', message: '2026-05-26T13:47:51.181Z DEBUG Exec Schedules' },
+  { id: '28', time: '13:47:51', type: 'text', message: 'Running deploy command' },
+  {
+    id: '29',
+    time: '13:47:51',
+    type: 'text',
+    message: '2026-05-26T13:47:51.181Z DEBUG Running build command'
+  },
+  {
+    id: '30',
+    time: '13:47:51',
+    type: 'text',
+    message: 'Building your Application. This process may take a few minutes'
+  },
+  { id: '31', time: '13:47:51', type: 'text', message: 'Running build step command:' },
+  { id: '32', time: '13:47:51', type: 'text', message: '$ DEBUG=true npx --yes edge-functions@5.3.1 build' },
+  { id: '33', time: '13:48:15', type: 'text', message: '[Azion] [Build] › ℹ info Using preset: vue' },
+  { id: '34', time: '13:48:15', type: 'text', message: '[Azion] [Pre-Build] › ℹ info Starting pre-build...' },
+  { id: '35', time: '13:48:15', type: 'text', message: '[Vue/Vite] › ℹ info' },
+  { id: '36', time: '13:48:15', type: 'text', message: '> vue-vite-static@0.0.0 build' },
+  { id: '37', time: '13:48:15', type: 'text', message: '> vite build' },
+  {
+    id: '38',
+    time: '13:48:15',
+    type: 'framework-version',
+    message: 'vite v4.5.12',
+    suffix: 'building for production...'
+  },
+  { id: '39', time: '13:48:15', type: 'text', message: '[Vue/Vite] › ℹ info transforming...' },
+  {
+    id: '40',
+    time: '13:48:16',
+    type: 'text',
+    message: '[Vue/Vite] › ℹ info ✓ 42 modules transformed.'
+  },
+  { id: '41', time: '13:48:17', type: 'text', message: '[Vue/Vite] › ℹ info rendering chunks...' },
+  {
+    id: '42',
+    time: '13:48:17',
+    type: 'text',
+    message: '[Vue/Vite] › ℹ info computing gzip size...'
+  },
+  {
+    id: '43',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/assets/',
+    folderType: 'logo-277e0e97.svg',
+    size: '0.28 kB',
+    gzipSize: '0.19 kB'
+  },
+  {
+    id: '44',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/',
+    folderType: 'index.html',
+    size: '0.42 kB',
+    gzipSize: '0.28 kB'
+  },
+  {
+    id: '45',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/assets/',
+    folderType: 'AboutView-4d995ba2.css',
+    size: '0.09 kB',
+    gzipSize: '0.10 kB'
+  },
+  {
+    id: '46',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/assets/',
+    folderType: 'index-efcb3133.css',
+    size: '4.20 kB',
+    gzipSize: '1.30 kB'
+  },
+  {
+    id: '47',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/assets/',
+    folderType: 'AboutView-dc6b62c6.js',
+    size: '0.22 kB',
+    gzipSize: '0.20 kB'
+  },
+  {
+    id: '48',
+    time: '13:48:17',
+    type: 'folder',
+    message: 'dist/assets/',
+    folderType: 'index-f51559af.js',
+    size: '95.15 kB',
+    gzipSize: '37.31 kB'
+  },
+  { id: '49', time: '13:48:17', type: 'success', message: 'built in 1.44s' },
+  {
+    id: '50',
+    time: '13:48:17',
+    type: 'text',
+    message: '[Azion] [Pre-Build] › ℹ info Pre-build completed successfully'
+  },
+  {
+    id: '51',
+    time: '13:48:17',
+    type: 'text',
+    message: '[Azion] [Build] › ℹ info Using built-in handler from "vue" preset.'
+  },
+  {
+    id: '52',
+    time: '13:48:17',
+    type: 'warning',
+    message:
+      '[Azion] [Build] › ⚠ warning DEPRECATED: Migrate handler to → export default { fetch: (request, env, ctx) => {...} }'
+  },
+  {
+    id: '53',
+    time: '13:48:17',
+    type: 'text',
+    message: '[Azion] [Build] › ℹ info Starting build...'
+  },
+  {
+    id: '54',
+    time: '13:48:18',
+    type: 'success',
+    message: '[Azion] [Build] › ✔ success Build completed successfully'
+  },
+  {
+    id: '55',
+    time: '13:48:18',
+    type: 'text',
+    message: '[Azion] [Post-Build] › ℹ info Starting post-build...'
+  },
+  {
+    id: '56',
+    time: '13:48:18',
+    type: 'success',
+    message: '[Azion] [Post-Build] › ✔ success Post-build completed successfully'
+  },
+  { id: '57', time: '13:48:18', type: 'text', message: 'Environment file copied to .edge/.env' },
+  {
+    id: '58',
+    time: '13:48:18',
+    type: 'success',
+    message:
+      '[Azion] [IaC] › ✔ success Manifest generated successfully at /azion-samples/templates/vue/vue3-vite-static/.edge/manifest.json'
+  },
+  { id: '59', time: '13:48:18', type: 'text', message: 'Your Application was built successfully' },
+  {
+    id: '60',
+    time: '13:48:18',
+    type: 'text',
+    message: '2026-05-26T13:48:17.226Z DEBUG Create Edge Application'
+  },
+  { id: '61', time: '13:48:18', type: 'success', message: 'Created Application vue-3-teste with ID 1779802985' },
+  {
+    id: '62',
+    time: '13:48:18',
+    type: 'text',
+    message: '2026-05-26T13:48:18.447Z DEBUG Update Edge Application'
+  },
+  { id: '63', time: '13:48:19', type: 'text', message: '2026-05-26T13:48:19.594Z DEBUG Create Origins' },
+  { id: '64', time: '13:48:20', type: 'success', message: 'Created Origin for Application' },
+  {
+    id: '65',
+    time: '13:48:20',
+    type: 'text',
+    message: '2026-05-26T13:48:20.541Z DEBUG Get Rules Engine Default'
+  },
+  { id: '66', time: '13:48:21', type: 'text', message: '2026-05-26T13:48:21.421Z DEBUG Update Rules Engine' },
+  {
+    id: '67',
+    time: '13:48:22',
+    type: 'text',
+    message: '2026-05-26T13:48:22.814Z DEBUG Create Rules Engine Next Application'
+  },
+  {
+    id: '68',
+    time: '13:48:24',
+    type: 'text',
+    message: 'Using the same name as your project to create the bucket'
+  },
+  {
+    id: '69',
+    time: '13:48:24',
+    type: 'text',
+    message: '2026-05-26T13:48:24.066Z DEBUG Creating bucket {"name": "vue-3-teste"}'
+  },
+  { id: '70', time: '13:48:46', type: 'success', message: 'Created Bucket vue-3-teste' },
+  { id: '71', time: '13:48:46', type: 'text', message: 'Uploading source files' },
+  {
+    id: '72',
+    time: '13:48:46',
+    type: 'text',
+    message: '2026-05-26T13:48:46.835Z DEBUG Object_key: 20260526134817/assets/AboutView-4d995ba2.css'
+  },
+  {
+    id: '73',
+    time: '13:48:46',
+    type: 'text',
+    message: '2026-05-26T13:48:46.835Z DEBUG Object_key: 20260526134817/assets/index-efcb3133.css'
+  },
+  {
+    id: '74',
+    time: '13:48:46',
+    type: 'text',
+    message: '2026-05-26T13:48:46.835Z DEBUG Object_key: 20260526134817/assets/logo-277e0e97.svg'
+  },
+  {
+    id: '75',
+    time: '13:48:46',
+    type: 'text',
+    message: '2026-05-26T13:48:46.835Z DEBUG Object_key: 20260526134817/assets/index-f51559af.js'
+  },
+  {
+    id: '76',
+    time: '13:48:46',
+    type: 'text',
+    message: '2026-05-26T13:48:46.835Z DEBUG Object_key: 20260526134817/assets/AboutView-dc6b62c6.js'
+  },
+  {
+    id: '77',
+    time: '13:48:48',
+    type: 'text',
+    message: '2026-05-26T13:48:48.086Z DEBUG Object_key: 20260526134817/favicon.ico'
+  },
+  {
+    id: '78',
+    time: '13:48:48',
+    type: 'text',
+    message: 'Uploading files 14% |█████ | (1/7) [0s:0s]'
+  },
+  {
+    id: '79',
+    time: '13:48:48',
+    type: 'text',
+    message: '2026-05-26T13:48:48.258Z DEBUG Object_key: 20260526134817/index.html'
+  },
+  {
+    id: '80',
+    time: '13:48:48',
+    type: 'text',
+    message: 'Uploading files 28% |███████████ | (2/7) [0s:0s]'
+  },
+  {
+    id: '81',
+    time: '13:48:48',
+    type: 'text',
+    message: 'Uploading files 42% |█████████████████ | (3/7) [0s:0s]'
+  },
+  {
+    id: '82',
+    time: '13:48:49',
+    type: 'text',
+    message: 'Uploading files 57% |██████████████████████ | (4/7) [1s:1s]'
+  },
+  {
+    id: '83',
+    time: '13:48:49',
+    type: 'text',
+    message: 'Uploading files 71% |████████████████████████████ | (5/7) [1s:0s]'
+  },
+  {
+    id: '84',
+    time: '13:48:50',
+    type: 'text',
+    message: 'Uploading files 85% |██████████████████████████████████ | (6/7) [2s:0s]'
+  },
+  { id: '85', time: '13:48:51', type: 'text', message: 'Upload completed successfully!' },
+  {
+    id: '86',
+    time: '13:48:51',
+    type: 'text',
+    message: '2026-05-26T13:48:51.362Z DEBUG Create Edge Function'
+  },
+  { id: '87', time: '13:48:53', type: 'success', message: 'Created Function vue-3-teste with ID 52818' },
+  {
+    id: '88',
+    time: '13:48:53',
+    type: 'text',
+    message: '2026-05-26T13:48:53.939Z DEBUG Create Instance'
+  },
+  {
+    id: '89',
+    time: '13:48:53',
+    type: 'text',
+    message: '2026-05-26T13:48:53.939Z DEBUG Create Edge Function Instance'
+  },
+  { id: '90', time: '13:48:56', type: 'text', message: 'Reading manifest.json file' },
+  { id: '91', time: '13:48:56', type: 'text', message: 'Creating resources found in manifest.json file' },
+  { id: '92', time: '13:48:56', type: 'text', message: '2026-05-26T13:48:56.079Z DEBUG Create Origins' },
+  {
+    id: '93',
+    time: '13:48:57',
+    type: 'success',
+    message: 'Origin origin-storage-default with id 261044 successfully created'
+  },
+  { id: '94', time: '13:48:57', type: 'text', message: '2026-05-26T13:48:57.257Z DEBUG Create Rules Engine' },
+  {
+    id: '95',
+    time: '13:48:58',
+    type: 'success',
+    message: 'Rule Engine Set Storage Origin for All Requests with id 561537 successfully created'
+  },
+  { id: '96', time: '13:48:58', type: 'text', message: '2026-05-26T13:48:58.424Z DEBUG Create Rules Engine' },
+  {
+    id: '97',
+    time: '13:48:58',
+    type: 'success',
+    message: 'Rule Engine Deliver Static Assets with id 561538 successfully created'
+  },
+  { id: '98', time: '13:48:59', type: 'text', message: '2026-05-26T13:48:59.557Z DEBUG Create Rules Engine' },
+  {
+    id: '99',
+    time: '13:49:00',
+    type: 'success',
+    message: 'Rule Engine Redirect to index.html with id 561539 successfully created'
+  },
+  { id: '100', time: '13:49:00', type: 'text', message: '2026-05-26T13:49:00.700Z DEBUG Create Domain' },
+  { id: '101', time: '13:49:05', type: 'success', message: 'Created Domain vue-3-teste with ID 1779806653' },
+  { id: '102', time: '13:49:05', type: 'success', message: 'Your Application was deployed successfully' },
+  {
+    id: '103',
+    time: '13:49:05',
+    type: 'text',
+    message: 'To visualize your application access the Domain: https://bc8bxjmyix.map.azionedge.net'
+  },
+  {
+    id: '104',
+    time: '13:49:05',
+    type: 'text',
+    message:
+      'Your application is being deployed to all Azion Edge Locations and it might take a few minutes.'
+  },
+  { id: '105', time: '13:49:05', type: 'text', message: '[TASK] - #. Save output info.' },
+  { id: '106', time: '13:49:05', type: 'text', message: '[TASK] - #. Creating repository!' },
+  { id: '107', time: '13:49:07', type: 'text', message: '[TASK] - #. Commit template!' },
+  {
+    id: '108',
+    time: '13:49:08',
+    type: 'text',
+    message: 'Initialized empty Git repository in /azion-samples/templates/vue/vue3-vite-static/.git/'
+  },
+  { id: '109', time: '13:49:08', type: 'success', message: '[master (root-commit) 3a184a9] [bot] Automated Config' },
+  { id: '110', time: '13:49:08', type: 'text', message: '29 files changed, 7630 insertions(+)' },
+  {
+    id: '111',
+    time: '13:49:08',
+    type: 'text',
+    message: 'create mode 100644 .github/workflows/azion-deploy.yml'
+  },
+  { id: '112', time: '13:49:08', type: 'text', message: 'create mode 100644 .github/workflows/main.yml' },
+  { id: '113', time: '13:49:08', type: 'text', message: 'create mode 100644 .gitignore' },
+  { id: '114', time: '13:49:08', type: 'text', message: 'create mode 100644 README.md' },
+  { id: '115', time: '13:49:08', type: 'text', message: 'create mode 100644 azion.config.mjs' },
+  { id: '116', time: '13:49:08', type: 'text', message: 'create mode 100644 azion/args.json' },
+  { id: '117', time: '13:49:08', type: 'text', message: 'create mode 100644 azion/azion.json' },
+  { id: '118', time: '13:49:08', type: 'text', message: 'create mode 100644 index.html' },
+  { id: '119', time: '13:49:08', type: 'text', message: 'create mode 100644 info.json' },
+  { id: '120', time: '13:49:08', type: 'text', message: 'create mode 100644 package-lock.json' },
+  { id: '121', time: '13:49:08', type: 'text', message: 'create mode 100644 package.json' },
+  { id: '122', time: '13:49:08', type: 'text', message: 'create mode 100644 public/favicon.ico' },
+  { id: '123', time: '13:49:08', type: 'text', message: 'create mode 100644 src/App.vue' },
+  { id: '124', time: '13:49:08', type: 'text', message: 'create mode 100644 src/assets/base.css' },
+  { id: '125', time: '13:49:08', type: 'text', message: 'create mode 100644 src/assets/logo.svg' },
+  { id: '126', time: '13:49:08', type: 'text', message: 'create mode 100644 src/assets/main.css' },
+  { id: '127', time: '13:49:08', type: 'text', message: 'create mode 100644 src/components/HelloWorld.vue' },
+  { id: '128', time: '13:49:08', type: 'text', message: 'create mode 100644 src/components/TheWelcome.vue' },
+  { id: '129', time: '13:49:08', type: 'text', message: 'create mode 100644 src/components/WelcomeItem.vue' },
+  {
+    id: '130',
+    time: '13:49:08',
+    type: 'text',
+    message: 'create mode 100644 src/components/icons/IconCommunity.vue'
+  },
+  {
+    id: '131',
+    time: '13:49:08',
+    type: 'text',
+    message: 'create mode 100644 src/components/icons/IconDocumentation.vue'
+  },
+  {
+    id: '132',
+    time: '13:49:08',
+    type: 'text',
+    message: 'create mode 100644 src/components/icons/IconEcosystem.vue'
+  },
+  {
+    id: '133',
+    time: '13:49:08',
+    type: 'text',
+    message: 'create mode 100644 src/components/icons/IconSupport.vue'
+  },
+  { id: '134', time: '13:49:08', type: 'text', message: 'create mode 100644 src/components/icons/IconTooling.vue' },
+  { id: '135', time: '13:49:08', type: 'text', message: 'create mode 100644 src/main.js' },
+  { id: '136', time: '13:49:08', type: 'text', message: 'create mode 100644 src/router/index.js' },
+  { id: '137', time: '13:49:08', type: 'text', message: 'create mode 100644 src/views/AboutView.vue' },
+  { id: '138', time: '13:49:08', type: 'text', message: 'create mode 100644 src/views/HomeView.vue' },
+  { id: '139', time: '13:49:08', type: 'text', message: 'create mode 100644 vite.config.js' },
+  { id: '140', time: '13:49:09', type: 'text', message: "branch 'main' set up to track 'origin/main'." },
+  {
+    id: '141',
+    time: '13:49:09',
+    type: 'text',
+    message: '[TASK] - #. Set Azion Personal Token in the repository.'
+  },
+  { id: '142', time: '13:49:10', type: 'text', message: '[TASK] - #. Update repository info.' },
+  { id: '143', time: '13:49:10', type: 'text', message: '[TASK] - #. Delete local azion-samples repository!' },
+  {
+    id: '144',
+    time: '13:49:10',
+    type: 'success',
+    message: '[TASK] - #. Deploy finalized successfully!'
+  },
+]
diff --git a/apps/storybook/src/stories/webkit/templates/DeploySuccess.stories.js b/apps/storybook/src/stories/webkit/templates/DeploySuccess.stories.js
new file mode 100644
index 000000000..f24012499
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/templates/DeploySuccess.stories.js
@@ -0,0 +1,211 @@
+import DeploySuccess from '@aziontech/webkit/templates/deploy-success'
+import { completeDeployLog } from '../code/complete-deploy-log.js'
+
+/** @type {import('@storybook/vue3').Meta<typeof DeploySuccess>} */
+const meta = {
+  title: 'Webkit/Templates/Deploy Success',
+  component: DeploySuccess,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'landmark-one-main', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Post-deploy success screen: optional global header, centered CardBox with congratulations message, scope tag, visit link, embedded build log, icon next steps, and manage CTA.'
+      }
+    }
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Main success heading in the card header region.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    description: {
+      control: 'text',
+      description: 'Supporting copy before the scope tag.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    scope: {
+      control: 'text',
+      description: 'Scope label rendered in the header tag.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    appName: {
+      control: 'text',
+      description: 'Deployed application name above the build log.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    lines: {
+      control: 'object',
+      description: 'Log entries passed to LogView.',
+      table: { type: { summary: 'LogViewLine[]' }, category: 'props' }
+    },
+    stepsLabel: {
+      control: 'text',
+      description: 'Section label above the next-steps list.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    steps: {
+      control: 'object',
+      description: 'Ordered next-step entries (title, description, icon per row).',
+      table: { type: { summary: 'DeploySuccessStep[]' }, category: 'props' }
+    },
+    actionLabel: {
+      control: 'text',
+      description: 'Primary footer button label.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    visitLabel: {
+      control: 'text',
+      description: 'Visit link label in the card header.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    visitHref: {
+      control: 'text',
+      description: 'Visit link destination URL.',
+      table: { type: { summary: 'string' }, category: 'props' }
+    },
+    showHeader: {
+      control: 'boolean',
+      description: 'When true, renders the top GlobalHeader bar with the brand.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'props'
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables toolbar controls and the primary action button.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'props'
+      }
+    },
+    onActionClick: {
+      action: 'action-click',
+      description: 'Fires when the primary footer button is activated.',
+      table: { type: { summary: 'MouseEvent' }, category: 'events' }
+    },
+    onVisitClick: {
+      action: 'visit-click',
+      description: 'Fires when the visit link is activated.',
+      table: { type: { summary: 'MouseEvent' }, category: 'events' }
+    },
+    onStepClick: {
+      action: 'step-click',
+      description: 'Fires when a next-step row is activated.',
+      table: { type: { summary: '[index: number, event: MouseEvent]' }, category: 'events' }
+    },
+    header: {
+      control: false,
+      description: 'Replaces the built-in GlobalHeader bar.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    success: {
+      control: false,
+      description: 'Replaces the built-in congratulations header inside CardBox header.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    logs: {
+      control: false,
+      description: 'Replaces the built-in app name + LogView region.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    stepsSlot: {
+      control: false,
+      description: 'Replaces the built-in next-steps list.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    },
+    actions: {
+      control: false,
+      description: 'Replaces the built-in footer primary button.',
+      table: { type: { summary: 'VNode' }, category: 'slots' }
+    }
+  },
+  args: {
+    title: 'Congratulations!',
+    description: 'You just deployed a new application into',
+    scope: 'mygithub-scope',
+    appName: 'myappname',
+    stepsLabel: 'Next Steps',
+    actionLabel: 'Manage',
+    visitLabel: 'Visit',
+    visitHref: 'https://example.com',
+    showHeader: true,
+    disabled: false
+  }
+}
+
+export default meta
+
+const defaultSteps = [
+  {
+    title: 'Customize Domain',
+    description: 'Associate a custom domain and subdomains to Azion to handle user access.',
+    icon: 'ai ai-domains'
+  },
+  {
+    title: 'Point Traffic',
+    description:
+      'Redirect the traffic of a domain to Azion and take advantage of the distributed network.',
+    icon: 'ai ai-network-lists'
+  },
+  {
+    title: 'View Analytics',
+    description: 'Gain powerful insights into your performance, availability, and security.',
+    icon: 'ai ai-real-time-metrics'
+  }
+]
+
+const Template = (args) => ({
+  components: { DeploySuccess },
+  setup() {
+    return { args }
+  },
+  template: '<DeploySuccess v-bind="args" />'
+})
+
+/** @type {import('@storybook/vue3').StoryObj<typeof DeploySuccess>} */
+export const Default = {
+  args: {
+    lines: completeDeployLog,
+    steps: defaultSteps
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default post-deploy success screen matching the Figma Example frame.'
+      }
+    }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof DeploySuccess>} */
+export const Disabled = {
+  args: {
+    lines: completeDeployLog,
+    steps: defaultSteps,
+    disabled: true
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Success screen with build log toolbar and manage action disabled.'
+      }
+    }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 88a53c78b..48c94aeea 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -153,6 +153,10 @@
     "./content/item": "./src/components/content/item/index.js",
     "./content/currency": "./src/components/content/currency/currency.vue",
     "./content/tag": "./src/components/content/tag/tag.vue",
+    "./code/log-view": "./src/components/code/log-view/log-view.vue",
+    "./code/log-view-content": "./src/components/code/log-view/log-view-content.vue",
+    "./code/log-view-footer": "./src/components/code/log-view/log-view-footer.vue",
+    "./code/log-view-header": "./src/components/code/log-view/log-view-header.vue",
     "./data/data-table": "./src/components/data/data-table/data-table.vue",
     "./data/data-table-actions": "./src/components/data/data-table/data-table-actions.vue",
     "./data/data-table-batch-actions": "./src/components/data/data-table/data-table-batch-actions.vue",
@@ -227,6 +231,7 @@
     "./overlay/dropdown-menu-separator": "./src/components/overlay/dropdown-menu/dropdown-menu-separator.vue",
     "./overlay/dropdown-menu-from-model": "./src/components/overlay/dropdown-menu/dropdown-menu-from-model.vue",
     "./overlay/dropdown-menu-factory": "./src/components/overlay/dropdown-menu/factory.ts",
+    "./templates/deploy-success": "./src/components/templates/deploy-success/deploy-success.vue",
     "./templates/onboarding-form": "./src/components/templates/onboarding-form/onboarding-form.vue",
     "./templates/plan-success": "./src/components/templates/plan-success/plan-success.vue",
     "./templates/platform-shell": "./src/components/templates/platform-shell/platform-shell.vue",
diff --git a/packages/webkit/src/components/code/log-view/composables/copy-text-to-clipboard.ts b/packages/webkit/src/components/code/log-view/composables/copy-text-to-clipboard.ts
new file mode 100644
index 000000000..d4df39b15
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/composables/copy-text-to-clipboard.ts
@@ -0,0 +1,37 @@
+/** Writes plain text to the clipboard; falls back to `execCommand` when the async API is unavailable. */
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  if (!text) {
+    return false
+  }
+
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    // Fall through to legacy copy.
+  }
+
+  if (typeof document === 'undefined') {
+    return false
+  }
+
+  try {
+    const textarea = document.createElement('textarea')
+
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.position = 'fixed'
+    textarea.style.left = '-9999px'
+    textarea.style.top = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    const copied = document.execCommand('copy')
+    document.body.removeChild(textarea)
+
+    return copied
+  } catch {
+    return false
+  }
+}
diff --git a/packages/webkit/src/components/code/log-view/composables/format-log-line-text.ts b/packages/webkit/src/components/code/log-view/composables/format-log-line-text.ts
new file mode 100644
index 000000000..c326c925f
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/composables/format-log-line-text.ts
@@ -0,0 +1,25 @@
+import type { LogViewLine } from '../injection-key'
+
+/** Plain-text representation of a log line, aligned with LogViewContent rendering. */
+export function formatLogLineText(line: LogViewLine): string {
+  const parts: string[] = [line.time]
+
+  if (line.type === 'success') {
+    const hasCheckmark = line.message.includes('✔') || line.message.includes('✓')
+
+    parts.push(hasCheckmark ? line.message : `✓ ${line.message}`)
+  } else if (line.type === 'framework-version') {
+    parts.push(line.message)
+    if (line.suffix) parts.push(line.suffix)
+  } else if (line.type === 'folder') {
+    parts.push(line.message)
+    if (line.folderType) parts.push(line.folderType)
+    if (line.size) {
+      parts.push(line.gzipSize ? `${line.size} | gzip: ${line.gzipSize}` : line.size)
+    }
+  } else {
+    parts.push(line.message)
+  }
+
+  return parts.join(' ')
+}
diff --git a/packages/webkit/src/components/code/log-view/composables/split-text-by-query.ts b/packages/webkit/src/components/code/log-view/composables/split-text-by-query.ts
new file mode 100644
index 000000000..283ac8611
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/composables/split-text-by-query.ts
@@ -0,0 +1,35 @@
+export interface TextSegment {
+  text: string
+  match: boolean
+}
+
+/** Splits text into segments for optional search highlighting (case-insensitive). */
+export function splitTextByQuery(text: string, query: string): TextSegment[] {
+  const needle = query.trim()
+
+  if (!needle) {
+    return [{ text, match: false }]
+  }
+
+  const lowerText = text.toLowerCase()
+  const lowerNeedle = needle.toLowerCase()
+  const segments: TextSegment[] = []
+  let start = 0
+  let index = lowerText.indexOf(lowerNeedle, start)
+
+  while (index !== -1) {
+    if (index > start) {
+      segments.push({ text: text.slice(start, index), match: false })
+    }
+
+    segments.push({ text: text.slice(index, index + needle.length), match: true })
+    start = index + needle.length
+    index = lowerText.indexOf(lowerNeedle, start)
+  }
+
+  if (start < text.length) {
+    segments.push({ text: text.slice(start), match: false })
+  }
+
+  return segments.length > 0 ? segments : [{ text, match: false }]
+}
diff --git a/packages/webkit/src/components/code/log-view/composables/use-log-view-context.ts b/packages/webkit/src/components/code/log-view/composables/use-log-view-context.ts
new file mode 100644
index 000000000..11adfb4cc
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/composables/use-log-view-context.ts
@@ -0,0 +1,13 @@
+import { inject } from 'vue'
+
+import { LogViewInjectionKey } from '../injection-key'
+
+export function useLogViewContext() {
+  const ctx = inject(LogViewInjectionKey)
+
+  if (!ctx) {
+    throw new Error('LogView sub-components must be used within LogView.')
+  }
+
+  return ctx
+}
diff --git a/packages/webkit/src/components/code/log-view/injection-key.ts b/packages/webkit/src/components/code/log-view/injection-key.ts
new file mode 100644
index 000000000..98489161b
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/injection-key.ts
@@ -0,0 +1,34 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export type LogViewLineType = 'text' | 'folder' | 'framework-version' | 'success' | 'warning'
+
+export interface LogViewLine {
+  id: string
+  time: string
+  type: LogViewLineType
+  message: string
+  folderType?: string
+  size?: string
+  gzipSize?: string
+  suffix?: string
+}
+
+export interface LogViewContext {
+  testId: string
+  lines: ComputedRef<LogViewLine[]>
+  filteredLines: ComputedRef<LogViewLine[]>
+  search: ComputedRef<string>
+  warningsOnly: ComputedRef<boolean>
+  disabled: ComputedRef<boolean>
+  showCopy: ComputedRef<boolean>
+  searchPlaceholder: ComputedRef<string>
+  warningCount: ComputedRef<number>
+  lineCountLabel: ComputedRef<string>
+  warningTagLabel: ComputedRef<string>
+  canCopy: ComputedRef<boolean>
+  setSearch: (value: string) => void
+  toggleWarningsOnly: () => void
+  copyLogs: () => Promise<boolean>
+}
+
+export const LogViewInjectionKey: InjectionKey<LogViewContext> = Symbol('LogViewContext')
diff --git a/packages/webkit/src/components/code/log-view/log-view-content.vue b/packages/webkit/src/components/code/log-view/log-view-content.vue
new file mode 100644
index 000000000..3d8351443
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/log-view-content.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+  import { computed, nextTick, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue'
+
+  import ScrollArea from '../../layout/scroll-area/scroll-area.vue'
+  import { splitTextByQuery } from './composables/split-text-by-query'
+  import { useLogViewContext } from './composables/use-log-view-context'
+
+  defineOptions({
+    name: 'LogViewContent',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    empty(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = useLogViewContext()
+
+  const searchQuery = computed(() => ctx.search.value.trim())
+
+  const segmentsFor = (text: string) => splitTextByQuery(text, searchQuery.value)
+
+  const highlightMarkClass =
+    'rounded-[var(--shape-elements)] bg-[var(--bg-selected)] text-inherit motion-reduce:transition-none'
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__content`
+  )
+
+  const scrollBodyWrapRef = ref<HTMLElement | null>(null)
+  const scrollViewportRef = ref<HTMLElement | null>(null)
+  const showBottomFade = ref(false)
+
+  const updateBottomFade = () => {
+    const viewport = scrollViewportRef.value
+
+    if (!viewport) {
+      showBottomFade.value = false
+      return
+    }
+
+    showBottomFade.value = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight > 8
+  }
+
+  let resizeObserver: ResizeObserver | undefined
+
+  const bindScrollViewport = (viewport: HTMLElement | null) => {
+    if (scrollViewportRef.value) {
+      scrollViewportRef.value.removeEventListener('scroll', updateBottomFade)
+    }
+
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+    scrollViewportRef.value = viewport
+
+    if (!viewport) {
+      showBottomFade.value = false
+      return
+    }
+
+    viewport.addEventListener('scroll', updateBottomFade, { passive: true })
+
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => updateBottomFade())
+      resizeObserver.observe(viewport)
+    }
+
+    updateBottomFade()
+  }
+
+  const resolveScrollViewport = () => {
+    bindScrollViewport(scrollBodyWrapRef.value?.querySelector('[role="log"]') ?? null)
+  }
+
+  onMounted(() => {
+    nextTick(resolveScrollViewport)
+  })
+
+  onUnmounted(() => {
+    bindScrollViewport(null)
+  })
+
+  watch(
+    () => [ctx.filteredLines.value.length, ctx.warningsOnly.value, ctx.search.value] as const,
+    () => {
+      nextTick(resolveScrollViewport)
+    }
+  )
+</script>
+
+<template>
+  <div
+    ref="scrollBodyWrapRef"
+    v-bind="attrs"
+    :data-testid="testId"
+    class="relative min-h-0 flex-1"
+  >
+    <ScrollArea
+      orientation="both"
+      :data-testid="`${testId}__body`"
+      class="h-full min-h-0 bg-[var(--bg-canvas)] sm:overflow-x-hidden"
+      role="log"
+      aria-live="polite"
+    >
+      <template v-if="ctx.filteredLines.value.length">
+        <div class="max-sm:min-w-max">
+          <div
+            v-for="line in ctx.filteredLines.value"
+            :key="line.id"
+            :data-testid="`${ctx.testId}__line`"
+            :data-type="line.type"
+            class="font-code text-label-sm relative flex gap-[var(--spacing-md)] border-l-2 border-l-transparent px-[var(--spacing-md)] py-[var(--spacing-xxs)] transition-colors duration-150 ease-out before:pointer-events-none before:absolute before:inset-0 before:bg-[var(--bg-hover)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] hover:border-l-[var(--ring-color)] hover:bg-[var(--bg-surface-raised)] hover:before:opacity-100 data-[type=warning]:bg-[var(--warning)] data-[type=warning]:hover:bg-[var(--warning)] motion-reduce:transition-none motion-reduce:before:transition-none"
+          >
+            <span
+              :data-testid="`${ctx.testId}__line-time`"
+              class="relative z-[1] shrink-0 text-[var(--text-muted)]"
+            >
+              {{ line.time }}
+            </span>
+
+            <span
+              v-if="line.type !== 'folder'"
+              :data-testid="`${ctx.testId}__line-message`"
+              class="relative z-[1] flex min-w-0 flex-1 items-center gap-[var(--spacing-xs)] text-[var(--text-default)] data-[type=success]:gap-[var(--spacing-xs)] data-[type=warning]:text-[var(--warning-contrast)] max-sm:whitespace-nowrap"
+              :data-type="line.type"
+            >
+              <template v-if="line.type === 'framework-version'">
+                <span class="shrink-0 whitespace-nowrap">
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.message)"
+                    :key="`${line.id}-message-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+                <span
+                  v-if="line.suffix"
+                  class="shrink-0 whitespace-nowrap text-[var(--warning-contrast)]"
+                >
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.suffix)"
+                    :key="`${line.id}-suffix-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+              </template>
+
+              <template v-else-if="line.type === 'success'">
+                <span
+                  v-if="!line.message.includes('✔') && !line.message.includes('✓')"
+                  class="shrink-0 whitespace-nowrap"
+                  aria-hidden="true"
+                >
+                  ✓
+                </span>
+                <span
+                  class="min-w-0 max-sm:whitespace-nowrap break-words whitespace-pre-wrap text-[var(--success-contrast)]"
+                >
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.message)"
+                    :key="`${line.id}-message-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+              </template>
+
+              <template v-else>
+                <span class="min-w-0 max-sm:whitespace-nowrap break-words">
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.message)"
+                    :key="`${line.id}-message-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+              </template>
+            </span>
+
+            <template v-else>
+              <span
+                :data-testid="`${ctx.testId}__line-message`"
+                class="relative z-[1] flex min-w-0 flex-1 items-center gap-[var(--spacing-xl)] text-[var(--text-default)] max-sm:whitespace-nowrap"
+              >
+                <span class="w-16 shrink-0 whitespace-nowrap">
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.message)"
+                    :key="`${line.id}-message-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+                <span
+                  v-if="line.folderType"
+                  class="shrink-0 whitespace-nowrap text-[var(--warning-contrast)]"
+                >
+                  <template
+                    v-for="(segment, segmentIndex) in segmentsFor(line.folderType)"
+                    :key="`${line.id}-folder-type-${segmentIndex}`"
+                  >
+                    <mark
+                      v-if="segment.match"
+                      :class="highlightMarkClass"
+                    >
+                      {{ segment.text }}
+                    </mark>
+                    <template v-else>{{ segment.text }}</template>
+                  </template>
+                </span>
+
+                <span
+                  v-if="line.size"
+                  :data-testid="`${ctx.testId}__line-size`"
+                  class="flex shrink-0 items-center gap-[var(--spacing-sm)] whitespace-nowrap tabular-nums"
+                >
+                  <span>
+                    <template
+                      v-for="(segment, segmentIndex) in segmentsFor(line.size)"
+                      :key="`${line.id}-size-${segmentIndex}`"
+                    >
+                      <mark
+                        v-if="segment.match"
+                        :class="highlightMarkClass"
+                      >
+                        {{ segment.text }}
+                      </mark>
+                      <template v-else>{{ segment.text }}</template>
+                    </template>
+                  </span>
+                  <span
+                    class="text-[var(--text-muted)]"
+                    aria-hidden="true"
+                    >|</span
+                  >
+                  <span class="text-[var(--text-muted)]">gzip:</span>
+                  <span>
+                    <template
+                      v-for="(segment, segmentIndex) in segmentsFor(line.gzipSize ?? '')"
+                      :key="`${line.id}-gzip-${segmentIndex}`"
+                    >
+                      <mark
+                        v-if="segment.match"
+                        :class="highlightMarkClass"
+                      >
+                        {{ segment.text }}
+                      </mark>
+                      <template v-else>{{ segment.text }}</template>
+                    </template>
+                  </span>
+                </span>
+              </span>
+            </template>
+          </div>
+        </div>
+      </template>
+
+      <div
+        v-else
+        :data-testid="`${ctx.testId}__empty`"
+        class="font-code px-[var(--spacing-md)] py-[var(--spacing-sm)] text-label-sm text-[var(--text-muted)]"
+      >
+        <slot name="empty">No log lines match the current filters.</slot>
+      </div>
+    </ScrollArea>
+
+    <div
+      v-show="showBottomFade && ctx.filteredLines.value.length > 0"
+      aria-hidden="true"
+      :data-testid="`${testId}__fade-bottom`"
+      class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[var(--spacing-xl)] bg-gradient-to-b from-transparent to-[var(--bg-canvas)] opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none"
+    />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/code/log-view/log-view-footer.vue b/packages/webkit/src/components/code/log-view/log-view-footer.vue
new file mode 100644
index 000000000..4c3383767
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/log-view-footer.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import { useLogViewContext } from './composables/use-log-view-context'
+
+  defineOptions({
+    name: 'LogViewFooter',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = useLogViewContext()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__footer`
+  )
+</script>
+
+<template>
+  <footer
+    v-bind="attrs"
+    :data-testid="testId"
+    class="text-label-sm flex shrink-0 flex-col items-stretch gap-[var(--spacing-md)] border-t border-[var(--border-muted)] bg-[var(--bg-surface)] p-[var(--spacing-md)] sm:flex-row sm:flex-wrap sm:items-center"
+  >
+    <slot />
+  </footer>
+</template>
diff --git a/packages/webkit/src/components/code/log-view/log-view-header.vue b/packages/webkit/src/components/code/log-view/log-view-header.vue
new file mode 100644
index 000000000..189d28ce7
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/log-view-header.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, ref, useAttrs } from 'vue'
+
+  import IconButton from '../../actions/icon-button/icon-button.vue'
+  import Tag from '../../content/tag/tag.vue'
+  import InputText from '../../inputs/input-text/input-text.vue'
+  import { useLogViewContext } from './composables/use-log-view-context'
+
+  defineOptions({
+    name: 'LogViewHeader',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    left(): unknown
+    right(): unknown
+    search(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const ctx = useLogViewContext()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? `${ctx.testId}__header`
+  )
+
+  const copied = ref(false)
+  let copiedTimer: ReturnType<typeof setTimeout> | undefined
+
+  const copyIcon = computed(() => (copied.value ? 'pi pi-check' : 'pi pi-copy'))
+  const copyAriaLabel = computed(() => (copied.value ? 'Copied logs' : 'Copy logs'))
+
+  const handleCopy = async () => {
+    const didCopy = await ctx.copyLogs()
+
+    if (!didCopy) return
+
+    copied.value = true
+
+    if (copiedTimer) clearTimeout(copiedTimer)
+
+    copiedTimer = setTimeout(() => {
+      copied.value = false
+      copiedTimer = undefined
+    }, 2000)
+  }
+
+  onBeforeUnmount(() => {
+    if (copiedTimer) clearTimeout(copiedTimer)
+  })
+
+  const handleWarningsKeydown = (event: globalThis.KeyboardEvent) => {
+    if (ctx.disabled.value) return
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      ctx.toggleWarningsOnly()
+    }
+  }
+
+  const handleCopyKeydown = (event: globalThis.KeyboardEvent) => {
+    if (!ctx.canCopy.value) return
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      void handleCopy()
+    }
+  }
+</script>
+
+<template>
+  <header
+    v-bind="attrs"
+    :data-testid="testId"
+    class="flex shrink-0 flex-col gap-[var(--spacing-sm)] border-b border-[var(--border-muted)] bg-[var(--bg-surface)] px-[var(--spacing-sm)] py-[var(--spacing-sm)] sm:h-[48px] sm:flex-row sm:items-center sm:justify-between sm:py-0"
+  >
+    <div
+      :data-testid="`${testId}__left`"
+      class="flex w-full min-w-0 items-center gap-[var(--spacing-sm)] sm:w-auto"
+    >
+      <slot name="left">
+        <IconButton
+          v-if="ctx.showCopy.value"
+          kind="transparent"
+          size="medium"
+          :icon="copyIcon"
+          :ariaLabel="copyAriaLabel"
+          :disabled="!ctx.canCopy.value"
+          :data-testid="`${testId}__copy`"
+          :data-copied="copied || null"
+          @click="handleCopy"
+          @keydown="handleCopyKeydown"
+        />
+
+        <span
+          :data-testid="`${testId}__line-count`"
+          class="font-code text-label-sm text-[var(--text-muted)]"
+        >
+          {{ ctx.lineCountLabel.value }}
+        </span>
+
+        <button
+          v-if="ctx.warningCount.value > 0"
+          type="button"
+          :data-testid="`${testId}__warnings-filter`"
+          :aria-pressed="ctx.warningsOnly.value"
+          :disabled="ctx.disabled.value"
+          class="inline-flex h-8 min-w-8 items-center justify-center rounded-[var(--shape-elements)] p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] disabled:cursor-not-allowed disabled:opacity-60"
+          @click="ctx.toggleWarningsOnly"
+          @keydown="handleWarningsKeydown"
+        >
+          <Tag
+            severity="warning"
+            icon="pi pi-exclamation-triangle"
+            :value="ctx.warningTagLabel.value"
+          />
+        </button>
+      </slot>
+    </div>
+
+    <div
+      :data-testid="`${testId}__right`"
+      class="flex w-full min-w-0 flex-col gap-[var(--spacing-sm)] sm:flex-row sm:items-center sm:gap-[var(--spacing-sm)] sm:w-auto"
+    >
+      <slot name="right">
+        <slot name="search">
+          <span
+            :data-testid="`${testId}__search`"
+            class="relative flex w-full min-w-0 items-center sm:min-w-[12rem] sm:flex-1"
+          >
+            <i
+              class="pi pi-search pointer-events-none absolute left-[var(--spacing-xs)] z-[2] text-[length:0.875rem] leading-none text-[var(--text-muted)]"
+              aria-hidden="true"
+            />
+            <InputText
+              size="small"
+              class="w-full [&_input]:pl-[calc(var(--spacing-xs)+1.25rem)]"
+              :model-value="ctx.search.value"
+              :placeholder="ctx.searchPlaceholder.value"
+              :disabled="ctx.disabled.value"
+              aria-label="Search logs"
+              :data-testid="`${testId}__search-input`"
+              @update:model-value="ctx.setSearch"
+            />
+          </span>
+        </slot>
+      </slot>
+    </div>
+  </header>
+</template>
diff --git a/packages/webkit/src/components/code/log-view/log-view.vue b/packages/webkit/src/components/code/log-view/log-view.vue
new file mode 100644
index 000000000..3c8c9c33b
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/log-view.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+  import { computed, provide, useAttrs } from 'vue'
+
+  import { cn } from '../../../utils/cn'
+  import { copyTextToClipboard } from './composables/copy-text-to-clipboard'
+  import { formatLogLineText } from './composables/format-log-line-text'
+  import type { LogViewLine } from './injection-key'
+  import { LogViewInjectionKey } from './injection-key'
+
+  export type { LogViewLine, LogViewLineType } from './injection-key'
+
+  defineOptions({
+    name: 'LogView',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Log entries (filtered in LogViewContent by search and warnings-only). */
+    lines?: LogViewLine[]
+    /** Placeholder for the default header search field. */
+    searchPlaceholder?: string
+    /** Shows the copy-to-clipboard control in LogViewHeader. */
+    showCopy?: boolean
+    /** Disables toolbar controls in LogViewHeader. */
+    disabled?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    lines: () => [],
+    searchPlaceholder: 'Find in Logs',
+    showCopy: true,
+    disabled: false
+  })
+
+  /** Bound to LogViewHeader search; filters LogViewContent when set. */
+  const search = defineModel<string>('search', { default: '' })
+  /** When true, shows only lines whose `type` is `warning`. */
+  const warningsOnly = defineModel<boolean>('warningsOnly', { default: false })
+
+  const emit = defineEmits<{
+    copy: [value: string]
+  }>()
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const passthroughAttrs = computed(() => {
+    const rest = { ...attrs }
+
+    delete rest.class
+    delete rest['data-testid']
+
+    return rest
+  })
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'code-log-view')
+
+  const warningCount = computed(() => props.lines.filter((line) => line.type === 'warning').length)
+
+  const filteredLines = computed(() => {
+    const query = search.value.trim().toLowerCase()
+    let result = props.lines
+
+    if (warningsOnly.value) {
+      result = result.filter((line) => line.type === 'warning')
+    }
+
+    if (query) {
+      result = result.filter((line) => {
+        const haystack = [
+          line.time,
+          line.message,
+          line.folderType,
+          line.size,
+          line.gzipSize,
+          line.suffix
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+
+        return haystack.includes(query)
+      })
+    }
+
+    return result
+  })
+
+  const lineCountLabel = computed(() => `${filteredLines.value.length} lines`)
+
+  const warningTagLabel = computed(() => {
+    const count = warningCount.value
+
+    if (count === 1) return '1 Warning'
+    if (count > 1) return `${count} Warnings`
+
+    return 'Warnings'
+  })
+
+  const copyText = computed(() =>
+    filteredLines.value.map((line) => formatLogLineText(line)).join('\n')
+  )
+
+  const canCopy = computed(() => props.showCopy && !props.disabled && copyText.value.length > 0)
+
+  const setSearch = (value: string) => {
+    search.value = value
+  }
+
+  const toggleWarningsOnly = () => {
+    if (props.disabled) return
+
+    warningsOnly.value = !warningsOnly.value
+  }
+
+  const copyLogs = async (): Promise<boolean> => {
+    if (!canCopy.value) {
+      return false
+    }
+
+    const text = copyText.value
+    const copied = await copyTextToClipboard(text)
+
+    emit('copy', text)
+
+    return copied
+  }
+
+  provide(LogViewInjectionKey, {
+    testId: testId.value,
+    lines: computed(() => props.lines),
+    filteredLines,
+    search: computed(() => search.value),
+    warningsOnly: computed(() => warningsOnly.value),
+    disabled: computed(() => props.disabled),
+    showCopy: computed(() => props.showCopy),
+    searchPlaceholder: computed(() => props.searchPlaceholder),
+    warningCount,
+    lineCountLabel,
+    warningTagLabel,
+    canCopy,
+    setSearch,
+    toggleWarningsOnly,
+    copyLogs
+  })
+</script>
+
+<template>
+  <div
+    v-bind="passthroughAttrs"
+    :data-testid="testId"
+    :data-disabled="disabled || null"
+    :data-warnings-only="warningsOnly || null"
+    :class="
+      cn(
+        'flex min-h-0 w-full min-w-0 max-w-full flex-col overflow-hidden rounded-[var(--shape-elements)] border border-[var(--border-muted)]',
+        attrs.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/code/log-view/package.json b/packages/webkit/src/components/code/log-view/package.json
new file mode 100644
index 000000000..9aae9461c
--- /dev/null
+++ b/packages/webkit/src/components/code/log-view/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@aziontech/webkit-code-log-view",
+  "main": "./log-view.vue",
+  "module": "./log-view.vue",
+  "types": "./log-view.vue.d.ts",
+  "browser": {
+    "./sfc": "./log-view.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/templates/deploy-success/deploy-success.vue b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
new file mode 100644
index 000000000..09c184996
--- /dev/null
+++ b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+  import { computed, useAttrs, useId } from 'vue'
+
+  import AzionDefault from '../../../svg/azion/default/default.vue'
+  import { cn } from '../../../utils/cn'
+  import Button from '../../actions/button/button.vue'
+  import type { LogViewLine } from '../../code/log-view/injection-key'
+  import LogView from '../../code/log-view/log-view.vue'
+  import LogViewContent from '../../code/log-view/log-view-content.vue'
+  import LogViewHeader from '../../code/log-view/log-view-header.vue'
+  import CardBox from '../../content/card-box/card-box.vue'
+  import Item from '../../content/item/index.js'
+  import Tag from '../../content/tag/tag.vue'
+  import {
+    disabledCursorClasses,
+    focusSuppressHoverGhostClasses,
+    focusVisibleRingClasses,
+    ghostLayerClasses
+  } from '../../inputs/presets/interactive-states'
+  import GlobalHeader from '../../layout/global-header/index.js'
+  import Link from '../../navigation/link/link.vue'
+
+  defineOptions({
+    name: 'DeploySuccess',
+    inheritAttrs: false
+  })
+
+  export interface DeploySuccessStep {
+    /** Step title shown beside the leading icon. */
+    title: string
+    /** Supporting copy under the step title. */
+    description: string
+    /** Azion icon class (e.g. `ai ai-domains`). */
+    icon: string
+  }
+
+  interface Props {
+    /** Main success heading in the card header region. */
+    title?: string
+    /** Supporting copy before the scope tag. */
+    description?: string
+    /** Scope label rendered in the header tag. */
+    scope?: string
+    /** Deployed application name above the build log. */
+    appName?: string
+    /** Log entries passed to LogView. */
+    lines?: LogViewLine[]
+    /** Section label above the next-steps list. */
+    stepsLabel?: string
+    /** Ordered next-step entries (title, description, icon per row). */
+    steps: DeploySuccessStep[]
+    /** Primary footer button label. */
+    actionLabel?: string
+    /** Visit link label in the card header. */
+    visitLabel?: string
+    /** Visit link destination URL. */
+    visitHref?: string
+    /** When true, renders the top GlobalHeader bar with the brand slot. */
+    showHeader?: boolean
+    /** Disables toolbar controls and the primary action button. */
+    disabled?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    title: 'Congratulations!',
+    description: 'You just deployed a new application into',
+    scope: 'mygithub-scope',
+    appName: 'myappname',
+    lines: () => [],
+    stepsLabel: 'Next Steps',
+    actionLabel: 'Manage',
+    visitLabel: 'Visit',
+    visitHref: '#',
+    showHeader: true,
+    disabled: false
+  })
+
+  const emit = defineEmits<{
+    'action-click': [event: MouseEvent]
+    'visit-click': [event: MouseEvent]
+    'step-click': [index: number, event: MouseEvent]
+  }>()
+
+  defineSlots<{
+    header(): unknown
+    success(): unknown
+    logs(): unknown
+    steps(): unknown
+    actions(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const successHeadingId = useId()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'templates-deploy-success'
+  )
+
+  const onActionClick = (event: MouseEvent) => emit('action-click', event)
+  const onVisitClick = (event: MouseEvent) => emit('visit-click', event)
+  const onStepClick = (index: number, event: MouseEvent) => emit('step-click', index, event)
+
+  const GlobalHeaderLeft = GlobalHeader['Left']
+  const GlobalHeaderBrand = GlobalHeader['Brand']
+  const ItemContent = Item['Content']
+  const ItemTitle = Item['Title']
+  const ItemDescription = Item['Description']
+  const ItemMedia = Item['Media']
+  const ItemActions = Item['Actions']
+
+  const ROOT_CLASS =
+    'flex min-h-full w-full flex-col bg-[var(--bg-canvas)] transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none'
+
+  const STEP_BUTTON_CLASS = cn(
+    'cursor-pointer border-0 bg-transparent text-left text-inherit',
+    ...ghostLayerClasses,
+    ...focusVisibleRingClasses,
+    'focus-visible:before:opacity-100',
+    ...focusSuppressHoverGhostClasses,
+    ...disabledCursorClasses
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-disabled="disabled || null"
+    :class="cn(ROOT_CLASS, attrs.class as string | undefined)"
+  >
+    <slot name="header">
+      <GlobalHeader
+        v-if="showHeader"
+        :data-testid="`${testId}__header`"
+      >
+        <GlobalHeaderLeft>
+          <GlobalHeaderBrand :data-testid="`${testId}__brand`">
+            <AzionDefault aria-label="Azion" />
+          </GlobalHeaderBrand>
+        </GlobalHeaderLeft>
+      </GlobalHeader>
+    </slot>
+
+    <main
+      class="flex flex-1 flex-col items-center px-[var(--spacing-xxl)] py-[var(--spacing-xxl)]"
+      :aria-labelledby="successHeadingId"
+      :data-testid="`${testId}__main`"
+    >
+      <CardBox
+        class="w-full max-w-[768px]"
+        :data-testid="`${testId}__card`"
+      >
+        <template #header>
+          <slot name="success">
+            <div
+              class="flex w-full items-start justify-between gap-[var(--spacing-md)]"
+              :data-testid="`${testId}__success`"
+            >
+              <div class="flex min-w-0 flex-col gap-[var(--spacing-xs)]">
+                <h1
+                  :id="successHeadingId"
+                  class="text-heading-sm text-[var(--text-default)] [word-break:break-word]"
+                  :data-testid="`${testId}__title`"
+                >
+                  {{ title }}
+                </h1>
+                <div
+                  class="flex flex-wrap items-center gap-[var(--spacing-xs)]"
+                  :data-testid="`${testId}__description-row`"
+                >
+                  <p class="text-body-sm whitespace-nowrap text-[var(--text-muted)]">
+                    {{ description }}
+                  </p>
+                  <Tag
+                    :value="scope"
+                    severity="secondary"
+                    icon="pi pi-github"
+                    :data-testid="`${testId}__scope-tag`"
+                  />
+                </div>
+              </div>
+
+              <Link
+                :label="visitLabel"
+                :href="visitHref"
+                target="_blank"
+                :disabled="disabled"
+                :data-testid="`${testId}__visit-link`"
+                @click="onVisitClick"
+              />
+            </div>
+          </slot>
+        </template>
+
+        <template #content>
+          <slot name="logs">
+            <div
+              class="flex w-full flex-col gap-[var(--spacing-lg)] px-[var(--spacing-lg)] py-[var(--spacing-lg)]"
+              :data-testid="`${testId}__logs`"
+            >
+              <h2
+                class="text-heading-xs w-full text-[var(--text-default)] [word-break:break-word]"
+                :data-testid="`${testId}__app-name`"
+              >
+                {{ appName }}
+              </h2>
+
+              <LogView
+                :lines="lines"
+                :disabled="disabled"
+                class="h-[263px] min-h-[263px]"
+                :data-testid="`${testId}__build-log`"
+              >
+                <LogViewHeader />
+                <LogViewContent />
+              </LogView>
+            </div>
+          </slot>
+        </template>
+
+        <template #footer>
+          <div
+            class="flex w-full flex-col gap-[var(--spacing-md)] px-[var(--spacing-lg)] pb-[var(--spacing-sm)] pt-[var(--spacing-md)]"
+          >
+            <slot name="steps">
+              <div
+                class="flex w-full flex-col gap-[var(--spacing-md)]"
+                :data-testid="`${testId}__steps`"
+              >
+                <p
+                  class="w-full text-label-sm text-[var(--text-default)] [word-break:break-word]"
+                  :data-testid="`${testId}__steps-label`"
+                >
+                  {{ stepsLabel }}
+                </p>
+
+                <div
+                  class="flex w-full flex-col gap-[var(--spacing-xs)]"
+                  :data-testid="`${testId}__steps-list`"
+                >
+                  <Item
+                    v-for="(step, index) in steps"
+                    :key="index"
+                    size="medium"
+                    as-child
+                    :data-testid="`${testId}__step-${index + 1}`"
+                  >
+                    <button
+                      type="button"
+                      :class="STEP_BUTTON_CLASS"
+                      :disabled="disabled"
+                      @click="onStepClick(index, $event)"
+                    >
+                      <ItemMedia
+                        media-kind="icon"
+                        class="relative z-[1] !size-10 shrink-0 !translate-y-0 self-center border-[var(--border-muted)] bg-[var(--bg-surface)]"
+                      >
+                        <i
+                          :class="step.icon"
+                          class="inline-flex size-5 items-center justify-center text-[length:inherit] leading-none"
+                          aria-hidden="true"
+                        />
+                      </ItemMedia>
+                      <ItemContent class="relative z-[1]">
+                        <ItemTitle>{{ step.title }}</ItemTitle>
+                        <ItemDescription>{{ step.description }}</ItemDescription>
+                      </ItemContent>
+                      <ItemActions class="relative z-[1]">
+                        <i
+                          class="pi pi-chevron-right size-6 shrink-0 leading-none text-[var(--text-default)]"
+                          aria-hidden="true"
+                        />
+                      </ItemActions>
+                    </button>
+                  </Item>
+                </div>
+              </div>
+            </slot>
+
+            <slot name="actions">
+              <Button
+                :label="actionLabel"
+                kind="secondary"
+                size="large"
+                class="w-full"
+                :disabled="disabled"
+                :data-testid="`${testId}__action`"
+                @click="onActionClick"
+              />
+            </slot>
+          </div>
+        </template>
+      </CardBox>
+    </main>
+  </div>
+</template>