diff --git a/web/src/components/ui/AppDateTimeRangePicker.vue b/web/src/components/ui/AppDateTimeRangePicker.vue
index e8ab2b198..0a027b139 100644
--- a/web/src/components/ui/AppDateTimeRangePicker.vue
+++ b/web/src/components/ui/AppDateTimeRangePicker.vue
@@ -13,20 +13,19 @@ import {
 import AppButton from './AppButton.vue'
 import AppPopover from './AppPopover.vue'
 import FormField from './FormField.vue'
-import OverflowTooltip from './OverflowTooltip.vue'
 
 const props = defineProps<{
   from: string
   to: string
   appliedFrom?: string
   appliedTo?: string
+  appliedPreset?: DateTimePreset
   label: string
   fromLabel: string
   toLabel: string
   fromError?: string
   toError?: string
   preset?: DateTimePreset
-  rollingEndOffsetMs?: number
   applyLabel?: string
   applyDisabled?: boolean
 }>()
@@ -42,10 +41,18 @@ const { t } = useI18n()
 const open = ref(false)
 const fieldID = useId()
 
-const display = computed(
+const rangeDisplay = computed(
   () =>
     `${displayValue(props.appliedFrom ?? props.from)} → ${displayValue(props.appliedTo ?? props.to)}`,
 )
+const display = computed(() => {
+  const preset = props.appliedPreset
+  if (!preset) return rangeDisplay.value
+  if (preset === 'today' || preset === 'yesterday') {
+    return t(`monitor.logs.filters.quick.${preset}`)
+  }
+  return t(`monitor.logs.filters.quickDisplay.${preset}`)
+})
 
 function changeOpen(value: boolean): void {
   open.value = value
@@ -74,7 +81,7 @@ function updateLocalInput(field: 'from' | 'to', value: string): void {
 
 function selectShortcut(preset: DateTimePreset): void {
   const now = Math.floor(Date.now() / 1000) * 1000
-  const range = resolveDateTimePreset(preset, now, props.rollingEndOffsetMs ?? 24 * 60 * 60 * 1000)
+  const range = resolveDateTimePreset(preset, now)
   emit('update:from', localDateTimeInput(range.from_ms))
   emit('update:to', localDateTimeInput(range.to_ms))
   emit('update:preset', preset)
@@ -84,6 +91,7 @@ function selectShortcut(preset: DateTimePreset): void {
 
 function apply(): void {
   if (props.applyDisabled) return
+  emit('update:preset', undefined)
   emit('apply')
   open.value = false
 }
@@ -103,14 +111,13 @@ function apply(): void {
     <template #trigger>
       <AppButton
         class="app-date-range__trigger"
+        :class="{ 'app-date-range__trigger--custom': !appliedPreset }"
         variant="secondary"
         size="compact"
-        :aria-label="label"
+        :aria-label="`${label}: ${display}`"
       >
         <CalendarClock :size="14" aria-hidden="true" />
-        <OverflowTooltip as="span" :content="display" :focusable="false">
-          {{ display }}
-        </OverflowTooltip>
+        <span>{{ display }}</span>
       </AppButton>
     </template>
 
@@ -192,12 +199,16 @@ function apply(): void {
 
 .app-date-range__trigger > span {
   overflow: hidden;
-  font-family: var(--font-mono);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.app-date-range__trigger--custom > span {
+  font-family: var(--font-mono);
+}
+
 .app-date-range-popover {
+  --date-range-control-height: var(--control-xs);
   width: min(420px, var(--reka-popover-content-available-width));
   padding: 14px;
 }
@@ -230,12 +241,14 @@ function apply(): void {
 }
 
 .app-date-range__end-controls .app-date-range__apply {
-  min-height: var(--control-xs);
+  min-height: var(--date-range-control-height);
+  height: var(--date-range-control-height);
 }
 
 .app-date-range__fields {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
   gap: 10px;
   padding-top: 12px;
 }
@@ -269,7 +282,8 @@ function apply(): void {
   display: flex;
   width: 100%;
   min-width: 0;
-  min-height: var(--control-xs);
+  min-height: var(--date-range-control-height);
+  height: var(--date-range-control-height);
   align-items: center;
   overflow: hidden;
   border: 1px solid var(--color-border-control);
@@ -278,22 +292,11 @@ function apply(): void {
   color: var(--color-text);
 }
 
-.app-date-range__input-value {
-  min-width: 0;
-  overflow: hidden;
-  padding: 0 10px;
-  font-family: var(--font-mono);
-  font-size: var(--text-meta);
-  font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .app-date-range__native-input {
   position: static !important;
   width: 100% !important;
-  height: var(--control-xs) !important;
-  min-height: var(--control-xs) !important;
+  height: 100% !important;
+  min-height: 0 !important;
   border: 0 !important;
   border-radius: inherit !important;
   background: transparent !important;
@@ -312,6 +315,10 @@ function apply(): void {
 }
 
 @media (max-width: 560px) {
+  .app-date-range-popover {
+    --date-range-control-height: var(--touch-target);
+  }
+
   .app-date-range__trigger {
     width: 100%;
     max-width: none;
diff --git a/web/src/features/access-keys/AccessKeySelect.vue b/web/src/features/access-keys/AccessKeySelect.vue
index 1814dc389..9be6f094e 100644
--- a/web/src/features/access-keys/AccessKeySelect.vue
+++ b/web/src/features/access-keys/AccessKeySelect.vue
@@ -51,13 +51,14 @@ function choose(id?: number): void {
       <AppButton
         v-bind="$attrs"
         :id="id"
+        class="access-key-select__trigger"
         variant="secondary"
         size="compact"
         :disabled="disabled"
         :aria-label="`${t('monitor.logs.filters.accessKey')}: ${selectedLabel}`"
       >
         <span class="access-key-select__label">{{ selectedLabel }}</span>
-        <ChevronDown :size="14" aria-hidden="true" />
+        <ChevronDown class="access-key-select__chevron" :size="14" aria-hidden="true" />
       </AppButton>
     </template>
     <div class="access-key-select__options">
@@ -90,12 +91,34 @@ function choose(id?: number): void {
 </template>
 
 <style scoped>
+.access-key-select__trigger.app-button {
+  width: 100%;
+  min-width: 0;
+  height: var(--control-compact);
+  justify-content: space-between;
+  gap: var(--space-2);
+  color: var(--color-text-muted);
+  padding-inline: var(--space-2);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+}
+.access-key-select__trigger.app-button:hover:not(:disabled) {
+  color: var(--color-text-muted);
+}
+.access-key-select__trigger.app-button:disabled {
+  opacity: 0.55;
+}
 .access-key-select__label {
-  max-width: 240px;
+  min-width: 0;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.access-key-select__chevron {
+  flex-shrink: 0;
+}
 .access-key-select__options {
   display: grid;
   gap: 4px;
diff --git a/web/src/features/monitor/LogsAdvancedFilterDrawer.vue b/web/src/features/monitor/LogsAdvancedFilterDrawer.vue
index fb9380274..23854f4a2 100644
--- a/web/src/features/monitor/LogsAdvancedFilterDrawer.vue
+++ b/web/src/features/monitor/LogsAdvancedFilterDrawer.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { AccessKeyOptionDto } from '@/api/control/types'
-import { enabledDataProtocols } from '@/api/control/protocols'
-import type { ChannelDto } from '@/app/resources/channels'
 import AppButton from '@/components/ui/AppButton.vue'
 import AppDrawer from '@/components/ui/AppDrawer.vue'
 import AppSelect from '@/components/ui/AppSelect.vue'
 import FormField from '@/components/ui/FormField.vue'
+import InlineFeedback from '@/components/ui/InlineFeedback.vue'
 
 import {
   requestLogCostStates,
@@ -23,10 +22,6 @@ const props = defineProps<{
   open: boolean
   draft: LogFilterDraft
   errors: LogFilterErrors
-  accessKeys: AccessKeyOptionDto[]
-  channels: ChannelDto[]
-  accessKeysFailed: boolean
-  channelsFailed: boolean
   selfScoped?: boolean
 }>()
 const emit = defineEmits<{
@@ -36,6 +31,18 @@ const emit = defineEmits<{
   reset: []
 }>()
 const { t } = useI18n()
+const commonError = computed(() => {
+  for (const [field, label] of [
+    ['group_id', 'group'],
+    ['channel_id', 'channel'],
+    ['access_key_id', 'accessKey'],
+    ['client_model', 'clientModel'],
+  ] as const) {
+    const key = props.errors[field]
+    if (key) return `${t(`monitor.logs.filters.${label}`)}: ${t(key)}`
+  }
+  return ''
+})
 
 const option = (value: string, label: string) => ({ value, label })
 const booleanOptions = () => [
@@ -43,10 +50,6 @@ const booleanOptions = () => [
   option('true', t('monitor.logs.yes')),
   option('false', t('monitor.logs.no')),
 ]
-const protocolOptions = () => [
-  option('', t('monitor.logs.filters.anyProtocol')),
-  ...enabledDataProtocols.map((value) => option(value, value)),
-]
 const usageOptions = () => [
   option('', t('monitor.logs.filters.any')),
   ...requestLogUsageStates.map((value) =>
@@ -77,20 +80,6 @@ const retryOptions = () => [
     option(value, t(`monitor.logs.filters.retryState.${value}`)),
   ),
 ]
-const accessKeyOptions = () => [
-  option('', t('monitor.logs.filters.anyAccessKey')),
-  ...props.accessKeys.map((key) => option(String(key.id), `${key.name} · #${key.id}`)),
-]
-const channelOptions = () => {
-  const options = [option('', t('monitor.logs.filters.anyChannel'))]
-  if (
-    props.draft.channel_id &&
-    !props.channels.some((channel) => channel.channel_id === props.draft.channel_id)
-  ) {
-    options.push(option(props.draft.channel_id, props.draft.channel_id))
-  }
-  return [...options, ...props.channels.map((channel) => option(channel.channel_id, channel.name))]
-}
 
 function error(field: keyof LogFilterDraft): string | undefined {
   const key = props.errors[field]
@@ -111,43 +100,14 @@ function update(field: keyof LogFilterDraft, value: string): void {
     :close-label="t('monitor.logs.filters.closeAdvanced')"
     @update:open="emit('update:open', $event)"
   >
+    <InlineFeedback v-if="commonError" tone="danger">{{ commonError }}</InlineFeedback>
     <form class="logs-advanced" @submit.prevent="emit('apply')">
       <section class="logs-advanced__section">
         <h3>{{ t('monitor.logs.filters.sections.request') }}</h3>
         <div class="logs-advanced__grid">
-          <FormField
-            v-if="!selfScoped"
-            id="logs-access-key"
-            :label="t('monitor.logs.filters.accessKey')"
-            size="compact"
-            :error="error('access_key_id')"
-          >
-            <template #default="{ describedBy, invalid }">
-              <AppSelect
-                id="logs-access-key"
-                :model-value="draft.access_key_id"
-                :label="t('monitor.logs.filters.accessKey')"
-                :options="accessKeyOptions()"
-                size="compact"
-                :disabled="accessKeysFailed"
-                :aria-describedby="describedBy"
-                :aria-invalid="invalid || undefined"
-                @update:model-value="update('access_key_id', $event)"
-              />
-            </template>
-          </FormField>
-          <FormField id="logs-protocol" :label="t('monitor.logs.filters.protocol')" size="compact">
-            <AppSelect
-              id="logs-protocol"
-              :model-value="draft.protocol"
-              :label="t('monitor.logs.filters.protocol')"
-              :options="protocolOptions()"
-              size="compact"
-              @update:model-value="update('protocol', $event)"
-            />
-          </FormField>
           <FormField
             id="logs-request-id"
+            class="logs-advanced__request-id"
             :label="t('monitor.logs.filters.requestId')"
             size="compact"
             :error="error('request_id')"
@@ -158,6 +118,7 @@ function update(field: keyof LogFilterDraft, value: string): void {
                 :value="draft.request_id"
                 class="logs-advanced__mono"
                 autocomplete="off"
+                :spellcheck="false"
                 :aria-describedby="describedBy"
                 :aria-invalid="invalid || undefined"
                 @input="update('request_id', ($event.target as HTMLInputElement).value)"
@@ -170,45 +131,33 @@ function update(field: keyof LogFilterDraft, value: string): void {
               :model-value="draft.stream"
               :label="t('monitor.logs.filters.stream')"
               :options="booleanOptions()"
-              size="compact"
+              size="sm"
               @update:model-value="update('stream', $event)"
             />
           </FormField>
-        </div>
-      </section>
-
-      <section v-if="!selfScoped" class="logs-advanced__section">
-        <h3>{{ t('monitor.logs.filters.sections.attempt') }}</h3>
-        <div class="logs-advanced__grid">
           <FormField
-            id="logs-channel"
-            :label="t('monitor.logs.filters.channel')"
+            id="logs-final-code"
+            :label="t('monitor.logs.filters.finalStatusCode')"
             size="compact"
-            :error="error('channel_id')"
+            :error="error('final_status_code')"
           >
             <template #default="{ describedBy, invalid }">
               <input
-                v-if="channelsFailed"
-                id="logs-channel"
-                :value="draft.channel_id"
-                autocomplete="off"
-                :aria-describedby="describedBy"
-                :aria-invalid="invalid || undefined"
-                @input="update('channel_id', ($event.target as HTMLInputElement).value)"
-              />
-              <AppSelect
-                v-else
-                id="logs-channel"
-                :model-value="draft.channel_id"
-                :label="t('monitor.logs.filters.channel')"
-                :options="channelOptions()"
-                size="compact"
+                id="logs-final-code"
+                :value="draft.final_status_code"
+                inputmode="numeric"
                 :aria-describedby="describedBy"
                 :aria-invalid="invalid || undefined"
-                @update:model-value="update('channel_id', $event)"
+                @input="update('final_status_code', ($event.target as HTMLInputElement).value)"
               />
             </template>
           </FormField>
+        </div>
+      </section>
+
+      <section v-if="!selfScoped" class="logs-advanced__section">
+        <h3>{{ t('monitor.logs.filters.sections.attempt') }}</h3>
+        <div class="logs-advanced__grid">
           <FormField
             id="logs-credential"
             :label="t('monitor.logs.filters.credential')"
@@ -243,6 +192,54 @@ function update(field: keyof LogFilterDraft, value: string): void {
               />
             </template>
           </FormField>
+          <FormField
+            id="logs-attempt-code"
+            :label="t('monitor.logs.filters.attemptStatusCode')"
+            size="compact"
+            :error="error('attempt_status_code')"
+          >
+            <template #default="{ describedBy, invalid }">
+              <input
+                id="logs-attempt-code"
+                :value="draft.attempt_status_code"
+                inputmode="numeric"
+                :aria-describedby="describedBy"
+                :aria-invalid="invalid || undefined"
+                @input="update('attempt_status_code', ($event.target as HTMLInputElement).value)"
+              />
+            </template>
+          </FormField>
+          <FormField
+            id="logs-failure"
+            :label="t('monitor.logs.filters.failureCategory')"
+            size="compact"
+          >
+            <AppSelect
+              id="logs-failure"
+              :model-value="draft.failure_category"
+              :label="t('monitor.logs.filters.failureCategory')"
+              :options="failureOptions()"
+              size="sm"
+              @update:model-value="update('failure_category', $event)"
+            />
+          </FormField>
+          <FormField
+            id="logs-error-code"
+            :label="t('monitor.logs.filters.errorCode')"
+            size="compact"
+            :error="error('error_code')"
+          >
+            <template #default="{ describedBy, invalid }">
+              <input
+                id="logs-error-code"
+                :value="draft.error_code"
+                autocomplete="off"
+                :aria-describedby="describedBy"
+                :aria-invalid="invalid || undefined"
+                @input="update('error_code', ($event.target as HTMLInputElement).value)"
+              />
+            </template>
+          </FormField>
           <FormField
             id="logs-retry-state"
             :label="t('monitor.logs.filters.retryStateLabel')"
@@ -253,7 +250,7 @@ function update(field: keyof LogFilterDraft, value: string): void {
               :model-value="draft.retry_state"
               :label="t('monitor.logs.filters.retryStateLabel')"
               :options="retryOptions()"
-              size="compact"
+              size="sm"
               @update:model-value="update('retry_state', $event)"
             />
           </FormField>
@@ -291,51 +288,87 @@ function update(field: keyof LogFilterDraft, value: string): void {
               />
             </template>
           </FormField>
+        </div>
+      </section>
+
+      <section class="logs-advanced__section">
+        <h3>{{ t('monitor.logs.filters.sections.timing') }}</h3>
+        <div class="logs-advanced__grid">
           <FormField
-            id="logs-attempt-code"
-            :label="t('monitor.logs.filters.attemptStatusCode')"
+            v-for="field in [
+              'first_response_min_ms',
+              'first_response_max_ms',
+              'duration_min_ms',
+              'duration_max_ms',
+            ] as const"
+            :id="`logs-${field}`"
+            :key="field"
+            :label="t(`monitor.logs.filters.rangeFields.${field}`)"
             size="compact"
-            :error="error('attempt_status_code')"
+            :error="error(field)"
           >
             <template #default="{ describedBy, invalid }">
               <input
-                id="logs-attempt-code"
-                :value="draft.attempt_status_code"
+                :id="`logs-${field}`"
+                :value="draft[field]"
                 inputmode="numeric"
                 :aria-describedby="describedBy"
                 :aria-invalid="invalid || undefined"
-                @input="update('attempt_status_code', ($event.target as HTMLInputElement).value)"
+                @input="update(field, ($event.target as HTMLInputElement).value)"
               />
             </template>
           </FormField>
+        </div>
+      </section>
+
+      <section class="logs-advanced__section">
+        <h3>{{ t('monitor.logs.filters.sections.usage') }}</h3>
+        <div class="logs-advanced__grid">
           <FormField
-            id="logs-failure"
-            :label="t('monitor.logs.filters.failureCategory')"
+            id="logs-usage-state"
+            :label="t('monitor.logs.filters.usageStateLabel')"
             size="compact"
           >
             <AppSelect
-              id="logs-failure"
-              :model-value="draft.failure_category"
-              :label="t('monitor.logs.filters.failureCategory')"
-              :options="failureOptions()"
-              size="compact"
-              @update:model-value="update('failure_category', $event)"
+              id="logs-usage-state"
+              :model-value="draft.usage_state"
+              :label="t('monitor.logs.filters.usageStateLabel')"
+              :options="usageOptions()"
+              size="sm"
+              @update:model-value="update('usage_state', $event)"
+            />
+          </FormField>
+          <FormField id="logs-cache" :label="t('monitor.logs.filters.cachePresent')" size="compact">
+            <AppSelect
+              id="logs-cache"
+              :model-value="draft.cache_present"
+              :label="t('monitor.logs.filters.cachePresent')"
+              :options="booleanOptions()"
+              size="sm"
+              @update:model-value="update('cache_present', $event)"
             />
           </FormField>
           <FormField
-            id="logs-error-code"
-            :label="t('monitor.logs.filters.errorCode')"
+            v-for="field in [
+              'input_tokens_min',
+              'input_tokens_max',
+              'output_tokens_min',
+              'output_tokens_max',
+            ] as const"
+            :id="`logs-${field}`"
+            :key="field"
+            :label="t(`monitor.logs.filters.rangeFields.${field}`)"
             size="compact"
-            :error="error('error_code')"
+            :error="error(field)"
           >
             <template #default="{ describedBy, invalid }">
               <input
-                id="logs-error-code"
-                :value="draft.error_code"
-                autocomplete="off"
+                :id="`logs-${field}`"
+                :value="draft[field]"
+                inputmode="numeric"
                 :aria-describedby="describedBy"
                 :aria-invalid="invalid || undefined"
-                @input="update('error_code', ($event.target as HTMLInputElement).value)"
+                @input="update(field, ($event.target as HTMLInputElement).value)"
               />
             </template>
           </FormField>
@@ -343,39 +376,8 @@ function update(field: keyof LogFilterDraft, value: string): void {
       </section>
 
       <section class="logs-advanced__section">
-        <h3>{{ t('monitor.logs.filters.sections.result') }}</h3>
+        <h3>{{ t('monitor.logs.filters.sections.cost') }}</h3>
         <div class="logs-advanced__grid">
-          <FormField
-            id="logs-final-code"
-            :label="t('monitor.logs.filters.finalStatusCode')"
-            size="compact"
-            :error="error('final_status_code')"
-          >
-            <template #default="{ describedBy, invalid }">
-              <input
-                id="logs-final-code"
-                :value="draft.final_status_code"
-                inputmode="numeric"
-                :aria-describedby="describedBy"
-                :aria-invalid="invalid || undefined"
-                @input="update('final_status_code', ($event.target as HTMLInputElement).value)"
-              />
-            </template>
-          </FormField>
-          <FormField
-            id="logs-usage-state"
-            :label="t('monitor.logs.filters.usageStateLabel')"
-            size="compact"
-          >
-            <AppSelect
-              id="logs-usage-state"
-              :model-value="draft.usage_state"
-              :label="t('monitor.logs.filters.usageStateLabel')"
-              :options="usageOptions()"
-              size="compact"
-              @update:model-value="update('usage_state', $event)"
-            />
-          </FormField>
           <FormField
             id="logs-cost-state"
             :label="t('monitor.logs.filters.costStateLabel')"
@@ -386,7 +388,7 @@ function update(field: keyof LogFilterDraft, value: string): void {
               :model-value="draft.cost_state"
               :label="t('monitor.logs.filters.costStateLabel')"
               :options="costOptions()"
-              size="compact"
+              size="sm"
               @update:model-value="update('cost_state', $event)"
             />
           </FormField>
@@ -400,39 +402,12 @@ function update(field: keyof LogFilterDraft, value: string): void {
               :model-value="draft.pricing_completeness"
               :label="t('monitor.logs.filters.completenessLabel')"
               :options="completenessOptions()"
-              size="compact"
+              size="sm"
               @update:model-value="update('pricing_completeness', $event)"
             />
           </FormField>
-          <FormField id="logs-cache" :label="t('monitor.logs.filters.cachePresent')" size="compact">
-            <AppSelect
-              id="logs-cache"
-              :model-value="draft.cache_present"
-              :label="t('monitor.logs.filters.cachePresent')"
-              :options="booleanOptions()"
-              size="compact"
-              @update:model-value="update('cache_present', $event)"
-            />
-          </FormField>
-        </div>
-      </section>
-
-      <section class="logs-advanced__section">
-        <h3>{{ t('monitor.logs.filters.sections.ranges') }}</h3>
-        <div class="logs-advanced__grid">
           <FormField
-            v-for="field in [
-              'first_response_min_ms',
-              'first_response_max_ms',
-              'duration_min_ms',
-              'duration_max_ms',
-              'input_tokens_min',
-              'input_tokens_max',
-              'output_tokens_min',
-              'output_tokens_max',
-              'cost_min_usd',
-              'cost_max_usd',
-            ] as const"
+            v-for="field in ['cost_min_usd', 'cost_max_usd'] as const"
             :id="`logs-${field}`"
             :key="field"
             :label="t(`monitor.logs.filters.rangeFields.${field}`)"
@@ -500,6 +475,7 @@ function update(field: keyof LogFilterDraft, value: string): void {
 
 .logs-advanced__grid {
   display: grid;
+  align-items: start;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px 10px;
 }
@@ -508,8 +484,12 @@ function update(field: keyof LogFilterDraft, value: string): void {
   width: 100%;
 }
 
+.logs-advanced__request-id {
+  grid-column: 1 / -1;
+}
+
 .logs-advanced__mono {
-  font-family: var(--font-mono) !important;
+  font-family: var(--font-mono);
 }
 
 .logs-advanced__footer-actions {
diff --git a/web/src/features/monitor/LogsFilterForm.vue b/web/src/features/monitor/LogsFilterForm.vue
index 9adad4e6a..8c9758b3d 100644
--- a/web/src/features/monitor/LogsFilterForm.vue
+++ b/web/src/features/monitor/LogsFilterForm.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { ListFilter, X } from '@lucide/vue'
+import { X } from '@lucide/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { enabledDataProtocols } from '@/api/control/protocols'
 import type { AccessKeyOptionDto, GroupOptionDto } from '@/api/control/types'
 import type { ChannelDto } from '@/app/resources/channels'
-import AppDateTimeRangePicker from '@/components/ui/AppDateTimeRangePicker.vue'
 import AppButton from '@/components/ui/AppButton.vue'
 import AppSelect from '@/components/ui/AppSelect.vue'
 import AppTextInput from '@/components/ui/AppTextInput.vue'
+import AccessKeySelect from '@/features/access-keys/AccessKeySelect.vue'
 
-import type { LogFilterDraft, LogFilterErrors } from './log-filters'
+import { requestLogStatuses, type LogFilterDraft, type LogFilterErrors } from './log-filters'
 import LogsAdvancedFilterDrawer from './LogsAdvancedFilterDrawer.vue'
 
 interface AppliedChip {
@@ -28,7 +29,6 @@ const props = defineProps<{
   channelsFailed: boolean
   accessKeysFailed: boolean
   appliedChips: AppliedChip[]
-  advancedCount: number
   advancedOpen: boolean
   selfScoped?: boolean
 }>()
@@ -48,9 +48,26 @@ const groupOptions = computed(() => [
     label: `${group.name} · #${group.id}`,
   })),
 ])
+const channelOptions = computed(() => {
+  const options = [{ value: '', label: t('monitor.logs.filters.anyChannel') }]
+  if (
+    props.draft.channel_id &&
+    !props.channels.some((channel) => channel.channel_id === props.draft.channel_id)
+  ) {
+    options.push({ value: props.draft.channel_id, label: props.draft.channel_id })
+  }
+  return [
+    ...options,
+    ...props.channels.map((channel) => ({ value: channel.channel_id, label: channel.name })),
+  ]
+})
+const protocolOptions = computed(() => [
+  { value: '', label: t('monitor.logs.filters.anyProtocol') },
+  ...enabledDataProtocols.map((value) => ({ value, label: value })),
+])
 const statusOptions = computed(() => [
   { value: '', label: t('monitor.logs.filters.anyStatus') },
-  ...(['success', 'error', 'incomplete', 'canceled'] as const).map((value) => ({
+  ...requestLogStatuses.map((value) => ({
     value,
     label: t(`monitor.logs.status.${value}`),
   })),
@@ -63,54 +80,30 @@ const firstError = computed(() => {
 function update(field: keyof LogFilterDraft, value: string): void {
   emit('updateField', field, value)
 }
-
-function submit(): void {
-  emit('apply')
-}
-
-function reset(): void {
-  emit('reset')
-}
-
-function applyAdvanced(): void {
-  emit('apply')
-}
 </script>
 
 <template>
-  <form class="logs-filter" :aria-label="t('monitor.logs.filters.label')" @submit.prevent="submit">
+  <form
+    class="logs-filter"
+    :aria-label="t('monitor.logs.filters.label')"
+    @submit.prevent="emit('apply')"
+  >
     <div v-if="appliedChips.length" class="logs-filter__chips">
       <span class="logs-filter__chips-label">{{ t('monitor.logs.filters.applied') }}</span>
-      <template v-for="chip in appliedChips" :key="chip.key">
-        <span v-if="chip.key === 'time'" class="logs-filter__chip logs-filter__chip--fixed">
-          {{ chip.label }}
-        </span>
-        <button
-          v-else
-          type="button"
-          class="logs-filter__chip"
-          :aria-label="t('monitor.logs.filters.remove', { value: chip.label })"
-          @click="emit('removeFilter', chip.key)"
-        >
-          <span>{{ chip.label }}</span>
-          <X :size="12" aria-hidden="true" />
-        </button>
-      </template>
+      <button
+        v-for="chip in appliedChips"
+        :key="chip.key"
+        type="button"
+        class="logs-filter__chip"
+        :aria-label="t('monitor.logs.filters.remove', { value: chip.label })"
+        @click="emit('removeFilter', chip.key)"
+      >
+        <span>{{ chip.label }}</span>
+        <X :size="12" aria-hidden="true" />
+      </button>
     </div>
 
     <div class="logs-filter__row">
-      <AppDateTimeRangePicker
-        :from="draft.from"
-        :to="draft.to"
-        :label="t('monitor.logs.filters.timeRange')"
-        :from-label="t('monitor.logs.filters.from')"
-        :to-label="t('monitor.logs.filters.to')"
-        :from-error="errors.from ? t(errors.from) : undefined"
-        :to-error="errors.to ? t(errors.to) : undefined"
-        @update:from="update('from', $event)"
-        @update:to="update('to', $event)"
-      />
-
       <AppSelect
         v-if="!selfScoped"
         class="logs-filter__group"
@@ -121,6 +114,65 @@ function applyAdvanced(): void {
         :disabled="groupsFailed"
         @update:model-value="update('group_id', $event)"
       />
+      <span v-if="!selfScoped" class="logs-filter__channel">
+        <AppTextInput
+          v-if="channelsFailed"
+          :model-value="draft.channel_id"
+          :label="t('monitor.logs.filters.channel')"
+          :placeholder="t('monitor.logs.filters.channel')"
+          :invalid="Boolean(errors.channel_id)"
+          :described-by="errors.channel_id ? 'logs-filter-error' : undefined"
+          size="compact"
+          @update:model-value="update('channel_id', $event)"
+        />
+        <AppSelect
+          v-else
+          :model-value="draft.channel_id"
+          :label="t('monitor.logs.filters.channel')"
+          :options="channelOptions"
+          size="compact"
+          :aria-invalid="Boolean(errors.channel_id) || undefined"
+          :aria-describedby="errors.channel_id ? 'logs-filter-error' : undefined"
+          @update:model-value="update('channel_id', $event)"
+        />
+      </span>
+      <AppSelect
+        class="logs-filter__status"
+        :model-value="draft.status"
+        :label="t('monitor.logs.filters.status')"
+        :options="statusOptions"
+        size="compact"
+        @update:model-value="update('status', $event)"
+      />
+      <span v-if="!selfScoped" class="logs-filter__access-key">
+        <AppTextInput
+          v-if="accessKeysFailed"
+          :model-value="draft.access_key_id"
+          :label="t('monitor.logs.filters.accessKey')"
+          :placeholder="t('monitor.logs.filters.accessKey')"
+          :invalid="Boolean(errors.access_key_id)"
+          :described-by="errors.access_key_id ? 'logs-filter-error' : undefined"
+          inputmode="numeric"
+          size="compact"
+          @update:model-value="update('access_key_id', $event)"
+        />
+        <AccessKeySelect
+          v-else
+          :model-value="draft.access_key_id ? Number(draft.access_key_id) : undefined"
+          :options="accessKeys"
+          :aria-invalid="Boolean(errors.access_key_id) || undefined"
+          :aria-describedby="errors.access_key_id ? 'logs-filter-error' : undefined"
+          @update:model-value="update('access_key_id', $event === undefined ? '' : String($event))"
+        />
+      </span>
+      <AppSelect
+        class="logs-filter__protocol"
+        :model-value="draft.protocol"
+        :label="t('monitor.logs.filters.protocol')"
+        :options="protocolOptions"
+        size="compact"
+        @update:model-value="update('protocol', $event)"
+      />
       <span class="logs-filter__model">
         <AppTextInput
           :model-value="draft.client_model"
@@ -134,21 +186,8 @@ function applyAdvanced(): void {
           @update:model-value="update('client_model', $event)"
         />
       </span>
-      <AppSelect
-        class="logs-filter__status"
-        :model-value="draft.status"
-        :label="t('monitor.logs.filters.status')"
-        :options="statusOptions"
-        size="compact"
-        @update:model-value="update('status', $event)"
-      />
-      <AppButton variant="secondary" size="compact" @click="emit('update:advancedOpen', true)">
-        <ListFilter :size="14" aria-hidden="true" />
-        {{ t('monitor.logs.filters.more') }}
-        <span v-if="advancedCount" class="logs-filter__count">{{ advancedCount }}</span>
-      </AppButton>
       <AppButton type="submit" size="compact">{{ t('monitor.logs.filters.apply') }}</AppButton>
-      <AppButton variant="secondary" size="compact" @click="reset">
+      <AppButton variant="secondary" size="compact" @click="emit('reset')">
         {{ t('monitor.logs.filters.reset') }}
       </AppButton>
     </div>
@@ -162,15 +201,11 @@ function applyAdvanced(): void {
     :open="advancedOpen"
     :draft="draft"
     :errors="errors"
-    :access-keys="accessKeys"
-    :channels="channels"
-    :access-keys-failed="accessKeysFailed"
-    :channels-failed="channelsFailed"
     :self-scoped="selfScoped"
     @update-field="update"
     @update:open="emit('update:advancedOpen', $event)"
-    @apply="applyAdvanced"
-    @reset="reset"
+    @apply="emit('apply')"
+    @reset="emit('reset')"
   />
 </template>
 
@@ -222,70 +257,83 @@ function applyAdvanced(): void {
   color: var(--color-text);
 }
 
-.logs-filter__chip--fixed {
-  cursor: default;
+.logs-filter__row {
+  --logs-filter-control-height: var(--control-compact);
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
-.logs-filter__chip--fixed:hover {
-  border-color: var(--color-border-control);
-  color: var(--color-text-muted);
+.logs-filter__row :deep(.app-text-input) {
+  min-height: var(--logs-filter-control-height);
+  height: var(--logs-filter-control-height);
 }
 
-.logs-filter__row {
-  padding: 10px;
+.logs-filter__row :deep(.app-text-input input) {
+  min-height: 0;
+  height: 100%;
 }
 
 .logs-filter__group {
   width: 150px;
 }
 
+.logs-filter__access-key {
+  width: 170px;
+}
+
+.logs-filter__channel {
+  width: 150px;
+}
+
+.logs-filter__protocol {
+  width: 168px;
+}
+
 .logs-filter__model {
   display: block;
   width: auto;
   min-width: 130px;
-  flex: 1 1 180px;
+  flex: 1 1 160px;
 }
 
-.logs-filter__model :deep(.app-text-input) {
+.logs-filter__channel :deep(.app-text-input),
+.logs-filter__model :deep(.app-text-input),
+.logs-filter__access-key :deep(.app-text-input),
+.logs-filter__access-key :deep(.access-key-select),
+.logs-filter__access-key :deep(.app-button) {
   width: 100%;
 }
 
+.logs-filter__access-key :deep(.access-key-select__label) {
+  min-width: 0;
+}
+
 .logs-filter__status {
   width: 108px;
 }
 
 .logs-filter__group :deep(.app-select__trigger),
-.logs-filter__status :deep(.app-select__trigger) {
+.logs-filter__status :deep(.app-select__trigger),
+.logs-filter__channel :deep(.app-select__trigger),
+.logs-filter__protocol :deep(.app-select__trigger) {
   width: 100%;
 }
 
-.logs-filter__count {
-  display: inline-flex;
-  min-width: 18px;
-  height: 18px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--color-action-soft);
-  color: var(--color-action);
-  font-size: 11px;
-}
-
 .logs-filter__error {
   margin: -2px 10px 8px;
   color: var(--color-danger);
   font-size: var(--text-label-xs);
 }
 
-@media (max-width: 1120px) {
+@media (max-width: 860px) {
   .logs-filter__row {
-    flex-wrap: wrap;
+    --logs-filter-control-height: var(--touch-target);
   }
-}
 
-@media (max-width: 860px) {
   .logs-filter__row > :deep(.app-button),
-  .logs-filter__row > :deep(.app-select__trigger) {
+  .logs-filter__row > :deep(.app-select__trigger),
+  .logs-filter__channel :deep(.app-select__trigger),
+  .logs-filter__access-key :deep(.app-button) {
     min-height: var(--touch-target);
   }
 }
@@ -296,7 +344,9 @@ function applyAdvanced(): void {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .logs-filter__row > :deep(.app-popover),
+  .logs-filter__access-key,
+  .logs-filter__channel,
+  .logs-filter__protocol,
   .logs-filter__group,
   .logs-filter__model,
   .logs-filter__status {
diff --git a/web/src/features/monitor/LogsTab.vue b/web/src/features/monitor/LogsTab.vue
index b536ad317..13732a7fa 100644
--- a/web/src/features/monitor/LogsTab.vue
+++ b/web/src/features/monitor/LogsTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { ArrowRight, CircleHelp, Info, Layers, Magnet, Search, TriangleAlert } from '@lucide/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -35,10 +35,9 @@ import { useAuthSession } from '@/features/auth/auth-session'
 import {
   applyLogFilterDraft,
   createLogFilterDraft,
-  defaultRequestLogFilters,
-  parseAppliedLogFilters,
   serializeAppliedLogFilters,
   validateLogFilterDraft,
+  type AppliedLogFilters,
   type LogFilterDraft,
   type LogFilterErrors,
 } from './log-filters'
@@ -66,6 +65,7 @@ import {
   type LogsMonitorState,
 } from './monitor-route'
 
+const props = defineProps<{ filters: AppliedLogFilters }>()
 const client = useApiClient()
 const session = useAuthSession()
 const route = useRoute()
@@ -74,13 +74,14 @@ const { locale, t } = useI18n()
 const logPageSizes = [20, 50, 100] as const
 const isAccessKey = computed(() => session.state.principalType === 'access_key')
 const appliedFilters = computed(() => {
-  const filters = parseAppliedLogFilters(route.query)
+  const filters = props.filters
   return isAccessKey.value ? scopeAccessKeyLogFilters(filters) : filters
 })
 const routeState = computed(() => parseLogsMonitorState(route.query))
 const selectedRequestID = computed(() => routeState.value.selectedRequestID)
 const advancedOpen = computed(() => routeState.value.filtersOpen)
 const draft = ref(createLogFilterDraft(appliedFilters.value))
+let draftBeforeAdvanced: LogFilterDraft | undefined
 const filterErrors = ref<LogFilterErrors>({})
 const paginationPending = ref(false)
 const pageTransitionOrigin = ref<LogsMonitorState | null>(null)
@@ -136,21 +137,18 @@ const logsRefreshing = computed(
 const currentPage = computed(() => routeState.value.cursorHistory.length + 1)
 const paginationBusy = computed(() => paginationPending.value || logsQuery.isFetching.value)
 const filterSignature = computed(() =>
-  JSON.stringify(serializeAppliedLogFilters(appliedFilters.value)),
+  JSON.stringify([
+    serializeAppliedLogFilters(appliedFilters.value),
+    appliedFilters.value.from_ms,
+    appliedFilters.value.to_ms,
+  ]),
 )
-const allAdvancedFilterKeys: readonly (keyof RequestLogFilters)[] = [
-  'channel_id',
-  'credential_id',
-  'upstream_model',
-  'access_key_id',
+const advancedFilterKeys: readonly (keyof RequestLogFilters)[] = [
   'request_id',
-  'protocol',
   'stream',
   'final_status_code',
-  'usage_state',
-  'cost_state',
-  'pricing_completeness',
-  'cache_present',
+  'credential_id',
+  'upstream_model',
   'attempt_status_code',
   'failure_category',
   'error_code',
@@ -161,48 +159,21 @@ const allAdvancedFilterKeys: readonly (keyof RequestLogFilters)[] = [
   'first_response_max_ms',
   'duration_min_ms',
   'duration_max_ms',
+  'usage_state',
+  'cache_present',
   'input_tokens_min',
   'input_tokens_max',
   'output_tokens_min',
   'output_tokens_max',
+  'cost_state',
+  'pricing_completeness',
   'cost_min_nano_usd',
   'cost_max_nano_usd',
 ]
-const accessKeyForbiddenFilterKeys = new Set<keyof RequestLogFilters>([
-  'group_id',
-  'channel_id',
-  'credential_id',
-  'upstream_model',
-  'access_key_id',
-  'attempt_status_code',
-  'failure_category',
-  'error_code',
-  'retry_state',
-  'retry_count_min',
-  'retry_count_max',
-])
-const advancedFilterKeys = computed(() =>
-  isAccessKey.value
-    ? allAdvancedFilterKeys.filter((key) => !accessKeyForbiddenFilterKeys.has(key))
-    : allAdvancedFilterKeys,
-)
-const advancedCount = computed(
-  () => advancedFilterKeys.value.filter((key) => appliedFilters.value[key] !== undefined).length,
-)
-const hasNonTimeFilters = computed(() =>
-  Object.keys(appliedFilters.value).some(
-    (key) => key !== 'from_ms' && key !== 'to_ms' && key !== 'limit',
-  ),
-)
+// appliedFilters 已按当前身份收窄，标签只展示其中有值的条件。
 const appliedChips = computed(() => {
   const filters = appliedFilters.value
   const values: Array<{ key: string; label: string }> = []
-  if (filters.from_ms !== undefined && filters.to_ms !== undefined) {
-    values.push({
-      key: 'time',
-      label: `${formatDateFilter(filters.from_ms)} → ${formatDateFilter(filters.to_ms)}`,
-    })
-  }
   if (!isAccessKey.value && filters.group_id !== undefined) {
     const group = groupsQuery.data.value?.find(({ id }) => id === filters.group_id)
     values.push({
@@ -212,6 +183,9 @@ const appliedChips = computed(() => {
       }),
     })
   }
+  if (filters.channel_id !== undefined) {
+    values.push({ key: 'channel_id', label: advancedChipLabel('channel_id', filters.channel_id) })
+  }
   if (filters.status !== undefined) {
     values.push({
       key: 'status',
@@ -220,27 +194,45 @@ const appliedChips = computed(() => {
       }),
     })
   }
-  if (filters.client_model !== undefined) {
-    values.push({
-      key: 'client_model',
-      label: advancedChipLabel('client_model', filters.client_model),
-    })
-  }
-  for (const key of advancedFilterKeys.value) {
+  for (const key of ['access_key_id', 'protocol', 'client_model', ...advancedFilterKeys] as const) {
     const value = filters[key]
     if (value === undefined) continue
     values.push({ key, label: advancedChipLabel(key, value) })
   }
   return values
 })
+const filterCount = computed(() => appliedChips.value.length)
+const hasNonTimeFilters = computed(() => filterCount.value > 0)
 
 watch(filterSignature, () => {
-  draft.value = createLogFilterDraft(appliedFilters.value)
-  filterErrors.value = {}
   paginationPending.value = false
   pageTransitionOrigin.value = null
 })
 
+// 时间和分页变化不丢弃常用搜索栏中尚未应用的条件。
+watch(
+  () => JSON.stringify(createLogFilterDraft(appliedFilters.value)),
+  () => {
+    draft.value = createLogFilterDraft(appliedFilters.value)
+    draftBeforeAdvanced = undefined
+    filterErrors.value = {}
+  },
+)
+
+watch(
+  advancedOpen,
+  (open) => {
+    if (open) {
+      draftBeforeAdvanced = { ...draft.value }
+    } else {
+      if (draftBeforeAdvanced) draft.value = draftBeforeAdvanced
+      draftBeforeAdvanced = undefined
+    }
+    filterErrors.value = {}
+  },
+  { immediate: true },
+)
+
 watch(
   () => logsQuery.dataUpdatedAt.value,
   (updatedAt, previousUpdatedAt) => {
@@ -261,14 +253,6 @@ watch(
   },
 )
 
-function formatDateFilter(value: number): string {
-  const date = new Date(value)
-  const pad = (part: number) => String(part).padStart(2, '0')
-  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(
-    date.getMinutes(),
-  )}:${pad(date.getSeconds())}`
-}
-
 function formatLogCompletedAt(value: number): string {
   const formatted = formatLocalInstantWithSeconds(value)
   return formatted === '—' ? formatted : formatted.slice(5)
@@ -336,11 +320,12 @@ function updateDraftField(field: keyof LogFilterDraft, value: string): void {
   draft.value = { ...draft.value, [field]: value }
 }
 
-async function commitFilters(filters: RequestLogFilters): Promise<void> {
+async function commitFilters(filters: AppliedLogFilters): Promise<void> {
   if (isAccessKey.value) filters = scopeAccessKeyLogFilters(filters)
   const serialized = serializeAppliedLogFilters(filters)
-  const nextSignature = JSON.stringify(serialized)
+  const nextSignature = JSON.stringify([serialized, filters.from_ms, filters.to_ms])
   draft.value = createLogFilterDraft(filters)
+  draftBeforeAdvanced = undefined
   filterErrors.value = {}
 
   if (
@@ -353,14 +338,11 @@ async function commitFilters(filters: RequestLogFilters): Promise<void> {
     return
   }
 
-  const sameWindow =
-    filters.from_ms === appliedFilters.value.from_ms && filters.to_ms === appliedFilters.value.to_ms
   await router.push(
     monitorLocation(
       logsMonitorQuery(filters, {
         filtersOpen: false,
         cursorHistory: [],
-        ...(sameWindow ? { usagePreset: routeState.value.usagePreset } : {}),
       }),
     ),
   )
@@ -388,16 +370,14 @@ async function applyFilters(): Promise<void> {
   filterErrors.value = errors
   if (Object.keys(errors).length > 0) return
 
-  const initial = createLogFilterDraft(appliedFilters.value)
-  const next = applyLogFilterDraft(draft.value)
-  if (draft.value.from === initial.from) next.from_ms = appliedFilters.value.from_ms
-  if (draft.value.to === initial.to) next.to_ms = appliedFilters.value.to_ms
-  await commitFilters({ ...next, limit: appliedFilters.value.limit ?? 20 })
+  await commitFilters(applyLogFilterDraft(draft.value, appliedFilters.value))
 }
 
 async function resetFilters(): Promise<void> {
   await commitFilters({
-    ...defaultRequestLogFilters(),
+    from_ms: appliedFilters.value.from_ms,
+    to_ms: appliedFilters.value.to_ms,
+    preset: appliedFilters.value.preset,
     limit: appliedFilters.value.limit ?? 20,
   })
 }
@@ -408,7 +388,6 @@ function setPageSize(pageSize: RequestLogPageSize): void {
 }
 
 async function removeFilter(key: string): Promise<void> {
-  if (key === 'time') return
   const filters = { ...appliedFilters.value }
   delete filters[key as keyof RequestLogFilters]
   await commitFilters(filters)
@@ -428,7 +407,6 @@ function nextPage(): void {
     monitorLocation(
       logsMonitorQuery(appliedFilters.value, {
         filtersOpen: false,
-        usagePreset: routeState.value.usagePreset,
         cursorHistory: [...routeState.value.cursorHistory, cursor],
       }),
     ),
@@ -446,7 +424,6 @@ function previousPage(): void {
     monitorLocation(
       logsMonitorQuery(appliedFilters.value, {
         filtersOpen: false,
-        usagePreset: routeState.value.usagePreset,
         cursorHistory: routeState.value.cursorHistory.slice(0, -1),
       }),
     ),
@@ -465,6 +442,25 @@ function setAdvancedOpen(open: boolean): void {
   )
 }
 
+function openFilters(): void {
+  setAdvancedOpen(true)
+}
+
+async function refresh(): Promise<void> {
+  paginationPending.value = false
+  pageTransitionOrigin.value = null
+  await router.replace(monitorLocation(logsMonitorQuery(appliedFilters.value)))
+  await nextTick()
+  await Promise.all([
+    logsQuery.refetch({ cancelRefetch: false }),
+    ...(!isAccessKey.value
+      ? [groupsQuery.refetch(), channelsQuery.refetch(), accessKeyOptionsQuery.refetch()]
+      : []),
+  ])
+}
+
+defineExpose({ openFilters, refresh, filterCount })
+
 async function setDetailOpen(requestID: string | undefined, open: boolean): Promise<void> {
   const closingID = selectedRequestID.value
   await router.push(
@@ -621,7 +617,6 @@ function costLabel(log: RequestLogItemDto): string {
       :channels-failed="channelsQuery.isError.value"
       :access-keys-failed="accessKeyOptionsQuery.isError.value"
       :applied-chips="appliedChips"
-      :advanced-count="advancedCount"
       :advanced-open="advancedOpen"
       :self-scoped="isAccessKey"
       @update:advanced-open="setAdvancedOpen"
diff --git a/web/src/features/monitor/MonitorView.vue b/web/src/features/monitor/MonitorView.vue
index 67b2975d9..e7220e4c8 100644
--- a/web/src/features/monitor/MonitorView.vue
+++ b/web/src/features/monitor/MonitorView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ListFilter, RefreshCw } from '@lucide/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -13,22 +13,27 @@ import AppButton from '@/components/ui/AppButton.vue'
 import AppDateTimeRangePicker from '@/components/ui/AppDateTimeRangePicker.vue'
 import AppTabs, { type AppTabItem } from '@/components/ui/AppTabs.vue'
 import PageHeader from '@/components/ui/PageHeader.vue'
-import { localDateTimeInput, parseLocalDateTime, type DateTimePreset } from '@/lib/time'
-import { parseAppliedLogFilters } from './log-filters'
+import {
+  localDateTimeInput,
+  parseLocalDateTime,
+  resolveDateTimePreset,
+  type DateTimePreset,
+} from '@/lib/time'
 import { useAuthSession } from '@/features/auth/auth-session'
 
 import HealthTab from './HealthTab.vue'
+import { parseAppliedLogFilters } from './log-filters'
 import {
   normalizeAccessKeyMonitorQuery,
   normalizeMonitorQuery,
   normalizeMonitorTab,
   logsMonitorQuery,
-  parseLogsMonitorState,
   parseUsageMonitorState,
   sameMonitorQuery,
+  scopeAccessKeyLogFilters,
   scopeAccessKeyUsageFilters,
+  usageMonitorQuery,
 } from './monitor-route'
-import { usageMonitorQuery } from './monitor-route'
 import { parseAppliedUsageFilters } from './usage-filters'
 
 const InspectorTab = lazySurface(() => import('./InspectorTab.vue'))
@@ -40,6 +45,11 @@ const session = useAuthSession()
 const router = useRouter()
 const { t } = useI18n()
 const healthTab = ref<InstanceType<typeof HealthTab> | null>(null)
+const logsTab = ref<{
+  openFilters: () => void
+  refresh: () => Promise<void>
+  filterCount: number
+} | null>(null)
 const usageTab = ref<{
   openFilters: () => void
   refresh: () => Promise<void>
@@ -47,6 +57,7 @@ const usageTab = ref<{
   navigationPending: boolean
 } | null>(null)
 const healthRefreshPending = ref(false)
+const logsRefreshPending = ref(false)
 const usageRefreshPending = ref(false)
 const isAccessKey = computed(() => session.state.principalType === 'access_key')
 const canonicalQuery = computed(() =>
@@ -55,6 +66,10 @@ const canonicalQuery = computed(() =>
     : normalizeMonitorQuery(route.query),
 )
 const activeTab = computed(() => normalizeMonitorTab(canonicalQuery.value.tab))
+const dataTab = computed(() => (activeTab.value === 'logs' ? logsTab.value : usageTab.value))
+const dataRefreshPending = computed(() =>
+  activeTab.value === 'logs' ? logsRefreshPending.value : usageRefreshPending.value,
+)
 const isCanonicalQuery = computed(() => sameMonitorQuery(route.query, canonicalQuery.value))
 const items = computed<AppTabItem[]>(() => {
   const shared = [
@@ -73,17 +88,50 @@ const items = computed<AppTabItem[]>(() => {
         { value: 'inspector', label: t('monitor.tabs.inspector') },
       ]
 })
+const routeUsageFilters = computed(() => parseAppliedUsageFilters(route.query))
+const routeLogFilters = computed(() => parseAppliedLogFilters(route.query))
+const routeTimeFilters = computed(() =>
+  activeTab.value === 'logs' ? routeLogFilters.value : routeUsageFilters.value,
+)
+const resolvedTimeRange = ref<{ from_ms: number; to_ms: number; preset?: DateTimePreset }>()
+
+// 快捷范围只在进入页面、切换快捷项或显式刷新时解析，筛选和翻页共用同一区间。
+watch(
+  () => {
+    if (activeTab.value !== 'logs' && activeTab.value !== 'usage') return undefined
+    const filters = routeTimeFilters.value
+    return filters.preset ?? `${filters.from_ms}:${filters.to_ms}`
+  },
+  (selection) => {
+    if (selection === undefined) {
+      resolvedTimeRange.value = undefined
+      return
+    }
+    const { from_ms, to_ms, preset } = routeTimeFilters.value
+    if (preset && resolvedTimeRange.value?.preset === preset) return
+    resolvedTimeRange.value = { from_ms, to_ms, preset }
+  },
+  { immediate: true },
+)
+
 const usageFilters = computed(() => {
-  const filters = parseAppliedUsageFilters(route.query)
+  const filters = { ...routeUsageFilters.value, ...resolvedTimeRange.value }
   return isAccessKey.value ? scopeAccessKeyUsageFilters(filters) : filters
 })
-const usageTimeDraft = ref<{ from: string; to: string; preset?: DateTimePreset }>({
+const logFilters = computed(() => {
+  const filters = { ...routeLogFilters.value, ...resolvedTimeRange.value }
+  return isAccessKey.value ? scopeAccessKeyLogFilters(filters) : filters
+})
+const timeFilters = computed(() =>
+  activeTab.value === 'logs' ? logFilters.value : usageFilters.value,
+)
+const timeDraft = ref<{ from: string; to: string; preset?: DateTimePreset }>({
   from: '',
   to: '',
 })
-const usageTimeValues = computed(() => {
-  const draft = usageTimeDraft.value
-  const current = usageFilters.value
+const timeValues = computed(() => {
+  const draft = timeDraft.value
+  const current = timeFilters.value
   // 回拨时同一本地时间对应两个时刻，未改动的端点保留原始毫秒值。
   return {
     from:
@@ -96,8 +144,8 @@ const usageTimeValues = computed(() => {
         : parseLocalDateTime(draft.to)?.getTime(),
   }
 })
-const usageTimeErrors = computed(() => {
-  const { from, to } = usageTimeValues.value
+const timeErrors = computed(() => {
+  const { from, to } = timeValues.value
   return {
     from: from === undefined ? t('monitor.logs.errors.dateTime') : undefined,
     to:
@@ -109,8 +157,13 @@ const usageTimeErrors = computed(() => {
   }
 })
 watch(
-  () => [usageFilters.value.from_ms, usageFilters.value.to_ms, usageFilters.value.preset],
-  resetUsageTimeDraft,
+  () => [
+    activeTab.value,
+    timeFilters.value.from_ms,
+    timeFilters.value.to_ms,
+    timeFilters.value.preset,
+  ],
+  resetTimeDraft,
   { immediate: true },
 )
 const usageFilterCount = computed(
@@ -121,6 +174,9 @@ const usageFilterCount = computed(
     Number(!isAccessKey.value && usageFilters.value.credential_id !== undefined) +
     Number(usageFilters.value.upstream_model !== undefined),
 )
+const filterCount = computed(() =>
+  activeTab.value === 'logs' ? (logsTab.value?.filterCount ?? 0) : usageFilterCount.value,
+)
 
 watch(
   () => route.query,
@@ -150,6 +206,7 @@ function selectTab(value: string): void {
             limit: 20,
             from_ms: logRange.from_ms,
             to_ms: logRange.to_ms,
+            preset: filters.preset,
             access_key_id: filters.access_key_id,
             group_id: filters.group_id,
             channel_id: filters.channel_id,
@@ -159,7 +216,6 @@ function selectTab(value: string): void {
           {
             filtersOpen: false,
             cursorHistory: [],
-            usagePreset: filters.preset,
           },
         ),
       ),
@@ -167,12 +223,8 @@ function selectTab(value: string): void {
     return
   }
   if (activeTab.value === 'logs' && tab === 'usage') {
-    const filters = parseAppliedLogFilters(route.query)
-    const previous = parseLogsMonitorState(route.query)
     void router.push(
-      monitorLocation(
-        usageMonitorQuery(parseAppliedUsageFilters({ ...filters, preset: previous.usagePreset })),
-      ),
+      monitorLocation(usageMonitorQuery(parseAppliedUsageFilters({ ...logFilters.value }))),
     )
     return
   }
@@ -189,36 +241,53 @@ async function refreshHealth(): Promise<void> {
   }
 }
 
-async function refreshUsage(): Promise<void> {
-  if (!usageTab.value || usageRefreshPending.value) return
-  usageRefreshPending.value = true
+async function refreshData(): Promise<void> {
+  const current = dataTab.value
+  const pending = activeTab.value === 'logs' ? logsRefreshPending : usageRefreshPending
+  if (!current || pending.value) return
+  pending.value = true
   try {
-    await usageTab.value.refresh()
+    const preset = timeFilters.value.preset
+    if (preset) {
+      const interval = resolveDateTimePreset(preset, Math.floor(Date.now() / 1000) * 1000)
+      if (interval.to_ms > interval.from_ms) {
+        resolvedTimeRange.value = { ...interval, preset }
+        await nextTick()
+      }
+    }
+    await current.refresh()
   } finally {
-    usageRefreshPending.value = false
+    pending.value = false
   }
 }
 
-function selectUsageShortcut(preset: DateTimePreset, from: number, to: number): void {
+function selectTimeShortcut(preset: DateTimePreset, from: number, to: number): void {
   if (to <= from) return
-  applyUsageTimeRange(from, to, preset)
+  applyTimeRange(from, to, preset)
 }
 
-function resetUsageTimeDraft(): void {
-  usageTimeDraft.value = {
-    from: localDateTimeInput(usageFilters.value.from_ms),
-    to: localDateTimeInput(usageFilters.value.to_ms),
-    preset: usageFilters.value.preset,
+function resetTimeDraft(): void {
+  timeDraft.value = {
+    from: localDateTimeInput(timeFilters.value.from_ms),
+    to: localDateTimeInput(timeFilters.value.to_ms),
+    preset: timeFilters.value.preset,
   }
 }
 
-function applyUsageCustomTime(): void {
-  const { from, to } = usageTimeValues.value
+function applyCustomTime(): void {
+  const { from, to } = timeValues.value
   if (from === undefined || to === undefined || to <= from) return
-  applyUsageTimeRange(from, to, usageTimeDraft.value.preset)
+  applyTimeRange(from, to)
 }
 
-function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset): void {
+function applyTimeRange(from: number, to: number, preset?: DateTimePreset): void {
+  resolvedTimeRange.value = { from_ms: from, to_ms: to, preset }
+  if (activeTab.value === 'logs') {
+    void router.push(
+      monitorLocation(logsMonitorQuery({ ...logFilters.value, from_ms: from, to_ms: to, preset })),
+    )
+    return
+  }
   const state = parseUsageMonitorState(route.query)
   void router.push(
     monitorLocation(
@@ -241,7 +310,7 @@ function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset):
       <PageHeader id="monitor-title" :title="t('monitor.title')" />
       <AppTabs
         class="monitor-tabs"
-        :class="{ 'monitor-tabs--usage': activeTab === 'usage' }"
+        :class="{ 'monitor-tabs--data': activeTab === 'usage' || activeTab === 'logs' }"
         :model-value="activeTab"
         :label="t('monitor.tabs.label')"
         :items="items"
@@ -264,41 +333,45 @@ function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset):
             />
             {{ t('monitor.health.refresh') }}
           </AppButton>
-          <div v-else-if="activeTab === 'usage'" class="monitor-usage-actions">
+          <div
+            v-else-if="activeTab === 'usage' || activeTab === 'logs'"
+            class="monitor-data-actions"
+          >
             <AppDateTimeRangePicker
-              v-model:from="usageTimeDraft.from"
-              v-model:to="usageTimeDraft.to"
-              v-model:preset="usageTimeDraft.preset"
-              :applied-from="localDateTimeInput(usageFilters.from_ms)"
-              :applied-to="localDateTimeInput(usageFilters.to_ms)"
+              :key="activeTab"
+              v-model:from="timeDraft.from"
+              v-model:to="timeDraft.to"
+              v-model:preset="timeDraft.preset"
+              :applied-from="localDateTimeInput(timeFilters.from_ms)"
+              :applied-to="localDateTimeInput(timeFilters.to_ms)"
+              :applied-preset="timeFilters.preset"
               :label="t('monitor.usage.filters.range')"
               :from-label="t('monitor.logs.filters.from')"
               :to-label="t('monitor.logs.filters.to')"
-              :from-error="usageTimeErrors.from"
-              :to-error="usageTimeErrors.to"
-              :rolling-end-offset-ms="0"
+              :from-error="timeErrors.from"
+              :to-error="timeErrors.to"
               :apply-label="t('monitor.usage.filters.apply')"
-              :apply-disabled="Boolean(usageTimeErrors.from || usageTimeErrors.to)"
-              @shortcut="selectUsageShortcut"
-              @apply="applyUsageCustomTime"
-              @open="resetUsageTimeDraft"
+              :apply-disabled="Boolean(timeErrors.from || timeErrors.to)"
+              @shortcut="selectTimeShortcut"
+              @apply="applyCustomTime"
+              @open="resetTimeDraft"
             />
-            <AppButton variant="secondary" size="compact" @click="usageTab?.openFilters()">
+            <AppButton variant="secondary" size="compact" @click="dataTab?.openFilters()">
               <ListFilter :size="14" aria-hidden="true" />
               {{ t('monitor.usage.filters.button') }}
-              <span v-if="usageFilterCount > 0" class="monitor-filter-count">
-                {{ usageFilterCount }}
+              <span v-if="filterCount > 0" class="monitor-filter-count">
+                {{ filterCount }}
               </span>
             </AppButton>
             <AppButton
               class="monitor-refresh"
               variant="secondary"
               size="compact"
-              :busy="usageRefreshPending"
-              @click="refreshUsage"
+              :busy="dataRefreshPending"
+              @click="refreshData"
             >
               <RefreshCw
-                :class="{ 'monitor-refresh-icon--spinning': usageRefreshPending }"
+                :class="{ 'monitor-refresh-icon--spinning': dataRefreshPending }"
                 :size="14"
                 aria-hidden="true"
               />
@@ -312,10 +385,10 @@ function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset):
             <HealthTab ref="healthTab" />
           </div>
           <div v-else-if="activeTab === 'logs'" class="monitor-panel">
-            <LogsTab />
+            <LogsTab ref="logsTab" :filters="logFilters" />
           </div>
           <div v-else-if="activeTab === 'usage'" class="monitor-panel">
-            <UsageTab ref="usageTab" />
+            <UsageTab ref="usageTab" :filters="usageFilters" />
           </div>
           <div v-else class="monitor-panel">
             <InspectorTab />
@@ -352,7 +425,7 @@ function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset):
   opacity: 1;
 }
 
-.monitor-usage-actions {
+.monitor-data-actions {
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -386,24 +459,24 @@ function applyUsageTimeRange(from: number, to: number, preset?: DateTimePreset):
     padding-top: var(--detail-panel-padding-top-compact);
   }
 
-  .monitor-tabs--usage :deep(.app-tabs__bar) {
+  .monitor-tabs--data :deep(.app-tabs__bar) {
     flex-wrap: wrap;
   }
 
-  .monitor-tabs--usage :deep(.app-tabs__list),
-  .monitor-tabs--usage :deep(.app-tabs__actions) {
+  .monitor-tabs--data :deep(.app-tabs__list),
+  .monitor-tabs--data :deep(.app-tabs__actions) {
     width: 100%;
   }
 }
 
 @media (max-width: 560px) {
-  .monitor-usage-actions {
+  .monitor-data-actions {
     width: 100%;
     flex-wrap: wrap;
     gap: var(--space-1);
   }
 
-  .monitor-usage-actions :deep(.app-popover) {
+  .monitor-data-actions :deep(.app-popover) {
     flex-basis: 100%;
   }
 }
diff --git a/web/src/features/monitor/UsageTab.vue b/web/src/features/monitor/UsageTab.vue
index 99e80f464..68976adab 100644
--- a/web/src/features/monitor/UsageTab.vue
+++ b/web/src/features/monitor/UsageTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { Database } from '@lucide/vue'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -35,7 +35,6 @@ import {
   formatTokens,
   formatLocalTimeRange,
 } from '@/lib/format'
-import { resolveDateTimePreset } from '@/lib/time'
 import { useAuthSession } from '@/features/auth/auth-session'
 
 import MonitorSectionHeading from './MonitorSectionHeading.vue'
@@ -44,7 +43,6 @@ import UsageDistribution from './UsageDistribution.vue'
 import {
   applyUsageFilterDraft,
   createUsageFilterDraft,
-  parseAppliedUsageFilters,
   validateUsageFilterDraft,
   type AppliedUsageFilters,
   type UsageFilterDraft,
@@ -61,6 +59,7 @@ import {
 import UsageFilterForm from './UsageFilterForm.vue'
 import UsageSummary from './UsageSummary.vue'
 
+const props = defineProps<{ filters: AppliedUsageFilters }>()
 const client = useApiClient()
 const session = useAuthSession()
 const route = useRoute()
@@ -68,7 +67,7 @@ const router = useRouter()
 const { locale, t } = useI18n()
 const isAccessKey = computed(() => session.state.principalType === 'access_key')
 const appliedFilters = computed(() => {
-  const filters = parseAppliedUsageFilters(route.query)
+  const filters = props.filters
   return isAccessKey.value ? scopeAccessKeyUsageFilters(filters) : filters
 })
 const routeState = computed(() => parseUsageMonitorState(route.query))
@@ -428,16 +427,6 @@ function setSeriesExpanded(event: Event): void {
 }
 
 async function refresh(): Promise<void> {
-  const filters = appliedFilters.value
-  if (filters.preset) {
-    const interval = resolveDateTimePreset(filters.preset, Math.floor(Date.now() / 1000) * 1000)
-    if (interval.to_ms > interval.from_ms) {
-      await router.replace(
-        monitorLocation(usageMonitorQuery({ ...filters, ...interval }, routeState.value)),
-      )
-      await nextTick()
-    }
-  }
   await Promise.all([
     usageQuery.refetch({ cancelRefetch: false }),
     ...(!isAccessKey.value
diff --git a/web/src/features/monitor/log-filters.ts b/web/src/features/monitor/log-filters.ts
index a1579413e..70539829f 100644
--- a/web/src/features/monitor/log-filters.ts
+++ b/web/src/features/monitor/log-filters.ts
@@ -11,13 +11,22 @@ import type {
   RequestLogUsageState,
 } from '@/app/resources/request-logs'
 import { requestLogFilterFields } from '@/app/resources/request-log-filters'
-import { defaultTimeRange, timeRangeMilliseconds } from '@/lib/time'
+import {
+  defaultTimeRange,
+  isDateTimePreset,
+  resolveDateTimePreset,
+  type DateTimePreset,
+} from '@/lib/time'
 
 import { isValidMonitorText, maxSignedInt64 } from './filter-validation'
 
+export interface AppliedLogFilters extends RequestLogFilters {
+  from_ms: number
+  to_ms: number
+  preset?: DateTimePreset
+}
+
 export interface LogFilterDraft {
-  from: string
-  to: string
   group_id: string
   channel_id: string
   credential_id: string
@@ -76,67 +85,25 @@ export const requestLogFailureCategories = [
 ] as const
 export const requestLogRetryStates = ['retried', 'not_retried'] as const
 
+const integerRangePairs = [
+  ['retry_count_min', 'retry_count_max'],
+  ['first_response_min_ms', 'first_response_max_ms'],
+  ['duration_min_ms', 'duration_max_ms'],
+  ['input_tokens_min', 'input_tokens_max'],
+  ['output_tokens_min', 'output_tokens_max'],
+] as const
+const integerRangeFields = integerRangePairs.flat()
+
 const requestIDPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/
 const channelIDPattern = /^[a-z][a-z0-9_]{0,99}$/u
 const canonicalNonNegativeInteger = /^(?:0|[1-9]\d*)$/
-function defaultRange(): Pick<RequestLogFilters, 'from_ms' | 'to_ms'> {
-  const now = Math.floor(Date.now() / 1000) * 1000
-  return {
-    from_ms: Math.max(0, now - timeRangeMilliseconds[defaultTimeRange]),
-    to_ms: now + 24 * 60 * 60 * 1000,
-  }
-}
 
-export function defaultRequestLogFilters(): RequestLogFilters {
-  return { ...defaultRange(), limit: 20 }
-}
-
-function emptyDraft(): LogFilterDraft {
-  return {
-    from: '',
-    to: '',
-    group_id: '',
-    channel_id: '',
-    credential_id: '',
-    status: '',
-    client_model: '',
-    upstream_model: '',
-    access_key_id: '',
-    request_id: '',
-    protocol: '',
-    stream: '',
-    final_status_code: '',
-    usage_state: '',
-    cost_state: '',
-    pricing_completeness: '',
-    cache_present: '',
-    attempt_status_code: '',
-    failure_category: '',
-    error_code: '',
-    retry_state: '',
-    retry_count_min: '',
-    retry_count_max: '',
-    first_response_min_ms: '',
-    first_response_max_ms: '',
-    duration_min_ms: '',
-    duration_max_ms: '',
-    input_tokens_min: '',
-    input_tokens_max: '',
-    output_tokens_min: '',
-    output_tokens_max: '',
-    cost_min_usd: '',
-    cost_max_usd: '',
-  }
-}
-
-function toLocalDateTime(value: number | undefined): string {
-  if (value === undefined || !Number.isSafeInteger(value) || value < 0) return ''
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return ''
-  const pad = (part: number) => String(part).padStart(2, '0')
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(
-    date.getHours(),
-  )}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+function defaultRequestLogFilters(preset: DateTimePreset = defaultTimeRange): AppliedLogFilters {
+  const now = Math.floor(Date.now() / 1000) * 1000
+  const interval = resolveDateTimePreset(preset, now)
+  return interval.to_ms > interval.from_ms
+    ? { ...interval, preset, limit: 20 }
+    : { ...resolveDateTimePreset(defaultTimeRange, now), preset: defaultTimeRange, limit: 20 }
 }
 
 function nanoUSDToUSD(value: string | undefined): string {
@@ -157,11 +124,8 @@ function usdToNanoUSD(value: string): string | undefined {
   return nanoUSD <= maxSignedInt64 ? nanoUSD.toString() : undefined
 }
 
-export function createLogFilterDraft(filters: RequestLogFilters = defaultRange()): LogFilterDraft {
+export function createLogFilterDraft(filters: RequestLogFilters): LogFilterDraft {
   return {
-    ...emptyDraft(),
-    from: toLocalDateTime(filters.from_ms),
-    to: toLocalDateTime(filters.to_ms),
     group_id: filters.group_id === undefined ? '' : String(filters.group_id),
     channel_id: filters.channel_id ?? '',
     credential_id: filters.credential_id === undefined ? '' : String(filters.credential_id),
@@ -204,10 +168,16 @@ export function createLogFilterDraft(filters: RequestLogFilters = defaultRange()
   }
 }
 
-export function applyLogFilterDraft(draft: LogFilterDraft): RequestLogFilters {
-  const filters: RequestLogFilters = {}
-  if (draft.from) filters.from_ms = new Date(draft.from).getTime()
-  if (draft.to) filters.to_ms = new Date(draft.to).getTime()
+export function applyLogFilterDraft(
+  draft: LogFilterDraft,
+  current: AppliedLogFilters,
+): AppliedLogFilters {
+  const filters: AppliedLogFilters = {
+    from_ms: current.from_ms,
+    to_ms: current.to_ms,
+    preset: current.preset,
+    limit: current.limit,
+  }
   if (draft.group_id) filters.group_id = Number(draft.group_id)
   if (draft.channel_id) filters.channel_id = draft.channel_id
   if (draft.credential_id) filters.credential_id = Number(draft.credential_id)
@@ -231,18 +201,7 @@ export function applyLogFilterDraft(draft: LogFilterDraft): RequestLogFilters {
   }
   if (draft.error_code) filters.error_code = draft.error_code
   if (draft.retry_state) filters.retry_state = draft.retry_state as RequestLogRetryState
-  for (const field of [
-    'retry_count_min',
-    'retry_count_max',
-    'first_response_min_ms',
-    'first_response_max_ms',
-    'duration_min_ms',
-    'duration_max_ms',
-    'input_tokens_min',
-    'input_tokens_max',
-    'output_tokens_min',
-    'output_tokens_max',
-  ] as const) {
+  for (const field of integerRangeFields) {
     if (draft[field]) Object.assign(filters, { [field]: Number(draft[field]) })
   }
   const costMin = usdToNanoUSD(draft.cost_min_usd)
@@ -286,16 +245,14 @@ function parseNanoUSD(raw: unknown): string | undefined {
   }
 }
 
-export function parseAppliedLogFilters(query: Record<string, unknown>): RequestLogFilters {
-  const filters: RequestLogFilters = {}
+export function parseAppliedLogFilters(query: Record<string, unknown>): AppliedLogFilters {
   const from = parseSafeInteger(query.from_ms)
   const to = parseSafeInteger(query.to_ms)
-  if (from !== undefined && to !== undefined && from < to) {
-    filters.from_ms = from
-    filters.to_ms = to
-  } else {
-    Object.assign(filters, defaultRange())
-  }
+  const preset = query.preset ?? query.usage_preset
+  const filters: AppliedLogFilters =
+    from !== undefined && to !== undefined && from < to
+      ? { from_ms: from, to_ms: to, ...(isDateTimePreset(preset) ? { preset } : {}) }
+      : defaultRequestLogFilters(isDateTimePreset(preset) ? preset : defaultTimeRange)
   const limit = parseSafeInteger(query.limit)
   filters.limit = limit === 20 || limit === 50 || limit === 100 ? (limit as RequestLogPageSize) : 20
   const ids = ['group_id', 'access_key_id', 'credential_id'] as const
@@ -303,19 +260,7 @@ export function parseAppliedLogFilters(query: Record<string, unknown>): RequestL
     const value = parseSafeInteger(query[field], 1)
     if (value !== undefined) Object.assign(filters, { [field]: value })
   }
-  const numbers = [
-    'retry_count_min',
-    'retry_count_max',
-    'first_response_min_ms',
-    'first_response_max_ms',
-    'duration_min_ms',
-    'duration_max_ms',
-    'input_tokens_min',
-    'input_tokens_max',
-    'output_tokens_min',
-    'output_tokens_max',
-  ] as const
-  for (const field of numbers) {
+  for (const field of integerRangeFields) {
     const value = parseSafeInteger(query[field])
     if (value !== undefined) Object.assign(filters, { [field]: value })
   }
@@ -356,32 +301,17 @@ export function parseAppliedLogFilters(query: Record<string, unknown>): RequestL
   return filters
 }
 
-export function serializeAppliedLogFilters(filters: RequestLogFilters): LocationQueryRaw {
+export function serializeAppliedLogFilters(filters: AppliedLogFilters): LocationQueryRaw {
   const query: LocationQueryRaw = { tab: 'logs' }
   for (const field of requestLogFilterFields) {
+    if (filters.preset && (field === 'from_ms' || field === 'to_ms')) continue
     const value = filters[field]
     if (value !== undefined) query[field] = String(value)
   }
+  if (filters.preset) query.preset = filters.preset
   return query
 }
 
-function parseLocalDateTime(value: string): Date | undefined {
-  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})$/u)
-  if (!match) return undefined
-  const values = match.slice(1).map(Number)
-  const [year, month, day, hour, minute, second] = values
-  if ([year, month, day, hour, minute, second].some((part) => part === undefined)) return undefined
-  const date = new Date(year!, month! - 1, day!, hour!, minute!, second!)
-  return date.getFullYear() === year &&
-    date.getMonth() === month! - 1 &&
-    date.getDate() === day &&
-    date.getHours() === hour &&
-    date.getMinutes() === minute &&
-    date.getSeconds() === second
-    ? date
-    : undefined
-}
-
 function validateIntegerField(
   errors: LogFilterErrors,
   draft: LogFilterDraft,
@@ -402,11 +332,6 @@ function validateIntegerField(
 
 export function validateLogFilterDraft(draft: LogFilterDraft): LogFilterErrors {
   const errors: LogFilterErrors = {}
-  const from = parseLocalDateTime(draft.from)
-  const to = parseLocalDateTime(draft.to)
-  if (!from) errors.from = 'monitor.logs.errors.dateTime'
-  if (!to) errors.to = 'monitor.logs.errors.dateTime'
-  if (from && to && from.getTime() >= to.getTime()) errors.to = 'monitor.logs.errors.range'
   for (const field of ['group_id', 'access_key_id', 'credential_id'] as const) {
     validateIntegerField(errors, draft, field)
     if (draft[field] === '0') errors[field] = 'monitor.logs.errors.positiveId'
@@ -414,18 +339,7 @@ export function validateLogFilterDraft(draft: LogFilterDraft): LogFilterErrors {
   if (draft.channel_id && !channelIDPattern.test(draft.channel_id)) {
     errors.channel_id = 'monitor.logs.errors.channelId'
   }
-  for (const field of [
-    'retry_count_min',
-    'retry_count_max',
-    'first_response_min_ms',
-    'first_response_max_ms',
-    'duration_min_ms',
-    'duration_max_ms',
-    'input_tokens_min',
-    'input_tokens_max',
-    'output_tokens_min',
-    'output_tokens_max',
-  ] as const) {
+  for (const field of integerRangeFields) {
     validateIntegerField(errors, draft, field)
   }
   for (const field of ['final_status_code', 'attempt_status_code'] as const) {
@@ -445,13 +359,7 @@ export function validateLogFilterDraft(draft: LogFilterDraft): LogFilterErrors {
   if (draft.cost_max_usd && usdToNanoUSD(draft.cost_max_usd) === undefined) {
     errors.cost_max_usd = 'monitor.logs.errors.usd'
   }
-  for (const [minimum, maximum] of [
-    ['retry_count_min', 'retry_count_max'],
-    ['first_response_min_ms', 'first_response_max_ms'],
-    ['duration_min_ms', 'duration_max_ms'],
-    ['input_tokens_min', 'input_tokens_max'],
-    ['output_tokens_min', 'output_tokens_max'],
-  ] as const) {
+  for (const [minimum, maximum] of integerRangePairs) {
     if (!errors[minimum] && !errors[maximum] && draft[minimum] && draft[maximum]) {
       if (Number(draft[minimum]) > Number(draft[maximum])) {
         errors[maximum] = 'monitor.logs.errors.numericRange'
diff --git a/web/src/features/monitor/monitor-route.ts b/web/src/features/monitor/monitor-route.ts
index bccc796a3..6786b3124 100644
--- a/web/src/features/monitor/monitor-route.ts
+++ b/web/src/features/monitor/monitor-route.ts
@@ -3,7 +3,6 @@ import type { LocationQueryRaw } from 'vue-router'
 import { enabledDataProtocols } from '@/api/control/protocols'
 import type { UsageFilters } from '@/app/resources/usage'
 import type { RequestLogFilters } from '@/app/resources/request-logs'
-import { isDateTimePreset, type DateTimePreset } from '@/lib/time'
 
 import { parseAppliedLogFilters, serializeAppliedLogFilters } from './log-filters'
 import {
@@ -30,7 +29,6 @@ export interface UsageMonitorState {
 }
 
 export interface LogsMonitorState {
-  usagePreset?: DateTimePreset
   filtersOpen: boolean
   cursorHistory: string[]
   selectedRequestID?: string
@@ -86,7 +84,7 @@ export function scopeAccessKeyUsageFilters<T extends UsageFilters>(filters: T):
   return scoped
 }
 
-export function scopeAccessKeyLogFilters(filters: RequestLogFilters): RequestLogFilters {
+export function scopeAccessKeyLogFilters<T extends RequestLogFilters>(filters: T): T {
   const scoped = { ...filters }
   for (const field of accessKeyForbiddenLogFilters) delete scoped[field]
   return scoped
@@ -124,11 +122,14 @@ export function usageMonitorQuery(
 ): LocationQueryRaw {
   const normalized: LocationQueryRaw = {
     tab: 'usage',
-    from_ms: String(filters.from_ms),
-    to_ms: String(filters.to_ms),
     metric: state.metric,
   }
-  if (filters.preset) normalized.preset = filters.preset
+  if (filters.preset) {
+    normalized.preset = filters.preset
+  } else {
+    normalized.from_ms = String(filters.from_ms)
+    normalized.to_ms = String(filters.to_ms)
+  }
   const accessKeyID = normalizeUsageGroupID(filters.access_key_id)
   const groupID = normalizeUsageGroupID(filters.group_id)
   const channelID = normalizeUsageChannelID(filters.channel_id)
@@ -208,7 +209,6 @@ export function inspectorMonitorQuery(state: InspectorMonitorState): LocationQue
 
 export function parseLogsMonitorState(query: Record<string, unknown>): LogsMonitorState {
   return {
-    usagePreset: isDateTimePreset(query.usage_preset) ? query.usage_preset : undefined,
     filtersOpen: query.panel === 'filters',
     cursorHistory: parseLogCursorHistory(query.log_cursors),
     selectedRequestID: parseSelectedRequestID(query),
@@ -220,7 +220,6 @@ export function logsMonitorQuery(
   state: LogsMonitorState = { filtersOpen: false, cursorHistory: [] },
 ): LocationQueryRaw {
   const normalized = serializeAppliedLogFilters(filters)
-  if (state.usagePreset !== undefined) normalized.usage_preset = state.usagePreset
   if (state.filtersOpen) normalized.panel = 'filters'
   const cursorHistory = serializeLogCursorHistory(state.cursorHistory)
   if (cursorHistory !== undefined) normalized.log_cursors = cursorHistory
diff --git a/web/src/features/monitor/usage-filters.ts b/web/src/features/monitor/usage-filters.ts
index 9c0323f8c..b1de8c707 100644
--- a/web/src/features/monitor/usage-filters.ts
+++ b/web/src/features/monitor/usage-filters.ts
@@ -22,14 +22,6 @@ export interface UsageFilterDraft {
 
 export type UsageFilterErrors = Partial<Record<keyof UsageFilterDraft, string>>
 
-const emptyDraft = (): UsageFilterDraft => ({
-  access_key_id: '',
-  group_id: '',
-  channel_id: '',
-  credential_id: '',
-  upstream_model: '',
-})
-
 export function defaultUsageFilters(
   preset: DateTimePreset = defaultTimeRange,
 ): AppliedUsageFilters {
@@ -88,7 +80,6 @@ export function parseAppliedUsageFilters(query: Record<string, unknown>): Applie
 
 export function createUsageFilterDraft(filters: UsageFilters): UsageFilterDraft {
   return {
-    ...emptyDraft(),
     access_key_id: filters.access_key_id === undefined ? '' : String(filters.access_key_id),
     group_id: filters.group_id === undefined ? '' : String(filters.group_id),
     channel_id: filters.channel_id ?? '',
diff --git a/web/src/i18n/locales/en-US/monitor.ts b/web/src/i18n/locales/en-US/monitor.ts
index c84f26363..af7bc939d 100644
--- a/web/src/i18n/locales/en-US/monitor.ts
+++ b/web/src/i18n/locales/en-US/monitor.ts
@@ -602,6 +602,15 @@ export default {
         from: 'From',
         to: 'To',
         quickRanges: 'Quick time ranges',
+        quickDisplay: {
+          '1h': 'Last 1 hour',
+          '6h': 'Last 6 hours',
+          '24h': 'Last 24 hours',
+          '3d': 'Last 3 days',
+          '7d': 'Last 7 days',
+          '15d': 'Last 15 days',
+          '30d': 'Last 30 days',
+        },
         quick: {
           today: 'Today',
           yesterday: 'Yesterday',
@@ -666,13 +675,15 @@ export default {
         lastRefreshed: 'Last successful refresh',
         remove: 'Remove filter {value}',
         advancedTitle: 'More filters',
-        advancedDescription: 'Filter by request, retry attempts, final result, and numeric ranges.',
+        advancedDescription:
+          'Filter by request, upstream attempts, response timing, tokens, and cost.',
         closeAdvanced: 'Close more filters',
         sections: {
-          request: 'Request',
-          attempt: 'Retry attempts',
-          result: 'Final result',
-          ranges: 'Numeric ranges',
+          request: 'Request and response',
+          attempt: 'Upstream attempts and retries',
+          timing: 'Response timing',
+          usage: 'Tokens and cache',
+          cost: 'Cost and pricing',
         },
         retryState: { retried: 'Retried', not_retried: 'Not retried' },
         usageState: {
diff --git a/web/src/i18n/locales/ja-JP/monitor.ts b/web/src/i18n/locales/ja-JP/monitor.ts
index 58ddf0602..eb76be674 100644
--- a/web/src/i18n/locales/ja-JP/monitor.ts
+++ b/web/src/i18n/locales/ja-JP/monitor.ts
@@ -601,6 +601,15 @@ export default {
         from: '開始時刻',
         to: '終了時刻',
         quickRanges: 'クイック時間範囲',
+        quickDisplay: {
+          '1h': '過去 1 時間',
+          '6h': '過去 6 時間',
+          '24h': '過去 24 時間',
+          '3d': '過去 3 日',
+          '7d': '過去 7 日',
+          '15d': '過去 15 日',
+          '30d': '過去 30 日',
+        },
         quick: {
           today: '今日',
           yesterday: '昨日',
@@ -665,13 +674,15 @@ export default {
         lastRefreshed: '最終成功更新',
         remove: 'フィルター {value} を削除',
         advancedTitle: 'その他のフィルター',
-        advancedDescription: 'リクエスト、再試行、最終結果、数値範囲で絞り込みます。',
+        advancedDescription:
+          'リクエスト、アップストリームの試行、応答時間、トークン、コストで絞り込みます。',
         closeAdvanced: 'その他のフィルターを閉じる',
         sections: {
-          request: 'リクエスト',
-          attempt: '再試行',
-          result: '最終結果',
-          ranges: '数値範囲',
+          request: 'リクエストとレスポンス',
+          attempt: 'アップストリームの試行と再試行',
+          timing: '応答時間',
+          usage: 'トークンとキャッシュ',
+          cost: 'コストと料金計算',
         },
         retryState: { retried: '再試行あり', not_retried: '再試行なし' },
         usageState: {
diff --git a/web/src/i18n/locales/zh-CN/monitor.ts b/web/src/i18n/locales/zh-CN/monitor.ts
index de4ff7cc5..2dafb840d 100644
--- a/web/src/i18n/locales/zh-CN/monitor.ts
+++ b/web/src/i18n/locales/zh-CN/monitor.ts
@@ -580,6 +580,15 @@ export default {
         from: '开始时间',
         to: '结束时间',
         quickRanges: '快捷时间范围',
+        quickDisplay: {
+          '1h': '最近 1 小时',
+          '6h': '最近 6 小时',
+          '24h': '最近 24 小时',
+          '3d': '最近 3 天',
+          '7d': '最近 7 天',
+          '15d': '最近 15 天',
+          '30d': '最近 30 天',
+        },
         quick: {
           today: '今天',
           yesterday: '昨天',
@@ -644,13 +653,14 @@ export default {
         lastRefreshed: '最近一次成功刷新',
         remove: '移除筛选条件 {value}',
         advancedTitle: '更多筛选',
-        advancedDescription: '按请求、重试过程、最终结果和数值范围精确筛选。',
+        advancedDescription: '按请求、上游尝试、耗时、Token 与成本精确筛选。',
         closeAdvanced: '关闭更多筛选',
         sections: {
-          request: '请求',
-          attempt: '重试过程',
-          result: '最终结果',
-          ranges: '数值范围',
+          request: '请求与响应',
+          attempt: '上游尝试与重试',
+          timing: '响应耗时',
+          usage: 'Token 与缓存',
+          cost: '成本与计价',
         },
         retryState: {
           retried: '发生过重试',
diff --git a/web/src/lib/time.ts b/web/src/lib/time.ts
index f5480a6bc..4d80a74f7 100644
--- a/web/src/lib/time.ts
+++ b/web/src/lib/time.ts
@@ -28,7 +28,6 @@ export function isDateTimePreset(value: unknown): value is DateTimePreset {
 export function resolveDateTimePreset(
   preset: DateTimePreset,
   now = Date.now(),
-  rollingEndOffsetMs = 0,
 ): { from_ms: number; to_ms: number } {
   if (preset === 'today' || preset === 'yesterday') {
     const midnight = new Date(now)
@@ -40,7 +39,7 @@ export function resolveDateTimePreset(
   }
   return {
     from_ms: Math.max(0, now - timeRangeMilliseconds[preset]),
-    to_ms: now + rollingEndOffsetMs,
+    to_ms: now,
   }
 }