@lievclouds/dsh-cortex 0.4.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lievclouds/dsh-cortex",
-  "version": "0.4.3",
+  "version": "0.5.4",
   "description": "Cortex workbench for DeepSeek Harness: the original Cortex UI (vulnerabilities, assets, internal operations, Memory Nebula, snapshots, retest) as a native DSH panel, plus 12 native agent tools so DSH conversations use the local Cortex SQLite without MCP.",
   "type": "module",
   "main": "index.js",
@@ -102,5 +102,9 @@
     "tailwindcss": "3.4.19",
     "three": "^0.187.0",
     "zod": "4.6.7"
+  },
+  "dependencies": {
+    "docx": "^9.15.3",
+    "pdfkit": "^0.20.2"
   }
 }

package/src/cortex-ui/dsh/api.ts

@@ -112,10 +112,13 @@ export function createCortexApi(): CortexApi {
       patch(`/vulns/${encodeURIComponent(input.id)}/status`, { status: input.status }),
     deleteVulnerability: (id) => del(`/vulns/${encodeURIComponent(id)}`),
     deleteVulnerabilities: (ids) => post('/vulns/delete-many', { ids }),
-    exportVulnerabilities: async (ids, outputDir) => {
+    exportVulnerabilities: async (ids, options) => {
+      const outputDir = options?.outputDir?.trim()
+      const format = options?.format
       const response = await post('/vulns/export', {
         ids,
-        ...(outputDir && outputDir.trim() !== '' ? { outputDir: outputDir.trim() } : {}),
+        ...(outputDir ? { outputDir } : {}),
+        ...(format ? { format } : {}),
       })
       const files = Array.isArray(response?.files) ? response.files : []
       const savedPaths = Array.isArray(response?.savedPaths) ? response.savedPaths : []

package/src/cortex-ui/renderer/components/asset/AssetDetail.tsx

@@ -397,7 +397,15 @@ export function AssetDetail({
         if (!next) onClose()
       }}
     >
-      <SheetContent data-testid="asset-sheet">
+      <SheetContent
+        data-testid="asset-sheet"
+        onInteractOutside={(event) => {
+          if (deleteOpen) event.preventDefault()
+        }}
+        onEscapeKeyDown={(event) => {
+          if (deleteOpen) event.preventDefault()
+        }}
+      >
         <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-6">
           <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
             {t('asset.page.eyebrow')}

package/src/cortex-ui/renderer/components/retest/RepeaterPanel.tsx

@@ -11,6 +11,7 @@ import {
   extractRepeaterRequests,
   resolveRepeaterUrl
 } from '@renderer/lib/retestRequest'
+import { prettyJsonBody } from '@renderer/lib/retestResponse'
 
 interface RepeaterPanelProps {
   vuln: Vulnerability | null
@@ -24,6 +25,21 @@ interface ParsedRawRequest {
   body: string
 }
 
+/**
+ * Protocol-level headers copied from a report are re-derived by the outbound
+ * request (Host from the URL, length/connection by the HTTP client). Dropping
+ * them here keeps raw requests sendable without a validation error.
+ */
+const DERIVED_HEADERS = new Set([
+  'host',
+  'content-length',
+  'connection',
+  'transfer-encoding',
+  'upgrade',
+  'keep-alive',
+  'proxy-connection'
+])
+
 /** Parse a Burp-like raw request into the typed repeater payload. */
 function parseRawRequest(text: string): ParsedRawRequest {
   const lines = text.replace(/\r\n/g, '\n').split('\n')
@@ -108,7 +124,7 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
   const [raw, setRaw] = useState('')
   const [step, setStep] = useState(0)
   const [sending, setSending] = useState(false)
-  const [bodyView, setBodyView] = useState<'raw' | 'html'>('raw')
+  const [bodyView, setBodyView] = useState<'raw' | 'pretty' | 'html'>('raw')
   const [error, setError] = useState<string | null>(null)
   const [result, setResult] = useState<RepeaterSendResult | null>(null)
 
@@ -141,6 +157,13 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
   const rawBytes = useMemo(() => new TextEncoder().encode(raw).byteLength, [raw])
   const responseIsRedirect = result !== null && isRedirectResponse(result)
   const responseIsHtml = result !== null && isHtmlResponse(result)
+  const formattedJson = useMemo(
+    () =>
+      result === null
+        ? null
+        : prettyJsonBody(result.response.body, headerValue(result.response.headers, 'content-type')),
+    [result]
+  )
   const htmlPreview = useMemo(
     () => (result === null || vuln === null ? '' : buildHtmlPreview(result.response.body, vuln.target_url)),
     [result, vuln]
@@ -157,11 +180,14 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
     setError(null)
     try {
       const parsed = parseRawRequest(raw)
+      const headers = Object.fromEntries(
+        Object.entries(parsed.headers).filter(([name]) => !DERIVED_HEADERS.has(name.toLowerCase()))
+      )
       const response = await api.sendRepeaterRequest({
         vulnId: vuln.id,
         method: parsed.method,
         url: resolveRepeaterUrl(parsed.url, vuln.target_url),
-        headers: parsed.headers,
+        headers,
         ...(parsed.body === '' ? {} : { body: parsed.body }),
         followRedirects
       })
@@ -288,7 +314,7 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
                   {t('retest.repeater.followRedirect')}
                 </Button>
               ) : null}
-              {responseIsHtml ? (
+              {formattedJson !== null || responseIsHtml ? (
                 <div className="ml-auto flex items-center gap-0.5 rounded-md border border-border bg-muted p-0.5">
                   <button
                     type="button"
@@ -302,18 +328,34 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
                   >
                     {t('retest.repeater.viewRaw')}
                   </button>
-                  <button
-                    type="button"
-                    data-testid="retest-repeater-view-html"
-                    onClick={() => setBodyView('html')}
-                    className={`rounded px-1.5 py-0.5 text-[10px] transition-colors ${
-                      bodyView === 'html'
-                        ? 'bg-background font-medium text-foreground shadow-sm'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                  >
-                    {t('retest.repeater.viewHtml')}
-                  </button>
+                  {formattedJson !== null ? (
+                    <button
+                      type="button"
+                      data-testid="retest-repeater-view-json"
+                      onClick={() => setBodyView('pretty')}
+                      className={`rounded px-1.5 py-0.5 text-[10px] transition-colors ${
+                        bodyView === 'pretty'
+                          ? 'bg-background font-medium text-foreground shadow-sm'
+                          : 'text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      {t('retest.repeater.formatJson')}
+                    </button>
+                  ) : null}
+                  {responseIsHtml ? (
+                    <button
+                      type="button"
+                      data-testid="retest-repeater-view-html"
+                      onClick={() => setBodyView('html')}
+                      className={`rounded px-1.5 py-0.5 text-[10px] transition-colors ${
+                        bodyView === 'html'
+                          ? 'bg-background font-medium text-foreground shadow-sm'
+                          : 'text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      {t('retest.repeater.viewHtml')}
+                    </button>
+                  ) : null}
                 </div>
               ) : null}
             </>
@@ -338,6 +380,13 @@ export function RepeaterPanel({ vuln, loading }: RepeaterPanelProps) {
                 srcDoc={htmlPreview}
                 className="h-[min(60vh,520px)] min-h-[320px] w-full rounded-md border border-border bg-white"
               />
+            ) : formattedJson !== null && bodyView === 'pretty' ? (
+              <pre
+                data-testid="retest-repeater-json"
+                className="whitespace-pre-wrap break-words rounded-md border border-border bg-[hsl(var(--code))] px-3 py-2.5 font-mono text-[11px] leading-relaxed text-[hsl(220_14%_92%)]"
+              >
+                {formattedJson}
+              </pre>
             ) : (
               <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-[hsl(var(--code))] px-3 py-2.5 font-mono text-[11px] leading-relaxed text-[hsl(220_14%_92%)]">
                 {result.response.body.slice(0, 200_000)}

package/src/cortex-ui/renderer/components/vuln/DirectoryPickerDialog.tsx

@@ -0,0 +1,187 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { ArrowUp, Folder, FolderCheck, Loader2 } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import { Button } from '@renderer/components/ui/button'
+import { useI18n } from '@renderer/i18n'
+import { cn } from '@renderer/lib/utils'
+import { getPortalContainer } from '../../../dsh/portal'
+
+interface DirectoryListing {
+  path: string
+  parent: string | null
+  directories: Array<{ name: string; path: string }>
+  home: string
+}
+
+interface DirectoryPickerDialogProps {
+  open: boolean
+  initialPath?: string
+  onOpenChange: (open: boolean) => void
+  onSelect: (path: string) => void
+}
+
+async function listDirectories(path: string): Promise<DirectoryListing> {
+  const query = path.trim() === '' ? '' : `?path=${encodeURIComponent(path.trim())}`
+  const response = await fetch(`/cortex-api/cortex/fs/list${query}`)
+  const payload = (await response.json().catch(() => null)) as
+    | (DirectoryListing & { error?: string })
+    | null
+  if (!response.ok) {
+    throw new Error(payload?.error || `HTTP ${response.status}`)
+  }
+  return payload as DirectoryListing
+}
+
+/**
+ * Server-backed folder picker: the browser cannot reveal absolute directory
+ * paths for a text export dialog, so the Host lists folders and this dialog
+ * returns the chosen absolute path.
+ */
+export function DirectoryPickerDialog({
+  open,
+  initialPath = '',
+  onOpenChange,
+  onSelect
+}: DirectoryPickerDialogProps) {
+  const { t } = useI18n()
+  const [current, setCurrent] = useState('')
+  const [parent, setParent] = useState<string | null>(null)
+  const [directories, setDirectories] = useState<Array<{ name: string; path: string }>>([])
+  const [manual, setManual] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(
+    async (target: string) => {
+      setLoading(true)
+      setError(null)
+      try {
+        const listing = await listDirectories(target)
+        setCurrent(listing.path)
+        setParent(listing.parent)
+        setDirectories(listing.directories)
+        setManual(listing.path)
+      } catch (cause) {
+        setError(cause instanceof Error ? cause.message : String(cause))
+      } finally {
+        setLoading(false)
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    if (!open) return
+    void load(initialPath)
+    // Only reload when the dialog opens; user navigation is handled locally.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} modal={false}>
+      <DialogPrimitive.Portal container={getPortalContainer()}>
+        <DialogPrimitive.Overlay className="sheet-overlay fixed inset-0 z-[80] bg-[hsl(224_18%_10%/0.3)]" />
+        <DialogPrimitive.Content
+          data-testid="directory-picker-dialog"
+          className="fixed left-1/2 top-1/2 z-[80] flex w-[min(620px,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border border-border bg-background p-5 shadow-panel focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          <DialogPrimitive.Title className="text-[16px] font-medium tracking-tight text-foreground">
+            {t('vuln.dirPicker.title')}
+          </DialogPrimitive.Title>
+
+          <div className="mt-3 flex items-center gap-1.5">
+            <input
+              data-testid="directory-picker-path"
+              value={manual}
+              spellCheck={false}
+              onChange={(event) => setManual(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') void load(manual)
+              }}
+              className="h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2.5 font-mono text-[11.5px] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <Button
+              variant="outline"
+              size="xs"
+              onClick={() => void load(manual)}
+              disabled={loading}
+              className="h-8 gap-1 px-2.5"
+            >
+              {t('vuln.dirPicker.go')}
+            </Button>
+            <Button
+              variant="outline"
+              size="xs"
+              data-testid="directory-picker-up"
+              onClick={() => {
+                if (parent !== null) void load(parent)
+              }}
+              disabled={loading || parent === null}
+              className="h-8 gap-1 px-2.5"
+            >
+              <ArrowUp aria-hidden="true" className="h-3 w-3" />
+              {t('vuln.dirPicker.up')}
+            </Button>
+          </div>
+
+          <div className="mt-3 max-h-[320px] min-h-[180px] overflow-y-auto rounded-lg border border-border">
+            {loading ? (
+              <p className="flex h-[180px] items-center justify-center gap-2 text-[11.5px] text-muted-foreground">
+                <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
+                {t('vuln.dirPicker.loading')}
+              </p>
+            ) : error !== null ? (
+              <p className="p-3 text-[11.5px] text-red-700">
+                {t('vuln.dirPicker.error', { error })}
+              </p>
+            ) : directories.length === 0 ? (
+              <p className="flex h-[180px] items-center justify-center text-[11.5px] text-muted-foreground">
+                {t('vuln.dirPicker.empty')}
+              </p>
+            ) : (
+              <ul className="divide-y divide-border">
+                {directories.map((entry) => (
+                  <li key={entry.path}>
+                    <button
+                      type="button"
+                      data-testid="directory-picker-entry"
+                      onClick={() => void load(entry.path)}
+                      className={cn(
+                        'flex w-full items-center gap-2 px-3 py-2 text-left transition-colors',
+                        'hover:bg-sidebar focus-visible:bg-accent-soft focus-visible:outline-none'
+                      )}
+                    >
+                      <Folder aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-accent" />
+                      <span className="truncate text-[12px] text-foreground">{entry.name}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="mt-4 flex items-center justify-between gap-2">
+            <span className="min-w-0 truncate font-mono text-[10.5px] text-muted-foreground" title={current}>
+              {current}
+            </span>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button
+                size="sm"
+                data-testid="directory-picker-select"
+                disabled={loading || error !== null || current === ''}
+                onClick={() => onSelect(current)}
+                className="gap-1.5"
+              >
+                <FolderCheck aria-hidden="true" className="h-3.5 w-3.5" />
+                {t('vuln.dirPicker.select')}
+              </Button>
+            </div>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}

package/src/cortex-ui/renderer/components/vuln/ExportReportDialog.tsx

@@ -1,11 +1,15 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { Download, FolderOpen, Loader2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import type { ExportReportFormat } from '@shared/types'
 import { Button } from '@renderer/components/ui/button'
 import { useI18n } from '@renderer/i18n'
+import { cn } from '@renderer/lib/utils'
 import { getPortalContainer } from '../../../dsh/portal'
+import { DirectoryPickerDialog } from './DirectoryPickerDialog'
 
 const STORAGE_KEY = 'cortex.export.dir'
+const FORMAT_KEY = 'cortex.export.format'
 
 function isAbsoluteLike(value: string): boolean {
   const trimmed = value.trim()
@@ -21,7 +25,7 @@ interface ExportReportDialogProps {
   count: number
   pending: boolean
   onOpenChange: (open: boolean) => void
-  onConfirm: (outputDir: string | undefined) => void
+  onConfirm: (outputDir: string | undefined, format: ExportReportFormat) => void
 }
 
 /**
@@ -38,13 +42,49 @@ export function ExportReportDialog({
 }: ExportReportDialogProps) {
   const { t } = useI18n()
   const [directory, setDirectory] = useState('')
+  const [format, setFormat] = useState<ExportReportFormat>('md')
   const [invalid, setInvalid] = useState(false)
+  const [pickerOpen, setPickerOpen] = useState(false)
 
   useEffect(() => {
     if (!open) return
-    const stored = window.localStorage.getItem(STORAGE_KEY) ?? ''
+    let alive = true
+    let stored = ''
+    try {
+      stored = window.localStorage.getItem(STORAGE_KEY) ?? ''
+    } catch {
+      stored = ''
+    }
+    const storedFormat = (() => {
+      try {
+        return window.localStorage.getItem(FORMAT_KEY)
+      } catch {
+        return null
+      }
+    })()
     setDirectory(stored)
+    setFormat(storedFormat === 'docx' || storedFormat === 'pdf' ? storedFormat : 'md')
     setInvalid(false)
+    // The Host remembers the last successful export directory; prefer it over
+    // any stale per-browser value so a fresh WebView still defaults correctly.
+    void fetch('/cortex-api/cortex/export/settings')
+      .then((response) => (response.ok ? response.json() : null))
+      .then((payload) => {
+        if (!alive) return
+        const hostDir = payload && typeof payload.outputDir === 'string' ? payload.outputDir.trim() : ''
+        if (hostDir.length > 0) {
+          setDirectory(hostDir)
+          try {
+            window.localStorage.setItem(STORAGE_KEY, hostDir)
+          } catch {
+            /* ignore */
+          }
+        }
+      })
+      .catch(() => {})
+    return () => {
+      alive = false
+    }
   }, [open])
 
   const confirm = (): void => {
@@ -53,68 +93,142 @@ export function ExportReportDialog({
       setInvalid(true)
       return
     }
-    if (trimmed !== '') window.localStorage.setItem(STORAGE_KEY, trimmed)
-    else window.localStorage.removeItem(STORAGE_KEY)
-    onConfirm(trimmed === '' ? undefined : trimmed)
+    try {
+      if (trimmed !== '') window.localStorage.setItem(STORAGE_KEY, trimmed)
+      else window.localStorage.removeItem(STORAGE_KEY)
+      window.localStorage.setItem(FORMAT_KEY, format)
+    } catch {
+      /* localStorage may be unavailable; the Host remembers the directory */
+    }
+    onConfirm(trimmed === '' ? undefined : trimmed, format)
   }
 
-  return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} modal={false}>
-      <DialogPrimitive.Portal container={getPortalContainer()}>
-        <DialogPrimitive.Overlay className="sheet-overlay fixed inset-0 z-[70] bg-[hsl(224_18%_10%/0.3)]" />
-        <DialogPrimitive.Content
-          data-testid="export-report-dialog"
-          className="fixed left-1/2 top-1/2 z-[70] w-[min(480px,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-background p-5 shadow-panel focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-        >
-          <DialogPrimitive.Title className="text-[16px] font-medium tracking-tight text-foreground">
-            {t('vuln.export.title')}
-          </DialogPrimitive.Title>
-          <DialogPrimitive.Description className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
-            {t('vuln.export.description', { count })}
-          </DialogPrimitive.Description>
+  const formats: Array<{ value: ExportReportFormat; label: string; testId: string }> = [
+    { value: 'md', label: t('vuln.export.formatMd'), testId: 'export-format-md' },
+    { value: 'docx', label: t('vuln.export.formatDocx'), testId: 'export-format-docx' },
+    { value: 'pdf', label: t('vuln.export.formatPdf'), testId: 'export-format-pdf' },
+  ]
 
-          <label
-            htmlFor="export-output-dir"
-            className="mt-4 flex items-center gap-1.5 text-[11.5px] font-medium text-foreground"
-          >
-            <FolderOpen aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground" />
-            {t('vuln.export.dirLabel')}
-          </label>
-          <input
-            id="export-output-dir"
-            data-testid="export-output-dir"
-            value={directory}
-            spellCheck={false}
-            disabled={pending}
-            placeholder={t('vuln.export.dirPlaceholder')}
-            onChange={(event) => {
-              setDirectory(event.target.value)
-              if (invalid) setInvalid(false)
+  return (
+    <>
+      <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} modal={false}>
+        <DialogPrimitive.Portal container={getPortalContainer()}>
+          <DialogPrimitive.Overlay className="sheet-overlay fixed inset-0 z-[70] bg-[hsl(224_18%_10%/0.3)]" />
+          <DialogPrimitive.Content
+            data-testid="export-report-dialog"
+            onInteractOutside={(event) => {
+              // The directory picker is a sibling Radix layer; keep this dialog
+              // open while the user browses folders.
+              if (pickerOpen) event.preventDefault()
             }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') confirm()
+            onEscapeKeyDown={(event) => {
+              if (pickerOpen) event.preventDefault()
             }}
-            className="mt-1.5 h-9 w-full rounded-md border border-border bg-background px-2.5 font-mono text-[11.5px] text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-          <p className={invalid ? 'mt-1.5 text-[10.5px] text-red-700' : 'mt-1.5 text-[10.5px] text-muted-foreground'}>
-            {invalid ? t('vuln.export.dirInvalid') : t('vuln.export.dirHint')}
-          </p>
+            className="fixed left-1/2 top-1/2 z-[70] w-[min(480px,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-background p-5 shadow-panel focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          >
+            <DialogPrimitive.Title className="text-[16px] font-medium tracking-tight text-foreground">
+              {t('vuln.export.title')}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Description className="sr-only">
+              {t('vuln.export.title')}
+            </DialogPrimitive.Description>
+
+            <div className="mt-4">
+              <p className="text-[11.5px] font-medium text-foreground">{t('vuln.export.formatLabel')}</p>
+              <div
+                role="radiogroup"
+                aria-label={t('vuln.export.formatLabel')}
+                className="mt-1.5 inline-flex rounded-md border border-border bg-muted p-0.5"
+              >
+                {formats.map((item) => (
+                  <button
+                    key={item.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={format === item.value}
+                    data-testid={item.testId}
+                    disabled={pending}
+                    onClick={() => setFormat(item.value)}
+                    className={cn(
+                      'h-7 rounded px-2.5 text-[11.5px] transition-colors',
+                      format === item.value
+                        ? 'bg-background font-medium text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <label
+              htmlFor="export-output-dir"
+              className="mt-4 flex items-center gap-1.5 text-[11.5px] font-medium text-foreground"
+            >
+              <FolderOpen aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground" />
+              {t('vuln.export.dirLabel')}
+            </label>
+            <div className="mt-1.5 flex items-center gap-1.5">
+              <input
+                id="export-output-dir"
+                data-testid="export-output-dir"
+                value={directory}
+                spellCheck={false}
+                disabled={pending}
+                placeholder={t('vuln.export.dirPlaceholder')}
+                onChange={(event) => {
+                  setDirectory(event.target.value)
+                  if (invalid) setInvalid(false)
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') confirm()
+                }}
+                className="h-9 min-w-0 flex-1 rounded-md border border-border bg-background px-2.5 font-mono text-[11.5px] text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                data-testid="export-browse-dir"
+                disabled={pending}
+                onClick={() => setPickerOpen(true)}
+                className="h-9 shrink-0 gap-1.5"
+              >
+                <FolderOpen aria-hidden="true" className="h-3.5 w-3.5" />
+                {t('vuln.export.browse')}
+              </Button>
+            </div>
+            {invalid ? (
+              <p className="mt-1.5 text-[10.5px] text-red-700">{t('vuln.export.dirInvalid')}</p>
+            ) : null}
+
+            <div className="mt-5 flex items-center justify-end gap-2">
+              <Button variant="outline" size="sm" onClick={() => onOpenChange(false)} disabled={pending}>
+                {t('common.cancel')}
+              </Button>
+              <Button size="sm" onClick={confirm} disabled={pending} className="gap-1.5">
+                {pending ? (
+                  <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Download aria-hidden="true" className="h-3.5 w-3.5" />
+                )}
+                {pending ? t('vuln.detail.exporting') : t('vuln.export.confirm')}
+              </Button>
+            </div>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
 
-          <div className="mt-5 flex items-center justify-end gap-2">
-            <Button variant="outline" size="sm" onClick={() => onOpenChange(false)} disabled={pending}>
-              {t('common.cancel')}
-            </Button>
-            <Button size="sm" onClick={confirm} disabled={pending} className="gap-1.5">
-              {pending ? (
-                <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
-              ) : (
-                <Download aria-hidden="true" className="h-3.5 w-3.5" />
-              )}
-              {pending ? t('vuln.detail.exporting') : t('vuln.export.confirm')}
-            </Button>
-          </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+      <DirectoryPickerDialog
+        open={pickerOpen}
+        initialPath={directory}
+        onOpenChange={setPickerOpen}
+        onSelect={(path) => {
+          setDirectory(path)
+          setInvalid(false)
+          setPickerOpen(false)
+        }}
+      />
+    </>
   )
 }