diff --git a/ui/packages/design-system/src/components/Data/KsJsonTree.vue b/ui/packages/design-system/src/components/Data/KsJsonTree.vue
new file mode 100644
index 00000000000..0d07304010b
--- /dev/null
+++ b/ui/packages/design-system/src/components/Data/KsJsonTree.vue
@@ -0,0 +1,253 @@
+<template>
+    <div class="json-node">
+        <template v-if="isBranch">
+            <button
+                ref="toggleEl"
+                type="button"
+                class="toggle"
+                :aria-expanded="expanded"
+                :aria-label="expanded ? t('collapse') : t('expand')"
+                @click="expanded = !expanded"
+            >
+                <KsIcon size="s" class="chevron" :class="{collapsed: !expanded}"><ChevronDown /></KsIcon>
+                <span v-if="nodeKey !== undefined" class="key">{{ nodeKey }}</span>
+                <span class="punct">{{ open }}</span>
+                <span v-if="!expanded" class="preview">
+                    <template v-for="(entry, i) in previewEntries" :key="i">
+                        <span v-if="!isArray" class="key">{{ entry.key }}</span><span v-if="!isArray" class="punct">: </span><span class="value" :class="entry.cls">{{ entry.display }}</span><span v-if="i < previewEntries.length - 1" class="punct">, </span>
+                    </template>
+                    <span v-if="previewMore" class="punct">{{ previewEntries.length ? ", " : "" }}+{{ previewMore }}</span>
+                    <span class="punct">&nbsp;{{ close }}</span>
+                </span>
+            </button>
+            <div v-if="expanded" class="children">
+                <KsJsonTree
+                    v-for="entry in entries"
+                    :key="entry.key"
+                    :value="entry.value"
+                    :nodeKey="entry.key"
+                    :depth="depth + 1"
+                />
+            </div>
+            <span v-if="expanded" class="punct close">{{ close }}</span>
+        </template>
+
+        <div v-else class="leaf">
+            <span v-if="nodeKey !== undefined" class="key">{{ nodeKey }}</span>
+            <span v-if="nodeKey !== undefined" class="punct">:</span>
+            <span :class="['value', valueClass]">{{ displayValue }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {computed, ref, watch, onMounted, onBeforeUnmount} from "vue"
+    import {useI18n} from "vue-i18n"
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
+
+    const props = withDefaults(defineProps<{
+        value: unknown,
+        nodeKey?: string | number,
+        depth?: number,
+        defaultExpanded?: boolean,
+    }>(), {depth: 0})
+
+    const {t} = useI18n()
+
+    const expanded = ref(props.defaultExpanded ?? props.depth < 1)
+
+    watch(() => props.defaultExpanded, (value) => {
+        if (value !== undefined) expanded.value = value
+    })
+
+    const isArray = computed(() => Array.isArray(props.value))
+    const isBranch = computed(() => props.value !== null && typeof props.value === "object")
+
+    const entries = computed(() => {
+        if (!isBranch.value) {
+            return []
+        }
+        if (isArray.value) {
+            return (props.value as unknown[]).map((value, index) => ({key: index, value}))
+        }
+        return Object.entries(props.value as Record<string, unknown>).map(([key, value]) => ({key, value}))
+    })
+
+    const open = computed(() => (isArray.value ? "[" : "{"))
+    const close = computed(() => (isArray.value ? "]" : "}"))
+
+    function shorten(value: unknown): string {
+        if (value === null) return "null"
+        if (Array.isArray(value)) return "[…]"
+        if (typeof value === "object") return "{…}"
+        if (typeof value === "string") return `"${value.length > 24 ? value.slice(0, 24) + "…" : value}"`
+        return String(value)
+    }
+
+    function tokenClass(value: unknown): string {
+        if (typeof value === "string") return "is-string"
+        if (typeof value === "number") return "is-number"
+        if (value !== null && typeof value === "object") return "is-branch"
+        return "is-literal"
+    }
+
+    const toggleEl = ref<HTMLElement>()
+    const availableChars = ref(48)
+    let resizeObserver: ResizeObserver | undefined
+
+    onMounted(() => {
+        const container = toggleEl.value?.parentElement
+        if (props.depth !== 0 || !container) {
+            return
+        }
+        const charPx = (parseFloat(getComputedStyle(toggleEl.value!).fontSize) || 12) * 0.6
+        resizeObserver = new ResizeObserver(([entry]) => {
+            availableChars.value = Math.max(12, Math.floor(entry.contentRect.width / charPx) - 8)
+        })
+        resizeObserver.observe(container)
+    })
+
+    onBeforeUnmount(() => resizeObserver?.disconnect())
+
+    const previewLimit = computed(() => {
+        if (props.depth !== 0) {
+            return 3
+        }
+        let used = 0
+        let count = 0
+        for (const entry of entries.value) {
+            const len = (isArray.value ? 0 : String(entry.key).length + 2) + shorten(entry.value).length + 2
+            if (count > 0 && used + len > availableChars.value) {
+                break
+            }
+            used += len
+            count++
+        }
+        return Math.max(1, count)
+    })
+
+    const previewEntries = computed(() =>
+        entries.value.slice(0, previewLimit.value).map(e => ({
+            key: e.key,
+            display: shorten(e.value),
+            cls: tokenClass(e.value),
+        })),
+    )
+
+    const previewMore = computed(() => Math.max(0, entries.value.length - previewLimit.value))
+
+    const valueClass = computed(() => {
+        const v = props.value
+        if (typeof v === "string") return "is-string"
+        if (typeof v === "number") return "is-number"
+        return "is-literal"
+    })
+
+    const displayValue = computed(() => {
+        const v = props.value
+        if (v === null) return "null"
+        if (typeof v === "string") return `"${v}"`
+        return String(v)
+    })
+</script>
+
+<style scoped lang="scss">
+    .json-node {
+        font-family: var(--ks-font-family-mono);
+        line-height: 1.7;
+    }
+
+    .toggle {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: inherit;
+        font: inherit;
+    }
+
+    .toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ks-spacing-1);
+        line-height: 1;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        border-radius: var(--ks-radius-xs);
+
+        &:hover {
+            color: var(--ks-text-primary);
+        }
+
+        :deep(.material-design-icon) {
+            display: inline-flex;
+            align-items: center;
+            line-height: 0;
+        }
+    }
+
+    .chevron {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.3em;
+        height: 1.3em;
+        transition: transform 0.15s ease;
+
+        :deep(svg) {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        &.collapsed {
+            transform: rotate(-90deg);
+        }
+    }
+
+    .children {
+        padding-left: var(--ks-spacing-3);
+        border-left: 1px solid var(--ks-border-subtle);
+        margin-left: var(--ks-spacing-2);
+    }
+
+    .leaf {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ks-spacing-1);
+        border-radius: var(--ks-radius-xs);
+        padding-inline: var(--ks-spacing-1);
+        margin-inline: calc(-1 * var(--ks-spacing-1));
+
+        &:hover {
+            background: var(--ks-bg-hover);
+        }
+    }
+
+    .key {
+        color: var(--ks-editor-property);
+    }
+
+    .punct {
+        color: var(--ks-editor-punctuation);
+    }
+
+    .preview {
+        opacity: 0.85;
+    }
+
+    .value {
+        &.is-string {
+            color: var(--ks-editor-value);
+        }
+
+        &.is-number, &.is-literal {
+            color: var(--ks-editor-pabble);
+        }
+
+        &.is-branch {
+            color: var(--ks-editor-punctuation);
+        }
+    }
+</style>
diff --git a/ui/packages/design-system/src/index.ts b/ui/packages/design-system/src/index.ts
index 611ecbf6b34..6a03c6d3781 100644
--- a/ui/packages/design-system/src/index.ts
+++ b/ui/packages/design-system/src/index.ts
@@ -103,6 +103,7 @@ import KsTooltip from "./components/Feedback/KsTooltip.vue"
 import KsTopNavBar from "./components/Navigation/KsTopNavBar/KsTopNavBar.vue"
 import KsTaskIcon from "./components/Kestra/KsTaskIcon.vue"
 import KsTree from "./components/Data/KsTree.vue"
+import KsJsonTree from "./components/Data/KsJsonTree.vue"
 import KsUpload from "./components/Form/KsUpload.vue"
 import KsSubMenu from "./components/Navigation/KsMenu/KsSubMenu.vue"
 import KsPageHeader from "./components/Data/KsPageHeader.vue"
@@ -295,6 +296,7 @@ const components: Record<string, Component> = {
     KsTooltip,
     KsTopNavBar,
     KsTree,
+    KsJsonTree,
     KsUpload,
     KsSubMenu,
     KsPageHeader,
@@ -402,6 +404,7 @@ export {
     KsTooltip,
     KsTopNavBar,
     KsTree,
+    KsJsonTree,
     KsUpload,
     KsSubMenu,
     KsPageHeader,
@@ -528,6 +531,7 @@ declare module "vue" {
         KsTooltip: typeof KsTooltip
         KsTopNavBar: typeof KsTopNavBar
         KsTree: typeof KsTree
+        KsJsonTree: typeof KsJsonTree
         KsUpload: typeof KsUpload
     }
 }
diff --git a/ui/packages/design-system/tests/storybook/Data/KsJsonTree.stories.ts b/ui/packages/design-system/tests/storybook/Data/KsJsonTree.stories.ts
new file mode 100644
index 00000000000..be5fdc197cf
--- /dev/null
+++ b/ui/packages/design-system/tests/storybook/Data/KsJsonTree.stories.ts
@@ -0,0 +1,108 @@
+import type {Meta, StoryObj} from "@storybook/vue3-vite"
+import KsJsonTree from "../../../src/components/Data/KsJsonTree.vue"
+
+const NESTED_OBJECT = {
+    event: "deploy.completed",
+    status: "success",
+    duration: 1840,
+    timestamp: "2026-06-04T13:33:56.680Z",
+    meta: {
+        namespace: "company.data",
+        flowId: "etl-pipeline",
+        executionId: "4Q9z27FJ26FRIhdv037HtF",
+    },
+    tags: ["production", "scheduled"],
+    error: null,
+    retried: false,
+}
+
+const meta: Meta<typeof KsJsonTree> = {
+    title: "Data/KsJsonTree",
+    component: KsJsonTree,
+    tags: ["autodocs"],
+    argTypes: {
+        defaultExpanded: {control: "boolean"},
+        depth: {control: "number"},
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Object_: Story = {
+    name: "Object",
+    args: {value: NESTED_OBJECT, defaultExpanded: true},
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
+
+export const Array_: Story = {
+    name: "Array",
+    args: {value: ["production", "scheduled", "data-team", "priority-high"], defaultExpanded: true},
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
+
+export const Collapsed: Story = {
+    args: {value: NESTED_OBJECT, defaultExpanded: false},
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
+
+export const DeeplyNested: Story = {
+    args: {
+        value: {
+            level1: {
+                level2: {
+                    level3: {level4: {value: "deep"}, array: [1, 2, 3]},
+                    sibling: true,
+                },
+                count: 42,
+            },
+            topLevel: "string",
+        },
+        defaultExpanded: true,
+    },
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
+
+export const MixedTypes: Story = {
+    args: {
+        value: {
+            string: "hello world",
+            number: 3.14,
+            boolean: true,
+            null_: null,
+            array: [1, "two", false, null],
+            nested: {a: 1, b: 2},
+        },
+        defaultExpanded: true,
+    },
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
+
+export const Leaf: Story = {
+    args: {value: "a plain string value", nodeKey: "message"},
+    render: (args) => ({
+        components: {KsJsonTree},
+        setup() { return {args} },
+        template: "<ks-card style=\"font-size:13px;padding:1rem\"><KsJsonTree v-bind=\"args\" /></ks-card>",
+    }),
+}
diff --git a/ui/src/components/executions/Logs.vue b/ui/src/components/executions/Logs.vue
index 9208fbb6007..ea9fe880b2f 100644
--- a/ui/src/components/executions/Logs.vue
+++ b/ui/src/components/executions/Logs.vue
@@ -17,48 +17,36 @@
             :levelLabel="t('filter.level_log_executions.label')"
             @update:level="(value) => setLevelRouteValue({value, direction: 'min'})"
         />
-        <Collapse>
-            <KsFormItem v-for="logLevel in currentLevelOrLower" :key="logLevel">
-                <LogLevelNavigator
-                    v-if="countByLogLevel[logLevel] > 0"
-                    :cursorIdx="cursorLogLevel === logLevel ? cursorIdxForLevel : undefined"
-                    :level="logLevel"
-                    :totalCount="countByLogLevel[logLevel]"
-                    @previous="previousLogForLevel(logLevel)"
-                    @next="nextLogForLevel(logLevel)"
-                    @close="logCursor = undefined"
-                    class="w-100"
-                />
-            </KsFormItem>
-            <KsFormItem>
-                <KsButton @click="expandCollapseAll()" :disabled="raw_view" :icon="logDisplayButtonIcon">
+        <div class="logs-toolbar">
+            <div class="logs-toolbar__left">
+                <template v-for="logLevel in currentLevelOrLower" :key="logLevel">
+                    <LogLevelNavigator
+                        v-if="countByLogLevel[logLevel] > 0"
+                        :cursorIdx="cursorLogLevel === logLevel ? cursorIdxForLevel : undefined"
+                        :level="logLevel"
+                        :totalCount="countByLogLevel[logLevel]"
+                        @previous="previousLogForLevel(logLevel)"
+                        @next="nextLogForLevel(logLevel)"
+                        @close="logCursor = undefined"
+                    />
+                </template>
+                <KsButton class="logs-toolbar__text-btn" @click="expandCollapseAll()" :disabled="raw_view" :icon="logDisplayButtonIcon">
                     {{ logDisplayButtonText }}
                 </KsButton>
-            </KsFormItem>
-            <KsFormItem>
-                <KsTooltip
-                    :content="!raw_view ? t('logs_view.raw_details') : t('logs_view.compact_details')"
-                >
-                    <KsButton @click="toggleViewType" :icon="logViewTypeButtonIcon">
+                <KsTooltip :content="!raw_view ? t('logs_view.raw_details') : t('logs_view.compact_details')">
+                    <KsButton class="logs-toolbar__text-btn" @click="toggleViewType" :icon="logViewTypeButtonIcon">
                         {{ !raw_view ? t('logs_view.raw') : t('logs_view.compact') }}
                     </KsButton>
                 </KsTooltip>
-            </KsFormItem>
-            <KsFormItem>
-                <KsButtonGroup class="ks-b-group">
-                    <Restart v-if="executionsStore.execution" :execution="executionsStore.execution" @follow="emit('follow', $event)" />
-                    <KsIconButton :tooltip="t('download logs')" @click="downloadContent()">
-                        <Download />
-                    </KsIconButton>
-                    <KsIconButton :tooltip="t('copy logs')" @click="copyAllLogs()">
-                        <ContentCopy />
-                    </KsIconButton>
-                    <KsIconButton :tooltip="t('refresh')" @click="loadLogs()">
-                        <Refresh />
-                    </KsIconButton>
-                </KsButtonGroup>
-            </KsFormItem>
-        </Collapse>
+            </div>
+            <div class="logs-toolbar__actions">
+                <Restart v-if="executionsStore.execution" :execution="executionsStore.execution" @follow="emit('follow', $event)" />
+                <LogDisplaySettings />
+                <KsButton type="default" size="default" class="logs-toolbar__btn" :icon="Download" :aria-label="t('download logs')" :tooltip="t('download logs')" @click="downloadContent()" />
+                <KsButton type="default" size="default" class="logs-toolbar__btn" :icon="ContentCopy" :aria-label="t('copy logs')" :tooltip="t('copy logs')" @click="copyAllLogs()" />
+                <KsButton type="default" size="default" class="logs-toolbar__btn" :icon="Refresh" :aria-label="t('refresh')" :tooltip="t('refresh')" @click="loadLogs()" />
+            </div>
+        </div>
 
         <TaskRunDetails
             v-if="!raw_view"
@@ -117,24 +105,24 @@
 </template>
 
 <script setup lang="ts">
-    import {computed, ref, watch, useTemplateRef} from "vue"
+    import {computed, nextTick, ref, watch, useTemplateRef} from "vue"
     import {useRoute} from "vue-router"
     import {useI18n} from "vue-i18n"
     import {useLogExecutionsFilter} from "../filter/configurations"
     import TaskRunDetails from "../logs/TaskRunDetails.vue"
+    import LogDisplaySettings from "../logs/LogDisplaySettings.vue"
     import Download from "vue-material-design-icons/Download.vue"
     import ContentCopy from "vue-material-design-icons/ContentCopy.vue"
     import UnfoldMoreHorizontal from "vue-material-design-icons/UnfoldMoreHorizontal.vue"
     import UnfoldLessHorizontal from "vue-material-design-icons/UnfoldLessHorizontal.vue"
     import ViewList from "vue-material-design-icons/ViewList.vue"
     import ViewGrid from "vue-material-design-icons/ViewGrid.vue"
-    import {KsIconButton} from "@kestra-io/design-system"
     import LogLevelNavigator from "../logs/LogLevelNavigator.vue"
     import {DynamicScroller, DynamicScrollerItem} from "vue-virtual-scroller"
     import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
-    import Collapse from "../layout/Collapse.vue"
 
     import * as Utils from "../../utils/utils"
+    import {useToast} from "../../utils/toast"
     import LogLine from "../logs/LogLine.vue"
     import Restart from "./overview/components/actions/Restart.vue"
     import * as LogUtils from "../../utils/logs"
@@ -175,6 +163,7 @@
     }
 
     const {t} = useI18n()
+    const toast = useToast()
 
     const emit = defineEmits<{
         follow: [event: unknown]
@@ -247,9 +236,19 @@
     })
 
     watch(logCursor, (newValue) => {
-        if (newValue !== undefined && raw_view.value) {
+        if (newValue === undefined) {
+            return
+        }
+        if (raw_view.value) {
             scrollToLog(newValue)
+        } else {
+            (logs.value as any)?.scrollToLog?.(newValue)
         }
+        nextTick(() => requestAnimationFrame(() => {
+            const selected = [...document.querySelectorAll<HTMLElement>(".log-wrapper .line.selected")]
+                .find((line) => line.getBoundingClientRect().top > -10000)
+            selected?.scrollIntoView({block: "center", behavior: "smooth"})
+        }))
     })
 
     // computed
@@ -274,14 +273,6 @@
         }))
     })
 
-    const downloadName = computed(() => {
-        // FIXME: any - moment is a global filter
-        const now = new Date()
-        const pad = (n: number) => String(n).padStart(2, "0")
-        const formatted = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
-        return `kestra-execution-${formatted}-${executionId.value}.log`
-    })
-
     const logDisplayButtonText = computed(() =>
         openedTaskrunsCount.value === 0 ? t("expand all") : t("collapse all"),
     )
@@ -347,11 +338,9 @@
     }
 
     function downloadContent() {
-        executionsStore.downloadLogs({
+        executionsStore.downloadLogsFile({
             executionId: executionId.value!,
             params: levelToRequestParams(effectiveLevelValue.value),
-        }).then((response: unknown) => {
-            Utils.downloadUrl(window.URL.createObjectURL(new Blob([response as BlobPart])), downloadName.value)
         })
     }
 
@@ -361,6 +350,7 @@
             params: levelToRequestParams(effectiveLevelValue.value),
         }).then((response: unknown) => {
             Utils.copy(response as string)
+            toast.success(t("logs_copied"))
         })
     }
 
@@ -447,21 +437,41 @@
     }
   }
 
-  .ks-b-group {
-    min-width: auto!important;
-    max-width: max-content !important;
-  }
+  .logs-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ks-spacing-2);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    padding: var(--ks-spacing-2) 0;
+    margin-bottom: var(--ks-spacing-2);
+    background: var(--ks-bg-base);
+
+    &__left {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ks-spacing-2);
+    }
 
-  :deep(.kel-form) {
-    padding: 1rem 1rem 0.5rem 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid var(--ks-border-default);
-    border-radius: 0.5rem;
-    background-color: var(--ks-bg-surface);
-    box-shadow: 2px 3px 3px 0px var(--ks-shadow-element);
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--ks-spacing-2);
+      margin-left: auto;
+    }
+
+    &__btn {
+      margin: 0;
+      padding: var(--ks-spacing-2);
+      border-radius: var(--ks-radius-base);
+    }
 
-  :deep(.kel-form-item) {
-    margin-bottom: 0.5rem !important;
+    &__text-btn {
+      margin: 0;
+      font-size: var(--ks-font-size-xs);
+    }
   }
 </style>
diff --git a/ui/src/components/logs/LogDisplaySettings.vue b/ui/src/components/logs/LogDisplaySettings.vue
new file mode 100644
index 00000000000..2cb055f44cd
--- /dev/null
+++ b/ui/src/components/logs/LogDisplaySettings.vue
@@ -0,0 +1,114 @@
+<template>
+    <KsPopover placement="bottom-end" trigger="click" :title="t('display_settings')" width="300">
+        <template #reference>
+            <KsButton type="default" size="default" class="display-settings-btn" :icon="Cog" :aria-label="t('display_settings')" />
+        </template>
+        <template #default>
+            <div class="log-display-settings">
+                <div class="row row--stack">
+                    <span class="row-label">{{ t('density') }}</span>
+                    <KsSegmented v-model="logsDensity" :options="densityOptions" block class="density-segmented" />
+                </div>
+                <div class="row">
+                    <span class="row-label">{{ t('font size') }}</span>
+                    <KsInputNumber v-model="logsFontSize" :min="10" :max="24" :step="1" controlsPosition="right" class="row-number" />
+                </div>
+                <div class="row">
+                    <span class="row-label">{{ t('pretty_json') }}</span>
+                    <KsSwitch v-model="logsPrettyJson" />
+                </div>
+                <div class="row">
+                    <span class="row-label">{{ t('expand_by_default') }}</span>
+                    <KsSwitch v-model="logsExpandByDefault" :disabled="!logsPrettyJson" />
+                </div>
+                <div class="row">
+                    <span class="row-label">{{ t('body_line_clamp') }}</span>
+                    <div class="clamp-control">
+                        <KsInputNumber
+                            v-if="clampEnabled"
+                            v-model="logsBodyClamp"
+                            :min="1"
+                            :max="50"
+                            :step="1"
+                            controlsPosition="right"
+                            class="row-number"
+                        />
+                        <KsSwitch v-model="clampEnabled" />
+                    </div>
+                </div>
+            </div>
+        </template>
+    </KsPopover>
+</template>
+
+<script setup lang="ts">
+    import {computed} from "vue"
+    import {useI18n} from "vue-i18n"
+    import Cog from "vue-material-design-icons/Cog.vue"
+    import {logsFontSize, logsDensity, logsBodyClamp, logsPrettyJson, logsExpandByDefault} from "../../composables/useLogDisplay"
+
+    const {t} = useI18n()
+
+    const densityOptions = computed(() => [
+        {label: t("density_compact"), value: "compact"},
+        {label: t("density_normal"), value: "normal"},
+        {label: t("density_expanded"), value: "expanded"},
+    ])
+
+    const clampEnabled = computed({
+        get: () => logsBodyClamp.value > 0,
+        set: (value: boolean) => {
+            logsBodyClamp.value = value ? (logsBodyClamp.value || 5) : 0
+        },
+    })
+</script>
+
+<style scoped lang="scss">
+    .display-settings-btn {
+        margin: 0;
+        padding: var(--ks-spacing-2);
+        border-radius: var(--ks-radius-base);
+    }
+
+    .log-display-settings {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--ks-spacing-4);
+        padding: var(--ks-spacing-2) 0;
+
+        & + .row {
+            border-top: 1px solid var(--ks-border-subtle);
+        }
+    }
+
+    .row--stack {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--ks-spacing-2);
+    }
+
+    .density-segmented {
+        width: 100%;
+    }
+
+    .row-label {
+        color: var(--ks-text-primary);
+        font-size: var(--ks-font-size-sm);
+    }
+
+    .row-number {
+        width: 88px;
+    }
+
+    .clamp-control {
+        display: flex;
+        align-items: center;
+        gap: var(--ks-spacing-2);
+    }
+</style>
diff --git a/ui/src/components/logs/LogLevelNavigator.vue b/ui/src/components/logs/LogLevelNavigator.vue
index 7b27d1eff77..65bc53c7017 100644
--- a/ui/src/components/logs/LogLevelNavigator.vue
+++ b/ui/src/components/logs/LogLevelNavigator.vue
@@ -1,10 +1,19 @@
 <template>
-    <div class="d-flex kel-select__wrapper space-between gap-2" :style="wrapperStyle(level)">
+    <div
+        class="d-flex kel-select__wrapper space-between gap-2"
+        :class="{'is-clickable': filterMode}"
+        :style="wrapperStyle(level)"
+        :role="filterMode ? 'button' : undefined"
+        :tabindex="filterMode ? 0 : undefined"
+        @click="filterMode && emit('select')"
+        @keydown.enter="filterMode && emit('select')"
+        @keydown.space.prevent="filterMode && emit('select')"
+    >
         <div class="d-flex align-items-center gap-2">
             <span class="circle" :style="circle(level)" />
             <span>({{ (cursorIdx === undefined ? "" : `${cursorIdx + 1} / `) + totalCount }}) {{ level }}</span>
         </div>
-        <div class="d-flex align-items-end gap-1">
+        <div v-if="!filterMode" class="d-flex align-items-end gap-1">
             <ChevronUp class="icon-button" @click="forwardEvent('previous')" />
             <ChevronDown class="icon-button" @click="forwardEvent('next')" />
             <Close v-if="isSelected" class="icon-button" @click="forwardEvent('close')" :style="closeButton(level)" />
@@ -17,12 +26,13 @@
     import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
     import Close from "vue-material-design-icons/Close.vue"
 
-    const emit = defineEmits(["previous", "next", "close"])
+    const emit = defineEmits(["previous", "next", "close", "select"])
 
     const props = defineProps<{
         cursorIdx?: number;
         totalCount: number;
         level: string;
+        filterMode?: boolean;
     }>()
 
     const isSelected = computed(() => props.cursorIdx !== undefined)
@@ -37,11 +47,21 @@
 <style scoped lang="scss">
 .kel-select__wrapper {
     cursor: unset;
+    font-size: var(--ks-font-size-xs);
+    font-weight: 600;
 
     &:hover {
         box-shadow: 0 0 0 1px var(--ks-border-default) inset;
     }
 
+    &.is-clickable {
+        cursor: pointer;
+
+        &:hover {
+            background: var(--ks-bg-hover);
+        }
+    }
+
     .circle {
         display: inline-block;
         width: 10px;
diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
index d78105022a0..18cfc704ff7 100644
--- a/ui/src/components/logs/LogLine.vue
+++ b/ui/src/components/logs/LogLine.vue
@@ -1,57 +1,68 @@
 <template>
     <div
-        class="py-2 line font-monospace"
-        :class="{['log-border-' + log.level.toLowerCase()]: cursor && log.level !== undefined}"
         v-if="filtered"
-        :style="logLineStyle"
+        class="line"
+        :class="[`log-row-${levelLower}`, `density-${logsDensity}`, {selected: cursor}]"
+        :style="rowStyle"
     >
         <KsIcon v-if="cursor" class="icon_container" :style="{color: iconColor}" size="xl">
             <MenuRight />
         </KsIcon>
-        <div class="log-content d-inline-block">
-            <span v-if="title" class="fw-bold">{{ log.taskId ?? log.flowId ?? "" }}</span>
-            <div
-                class="header"
-                :class="{'d-inline-block': metaWithValue.length === 0, 'me-3': metaWithValue.length === 0}"
-            >
-                <span :style="levelStyle" class="log-level">{{ levelLabel }}</span>
-                <span class="header-badge">
-                    {{ Filters.date(log.timestamp, "iso") }}
-                </span>
-                <span v-for="(meta, x) in metaWithValue" :key="x">
-                    <span class="header-badge property">
-                        <span>{{ meta.key }}</span>
-                        <template v-if="meta.router">
-                            <router-link :to="meta.router">{{ meta.value }}</router-link>
-                        </template>
-                        <template v-else>
-                            {{ meta.value }}
-                        </template>
-                    </span>
+        <span
+            class="log-level"
+            :class="{'log-level--clickable': clickableLevel}"
+            :style="{color: `var(--ks-log-${levelLower})`}"
+            :role="clickableLevel ? 'button' : undefined"
+            :tabindex="clickableLevel ? 0 : undefined"
+            :title="clickableLevel ? t('filter_for') : undefined"
+            @click="clickableLevel && props.log.level && emit('filter-level', props.log.level)"
+            @keydown.enter="clickableLevel && props.log.level && emit('filter-level', props.log.level)"
+            @keydown.space.prevent="clickableLevel && props.log.level && emit('filter-level', props.log.level)"
+        >{{ levelLabel }}</span>
+        <div class="log-content">
+            <div class="log-header">
+                <time class="log-time" :title="Filters.date(log.timestamp, 'iso')">{{ Filters.date(log.timestamp, "HH:mm:ss.SSS") }}</time>
+                <span v-if="title" class="log-source">{{ log.taskId ?? log.flowId ?? "" }}</span>
+                <span v-for="(meta, x) in metaWithValue" :key="x" class="log-meta">
+                    <span class="log-meta-key">{{ meta.key }}</span>
+                    <LogValueActions
+                        :field="meta.key"
+                        :value="String(meta.value)"
+                        :filterable="isFilterable(meta.key)"
+                        :to="meta.router"
+                        @filter="emit('filter', $event)"
+                    >{{ meta.value }}</LogValueActions>
                 </span>
             </div>
-            <pre
-                ref="lineContent"
-                :class="{'d-inline': metaWithValue.length === 0, 'me-3': metaWithValue.length === 0}"
-                v-html="renderedHtml"
+            <KsJsonTree
+                v-if="structured !== undefined"
+                class="log-json"
+                :value="structured"
+                :defaultExpanded="logsExpandByDefault"
             />
+            <pre v-else ref="lineContent" class="log-message" :style="messageStyle" v-html="renderedHtml" />
         </div>
-        <CopyToClipboard :text="`${log.level} ${log.timestamp} ${log.message}`" link />
+        <CopyToClipboard class="log-copy" :text="`${log.level} ${log.timestamp} ${log.message}`" link />
     </div>
 </template>
 <script setup lang="ts">
-    import {computed, nextTick, ref, watch} from "vue"
+    import {computed, nextTick, ref, watch, type CSSProperties} from "vue"
     import Convert from "ansi-to-html"
-    import {useStorage} from "@vueuse/core"
     import xss from "xss"
     import MenuRight from "vue-material-design-icons/MenuRight.vue"
     import linkify, {processLinkTags} from "./linkify"
     import CopyToClipboard from "../layout/CopyToClipboard.vue"
-    import {LevelKey} from "../../utils/logs"
+    import LogValueActions from "./LogValueActions.vue"
+    import {isFilterableLogField} from "./logValueFilter"
+    import {LevelKey, parseStructured} from "../../utils/logs"
+    import {logsFontSize, logsDensity, logsBodyClamp, logsPrettyJson, logsExpandByDefault, DENSITY_PADDING} from "../../composables/useLogDisplay"
     import {Log} from "../../stores/logs"
     import {useRouter} from "vue-router"
+    import {useI18n} from "vue-i18n"
     import * as Filters from "../../utils/filters"
 
+    const {t} = useI18n()
+
     // Props
     const props = defineProps<{
         cursor?: boolean,
@@ -59,19 +70,38 @@
         filter?: string,
         level?: LevelKey,
         excludeMetas?: (keyof Log)[],
-        title?: boolean
+        title?: boolean,
+        raw?: boolean,
+        clickableLevel?: boolean,
+        highlight?: string
+    }>()
+
+    const emit = defineEmits<{
+        filter: [{field: string, value: string, negate: boolean}],
+        "filter-level": [level: string]
     }>()
 
+    const isFilterable = isFilterableLogField
+
     // State
-    const logsFontSize = useStorage<number>("logsFontSize", 12)
     const convert = new Convert()
     const lineContent = ref<HTMLElement>()
     const router = useRouter()
 
     // Computed
-    const logLineStyle = computed(() => ({
-        fontSize: `${logsFontSize.value}px`,
-    }))
+    const levelLower = computed(() => (props.log?.level ?? "info").toLowerCase())
+
+    const rowStyle = computed(() => {
+        const tinted = levelLower.value === "error" || levelLower.value === "warn"
+        const pad = DENSITY_PADDING[logsDensity.value]
+        return {
+            fontSize: `${logsFontSize.value}px`,
+            paddingTop: pad,
+            paddingBottom: pad,
+            borderLeftColor: `var(--ks-log-border-${levelLower.value})`,
+            ...(tinted ? {background: `color-mix(in srgb, var(--ks-log-${levelLower.value}) 6%, transparent)`} : {}),
+        }
+    })
 
     const metaWithValue = computed(() => {
         const result: any[] = []
@@ -120,13 +150,6 @@
         return level.charAt(0).toUpperCase() + level.slice(1).toLowerCase()
     })
 
-    const levelStyle = computed(() => {
-        const lowerCaseLevel = props.log?.level?.toLowerCase()
-        return {
-            "color": `var(--ks-log-${lowerCaseLevel})`,
-            "background-color": `color-mix(in srgb, var(--ks-log-${lowerCaseLevel}) 10%, var(--ks-bg-badge))`,
-        }
-    })
 
     const filtered = computed(() =>
         props.filter === "" || (props.log.message && props.log.message.toLowerCase().includes(props.filter ?? "")),
@@ -151,9 +174,25 @@
             "$1<a href='$2' target='_blank'>$2</a>$3",
         )
 
+        const term = (props.highlight ?? props.filter)?.trim()
+        if (term) {
+            const matcher = new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi")
+            html = html.replace(/<[^>]*>|&[^;\s]+;|[^<&]+/g, (token) =>
+                token[0] === "<" || token[0] === "&"
+                    ? token
+                    : token.replace(matcher, "<mark class=\"log-highlight\">$&</mark>"),
+            )
+        }
+
         return html
     })
 
+    const structured = computed(() => (props.raw || !logsPrettyJson.value ? undefined : parseStructured(props.log.message)))
+
+    const messageStyle = computed<CSSProperties>(() => (logsBodyClamp.value > 0 && logsDensity.value !== "compact"
+        ? {display: "-webkit-box", "-webkit-line-clamp": String(logsBodyClamp.value), "-webkit-box-orient": "vertical", overflow: "hidden"}
+        : {}))
+
     watch(renderedHtml, () => {
         nextTick(() => {
             linkify(lineContent.value, router)
@@ -163,132 +202,154 @@
 <style scoped lang="scss">
 div.line {
     position: relative;
-    cursor: text;
-    white-space: pre-line;
-    word-break: break-all;
     display: flex;
-    align-items: center;
-    padding: 0.15rem 0.5rem;
-    min-height: 2rem;
-
-
-    border-left-width: 2px !important;
-    border-left-style: solid;
-    border-left-color: transparent;
+    align-items: flex-start;
+    gap: var(--ks-spacing-3);
+    padding: var(--ks-spacing-2) var(--ks-spacing-3);
+    min-height: 1.9rem;
+    border-left: 2px solid transparent;
+    border-top: 1px solid var(--ks-border-subtle);
+    transition: background 0.1s ease-in-out;
+
+    &:hover {
+        background: var(--ks-bg-hover);
+    }
 
-    border-top: 1px solid var(--ks-border-default);
+    &.selected {
+        background: var(--ks-bg-tag-hover);
+    }
 
-    // hack for class containing 0
     &[class*="-0"] {
         border-top: 0;
     }
 
     .icon_container {
         position: absolute;
-        left: -0.60rem;
-        top: 50%;
-        transform: translateY(-50%);
+        left: -0.6rem;
+        top: 0.5rem;
         z-index: 1;
     }
 
     .log-level {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        gap: var(--ks-spacing-1);
+        flex: none;
+        width: 3.5rem;
+        padding-top: 1px;
+        font-family: var(--ks-font-family-sans);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        line-height: 1.6;
+        user-select: none;
+
+        &--clickable {
+            cursor: pointer;
+            border-radius: var(--ks-radius-xs);
+
+            &:hover {
+                background: var(--ks-bg-hover);
+            }
+        }
+    }
+
+    .log-time {
+        flex: none;
+        font-family: var(--ks-font-family-mono);
+        color: var(--ks-text-dim);
         white-space: nowrap;
-        vertical-align: middle;
         user-select: none;
-        font-family: var(--ks-font-family-sans);
-        font-weight: 500;
-        border-radius: 0.375rem;
-        padding: 0.125rem var(--ks-spacing-2);
-        font-size: var(--ks-font-size-sm);
+        font-variant-numeric: tabular-nums;
     }
 
     .log-content {
-        display: inline-block;
-        vertical-align: middle;
-        overflow-wrap: anywhere;
-        word-break: break-word;
+        flex: 1 1 auto;
         min-width: 0;
+        line-height: 1.6;
+    }
 
-        .header {
-            display: inline-flex;
-            align-items: center;
-            gap: .5rem;
+    &.density-compact {
+        .log-content {
+            line-height: 1.4;
         }
 
-        .header > * + * {
-            margin-left: 1rem;
+        .log-message {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+    }
 
-        pre {
-            background: transparent;
-            margin: 0;
-            padding: 0;
-            font-size: inherit;
-            white-space: pre-wrap;
-            overflow-wrap: anywhere;
-            word-break: break-word;
-        }
+    &.density-expanded .log-content {
+        line-height: 1.95;
     }
 
-    .kel-tag {
-        height: auto;
+    .log-header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--ks-spacing-1) var(--ks-spacing-2);
+        min-height: 1.4rem;
     }
 
-    .header-badge {
-        font-size: 95%;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        width: auto;
-        min-width: 40px;
+    .log-source {
+        font-family: var(--ks-font-family-sans);
+        font-weight: 600;
         color: var(--ks-text-secondary);
+    }
+
+    .log-meta {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 0.1875rem;
+        padding: 0.0625rem var(--ks-spacing-1);
+        border-radius: var(--ks-radius-xs);
+        background: var(--ks-bg-tag);
+        font-family: var(--ks-font-family-sans);
 
-        span:first-child {
-            margin-right: 6px;
-            font-family: var(--kbs-body-font-family);
-            user-select: none;
+        .log-meta-key {
+            color: var(--ks-text-dim);
 
             &::after {
                 content: ":";
             }
         }
 
-        & a {
-            border-radius: var(--kel-border-radius-base);
-        }
     }
 
-     .property {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
+    .log-message {
+        display: block;
+        margin: 0.125rem 0 0;
+        padding: 0;
+        background: transparent;
+        font-family: var(--ks-font-family-mono);
+        font-size: inherit;
+        color: var(--ks-text-primary);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
 
-        .kel-tag {
-            font-family: var(--kbs-body-font-family);
-            user-select: none;
-        }
+    :deep(.log-message p) {
+        display: inline;
+        margin-bottom: 0;
     }
 
-    .message {
-        line-height: 1.8;
-        display: inline-block;
-        vertical-align: middle;
+    :deep(.log-highlight) {
+        background: var(--ks-bg-tag-active);
+        color: var(--ks-text-primary);
+        border-radius: var(--ks-radius-xs);
+        padding: 0 2px;
     }
 
-    p, :deep(.log-content p) {
-        display: inline;
-        margin-bottom: 0;
+    .log-json {
+        display: block;
+        margin-top: 2px;
     }
 
     :deep(.clipboard) {
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.15s ease-in-out;
-        top: 0.5rem;
+        top: 0.4rem;
         right: 0.5rem;
     }
 
diff --git a/ui/src/components/logs/LogValueActions.vue b/ui/src/components/logs/LogValueActions.vue
new file mode 100644
index 00000000000..45c4e6bbcd9
--- /dev/null
+++ b/ui/src/components/logs/LogValueActions.vue
@@ -0,0 +1,107 @@
+<template>
+    <KsPopover
+        trigger="click"
+        placement="bottom-start"
+        width="fit-content"
+        :visible="open"
+        popperClass="log-value-actions"
+        @update:visible="open = $event"
+    >
+        <template #reference>
+            <span class="log-value-trigger" :class="{'is-action': filterable || to}" role="button" tabindex="0" @keydown.enter.prevent="open = true">
+                <slot />
+            </span>
+        </template>
+        <template #default>
+            <div class="log-value-menu">
+                <button v-if="filterable" type="button" class="log-value-action" @click="apply(false)">
+                    <MagnifyPlusOutline :size="16" />
+                    <span>{{ t("filter_for") }}</span>
+                </button>
+                <button v-if="filterable" type="button" class="log-value-action" @click="apply(true)">
+                    <MagnifyMinusOutline :size="16" />
+                    <span>{{ t("filter_out") }}</span>
+                </button>
+                <button type="button" class="log-value-action" @click="copyValue">
+                    <ContentCopy :size="16" />
+                    <span>{{ t("copy_value") }}</span>
+                </button>
+                <router-link v-if="to" :to="to" class="log-value-action" @click="open = false">
+                    <OpenInNew :size="16" />
+                    <span>{{ t("open_page") }}</span>
+                </router-link>
+            </div>
+        </template>
+    </KsPopover>
+</template>
+
+<script setup lang="ts">
+    import {ref} from "vue"
+    import {useI18n} from "vue-i18n"
+    import MagnifyPlusOutline from "vue-material-design-icons/MagnifyPlusOutline.vue"
+    import MagnifyMinusOutline from "vue-material-design-icons/MagnifyMinusOutline.vue"
+    import ContentCopy from "vue-material-design-icons/ContentCopy.vue"
+    import OpenInNew from "vue-material-design-icons/OpenInNew.vue"
+    import * as Utils from "../../utils/utils"
+
+    const props = defineProps<{
+        field: string
+        value: string
+        filterable?: boolean
+        to?: any
+    }>()
+
+    const emit = defineEmits<{
+        filter: [{field: string, value: string, negate: boolean}]
+    }>()
+
+    const {t} = useI18n()
+    const open = ref(false)
+
+    const apply = (negate: boolean) => {
+        emit("filter", {field: props.field, value: props.value, negate})
+        open.value = false
+    }
+
+    const copyValue = () => {
+        Utils.copy(props.value)
+        open.value = false
+    }
+</script>
+
+<style scoped lang="scss">
+    .log-value-trigger {
+        cursor: pointer;
+        color: var(--ks-text-secondary);
+
+        &.is-action {
+            color: var(--ks-text-link);
+        }
+    }
+
+    .log-value-menu {
+        display: flex;
+        flex-direction: column;
+        min-width: 160px;
+    }
+
+    .log-value-action {
+        display: flex;
+        align-items: center;
+        gap: var(--ks-spacing-2);
+        width: 100%;
+        padding: var(--ks-spacing-2) var(--ks-spacing-3);
+        background: transparent;
+        border: none;
+        border-radius: var(--ks-radius-sm);
+        color: var(--ks-text-primary);
+        font-size: var(--ks-font-size-sm);
+        text-align: left;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            background: var(--ks-bg-hover);
+        }
+    }
+</style>
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index ebeb2540e13..7be78a4a1ac 100644
--- a/ui/src/components/logs/LogsWrapper.vue
+++ b/ui/src/components/logs/LogsWrapper.vue
@@ -24,13 +24,10 @@
                         @filter="onFilterRouteSync"
                     />
                     <QuickFilters
-                        :levels="VALUES.LEVELS"
+                        :showLevel="false"
                         :intervals="quickIntervals"
-                        :level="effectiveLogLevel?.value"
                         :timeRange="selectedTimeRange"
                         :intervalLabel="t('filter.timeRange_log.label')"
-                        :levelLabel="t('filter.level_log_executions.label')"
-                        @update:level="(value: string) => setLevelRouteValue({value, direction: 'min'})"
                         @update:time-range="onQuickFilterTimeRange"
                     />
                 </template>
@@ -41,15 +38,36 @@
 
                 <template #table>
                     <div v-ks-loading="isLoading">
+                        <div class="logs-toolbar">
+                            <div class="logs-toolbar__left">
+                                <LogLevelNavigator
+                                    v-for="level in presentLevels"
+                                    :key="level"
+                                    filterMode
+                                    :level="level"
+                                    :totalCount="serverLevelCounts[level]"
+                                    @select="selectLevel(level)"
+                                />
+                            </div>
+                            <div class="logs-toolbar__actions">
+                                <LogDisplaySettings />
+                                <KsButton type="default" size="default" class="logs-toolbar__btn" :icon="Download" :aria-label="t('download logs')" :tooltip="t('download logs')" @click="openDownload" />
+                                <KsButton type="default" size="default" class="logs-toolbar__btn" :icon="ContentCopy" :aria-label="t('copy logs')" :tooltip="t('copy logs')" @click="copyAllLogs" />
+                            </div>
+                        </div>
                         <div v-if="logsStore.logs !== undefined && logsStore.logs?.length > 0" class="logs-wrapper">
                             <LogLine
                                 v-for="(log, i) in logsStore.logs"
                                 :key="`${log.taskRunId}-${i}`"
                                 level="TRACE"
                                 filter=""
+                                :highlight="searchTerm"
                                 :excludeMetas="isFlowEdit ? ['namespace', 'flowId'] : []"
                                 :log="log"
                                 :class="{'log-0': i === 0}"
+                                clickableLevel
+                                @filter="onValueFilter"
+                                @filter-level="selectLevel"
                             />
                         </div>
 
@@ -60,6 +78,26 @@
                 </template>
             </KsDataTable>
         </div>
+
+        <KsDialog v-model="downloadOpen" :title="t('download logs')" width="480px" destroyOnClose>
+            <p class="download-hint">{{ t('download_logs_description') }}</p>
+            <QuickFilters
+                :levels="VALUES.LEVELS"
+                :intervals="quickIntervals"
+                :level="downloadLevel"
+                :timeRange="downloadTimeRange"
+                :levelLabel="t('filter.level_log_executions.label')"
+                :intervalLabel="t('filter.timeRange_log.label')"
+                @update:level="(value: string) => (downloadLevel = value)"
+                @update:time-range="(value: string) => (downloadTimeRange = value)"
+            />
+            <template #footer>
+                <KsButton @click="downloadOpen = false">{{ t('cancel') }}</KsButton>
+                <KsButton type="primary" :loading="downloading" @click="downloadLogs">
+                    {{ t('download') }}
+                </KsButton>
+            </template>
+        </KsDialog>
     </section>
 </template>
 
@@ -101,6 +139,13 @@
     import YAML_CHART from "../dashboard/assets/logs_timeseries_chart.yaml?raw"
     import {useLogsStore} from "../../stores/logs"
     import useRouteContext from "../../composables/useRouteContext"
+    import * as Utils from "../../utils/utils"
+    import {useToast} from "../../utils/toast"
+    import Download from "vue-material-design-icons/Download.vue"
+    import ContentCopy from "vue-material-design-icons/ContentCopy.vue"
+    import LogDisplaySettings from "./LogDisplaySettings.vue"
+    import LogLevelNavigator from "./LogLevelNavigator.vue"
+    import {buildValueFilterQuery} from "./logValueFilter"
 
     const props = withDefaults(defineProps<{
         logLevel?: string;
@@ -124,6 +169,7 @@
     const route = useRoute()
     const router = useRouter()
     const {t} = useI18n()
+    const toast = useToast()
     const logsStore = useLogsStore()
     const logFilter = useLogFilter()
     const {VALUES} = useValues("logs")
@@ -158,7 +204,6 @@
     const {
         effectiveValue: effectiveLogLevel,
         syncFromAppliedFilters: syncLevelFromAppliedFilters,
-        setRouteValue: setLevelRouteValue,
     } = useRouteFilterPolicy<LevelFilterValue>({
         enabled: () => !props.filters && hasLevelFilterUI.value,
         explicitValue: () => props.logLevel ? {value: props.logLevel, direction: "min"} : undefined,
@@ -182,6 +227,11 @@
             )
         },
     })
+    const searchTerm = computed(() => {
+        const key = Object.keys(route.query).find((k) => k.startsWith("filters[q]"))
+        return key ? String(route.query[key] ?? "") : ""
+    })
+
     const selectedTimeRange = computed(() => {
         if (route.query.timeRange) {
             return route.query.timeRange as string
@@ -270,6 +320,92 @@
             })
     }
 
+    const downloadOpen = ref(false)
+    const downloadLevel = ref<string | undefined>(undefined)
+    const downloadTimeRange = ref<string | undefined>(undefined)
+    const downloading = ref(false)
+
+    const openDownload = () => {
+        downloadLevel.value = effectiveLogLevel.value?.value
+        downloadTimeRange.value = selectedTimeRange.value ?? undefined
+        downloadOpen.value = true
+    }
+
+    const downloadLogs = () => {
+        const {
+            page: _p, size: _s, sort: _so, logsPage: _lp, logsSize: _ls,
+            level: _l, startDate: _sd, endDate: _ed, ...routeFilters
+        } = route.query
+        const params: Record<string, any> = props.filters ? {...props.filters} : {...routeFilters}
+
+        if (isFlowEdit.value) {
+            params["filters[namespace][EQUALS]"] = routeNamespace.value
+            params["filters[flowId][EQUALS]"] = flowId.value
+        } else if (isNamespaceEdit.value) {
+            params["filters[namespace][EQUALS]"] = routeNamespace.value
+        }
+
+        Object.keys(params)
+            .filter((k) => k.startsWith("filters[level]"))
+            .forEach((k) => delete params[k])
+        if (downloadLevel.value) {
+            params["filters[level][GREATER_THAN_OR_EQUAL_TO]"] = downloadLevel.value
+        }
+
+        if (downloadTimeRange.value) {
+            params.startDate = moment()
+                .subtract(moment.duration(downloadTimeRange.value).as("milliseconds"))
+                .toISOString(true)
+            params.endDate = moment().toISOString(true)
+        } else {
+            if (startDate.value) params.startDate = startDate.value
+            if (endDate.value) params.endDate = endDate.value
+        }
+        params.sort = "timestamp:desc"
+
+        downloading.value = true
+        logsStore.downloadLogs(params)
+            .then(() => (downloadOpen.value = false))
+            .finally(() => (downloading.value = false))
+    }
+
+    const LEVEL_ORDER = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"]
+    const serverLevelCounts = ref<Record<string, number>>({})
+    const presentLevels = computed(() => LEVEL_ORDER.filter((level) => (serverLevelCounts.value[level] ?? 0) > 0))
+
+    let lastCountedKey = ""
+    const refreshLevelCounts = () => {
+        if (!loadInit.value || lastCountedKey === filterQueryKey.value) return
+        const key = filterQueryKey.value
+        lastCountedKey = key
+        logsStore.levelCounts(loadQuery({})).then((counts) => {
+            if (key === filterQueryKey.value) serverLevelCounts.value = counts
+        })
+    }
+
+    const selectLevel = (level: string) => {
+        const query: Record<string, any> = {...route.query}
+        Object.keys(query)
+            .filter((key) => key.startsWith("filters[level]"))
+            .forEach((key) => delete query[key])
+        query["filters[level][GREATER_THAN_OR_EQUAL_TO]"] = level
+        query[pageKey] = "1"
+        router.push({query})
+    }
+
+    const onValueFilter = ({field, value, negate}: {field: string; value: string; negate: boolean}) => {
+        const query = buildValueFilterQuery(route.query, field, value, negate, pageKey)
+        if (query) router.push({query})
+    }
+
+    const copyAllLogs = () => {
+        const text = (logsStore.logs ?? [])
+            .map((l: any) => `${(l.level ?? "").padEnd(5)} ${l.timestamp} ${(l.message ?? "").replace(/\s+$/, "")}`)
+            .join("\n")
+        Utils.copy(text)
+        toast.success(t("logs_copied"))
+    }
+
     const onFilterRouteSync = (filters: AppliedFilter[]) => {
         if (props.filters || !hasLevelFilterUI.value) {
             return
@@ -291,6 +427,7 @@
     }
 
     const onLoaded = () => {
+        refreshLevelCounts()
         if (!pinToBottom.value) return
         pinToBottom.value = false
         const main = document.querySelector("main")
@@ -332,10 +469,49 @@
 </script>
 <style scoped lang="scss">
 
+    .download-hint {
+        margin: 0 0 var(--ks-spacing-3);
+        color: var(--ks-text-secondary);
+        font-size: var(--ks-font-size-sm);
+    }
+
     .shadow {
         box-shadow: 0px 2px 4px 0px var(--ks-shadow-element) !important;
     }
 
+    .logs-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--ks-spacing-2);
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        margin: 0 var(--ks-spacing-5) var(--ks-spacing-3);
+        padding: var(--ks-spacing-2) 0;
+        background: var(--ks-bg-base);
+
+        &__left {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--ks-spacing-2);
+        }
+
+        &__actions {
+            display: flex;
+            align-items: center;
+            gap: var(--ks-spacing-2);
+            margin-left: auto;
+        }
+
+        &__btn {
+            margin: 0;
+            padding: var(--ks-spacing-2);
+            border-radius: var(--ks-radius-base);
+        }
+    }
+
     .log-panel {
         > div.log-content {
             margin-bottom: 1rem;
diff --git a/ui/src/components/logs/TaskRunDetails.vue b/ui/src/components/logs/TaskRunDetails.vue
index 69c1f87bc97..3e5f08f2526 100644
--- a/ui/src/components/logs/TaskRunDetails.vue
+++ b/ui/src/components/logs/TaskRunDetails.vue
@@ -44,7 +44,7 @@
                     <DynamicScroller
                         v-if="shouldDisplayLogs(currentTaskRun)"
                         :items="
-                            logsWithIndexByAttemptUid[
+                            displayItemsByAttemptUid[
                                 attemptUid(
                                     asTaskRun(currentTaskRun).id,
                                     selectedAttemptNumberByTaskRunId[
@@ -72,131 +72,161 @@
                         "
                         @resize="scrollToBottomFailedTask"
                     >
-                        <template #default="{item, index, active}">
+                        <template #default="{item, active}">
                             <DynamicScrollerItem
                                 :item="item"
                                 :active="active"
-                                :sizeDependencies="[item.message, item.image]"
-                                :data-index="index"
+                                :sizeDependencies="[item.message, item.image, item.isGroup, item.isGroup && isGroupExpanded(currentTaskRunIndex, item)]"
+                                :data-index="item.index"
                             >
-                                <Teleport v-if="item.logFile" to="#buttons">
-                                    <KsButtonGroup class="line">
-                                        <KsButton
-                                            type="primary"
-                                            tag="a"
-                                            :href="fileUrl(item.logFile)"
-                                            target="_blank"
-                                            size="small"
-                                            :icon="Download"
-                                            rel="noopener noreferrer"
-                                        >
-                                            {{ t("download") }}
-                                        </KsButton>
-                                        <FilePreview
-                                            :value="item.logFile"
-                                            :executionId="followedExecution.id"
-                                        />
-                                        <KsButton
-                                            disabled
-                                            size="small"
-                                            type="primary"
-                                            v-if="
-                                                logFileSizeByPath[item.logFile]
-                                            "
-                                        >
-                                            ({{
-                                                logFileSizeByPath[item.logFile]
-                                            }})
-                                        </KsButton>
-                                    </KsButtonGroup>
-                                </Teleport>
-                                <LogLine
-                                    class="line"
-                                    :cursor="
-                                        logCursor ===
-                                            `${currentTaskRunIndex}/${index}`
-                                    "
-                                    :class="{
-                                        ['log-bg-' +
-                                            levelToHighlight?.toLowerCase()]:
-                                                levelToHighlight === item.level,
-                                        'opacity-40':
-                                            levelToHighlight &&
-                                            levelToHighlight !== item.level,
-                                    }"
-                                    :key="index"
-                                    :level="level as any"
-                                    :log="item"
-                                    :excludeMetas="excludeMetas as any"
-                                    v-else-if="
-                                        filter === '' ||
-                                            item.message
-                                                ?.toLowerCase()
-                                                .includes(filter.toLowerCase())
-                                    "
-                                />
-                                <TaskRunDetails
-                                    v-if="
-                                        !taskRunId &&
-                                            isSubflow(currentTaskRun) &&
-                                            shouldDisplaySubflow(
-                                                index,
-                                                currentTaskRun,
-                                            ) &&
-                                            asTaskRun(currentTaskRun).outputs?.executionId
-                                    "
-                                    :ref="
-                                        (el) =>
-                                            subflowTaskRunDetailsRef(
-                                                el,
+                                <template v-if="item.isGroup">
+                                    <LogLine
+                                        v-for="member in (isGroupExpanded(currentTaskRunIndex, item) ? item.members : item.members.slice(0, 1))"
+                                        :key="member.index"
+                                        class="line"
+                                        :cursor="logCursor === `${currentTaskRunIndex}/${member.index}`"
+                                        :class="{
+                                            ['log-bg-' + levelToHighlight?.toLowerCase()]: levelToHighlight === member.level,
+                                            'opacity-40': levelToHighlight && levelToHighlight !== member.level,
+                                        }"
+                                        :level="level as any"
+                                        :log="member"
+                                        :excludeMetas="excludeMetas as any"
+                                    />
+                                    <button
+                                        type="button"
+                                        class="log-group-more"
+                                        :style="{borderLeftColor: `var(--ks-log-border-${item.level.toLowerCase()})`, fontSize: `${logsFontSize}px`}"
+                                        :aria-expanded="isGroupExpanded(currentTaskRunIndex, item)"
+                                        @click="toggleGroup(currentTaskRunIndex, item)"
+                                    >
+                                        <KsIcon class="log-group-chevron" :class="{collapsed: !isGroupExpanded(currentTaskRunIndex, item)}" size="s">
+                                            <ChevronDown />
+                                        </KsIcon>
+                                        <span class="log-group-count">×{{ item.members.length }}</span>
+                                        <span class="log-group-label">{{ isGroupExpanded(currentTaskRunIndex, item) ? t("collapse") : t("similar lines") }}</span>
+                                    </button>
+                                </template>
+                                <template v-else>
+                                    <Teleport v-if="item.logFile" to="#buttons">
+                                        <KsButtonGroup class="line">
+                                            <KsButton
+                                                type="primary"
+                                                tag="a"
+                                                :href="fileUrl(item.logFile)"
+                                                target="_blank"
+                                                size="small"
+                                                :icon="Download"
+                                                rel="noopener noreferrer"
+                                            >
+                                                {{ t("download") }}
+                                            </KsButton>
+                                            <FilePreview
+                                                :value="item.logFile"
+                                                :executionId="followedExecution.id"
+                                            />
+                                            <KsButton
+                                                disabled
+                                                size="small"
+                                                type="primary"
+                                                v-if="
+                                                    logFileSizeByPath[item.logFile]
+                                                "
+                                            >
+                                                ({{
+                                                    logFileSizeByPath[item.logFile]
+                                                }})
+                                            </KsButton>
+                                        </KsButtonGroup>
+                                    </Teleport>
+                                    <LogLine
+                                        class="line"
+                                        :cursor="
+                                            logCursor ===
+                                                `${currentTaskRunIndex}/${item.index}`
+                                        "
+                                        :class="{
+                                            ['log-bg-' +
+                                                levelToHighlight?.toLowerCase()]:
+                                                    levelToHighlight === item.level,
+                                            'opacity-40':
+                                                levelToHighlight &&
+                                                levelToHighlight !== item.level,
+                                        }"
+                                        :key="item.index"
+                                        :level="level as any"
+                                        :log="item"
+                                        :excludeMetas="excludeMetas as any"
+                                        v-else-if="
+                                            filter === '' ||
+                                                item.message
+                                                    ?.toLowerCase()
+                                                    .includes(filter.toLowerCase())
+                                        "
+                                    />
+                                    <TaskRunDetails
+                                        v-if="
+                                            !taskRunId &&
+                                                isSubflow(currentTaskRun) &&
+                                                shouldDisplaySubflow(
+                                                    item.index,
+                                                    currentTaskRun,
+                                                ) &&
+                                                asTaskRun(currentTaskRun).outputs?.executionId
+                                        "
+                                        :ref="
+                                            (el) =>
+                                                subflowTaskRunDetailsRef(
+                                                    el,
+                                                    currentTaskRunIndex +
+                                                        '/' +
+                                                        item.index,
+                                                )
+                                        "
+                                        :logCursor="
+                                            logCursor
+                                                ?.split('/')
+                                                ?.slice(2)
+                                                .join('/')
+                                        "
+                                        @log-cursor="
+                                            emitLogCursor(
                                                 currentTaskRunIndex +
                                                     '/' +
-                                                    index,
+                                                    item.index +
+                                                    '/' +
+                                                    $event,
                                             )
-                                    "
-                                    :logCursor="
-                                        logCursor
-                                            ?.split('/')
-                                            ?.slice(2)
-                                            .join('/')
-                                    "
-                                    @log-cursor="
-                                        emitLogCursor(
-                                            currentTaskRunIndex +
-                                                '/' +
-                                                index +
-                                                '/' +
+                                        "
+                                        @log-indices-by-level="
+                                            childLogIndicesByLevel(
+                                                currentTaskRunIndex,
+                                                item.index,
                                                 $event,
-                                        )
-                                    "
-                                    @log-indices-by-level="
-                                        childLogIndicesByLevel(
-                                            currentTaskRunIndex,
-                                            index,
-                                            $event,
-                                        )
-                                    "
-                                    :levelToHighlight="levelToHighlight"
-                                    :level="level as any"
-                                    :excludeMetas="[
-                                        'namespace',
-                                        'flowId',
-                                        'taskId',
-                                        'executionId',
-                                    ]"
-                                    :filter="filter"
-                                    :allowAutoExpandSubflows="false"
-                                    :targetExecutionId="
-                                        asTaskRun(currentTaskRun).outputs.executionId
-                                    "
-                                    :class="
-                                        $el.classList.contains('even')
-                                            ? ''
-                                            : 'even'
-                                    "
-                                    :showProgressBar="showProgressBar"
-                                    :showLogs="showLogs"
-                                />
+                                            )
+                                        "
+                                        :levelToHighlight="levelToHighlight"
+                                        :level="level as any"
+                                        :excludeMetas="[
+                                            'namespace',
+                                            'flowId',
+                                            'taskId',
+                                            'executionId',
+                                        ]"
+                                        :filter="filter"
+                                        :allowAutoExpandSubflows="false"
+                                        :targetExecutionId="
+                                            asTaskRun(currentTaskRun).outputs.executionId
+                                        "
+                                        :class="
+                                            $el.classList.contains('even')
+                                                ? ''
+                                                : 'even'
+                                        "
+                                        :showProgressBar="showProgressBar"
+                                        :showLogs="showLogs"
+                                    />
+                                </template>
                             </DynamicScrollerItem>
                         </template>
                     </DynamicScroller>
@@ -234,9 +264,11 @@
 
 <script setup lang="ts">
     import {computed, ref, watch, onMounted, onBeforeUnmount, nextTick, useTemplateRef} from "vue"
+    import {logsFontSize} from "../../composables/useLogDisplay"
     import {useI18n} from "vue-i18n"
     import {RouterLink} from "vue-router"
     import Download from "vue-material-design-icons/Download.vue"
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
     import * as OutputsAPI from "@kestra-io/kestra-sdk/outputs"
     import LogLine from "./LogLine.vue"
     import {State, levelToRequestParams, KsProgress, type LevelFilterValue} from "@kestra-io/design-system"
@@ -388,6 +420,80 @@
         )
     })
 
+    const expandedGroups = ref<Set<string>>(new Set())
+
+    watch(() => props.filter, () => {
+        expandedGroups.value = new Set()
+    })
+
+    function isCollapsibleLine(item: any): boolean { // FIXME: any
+        return !!item.message
+            && item.logFile === undefined
+            && item.level !== "ERROR"
+            && item.level !== "WARN"
+            && !isSubflow(taskRunById.value[item.taskRunId])
+    }
+
+    function buildDisplayItems(items: any[]): any[] { // FIXME: any
+        const result: any[] = []
+        let run: any[] = []
+        let runKey: string | null = null
+        const flushRun = () => {
+            if (run.length >= LogUtils.COLLAPSE_THRESHOLD) {
+                result.push({isGroup: true, index: run[0].index, level: run[0].level, members: run})
+            } else {
+                result.push(...run)
+            }
+            run = []
+            runKey = null
+        }
+        for (const item of items) {
+            if (!isCollapsibleLine(item)) {
+                flushRun()
+                result.push(item)
+                continue
+            }
+            const key = LogUtils.normalizeLogTemplate(item.message)
+            if (run.length && runKey !== key) {
+                flushRun()
+            }
+            if (!run.length) {
+                runKey = key
+            }
+            run.push(item)
+        }
+        flushRun()
+        return result
+    }
+
+    const displayItemsByAttemptUid = computed(() => {
+        const source = logsWithIndexByAttemptUid.value
+        const result: Record<string, any[]> = {}
+        for (const uid in source) {
+            result[uid] = buildDisplayItems(source[uid])
+        }
+        return result
+    })
+
+    function groupKey(taskRunIndex: number, item: any): string { // FIXME: any
+        return `${taskRunIndex}:${item.index}`
+    }
+
+    function isGroupExpanded(taskRunIndex: number, item: any): boolean { // FIXME: any
+        return expandedGroups.value.has(groupKey(taskRunIndex, item))
+    }
+
+    function toggleGroup(taskRunIndex: number, item: any) { // FIXME: any
+        const key = groupKey(taskRunIndex, item)
+        const next = new Set(expandedGroups.value)
+        if (next.has(key)) {
+            next.delete(key)
+        } else {
+            next.add(key)
+        }
+        expandedGroups.value = next
+    }
+
     const autoExpandTaskRunStates = computed(() => {
         switch (
             localStorage.getItem("logDisplay") ||
@@ -406,7 +512,7 @@
 
     const currentTaskRunsLogIndicesByLevel = computed(() =>
         currentTaskRuns.value.reduce(
-            (currentTaskRunsLogIndicesByLevel: Record<string, string[]>, taskRun: any, taskRunIndex: number) => { // FIXME: any
+            (indicesByLevel: Record<string, string[]>, taskRun: any, taskRunIndex: number) => { // FIXME: any
                 if (shouldDisplayLogs(taskRun)) {
                     const currentTaskRunLogs =
                         logsWithIndexByAttemptUid.value[
@@ -415,14 +521,13 @@
                                 selectedAttemptNumberByTaskRunId.value[taskRun.id],
                             )
                         ]
-                    currentTaskRunLogs?.forEach((log: any, logIndex: number) => { // FIXME: any
-                        currentTaskRunsLogIndicesByLevel[log.level] = [
-                            ...(currentTaskRunsLogIndicesByLevel?.[log.level] ?? []),
-                            taskRunIndex + "/" + logIndex,
-                        ]
+                    currentTaskRunLogs?.forEach((log: any) => { // FIXME: any
+                        ;(indicesByLevel[log.level] ??= []).push(
+                            taskRunIndex + "/" + log.index,
+                        )
                     })
                 }
-                return currentTaskRunsLogIndicesByLevel
+                return indicesByLevel
             },
             {},
         ),
@@ -436,12 +541,10 @@
             (allLogIndices: Record<string, string[]>, [logUid, childrenLogIndicesByLevel]: [string, Record<string, string[]>]) => {
                 Object.entries(childrenLogIndicesByLevel).forEach(
                     ([lvl, logIndices]) => {
-                        allLogIndices[lvl] = [
-                            ...(allLogIndices?.[lvl] ?? []),
-                            ...logIndices.map(
-                                (logIndex) => logUid + "/" + logIndex,
-                            ),
-                        ]
+                        const bucket = (allLogIndices[lvl] ??= [])
+                        for (const logIndex of logIndices) {
+                            bucket.push(logUid + "/" + logIndex)
+                        }
                     },
                 )
                 return allLogIndices
@@ -945,13 +1048,41 @@
 
     function scrollToLog(logId: string) {
         const split = logId.split("/")
-        ;(taskRunScroller.value as any)?.scrollToItem(split[0]) // FIXME: any
-        logsScrollerRefs.value?.[split[0]]?.scrollToItem(split[1])
-        if (split.length > 2) {
-            subflowTaskRunDetailsRefs.value?.[
-                split[0] + "/" + split[1]
-            ]?.scrollToLog(split.slice(2).join("/"))
+        const taskRunIndex = Number(split[0])
+        const globalIndex = Number(split[1])
+        ;(taskRunScroller.value as any)?.scrollToItem(taskRunIndex) // FIXME: any
+
+        const taskRun = currentTaskRuns.value[taskRunIndex]
+        const uid = taskRun
+            ? attemptUid(asTaskRun(taskRun).id, selectedAttemptNumberByTaskRunId.value[asTaskRun(taskRun).id])
+            : undefined
+        const items: any[] = (uid && displayItemsByAttemptUid.value[uid]) || [] // FIXME: any
+
+        let position = -1
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i]
+            if (item.isGroup) {
+                if (item.members.some((member: any) => member.index === globalIndex)) { // FIXME: any
+                    position = i
+                    if (!isGroupExpanded(taskRunIndex, item)) {
+                        toggleGroup(taskRunIndex, item)
+                    }
+                    break
+                }
+            } else if (item.index === globalIndex) {
+                position = i
+                break
+            }
         }
+
+        nextTick(() => {
+            ;(logsScrollerRefs.value?.[taskRunIndex] as any)?.scrollToItem(position >= 0 ? position : 0) // FIXME: any
+            if (split.length > 2) {
+                subflowTaskRunDetailsRefs.value?.[
+                    taskRunIndex + "/" + globalIndex
+                ]?.scrollToLog(split.slice(2).join("/"))
+            }
+        })
     }
 
     function deduplicateLogs(logs: any[]): any[] { // FIXME: any
@@ -981,6 +1112,54 @@
 
 <style scoped lang="scss">
 
+.log-group-more {
+    display: flex;
+    align-items: center;
+    gap: var(--ks-spacing-2);
+    width: 100%;
+    padding: var(--ks-spacing-1) var(--ks-spacing-3) var(--ks-spacing-1) 4.5rem;
+    background: none;
+    border: none;
+    border-left: 2px solid transparent;
+    cursor: pointer;
+    color: var(--ks-text-dim);
+    font-family: var(--ks-font-family-sans);
+    text-align: left;
+
+    &:hover {
+        color: var(--ks-text-secondary);
+        background: var(--ks-bg-hover);
+    }
+
+    :deep(.material-design-icon) {
+        display: inline-flex;
+        align-items: center;
+        line-height: 0;
+    }
+}
+
+.log-group-chevron {
+    flex: none;
+    transition: transform 0.15s ease;
+
+    &.collapsed {
+        transform: rotate(-90deg);
+    }
+}
+
+.log-group-count {
+    flex: none;
+    background: var(--ks-bg-tag);
+    color: var(--ks-text-primary);
+    font-weight: 600;
+    border-radius: var(--ks-radius-sm);
+    padding: 1px var(--ks-spacing-2);
+}
+
+.log-group-label {
+    color: var(--ks-text-dim);
+}
+
 .log-wrapper {
   :deep(
     > .vue-recycle-scroller__item-wrapper
@@ -1035,10 +1214,6 @@
       padding: 0 0.5rem 0.5rem;
       border-bottom: 1px solid var(--ks-border-default);
     }
-
-    .line {
-      padding: 0.5rem;
-    }
   }
 
   .output {
@@ -1065,8 +1240,8 @@
       max-height: calc(100vh - 250px);
     }
 
-    .line {
-      padding: 1rem;
+    :deep(.line) {
+      padding: var(--ks-spacing-1) var(--ks-spacing-3);
 
       &.cursor {
         background-color: var(--ks-border-default);
diff --git a/ui/src/components/logs/logValueFilter.ts b/ui/src/components/logs/logValueFilter.ts
new file mode 100644
index 00000000000..419d712328c
--- /dev/null
+++ b/ui/src/components/logs/logValueFilter.ts
@@ -0,0 +1,29 @@
+export const FILTERABLE_LOG_FIELDS = {
+    namespace: {for: "IN", out: "NOT_IN"},
+    flowId: {for: "EQUALS", out: "NOT_EQUALS"},
+    taskId: {for: "EQUALS", out: "NOT_EQUALS"},
+    triggerId: {for: "EQUALS", out: "NOT_EQUALS"},
+    taskRunId: {for: "EQUALS", out: "NOT_EQUALS"},
+    attemptNumber: {for: "EQUALS", out: "NOT_EQUALS"},
+} as const
+
+export const isFilterableLogField = (field: string): boolean =>
+    Object.prototype.hasOwnProperty.call(FILTERABLE_LOG_FIELDS, field)
+
+export const buildValueFilterQuery = (
+    currentQuery: Record<string, any>,
+    field: string,
+    value: string,
+    negate: boolean,
+    pageKey = "page",
+): Record<string, any> | null => {
+    const comparators = FILTERABLE_LOG_FIELDS[field as keyof typeof FILTERABLE_LOG_FIELDS]
+    if (!comparators) return null
+
+    const comparator = negate ? comparators.out : comparators.for
+    const fieldPrefix = `filters[${field}][`
+    const cleaned = Object.fromEntries(
+        Object.entries(currentQuery).filter(([k]) => !k.startsWith(fieldPrefix)),
+    )
+    return {...cleaned, [`filters[${field}][${comparator}]`]: value, [pageKey]: "1"}
+}
diff --git a/ui/src/components/settings/BasicSettings.vue b/ui/src/components/settings/BasicSettings.vue
index e4df6b5f60b..064af5b557b 100644
--- a/ui/src/components/settings/BasicSettings.vue
+++ b/ui/src/components/settings/BasicSettings.vue
@@ -294,7 +294,7 @@
         flowDefaultTab: localStorage.getItem("flowDefaultTab") || "overview",
         autoRefreshInterval: parseInt(localStorage.getItem(storageKeys.AUTO_REFRESH_INTERVAL) ?? "") || 10,
         theme: Utils.getSelectedTheme(),
-        logsFontSize: parseInt(localStorage.getItem("logsFontSize") ?? "") || 12,
+        logsFontSize: parseInt(localStorage.getItem("logsFontSize") ?? "") || 14,
         editorFontFamily: localStorage.getItem("editorFontFamily") || "'JetBrains Mono', monospace",
         editorFontSize: parseInt(localStorage.getItem("editorFontSize") ?? "") || 12,
         autofoldTextEditor: localStorage.getItem("autofoldTextEditor") === "true",
diff --git a/ui/src/composables/useLogDisplay.ts b/ui/src/composables/useLogDisplay.ts
new file mode 100644
index 00000000000..79c1411fd07
--- /dev/null
+++ b/ui/src/composables/useLogDisplay.ts
@@ -0,0 +1,15 @@
+import {useStorage} from "@vueuse/core"
+
+export type LogDensity = "compact" | "normal" | "expanded";
+
+export const DENSITY_PADDING = {
+    compact: "2px",
+    normal: "5px",
+    expanded: "12px",
+} as const
+
+export const logsFontSize = useStorage<number>("logsFontSize", 14)
+export const logsDensity = useStorage<LogDensity>("logsDensity", "normal")
+export const logsBodyClamp = useStorage<number>("logsBodyClamp", 0)
+export const logsPrettyJson = useStorage<boolean>("logsPrettyJson", true)
+export const logsExpandByDefault = useStorage<boolean>("logsExpandByDefault", false)
diff --git a/ui/src/stores/executions.ts b/ui/src/stores/executions.ts
index 65eb986e0d5..832aa5437c6 100644
--- a/ui/src/stores/executions.ts
+++ b/ui/src/stores/executions.ts
@@ -8,6 +8,7 @@ import {useRoute} from "vue-router"
 import {CLUSTER_PREFIX} from "@kestra-io/design-system"
 import {useClient} from "@kestra-io/kestra-sdk"
 import * as ExecutionUtils from "../utils/executionUtils"
+import {executionLogsDownloadFilename} from "../utils/logs"
 import {InputType} from "../utils/inputs"
 
 export interface Check {
@@ -550,6 +551,15 @@ export const useExecutionsStore = defineStore("executions", () => {
         })
     }
 
+    const downloadLogsFile = (options: { executionId: string; params?: Record<string, any> }) => {
+        return downloadLogs(options).then((text: unknown) => {
+            Utils.downloadUrl(
+                window.URL.createObjectURL(new Blob([text as BlobPart])),
+                executionLogsDownloadFilename(options.executionId, new Date()),
+            )
+        })
+    }
+
     const deleteLogs = (options: { executionId: string; params?: Record<string, any> }) => {
         return axios.delete(`${apiUrl()}/logs/${options.executionId}`, {
             params: options.params,
@@ -877,6 +887,7 @@ export const useExecutionsStore = defineStore("executions", () => {
         loadLogs,
         loadMetrics,
         downloadLogs,
+        downloadLogsFile,
         deleteLogs,
         filePreview,
         setLabels,
diff --git a/ui/src/stores/logs.ts b/ui/src/stores/logs.ts
index 1cd9a855729..1d71e035201 100644
--- a/ui/src/stores/logs.ts
+++ b/ui/src/stores/logs.ts
@@ -2,7 +2,8 @@ import {defineStore} from "pinia"
 import {apiUrl} from "override/utils/route"
 import {ref} from "vue"
 import {useClient} from "@kestra-io/kestra-sdk"
-import {LevelKey} from "../utils/logs"
+import * as Utils from "../utils/utils"
+import {LevelKey, formatLogsAsText, logsDownloadFilename} from "../utils/logs"
 
 export interface Log{
     level: LevelKey;
@@ -40,11 +41,48 @@ export const useLogsStore = defineStore("logs", () => {
         return axios.delete(URL).then(() => (logs.value = undefined))
     }
 
+    function downloadLogs(options: any) {
+        return axios
+            .get(`${apiUrl()}/logs/search`, {params: {...options, page: 1, size: options.size ?? 10000}})
+            .then(response => {
+                const results = (response.data.results ?? []) as Log[]
+                const text = formatLogsAsText(results.slice().reverse())
+                Utils.downloadUrl(
+                    window.URL.createObjectURL(new Blob([text], {type: "text/plain"})),
+                    logsDownloadFilename(new Date()),
+                )
+            })
+    }
+
+    const LEVELS_ASC: LevelKey[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"]
+
+    async function levelCounts(baseParams: any): Promise<Record<string, number>> {
+        const cumulative = await Promise.all(LEVELS_ASC.map((logLevel) => {
+            const params: Record<string, any> = {...baseParams, page: 1, size: 1}
+            Object.keys(params)
+                .filter((key) => key.startsWith("filters[level]"))
+                .forEach((key) => delete params[key])
+            params["filters[level][GREATER_THAN_OR_EQUAL_TO]"] = logLevel
+            return axios
+                .get(`${apiUrl()}/logs/search`, {params})
+                .then((response) => (response.data.total ?? 0) as number)
+                .catch(() => 0)
+        }))
+
+        const counts: Record<string, number> = {}
+        LEVELS_ASC.forEach((logLevel, i) => {
+            counts[logLevel] = Math.max(0, (cumulative[i] ?? 0) - (cumulative[i + 1] ?? 0))
+        })
+        return counts
+    }
+
     return {
         logs,
         total,
         level,
         findLogs,
         deleteLogs,
+        downloadLogs,
+        levelCounts,
     }
 })
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index 437c013c98a..6c4a8180954 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -696,6 +696,24 @@
     "collapse all": "Collapse all",
     "expand": "Expand",
     "collapse": "Collapse",
+    "filter by this value": "Filter by this value",
+    "filter_for": "Filter for",
+    "filter_out": "Filter out",
+    "copy_value": "Copy value",
+    "open_page": "Open page",
+    "logs_copied": "Logs copied to your clipboard",
+    "expand_by_default": "Expand structured logs by default",
+    "show raw": "Show raw",
+    "similar lines": "similar lines",
+    "download_logs_description": "Choose which logs to export. Filters default to your current view.",
+    "display_settings": "Display settings",
+    "density": "Density",
+    "density_compact": "Compact",
+    "density_normal": "Normal",
+    "density_expanded": "Expanded",
+    "pretty_json": "Pretty JSON",
+    "body_line_clamp": "Limit line height",
+    "font size": "Font size",
     "log expand setting": "Log default display",
     "environment": "Environment",
     "environment name setting": "Environment name",
diff --git a/ui/src/utils/logs.ts b/ui/src/utils/logs.ts
index e1e7ecc139c..2a91a755ce7 100644
--- a/ui/src/utils/logs.ts
+++ b/ui/src/utils/logs.ts
@@ -1,8 +1,78 @@
 import {LOG_LEVELS} from "@kestra-io/design-system"
 import {cssVar} from "@kestra-io/design-system"
+import type {Log} from "../stores/logs"
 
 export type LevelKey = typeof LOG_LEVELS[number];
 
+export const STRUCTURED_PARSE_LIMIT = 100_000
+export const COLLAPSE_THRESHOLD = 3
+
+export function detectStructured(message: string | undefined | null): boolean {
+    if (!message) {
+        return false
+    }
+    const trimmed = message.trim()
+    if (trimmed.length < 2) {
+        return false
+    }
+    const first = trimmed[0]
+    const last = trimmed[trimmed.length - 1]
+    return (first === "{" && last === "}") || (first === "[" && last === "]")
+}
+
+export function parseStructured(message: string | undefined | null): unknown | undefined {
+    if (!detectStructured(message) || (message as string).length > STRUCTURED_PARSE_LIMIT) {
+        return undefined
+    }
+    try {
+        return JSON.parse((message as string).trim())
+    } catch {
+        return undefined
+    }
+}
+
+const TEMPLATE_MASKS: [RegExp, string][] = [
+    [/\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?/g, "§TS§"],
+    [/\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/gi, "§UUID§"],
+    [/\b(?:[0-9a-f]{1,4}:){2,7}[0-9a-f]{1,4}\b/gi, "§IPV6§"],
+    [/\b\d{1,3}(?:\.\d{1,3}){3}\b/g, "§IPV4§"],
+    [/\[[^\]]+\]/g, "[§]"],
+    [/\b\d{3,}\b/g, "§N§"],
+]
+
+export function normalizeLogTemplate(message: string | undefined | null): string {
+    let template = (message ?? "").trim()
+    for (const [pattern, mask] of TEMPLATE_MASKS) {
+        template = template.replace(pattern, mask)
+    }
+    return template
+}
+
+export interface DisplayGroup {
+    type: "group";
+    templateKey: string;
+    logs: Log[];
+}
+
+export function pushLog(groups: DisplayGroup[], log: Log): DisplayGroup[] {
+    const templateKey = normalizeLogTemplate(log.message)
+    const last = groups[groups.length - 1]
+    if (last && last.templateKey === templateKey) {
+        last.logs.push(log)
+    } else {
+        groups.push({type: "group", templateKey, logs: [log]})
+    }
+    return groups
+}
+
+export function groupConsecutive(logs: Log[]): DisplayGroup[] {
+    return logs.reduce<DisplayGroup[]>((groups, log) => pushLog(groups, log), [])
+}
+
+export function isCollapsible(group: DisplayGroup): boolean {
+    return group.logs.length >= COLLAPSE_THRESHOLD
+}
+
 
 export function color() {
     return Object.fromEntries(LOG_LEVELS.map(level => [level, cssVar("--log-chart-" + level.toLowerCase())]))
@@ -61,3 +131,23 @@ export function levelOrLower(level: LevelKey) {
     return levels.reverse()
 }
 
+type DownloadableLog = Pick<Log, "timestamp" | "message"> & {level?: Log["level"]}
+
+export function formatLogsAsText(logs: DownloadableLog[]): string {
+    return logs
+        .map((log) => `${(log.level ?? "").padEnd(5)} ${log.timestamp} ${(log.message ?? "").replace(/\s+$/, "")}`)
+        .join("\n")
+}
+
+export function logsDownloadFilename(date: Date): string {
+    const pad = (value: number) => String(value).padStart(2, "0")
+    const stamp = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}-${pad(date.getHours())}${pad(date.getMinutes())}${pad(date.getSeconds())}`
+    return `logs-${stamp}.log`
+}
+
+export function executionLogsDownloadFilename(executionId: string, date: Date): string {
+    const pad = (value: number) => String(value).padStart(2, "0")
+    const stamp = `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(date.getDate())}${pad(date.getHours())}${pad(date.getMinutes())}${pad(date.getSeconds())}`
+    return `kestra-execution-${stamp}-${executionId}.log`
+}
+
diff --git a/ui/tests/storybook/components/logs/LogDisplaySettings.stories.tsx b/ui/tests/storybook/components/logs/LogDisplaySettings.stories.tsx
new file mode 100644
index 00000000000..c245339adb6
--- /dev/null
+++ b/ui/tests/storybook/components/logs/LogDisplaySettings.stories.tsx
@@ -0,0 +1,25 @@
+import type {Meta, StoryObj} from "@storybook/vue3"
+import {userEvent, within, waitFor, expect} from "storybook/test"
+import LogDisplaySettings from "../../../../src/components/logs/LogDisplaySettings.vue"
+
+const meta: Meta<typeof LogDisplaySettings> = {
+    title: "Components/Logs/LogDisplaySettings",
+    component: LogDisplaySettings,
+    parameters: {layout: "centered"},
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Opened: Story = {
+    play: async ({canvasElement}: {canvasElement: HTMLElement}) => {
+        const canvas = within(canvasElement)
+        const btn = canvas.getByRole("button")
+        await userEvent.click(btn)
+        await waitFor(() =>
+            expect(canvasElement.ownerDocument.body.querySelector(".log-display-settings")).toBeTruthy()
+        )
+    },
+}
diff --git a/ui/tests/storybook/components/logs/LogLevelNavigator.stories.tsx b/ui/tests/storybook/components/logs/LogLevelNavigator.stories.tsx
new file mode 100644
index 00000000000..a456d1af782
--- /dev/null
+++ b/ui/tests/storybook/components/logs/LogLevelNavigator.stories.tsx
@@ -0,0 +1,57 @@
+import type {Meta, StoryObj} from "@storybook/vue3"
+import LogLevelNavigator from "../../../../src/components/logs/LogLevelNavigator.vue"
+
+const LEVELS = ["ERROR", "WARN", "INFO", "DEBUG", "TRACE"] as const
+
+const meta: Meta<typeof LogLevelNavigator> = {
+    title: "Components/Logs/LogLevelNavigator",
+    component: LogLevelNavigator,
+    parameters: {layout: "padded"},
+    argTypes: {
+        level: {control: "select", options: LEVELS},
+        totalCount: {control: "number"},
+        cursorIdx: {control: "number"},
+        filterMode: {control: "boolean"},
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Navigation: Story = {
+    args: {level: "ERROR", totalCount: 12, cursorIdx: 2, filterMode: false},
+}
+
+export const NoSelection: Story = {
+    args: {level: "WARN", totalCount: 7, filterMode: false},
+}
+
+export const FilterMode: Story = {
+    args: {level: "INFO", totalCount: 43, filterMode: true},
+}
+
+export const AllLevels: Story = {
+    render: () => ({
+        components: {LogLevelNavigator},
+        setup: () => () => (
+            <ks-card style="display: flex; flex-direction: column; gap: var(--ks-spacing-2); padding: 1rem; width: 280px">
+                {LEVELS.map((level, i) => (
+                    <LogLevelNavigator key={level} level={level} totalCount={i * 5 + 3} cursorIdx={i === 0 ? 1 : undefined} filterMode={false} />
+                ))}
+            </ks-card>
+        ),
+    }),
+}
+
+export const AllLevelsFilterMode: Story = {
+    render: () => ({
+        components: {LogLevelNavigator},
+        setup: () => () => (
+            <ks-card style="display: flex; flex-direction: column; gap: var(--ks-spacing-2); padding: 1rem; width: 280px">
+                {LEVELS.map((level, i) => (
+                    <LogLevelNavigator key={level} level={level} totalCount={i * 3 + 1} filterMode={true} />
+                ))}
+            </ks-card>
+        ),
+    }),
+}
diff --git a/ui/tests/storybook/components/logs/LogLine.stories.jsx b/ui/tests/storybook/components/logs/LogLine.stories.jsx
index 2ef2796f6bb..d548b680725 100644
--- a/ui/tests/storybook/components/logs/LogLine.stories.jsx
+++ b/ui/tests/storybook/components/logs/LogLine.stories.jsx
@@ -152,10 +152,10 @@ WithRouterLinkInMarkdown.args = argsDefaults("INFO", "Created new execution [[li
 // check that the proper links were created from the message
 WithRouterLinkInMarkdown.play = async ({canvasElement}) => {
     const can = within(canvasElement);
-    await waitFor(() => expect(can.getAllByRole("link")).toHaveLength(5));
+    await waitFor(() => expect(can.getAllByRole("link")).toHaveLength(2));
     const links = can.getAllByRole("link");
-    expect(links[3]).toHaveTextContent("4Q9z27FJ26FRIhdv037HtF");
-    expect(links[4]).toHaveTextContent("company.team.child");
+    expect(links[0]).toHaveTextContent("4Q9z27FJ26FRIhdv037HtF");
+    expect(links[1]).toHaveTextContent("company.team.child");
 }
 
 export const WithExcludedMetas = Template.bind({});
diff --git a/ui/tests/storybook/components/logs/LogValueActions.stories.tsx b/ui/tests/storybook/components/logs/LogValueActions.stories.tsx
new file mode 100644
index 00000000000..1e1f7be51f2
--- /dev/null
+++ b/ui/tests/storybook/components/logs/LogValueActions.stories.tsx
@@ -0,0 +1,71 @@
+import type {Meta, StoryObj} from "@storybook/vue3"
+import {userEvent, within, expect, waitFor} from "storybook/test"
+import LogValueActions from "../../../../src/components/logs/LogValueActions.vue"
+
+const meta: Meta<typeof LogValueActions> = {
+    title: "Components/Logs/LogValueActions",
+    component: LogValueActions,
+    parameters: {layout: "centered"},
+    argTypes: {
+        field: {control: "text"},
+        value: {control: "text"},
+        filterable: {control: "boolean"},
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Wrap = (args: any, slotContent: string) => ({
+    components: {LogValueActions},
+    setup: () => () => (
+        <LogValueActions {...args}>
+            <span style="font-family: var(--ks-font-family-mono); font-size: 13px">
+                {slotContent}
+            </span>
+        </LogValueActions>
+    ),
+})
+
+export const FilterableWithLink: Story = {
+    args: {
+        field: "flowId",
+        value: "daily-etl",
+        filterable: true,
+        to: {name: "flows/update", params: {namespace: "company.data", id: "daily-etl"}},
+    },
+    render: (args) => Wrap(args, "daily-etl"),
+}
+
+export const FilterableNoLink: Story = {
+    args: {
+        field: "taskId",
+        value: "extract_data",
+        filterable: true,
+    },
+    render: (args) => Wrap(args, "extract_data"),
+}
+
+export const CopyOnly: Story = {
+    args: {
+        field: "thread",
+        value: "worker-thread-4",
+        filterable: false,
+    },
+    render: (args) => Wrap(args, "worker-thread-4"),
+}
+
+export const OpensOnClick: Story = {
+    args: {
+        field: "flowId",
+        value: "my-flow",
+        filterable: true,
+    },
+    render: (args) => Wrap(args, "my-flow"),
+    play: async ({canvasElement}: {canvasElement: HTMLElement}) => {
+        const canvas = within(canvasElement)
+        const trigger = canvas.getByRole("button")
+        await userEvent.click(trigger)
+        await waitFor(() => expect(canvasElement.ownerDocument.body.querySelector(".log-value-action")).toBeTruthy())
+    },
+}
diff --git a/ui/tests/unit/components/logs/logValueFilter.spec.ts b/ui/tests/unit/components/logs/logValueFilter.spec.ts
new file mode 100644
index 00000000000..16b52c0ed70
--- /dev/null
+++ b/ui/tests/unit/components/logs/logValueFilter.spec.ts
@@ -0,0 +1,75 @@
+import {describe, test, expect} from "vitest"
+import {isFilterableLogField, buildValueFilterQuery} from "../../../../src/components/logs/logValueFilter"
+
+describe("isFilterableLogField", () => {
+    test("returns true for fields backed by a log filter key", () => {
+        expect(isFilterableLogField("flowId")).toBe(true)
+        expect(isFilterableLogField("namespace")).toBe(true)
+        expect(isFilterableLogField("taskId")).toBe(true)
+        expect(isFilterableLogField("taskRunId")).toBe(true)
+    })
+
+    test("returns false for fields with no log filter key", () => {
+        expect(isFilterableLogField("executionId")).toBe(false)
+        expect(isFilterableLogField("thread")).toBe(false)
+        expect(isFilterableLogField("message")).toBe(false)
+    })
+})
+
+describe("buildValueFilterQuery", () => {
+    test("filter-for on a text field uses EQUALS and resets the page", () => {
+        const query = buildValueFilterQuery({page: "3", size: "25"}, "flowId", "daily-etl", false)
+        expect(query).toEqual({
+            page: "1",
+            size: "25",
+            "filters[flowId][EQUALS]": "daily-etl",
+        })
+    })
+
+    test("filter-out on a text field uses NOT_EQUALS", () => {
+        const query = buildValueFilterQuery({}, "taskId", "load_warehouse", true)
+        expect(query?.["filters[taskId][NOT_EQUALS]"]).toBe("load_warehouse")
+    })
+
+    test("namespace maps to IN / NOT_IN, not EQUALS", () => {
+        expect(buildValueFilterQuery({}, "namespace", "company.data", false))
+            .toHaveProperty("filters[namespace][IN]", "company.data")
+        expect(buildValueFilterQuery({}, "namespace", "company.data", true))
+            .toHaveProperty("filters[namespace][NOT_IN]", "company.data")
+    })
+
+    test("preserves existing query params and overrides a matching filter", () => {
+        const query = buildValueFilterQuery(
+            {"filters[level][GREATER_THAN_OR_EQUAL_TO]": "TRACE", "filters[flowId][EQUALS]": "old"},
+            "flowId",
+            "new",
+            false,
+        )
+        expect(query?.["filters[level][GREATER_THAN_OR_EQUAL_TO]"]).toBe("TRACE")
+        expect(query?.["filters[flowId][EQUALS]"]).toBe("new")
+    })
+
+    test("replaces an opposing filter-out with filter-for on the same field", () => {
+        const existing = {"filters[flowId][NOT_EQUALS]": "old-flow", "size": "25"}
+        const result = buildValueFilterQuery(existing, "flowId", "new-flow", false)
+        expect(result).not.toHaveProperty("filters[flowId][NOT_EQUALS]")
+        expect(result?.["filters[flowId][EQUALS]"]).toBe("new-flow")
+        expect(result?.size).toBe("25")
+    })
+
+    test("replaces an opposing filter-for with filter-out on the same field", () => {
+        const existing = {"filters[flowId][EQUALS]": "my-flow", "size": "25"}
+        const result = buildValueFilterQuery(existing, "flowId", "my-flow", true)
+        expect(result).not.toHaveProperty("filters[flowId][EQUALS]")
+        expect(result?.["filters[flowId][NOT_EQUALS]"]).toBe("my-flow")
+    })
+
+    test("returns null for a non-filterable field", () => {
+        expect(buildValueFilterQuery({}, "executionId", "abc", false)).toBeNull()
+    })
+
+    test("respects a custom page key (embedded view)", () => {
+        const query = buildValueFilterQuery({logsPage: "4"}, "flowId", "x", false, "logsPage")
+        expect(query?.logsPage).toBe("1")
+    })
+})
diff --git a/ui/tests/unit/utils/logs.spec.ts b/ui/tests/unit/utils/logs.spec.ts
new file mode 100644
index 00000000000..7cc236e9df4
--- /dev/null
+++ b/ui/tests/unit/utils/logs.spec.ts
@@ -0,0 +1,163 @@
+import {describe, expect, it} from "vitest"
+import {
+    detectStructured,
+    parseStructured,
+    normalizeLogTemplate,
+    pushLog,
+    groupConsecutive,
+    isCollapsible,
+    STRUCTURED_PARSE_LIMIT,
+    COLLAPSE_THRESHOLD,
+    formatLogsAsText,
+    logsDownloadFilename,
+    executionLogsDownloadFilename,
+} from "../../../src/utils/logs"
+import type {Log} from "../../../src/stores/logs"
+
+function log(message: string, over: Partial<Log> = {}): Log {
+    return {
+        level: "INFO",
+        namespace: "ns",
+        flowId: "f",
+        executionId: "e",
+        thread: "t",
+        index: 0,
+        attemptNumber: 0,
+        executionKind: "flow",
+        timestamp: "2026-06-04T13:33:56.680Z",
+        message,
+        ...over,
+    }
+}
+
+describe("detectStructured", () => {
+    it("detects objects and arrays", () => {
+        expect(detectStructured("{\"a\":1}")).toBe(true)
+        expect(detectStructured("  [1,2,3]  ")).toBe(true)
+    })
+
+    it("rejects non-structured, partial, and empty input", () => {
+        expect(detectStructured("ok: deploy started")).toBe(false)
+        expect(detectStructured("{\"a\":1")).toBe(false)
+        expect(detectStructured("")).toBe(false)
+        expect(detectStructured(null)).toBe(false)
+        expect(detectStructured(undefined)).toBe(false)
+        expect(detectStructured("{")).toBe(false)
+    })
+})
+
+describe("parseStructured", () => {
+    it("parses valid JSON payloads", () => {
+        expect(parseStructured("{\"event\":\"deploy.completed\",\"n\":3}")).toEqual({event: "deploy.completed", n: 3})
+        expect(parseStructured("[1,2]")).toEqual([1, 2])
+    })
+
+    it("returns undefined for invalid, non-structured, or oversized input", () => {
+        expect(parseStructured("plain text")).toBeUndefined()
+        expect(parseStructured("{\"a\":}")).toBeUndefined()
+        const huge = "[" + "0,".repeat(STRUCTURED_PARSE_LIMIT) + "0]"
+        expect(parseStructured(huge)).toBeUndefined()
+    })
+})
+
+describe("normalizeLogTemplate", () => {
+    it("masks the bracketed host so Ansible lines share a template", () => {
+        const a = normalizeLogTemplate("ok: [web-01] => gather_facts")
+        const b = normalizeLogTemplate("ok: [web-02] => gather_facts")
+        expect(a).toBe(b)
+    })
+
+    it("masks ip, uuid, timestamp and long integers", () => {
+        expect(normalizeLogTemplate("conn from 10.0.0.1")).toBe(normalizeLogTemplate("conn from 192.168.1.254"))
+        expect(normalizeLogTemplate("id 550e8400-e29b-41d4-a716-446655440000 done"))
+            .toBe(normalizeLogTemplate("id 550e8400-e29b-41d4-a716-446655440001 done"))
+        expect(normalizeLogTemplate("took 1840 ms")).toBe(normalizeLogTemplate("took 9912 ms"))
+        expect(normalizeLogTemplate("at 2026-06-04T13:33:56.680Z")).toBe(normalizeLogTemplate("at 2026-06-04T13:34:02.551Z"))
+    })
+
+    it("keeps semantically different lines apart", () => {
+        expect(normalizeLogTemplate("ok: [web-01] => gather_facts"))
+            .not.toBe(normalizeLogTemplate("ok: [web-01] => install_packages"))
+    })
+
+    it("masks full 8-group IPv6 addresses", () => {
+        const a = normalizeLogTemplate("connected from 2001:db8:85a3:0:0:8a2e:370:7334")
+        const b = normalizeLogTemplate("connected from 2001:db8:85a3:0:0:8a2e:370:0001")
+        expect(a).toBe(b)
+    })
+
+    it("groups repeated hex-colon sequences as the same template (variable channel/node IDs)", () => {
+        const a = normalizeLogTemplate("channel dead:beef:cafe timeout")
+        const b = normalizeLogTemplate("channel a1b2:c3d4:ef56 timeout")
+        expect(a).toBe(b)
+    })
+})
+
+describe("pushLog / groupConsecutive", () => {
+    it("extends the last group for same-template adjacent lines", () => {
+        const groups = groupConsecutive([
+            log("ok: [web-01] => gather_facts"),
+            log("ok: [web-02] => gather_facts"),
+            log("ok: [web-03] => gather_facts"),
+        ])
+        expect(groups).toHaveLength(1)
+        expect(groups[0].logs).toHaveLength(3)
+    })
+
+    it("starts a new group when the template changes", () => {
+        const groups = groupConsecutive([
+            log("ok: [web-01] => gather_facts"),
+            log("Task failed on remote host"),
+            log("ok: [web-02] => gather_facts"),
+        ])
+        expect(groups).toHaveLength(3)
+    })
+
+    it("appends incrementally without re-clustering (streaming)", () => {
+        const groups: ReturnType<typeof groupConsecutive> = []
+        pushLog(groups, log("ok: [web-01] => gather_facts"))
+        pushLog(groups, log("ok: [web-02] => gather_facts"))
+        expect(groups).toHaveLength(1)
+        expect(groups[0].logs).toHaveLength(2)
+    })
+})
+
+describe("isCollapsible", () => {
+    it("collapses only runs at or above the threshold", () => {
+        const small = groupConsecutive(Array.from({length: COLLAPSE_THRESHOLD - 1}, () => log("ok: [h] => x")))
+        const big = groupConsecutive(Array.from({length: COLLAPSE_THRESHOLD}, () => log("ok: [h] => x")))
+        expect(isCollapsible(small[0])).toBe(false)
+        expect(isCollapsible(big[0])).toBe(true)
+    })
+})
+
+describe("formatLogsAsText", () => {
+    it("renders padded level, timestamp and message per line", () => {
+        const text = formatLogsAsText([
+            {level: "INFO", timestamp: "2026-01-01T00:00:00Z", message: "started"},
+            {level: "ERROR", timestamp: "2026-01-01T00:00:01Z", message: "boom"},
+        ])
+        expect(text).toBe("INFO  2026-01-01T00:00:00Z started\nERROR 2026-01-01T00:00:01Z boom")
+    })
+
+    it("trims trailing whitespace and tolerates missing fields", () => {
+        const text = formatLogsAsText([{level: undefined, timestamp: "t", message: "msg   "}])
+        expect(text).toBe("      t msg")
+    })
+
+    it("returns an empty string for no logs", () => {
+        expect(formatLogsAsText([])).toBe("")
+    })
+})
+
+describe("download filenames", () => {
+    const date = new Date(2026, 5, 4, 9, 7, 3)
+
+    it("builds a timestamped global logs filename", () => {
+        expect(logsDownloadFilename(date)).toBe("logs-2026-06-04-090703.log")
+    })
+
+    it("builds an execution logs filename with the execution id", () => {
+        expect(executionLogsDownloadFilename("exec-42", date)).toBe("kestra-execution-20260604090703-exec-42.log")
+    })
+})