Added favicon

Closes #139
code refactoring, added router, moved download api path
2024-03-03 20:32:20 +01:00 · 2024-02-23 10:55:33 +01:00 · 2024-02-12 12:02:23 +01:00 · 2024-02-10 09:56:50 +01:00 · 2024-02-09 18:20:22 +01:00 · 2024-02-09 11:08:47 +01:00
77 changed files with 4903 additions and 473 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@ yt-dlp-webui
 session.dat
 config.yml
 cookies.txt
-__debug*
+__debug*
+app/
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
+> [!IMPORTANT]
+> Major frontend refactoring in progress.  
+> I won't add features or fix minor issues until completition.
+---
+
 # yt-dlp Web UI

 A not so terrible web ui for yt-dlp.  
@@ -17,9 +22,8 @@ docker pull marcobaobao/yt-dlp-webui
 ```sh
 # latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest stable version
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
+![output](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/82bcecaf-4ced-441f-9384-105653abfae4)

 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
@@ -75,20 +79,10 @@ The currently avaible settings are:

 ## Format selection

-![fs1](https://i.ibb.co/8dgS6ym/image.png)
-
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.

 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!

-Future releases will have:
-   ~~Multi download~~ *done*
-   ~~Exctract audio~~ *done*
-   ~~Format selection~~ *done*
-   ~~Download archive~~ *done*
-   ~~ARM Build~~ *done available through ghcr.io*
-   Playlist support
-
 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
    - You must set the server ip address in the settings section (gear icon).
@@ -97,7 +91,6 @@ Future releases will have:

 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
-# recomended for ARM and x86 devices 
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```
@@ -250,12 +243,5 @@ Just as an overview, these are the available methods:

 For more information open an issue on GitHub and I will provide more info ASAP.

-## FAQ
-   **Will it availabe for Raspberry Pi/ generic ARM devices?**
-    - Yes, it's cross platform :)
-      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
-   **Why the docker image is so heavy?**
-    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
-    - **Update**: Since Golang migration and Multi-Stage builds the Docker image is now 75MB circa. A reduction of over 400% in size :D.
 ## What yt-dlp-webui is not
 `yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>yt-dlp Web UI</title>
 </head>

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,27 +10,29 @@
  "license": "MPL-2.0",
  "private": true,
  "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.6",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "fp-ts": "^2.16.1",
+    "@fontsource/roboto": "^5.0.8",
+    "@fontsource/roboto-mono": "^5.0.16",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "fp-ts": "^2.16.2",
+    "million": "^2.6.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.21.2",
    "recoil": "^0.7.7",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.29",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-helmet": "^6.1.8",
+    "@types/node": "^20.11.4",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-helmet": "^6.1.11",
    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.4.0",
-    "typescript": "^5.3.2",
-    "vite": "^4.5.0"
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -29,6 +29,7 @@ import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
+import TerminalIcon from '@mui/icons-material/Terminal'

 export default function Layout() {
  const [open, setOpen] = useState(false)
@@ -138,6 +139,19 @@ export default function Layout() {
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
            </Link>
+            <Link to={'/log'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TerminalIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('logsTitle')} />
+              </ListItemButton>
+            </Link>
            <Link to={'/settings'} style={
              {
                textDecoration: 'none',
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -47,6 +47,57 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+  german:
+    urlInput: Video URL
+    statusTitle: Status
+    statusReady: Bereit
+    selectFormatButton: Format auswählen
+    startButton: Start
+    abortAllButton: Alle Abbrechen
+    updateBinButton: yt-dlp Binärdatei aktualisieren
+    darkThemeButton: Dunkel Modus
+    lightThemeButton: Hell Modus
+    settingsAnchor: Einstellungen
+    serverAddressTitle: Server Adresse
+    serverPortTitle: Port
+    extractAudioCheckbox: Audio extrahieren
+    noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
+    bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
+    toastConnected: 'Verbunden mit '
+    toastUpdated: yt-dlp Binärdatei aktualisiert!
+    formatSelectionEnabler: Video/Audio Format auswählbar
+    themeSelect: 'Modus'
+    languageSelect: 'Sprache'
+    overridesAnchor: Überschreibungen
+    pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
+    filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
+    customFilename: Custom filemame (leave blank to use default)
+    customPath: Benutzerdefinierter Pfad
+    customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (viel Macht = viel Verantwortung)
+    customArgsInput: Benutzerdefinierte yt-dlp Argumente
+    rpcConnErr: Fehler beim Verbinden mit RPC Server
+    splashText: Keine aktiven Downloads
+    archiveTitle: Archiv
+    clipboardAction: URL in Zwischenablage kopiert
+    playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
+    restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
+    servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
+    newDownloadButton: Neuer Download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archiv
+    settingsButtonLabel: Einstellungen
+    rpcAuthenticationLabel: RPC Authentifizierung
+    themeTogglerLabel: Modus Umschalter
+    loadingLabel: Lädt...
+    appTitle: App Titel
+    savedTemplates: Gespeicherte Vorlage
+    templatesEditor: Vorlagen Bearbeiter
+    templatesEditorNameLabel: Vorlagen Name
+    templatesEditorContentLabel: Vorlagen Inhalt
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  french:
    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
    statusTitle: Statut
@@ -96,6 +147,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  italian:
    urlInput: URL Video
    statusTitle: Stato
@@ -129,7 +182,7 @@ languages:
    clipboardAction: URL copiato negli appunti
    playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
    restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy
    newDownloadButton: Nuovo download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
@@ -142,8 +195,10 @@ languages:
    templatesEditor: Editor template
    templatesEditorNameLabel: Nome template
    templatesEditorContentLabel: Contentunto template
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
+    urlInput: 视频 URL
    statusTitle: 状态
    statusReady: 就绪
    selectFormatButton: 选择格式
@@ -177,18 +232,20 @@ languages:
    playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
    restartAppMessage: 需要刷新页面才能生效
    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
-    newDownloadButton: New download
-    homeButtonLabel: Home
-    archiveButtonLabel: Archive
-    settingsButtonLabel: Settings
-    rpcAuthenticationLabel: RPC authentication
-    themeTogglerLabel: Theme toggler
-    loadingLabel: Loading...
+    newDownloadButton: 新下载
+    homeButtonLabel: 主页
+    archiveButtonLabel: 归档
+    settingsButtonLabel: 设置
+    rpcAuthenticationLabel: RPC 身份验证
+    themeTogglerLabel: 主题切换
+    loadingLabel: 正在加载…
    appTitle: App 标题
-    savedTemplates: Saved templates
-    templatesEditor: Templates editor
-    templatesEditorNameLabel: Template name
-    templatesEditorContentLabel: Template content
+    savedTemplates: 保存模板
+    templatesEditor: 模板编辑器
+    templatesEditorNameLabel: 模板名称
+    templatesEditorContentLabel: 模板内容
+    logsTitle: '日志'
+    awaitingLogs: '正在等待日志…'
  spanish:
    urlInput: URL de YouTube u otro servicio compatible
    statusTitle: Estado
@@ -234,6 +291,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  russian:
    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
    statusTitle: Статус
@@ -279,6 +338,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
@@ -324,6 +385,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
@@ -370,6 +433,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  catalan:
    urlInput: URL de YouTube o d'un altre servei compatible
    statusTitle: Estat
@@ -415,6 +480,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  ukrainian:
    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
    statusTitle: Статус
@@ -460,6 +527,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  polish:
    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
    statusTitle: Status
@@ -505,3 +574,5 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
--- a/frontend/src/atoms/settings.ts
+++ b/frontend/src/atoms/settings.ts
@@ -12,6 +12,7 @@ export const languages = [
  'catalan',
  'ukrainian',
  'polish',
+  'german'
 ] as const

 export type Language = (typeof languages)[number]
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -32,8 +32,8 @@ import {
  useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
-import { settingsState } from '../atoms/settings'
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
 import { useI18n } from '../hooks/useI18n'
@@ -63,6 +63,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  const isConnected = useRecoilValue(connectedState)
  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
  const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)

  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -70,6 +71,8 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  const [pickedBestFormat, setPickedBestFormat] = useState('')

  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
  const [downloadPath, setDownloadPath] = useState('')

  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
@@ -81,7 +84,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {

  const [isPlaylist, setIsPlaylist] = useState(false)

-  const cliArgs = useMemo(() =>
+  const argsBuilder = useMemo(() =>
    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
  )

@@ -108,7 +111,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {

    client.download({
      url: immediate || url || workingUrl,
-      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
      pathOverride: downloadPath ?? '',
      renameTo: settings.fileRenaming ? filenameTemplate : '',
      playlist: isPlaylist,
@@ -313,9 +316,31 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                  }
                </Grid>
                <Suspense>
-                  <ExtraDownloadOptions />
+                  {savedTemplates.length > 0 && <ExtraDownloadOptions />}
                </Suspense>
                <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Grid item>
+                      <FormControlLabel
+                        control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                        checked={isPlaylist}
+                        label={i18n.t('playlistCheckbox')}
+                      />
+                    </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                          />
+                        }
+                        checked={argsBuilder.extractAudio}
+                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                        disabled={settings.formatSelection}
+                        label={i18n.t('extractAudioCheckbox')}
+                      />
+                    </Grid>
+                  </Grid>
                  <Grid item>
                    <Button
                      variant="contained"
@@ -332,13 +357,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                      }
                    </Button>
                  </Grid>
-                  <Grid item>
-                    <FormControlLabel
-                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
-                      checked={isPlaylist}
-                      label={i18n.t('playlistCheckbox')}
-                    />
-                  </Grid>
                </Grid>
              </Paper>
            </Grid>
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -27,9 +27,14 @@ const DownloadsListView: React.FC = () => {
  return (
    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
      <Grid item xs={12}>
-        <TableContainer component={Paper} sx={{ minHeight: '100%' }} elevation={2}>
+        <TableContainer
+          component={Paper}
+          sx={{ minHeight: '100%' }}
+          elevation={2}
+          hidden={downloads.length === 0}
+        >
          <Table>
-            <TableHead hidden={downloads.length === 0}>
+            <TableHead>
              <TableRow>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
--- a/frontend/src/components/ExtraDownloadOptions.tsx
+++ b/frontend/src/components/ExtraDownloadOptions.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Box, TextField } from '@mui/material'
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { useI18n } from '../hooks/useI18n'
@@ -22,9 +22,23 @@ const ExtraDownloadOptions: React.FC = () => {
        renderOption={(props, option) => (
          <Box
            component="li"
-            sx={{ mr: 2, flexShrink: 0 }}
-            {...props}>
-            {option.label}
+            {...props}
+          >
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignContent: 'flex-start',
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              width: '100%'
+            }}>
+              <Typography>
+                {option.label}
+              </Typography>
+              <Typography variant="subtitle2" color="primary">
+                {option.content}
+              </Typography>
+            </Box>
          </Box>
        )}
        sx={{ width: '100%', mt: 2 }}
--- a/frontend/src/components/LogTerminal.tsx
+++ b/frontend/src/components/LogTerminal.tsx
@@ -0,0 +1,91 @@
+import { Box, CircularProgress, Container, Paper, Typography } from '@mui/material'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+
+const token = localStorage.getItem('token')
+
+const LogTerminal: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
+
+  const { i18n } = useI18n()
+
+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
+  const eventSource = useMemo(
+    () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
+    [serverAddr]
+  )
+
+  useEffect(() => {
+    eventSource.addEventListener('log', event => {
+      const msg: string[] = JSON.parse(event.data)
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))
+
+      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
+    })
+
+    // TODO: in dev mode it breaks sse
+    return () => eventSource.close()
+  }, [eventSource])
+
+  const logEntryStyle = (data: string) => {
+    if (data.includes("level=ERROR")) {
+      return { color: 'red' }
+    }
+    if (data.includes("level=WARN")) {
+      return { color: 'orange' }
+    }
+    return {}
+  }
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        {(logBuffer.length === 0) && <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyItems: 'center',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <CircularProgress color="primary" size={32} />
+          <Typography py={1} variant="subtitle2" >
+            {i18n.t('awaitingLogs')}
+          </Typography>
+        </Box>
+        }
+        <Box
+          ref={boxRef}
+          sx={{
+            fontFamily: 'Roboto Mono',
+            height: '75.5vh',
+            overflowY: 'auto',
+            overflowX: 'auto',
+            fontSize: '15px'
+          }}
+        >
+          {logBuffer.map((log, idx) => (
+            <Box key={idx} sx={logEntryStyle(log)}>
+              {log}
+            </Box>
+          ))}
+        </Box>
+      </Paper>
+    </Container >
+  )
+}
+
+export default LogTerminal
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,6 +6,9 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import '@fontsource/roboto/700.css'
+
+import '@fontsource/roboto-mono'

 const root = createRoot(document.getElementById('root')!)

--- a/frontend/src/lib/httpClient.ts
+++ b/frontend/src/lib/httpClient.ts
@@ -15,11 +15,13 @@ const fetcher = async <T>(url: string, opt?: RequestInit) => {
    }
  }

-  if (opt?.headers) {
-    opt.headers = { ...opt.headers, 'X-Authentication': jwt ?? '' }
-  }
-
-  const res = await fetch(url, opt)
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })

  if (!res.ok) {
    throw await res.text()
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -2,6 +2,7 @@ import { CircularProgress } from '@mui/material'
 import { Suspense, lazy } from 'react'
 import { createHashRouter } from 'react-router-dom'
 import Layout from './Layout'
+import Terminal from './views/Terminal'

 const Home = lazy(() => import('./views/Home'))
 const Login = lazy(() => import('./views/Login'))
@@ -36,6 +37,14 @@ export const router = createHashRouter([
          </Suspense >
        )
      },
+      {
+        path: '/log',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Terminal />
+          </Suspense >
+        )
+      },
      {
        path: '/archive',
        element: (
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -9,12 +9,13 @@ import {
  DialogContent,
  DialogContentText,
  DialogTitle,
-  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
+  MenuItem,
+  MenuList,
  Paper,
  SpeedDial,
  SpeedDialAction,
@@ -27,6 +28,7 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'

+import DownloadIcon from '@mui/icons-material/Download'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
@@ -38,12 +40,14 @@ import { useObservable } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
-import { DeleteRequest, DirectoryEntry } from '../types'
+import { DirectoryEntry } from '../types'
 import { base64URLEncode, roundMiB } from '../utils'
-import DownloadIcon from '@mui/icons-material/Download'
-

 export default function Downloaded() {
+  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
+  const [showMenu, setShowMenu] = useState(false)
+  const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
+
  const serverAddr = useRecoilValue(serverURL)
  const navigate = useNavigate()

@@ -122,7 +126,7 @@ export default function Downloaded() {
    combineLatestWith(selected$),
    map(([data, selected]) => data.map(x => ({
      ...x,
-      selected: selected.includes(x.path)
+      selected: selected.includes(x.name)
    }))),
    share()
  ), [])
@@ -135,19 +139,24 @@ export default function Downloaded() {
      : selected$.next([...selected$.value, name])
  }

+  const deleteFile = (entry: DirectoryEntry) => pipe(
+    ffetch(`${serverAddr}/archive/delete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        path: entry.path,
+        shaSum: entry.shaSum,
+      })
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => fetcher()
+    )
+  )()
+
  const deleteSelected = () => {
    Promise.all(selectable
      .filter(entry => entry.selected)
-      .map(entry => fetch(`${serverAddr}/archive/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          path: entry.path,
-          shaSum: entry.shaSum,
-        } as DeleteRequest)
-      }))
+      .map(deleteFile)
    ).then(fetcher)
  }

@@ -172,18 +181,42 @@ export default function Downloaded() {
  })

  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container
+      maxWidth="lg"
+      sx={{ mt: 4, mb: 4, height: '100%' }}
+      onClick={() => setShowMenu(false)}
+    >
+      <IconMenu
+        posX={menuPos.x}
+        posY={menuPos.y}
+        hide={!showMenu}
+        onDownload={() => {
+          if (currentFile) {
+            downloadFile(currentFile?.path)
+            setCurrentFile(undefined)
+          }
+        }}
+        onDelete={() => {
+          if (currentFile) {
+            deleteFile(currentFile)
+            setCurrentFile(undefined)
+          }
+        }}
+      />
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={!(files$.observed) || isPending}
      >
        <CircularProgress color="primary" />
      </Backdrop>
-      <Paper sx={{
-        p: 2,
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={() => setShowMenu(false)}
+      >
        <Typography py={1} variant="h5" color="primary">
          {i18n.t('archiveTitle')}
        </Typography>
@@ -191,6 +224,12 @@ export default function Downloaded() {
          {selectable.length === 0 && 'No files found'}
          {selectable.map((file, idx) => (
            <ListItem
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCurrentFile(file)
+                setMenuPos({ x: e.clientX, y: e.clientY })
+                setShowMenu(true)
+              }}
              key={idx}
              secondaryAction={
                <div>
@@ -202,17 +241,10 @@ export default function Downloaded() {
                  </Typography>
                  }
                  {!file.isDirectory && <>
-                    <IconButton
-                      size='small'
-                      onClick={() => downloadFile(file.path)}
-                      sx={{ marginLeft: 1.5 }}
-                    >
-                      <DownloadIcon />
-                    </IconButton>
                    <Checkbox
                      edge="end"
                      checked={file.selected}
-                      onChange={() => addSelected(file.path)}
+                      onChange={() => addSelected(file.name)}
                    />
                  </>}
                </div>
@@ -275,11 +307,15 @@ export default function Downloaded() {
          </ul>
        </DialogContent>
        <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button onClick={() => {
-            deleteSelected()
-            setOpenDialog(false)
-          }} autoFocus
+          <Button onClick={() => setOpenDialog(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              deleteSelected()
+              setOpenDialog(false)
+            }}
+            autoFocus
          >
            Ok
          </Button>
@@ -287,4 +323,43 @@ export default function Downloaded() {
      </Dialog>
    </Container>
  )
+}
+
+const IconMenu: React.FC<{
+  posX: number
+  posY: number
+  hide: boolean
+  onDownload: () => void
+  onDelete: () => void
+}> = ({ posX, posY, hide, onDelete, onDownload }) => {
+  return (
+    <Paper sx={{
+      width: 320,
+      maxWidth: '100%',
+      position: 'absolute',
+      top: posY,
+      left: posX,
+      display: hide ? 'none' : 'block',
+      zIndex: (theme) => theme.zIndex.drawer + 1,
+    }}>
+      <MenuList>
+        <MenuItem onClick={onDownload}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Download
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={onDelete}>
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Delete
+          </ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  )
 }
--- a/frontend/src/views/Terminal.tsx
+++ b/frontend/src/views/Terminal.tsx
@@ -0,0 +1,9 @@
+import LogTerminal from '../components/LogTerminal'
+
+const Terminal: React.FC = () => {
+  return (
+    <LogTerminal />
+  )
+}
+
+export default Terminal
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,10 +1,12 @@
 import react from '@vitejs/plugin-react-swc'
+import million from 'million/compiler'
 import ViteYaml from '@modyfi/vite-plugin-yaml'
 import { defineConfig } from 'vite'

 export default defineConfig(() => {
  return {
    plugins: [
+      million.vite({ auto: true }),
      react(),
      ViteYaml(),
    ],
--- a/go.mod
+++ b/go.mod
@@ -9,19 +9,28 @@ require (
 	github.com/google/uuid v1.5.0
 	github.com/gorilla/websocket v1.5.1
 	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
+	github.com/reactivex/rxgo/v2 v2.5.0
 	golang.org/x/sys v0.15.0
 	gopkg.in/yaml.v3 v3.0.1
 	modernc.org/sqlite v1.28.0
 )

 require (
+	github.com/cenkalti/backoff/v4 v4.0.0 // indirect
+	github.com/davecgh/go-spew v1.1.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/emirpasic/gods v1.12.0 // indirect
 	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/stretchr/objx v0.1.0 // indirect
+	github.com/stretchr/testify v1.4.0 // indirect
+	github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 // indirect
 	golang.org/x/mod v0.14.0 // indirect
 	golang.org/x/net v0.19.0 // indirect
 	golang.org/x/tools v0.16.1 // indirect
+	gopkg.in/yaml.v2 v2.2.2 // indirect
 	lukechampine.com/uint128 v1.3.0 // indirect
 	modernc.org/cc/v3 v3.41.0 // indirect
 	modernc.org/ccgo/v3 v3.16.15 // indirect
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,11 @@
+github.com/cenkalti/backoff/v4 v4.0.0 h1:6VeaLF9aI+MAUQ95106HwWzYZgJJpZ4stumjj6RFYAU=
+github.com/cenkalti/backoff/v4 v4.0.0/go.mod h1:eEew/i+1Q6OrCDZh3WiXYv3+nJwBASZ8Bog/87DQnVg=
+github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/emirpasic/gods v1.12.0 h1:QAUIPSaCu4G+POclxeqb3F+WPpdKqFGlw36+yOzGlrg=
+github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
 github.com/go-chi/chi/v5 v5.0.11 h1:BnpYbFZ3T3S1WMpD79r7R5ThWX40TaFB7L31Y8xqSwA=
 github.com/go-chi/chi/v5 v5.0.11/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
@@ -14,26 +20,58 @@ github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/
 github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
 github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
 github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
+github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
+github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
+github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/reactivex/rxgo/v2 v2.5.0 h1:FhPgHwX9vKdNQB2gq9EPt+EKk9QrrzoeztGbEEnZam4=
+github.com/reactivex/rxgo/v2 v2.5.0/go.mod h1:bs4fVZxcb5ZckLIOeIeVH942yunJLWDABWGbrHAW+qU=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/stretchr/objx v0.1.0 h1:4G4v2dO3VZwixGIRoQ5Lfboy6nUhCyYzaqnIAPPhYs4=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 h1:BLNsFR8l/hj/oGjnJXkd4Vi3s4kQD3/3x8HSAE4bzN0=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775/go.mod h1:XUZ4x3oGhWfiOnUvTslnKKs39AWUct3g3yJvXTQSJOQ=
+go.uber.org/goleak v1.1.10 h1:z+mqJhf6ss6BSfSM671tgKyZBFPTTJM+HLxnhPC3wu0=
+go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de h1:5hukYrvBGR8/eNkX5mdUezrA6JiaEZDtJb9Ei+1LlBs=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/mod v0.14.0 h1:dGoOF9QVLYng8IHTm7BAyWqCqSheQ5pYWGhzW00YJr0=
 golang.org/x/mod v0.14.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
 golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.5.0 h1:60k92dhOjHxJkrqnwsfl8KuaHbn/5dl0lUPUklKo3qE=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
 golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.16.1 h1:TLyB3WofjdOEepBHAU20JdNC1Zbg87elYofWYAY5oZA=
 golang.org/x/tools v0.16.1/go.mod h1:kYVVN6I1mBNoB1OX+noeBjbRk4IUEPa7JJ+TJMEooJ0=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 lukechampine.com/uint128 v1.3.0 h1:cDdUVfRwDUDovz610ABgFD17nXD4/uDgVHl2sC3+sbo=
--- a/main.go
+++ b/main.go
@@ -76,8 +76,8 @@ func main() {

 	// if config file is found it will be merged with the current config struct
 	if err := c.LoadFile(configFile); err != nil {
-		log.Println(cli.BgRed, "config", cli.Reset, "no config file found")
+		log.Println(cli.BgRed, "config", cli.Reset, err)
 	}

-	server.RunBlocking(host, port, frontend, localDatabasePath)
+	server.RunBlocking(c.Host, c.Port, frontend, localDatabasePath)
 }
--- a/server/config/parser.go
+++ b/server/config/parser.go
@@ -8,6 +8,8 @@ import (
 )

 type Config struct {
+	CurrentLogFile  string
+	LogPath         string `yaml:"log_path"`
 	Host            string `yaml:"host"`
 	Port            int    `yaml:"port"`
 	DownloadPath    string `yaml:"downloadPath"`
--- a/server/internal/memory_db.go
+++ b/server/internal/memory_db.go
@@ -4,13 +4,12 @@ import (
 	"encoding/gob"
 	"errors"
 	"fmt"
-	"log"
+	"log/slog"
 	"os"
 	"path/filepath"
 	"sync"

 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

@@ -94,14 +93,14 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 }

 // WIP: Persist the database in a single file named "session.dat"
-func (m *MemoryDB) Persist() {
+func (m *MemoryDB) Persist() error {
 	running := m.All()

 	sf := filepath.Join(config.Instance().SessionFilePath, "session.dat")

 	fd, err := os.Create(sf)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}

 	session := Session{
@@ -110,14 +109,14 @@ func (m *MemoryDB) Persist() {

 	err = gob.NewEncoder(fd).Encode(session)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}

-	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
+	return nil
 }

 // WIP: Restore a persisted state
-func (m *MemoryDB) Restore() {
+func (m *MemoryDB) Restore(logger *slog.Logger) {
 	fd, err := os.Open("session.dat")
 	if err != nil {
 		return
@@ -138,6 +137,7 @@ func (m *MemoryDB) Restore() {
 			Progress: proc.Progress,
 			Output:   proc.Output,
 			Params:   proc.Params,
+			Logger:   logger,
 		}

 		m.table.Store(proc.Id, restored)
@@ -146,6 +146,4 @@ func (m *MemoryDB) Restore() {
 			go restored.Start()
 		}
 	}
-
-	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }
--- a/server/internal/message_queue.go
+++ b/server/internal/message_queue.go
@@ -1,8 +1,6 @@
 package internal

 import (
-	"log"
-
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

@@ -19,7 +17,7 @@ func NewMessageQueue() *MessageQueue {
 	size := config.Instance().QueueSize

 	if size <= 0 {
-		log.Fatalln("invalid queue size")
+		panic("invalid queue size")
 	}

 	return &MessageQueue{
--- a/server/internal/playlist.go
+++ b/server/internal/playlist.go
@@ -3,12 +3,11 @@ package internal
 import (
 	"encoding/json"
 	"errors"
-	"log"
+	"log/slog"
 	"os/exec"
 	"strings"
 	"time"

-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

@@ -19,7 +18,7 @@ type metadata struct {
 	Type          string         `json:"_type"`
 }

-func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
+func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger *slog.Logger) error {
 	var (
 		downloader = config.Instance().DownloaderPath
 		cmd        = exec.Command(downloader, req.URL, "-J")
@@ -37,14 +36,14 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 		return err
 	}

-	log.Println(cli.BgRed, "Decoding metadata", cli.Reset, req.URL)
+	logger.Info("decoding metadata", slog.String("url", req.URL))

 	err = json.NewDecoder(stdout).Decode(&m)
 	if err != nil {
 		return err
 	}

-	log.Println(cli.BgGreen, "Decoded metadata", cli.Reset, req.URL)
+	logger.Info("decoded metadata", slog.String("url", req.URL))

 	if m.Type == "" {
 		cmd.Wait()
@@ -52,8 +51,10 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 	}

 	if m.Type == "playlist" {
-		log.Println(
-			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
+		logger.Info(
+			"playlist detected",
+			slog.String("url", req.URL),
+			slog.Int("count", m.Count),
 		)

 		for i, meta := range m.Entries {
@@ -90,11 +91,14 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 		return err
 	}

-	proc := &Process{Url: req.URL, Params: req.Params}
+	proc := &Process{
+		Url:    req.URL,
+		Params: req.Params,
+		Logger: logger,
+	}

 	mq.Publish(proc)
-	log.Println("Sending new process to message queue", proc.Url)
+	logger.Info("sending new process to message queue", slog.String("url", proc.Url))

-	err = cmd.Wait()
-	return err
+	return cmd.Wait()
 }
--- a/server/internal/process.go
+++ b/server/internal/process.go
@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"encoding/json"
 	"fmt"
+	"log/slog"
 	"regexp"
 	"sync"
 	"syscall"
@@ -50,6 +51,7 @@ type Process struct {
 	Progress DownloadProgress
 	Output   DownloadOutput
 	proc     *os.Process
+	Logger   *slog.Logger
 }

 type DownloadOutput struct {
@@ -89,16 +91,22 @@ func (p *Process) Start() {

 	buildFilename(&p.Output)

-	params := append([]string{
+	params := []string{
 		strings.Split(p.Url, "?list")[0], //no playlist
 		"--newline",
 		"--no-colors",
 		"--no-playlist",
 		"--progress-template",
 		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
-		"-o",
-		fmt.Sprintf("%s/%s", out.Path, out.Filename),
-	}, p.Params...)
+	}
+
+	// if user asked to manually override the output path...
+	if !(slices.Includes(params, "-P") || slices.Includes(params, "--paths")) {
+		params = append(params, "-o")
+		params = append(params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
+	}
+
+	params = append(params, p.Params...)

 	// ----------------- main block ----------------- //
 	cmd := exec.Command(config.Instance().DownloaderPath, params...)
@@ -106,13 +114,21 @@ func (p *Process) Start() {

 	r, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to connect to stdout",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}
 	scan := bufio.NewScanner(r)

 	err = cmd.Start()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to start yt-dlp process",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}

 	p.proc = cmd.Process
@@ -151,10 +167,10 @@ func (p *Process) Start() {
 					Speed:      stdout.Speed,
 					ETA:        stdout.Eta,
 				}
-				log.Println(
-					cli.BgGreen, "DL", cli.Reset,
-					cli.BgBlue, p.getShortId(), cli.Reset,
-					p.Url, stdout.Percentage,
+				p.Logger.Info("progress",
+					slog.String("id", p.getShortId()),
+					slog.String("url", p.Url),
+					slog.String("percentege", stdout.Percentage),
 				)
 			}
 		})
@@ -175,12 +191,9 @@ func (p *Process) Complete() {
 		ETA:        0,
 	}

-	shortId := p.getShortId()
-
-	log.Println(
-		cli.BgMagenta, "FINISH", cli.Reset,
-		cli.BgBlue, shortId, cli.Reset,
-		p.Url,
+	p.Logger.Info("finished",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)
 }

@@ -197,7 +210,7 @@ func (p *Process) Kill() error {
 		}
 		err = syscall.Kill(-pgid, syscall.SIGTERM)

-		log.Println("Killed process", p.Id)
+		p.Logger.Info("killed process", slog.String("id", p.Id))
 		return err
 	}

@@ -233,6 +246,12 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 		p.Url,
 	)

+	p.Logger.Info(
+		"retrieving metadata",
+		slog.String("caller", "getFormats"),
+		slog.String("url", p.Url),
+	)
+
 	go func() {
 		decodingError = json.Unmarshal(stdout, &info)
 		wg.Done()
@@ -264,7 +283,11 @@ func (p *Process) SetMetadata() error {

 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Println("Cannot retrieve info for", p.Url)
+		p.Logger.Error("failed retrieving info",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", err.Error()),
+		)
 		return err
 	}

@@ -278,10 +301,9 @@ func (p *Process) SetMetadata() error {
 		return err
 	}

-	log.Println(
-		cli.BgRed, "Metadata", cli.Reset,
-		cli.BgBlue, p.getShortId(), cli.Reset,
-		p.Url,
+	p.Logger.Info("retrieving metadata",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)

 	err = json.NewDecoder(stdout).Decode(&info)
--- a/server/internal/stack.go
+++ b/server/internal/stack.go
@@ -1,37 +1,33 @@
 package internal

-type Node[T any] struct {
-	Value T
-}
-
 type Stack[T any] struct {
-	Nodes []*Node[T]
-	count int
+	Elements []*T
+	count    int
 }

 func NewStack[T any]() *Stack[T] {
 	return &Stack[T]{
-		Nodes: make([]*Node[T], 10),
+		Elements: make([]*T, 10),
 	}
 }

 func (s *Stack[T]) Push(val T) {
-	if s.count >= len(s.Nodes) {
-		Nodes := make([]*Node[T], len(s.Nodes)*2)
-		copy(Nodes, s.Nodes)
-		s.Nodes = Nodes
+	if s.count >= len(s.Elements) {
+		Elements := make([]*T, len(s.Elements)*2)
+		copy(Elements, s.Elements)
+		s.Elements = Elements
 	}
-	s.Nodes[s.count] = &Node[T]{Value: val}
+	s.Elements[s.count] = &val
 	s.count++
 }

-func (s *Stack[T]) Pop() *Node[T] {
+func (s *Stack[T]) Pop() *T {
 	if s.count == 0 {
 		return nil
 	}
-	node := s.Nodes[s.count-1]
+	Element := s.Elements[s.count-1]
 	s.count--
-	return node
+	return Element
 }

 func (s *Stack[T]) IsEmpty() bool {
--- a/server/logging/handler.go
+++ b/server/logging/handler.go
@@ -0,0 +1,80 @@
+package logging
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/gorilla/websocket"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+)
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+	ReadBufferSize:  1000,
+	WriteBufferSize: 1000,
+}
+
+func webSocket(w http.ResponseWriter, r *http.Request) {
+	c, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	for msg := range logsObservable.Observe() {
+		c.WriteJSON(msg.V)
+	}
+}
+
+func sse(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "SSE not supported", http.StatusInternalServerError)
+		return
+	}
+
+	for msg := range logsObservable.Observe() {
+		if msg.E != nil {
+			http.Error(w, msg.E.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		var (
+			b  bytes.Buffer
+			sb strings.Builder
+		)
+
+		if err := json.NewEncoder(&b).Encode(msg.V); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		sb.WriteString("event: log\n")
+		sb.WriteString("data: " + b.String() + "\n\n")
+
+		fmt.Fprint(w, sb.String())
+
+		flusher.Flush()
+	}
+}
+
+func ApplyRouter() func(chi.Router) {
+	return func(r chi.Router) {
+		if config.Instance().RequireAuth {
+			r.Use(middlewares.Authenticated)
+		}
+		r.Get("/ws", webSocket)
+		r.Get("/sse", sse)
+	}
+}
--- a/server/logging/observable_logger.go
+++ b/server/logging/observable_logger.go
@@ -0,0 +1,29 @@
+package logging
+
+import (
+	"time"
+
+	"github.com/reactivex/rxgo/v2"
+)
+
+var (
+	logsChan       = make(chan rxgo.Item, 100)
+	logsObservable = rxgo.
+			FromChannel(logsChan, rxgo.WithBackPressureStrategy(rxgo.Drop)).
+			BufferWithTime(rxgo.WithDuration(time.Millisecond * 500))
+)
+
+type ObservableLogger struct{}
+
+func NewObservableLogger() *ObservableLogger {
+	return &ObservableLogger{}
+}
+
+func (o *ObservableLogger) Write(p []byte) (n int, err error) {
+	logsChan <- rxgo.Of(string(p))
+
+	n = len(p)
+	err = nil
+
+	return
+}
--- a/server/rest/container.go
+++ b/server/rest/container.go
@@ -30,5 +30,8 @@ func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue)
 		r.Post("/template", h.AddTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
+
+		r.Get("/tree", h.DirectoryTree())
+		r.Get("/d/{id}", h.DownloadFile())
 	}
 }
--- a/server/rest/handlers.go
+++ b/server/rest/handlers.go
@@ -2,7 +2,10 @@ package rest

 import (
 	"encoding/json"
+	"io"
 	"net/http"
+	"os"
+	"path/filepath"

 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -154,3 +157,55 @@ func (h *Handler) DeleteTemplate() http.HandlerFunc {
 		}
 	}
 }
+
+func (h *Handler) DirectoryTree() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		tree, err := h.service.DirectoryTree(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(tree)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) DownloadFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		id := chi.URLParam(r, "id")
+
+		path, err := h.service.DownloadFile(r.Context(), id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(*path),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(*path)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
+	}
+}
--- a/server/rest/service.go
+++ b/server/rest/service.go
@@ -4,16 +4,19 @@ import (
 	"context"
 	"database/sql"
 	"errors"
+	"log/slog"
 	"os"

 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
 )

 type Service struct {
-	mdb *internal.MemoryDB
-	db  *sql.DB
-	mq  *internal.MessageQueue
+	mdb    *internal.MemoryDB
+	db     *sql.DB
+	mq     *internal.MessageQueue
+	logger *slog.Logger
 }

 func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
@@ -24,6 +27,7 @@ func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
 			Path:     req.Path,
 			Filename: req.Rename,
 		},
+		Logger: s.logger,
 	}

 	id := s.mdb.Set(p)
@@ -115,3 +119,16 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {

 	return err
 }
+
+func (s *Service) DirectoryTree(ctx context.Context) (*internal.Stack[sys.FSNode], error) {
+	return sys.DirectoryTree()
+}
+
+func (s *Service) DownloadFile(ctx context.Context, id string) (*string, error) {
+	p, err := s.mdb.Get(id)
+	if err != nil {
+		return nil, err
+	}
+
+	return &p.Output.Path, nil
+}
--- a/server/rpc/container.go
+++ b/server/rpc/container.go
@@ -1,6 +1,8 @@
 package rpc

 import (
+	"log/slog"
+
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -8,10 +10,15 @@ import (
 )

 // Dependency injection container.
-func Container(db *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+func Container(
+	db *internal.MemoryDB,
+	mq *internal.MessageQueue,
+	logger *slog.Logger,
+) *Service {
 	return &Service{
-		db: db,
-		mq: mq,
+		db:     db,
+		mq:     mq,
+		logger: logger,
 	}
 }

--- a/server/rpc/service.go
+++ b/server/rpc/service.go
@@ -1,7 +1,7 @@
 package rpc

 import (
-	"log"
+	"log/slog"

 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
@@ -9,8 +9,9 @@ import (
 )

 type Service struct {
-	db *internal.MemoryDB
-	mq *internal.MessageQueue
+	db     *internal.MemoryDB
+	mq     *internal.MessageQueue
+	logger *slog.Logger
 }

 type Running []internal.ProcessResponse
@@ -34,6 +35,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 			Path:     args.Path,
 			Filename: args.Rename,
 		},
+		Logger: s.logger,
 	}

 	s.db.Set(p)
@@ -46,7 +48,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 // Exec spawns a Process.
 // The result of the execution is the newly spawned process Id.
 func (s *Service) ExecPlaylist(args internal.DownloadRequest, result *string) error {
-	err := internal.PlaylistDetect(args, s.mq, s.db)
+	err := internal.PlaylistDetect(args, s.mq, s.db, s.logger)
 	if err != nil {
 		return err
 	}
@@ -69,7 +71,7 @@ func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error
 // Progess retrieves available format for a given resource
 func (s *Service) Formats(args Args, meta *internal.DownloadFormats) error {
 	var err error
-	p := internal.Process{Url: args.URL}
+	p := internal.Process{Url: args.URL, Logger: s.logger}
 	*meta, err = p.GetFormatsSync()
 	return err
 }
@@ -88,7 +90,7 @@ func (s *Service) Running(args NoArgs, running *Running) error {

 // Kill kills a process given its id and remove it from the memoryDB
 func (s *Service) Kill(args string, killed *string) error {
-	log.Println("Trying killing process with id", args)
+	s.logger.Info("Trying killing process with id", slog.String("id", args))
 	proc, err := s.db.Get(args)

 	if err != nil {
@@ -106,7 +108,7 @@ func (s *Service) Kill(args string, killed *string) error {
 // KillAll kills all process unconditionally and removes them from
 // the memory db
 func (s *Service) KillAll(args NoArgs, killed *string) error {
-	log.Println("Killing all spawned processes", args)
+	s.logger.Info("Killing all spawned processes")
 	keys := s.db.Keys()
 	var err error
 	for _, key := range *keys {
@@ -125,7 +127,7 @@ func (s *Service) KillAll(args NoArgs, killed *string) error {

 // Remove a process from the db rendering it unusable if active
 func (s *Service) Clear(args string, killed *string) error {
-	log.Println("Clearing process with id", args)
+	s.logger.Info("Clearing process with id", slog.String("id", args))
 	s.db.Delete(args)
 	return nil
 }
@@ -138,7 +140,7 @@ func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
 }

 // Return a flattned tree of the download directory
-func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+func (s *Service) DirectoryTree(args NoArgs, tree *internal.Stack[sys.FSNode]) error {
 	dfsTree, err := sys.DirectoryTree()
 	if dfsTree != nil {
 		*tree = *dfsTree
@@ -148,7 +150,7 @@ func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {

 // Updates the yt-dlp binary using its builtin function
 func (s *Service) UpdateExecutable(args NoArgs, updated *bool) error {
-	log.Println("Updating yt-dlp executable to the latest release")
+	s.logger.Info("Updating yt-dlp executable to the latest release")
 	err := updater.UpdateExecutable()
 	if err != nil {
 		*updated = true
--- a/server/server.go
+++ b/server/server.go
@@ -4,8 +4,9 @@ import (
 	"context"
 	"database/sql"
 	"fmt"
+	"io"
 	"io/fs"
-	"log"
+	"log/slog"
 	"net/http"
 	"net/rpc"
 	"os"
@@ -14,12 +15,12 @@ import (
 	"time"

 	"github.com/go-chi/chi/v5"
-	"github.com/go-chi/chi/v5/middleware"
 	"github.com/go-chi/cors"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/dbutils"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/logging"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
 	ytdlpRPC "github.com/marcopeocchi/yt-dlp-web-ui/server/rpc"
@@ -29,6 +30,7 @@ import (

 type serverConfig struct {
 	frontend fs.FS
+	logger   *slog.Logger
 	host     string
 	port     int
 	mdb      *internal.MemoryDB
@@ -38,16 +40,24 @@ type serverConfig struct {

 func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	var mdb internal.MemoryDB
-	mdb.Restore()
+
+	logger := slog.New(
+		slog.NewTextHandler(
+			io.MultiWriter(os.Stdout, logging.NewObservableLogger()),
+			nil,
+		),
+	)
+
+	mdb.Restore(logger)

 	db, err := sql.Open("sqlite", dbPath)
 	if err != nil {
-		log.Fatalln(err)
+		logger.Error("failed to open database", slog.String("err", err.Error()))
 	}

 	err = dbutils.AutoMigrate(context.Background(), db)
 	if err != nil {
-		log.Fatalln(err)
+		logger.Error("failed to init database", slog.String("err", err.Error()))
 	}

 	mq := internal.NewMessageQueue()
@@ -55,6 +65,7 @@ func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {

 	srv := newServer(serverConfig{
 		frontend: frontend,
+		logger:   logger,
 		host:     host,
 		port:     port,
 		mdb:      &mdb,
@@ -63,13 +74,17 @@ func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	})

 	go gracefulShutdown(srv, &mdb)
-	go autoPersist(time.Minute*5, &mdb)
+	go autoPersist(time.Minute*5, &mdb, logger)

-	log.Fatal(srv.ListenAndServe())
+	logger.Info("yt-dlp-webui started", slog.Int("port", port))
+
+	if err := srv.ListenAndServe(); err != nil {
+		logger.Warn("http server stopped", slog.String("err", err.Error()))
+	}
 }

 func newServer(c serverConfig) *http.Server {
-	service := ytdlpRPC.Container(c.mdb, c.mq)
+	service := ytdlpRPC.Container(c.mdb, c.mq, c.logger)
 	rpc.Register(service)

 	r := chi.NewRouter()
@@ -89,11 +104,10 @@ func newServer(c serverConfig) *http.Server {
 	})

 	r.Use(corsMiddleware.Handler)
-	r.Use(middleware.Logger)
+	// use in dev
+	// r.Use(middleware.Logger)

-	app := http.FileServer(http.FS(c.frontend))
-
-	r.Mount("/", app)
+	r.Mount("/", http.FileServer(http.FS(c.frontend)))

 	// Archive routes
 	r.Route("/archive", func(r chi.Router) {
@@ -118,6 +132,9 @@ func newServer(c serverConfig) *http.Server {
 	// REST API handlers
 	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mdb, c.mq))

+	// Logging
+	r.Route("/log", logging.ApplyRouter())
+
 	return &http.Server{
 		Addr:    fmt.Sprintf("%s:%d", c.host, c.port),
 		Handler: r,
@@ -133,7 +150,7 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {

 	go func() {
 		<-ctx.Done()
-		log.Println("shutdown signal received")
+		slog.Info("shutdown signal received")

 		defer func() {
 			db.Persist()
@@ -143,9 +160,15 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 	}()
 }

-func autoPersist(d time.Duration, db *internal.MemoryDB) {
+func autoPersist(d time.Duration, db *internal.MemoryDB, logger *slog.Logger) {
 	for {
-		db.Persist()
+		if err := db.Persist(); err != nil {
+			logger.Info(
+				"failed to persisted session",
+				slog.String("err", err.Error()),
+			)
+		}
+		logger.Info("sucessfully persisted session")
 		time.Sleep(d)
 	}
 }
--- a/server/sys/fs.go
+++ b/server/sys/fs.go
@@ -18,39 +18,35 @@ func FreeSpace() (uint64, error) {
 	return (stat.Bavail * uint64(stat.Bsize)), nil
 }

+type FSNode struct {
+	path     string
+	children []FSNode
+}
+
 // Build a directory tree started from the specified path using DFS.
 // Then return the flattened tree represented as a list.
-func DirectoryTree() (*[]string, error) {
-	type Node struct {
-		path     string
-		children []Node
-	}
-
+func DirectoryTree() (*internal.Stack[FSNode], error) {
 	rootPath := config.Instance().DownloadPath

-	stack := internal.NewStack[Node]()
-	flattened := make([]string, 0)
+	stack := internal.NewStack[FSNode]()

-	stack.Push(Node{path: rootPath})
-
-	flattened = append(flattened, rootPath)
+	stack.Push(FSNode{path: rootPath})

 	for stack.IsNotEmpty() {
-		current := stack.Pop().Value
+		current := stack.Pop()
 		children, err := os.ReadDir(current.path)
 		if err != nil {
 			return nil, err
 		}
 		for _, entry := range children {
 			childPath := filepath.Join(current.path, entry.Name())
-			childNode := Node{path: childPath}
+			childNode := FSNode{path: childPath}

 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
 				stack.Push(childNode)
-				flattened = append(flattened, childNode.path)
 			}
 		}
 	}
-	return &flattened, nil
+	return stack, nil
 }
--- a/server/utils/logrotate.go
+++ b/server/utils/logrotate.go
@@ -0,0 +1,55 @@
+package utils
+
+import (
+	"io"
+	"io/fs"
+	"os"
+	"path/filepath"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+func LogRotate() (*os.File, error) {
+	logs := findLogs()
+
+	for _, log := range logs {
+		logfd, err := os.Open(log)
+		if err != nil {
+			return nil, err
+		}
+
+		gzWriter, err := os.Create(log + ".gz")
+		if err != nil {
+			return nil, err
+		}
+
+		_, err = io.Copy(gzWriter, logfd)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	logfile := time.Now().String() + ".log"
+	config.Instance().CurrentLogFile = logfile
+
+	return os.Create(logfile)
+}
+
+func findLogs() []string {
+	var (
+		logfiles []string
+		root     = config.Instance().LogPath
+	)
+
+	filepath.WalkDir(root, func(path string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+		if filepath.Ext(d.Name()) == ".log" {
+			logfiles = append(logfiles, path)
+		}
+		return nil
+	})
+	return logfiles
+}
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/ui/.vscode/extensions.json
+++ b/ui/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
--- a/ui/README.md
+++ b/ui/README.md
@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/svelte.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>yt-dlp WebUI</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.34",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.0.8",
+    "fp-ts": "^2.16.2",
+    "lucide-svelte": "^0.323.0",
+    "svelte-spa-router": "^4.0.1"
+  }
+}
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
--- a/ui/postcss.config.js
+++ b/ui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/ui/public/svelte.svg
+++ b/ui/public/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/ui/public/vite.svg
+++ b/ui/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+  import Router from 'svelte-spa-router';
+  import { wrap } from 'svelte-spa-router/wrap';
+  import Footer from './lib/Footer.svelte';
+  import Home from './views/Home.svelte';
+  import Navbar from './lib/Navbar.svelte';
+
+  const routes = {
+    '/': Home,
+    '/settings': wrap({
+      asyncComponent: () => import('./views/SettingsView.svelte'),
+    }),
+  };
+</script>
+
+<main
+  class="bg-neutral-50 dark:bg-neutral-900 h-screen text-neutral-950 dark:text-neutral-50"
+>
+  <Navbar />
+  <Router {routes} />
+  <Footer />
+  <SvelteToast />
+  <!-- <FloatingAction /> -->
+</main>
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* body {
+  font-family: "Roboto";
+} */
--- a/ui/src/lib/Button.svelte
+++ b/ui/src/lib/Button.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let disabled: boolean = false;
+  export { clazz as class };
+</script>
+
+<button
+  class={`px-2.5 py-2 rounded-lg bg-blue-300 hover:bg-blue-400 hover:duration-150 text-sm font-semibold ${
+    disabled && 'bg-neutral-300 hover:bg-neutral-300'
+  } ${clazz}`}
+  {disabled}
+  on:click
+>
+  <slot />
+</button>
--- a/ui/src/lib/Chip.svelte
+++ b/ui/src/lib/Chip.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<div
+  class="flex items-center gap-1.5 p-1 bg-blue-200 rounded-lg text-neutral-900"
+>
+  <slot />
+  {text}
+</div>
--- a/ui/src/lib/CookiesTextField.svelte
+++ b/ui/src/lib/CookiesTextField.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { toast } from '@zerodevx/svelte-toast';
+  import * as A from 'fp-ts/Array';
+  import * as E from 'fp-ts/Either';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { get } from 'svelte/store';
+  import { ffetch } from './ffetch';
+  import { cookiesTemplate, serverApiEndpoint } from './store';
+  import { debounce } from './utils';
+
+  const flag = '--cookies=cookies.txt';
+
+  let cookies = localStorage.getItem('cookies') ?? '';
+
+  const validateCookie = (cookie: string) =>
+    pipe(
+      cookie,
+      (cookie) => cookie.replace(/\s\s+/g, ' '),
+      (cookie) => cookie.replaceAll('\t', ' '),
+      (cookie) => cookie.split(' '),
+      E.of,
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f.length === 7,
+          () => `missing parts`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[0].length > 0,
+          () => 'missing domain',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[1] === 'TRUE' || f[1] === 'FALSE',
+          () => `invalid include subdomains`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[2].length > 0,
+          () => 'invalid path',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[3] === 'TRUE' || f[3] === 'FALSE',
+          () => 'invalid secure flag',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => isFinite(Number(f[4])),
+          () => 'invalid expiration',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[5].length > 0,
+          () => 'invalid name',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[6].length > 0,
+          () => 'invalid value',
+        ),
+      ),
+    );
+
+  const validateNetscapeCookies = (cookies: string) =>
+    pipe(
+      cookies,
+      (cookies) => cookies.split('\n'),
+      (cookies) => cookies.filter((f) => !f.startsWith('\n')), // empty lines
+      (cookies) => cookies.filter((f) => !f.startsWith('# ')), // comments
+      (cookies) => cookies.filter(Boolean), // empty lines
+      A.map(validateCookie),
+      A.mapWithIndex((i, either) =>
+        pipe(
+          either,
+          E.matchW(
+            (l) => toast.push(`Error in line ${i + 1}: ${l}`),
+            () => E.isRight(either),
+          ),
+        ),
+      ),
+      A.filter(Boolean),
+      A.match(
+        () => false,
+        (c) => {
+          toast.push(`Valid ${c.length} Netscape cookies`);
+          return true;
+        },
+      ),
+    );
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${get(serverApiEndpoint)}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies,
+      }),
+    })();
+
+  const execute = (cookies: KeyboardEvent) =>
+    pipe(
+      cookies.target as HTMLTextAreaElement,
+      (cookies) => cookies.value,
+      O.fromPredicate(validateNetscapeCookies),
+      O.match(
+        () => cookiesTemplate.set(''),
+        async (cookies) => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => toast.push(l),
+              () => {
+                toast.push(`Saved Netscape cookies`);
+                cookiesTemplate.set(flag);
+                localStorage.setItem('cookies', cookies);
+              },
+            ),
+          );
+        },
+      ),
+    );
+</script>
+
+<textarea
+  cols="80"
+  rows="8"
+  value={cookies}
+  on:keyup={debounce(execute, 500)}
+/>
--- a/ui/src/lib/DownloadCard.svelte
+++ b/ui/src/lib/DownloadCard.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import Chip from './Chip.svelte';
+  import { rpcClient, serverApiEndpoint } from './store';
+  import type { RPCResult } from './types';
+  import { formatSpeedMiB, roundMiB } from './utils';
+
+  export let download: RPCResult;
+
+  const remove = (id: string) => get(rpcClient).kill(id);
+</script>
+
+<div
+  class="flex gap-4
+  bg-neutral-100 dark:bg-neutral-800
+  p-2 md:p-4
+  rounded-lg shadow-lg
+  border dark:border-neutral-700"
+>
+  <div
+    class="h-full hidden sm:block w-96 bg-cover bg-center rounded"
+    style="background-image: url({download.info.thumbnail})"
+  />
+
+  <div class="flex flex-col justify-between gap-2 w-full">
+    <div>
+      <h2 class="font-bold text-lg">{download.info.title}</h2>
+      <p
+        class="font-mono text-sm mt-2 p-1 break-all bg-neutral-200 dark:bg-neutral-700 rounded"
+      >
+        {download.info.url}
+      </p>
+    </div>
+
+    <div class="flex flex-col justify-end gap-2 select-none flex-wrap">
+      <div class="hidden sm:flex items-center gap-2 text-sm">
+        {#if download.info.vcodec}
+          <Chip text={download.info.vcodec} />
+        {/if}
+        {#if download.info.acodec}
+          <Chip text={download.info.acodec} />
+        {/if}
+        {#if download.info.ext}
+          <Chip text={download.info.ext} />
+        {/if}
+        {#if download.info.resolution}
+          <Chip text={download.info.resolution} />
+        {/if}
+        {#if download.info.filesize_approx}
+          <Chip text={roundMiB(download.info.filesize_approx)} />
+        {/if}
+        <!-- {#if download.progress.process_status}
+          <Chip text={mapProcessStatus(download.progress.process_status)} />
+        {/if} -->
+        {#if download.progress.speed}
+          <Chip text={formatSpeedMiB(download.progress.speed)} />
+        {/if}
+      </div>
+
+      <div class="flex gap-2">
+        <Button class="w-14" on:click={() => remove(download.id)}>Stop</Button>
+        {#if download.progress.process_status === 2}
+          <Button class="w-18">Download</Button>
+          <!-- <a href={`${$serverApiEndpoint}/api/v1/d/${download.id}`}>d</a> -->
+        {/if}
+      </div>
+
+      <div
+        class="w-full mt-4 h-2 rounded-full bg-neutral-200 dark:bg-neutral-700"
+      >
+        <div
+          class={`h-2 rounded-full ${
+            download.progress.process_status === 2
+              ? 'bg-green-600'
+              : 'bg-blue-500'
+          }`}
+          style="width: {download.progress.percentage}"
+        />
+      </div>
+    </div>
+  </div>
+</div>
--- a/ui/src/lib/FloatingAction.svelte
+++ b/ui/src/lib/FloatingAction.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Plus } from 'lucide-svelte';
+</script>
+
+<div class="absolute bottom-10 right-10">
+  <!-- <div class="relative mb-4 flex flex-col justify-center items-center gap-2">
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+  </div> -->
+  <button
+    class="relative bg-blue-500 p-5 z-10 rounded-2xl shadow-xl text-neutral-100"
+  >
+    <Plus />
+  </button>
+</div>
--- a/ui/src/lib/Footer.svelte
+++ b/ui/src/lib/Footer.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { ChevronDown, ChevronUp } from 'lucide-svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+  import NewDownload from './NewDownload.svelte';
+
+  const height = tweened(52, {
+    duration: 300,
+    easing: cubicOut,
+  });
+
+  const minHeight = 52;
+  const maxHeight = window.innerHeight / 1.5;
+
+  let open = false;
+  $: open = $height > minHeight;
+</script>
+
+<footer
+  class="
+  fixed bottom-0 z-10
+  w-full
+  p-2
+  bg-neutral-100 dark:bg-neutral-800
+  border-t dark:border-t-neutral-700
+  shadow-lg
+  rounded-t-xl"
+  style="min-height: {$height}px;"
+>
+  <button
+    class="p-1 bg-neutral-200 dark:bg-neutral-700 rounded-lg border dark:border-neutral-700"
+    on:click={() => (open ? height.set(minHeight) : height.set(maxHeight))}
+  >
+    {#if open}
+      <ChevronDown />
+    {:else}
+      <ChevronUp />
+    {/if}
+  </button>
+
+  <div />
+
+  {#if $height > 100}
+    <div class="mt-2">
+      <NewDownload />
+    </div>
+  {/if}
+</footer>
--- a/ui/src/lib/FormatsList.svelte
+++ b/ui/src/lib/FormatsList.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { DLFormat } from './types';
+
+  let group = '';
+  export let formats: DLFormat[];
+
+  $: console.log(group);
+</script>
+
+<div class="w-full mt-4">
+  <div class="mx-auto w-full">
+    <fieldset class="grid grid-cols-7 gap-2">
+      {#each formats as format}
+        <div class="relative">
+          <input
+            id="formats"
+            class="absolute opacity-0 w-0 h-0 peer"
+            type="radio"
+            bind:group
+            name="type"
+            value="formats"
+          />
+          <label
+            for="formats"
+            class="
+            [&_p]:text-gray-900 [&_span]:text-gray-500
+            peer-checked:[&_p]:text-white peer-checked:[&_span]:text-blue-100
+            peer-focus:ring-2 peer-focus:ring-white
+            peer-focus:ring-opacity-60 peer-focus:ring-offset-2 peer-focus:ring-offset-blue-300
+            bg-white
+            relative flex
+            cursor-pointer
+            rounded-lg px-5 py-4
+            shadow-md
+            focus:outline-none
+            peer-checked:bg-blue-700/75
+            peer-checked:text-white"
+          >
+            <div class="flex w-full items-center justify-between">
+              <div class="flex items-center">
+                <div class="text-sm">
+                  <p class="font-medium" id={format.format_id}>
+                    {format.resolution}
+                  </p>
+                  <span class="inline" id={format.format_id}>
+                    <span>{format.vcodec}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{format.acodec}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="shrink-0 text-white">
+                <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
+                  <circle cx="12" cy="12" r="12" fill="#fff" opacity="0.2" />
+                  <path
+                    d="M7 13l3 3 7-7"
+                    stroke="#fff"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </label>
+        </div>
+      {/each}
+    </fieldset>
+  </div>
+</div>
--- a/ui/src/lib/FullscreenSpinner.svelte
+++ b/ui/src/lib/FullscreenSpinner.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte';
+</script>
+
+<div
+  class="top-0 left-0 absolute w-full h-full bg-neutral-950/20 flex items-center justify-center z-50"
+>
+  <Spinner />
+</div>
--- a/ui/src/lib/Navbar.svelte
+++ b/ui/src/lib/Navbar.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {
+    ArrowDownUp,
+    Github,
+    HardDrive,
+    Network,
+    Settings,
+  } from 'lucide-svelte';
+  import { downloads, rpcClient, serverApiEndpoint } from './store';
+  import { formatGiB, formatSpeedMiB } from './utils';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import { link } from 'svelte-spa-router';
+
+  let downloadSpeed = 0;
+
+  const unsubscribe = downloads.subscribe((downloads) =>
+    pipe(
+      downloads,
+      O.matchW(
+        () => (downloadSpeed = 0),
+        (d) =>
+          (downloadSpeed = d
+            .map((d) => d.progress.speed)
+            .reduce((a, b) => a + b)),
+      ),
+    ),
+  );
+
+  onDestroy(unsubscribe);
+</script>
+
+<nav
+  class="
+  p-4
+  flex justify-between items-center
+  bg-neutral-100 dark:bg-neutral-800
+  rounded-b-xl
+  border-b dark:border-b-neutral-700
+  shadow-lg
+  select-none"
+>
+  <a use:link={'/'} href="/" class="font-semibold text-lg">yt-dlp WebUI</a>
+
+  <div />
+
+  <div class="flex items-center gap-2 text-sm">
+    <div
+      class="hidden sm:flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+    >
+      <ArrowDownUp size={18} />
+      <div>
+        {formatSpeedMiB(downloadSpeed)}
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 text-sm">
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <HardDrive size={18} />
+        <div>
+          {#await $rpcClient.freeSpace()}
+            Loading...
+          {:then freeSpace}
+            {formatGiB(freeSpace.result)}
+          {/await}
+        </div>
+      </div>
+
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Network size={18} />
+        <div>
+          {$serverApiEndpoint.split('//')[1]}
+        </div>
+      </div>
+
+      <a
+        href="https://github.com/marcopeocchi/yt-dlp-web-ui"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Github size={18} />
+      </a>
+
+      <a
+        use:link={'/settings'}
+        href="/settings"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Settings size={18} />
+      </a>
+    </div>
+  </div>
+</nav>
--- a/ui/src/lib/NewDownload.svelte
+++ b/ui/src/lib/NewDownload.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { downloadTemplates, rpcClient } from './store';
+  import Select from './Select.svelte';
+  import type { DLMetadata } from './types';
+  import FormatsList from './FormatsList.svelte';
+
+  let url: string = '';
+  let args: string = '';
+  let metadata: DLMetadata;
+
+  const download = () =>
+    get(rpcClient).download({
+      url,
+      args,
+    });
+
+  const getFormats = () =>
+    get(rpcClient)
+      .formats(url)
+      ?.then((f) => (metadata = f.result));
+</script>
+
+<div class="w-full px-8">
+  <div class="my-4 font-semibold text-xl">New download</div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2 w-full mb-2">
+    <TextField placeholder="https://..." label="URL" bind:value={url} />
+    <TextField
+      placeholder="arguments separated by space"
+      label="yt-dlp arguments"
+      bind:value={args}
+    />
+    <Select bind:value={args}>
+      <option selected disabled value=""> Select download template </option>
+      {#each $downloadTemplates as template}
+        <option id={template.id} value={template.content}>
+          {template.name}
+        </option>
+      {/each}
+    </Select>
+  </div>
+  <Button class="mt-2" on:click={download}>Download</Button>
+  <Button class="mt-2" on:click={getFormats}>Select format</Button>
+  {#if metadata}
+    <FormatsList formats={metadata.formats} />
+  {/if}
+</div>
--- a/ui/src/lib/RPCClient.ts
+++ b/ui/src/lib/RPCClient.ts
@@ -0,0 +1,195 @@
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from './types'
+
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocket
+  private readonly token?: string
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this.token = token
+    this._socket$ = new WebSocket(
+      token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    )
+  }
+
+  /**
+   * Websocket connection
+   */
+  public get socket() {
+    return this._socket$
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.send(JSON.stringify({
+      ...req,
+      id: this.incrementSeq(),
+    }))
+  }
+
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  /**
+   * Request a new download. Handles arguments sanitization.
+   * @param req payload
+   * @returns 
+   */
+  public download(req: DownloadRequestArgs) {
+    if (!req.url) {
+      return
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
+        }]
+      })
+    }
+
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
+  }
+
+  /**
+   * Requests the available formats for a given url (-f arg)
+   * @param url requested url
+   * @returns 
+   */
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split('?list').at(0)!,
+        }]
+      })
+    }
+  }
+
+  /**
+   * Requests all downloads
+   */
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  /**
+   * Stops and removes a download asynchronously
+   * @param id download id
+   */
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  /**
+   * Stops and removes all downloads
+   */
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the avaliable space on downloads directory
+   * @returns free space in bytes
+   */
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the tree view of the download directory
+   * @returns free space in bytes
+   */
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  /**
+   * Updates synchronously yt-dlp executable
+   * @returns free space in bytes
+   */
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}
--- a/ui/src/lib/Select.svelte
+++ b/ui/src/lib/Select.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<select
+  class="
+  p-2
+  bg-neutral-50
+  border rounded-lg
+  appearance-none
+  text-sm font-semibold
+  focus:outline-blue-300
+  "
+  bind:value
+  {disabled}
+  {placeholder}
+>
+  <slot />
+</select>
--- a/ui/src/lib/Settings.svelte
+++ b/ui/src/lib/Settings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { rpcClient, rpcHost, rpcPort } from './store';
+  import FullscreenSpinner from './FullscreenSpinner.svelte';
+
+  let loading: Promise<any>;
+
+  const update = () => (loading = get(rpcClient).updateExecutable());
+</script>
+
+<div class="w-full">
+  <div class="font-semibold text-lg mb-4">Settings</div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <TextField
+      label="Server address"
+      bind:value={$rpcHost}
+      placeholder="localhost"
+    />
+    <TextField label="Server port" bind:value={$rpcPort} placeholder="3033" />
+  </div>
+
+  <Button class="mt-4" on:click={update}>Update yt-dlp</Button>
+
+  {#if loading}
+    {#await loading}
+      <FullscreenSpinner />
+    {/await}
+  {/if}
+
+  <!-- <CookiesTextField /> -->
+</div>
--- a/ui/src/lib/Spinner.svelte
+++ b/ui/src/lib/Spinner.svelte
@@ -0,0 +1,19 @@
+<div role="status">
+  <svg
+    aria-hidden="true"
+    class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-400"
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+  <span class="sr-only">Loading...</span>
+</div>
--- a/ui/src/lib/TextField.svelte
+++ b/ui/src/lib/TextField.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let label: string;
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<div class="flex flex-col gap-0.5 text-sm font-semibold">
+  <label for=""> {label} </label>
+  <input
+    type="text"
+    class={`p-2 
+    bg-neutral-50 border 
+    rounded-lg 
+    focus:outline-blue-300 
+    dark:bg-neutral-700 dark:border-neutral-900
+    ${clazz}
+    `}
+    on:keyup
+    bind:value
+    {placeholder}
+    {disabled}
+  />
+</div>
--- a/ui/src/lib/ffetch.ts
+++ b/ui/src/lib/ffetch.ts
@@ -0,0 +1,32 @@
+import { tryCatch } from 'fp-ts/TaskEither'
+
+/**
+ *  functional fetch(): composable as TaskEither
+*/
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
+)
+
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
+  const jwt = localStorage.getItem('token')
+
+  if (opt && !opt.headers) {
+    opt.headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
+}
--- a/ui/src/lib/store.ts
+++ b/ui/src/lib/store.ts
@@ -0,0 +1,57 @@
+import * as O from 'fp-ts/lib/Option'
+import { derived, readable, writable } from 'svelte/store'
+import { RPCClient } from './RPCClient'
+import { type CustomTemplate, type RPCResult } from './types'
+
+export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
+export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)
+
+// if authentication is enabled...
+export const rpcWebToken = writable<string>(localStorage.getItem('rpcWebToken') ?? '')
+
+// will be used to access the api and archive endpoints
+export const serverApiEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol}//${$host}`
+    : `${window.location.protocol}//${$host}:${$port}`
+)
+
+// access the websocket JSON-RPC 1.0 to gather downloads state
+export const websocketRpcEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}/rpc/ws`
+    : `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}:${$port}/rpc/ws`
+)
+
+// same as websocket one but using HTTP-POST mainly used to send commands (download, stop, ...)
+export const httpPostRpcEndpoint = derived(
+  serverApiEndpoint,
+  $ep => window.location.port == '' ? `${$ep}/rpc/http` : `${$ep}/rpc/http`
+)
+
+/**
+ * Will handle Websocket and HTTP-POST communications based on the requested method
+*/
+export const rpcClient = derived(
+  [httpPostRpcEndpoint, websocketRpcEndpoint, rpcWebToken],
+  ([$http, $ws, $token]) => new RPCClient($http, $ws, $token)
+)
+
+/**
+ * Stores all the downloads returned by the rpc
+ */
+export const downloads = writable<O.Option<RPCResult[]>>(O.none)
+
+export const cookiesTemplate = writable<string>('')
+
+/**
+ * fetches download templates, needs manual update
+ */
+export const downloadTemplates = readable<CustomTemplate[]>([], (set) => {
+  serverApiEndpoint
+    .subscribe(ep => fetch(`${ep}/api/v1/template/all`)
+      .then(res => res.json())
+      .then(data => set(data)))
+})
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -0,0 +1,90 @@
+export type RPCMethods =
+  | "Service.Exec"
+  | "Service.Kill"
+  | "Service.Clear"
+  | "Service.Running"
+  | "Service.KillAll"
+  | "Service.FreeSpace"
+  | "Service.Formats"
+  | "Service.ExecPlaylist"
+  | "Service.DirectoryTree"
+  | "Service.UpdateExecutable"
+
+export type RPCRequest = {
+  method: RPCMethods
+  params?: any[]
+  id?: string
+}
+
+export type RPCResponse<T> = Readonly<{
+  result: T
+  error: number | null
+  id?: string
+}>
+
+type DownloadInfo = {
+  url: string
+  filesize_approx?: number
+  resolution?: string
+  thumbnail: string
+  title: string
+  vcodec?: string
+  acodec?: string
+  ext?: string
+  created_at: string
+}
+
+type DownloadProgress = {
+  speed: number
+  eta: number
+  percentage: string
+  process_status: number
+}
+
+export type RPCResult = Readonly<{
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+}>
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export type DLMetadata = {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
+}
+
+export type DLFormat = {
+  format_id: string
+  format_note: string
+  fps: number
+  resolution: string
+  vcodec: string
+  acodec: string
+  filesize_approx: number
+}
+
+export type DirectoryEntry = {
+  name: string
+  path: string
+  size: number
+  shaSum: string
+  modTime: string
+  isVideo: boolean
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
+
+export type PlayRequest = Pick<DirectoryEntry, 'path'>
+
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -0,0 +1,93 @@
+import { pipe } from 'fp-ts/lib/function'
+import type { RPCResponse } from "./types"
+
+/**
+ * Validate an ip v4 via regex
+ * @param {string} ipAddr 
+ * @returns ip validity test
+ */
+export function validateIP(ipAddr: string): boolean {
+  let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
+  return ipRegex.test(ipAddr)
+}
+
+export function validateDomain(url: string): boolean {
+  const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+  const [name, slug] = url.split('/')
+
+  return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
+}
+
+export function isValidURL(url: string): boolean {
+  let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  return urlRegex.test(url)
+}
+
+export function ellipsis(str: string, lim: number): string {
+  if (str) {
+    return str.length > lim ? `${str.substring(0, lim)}...` : str
+  }
+  return ''
+}
+
+export function toFormatArgs(codes: string[]): string {
+  if (codes.length > 1) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
+}
+
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`
+
+export const formatSpeedMiB = (val: number) =>
+  `${roundMiB(val)}/s`
+
+export const datetimeCompareFunc = (a: string, b: string) =>
+  new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse<any> {
+  return 'result' in object && 'id' in object
+}
+
+export function mapProcessStatus(status: number) {
+  switch (status) {
+    case 0:
+      return 'Pending'
+    case 1:
+      return 'Downloading'
+    case 2:
+      return 'Completed'
+    case 3:
+      return 'Error'
+    default:
+      return 'Pending'
+  }
+}
+
+export const prefersDarkMode = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)
+
+export const debounce = (callback: Function, wait = 300) => {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: any[]) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback(...args), wait)
+  }
+}
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -0,0 +1,11 @@
+import './app.css'
+import '@fontsource/roboto'
+import '@fontsource/roboto/400-italic.css'
+import '@fontsource/roboto/400.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/ui/src/views/Home.svelte
+++ b/ui/src/views/Home.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import DownloadCard from '../lib/DownloadCard.svelte';
+  import Spinner from '../lib/Spinner.svelte';
+  import { downloads, rpcClient } from '../lib/store';
+  import { datetimeCompareFunc, isRPCResponse } from '../lib/utils';
+
+  const unsubscribe = rpcClient.subscribe(($client) => {
+    setInterval(() => $client.running(), 750);
+
+    $client.socket.onmessage = (ev: any) => {
+      const event = JSON.parse(ev.data);
+      // guards
+      if (!isRPCResponse(event)) {
+        return;
+      }
+      if (!Array.isArray(event.result)) {
+        return;
+      }
+
+      if (event.result) {
+        return downloads.set(
+          O.of(
+            event.result
+              .filter((f) => !!f.info.url)
+              .sort((a, b) =>
+                datetimeCompareFunc(b.info.created_at, a.info.created_at),
+              ),
+          ),
+        );
+      }
+
+      downloads.set(O.none);
+    };
+  });
+
+  onDestroy(unsubscribe);
+</script>
+
+{#if O.isNone($downloads)}
+  <div class="h-[90vh] w-full flex justify-center items-center">
+    <Spinner />
+  </div>
+{:else}
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-2 p-8">
+    {#each pipe( $downloads, O.getOrElseW(() => []), ) as download}
+      <DownloadCard {download} />
+    {/each}
+  </div>
+{/if}
--- a/ui/src/views/SettingsView.svelte
+++ b/ui/src/views/SettingsView.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Settings from '../lib/Settings.svelte';
+</script>
+
+<main
+  class="bg-neutral-100 dark:bg-neutral-800
+  rounded-xl
+  border dark:border-neutral-700
+  shadow-lg
+  m-8 p-4"
+>
+  <Settings />
+</main>
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/ui/svelte.config.js
+++ b/ui/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
Author	SHA1	Message	Date
marcobaobao	46bfb1e80f	Added favicon Closes #139	2024-03-03 20:32:20 +01:00
marcobaobao	1cfda047cb	code refactoring, added router, moved download api path	2024-02-23 10:55:33 +01:00
marcobaobao	65b0c8bc0e	code refactoring	2024-02-12 12:02:23 +01:00
marcobaobao	cc06487b0a	layout refactoring	2024-02-10 09:56:50 +01:00
marcobaobao	63b5f00320	formats selection	2024-02-09 18:20:22 +01:00
marcobaobao	b5c627da28	download templates	2024-02-09 11:08:47 +01:00
marcobaobao	453cd2a373	implementing download	2024-02-09 10:47:18 +01:00
marcobaobao	e7e4d03baf	comments	2024-02-07 15:39:44 +01:00
marcobaobao	834664184b	core functionalities	2024-02-07 15:23:52 +01:00
marcobaobao	9bc8734ef0	test	2024-02-07 15:05:03 +01:00
marcobaobao	49152aa641	core functionalities	2024-02-07 15:03:12 +01:00
marcobaobao	6785ead452	code refactoring	2024-02-07 14:40:27 +01:00
marcobaobao	00df98233d	implemented core stores	2024-02-07 14:35:04 +01:00
Marco	b9b0fde520	Update README.md	2024-02-05 13:40:50 +01:00
deluxghost	6e123c319f	i18n: chinese (#133 )	2024-02-05 08:42:26 +01:00
Calm Zhu	de975f758f	bugfix: port config in config file not work (#132 ) * Update main.go * update * Update main.go fix lint	2024-01-31 19:37:50 +01:00
marcobaobao	d3371ed64c	handle -P or --paths yt-dlp flag	2024-01-26 11:36:39 +01:00
marcobaobao	15766bd016	handle -P param	2024-01-26 11:33:22 +01:00
marcobaobao	c78b3ae174	introduced millionjs compiler	2024-01-16 13:24:08 +01:00
marco.piovanello	3d9a7e9810	fixed nil pointer dereferece closes #128	2024-01-12 10:55:29 +01:00
Marco	8aeffb8d9f	Update README.md	2024-01-10 22:43:41 +01:00
Marco	7904904a37	Update README.md	2024-01-09 14:49:01 +01:00
Marco	6aa2d41988	Logging in webUI, Archive view refactor (#127 ) * test logging * test impl for logging * implemented "live logging", restyle templates dropdown * moved extract audio to downloadDialog, fixed labels * code refactoring * buffering logs	2024-01-09 14:29:18 +01:00
marcobaobao	de1d9e6a3c	added german, code refactoring	2023-12-30 11:06:00 +01:00
Baipyrus	1b46f0dd03	added german language data to frontend (#120 )	2023-12-30 10:20:43 +01:00
Marco	8870602268	Update README.md	2023-12-28 11:15:52 +01:00
Marco	15d9d261a3	Update README.md	2023-12-27 15:47:03 +01:00
Marco	f3302c17cc	115 download button (#119 ) * code refactoring, added file download * code refactoring	2023-12-27 15:38:02 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>